/* ========== CSS Variables for Header Template ========== */
:root {
  --super-header-height: 52px;
  --nav-height: 86px;
  --total-header-height: calc(var(--super-header-height) + var(--nav-height));
  --mobile-bottom-bar-height: 60px;
  --dark: #153b37;
  --dark-mid: #1a4a45;
  --dark-transparent: rgba(21, 59, 55, 0.6);
  --mid: #2a635c;
  --light: #3e857c;
  --lightest: #4a9e94;
  --accent: #e8a087;
  --accent-light: #f2c4b3;
  --accent-glow: rgba(232, 160, 135, 0.4);
  --white: #ffffff;
  --off-white: #f8fafa;
  --gray-light: #e8eeee;
  --text-dark: #1a2e2b;
  --text-muted-dark: #4a5f5c;
  --text-light: #d4e5e2;
  --text-muted-light: rgba(212, 229, 226, 0.6);
  --black: #0b1f1c;
}

/* ========== Body offset for fixed header ========== */
body.et-tb-has-header #page-container { /* DISABLED
  padding-top: 0 !important; */
}

/* ========== SUPER HEADER ========== */
.super-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100001;
  height: var(--super-header-height);
  background: var(--black);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.super-header.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.super-header-inner {
  max-width: 1440px;
  margin: 0 auto;
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.super-header-left {
  display: flex;
  align-items: center;
  gap: 0;
}

.super-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.super-header-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-family: "Libre Franklin", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.super-header-phone {
  color: var(--text-light);
  padding: 0 12px;
}

.super-header-phone:hover {
  color: var(--accent-light);
}

.super-header-phone svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.super-header-label {
  color: var(--text-muted-light);
  font-weight: 300;
}

.super-header-value {
  font-weight: 500;
  color: var(--text-light);
}

.super-header-phone:hover .super-header-value {
  color: var(--accent-light);
}

.super-header-divider {
  width: 1px;
  height: 16px;
  background: rgba(62, 133, 124, 0.3);
  flex-shrink: 0;
}

.super-header-blog {
  color: var(--text-light);
  padding: 0 12px;
}

.super-header-blog:hover {
  color: var(--accent-light);
}

.super-header-blog:hover .super-header-value {
  color: var(--accent-light);
}

.super-header-blog svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.super-header-referral {
  color: var(--text-light);
  font-weight: 400;
  padding: 4px 14px;
  border: 1px solid rgba(212, 229, 226, 0.2);
  border-radius: 3px;
  transition: all 0.2s ease;
  margin-right: 8px;
}

.super-header-referral:hover {
  color: var(--white);
  background: rgba(212, 229, 226, 0.1);
  border-color: rgba(212, 229, 226, 0.4);
}

.super-header-referral svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.super-header-referral span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.super-header-quiz {
  color: var(--accent);
  font-weight: 500;
  padding: 4px 14px;
  border: 1px solid rgba(232, 160, 135, 0.3);
  border-radius: 3px;
  transition: all 0.2s ease;
}

.super-header-quiz:hover {
  color: var(--dark);
  background: var(--accent);
  border-color: var(--accent);
}

.super-header-quiz svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.super-header-quiz span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ========== NAVIGATION ========== */
.nav-wrapper {
  position: fixed;
  top: var(--super-header-height);
  left: 0;
  right: 0;
  z-index: 100000;
  background: transparent;
  transition: all 0.4s ease;
}

.nav-wrapper.super-hidden {
  top: 0;
}

.nav-wrapper.scrolled {
  background: rgba(240, 231, 220, 0.92); /* the site beige (--cream), not white — owner 2026-09-11 */
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 40px rgba(21, 59, 55, 0.1);
}

.nav-container {
  max-width: 1440px;
  margin: 0 auto;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 100001;
  position: relative;
}

.logo-img {
  height: clamp(56px, 6.2vw, 76px);
  width: auto;
  transition: opacity 0.4s ease, height 0.4s ease;
}

.logo-img--black {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.nav-wrapper.scrolled .logo-img {
  height: clamp(46px, 4.8vw, 60px);
}

.nav-wrapper.scrolled .logo-img--white {
  opacity: 0;
}

.nav-wrapper.scrolled .logo-img--black {
  opacity: 1;
}

/* ===== Mobile menu OPEN state (class toggled on <html> by tmj-header.js) ===== */
/* Lock scrolling behind the open menu (belt-and-suspenders with the JS body overflow). */
html.menu-open { overflow: hidden; }
/* Solid dark header bar so scrolling menu content never shows through the otherwise
   transparent header — and keep it dark even if the page had scrolled (white) state. */
html.menu-open .nav-wrapper,
html.menu-open .nav-wrapper.scrolled {
  background: var(--dark, #153b37);
  backdrop-filter: none;
  box-shadow: none;
}
/* Logo stays WHITE while the menu is open (the .nav-wrapper in the selector raises
   specificity above `.nav-wrapper.scrolled .logo-img--white`, so it wins even when scrolled). */
html.menu-open .nav-wrapper .logo-img--white { opacity: 1; }
html.menu-open .nav-wrapper .logo-img--black { opacity: 0; }

/* Main Navigation */
.main-nav {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 1.75rem 1rem;
  color: var(--text-light);
  text-decoration: none;
  font-family: "Libre Franklin", sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
  position: relative;
}

.nav-wrapper.scrolled .nav-menu > li > a {
  color: var(--text-muted-dark);
}

.nav-menu > li > a:hover,
.nav-menu > li.active > a {
  color: var(--accent);
}

.nav-wrapper.scrolled .nav-menu > li > a:hover,
.nav-wrapper.scrolled .nav-menu > li.active > a {
  color: var(--light);
}

/* Active indicator diamond */
.nav-menu > li.active > a::after {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: translateX(-50%) rotate(45deg);
}

/* Dropdown arrow */
.dropdown-arrow {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.3s ease;
}

.nav-menu > li:hover > a .dropdown-arrow {
  transform: rotate(180deg);
}

/* ========== DROPDOWN MENUS ========== */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: rgba(21, 59, 55, 0.94);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(62, 133, 124, 0.2);
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.nav-wrapper.scrolled .dropdown {
  background: var(--dark);
}

.nav-menu > li:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown li {
  position: relative;
}

.dropdown li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  color: var(--text-light);
  text-decoration: none;
  font-family: "Libre Franklin", sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  transition: all 0.25s ease;
  border-left: 2px solid transparent;
}

.dropdown li a:hover {
  background: rgba(62, 133, 124, 0.15);
  color: var(--accent-light);
  border-left-color: var(--accent);
  padding-left: 1.75rem;
}

/* --- Dropdown lead row: the condition itself -------------------------------
   Each condition dropdown now reads condition -> treatments -> symptoms, so the
   first row names the thing the whole menu is about and links to its page. It
   has to look like a heading while still being a link, hence the weight and
   letter-spacing rather than a colour change alone: at 0.85rem/300 it would be
   indistinguishable from the treatments under it.

   The rule underneath is what actually separates the two groups. It is on the
   <a> and not the <li> so the hover background (which is painted on the <a>)
   does not run over it. */
.dropdown li a.dropdown-lead {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid rgba(62, 133, 124, 0.28);
}

.dropdown li a.dropdown-lead:hover {
  color: var(--accent-light);
}

.dropdown .dropdown {
  top: 0;
  left: 100%;
}

.dropdown li:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu-arrow {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.3s ease;
}

.dropdown li:hover > a .submenu-arrow {
  transform: translateX(3px);
}

/* ========== DUAL CTA BUTTONS ========== */
.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.5rem;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.65rem 1.1rem;
  font-family: "Libre Franklin", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.nav-cta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.nav-cta--call {
  background: var(--accent);
  color: var(--dark);
  border-color: var(--accent);
}

.nav-cta--call:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

.nav-cta--call svg {
  stroke: var(--dark);
}

.nav-cta--message {
  background: transparent;
  color: var(--text-light);
  border-color: rgba(212, 229, 226, 0.4);
}

.nav-cta--message:hover {
  background: rgba(212, 229, 226, 0.1);
  border-color: var(--text-light);
  color: var(--white);
}

.nav-cta--message svg {
  stroke: currentColor;
}

.nav-wrapper.scrolled .nav-cta--message {
  color: var(--dark);
  border-color: rgba(21, 59, 55, 0.3);
}

.nav-wrapper.scrolled .nav-cta--message:hover {
  background: rgba(21, 59, 55, 0.06);
  border-color: var(--dark);
}

/* ========== CALL POPUP ========== */
.call-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.call-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.call-popup {
  background: var(--white);
  border-radius: 16px;
  padding: 0;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.call-popup-overlay.active .call-popup {
  transform: scale(1) translateY(0);
}

.call-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(21, 59, 55, 0.08);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 1;
}

.call-popup-close:hover {
  background: rgba(21, 59, 55, 0.15);
}

.call-popup-close svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-muted-dark);
}

