/* ═══════════════════════════════════════
   SITE CHROME — homepage header + footer on pages built on front_include/header.php
   The homepage gets this look from Bootstrap 5 + main.css + motion.css, which can't be
   loaded on the older pages (their .col-6, .btn, .row etc. mean something else there).
   This file carries just the rules the header/footer use, in the same order, each one
   scoped to .site-nav / .site-footer. Every selector gets the same one-class prefix, so
   the rules still win against each other exactly as they do on the homepage.
   Not loaded on the homepage itself.
   ═══════════════════════════════════════ */

/* ── Tokens (main.css :root + the homepage's white --bg, motion.css, Bootstrap) ── */
.site-nav,.site-footer{
  --white:#fff;--bg:#fff;--ink:#2a2a2a;
  --blue-100:#f0f2f8;--blue-200:#deeefd;--blue-300:#88bbed;--blue-400:#4c99e4;
  --blue-500:#1f9ae0;--blue-600:#0080dd;--blue-700:#0d3256;
  --blue:var(--blue-600);--blue-dark:var(--blue-700);--blue-light:var(--blue-100);
  --green-100:#daefe0;--green-800:#008944;--green-900:#006432;--green-1000:#003f1f;
  --green:var(--green-800);--green-hover:var(--green-900);--green-active:var(--green-1000);
  --muted:#606060;--border:#e8e8e8;
  --font:'Outfit',system-ui,sans-serif;--max:1180px;--nav-h:72px;
  --text-body:16px;--text-body-lh:20px;--text-sm:14px;--text-sm-lh:18px;
  --m-ease-out:cubic-bezier(.22,1,.36,1);--m-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --m-fast:160ms;--m-ui:320ms;
  --bs-emphasis-color-rgb:0,0,0;--bs-body-color:#212529;--bs-heading-color:inherit;
  --bs-border-width:1px;--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;
  /* What the homepage <body> passes down (Bootstrap body + main.css body) */
  font-family:var(--font);font-size:var(--text-body);font-weight:400;line-height:var(--text-body-lh);
  color:var(--ink);text-align:start;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}

/* ── Bootstrap reboot (elements used inside the header/footer) ── */
.site-nav,.site-footer,:is(.site-nav,.site-footer) *,:is(.site-nav,.site-footer) *::before,:is(.site-nav,.site-footer) *::after{box-sizing:border-box}
:is(.site-nav,.site-footer) h4{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color);font-size:calc(1.275rem + .3vw)}
@media(min-width:1200px){:is(.site-nav,.site-footer) h4{font-size:1.5rem}}
:is(.site-nav,.site-footer) p{margin-top:0;margin-bottom:1rem}
:is(.site-nav,.site-footer) img,:is(.site-nav,.site-footer) svg{vertical-align:middle}
:is(.site-nav,.site-footer) button{border-radius:0;margin:0;font-family:inherit;font-size:inherit;line-height:inherit;text-transform:none;-webkit-appearance:button}
:is(.site-nav,.site-footer) button:not(:disabled){cursor:pointer}
:is(.site-nav,.site-footer) button:focus:not(:focus-visible){outline:0}

/* ── Bootstrap components: grid, navbar, collapse, btn, utilities ── */
.site-footer .row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}
.site-footer .row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}
.site-footer .col-6{flex:0 0 auto;width:50%}
.site-footer .col-12{flex:0 0 auto;width:100%}
.site-footer .gy-4{--bs-gutter-y:1.5rem}
@media(min-width:768px){.site-footer .col-md-4{flex:0 0 auto;width:33.33333333%}}
@media(min-width:992px){.site-footer .col-lg-2{flex:0 0 auto;width:16.66666667%}.site-footer .col-lg-3{flex:0 0 auto;width:25%}}

