/* ---------------------------------------------------------------------------
   Primary navigation.

   The navbar is CENTRE-SPLIT: the logo is menu item 67, sitting in the middle
   of five top-level items — Procedures | Photos | logo | About | Contact.
   It is not separate chrome. See the navigation traps table in CLAUDE.md.

   The source used Bootstrap dropdowns and a Glyphicons caret. Both are replaced
   here: layout is flexbox, the caret is drawn in CSS.
   --------------------------------------------------------------------------- */

.site-header {
  /* Live's #top paint, measured in BOTH scroll states 14 Sep 2026: the white
     MARBLE (nav-background.jpg, live's own asset — the "white bar" note from
     19 Aug undercounted it), a 2px gold bottom border, and 30px of bottom
     padding. The missing 30px was why our scrolled band collapsed to 69px
     and clipped the logo (Juan Carlos). The gold logo block (::before,
     inset-block 0) spans the padding too, meeting the border like live's. */
  background: var(--color-3) url("../images/nav-background.jpg") no-repeat center top / cover;
  border-bottom: 2px solid var(--color-1);
  /* PINNED — live's #top is position:fixed, z-index 9999, on every page; ours
     scrolled away (caught by Juan Carlos 14 Sep 2026). Sticky rather than
     fixed so no body padding-offset is needed; same rendered behaviour at the
     top of the flow. navigation.js adds --scrolled past 50px, which shrinks
     the logo 184 → 113 with live's own 0.5s ease-out (measured: live header
     136px at rest, 101px scrolled, logo 184 → 113). */
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Live carries the 30px on all desktop widths; its ≤767 header is the
   collapse layout with its own spacing, so the pad stays desktop-only. */
@media (min-width: 768px) {
  .site-header { padding-bottom: 30px; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

/* --- The gold block behind the logo ---------------------------------------
   On interior pages the source draws a gold rectangle centred behind the logo,
   as `#top::before` — full header height, max-width 300px, narrowing at smaller
   widths. On the front page it only appears once the header is scrolled
   (`.front-page #top.nav-up::before`), which is why it reads as an interior-page
   treatment. Reproduced with :not(.home) so it follows the same rule.         */
/* The scrolled FRONT page joins in (home.css sets its content/max-width):
   live's `.front-page #top.nav-up::before` brings the box back at 250px.  */
body:not(.home) .site-header::before,
body.home .site-header--scrolled::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 300px;
  background: var(--color-1);
  display: block;
}

@media (max-width: 1255px) {
  body:not(.home) .site-header::before { max-width: 200px; margin-left: 5px; }
}

@media (max-width: 991px) {
  body:not(.home) .site-header::before {
    left: 0;
    transform: none;
    margin-left: 0;
    max-width: 140px;
  }
}

/* --- Social icons, top left inside the nav -------------------------------- */
.nav-social-wrapper { margin-right: 55px; }

.site-nav .social {
  display: flex;
  align-items: center;
  gap: 54px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav .social a {
  display: inline-flex;
  color: var(--color-2);
}

.site-nav .social a:hover { color: var(--color-1); }
.site-nav .social svg { height: 20px; width: auto; }

/* --- Phone, inline on the right -------------------------------------------- */
.nav-phone {
  margin-left: 49px;
  font-size: var(--font1);
  letter-spacing: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.nav-phone a { color: var(--color-2); }
.nav-phone a:hover { color: var(--color-1); }

/* --- Top level ------------------------------------------------------------ */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.site-nav .nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 20px);
  position: relative;
  z-index: 1;
}

/* Live's desktop rule (mirror: `.navbar-nav>li>a`): GOLD, 600, 4px tracking,
   padding 16px 10px 0. The old 27px/25px padding here was live's ≤991 rule
   adopted as the base — same mistake as the 170px tile height — and the old
   near-black/.12em/500 was never live's (caught by Juan Carlos 14 Sep 2026,
   verified by computed styles on live at an emulated 1440). */
.site-nav .nav-menu > .menu-item > a {
  display: block;
  padding: 16px 10px 0;
  color: var(--color-1);
  font-size: var(--font2c);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  white-space: nowrap;
}

.site-nav .nav-menu > .menu-item > a:hover,
.site-nav .nav-menu > .menu-item.is-current > a,
.site-nav .nav-menu > .menu-item.is-ancestor > a {
  color: var(--color-hover-10);
}

/* --- The centred logo ----------------------------------------------------- */
.site-nav .main-logo { margin-inline: clamp(10px, 6vw, 80px); }
.site-nav .main-logo > a { padding: 0; font-size: 0; }

.site-nav__logo-img {
  width: 184px;
  height: auto;
  max-width: 100%;
  position: relative;
  top: 8px;
  transition: width .5s ease-out;         /* live's nav-up logo transition */
}

.site-header--scrolled .site-nav__logo-img { width: 113px; }

/* --- Caret (replaces the Glyphicons span) --------------------------------- */
.site-nav .nav-menu > .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: .5em;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
  transition: transform var(--transition-base);
}
.site-nav .nav-menu > .menu-item-has-children.is-expanded > a::after,
.site-nav:not(.nav-hover-js) .nav-menu > .menu-item-has-children:hover > a::after {
  transform: translateY(2px) rotate(180deg);
}

/* --- Dropdowns ------------------------------------------------------------
   Up to four levels deep (0–3). Level 1 drops down; deeper levels fly out to
   the right. Shown on hover and on keyboard focus.                          */
/* Panel repainted 14 Sep 2026 to live's computed values (the gold panel was
   this file's invention): WHITE, min-width 160, padding 6px 0, no border,
   no radius, no shadow — GrowthMed strips Bootstrap's dropdown chrome. */
.site-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  /* Bootstrap's own `.dropdown-menu { z-index: 1000 }`, dropped with the
     framework and re-learned the hard way: the centred logo is a LATER
     sibling in the menu DOM, so without this the level-3/4 flyouts that
     march rightward toward the middle of the bar paint UNDER the logo box
     and its link swallows their clicks (Juan Carlos, 14 Sep 2026 —
     "Breast Reduction Recovery" was unclickable). */
  z-index: 1000;
  min-width: 160px;
  padding: 6px 0;
  background: var(--color-3);
  /* CLOSED MENUS ARE display:none, NOT visibility:hidden.
     A visibility:hidden box still occupies layout and still extends the
     document's scroll width, so menus nobody could see were pushing the PAGE
     sideways — 61px at 1280 from a top-level dropdown, 116px at 768 from the
     nested ones. Removing them from layout kills that whole class of bug at
     every width, and it is why there is no fade on the sub-menus: a display
     change cannot be transitioned. Correctness over the flourish. */
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.site-nav .menu-item { position: relative; }

/* Open states. With JS (nav-hover-js) the class is set by navigation.js's
   hover-intent timers — raw :hover closed with zero tolerance and made the
   deep flyouts unusable. The :hover selector survives only as the no-JS
   fallback; :focus-within keeps keyboard navigation working either way.    */
.site-nav .menu-item.is-expanded > .sub-menu,
.site-nav:not(.nav-hover-js) .menu-item:hover > .sub-menu,
.site-nav .menu-item:focus-within > .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Invisible bridge across the seam between a row and its flyout, so the
   pointer never falls in a crack while crossing panels. */
.site-nav .sub-menu .sub-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 12px;
}