.call-popup-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1.25rem 1.5rem;
  background: var(--dark);
  color: var(--white);
  font-family: "Libre Franklin", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.call-popup-header svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
}

.call-popup-option {
  display: block;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  border-bottom: 1px solid var(--gray-light);
  transition: background 0.2s ease;
}

.call-popup-option:last-child {
  border-bottom: none;
}

.call-popup-option:hover {
  background: var(--off-white);
}

.call-popup-location {
  font-family: "Libre Franklin", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--light);
  margin-bottom: 4px;
}

.call-popup-number {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.2;
}

.call-popup-address {
  font-family: "Libre Franklin", sans-serif;
  font-size: 0.75rem;
  color: var(--text-muted-dark);
  margin-top: 2px;
}

/* ========== MOBILE MENU TOGGLE ========== */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  z-index: 100001;
  position: relative;
  transition: border-color 0.3s ease;
}

.nav-wrapper.scrolled .menu-toggle {
  border-color: rgba(21, 59, 55, 0.2);
}

.menu-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.3s ease;
}

.menu-toggle:hover::before,
.menu-toggle.active::before {
  transform: scale(1);
}

.menu-toggle-inner {
  position: relative;
  width: 20px;
  height: 14px;
  z-index: 1;
}

.menu-toggle-inner span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition: all 0.3s ease;
}