.site-nav .container-fluid{--bs-gutter-x:1.5rem;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}
.site-nav .btn{
  --bs-btn-padding-x:.75rem;--bs-btn-padding-y:.375rem;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;
  --bs-btn-color:var(--bs-body-color);--bs-btn-bg:transparent;--bs-btn-border-width:var(--bs-border-width);--bs-btn-border-color:transparent;
  --bs-btn-border-radius:var(--bs-border-radius);--bs-btn-hover-border-color:transparent;--bs-btn-disabled-opacity:.65;
  display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-size:var(--bs-btn-font-size);
  font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;
  text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;
  border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);
  background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.site-nav .btn-sm{--bs-btn-padding-y:.25rem;--bs-btn-padding-x:.5rem;--bs-btn-font-size:.875rem;--bs-btn-border-radius:var(--bs-border-radius-sm)}
.site-nav .collapse:not(.show){display:none}
.site-nav .collapsing{height:0;overflow:hidden;transition:height .35s ease}
@media(prefers-reduced-motion:reduce){.site-nav .collapsing{transition:none}}
.site-nav .nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;background:none;border:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}
.site-nav .nav-link:hover,.site-nav .nav-link:focus{color:var(--bs-nav-link-hover-color)}
.navbar:where(.site-nav){
  --bs-navbar-padding-x:0;--bs-navbar-padding-y:.5rem;
  --bs-navbar-color:rgba(var(--bs-emphasis-color-rgb),.65);--bs-navbar-hover-color:rgba(var(--bs-emphasis-color-rgb),.8);
  --bs-navbar-active-color:rgba(var(--bs-emphasis-color-rgb),1);
  --bs-navbar-brand-padding-y:.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;
  --bs-navbar-brand-color:rgba(var(--bs-emphasis-color-rgb),1);--bs-navbar-nav-link-padding-x:.5rem;
  --bs-navbar-toggler-padding-y:.25rem;--bs-navbar-toggler-padding-x:.75rem;--bs-navbar-toggler-font-size:1.25rem;
  --bs-navbar-toggler-border-color:rgba(var(--bs-emphasis-color-rgb),.15);--bs-navbar-toggler-border-radius:var(--bs-border-radius);
  --bs-navbar-toggler-transition:box-shadow .15s ease-in-out;
  position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.site-nav.navbar>.container-fluid{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}
.site-nav .navbar-brand{padding-top:var(--bs-navbar-brand-padding-y);padding-bottom:var(--bs-navbar-brand-padding-y);margin-right:var(--bs-navbar-brand-margin-end);font-size:var(--bs-navbar-brand-font-size);color:var(--bs-navbar-brand-color);text-decoration:none;white-space:nowrap}
.site-nav .navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:.5rem;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}
.site-nav .navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}
.site-nav .navbar-toggler{padding:var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);font-size:var(--bs-navbar-toggler-font-size);line-height:1;color:var(--bs-navbar-color);background-color:transparent;border:var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);border-radius:var(--bs-navbar-toggler-border-radius);transition:var(--bs-navbar-toggler-transition)}
.site-nav .navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 .25rem}
@media(min-width:992px){
  .navbar-expand-lg:where(.site-nav){flex-wrap:nowrap;justify-content:flex-start}
  .site-nav.navbar-expand-lg .navbar-nav{flex-direction:row}
  .site-nav.navbar-expand-lg .navbar-nav .nav-link{padding-right:var(--bs-navbar-nav-link-padding-x);padding-left:var(--bs-navbar-nav-link-padding-x)}
  .site-nav.navbar-expand-lg .navbar-collapse{display:flex !important;flex-basis:auto}
  .site-nav.navbar-expand-lg .navbar-toggler{display:none}
}
.site-nav .me-3{margin-right:1rem !important}
.site-footer .mb-5{margin-bottom:3rem !important}
.site-nav .ms-auto{margin-left:auto !important}