.site-nav .nav-menu > .menu-item:nth-last-child(-n+2) .sub-menu .sub-menu::before {
  right: auto;
  left: 100%;
}

/* Deeper levels fly out to the RIGHT of their parent — which pushes them past
   the viewport on anything narrower than about 1500px. They are
   `visibility: hidden`, so nothing is visible, but a hidden box still occupies
   layout and extends the document's scroll width: measured 116px of horizontal
   page scroll at 768, from a menu nobody can see.

   Flipping them leftward keeps them inside the viewport at every width, and a
   second-level menu opening back over its parent column is the conventional
   behaviour anyway. Same class of bug as the top-level dropdowns, which are
   anchored right for the last two items further down. */
/* Nested levels fly out to the RIGHT of their parent, as before. This is safe
   again now that a closed menu is display:none — only an OPEN menu can reach
   the edge, and the last two top-level dropdowns are right-anchored below so
   their children open back across the bar rather than off-screen. */
.site-nav .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  right: auto;
}

.site-nav .nav-menu > .menu-item:nth-last-child(-n+2) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}

/* Items are live's: 15.4px (Bootstrap's 14px dropdown context × 1.1em),
   sentence case, near-black, nowrap (items 4137/3720 still break on their
   own <br>), hover = Bootstrap's darkened row, current page = gold. The
   32px right padding is live's, and it is where the flyout arrow sits.     */