.nav-wrapper.scrolled .menu-toggle-inner span {
  background: var(--dark);
}

.menu-toggle:hover .menu-toggle-inner span,
.menu-toggle.active .menu-toggle-inner span {
  background: var(--dark);
}

.menu-toggle-inner span:nth-child(1) { top: 0; }
.menu-toggle-inner span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle-inner span:nth-child(3) { bottom: 0; }

.menu-toggle.active .menu-toggle-inner span:nth-child(1) {
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.menu-toggle.active .menu-toggle-inner span:nth-child(2) { opacity: 0; }
.menu-toggle.active .menu-toggle-inner span:nth-child(3) {
  bottom: 50%; transform: translateY(50%) rotate(-45deg);
}

/* ========== OVERLAY ========== */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 99999;
}

.nav-overlay.active { opacity: 1; visibility: visible; }

/* ========== MOBILE MENU (hidden on desktop) ========== */
.mobile-menu {
  display: none;
}

/* ========== MOBILE BOTTOM BAR (hidden on desktop) ========== */
.mobile-bottom-bar {
  display: none;
}

/* ========== MOBILE STYLES ========== */
@media (max-width: 1100px) {

  .super-header { display: none; }

  .nav-wrapper { top: 0; }
  .nav-wrapper.super-hidden { top: 0; }

  .menu-toggle { display: flex; }

  /* Hide desktop nav on mobile */
  .desk-nav {
    display: none !important;
  }

  /* Hide desktop CTA group on mobile */
  .nav-cta-group { display: none; }

  /* ========== MOBILE MENU OVERLAY (.mob-* accordion) ========== */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    height: 100dvh;
    background: var(--dark, #153b37);
    padding: 70px 0 0;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 100000;
  }
  /* Content clears the 70px mobile header exactly (the header is .nav-container's mobile
     height, NOT the 86px --nav-height desktop var). The first .mob-link's own 16px top
     padding provides the gap — no extra header padding needed. */

  /* Only the nav list scrolls; the footer (below) stays pinned. */
  .mob-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Pinned footer: phone/quiz/blog + Call/Message CTAs, always visible. */
  .mobile-menu-footer {
    flex: 0 0 auto;
    background: var(--dark, #153b37);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-menu.open {
    transform: translateX(0);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
  }

  /* Nav list reset */
  .mob-nav {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mob-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Row: link + toggle side by side */
  .mob-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(62, 133, 124, 0.15);
  }

  .mob-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    color: #ffffff;
    text-decoration: none;
    font-family: "Libre Franklin", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mob-link:hover,
  .mob-link:active {
    background: rgba(62, 133, 124, 0.12);
    color: var(--accent-light, #4ca89f);
  }

  /* Toggle button (separate from link) */
  .mob-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-height: 100%;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(62, 133, 124, 0.15);
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
  }

  .mob-toggle:hover,
  .mob-toggle:active {
    background: rgba(62, 133, 124, 0.15);
  }

  .mob-toggle svg {
    width: 20px;
    height: 20px;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 2.5;
    fill: none;
    transition: transform 0.3s ease, stroke 0.2s ease;
  }

  .mob-has-children.mob-open > .mob-row .mob-toggle svg {
    transform: rotate(180deg);
    stroke: var(--accent-light, #4ca89f);
  }

  /* Submenu (animated via max-height in JS) */
  .mob-sub {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: rgba(0, 0, 0, 0.15);
  }

  .mob-sub li a {
    display: block;
    padding: 0.75rem 1.25rem 0.75rem 2.25rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-family: "Libre Franklin", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    border-bottom: 1px solid rgba(62, 133, 124, 0.08);
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
  }

  .mob-sub li a:hover,
  .mob-sub li a:active {
    background: rgba(62, 133, 124, 0.1);
    color: var(--accent-light, #4ca89f);
    padding-left: 2.5rem;
  }

  .mob-sub li:last-child a {
    border-bottom: none;
  }

  /* Nested submenu (sub-sub-menu) */
  .mob-row--nested .mob-link {
    padding-left: 2.25rem;
    font-size: 0.9rem;
  }

  .mob-sub--nested {
    background: rgba(0, 0, 0, 0.1);
  }

  .mob-sub--nested li a {
    padding-left: 3.25rem;
    font-size: 0.85rem;
  }

  .mob-sub--nested li a:hover,
  .mob-sub--nested li a:active {
    padding-left: 3.5rem;
  }

  /* Mobile super links (phone, quiz, blog inside slide-out) */
  .mob-super-links {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem 0;
    border-top: 1px solid rgba(62, 133, 124, 0.2);
    margin-top: 0.5rem;
    gap: 0;
  }

  .mob-super-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 0;
    color: var(--text-light);
    text-decoration: none;
    font-family: "Libre Franklin", sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    border-bottom: 1px solid rgba(62, 133, 124, 0.1);
    transition: color 0.2s ease;
  }

  .mob-super-link:last-child { border-bottom: none; }
  .mob-super-link:hover { color: var(--accent-light); }

  .mob-super-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--accent);
  }

  .mob-super-link--quiz,
  .mob-super-link--blog {
    color: var(--accent);
    font-weight: 500;
  }

  .mob-super-link--quiz:hover,
  .mob-super-link--blog:hover {
    color: var(--accent-light);
  }

  /* Mobile CTAs (bottom of slide-out) */
  .mob-cta {
    margin: 1.5rem 1.25rem;
    text-align: center;
    display: block;
    padding: 0.8rem 1.5rem;
    background: var(--accent, #e8a087);
    color: var(--dark, #153b37);
    font-family: "Libre Franklin", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .mob-cta--outline {
    background: transparent;
    border: 1px solid rgba(212, 229, 226, 0.4);
    color: var(--text-light, #d4e5e2);
    margin-top: 0.75rem;
  }

  /* ========== MOBILE STICKY BOTTOM BAR ========== */
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100002;
    background: var(--dark);
    border-top: 1px solid rgba(62, 133, 124, 0.2);
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    /* Hidden by sliding `bottom`, NOT transform: a transformed element becomes the containing
       block for position:fixed descendants, and the Cherry widget docked in this bar (snippet
       1094729) opens a full-screen fixed overlay from inside it. (2026-09-24) */
    transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }

  .mobile-bottom-bar.hidden {
    bottom: calc(-1 * (var(--mobile-bottom-bar-height) + 40px + env(safe-area-inset-bottom, 0px)));
  }

  .mobile-bottom-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-family: "Libre Franklin", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .mobile-bottom-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .mobile-bottom-btn--call {
    background: var(--accent);
    color: var(--dark);
  }

  .mobile-bottom-btn--call:active {
    background: var(--accent-light);
  }

  .mobile-bottom-btn--call svg {
    stroke: var(--dark);
  }

  .mobile-bottom-btn--message {
    background: transparent;
    color: var(--text-light);
    border: 1px solid rgba(212, 229, 226, 0.3);
  }

  .mobile-bottom-btn--message:active {
    background: rgba(212, 229, 226, 0.1);
  }

  .mobile-bottom-btn--message svg {
    stroke: var(--text-light);
  }

  body {
    padding-bottom: calc(var(--mobile-bottom-bar-height) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  .mobile-menu {
    max-width: 100%;
  }
}

/* Hide Divi default header elements (Cleveland uses a Theme Builder header,
   .et-l--header). Keep the section + legacy selectors as belt-and-braces. */
#main-header,
#top-header,
.et-l--header,
.et_pb_section.et_pb_section_0_tb_header,
.et_pb_section.et_pb_section_1_tb_header {
  display: none !important;
}

/* ========== WP Admin Bar Offset ========== */
.admin-bar .super-header { top: 32px; }
.admin-bar .nav-wrapper { top: calc(32px + var(--super-header-height)); }
.admin-bar .nav-wrapper.super-hidden { top: 32px; }
.admin-bar .nav-overlay { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .super-header { top: 46px; }
  .admin-bar .nav-wrapper { top: 46px; }
  .admin-bar .nav-wrapper.super-hidden { top: 46px; }
  .admin-bar .nav-overlay { top: 46px; }
}

@media (max-width: 1100px) {
  .admin-bar .mobile-menu {
    padding-top: calc(70px + 32px);
  }
}

@media (max-width: 1100px) and (max-width: 782px) {
  .admin-bar .mobile-menu {
    padding-top: calc(70px + 46px);
  }
}

@media screen and (max-width: 1365px) {
  .nav-container {
    width: 100%;
    padding: 0 15px;
  }
}

@media screen and (max-width: 1199px) {
  .nav-cta-group {
    margin-left: 10px;
  }

  .nav-menu > li > a {
    padding: 1.75rem 12px;
  }
}

@media screen and (max-width: 1100px) {
  .nav-container {
    height: 70px;
  }
}

/* ========== SUPER HEADER — PATIENT RESOURCES DROPDOWN (Cleveland) ========== */
.super-header-res {
  position: relative;
}

.super-header-resbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(212, 229, 226, 0.2);
  color: var(--text-light);
  font-family: "Libre Franklin", sans-serif;
  font-weight: 400;
  padding: 4px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.super-header-resbtn svg:first-child {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.super-header-resbtn span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.super-header-resbtn .dropdown-arrow {
  width: 10px;
  height: 10px;
}

.super-header-res:hover .super-header-resbtn,
.super-header-res:focus-within .super-header-resbtn {
  color: var(--white);
  background: rgba(212, 229, 226, 0.1);
  border-color: rgba(212, 229, 226, 0.4);
}

.super-header-res:hover .super-header-resbtn .dropdown-arrow,
.super-header-res:focus-within .super-header-resbtn .dropdown-arrow {
  transform: rotate(180deg);
}

.super-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 250px;
  background: var(--dark);
  border: 1px solid rgba(62, 133, 124, 0.25);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  z-index: 100002;
}

.super-header-res:hover .super-dropdown,
.super-header-res:focus-within .super-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.super-dropdown li a {
  display: block;
  padding: 0.7rem 1.4rem;
  color: var(--text-light);
  text-decoration: none;
  font-family: "Libre Franklin", sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.super-dropdown li a:hover {
  background: rgba(62, 133, 124, 0.15);
  color: var(--accent-light);
  border-left-color: var(--accent);
  padding-left: 1.65rem;
}

/* ============================================================
 * Global content helpers — ported from the live tmj-anchor tokens layer.
 * The ported chrome markup (footer .contact-item.white, etc.) and legacy TMJ
 * page bodies use these tiny utilities. The vars resolve against the :root
 * declared at the top of this file (--accent-light / --dark). NOTE: the live
 * theme's `#page-container h1..h6 { line-height:1em!important }` reset is
 * intentionally NOT ported — the framework primitives own heading rhythm.
 * ============================================================ */
.white * { color: #ffffff; }
.center { text-align: center; }
.accent-font { color: var(--light) !important; font-style: italic !important; }
.force-dark { color: var(--dark) !important; }

/* ============================================================
 * WordPress admin bar: keep it (and its dropdowns — Kinsta "Clear Caches", etc.)
 * ABOVE the sticky site nav. The nav stack goes up to z-index 200000, above the admin
 * bar's default 99999, so its dropdowns were rendering behind the CALL NOW / MESSAGE US
 * buttons. Logged-in only (#wpadminbar doesn't exist on the public site), so this is inert
 * for visitors.
 * ============================================================ */
#wpadminbar { z-index: 200500 !important; }

/* Bottom-bar labels grew with the CTA consolidation; keep the bar at --mobile-bottom-bar-height on phones. */
@media (max-width: 480px) {
  /* NOT nowrap: this bar is position:fixed, and fixed boxes are not clipped by html/body
     overflow-x, so a label wider than its half widened the whole page on narrow phones.
     Labels wrap to two lines instead (2026-09-24). */
  .mobile-bottom-btn { font-size: 0.7rem; letter-spacing: 0.02em; padding: 10px 8px; white-space: normal; text-align: center; line-height: 1.2; min-width: 0; }
  .mobile-bottom-btn svg { display: none; }
}

/* ---- Fluid desktop header (owner 2026-09-10) ----
   Between the mobile switch (1100px) and 1440px the logo, link type, link padding and the CTA
   all scale with the viewport so no menu label or the CTA ever wraps to a second line. */
@media (min-width: 1101px) {
  .logo-img { height: clamp(44px, 5.4vw, 76px); }
  .nav-menu > li > a {
    white-space: nowrap;
    font-size: clamp(0.72rem, 0.55rem + 0.35vw, 0.85rem);
    padding-left: clamp(6px, 0.9vw, 16px);
    padding-right: clamp(6px, 0.9vw, 16px);
  }
  .nav-cta {
    white-space: nowrap;
    font-size: clamp(0.62rem, 0.45rem + 0.3vw, 0.75rem);
    padding-left: clamp(0.6rem, 0.9vw, 1.1rem);
    padding-right: clamp(0.6rem, 0.9vw, 1.1rem);
  }
  .nav-cta-group { margin-left: clamp(6px, 1vw, 16px); }
}

/* ===== Scrolled header stays dark green =====
   Owner, 2026-09-18: "Let's keep the header green even after scroll. Right now it
   turns to beige and change the letters and the logo to a darker color, but just
   have it keep it dark green and keep the logo the white variant and the links white."

   The scrolled state above flips SEVEN things to dark-on-light — background, logo
   swap, link colour, link hover, the message CTA, the mobile toggle border and its
   bars. Rather than unpick each rule in place, this block restores the page-top
   treatment and gives the bar a solid dark ground. Delete this block to get the
   beige behaviour back.
   (.nav-wrapper.scrolled .dropdown is already var(--dark) — left alone.) */

.nav-wrapper.scrolled {
  background: rgba(21, 59, 55, 0.94);           /* --dark, matching the top bar */
  box-shadow: 0 2px 40px rgba(21, 59, 55, 0.22);
}

/* keep the white logo, never fade in the dark one */
.nav-wrapper.scrolled .logo-img--white { opacity: 1; }
.nav-wrapper.scrolled .logo-img--black { opacity: 0; }

/* links stay light, hover stays coral as at page top */
.nav-wrapper.scrolled .nav-menu > li > a { color: var(--text-light); }
.nav-wrapper.scrolled .nav-menu > li > a:hover,
.nav-wrapper.scrolled .nav-menu > li.active > a { color: var(--accent); }

/* secondary CTA reads on dark again */
.nav-wrapper.scrolled .nav-cta--message {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.3);
}
.nav-wrapper.scrolled .nav-cta--message:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

/* mobile toggle */
.nav-wrapper.scrolled .menu-toggle { border-color: rgba(255, 255, 255, 0.2); }
.nav-wrapper.scrolled .menu-toggle-inner span { background: var(--white); }