/* ── main.css: reset, base elements, buttons ── */
.site-nav,.site-footer,:is(.site-nav,.site-footer) *,:is(.site-nav,.site-footer) *::before,:is(.site-nav,.site-footer) *::after{margin:0;padding:0}
:is(.site-nav,.site-footer) img{max-width:100%;height:auto;display:block}
:is(.site-nav,.site-footer) a{color:inherit;text-decoration:none}
:is(.site-nav,.site-footer) button{font:inherit;cursor:pointer}
.site-footer .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.site-nav .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:54px;padding:0 24px;border-radius:10px;font-weight:600;font-size:var(--text-sm);line-height:var(--text-sm-lh);border:2px solid transparent;transition:background .22s,border-color .22s,transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;white-space:nowrap}
.site-nav .btn-cta{background:var(--green);color:#fff !important;border-color:var(--green);box-shadow:0 6px 24px rgba(0,137,68,.28)}
.site-nav .btn-cta:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff !important;transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,137,68,.36)}
.site-nav .btn-cta:active{background:var(--green-active);border-color:var(--green-active);color:#fff !important;transform:translateY(0);box-shadow:0 4px 12px rgba(0,137,68,.20)}
.site-nav .btn-sm{min-height:48px;padding:0 18px;border-radius:8px;font-size:var(--text-sm)}

/* ── main.css: header ── */
.site-nav{position:sticky;top:0;z-index:300;padding:14px 20px 0;background:linear-gradient(180deg,var(--white) 60%,rgba(255,255,255,0) 100%);transition:padding .25s}
.site-nav.is-scrolled{padding-top:10px}
.site-nav .nav-inner{
  position:relative;max-width:var(--max);margin:0 auto;padding:0 10px 0 22px;height:64px;
  display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(228,232,239,.8);border-radius:12px;
  box-shadow:0 1px 2px rgba(13,50,86,.04),0 12px 32px -8px rgba(13,50,86,.10);
  transition:box-shadow .25s,border-color .25s;
}
.site-nav.is-scrolled .nav-inner{box-shadow:0 1px 2px rgba(13,50,86,.06),0 16px 40px -8px rgba(13,50,86,.16);border-color:var(--border)}
.site-nav .nav-logo{flex-shrink:0;position:relative;display:inline-block;width:162px;height:37px}
.site-nav .nav-logo-img{height:37px;width:auto;display:block}
.site-nav .nav-logo-img.nav-logo-img--light{display:none;position:absolute;top:0;left:0}
.site-nav--on-hero:not(.is-scrolled){background:none}
.site-nav--on-hero:not(.is-scrolled) .nav-inner{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;box-shadow:none}
.site-nav .nav-links{display:none;align-items:center;gap:2px;margin-left:auto}
@media(min-width:1024px){.site-nav .nav-links{display:flex}}
.site-nav .nav-links a{font-size:17.5px;font-weight:600;color:var(--muted);padding:9px 16px;border-radius:999px;transition:color .18s,background .18s}
.site-nav .nav-links a:hover{color:var(--ink);background:var(--bg)}
.site-nav .nav-links a.is-active{color:var(--blue-600);background:var(--blue-100)}
.site-nav .nav-live-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#e11d3c;box-shadow:0 0 0 0 rgba(225,29,60,.5);vertical-align:middle;animation:navLivePulse 1.8s ease-out infinite}
@keyframes navLivePulse{0%{box-shadow:0 0 0 0 rgba(225,29,60,.5)}70%{box-shadow:0 0 0 6px rgba(225,29,60,0)}100%{box-shadow:0 0 0 0 rgba(225,29,60,0)}}
@media(prefers-reduced-motion:reduce){.site-nav .nav-live-dot{animation:none}}
.site-nav .nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(min-width:1024px){.site-nav .nav-actions{margin-left:0}}
@media(max-width:767px){.site-nav .nav-actions>.btn{display:none}}
.site-nav .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:8px;border-radius:8px}
.site-nav .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
@media(min-width:1024px){.site-nav .nav-toggle{display:none}}
.site-nav .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-nav .nav-toggle.is-open span:nth-child(2){opacity:0}
.site-nav .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── main.css: footer ── */
.site-footer{
  position:relative;
  background:#0b1510;
  color:rgba(255,255,255,.72);
  overflow:hidden;
  padding-top:clamp(48px,7vw,88px);
  padding-bottom:0;
}
.site-footer .footer-brand img{height:42px;margin-bottom:16px}
.site-footer .footer-brand p{font-size:13.5px;line-height:1.7;max-width:400px;color:rgba(255,255,255,.55)}
.site-footer .footer-app-links{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;max-width:360px}
.site-footer .footer-app-links img{height:auto;width:100%;margin-bottom:0}
.site-footer .footer-col{position:relative;z-index:1}
.site-footer .footer-col-toggle{display:flex;width:100%;background:none;border:none;padding:0;cursor:default;pointer-events:none}
.site-footer .footer-col h4{
  color:#fff;font-size:14px;font-weight:800;
  text-transform:uppercase;letter-spacing:.18em;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(0,137,68,.2);
  flex:1;text-align:left;
}
.site-footer .footer-col-chevron{display:none}
.site-footer .footer-col a{
  display:block;font-size:16px;padding:6px 0;
  color:rgba(255,255,255,.58);
  text-decoration:none;
  transition:color .18s,transform .2s cubic-bezier(.34,1.56,.64,1);
}
.site-footer .footer-col a:hover{color:rgba(0,137,68,.95);transform:translateX(4px)}
@media(max-width:767px){
  .site-footer .footer-col-toggle{cursor:pointer;pointer-events:auto;align-items:center;justify-content:space-between}
  .site-footer .footer-col h4{margin-bottom:0;padding-bottom:16px}
  .site-footer .footer-col-chevron{display:block;width:16px;height:16px;flex-shrink:0;color:rgba(255,255,255,.5);transition:transform .25s ease;margin-bottom:16px}
  .site-footer .footer-col.is-open .footer-col-chevron{transform:rotate(180deg)}
  .site-footer .footer-col-links{max-height:0;overflow:hidden;transition:max-height .3s ease}
  .site-footer .footer-col.is-open .footer-col-links{max-height:400px}
}
.site-footer .footer-bottom-wrap{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.2)}
.site-footer .footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font-size:12.5px}
.site-footer .footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.site-footer .footer-copyright{color:rgba(255,255,255,.42)}
.site-footer .footer-social{display:flex;gap:10px}
.site-footer .footer-social-link{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  transition:background .2s,border-color .2s,color .2s,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.site-footer .footer-social-link:hover{background:rgba(0,137,68,.2);border-color:rgba(0,137,68,.4);color:rgba(0,137,68,.9);transform:translateY(-3px)}
.site-footer .footer-social svg{width:15px;height:15px;fill:currentColor}
@media(max-width:767px){
  .site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 20px 32px}
}
/* main.css mobile text normalization, as it lands on the footer */
@media(max-width:767px){
  :is(.site-nav,.site-footer) :is(p,span):not(.btn):not(.btn *){font-size:16px !important;line-height:1.55 !important}
}