.site-nav .sub-menu a {
  display: block;
  position: relative;
  padding: 3px 32px 3px 15px;
  color: var(--color-2);
  font-size: 15.4px;
  font-weight: 400;
  line-height: 1.43;
  white-space: nowrap;
}

/* GOLD hover, and the whole OPEN TRAIL stays gold — live's own rules
   (`.dropdown-menu>li>a:hover` and `.dropdown-menu>li:hover>a`, both
   `background:none; color:var(--color-1); text-shadow:0 0 1px #fff`),
   which override the Bootstrap grey-row hover this block briefly copied
   (caught by Juan Carlos 14 Sep 2026 — the first stylesheet scan stopped
   at Bootstrap's rule and missed GrowthMed's later one). The is-expanded
   selector keeps the trail lit through the JS grace period.               */
.site-nav .sub-menu a:hover,
.site-nav .sub-menu li:hover > a,
.site-nav .sub-menu .menu-item.is-expanded > a {
  color: var(--color-1);
  background: none;
  text-shadow: 0 0 1px #fff;
}

.site-nav .sub-menu .is-current > a,
.site-nav .sub-menu .is-ancestor > a { color: var(--color-1); }

/* Right-pointing marker on dropdown items that open a flyout. Live's DOM
   shows it via script on hover; a resting CSS caret reads the same in the
   comparison screenshots and works without their JS. */
.site-nav .sub-menu .menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: currentColor;
}

/* --- Social + phone CTA --------------------------------------------------- */
.site-nav__social {
  display: flex;
  gap: 14px;
  align-items: center;
}

.site-nav__cta { padding: 12px 28px; font-size: var(--font8); }

/* --- Mobile ---------------------------------------------------------------
   991px is the dominant breakpoint in the source (13 of 67 media blocks).   */
.site-header__toggle { display: none; }

/* COLLAPSE AT 767, NOT 991.
   Production keeps the full horizontal nav all the way down to 768 and only
   swaps to the toggle at ≤767 (`header .navbar-collapse.collapse
   { display:none!important }`). Ours collapsed at 991, so a 768 tablet got a
   hamburger where production shows the menu — and the header measured 32px tall
   against production's 142.

   The phone and social icons are hidden separately at ≤1200, which is where
   production hides them. */
/* MOBILE CHROME, rebuilt 15 Sep 2026 against live's phone layout (Juan Carlos's
   iPhone screenshots + live at an emulated 375):
     - standalone logo top-LEFT (live's a.logo-mobile; ours was inside the
       collapsed menu, so the header showed no logo at all)
     - GOLD hamburger top-RIGHT (ours was white, left)
     - the menu is a GOLD DRAWER sliding in from the right (~85% width) with
       social icons, the phone number, and tap-to-expand submenu branches —
       ours was a black dropdown with every submenu permanently expanded
     - the open hamburger becomes a white ✕ (live keeps its ✕ with the pushed
       page; ours stays at the top right, same affordance)                    */
.site-header__mobile-logo { display: none; }

