/* ============================================================================
   BHRC site chrome: header + footer.
   GENERATED FILE - do not hand-edit on the server.
   Source: Homepage-Redesign/homepage-redesign-v2.html + footer-v2.html
   Rebuild: python3 build-chrome.py
   Loaded by header-v3.php.

   Deliberately EXCLUDES the v2 prototype's global reset (*, body, a, img,
   h1-h3, section). Those would restyle every existing page on the site.
   See the docstring in build-chrome.py.
   ============================================================================ */

@font-face{
  font-family:'Century Gothic Pro';
  src:url('https://www.bhrcenter.com/wp-content/themes/twentytwentyone-child/assets/fonts/CenturyGothic.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Century Gothic Pro';
  src:url('https://www.bhrcenter.com/wp-content/themes/twentytwentyone-child/assets/fonts/CenturyGothic-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
/* =========================================================
   OVME's layout language + BHRC brand colors + rounded edges
   Palette + radii + font taken from the location LP template
   (Botox $9 / Lip Filler $499 / Morpheus8, WP 6345 lineage)
   ========================================================= */


:root{
  --navy:#1E3448;
  --teal:#5B9EAD;
  --teal-dk:#437d8b;
  --bg:#F7F9FB;
  --card:#FAFBFD;
  /* Warm ground borrowed from Skin Pharm, used only for the skincare block so it
     reads as a different room from the cool clinical sections around it. */
  --warm:#FAF6F2;
  --warm-tint:#F3ECE5;
  /* Light blue panel ground for the CEO and Cell Factor blocks. A 22% tint of the
     brand's own --blue-20. The first pass used #DCEAEE, which was a hand-mixed tint
     duplicating a token the guide already defines. Use the ramp, do not mix new blues.
     --teal-ink is the accent for TEXT on that panel: --teal-dk only reaches 3.8:1 on
     this ground, which fails on the 10px uppercase eyebrows. --teal-ink is 5.9:1. */
  --panel:#E3EFF2;   /* = brand guide --blue-20, do not invent a new tint */
  --panel-line:rgba(30,52,72,.16);
  --teal-ink:#2F5C68;
  --muted:rgba(30,52,72,.62);
  --muted-on-dark:rgba(255,255,255,.72);
  --border:rgba(30,52,72,.12);
  --font:'Century Gothic Pro','Century Gothic',AppleGothic,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r-lg:24px;    /* big media */
  --r-md:18px;    /* cards */
  --r-sm:14px;    /* small cards */
  --pad:clamp(20px,5vw,72px);
  --gap:clamp(38px,4.6vw,74px);
  --shadow:0 8px 24px rgba(30,52,72,.07);
  --shadow-hover:0 16px 34px -14px rgba(30,52,72,.3);
}

/* ---------------------- legacy theme reconciliation --------------------------
   These are the only rules in this file that reach outside .hdr / .ftr. They are
   safe because this stylesheet is loaded ONLY by header-v3.php, so pages still on
   the old header keep their existing behaviour untouched during the transition.

   1) main.css sets  .header-area{position:absolute;top:0}  and  body{margin-top:25px}
      so the OLD header floats over the page. The v3 header is sticky and sits in
      normal flow, so that 25px becomes a dead gap above it.
   2) Responsive Menu Pro injects its own hamburger and slide-out drawer through
      wp_body_open, i.e. from outside header.php, so replacing the header does not
      remove it. The v3 header ships its own drawer (.mnav), and without this the
      user sees two hamburgers on mobile.
   ---------------------------------------------------------------------------- */
body{margin-top:0}
.rmp_menu_trigger,.rmp-container,#rmp-container-703,.rmp-menu-trigger-boring{display:none!important}


/* Reset the v2 prototype relied on, re-scoped so it cannot leak into main.css
   or bootstrap. Only .hdr and .ftr subtrees are affected. */
.hdr,.hdr *,.mnav,.mnav *,.ftr,.ftr *{box-sizing:border-box}
/* The v2 prototype relied on a global body{color:var(--navy)} that is deliberately
   NOT shipped (it would restyle every existing page). Elements inside the chrome that
   never set their own colour - notably .mnav summary, the mobile drawer's top-level
   rows - therefore inherited browser-default BLACK instead of brand navy. Re-establish
   the inherited colour, scoped to the chrome only. */
.hdr,.mnav{color:var(--navy)}
.hdr p,.hdr ul,.hdr h4,.mnav p,.mnav ul,.ftr p,.ftr ul,.ftr h4{margin:0;padding:0}
.hdr ul,.mnav ul,.ftr ul{list-style:none}
.hdr img,.mnav img,.ftr img{max-width:100%;display:block}
.hdr a,.mnav a,.ftr a{text-decoration:none}
/* main.css sets a global sticky/absolute .header-area; the new chrome replaces it,
   but legacy pages may still carry the class, so do not touch it here. */

/* ---------------------------- SITE HEADER ---------------------------------- */
/* ---------- SITE HEADER ----------
   The live nav has seven items of which two are dead links (#) and two point at the
   same page, and it carries no booking CTA. This collapses the three overlapping
   service categories into one Treatments panel, promotes booking, and demotes
   franchise recruitment out of the consumer nav. */
.hdr{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border-bottom:1px solid var(--border);transition:box-shadow .3s var(--ease)}
.hdr.stuck{box-shadow:0 6px 26px -18px rgba(30,52,72,.5)}
/* Three zones: nav | logo | nav. The logo sits dead centre and the menu breaks either
   side of it rather than crowding the right. */
.hdr-in{position:relative;max-width:1560px;margin:0 auto;padding:0 clamp(18px,3vw,40px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(12px,1.8vw,28px);height:88px;transition:height .3s var(--ease)}
.hdr.stuck .hdr-in{height:72px}
.hdr-logo{grid-column:2;display:flex;align-items:center;justify-content:center}
.hdr-logo img{height:38px;width:auto;transition:height .3s var(--ease)}
.hdr.stuck .hdr-logo img{height:32px}

.nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px)}
.nav-l{grid-column:1;justify-content:flex-start}
.nav-r{grid-column:3;justify-content:flex-end}
.nav>a,.nav>.has-menu>button{font-family:var(--font);font-size:.8rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--navy);background:none;border:0;
  cursor:pointer;padding:6px 0;position:relative;white-space:nowrap}
.nav>a::after,.nav>.has-menu>button::after{content:"";position:absolute;left:0;right:100%;
  bottom:0;height:1.5px;background:var(--teal);transition:right .3s var(--ease)}
.nav>a:hover::after,.nav>.has-menu:hover>button::after{right:0}

/* Treatments panel */
.has-menu{position:relative}
/* The 4-column Treatments panel is far wider than its trigger, so it is positioned
   against .hdr-in instead: position:static removes it as the offset parent, and the
   panel then centres in the header rather than on a button near the left edge. */
.has-menu.wide{position:static}
.menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);max-width:min(94vw,1060px);
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:0 24px 54px -26px rgba(30,52,72,.4);padding:clamp(20px,2.2vw,30px);
  display:grid;grid-template-columns:repeat(4,minmax(158px,1fr));gap:clamp(18px,2vw,30px);
  opacity:0;visibility:hidden;transition:opacity .26s var(--ease),transform .26s var(--ease),
  visibility .26s}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