/* ── motion.css: nav backdrop, link underline, button feedback, focus rings ── */
.site-nav--on-hero,.site-nav--on-hero:not(.is-scrolled){background:none}
.site-nav--on-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--white) 60%,rgba(255,255,255,0) 100%);
  opacity:0;transition:opacity var(--m-ui) var(--m-ease-out);
}
.site-nav--on-hero.is-scrolled::before{opacity:1}
.site-nav .nav-inner{
  transition:background-color var(--m-ui) var(--m-ease-out),backdrop-filter var(--m-ui) var(--m-ease-out),
    -webkit-backdrop-filter var(--m-ui) var(--m-ease-out),box-shadow var(--m-ui) var(--m-ease-out),border-color var(--m-ui) var(--m-ease-out);
}
.site-nav .nav-links a{position:relative}
.site-nav .nav-links a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--m-ui) var(--m-ease-out);pointer-events:none;
}
.site-nav .nav-links a:focus-visible::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
  .site-nav .nav-links a:hover{background:transparent;color:var(--ink)}
  .site-nav .nav-links a:hover::after{transform:scaleX(1)}
}
.site-nav .btn,.site-footer .footer-social-link{-webkit-tap-highlight-color:transparent}
.site-nav .btn{transition:background .22s,border-color .22s,transform .3s var(--m-ease-spring),box-shadow .25s,scale var(--m-fast) var(--m-ease-out),translate .5s var(--m-ease-spring)}
.site-nav .btn:active{scale:.97}
.site-nav .btn{position:relative;overflow:hidden;isolation:isolate}
:is(.site-nav,.site-footer) :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--blue-600);outline-offset:3px}
.site-footer :is(a,button):focus-visible{outline-color:#fff}

/* ── Older pages only ── */

/* Some page stylesheets style the bare nav element (e.g. css/page.css: sticky bar with a
   white background, border, fixed height). Keep those off the nav inside the header. */
.site-nav nav.nav-links{position:static;top:auto;z-index:auto;height:auto;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;justify-content:normal}
/* Same for page-level .nav-logo rules (page.css, *-coach-online.css): text styling, flex gap */
.site-nav a.nav-logo{font-family:inherit;font-weight:inherit;letter-spacing:normal;align-items:normal;gap:normal}

/* Below 1024px the homepage hides the nav links, so its mobile menu opens empty. Here the
   open menu shows them as a drawer, styled with main.css's .nav-drawer rules. (From 992px
   up, Bootstrap's navbar-expand-lg keeps the collapse always open, so it's left alone there.) */
@media(max-width:991.98px){
  .site-nav .navbar-collapse{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    border-radius:20px;padding:12px 24px 20px;background:var(--white);
    border:1px solid var(--border);box-shadow:0 16px 40px -8px rgba(13,50,86,.14);
  }
  .site-nav .navbar-collapse .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0 !important}
  .site-nav .navbar-collapse .nav-links a{display:block;padding:12px 0;font-weight:600;font-size:16px;color:var(--ink);border-radius:0;border-bottom:1px solid var(--border)}
  .site-nav .navbar-collapse .nav-links a:last-of-type{border:none}
  .site-nav .navbar-collapse .nav-links a::after{content:none}
  .site-nav .navbar-collapse .nav-actions{display:flex;flex-direction:column;gap:10px;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--border)}
  .site-nav .navbar-collapse .nav-actions>.btn{display:inline-flex;width:100%}
}