@media (max-width: 767px) {
  .site-header__mobile-logo {
    display: block;
    padding: 22px 0 24px;
    line-height: 0;
  }
  .site-header__mobile-logo img {
    width: 113px;
    height: auto;
    display: block;
    position: relative;   /* above the gold ::before box, like the menu logo */
    z-index: 1;
  }

  .site-header__toggle {
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 6;            /* stays clickable above the open drawer, as the ✕ */
  }
  .site-header__toggle-bar,
  .site-header__toggle-bar::before,
  .site-header__toggle-bar::after {
    content: "";
    position: absolute;
    left: 4px;
    width: 24px;
    height: 3px;
    background: var(--color-1);
    transition: transform var(--transition-base), background var(--transition-base);
  }
  .site-header__toggle-bar { top: 15px; }
  .site-header__toggle-bar::before { top: -8px; left: 0; }
  .site-header__toggle-bar::after  { top:  8px; left: 0; }

  /* Open state: the bars fold into a white ✕ (white on the gold drawer). */
  #nav-toggle[aria-expanded="true"] .site-header__toggle-bar { background: transparent; }
  #nav-toggle[aria-expanded="true"] .site-header__toggle-bar::before,
  #nav-toggle[aria-expanded="true"] .site-header__toggle-bar::after { background: var(--color-3); }
  #nav-toggle[aria-expanded="true"] .site-header__toggle-bar::before { transform: translateY(8px) rotate(45deg); }
  #nav-toggle[aria-expanded="true"] .site-header__toggle-bar::after  { transform: translateY(-8px) rotate(-45deg); }

  /* The drawer. position:fixed resolves against the viewport (the header has
     no transform), so it runs the full screen height on both the sticky
     interior header and the fixed homepage one. */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(85vw, 400px);
    background: var(--color-1);
    display: block;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .35s ease, visibility .35s;
    overflow-y: auto;
    padding: 30px 28px 60px;
    z-index: 5;
  }
  .site-nav.is-open {
    visibility: visible;
    transform: none;
  }

  /* Drawer contents — the ID selector outguns home.css's body.home gold-link
     rules, which would otherwise paint gold text on the gold drawer. */
  #primary-nav .nav-social-wrapper { display: block; margin: 0 0 18px; }
  #primary-nav .social { gap: 28px; }
  #primary-nav .social a { color: var(--color-3); }
  #primary-nav .social svg { height: 22px; }

  #primary-nav .nav-phone {
    display: block;
    margin: 0 0 26px;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1px;
  }
  #primary-nav .nav-phone a { color: var(--color-3); }

  .site-nav .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  #primary-nav .nav-menu > .menu-item > a {
    padding: 12px 0;
    color: var(--color-3);
    font-size: 15px;
    letter-spacing: 4px;
  }

  /* Branches are COLLAPSED until tapped (live's drawer). One tap on a
     top-level parent shows its whole tree; navigation.js adds is-sub-open. */
  .site-nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    background: transparent;
    padding: 0 0 6px 16px;
    min-width: 0;
    display: none;
  }
  .site-nav .menu-item.is-sub-open .sub-menu { display: block; }
  .site-nav .sub-menu .sub-menu { left: auto; }

  #primary-nav .sub-menu a {
    color: var(--color-3);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: normal;
    padding: 8px 0;
  }
  #primary-nav .sub-menu a:hover,
  #primary-nav .sub-menu li:hover > a,
  #primary-nav .sub-menu .is-current > a,
  #primary-nav .sub-menu .is-ancestor > a {
    color: var(--color-3);
    text-shadow: none;
    text-decoration: underline;
  }
  #primary-nav .sub-menu .menu-item-has-children > a::after { content: none; }

  /* The top-level caret rotates when its branch is open. */
  .site-nav .nav-menu > .menu-item-has-children.is-sub-open > a::after {
    transform: translateY(2px) rotate(180deg);
  }

  /* The desktop logo menu item stays out of the drawer — the standalone
     mobile logo above replaces it. */
  .site-nav .main-logo { display: none; }
}