/* Right-hand nav panels (About) are centred under their trigger, which sits at the
   very right edge of the bar. At viewports at or below the bar's max-width the panel
   ran past the right edge and gave the whole page a horizontal scrollbar - 57px of
   overflow at 1440, a very common laptop width. Anchor the right-side panels to their
   right edge instead of centring them. .wide (the Treatments mega panel) is
   position:static and spans the bar, so it is unaffected. */
.nav-r .has-menu:not(.wide) .menu{left:auto;right:0;transform:translateX(0) translateY(-6px)}
.nav-r .has-menu:not(.wide):hover .menu,
.nav-r .has-menu:not(.wide):focus-within .menu{transform:translateX(0) translateY(0)}
.menu h4{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-dk);margin-bottom:11px}
/* Cool-tone model thumbnail heading each column, from the same white-background set
   the services row uses, so the menu matches the page rather than introducing a
   second photographic style. */
.menu-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 22%;
  border-radius:var(--r-sm);margin-bottom:12px;display:block;
  filter:saturate(.94);transition:transform .5s var(--ease)}
.menu>div:hover .menu-thumb{transform:scale(1.03)}
.menu a{display:block;font-size:.83rem;color:var(--navy);padding:5px 0;
  transition:color .2s var(--ease),padding-left .2s var(--ease)}
