/* ========== CSS Variables for Header Template ========== */
:root {
  --super-header-height: 52px;
  --nav-height: 86px;
  --total-header-height: calc(var(--super-header-height) + var(--nav-height));
  /* How much fixed chrome a hero has to clear. Single source of truth for the
     hero system (tmj-sections.css / tmj-lean.css), which insets the hero photo
     below it so the chrome never lands on a subject's head — see the comment on
     `.s-hero__bg`. Tracks the real chrome height: below 1199px .super-header is
     display:none and .nav-container drops to 70px (see the media blocks at the
     bottom of this file), so the two must stay in step. */
  --hero-chrome-h: var(--total-header-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;
  /* The warm beige. Was a literal in one place (--hero-cream, tmj-lean.css 7d) when
     only the home hero used it; the scrolled header is the second consumer, so it is
     a token and that rule reads it from here. Stored as components too so callers
     can set their own alpha without re-typing the hex. */
  --beige: #f0e7dc;
  --beige-rgb: 240, 231, 220;
}

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

/* ========== First-section offset for the fixed header (Task 14 fix) ==========
   .super-header + .nav-wrapper are both position:fixed (see above), so page
   content normally starts at y=0 and the ported bodies' own <h1> -- always
   emitted as the FIRST `.section` by bin/port/render/{service,symptom,page}.py
   -- rendered underneath/behind the logo. Structural selector, not a class,
   so it applies uniformly across every template that puts `.section` first in
   the content area without touching the port pipeline:
     - single-service.php / single-symptom.php / single-condition.php nest
       content inside their own `<main id="main-content">`, itself inside
       header.php's `<div id="main-content">` -- an ID selector matches BOTH
       (any element with that id), so `#main-content > .section:first-child`
       reaches the section however many #main-content elements are nested.
     - page.php (generic pages, e.g. /technology/) has no extra wrapper --
       the section is a direct child of header.php's div#main-content.
     - template-page.php / template-page-wide.php / front-page.php put their
       own `.page-header` (or home hero) first, so `.section` is never the
       first child there and this rule never matches -- no collateral effect.
   167px = --total-header-height (138px) + ~29px clearance, matching the
   live site; 90px mobile matches the same math against the mobile header's
   collapsed height (super-header hidden below 1199px, nav-container drops
   to 70px -- see the @media (max-width:1199px) block above). */
#main-content > .section:first-child {
  padding-top: calc(var(--total-header-height) + 29px);
}
@media (max-width: 900px) {
  #main-content > .section:first-child {
    padding-top: 90px;
  }
}

/* ========== First-section DARK HERO background (Task 14 fix round 3) ==========
   .nav-wrapper is transparent at page top (see below) and only turns opaque
   once `.scrolled` is applied -- that's why a white logo variant AND
   var(--text-light) nav-link text exist at all: the design assumes a dark
   hero sits behind the transparent header. The live source site confirms
   this exact pattern (verified via Playwright against
   https://www.raleightmjandsleep.com/services/laser-therapy/: the first
   content section renders `linear-gradient(63deg, rgba(19,59,55,.89) 39%,
   rgba(19,59,55,.02) 100%), url(.../Office.webp)` behind a white H1). Our
   ported bodies start on a plain white section instead, so the white logo
   and pale nav-link text were invisible (present in the DOM, not on screen)
   -- not a scroll-state bug, a missing dark-hero bug. This also matches the
   framework's own documented rule (see docs/SITE-TRANSFER-PLAYBOOK.md /
   TMJ-ANCHOR-FRAMEWORK-MIGRATION-HANDOFF.md): "Theme 'Primary' color = the
   DARK hero/heading color" -- --primary-color (tokens.css) IS this hero
   color, `#153b37`, already carrying that exact comment.
   Reuses the same structural selector as the padding-top rule above (still
   no bin/port/render touch needed -- all 3 pilot templates put a lone `<h1>`
   in this first `.section`). Text-color child selector intentionally mirrors
   primitives.css's `.section--inverse` list verbatim (same mechanism,
   re-scoped structurally instead of via a class, since the ported markup has
   no `.section--inverse` class to hook here) so any future content in this
   section (eyebrow, subtitle, list) inherits the same dark-hero treatment
   without a second fix. */