/* --- Header height ---------------------------------------------------------
   MEASURED on the live site: header 104px. The logo is a MENU ITEM (item 67),
   so it inherits the nav link's 27px/25px vertical padding — 91 + 52 = 143,
   which is exactly what ours measured. Production's logo link carries no
   vertical padding; the 91px logo sets the height and the bar adds 13px above.
   The walker marks that item `main-logo`. */
.site-nav .nav-menu > .menu-item.main-logo > a {
  padding-top: 0;
  padding-bottom: 0;
}

.site-nav .nav-menu { align-items: center; }

.site-header__inner { padding-top: 13px; }

/* Production keeps the 13px bar padding down to 768 (.navbar padding 13px 0 0)
   and zeroes it at ≤767 (.navbar { margin-top: 0 }). */
@media (max-width: 767px) {
  .site-header__inner { padding-top: 0; }
}

/* Production hides the phone and the social icons from the header at ≤1200:
     @media (max-width:1200px) { .nav-social-wrapper, .nav-phone { display:none } }
   We were carrying both all the way down to the mobile breakpoint, which left
   the bar crowded on laptops and tablets. */
@media (max-width: 1200px) {
  .nav-social-wrapper,
  .nav-phone { display: none; }
}

/* Dropdowns near the right edge anchor to the RIGHT.
   The About sub-menu is absolutely positioned under its parent and is 260px
   wide; at 1280 that put its right edge at 1341 — 61px past the viewport. It is
   `visibility: hidden` so nothing is visible, but a hidden box still occupies
   layout and still extends the document's scroll width, so the whole PAGE
   scrolled sideways by exactly that much. `display:none` would fix it too but
   would kill the open/close transition.

   Applied to the last two top-level items rather than a single fixed one, so
   adding a menu item cannot silently reintroduce it. */
.site-nav .nav-menu > .menu-item:nth-last-child(-n+2) > .sub-menu {
  left: auto;
  right: 0;
}

/* Production shrinks the nav links so the horizontal menu still fits at 768:
     @media (max-width:991px) { .navbar-nav>li>a { font-size:.7em; padding:27px 10px 25px } }
   Without it our menu was 135px wider than the viewport and the page scrolled
   sideways — the nav only *looks* fine because the overflow is off-screen. */
@media (max-width: 991px) {
  .site-nav .nav-menu > .menu-item > a {
    font-size: .7em;
    padding: 27px 10px 25px;
    letter-spacing: .08em;
  }

  .site-nav__logo-img { width: 150px; height: auto; }
}


/* --- Mobile conversion bar (live's #bottom) ---------------------------------
   Fixed PHOTOS / CALL / EMAIL pills at the bottom of every page, PHONE ONLY —
   verified display:none on live at desktop widths. Pill metrics measured on
   live at 375: gold fill, white 2px border, 5px radius, 62px tall, 12px/700
   uppercase at 1.2px tracking, icon block above the label; the CALL pill is
   the wide one. */
.mobile-cta { display: none; }

@media (max-width: 767px) {
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    gap: 8px;
    padding: 0 10px 10px;
  }

  .mobile-cta__link {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 62px;
    background: var(--color-1);
    border: 2px solid var(--color-3);
    border-radius: 5px;
    color: var(--color-3);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-align: center;
  }

  .mobile-cta__link--call { flex: 1.8 1 0; }

  .mobile-cta__link svg { height: 18px; width: auto; display: block; }
  .mobile-cta__link:hover { color: var(--color-3); }
}

/* Drawer order + alignment, matched to live: social row, then the phone,
   then the menu — all LEFT-aligned (the desktop bar centres; the drawer
   does not). */
@media (max-width: 767px) {
  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  #primary-nav .nav-social-wrapper { order: 1; margin-right: 0; }
  #primary-nav .nav-phone          { order: 2; margin-left: 0; white-space: normal; }
  #primary-nav .nav-menu           { order: 3; align-items: flex-start; }
  #primary-nav .nav-menu > .menu-item > a,
  #primary-nav .sub-menu a { text-align: left; }
}