/* ============================================================
   RK HEALTH — HEADER-ONLY STYLESHEET
   Extracted from the global style.css. Load this on any page that
   uses the shared header markup (header.html):
     <link rel="stylesheet" href="css/header.css">
   Safe to load together with footer.css (shared tokens/buttons
   are duplicated identically in both).
   Breakpoints: Desktop ≥1100px · Tablet 768–1099px · Mobile <768px
   ============================================================ */

/* ---------- Design tokens (shared) ---------- */
:root {
  --navy:        #0a1f4d;
  --royal:       #09318A;
  --blue:        #2a7fd4;
  --blue-dark:   #1f6bb8;
  --sky:         #7fb0e6;
  --gold:        #EFBB4B;
  --gold-light:  #f3c869;
  --teal-bright: #1aa39a;
  --green:       #25d366;
  --font: 'Inter', system-ui, sans-serif;
}

/* ---------- Minimal base the header relies on ---------- */
.site-header img { max-width: 100%; display: block; }
.site-header ul { list-style: none; margin: 0; padding: 0; }
.site-header a { text-decoration: none; transition: color .2s ease; }

/* ---------- Buttons (used by the Appointment CTA) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}
.btn--gold { background: var(--gold); color: #000000; }
.btn--gold:hover {
  background: var(--gold-light);
  color: #000000;
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -14px rgba(239, 187, 75, .7);
}

/* ============================================================
   HEADER — utility bar
   ============================================================ */
.utility-bar { background: var(--navy); }

.utility-bar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 56px;
}

.utility-bar__links {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
}
.utility-bar__links a { color: #ffffff; padding: 0 24px; }
.utility-bar__links a:hover { color: var(--gold-light); }
.utility-bar__divider { width: 1px; height: 18px; background: rgba(255, 255, 255, .35); }

/* Mobile-only email (hidden on desktop; the link list already includes it) */
.utility-bar__email { display: none; font-size: 12px; font-weight: 700; color: #ffffff; }

.utility-bar__socials {
  position: absolute;
  right: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- Social icons ---------- */
.social {
  width: 36px; height: 36px;
  border-radius: 9px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.social:hover { color: #ffffff; transform: translateY(-2px); }
.social--facebook  { background: #1877f2; }
.social--instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.social--youtube   { background: #ff0000; }
.social--whatsapp  { background: var(--green); }

/* ============================================================
   HEADER — main navigation
   ============================================================ */
.main-nav { background: #ffffff; position: relative; z-index: 40; }

.main-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 56px;
}

.main-nav__brand img { height: 100px; width: auto; }

.main-nav__right { display: flex; align-items: center; gap: 34px; }

.main-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.main-nav__links a { color: #1a1a1a; }
.main-nav__links a:hover,
.main-nav__links a.is-active { color: var(--blue); }

.main-nav__appointment { font-weight: 600; }

.main-nav__emergency { display: flex; align-items: center; gap: 12px; }
.main-nav__emergency-icon { font-size: 36px; color: var(--teal-bright); line-height: 1; }
.main-nav__emergency-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #1a1a1a;
  white-space: nowrap;
}
.main-nav__emergency-number {
  display: block;
  font-size: 23px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.main-nav__emergency-number:hover { color: var(--blue); }

/* Mobile-only nav controls (hidden on desktop) */
.main-nav__call,
.main-nav__hamburger { display: none; }

/* Mobile dropdown menu */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e6edf6;
  border-bottom: 1px solid #e6edf6;
  box-shadow: 0 24px 44px -24px rgba(13, 42, 82, .4);
  padding: 8px 16px 16px;
  flex-direction: column;
}
.mobile-menu a {
  padding: 14px 4px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  border-bottom: 1px solid #eef2f8;
}
.mobile-menu a.is-active { color: var(--blue); font-weight: 800; }
.mobile-menu__appointment {
  margin-top: 10px;
  border-bottom: none;
  height: 48px;
  color: #000000;
}
.main-nav.is-open .mobile-menu { display: flex; }

.main-nav__hamburger { background: none; border: none; }
.main-nav__hamburger .icon-close { display: none; }
.main-nav.is-open .main-nav__hamburger .icon-menu  { display: none; }
.main-nav.is-open .main-nav__hamburger .icon-close { display: block; }

/* ============================================================
   TABLET — 768px to 1099px
   ============================================================ */
@media (max-width: 1099px) {
  /* Switch to space-between so links never run under the socials */
  .utility-bar__inner { padding: 0 32px; justify-content: space-between; }
  .utility-bar__links a { padding: 0 10px; font-size: 13px; }
  .utility-bar__links li:first-child a { padding-left: 0; }
  .utility-bar__socials { position: static; right: auto; gap: 10px; }
  .social { width: 32px; height: 32px; }

  .main-nav__inner { padding: 0 32px; height: 96px; }
  .main-nav__brand img { height: 72px; }
  .main-nav__right { gap: 20px; }
  .main-nav__links { display: none; }          /* collapse links, keep CTA + emergency */
  .main-nav__hamburger { display: flex; align-items: center; justify-content: center; }
}

/* ============================================================
   MOBILE — below 768px
   ============================================================ */
@media (max-width: 767px) {
  .main-nav__appointment { display: none !important; }
}

@media (max-width: 767px) {
  .utility-bar__inner {
    height: auto;
    padding: 8px 16px;
    justify-content: space-between;
  }
  .utility-bar__links { display: none; }
  .utility-bar__email { display: block; }
  .utility-bar__socials { position: static; gap: 8px; }
  .social { width: 26px; height: 26px; border-radius: 7px; }
  .social svg { width: 13px; height: 13px; }

  .main-nav__inner { height: 68px; padding: 0 16px; }
  .main-nav__brand img { height: 52px; }
  .main-nav__right { gap: 10px; }
  .main-nav__links,
  .main-nav__appointment,
  .main-nav__emergency { display: none; }

  .main-nav__call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
  }
  .main-nav__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid #dbe4f0;
    background: #ffffff;
    color: var(--navy);
  }
}