#main-content > .section:first-child {
  background-color: var(--primary-color, var(--dark, #153b37));
}
#main-content > .section:first-child :is(.eyebrow-text, .content-header, h1, h2, h3, h4, h5, h6, p, li, a:not(.btn-default)) {
  color: var(--white-color, var(--white, #fff));
}

/* ========== 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;
}

/* Scrolled: the beige, not white (client 2026-09-11). Same glass treatment -- a
   little translucency plus the blur -- so the bar still reads as a panel over the
   page rather than a block, but it now lands in the palette instead of next to it.
   The dark ink and black logo this state already switches to were chosen against
   white and hold on beige: #4a5f5c on #f0e7dc is 5.6:1. */
.nav-wrapper.scrolled {
  background: rgba(var(--beige-rgb), 0.92);
  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 {
  /* flex-shrink:0 because this is a brand mark, not a box. It is a replaced
     element with a set height and width:auto, so as a shrinkable flex item the
     row's overflow was being paid for by squashing the lockup horizontally —
     measured 38% narrower than its own aspect ratio at 1101px, 19% at 1366px.
     Nothing in the layout said "distort the logo"; it was just the only item
     left that would give. Now it holds its shape and the row's pressure is
     released by the breakpoints instead.

     4.8vw rather than 6.2vw is what makes that affordable. It is the ramp the
     scrolled state already uses (clamp(46px, 4.8vw, 60px) below), so the two
     states now differ only in ceiling; 6.2vw asked for a 76px lockup at 1226px
     wide, which is where the row stopped fitting in the first place. Unchanged
     at 1584px and up, where the clamp is pinned to its 76px ceiling either way. */
  height: clamp(46px, 4.8vw, 76px);
  width: auto;
  flex-shrink: 0;
  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;
  /* Keep each item at its natural width. The design's intent is single-line
     top-level labels -- Cleveland renders all four of its labels on one line,
     including "Pain & Sleep Services". Raleigh's menu has six longer labels, and
     as shrinkable flex items five of them wrapped mid-label ("About / Us") at
     every desktop width. Measured: the six need 774px against 798px available,
     and the desktop nav only renders at >=1200px, so this fits everywhere it
     applies without horizontal overflow. */
  flex: 0 0 auto;
}

.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  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 .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;
  /* The nav row is space-between, so the only flexible items in it are the ones
     that did not opt out — .nav-menu > li already did (flex:0 0 auto up this
     file), which left these two buttons as the row's shock absorber. Between
     1200 and 1365 the row runs out of slack and they were the thing that gave:
     measured at 1280 they compressed from 114/131px to 100/113 and both labels
     broke to two lines ("CALL / NOW"), which also pushed the buttons taller than
     the 47px the rest of the bar is built around. A CTA is the last thing in a
     header that should absorb pressure, so it opts out too and the pressure is
     released by the padding rule at the 1365 breakpoint below instead. */
  flex: 0 0 auto;
  white-space: nowrap;
  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: 1199px) {

  .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;
    transform: translateY(0);
    transition: transform 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 {
    transform: translateY(100%);
  }

  .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: 1199px) {
  .admin-bar .mobile-menu {
    padding-top: calc(70px + 32px);
  }
}

@media (max-width: 1199px) 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;
  }
}

/* Where the row stops fitting at its natural widths. The old floor was 1199px,
   chosen when the CTA buttons and the logo could both still be squeezed. With
   both of them fixed the shortfall starts as soon as .nav-container can no
   longer reach its 1440px max — and .nav-container is 90% wide above 1365px but
   100% - 30px below it, so 1366px is actually TIGHTER than 1365px (1229px of
   room against 1335px). Hence 1599px, not 1365px: the band has to cover the
   pinch on both sides of that switch. Recovers 4px per nav-item side, 48px
   across the six, plus 14px of CTA margin. */
@media screen and (max-width: 1599px) {
  .nav-cta-group {
    margin-left: 10px;
  }

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

/* Second step of the same tightening. At 1200px — the first width that renders
   the desktop nav at all — 12px sides leave the row 2px of slack, which is close
   enough to zero that any label edit would push the logo back into a squash.
   10px restores 24px of headroom there and is invisible next to the 12px it
   replaces; it stops at 1280 so the extra crowding never reaches a width that
   does not need it. */
@media screen and (max-width: 1279px) {
  .nav-menu > li > a {
    padding: 1.75rem 10px;
  }
}

@media screen and (max-width: 1199px) {
  .nav-container {
    height: 70px;
  }
  /* .super-header is display:none from here down, so the chrome a hero must
     clear is the collapsed nav alone. Keep in step with the height above. */
  :root {
    --hero-chrome-h: 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(--accent-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; }

/* Third mobile-bar button: Take Quiz (2026-10-07). Opens #quiz-choice-popup. */
@media (max-width: 1199px) {
  .mobile-bottom-btn--quiz { background: #3c8880; color: #fff; }
  .mobile-bottom-btn--quiz:active { background: #33766f; }
  .mobile-bottom-btn--quiz svg { stroke: #fff; }
}
/* Three buttons on a phone: drop the icons and tighten so the labels fit on one line. */
@media (max-width: 480px) {
  .mobile-bottom-bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .mobile-bottom-btn { padding: 12px 4px; gap: 0; font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap; }
  .mobile-bottom-btn svg { display: none; }
}