/* ═══════════════════════════════════════
   BEST HEALTH COACH ADDITIONS
   (Everything above mirrors unlimitr_web/assets/css/site-chrome.css, minus its position:fixed
   workaround: these pages don't set overflow-x on html/body, so the nav stays sticky.)
   ═══════════════════════════════════════ */

/* assets/new/css/stylesheet.css declares its own palette (--white, --blue, --blue-600, --green…)
   on `*`, which would beat the tokens inherited from .site-nav / .site-footer on every element
   inside them. Re-declare the tokens on those descendants (same values as the block at the top). */
:is(.site-nav,.site-footer) *{
  --white:#fff;--bg:#fff;--ink:#2a2a2a;
  --blue-100:#f0f2f8;--blue-200:#deeefd;--blue-300:#88bbed;--blue-400:#4c99e4;
  --blue-500:#1f9ae0;--blue-600:#0080dd;--blue-700:#0d3256;
  --blue:var(--blue-600);--blue-dark:var(--blue-700);--blue-light:var(--blue-100);
  --green-100:#daefe0;--green-800:#008944;--green-900:#006432;--green-1000:#003f1f;
  --green:var(--green-800);--green-hover:var(--green-900);--green-active:var(--green-1000);
  --muted:#606060;--border:#e8e8e8;
  --font:'Outfit',system-ui,sans-serif;--max:1180px;--nav-h:72px;
  --text-body:16px;--text-body-lh:20px;--text-sm:14px;--text-sm-lh:18px;
}

/* Live pages load Bootstrap's CSS after this file (so .navbar's position/padding win the tie with
   .site-nav) and set `* { font-family: 'Plus Jakarta Sans' }`; keep the header/footer as above.
   <i> is left out so Font Awesome icons (live account menu) keep their icon font. */
header.site-nav{position:sticky;top:0;padding:14px 20px 0}
header.site-nav.is-scrolled{padding-top:10px}
:is(.site-nav,.site-footer) :not(i){font-family:var(--font)}
.site-nav .nav-links > a,.site-nav .nav-more-toggle{white-space:nowrap}

/* Primary links show from 992px, where the collapse opens, instead of 1024px, so 992–1023px
   isn't left without a menu; tighter link spacing below 1200px makes room for "More". */