.menu a:hover{color:var(--teal-dk);padding-left:4px}
/* concern chips run the full width under the four columns */
.menu-concerns{grid-column:1/-1;border-top:1px solid var(--border);padding-top:16px;margin-top:4px}
.menu-concerns .chips-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.menu-concerns .chips-row a{padding:7px 14px;border:1px solid var(--border);border-radius:50px;
  font-size:.76rem}
.menu-concerns .chips-row a:hover{border-color:var(--teal);padding-left:14px}
/* "coming soon" nav item: present, clearly not clickable */
.nav .soon{font-family:var(--font);font-size:.8rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;cursor:default;
  display:flex;align-items:center;gap:7px}
.nav .soon i{font-style:normal;font-size:.55rem;letter-spacing:.1em;color:var(--teal-dk);
  background:var(--accent-bg,#E8F1F6);border-radius:50px;padding:3px 8px}
.mnav .soon{display:flex;justify-content:space-between;align-items:center;padding:16px 0;
  border-bottom:1px solid var(--border);font-size:.78rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.mnav .soon i{font-style:normal;font-size:.58rem;color:var(--teal-dk);
  background:#E8F1F6;border-radius:50px;padding:4px 10px;letter-spacing:.08em}

.hdr-cta{display:none;align-items:center;gap:12px}
.hdr-tel{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--navy);white-space:nowrap}
.hdr-book{background:var(--teal);color:#fff;font-size:.74rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;padding:12px 22px;border-radius:50px;
  white-space:nowrap;transition:background .25s var(--ease),transform .25s var(--ease)}
.hdr-book:hover{background:var(--teal-dk);transform:translateY(-1px)}
/* .nav>a is (0,1,1) and was beating .hdr-book (0,1,0), collapsing the pill's padding
   and forcing its text back to navy. Match the specificity to win it back. */
.nav>a.hdr-book{color:#fff;background:var(--teal);padding:14px 26px;
  border-radius:50px;font-size:.74rem}
.nav>a.hdr-book:hover{background:var(--teal-dk)}
.nav>a.hdr-book::after{display:none}

/* burger + mobile panel */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .3s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* top comes from --mnav-top, set to the header's measured bottom edge when the
   drawer opens. A hardcoded offset assumed the header was flush with the viewport
   top, which is false whenever anything sits above it (the preview bar here, a promo
   band on the live site): the drawer opened at 64px while the header ran to 179px,
   hiding its first ~120px behind the header. */
.mnav{display:none;position:fixed;inset:var(--mnav-top,78px) 0 0 0;z-index:79;background:#fff;
  overflow-y:auto;padding:clamp(20px,5vw,28px);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mnav.open{opacity:1;transform:none;pointer-events:auto}
.mnav details{border-bottom:1px solid var(--border)}
.mnav summary{list-style:none;cursor:pointer;padding:16px 0;font-size:.78rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;display:flex;justify-content:space-between;
  align-items:center;gap:12px}
.mnav summary::-webkit-details-marker{display:none}
/* Expand affordance for the mobile drawer. The default disclosure triangle is
   hidden above, and the v2 comp never replaced it, so every expandable row read as
   a dead link. A + that becomes a - on open, drawn with two spans of background so
   it needs no icon font and inherits colour. */
.mnav summary{position:relative;padding-right:28px}
.mnav summary::before,.mnav summary::after{content:"";position:absolute;right:4px;top:50%;
  width:11px;height:1.5px;background:var(--navy);border-radius:2px;
  transition:transform .22s var(--ease),opacity .22s var(--ease)}
.mnav summary::before{transform:translateY(-50%)}
.mnav summary::after{transform:translateY(-50%) rotate(90deg)}
.mnav details[open]>summary::after{transform:translateY(-50%) rotate(0deg);opacity:0}
.mnav .m-grp>summary::before,.mnav .m-grp>summary::after{width:9px;background:var(--teal-dk)}
.mnav .m-sub{padding:0 0 14px}
.mnav .m-sub a{display:block;padding:8px 0;font-size:.9rem;color:var(--muted)}
/* second-level accordions inside the Treatments panel */
.mnav .m-nest{padding-bottom:6px}
.mnav .m-grp{border-bottom:1px solid var(--border)}
.mnav .m-grp:last-child{border-bottom:0}
.mnav .m-grp>summary{padding:13px 0;font-size:.66rem;letter-spacing:.12em;color:var(--teal-dk)}
.mnav .m-grp .m-sub{padding:0 0 10px 12px}
.mnav>a{display:block;padding:16px 0;border-bottom:1px solid var(--border);
  font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.mnav .hdr-book{display:block;text-align:center;margin-top:22px;padding:16px}

@media(max-width:1040px){
  .nav,.hdr-tel{display:none}
  /* grid-row:1 is REQUIRED, not decorative. With .nav-l and .nav-r hidden, the only
     grid items left are logo (col 2), .hdr-cta (col 3) and .burger (col 1), in that
     DOM order. Sparse auto-placement never moves the cursor backwards, so once the
     cursor reached col 3 the burger could not claim col 1 of row 1 and was pushed
     onto a second row, sitting 43px below the logo and outside the 64px header. */
  .burger{display:flex;grid-column:1;grid-row:1;justify-self:start}
  .hdr-logo{grid-row:1}
  .mnav{display:block}
  .hdr-cta{display:flex;grid-column:3;grid-row:1;justify-self:end}
}
@media(max-width:560px){
  /* The logo is 368x60, so at 30px tall it renders 184px wide and left no room for
     the burger, which overflowed the viewport by 12px. Everything steps down. */
  .hdr-in{height:64px;gap:10px;padding:0 14px}
  .hdr.stuck .hdr-in{height:56px}
  .hdr-logo img{height:22px}
  .hdr.stuck .hdr-logo img{height:20px}
  .hdr-book{font-size:.58rem;letter-spacing:.1em;padding:10px 14px}
  .burger{padding:8px 0 8px 8px}
  .mnav{inset:var(--mnav-top,64px) 0 0 0}
}
@media (prefers-reduced-motion:reduce){
  .hdr-in,.hdr-logo img,.menu,.mnav,.burger span{transition:none}
}

/* ---------------------------- SITE FOOTER ---------------------------------- */
/* --- Palette switch -------------------------------------------------------
   The footer is LIGHT because the closing CTA directly above it is a solid
   navy card. A navy footer under a navy card gives a navy/white/navy sandwich.
   To flip the whole footer to dark, change only these five values:
     --ftr-bg:#1E3448; --ftr-ink:#fff; --ftr-mute:rgba(255,255,255,.72);
     --ftr-line:rgba(255,255,255,.16); --ftr-bar:rgba(255,255,255,.04);
   and swap the two logo srcs to bhrc-logo-white.svg. Nothing else changes.
   -------------------------------------------------------------------------- */
.ftr{
  --ftr-bg:#fff;
  --ftr-ink:#1E3448;
  --ftr-mute:rgba(30,52,72,.66);
  --ftr-line:rgba(30,52,72,.12);
  --ftr-bar:rgba(30,52,72,.03);
  background:var(--ftr-bg);color:var(--ftr-ink);
  font-family:var(--font);
  border-top:1px solid var(--ftr-line);
}
.ftr-in{max-width:1240px;margin:0 auto;padding:clamp(44px,5vw,72px) var(--pad) 0}

/* ---- brand row ---- */
.ftr-brand{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;
  justify-content:space-between;padding-bottom:clamp(30px,3.4vw,44px);
  border-bottom:1px solid var(--ftr-line)}
.ftr-brand-l{max-width:38ch}
.ftr-logo img{height:34px;width:auto}
.ftr-brand-l p{margin:16px 0 0;font-size:.82rem;line-height:1.65;color:var(--ftr-mute)}
.ftr-brand-r{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.ftr-book{display:inline-block;padding:13px 30px;border-radius:50px;background:var(--navy);
  color:#fff;text-decoration:none;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;transition:background .25s}
.ftr-book:hover,.ftr-book:focus-visible{background:var(--teal)}
.ftr-social{display:flex;gap:10px}
.ftr-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--ftr-line);
  display:grid;place-items:center;color:var(--ftr-mute);transition:.22s}
.ftr-social a:hover,.ftr-social a:focus-visible{background:var(--navy);border-color:var(--navy);color:#fff}
.ftr-social svg{width:16px;height:16px;fill:currentColor}

/* ---- link columns ---- */
.ftr-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(22px,2.4vw,34px);padding:clamp(34px,3.6vw,52px) 0}
.ftr-col>summary{list-style:none;cursor:default;
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ftr-ink);margin-bottom:14px}
.ftr-col>summary::-webkit-details-marker{display:none}
.ftr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr-col a{font-size:.78rem;line-height:1.45;color:var(--ftr-mute);text-decoration:none;
  transition:color .2s}
.ftr-col a:hover,.ftr-col a:focus-visible{color:var(--teal-ink);text-decoration:underline;
  text-underline-offset:3px}

/* ---- locations band ---- */
.ftr-locs{border-top:1px solid var(--ftr-line);padding:clamp(30px,3.4vw,44px) 0}
.ftr-locs>summary{list-style:none;cursor:default;display:flex;align-items:baseline;gap:12px;
  font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.ftr-locs>summary::-webkit-details-marker{display:none}
.ftr-locs>summary span{font-size:.7rem;font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--ftr-mute)}
.ftr-locs ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:9px 22px}
.ftr-locs a{font-size:.78rem;color:var(--ftr-mute);text-decoration:none;transition:color .2s}
.ftr-locs a:hover,.ftr-locs a:focus-visible{color:var(--teal-ink);text-decoration:underline;
  text-underline-offset:3px}

/* ---- bottom bar ---- */
.ftr-bar{background:var(--ftr-bar);border-top:1px solid var(--ftr-line)}
.ftr-bar-in{max-width:1240px;margin:0 auto;padding:22px var(--pad) 26px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between}
.ftr-legal{display:flex;flex-wrap:wrap;gap:8px 20px}
.ftr-legal a{font-size:.72rem;color:var(--ftr-mute);text-decoration:none}
.ftr-legal a:hover,.ftr-legal a:focus-visible{color:var(--teal-ink);text-decoration:underline;
  text-underline-offset:3px}
.ftr-copy{font-size:.72rem;color:var(--ftr-mute)}
.ftr-disc{max-width:1240px;margin:0 auto;padding:0 var(--pad) 30px;
  font-size:.68rem;line-height:1.7;color:var(--ftr-mute)}

/* ---- responsive ---- */
@media(max-width:1100px){ .ftr-cols{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:760px){
  .ftr-brand{flex-direction:column;gap:24px}
  .ftr-brand-r{width:100%}
  .ftr-book{width:100%;text-align:center}
  .ftr-cols{grid-template-columns:1fr;gap:0;padding:8px 0}
  /* On mobile the columns become real accordions. JS below strips [open]; with JS
     off every panel stays open, which is long but never broken. */
  .ftr-col{border-bottom:1px solid var(--ftr-line)}
  .ftr-col>summary{cursor:pointer;margin:0;padding:16px 0;position:relative;font-size:.7rem}
  .ftr-col>summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;
    border-right:1.5px solid var(--ftr-mute);border-bottom:1.5px solid var(--ftr-mute);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s}
  .ftr-col[open]>summary::after{transform:translateY(-20%) rotate(-135deg)}
  .ftr-col ul{padding:0 0 18px}
  .ftr-locs>summary{cursor:pointer}
  .ftr-bar-in{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){ .ftr *{transition:none!important} }