/* ============================================================
   RFC Mobile Nav Fix — header jumble + hamburger
   Desktop (>1050px) is UNTOUCHED: hamburger + menu are hidden here.
   Only engages at <=1050px, exactly where .nav-links already hide.
   Companion: /js/nav-mobile.js (injects the button + menu markup).
   Design system: navy #0B1F3A, gold #C9A84C / #E0C47A. WCAG AAA.
   ============================================================ */

/* Hidden by default = desktop. JS injects these elements; CSS gates them. */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

@media (max-width: 1050px) {
  /* Tighten the top row. .brand keeps margin-right:auto, pushing actions right. */
  .nav-inner { gap: .6rem; }

  /* Compact the New Patient CTA so it shares the row cleanly (Option A: kept visible). */
  .nav-cta { padding: .6rem 1rem; font-size: .66rem; letter-spacing: .1em; white-space: nowrap; }

  /* Hamburger — gold on navy, 44x44 touch target, visible focus ring. */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; margin-left: .1rem;
    background: transparent; border: 1px solid rgba(201,168,76,.45);
    border-radius: 3px; color: var(--gold, #C9A84C); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s ease, background .2s ease;
  }
  .nav-toggle:hover { border-color: rgba(201,168,76,.9); background: rgba(201,168,76,.08); }
  .nav-toggle:focus-visible { outline: 3px solid var(--gold, #C9A84C); outline-offset: 2px; }
  .nav-toggle svg { width: 22px; height: 22px; display: block; }

  /* Slide-down menu panel, tucked under the fixed bar. */
  .mobile-menu {
    display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 55;
    background: rgba(11,31,58,.98);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201,168,76,.35);
    box-shadow: 0 14px 34px rgba(0,0,0,.38);
    padding: 5.4rem 1.4rem 1.8rem;
    transform: translateY(-100%);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
  }
  .mobile-menu.open { transform: translateY(0); }

  .mobile-menu__links { display: flex; flex-direction: column; gap: 0; }
  .mobile-menu__links a {
    display: flex; align-items: center; min-height: 48px;
    padding: .4rem .2rem;
    font-family: var(--sans, "Jost", system-ui, sans-serif);
    font-size: 1rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(201,168,76,.14);
  }
  .mobile-menu__links a:last-child { border-bottom: none; }
  .mobile-menu__links a:focus-visible { outline: 3px solid var(--gold, #C9A84C); outline-offset: -3px; }

  /* Primary CTA inside the menu — gold, navy text, 52px target. */
  .mobile-menu__cta {
    margin-top: 1.1rem; justify-content: center; min-height: 52px;
    background: linear-gradient(135deg, var(--gold, #C9A84C), var(--gold-light, #E0C47A));
    color: var(--navy, #0B1F3A) !important; font-weight: 600;
    border-radius: 3px; border-bottom: none !important;
  }
}

/* Phone: shrink logo to spec (32px) and size the wordmark to sit on tidy lines. */
@media (max-width: 768px) {
  .brand-mark { width: 32px; height: 32px; }
  .brand-name { font-size: .84rem; line-height: 1.05; }
}

/* Narrow phones: drop the header sub-tagline (it repeats in the hero) and slim the CTA. */
@media (max-width: 600px) {
  .brand-sub { display: none !important; } /* overrides inline style="display:block" */
  .nav-cta { padding: .5rem .85rem; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
  .nav-toggle { transition: none; }
}