@media(min-width:992px){.site-nav .nav-links{display:flex}}
@media(min-width:992px) and (max-width:1199.98px){
  .site-nav .nav-links > a,.site-nav .nav-links .nav-more-toggle{font-size:16px}
  .site-nav .nav-links.me-3{margin-right:8px !important}
  .site-nav .nav-actions{gap:8px}
  .site-nav .nav-actions .btn-sm,.site-nav .ul-login-btn{padding:0 14px}
}

/* "More" dropdown — Best Health Coach's own menu items, styled like the nav links / drawer */
.site-nav .nav-more{position:relative}
.site-nav .nav-more-toggle{
  position:relative;display:inline-flex;align-items:center;gap:4px;
  font-size:17.5px;font-weight:600;line-height:var(--text-body-lh);color:var(--muted);
  /* 8px sides: what the nav links resolve to (navbar-expand-lg's --bs-navbar-nav-link-padding-x) */
  padding:9px 8px;border:0;border-radius:999px;background:none;transition:color .18s,background .18s;
}
.site-nav .nav-more-toggle::after{
  content:'';position:absolute;left:16px;right:16px;bottom:3px;height:2px;border-radius:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--m-ui) var(--m-ease-out);pointer-events:none;
}
.site-nav .nav-more-toggle:focus-visible::after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
  .site-nav .nav-more-toggle:hover{color:var(--ink)}
  .site-nav .nav-more-toggle:hover::after{transform:scaleX(1)}
}
.site-nav .nav-more-chevron{width:16px;height:16px;flex-shrink:0;transition:transform var(--m-ui) var(--m-ease-out)}
.site-nav .nav-more.is-open .nav-more-toggle{color:var(--ink)}
.site-nav .nav-more.is-open .nav-more-chevron{transform:rotate(180deg)}
.site-nav .nav-more-menu{
  display:none;position:absolute;top:calc(100% + 12px);right:0;z-index:10;min-width:230px;padding:8px;
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 16px 40px -8px rgba(13,50,86,.14);
}
.site-nav .nav-more.is-open .nav-more-menu{display:block}
.site-nav .nav-links .nav-more-menu a{
  display:block;padding:10px 14px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.site-nav .nav-links .nav-more-menu a::after{content:none}
.site-nav .nav-links .nav-more-menu a:hover,
.site-nav .nav-links .nav-more-menu a:focus-visible{background:var(--blue-100);color:var(--blue-600)}

/* Live pages: the existing Login button / account menu sit in .nav-actions next to the CTA */
.site-nav .live-header-actions{display:flex;align-items:center}
.site-nav .ul-login-btn{padding:0 18px;border-radius:8px}

@media(max-width:991.98px){
  .site-nav .navbar-collapse{max-height:calc(100dvh - 100px);overflow-y:auto}
  /* active link in the open menu: green text, as main.css's .nav-drawer>a.is-active */
  .site-nav .navbar-collapse .nav-links a.is-active{background:none;color:var(--green)}
  /* "More" becomes a labelled group listed inline in the mobile menu */
  .site-nav .navbar-collapse .nav-more{border-top:1px solid var(--border);margin-top:4px;padding-top:4px}
  .site-nav .navbar-collapse .nav-more-toggle{
    width:100%;padding:12px 0 4px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);cursor:default;pointer-events:none;
  }
  .site-nav .navbar-collapse .nav-more-toggle::after,.site-nav .navbar-collapse .nav-more-chevron{display:none}
  .site-nav .navbar-collapse .nav-more-menu{display:block;position:static;min-width:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
  .site-nav .navbar-collapse .nav-links .nav-more-menu a{padding:12px 0;font-size:16px;border-radius:0;border-bottom:1px solid var(--border);color:var(--ink);background:none}
  .site-nav .navbar-collapse .nav-links .nav-more-menu a:last-of-type{border:none}
  .site-nav .navbar-collapse .live-header-actions,.site-nav .navbar-collapse .ul-login-btn{width:100%}
}

/* Footer: five link columns share the row beside the brand column */
@media(min-width:992px){.site-footer .col-lg{flex:1 0 0%}}
/* .bottoms (kept for its mobile margin-bottom in common.css) also brings a top margin and border */
.site-footer .footer-bottom.bottoms{margin-top:0;border-top:0}