/* ---------------------------------------------------------------------------
 * Circle Chiropractic — navigation overrides.
 *
 * Loaded on every page after the per-document inline styles, so it can correct
 * them without editing 36 copies of the same markup.
 *
 *  1. Desktop: consistent vertical alignment for every top-level nav entry.
 *  2. Desktop: no caret on entries that have no dropdown.
 *  3. Mobile: full-viewport fade-in overlay with accordions, built by cc-nav.js.
 *  4. Mobile: burger morphs into an X while open.
 * ------------------------------------------------------------------------- */

/* -- 1. Desktop alignment ------------------------------------------------- */
/* The markup mixes bare <a> children with .nav-item <div> wrappers. Bare links
   were inline-flex while .nav-item links stayed inline, so the two sat on
   different baselines. Force one box model for both. */
.main-nav {
  align-items: stretch;
}

.main-nav > a,
.main-nav > .nav-item {
  display: flex;
  align-items: center;
}

.main-nav > a,
.main-nav > .nav-item > a {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding-block: var(--space-2);
}

/* -- 2. Caret only when a dropdown actually exists ------------------------ */
.main-nav .nav-item > a::after { content: none; }

.main-nav .nav-item:has(.nav-drop) > a::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-left: .35em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .6;
}

/* Fallback for browsers without :has() — cc-nav.js adds this class instead. */
.main-nav .nav-item.has-drop > a::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-left: .35em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .6;
}

/* A .nav-item whose dropdown JS removed (single child, same href) is a plain link. */
.main-nav .nav-item.no-drop > a::after { content: none !important; }

/* -- 3. Mobile overlay ---------------------------------------------------- */
/* The old inline-styled panel is replaced by #ccMobileNav. */
.mobile-nav { display: none !important; }

.cc-mnav {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

.cc-mnav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .cc-mnav { transition-duration: .01ms; }
}

.cc-mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem) var(--gutter, 1.25rem);
  border-bottom: 1px solid var(--border-subtle, #e5ebf3);
  flex: none;
}

.cc-mnav__body {
  flex: 1 1 auto;
  padding: var(--space-2, .5rem) var(--gutter, 1.25rem) var(--space-8, 2rem);
}

/* Rows -------------------------------------------------------------------- */
.cc-mnav__link,
.cc-mnav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, .75rem);
  width: 100%;
  padding: var(--space-4, 1rem) var(--space-1, .25rem);
  font-family: var(--font-display, inherit);
  font-weight: var(--fw-semibold, 600);
  font-size: var(--fs-title, 1.125rem);
  color: var(--text-heading, #0a1b3d);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-subtle, #e5ebf3);
  cursor: pointer;
  line-height: 1.25;
}

.cc-mnav__toggle::after {
  content: "";
  flex: none;
  width: .6em;
  height: .6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
  opacity: .55;
}

.cc-mnav__toggle[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* Accordion panel --------------------------------------------------------- */
.cc-mnav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s ease;
}

.cc-mnav__panel > div { overflow: hidden; }

.cc-mnav__panel.is-open { grid-template-rows: 1fr; }

@media (prefers-reduced-motion: reduce) {
  .cc-mnav__panel { transition-duration: .01ms; }
}

.cc-mnav__sub {
  display: block;
  padding: var(--space-3, .75rem) var(--space-1, .25rem) var(--space-3, .75rem) var(--space-5, 1.25rem);
  font-family: var(--font-body, inherit);
  font-weight: var(--fw-medium, 500);
  font-size: var(--fs-body, 1rem);
  color: var(--text-body, #33415c);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle, #eef2f7);
}

.cc-mnav__sub--hub { font-weight: var(--fw-bold, 700); color: var(--text-heading, #0a1b3d); }

.cc-mnav__foot { padding: var(--space-5, 1.25rem) 0 0; }
.cc-mnav__foot .btn { width: 100%; }

.cc-mnav__call {
  display: flex;
  align-items: center;
  padding: var(--space-4, 1rem) var(--space-1, .25rem);
  color: #0b2545;
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle, #e5ebf3);
}

.cc-mnav__call-line {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
}

.cc-mnav__call .cc-mnav__call-ico,
.cc-mnav .cc-mnav__call svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  flex: none;
  color: var(--blue-600, #1178ff);
}

.cc-mnav__call-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cc-mnav__call-eyebrow {
  font-family: var(--font-body, inherit);
  font-weight: var(--fw-bold, 700);
  font-size: .625rem;
  letter-spacing: var(--tracking-overline, .14em);
  text-transform: uppercase;
  color: var(--text-muted, #5b6b85);
  line-height: 1.2;
  margin-bottom: 7px;
  /* Indent past the icon + its gap so the eyebrow starts on the same x as the
     number below it, rather than at the icon's left edge. Derived from the icon
     width and the same gap token .cc-mnav__call-line uses, so the two stay in
     step if either changes. */
  margin-left: calc(16px + var(--space-2, .5rem));
}

.cc-mnav__call-num {
  font-family: var(--font-display, inherit);
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-title, 1.125rem);
  line-height: 1.2;
  color: #0b2545;
}

.cc-mnav__call:hover .cc-mnav__call-num { color: var(--blue-600, #1178ff); }

body.cc-mnav-open { overflow: hidden; }

/* -- 4. Burger -> X ------------------------------------------------------- */
/* The button holds an inline 3-path SVG; animate the paths in place. */
.nav-toggle svg path {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform .26s ease, opacity .18s ease;
}

.nav-toggle[aria-expanded="true"] svg path:nth-of-type(1) {
  transform: rotate(45deg) translateY(7px);
}
.nav-toggle[aria-expanded="true"] svg path:nth-of-type(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] svg path:nth-of-type(3) {
  transform: rotate(-45deg) translateY(-7px);
}

/* While the white overlay is up the button sits on white, so drop the
   translucent-on-hero treatment the header applies. */
.nav-toggle[aria-expanded="true"] {
  position: relative;
  z-index: 310;
  background: transparent !important;
  border-color: var(--border-subtle, #e5ebf3) !important;
  color: var(--text-heading, #0a1b3d) !important;
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle svg path { transition-duration: .01ms; }
}

/* ---------------------------------------------------------------------------
 * Announce bar — single primary phone.
 *
 * Every page now uses the "New patients welcome — Call …" layout instead of the
 * three per-clinic numbers. Only 2 of the 35 documents ever carried styles for
 * it inline, so the rules live here where all pages get them.
 * ------------------------------------------------------------------------- */
.announce .a-newpt {
  color: var(--blue-300, #7fb2ff);
  font-weight: var(--fw-semibold, 600);
}

.announce .a-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  color: var(--white, #fff);
  font-weight: var(--fw-bold, 700);
  white-space: nowrap;
}

.announce .a-primary svg {
  width: 14px;
  height: 14px;
  color: var(--blue-300, #7fb2ff);
  flex: none;
}

.announce .a-primary:hover { color: var(--blue-200, #9ec5ff); }

/* Narrow screens: keep the number, drop the lead-in rather than wrapping. */
@media (max-width: 480px) {
  .announce .a-newpt { display: none; }
}

/* ---------------------------------------------------------------------------
 * Mobile overlay close button.
 *
 * The burger cannot be reused as the close control: it lives inside
 * .site-header, which is its own stacking context at z-index 60, so it can
 * never paint above this overlay (z-index 300). The overlay carries its own.
 *
 * Black on the white overlay, per design.
 * ------------------------------------------------------------------------- */
.cc-mnav__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-subtle, #e5ebf3);
  border-radius: var(--radius-circle, 50%);
  color: #000;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.cc-mnav .cc-mnav__close svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: 20px;
  display: block;
  color: #000;
}

.cc-mnav__close:hover {
  background: rgba(0, 0, 0, .06);
  border-color: rgba(0, 0, 0, .28);
  transform: rotate(90deg);
}

.cc-mnav__close:active { transform: rotate(90deg) scale(.94); }

.cc-mnav__close:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* The two strokes draw themselves in as the overlay fades up. */
.cc-mnav__close svg line {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transform: scale(0) rotate(-90deg);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1) .08s, opacity .22s ease .08s;
}

.cc-mnav.is-open .cc-mnav__close svg line {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.cc-mnav.is-open .cc-mnav__close svg line:nth-of-type(2) {
  transition-delay: .16s;
}

@media (prefers-reduced-motion: reduce) {
  .cc-mnav__close,
  .cc-mnav__close svg line { transition-duration: .01ms; }
  .cc-mnav__close:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Mobile overlay logo lockup.
 *
 * The header's white-text rule is scoped to .site-header, so the clone inside
 * the overlay does not inherit it — it would fall back to --text-heading.
 * Pin it to the brand navy explicitly against the white overlay.
 * ------------------------------------------------------------------------- */
.cc-mnav__head .brand-lockup,
.cc-mnav__head .brand-lockup b {
  color: #0b2545;
  /* The header gives the wordmark a glow so white type reads over the hero
     photo. On the white overlay that just looks like a smudge. */
  text-shadow: none;
}

.cc-mnav__head .brand-lockup small {
  color: rgba(11, 37, 69, .68);
}

/* ---------------------------------------------------------------------------
 * Announce bar hides on scroll.
 *
 * .announce is fixed at the top (38px tall) and .site-header is pinned below it
 * at top: 38px, so the bar cannot simply be hidden — the header has to move up
 * into the space, or a 38px gap opens above it.
 *
 * cc-nav.js adds .cc-scrolled to <html> past 12px, the same threshold the theme
 * uses for .site-header.scrolled, so both transitions fire together.
 * ------------------------------------------------------------------------- */
.announce {
  transition: transform .26s ease, opacity .2s ease;
  will-change: transform;
}

html.cc-scrolled .announce {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.site-header {
  transition: top .26s ease,
              background-color var(--dur-base, .2s) var(--ease-standard, ease),
              box-shadow var(--dur-base, .2s) var(--ease-standard, ease);
}

.cc-scrolled .site-header { top: 0; }

/* The overlay covers the viewport, so a bar peeking out behind it would be
   visible through the fade. Keep it out of the way whenever the menu is open. */
body.cc-mnav-open .announce {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .announce,
  .site-header { transition-duration: .01ms; }
}

/* ---------------------------------------------------------------------------
 * Hero — Google reviews pill, full width on mobile.
 *
 * .hero-rating is inline-flex, so it hugs its content while the CTAs above it
 * stretch edge to edge and the row looks ragged. The theme makes those buttons
 * full width at two different breakpoints, so both are mirrored here to keep
 * the pill in lockstep:
 *     .hero-ctas .btn          -> max-width: 480px
 *     .hero-v2 .hero-ctas .btn -> max-width: 640px
 *
 * (Living in cc-nav.css because that is the one stylesheet loaded on all 263
 * pages — the hero markup and its CSS are inlined per-document.)
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  html .hero-rating {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
}

/* .hero-v2 .hero-rating rule removed 2026-08-19 — the homepage hero was rebuilt
   ("Hero A4") and no longer uses .hero-v2 or .hero-rating; its rating chip is
   now .hv-rating, styled directly in cc-home.php. */

/* ---------------------------------------------------------------------------
 * Awards band.
 *
 * Theme defaults: padding-block clamp(.55rem, 1.3vw, .95rem); the row is
 * auto-fit minmax(210px, 1fr), dropping to 2 columns at 1060px and 1 at 480px.
 *
 * Replaced with a flat 25px band at every width, and explicit column counts:
 *   desktop (>1024px) - left to the theme's auto-fit row
 *   tablet  (<=1024px) - 2 per row
 *   mobile  (<=767px)  - 1 per row, badge + text centred
 * ------------------------------------------------------------------------- */
html .awards {
  padding-block: 25px;
}

/* tablet */
@media (max-width: 1024px) {
  html .awards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobile */
@media (max-width: 767px) {
  html .awards-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  html .award {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * Sticky offset for the steps ring, now that the announce bar hides on scroll.
 *
 * .ring-col sticks at top: 112px (132px in a nested query) on mobile — sized
 * for the old fixed chrome: 38px announce bar + 76px header ≈ 114px. Once the
 * bar slides away the header alone occupies 76px, so those offsets leave a
 * 36–56px blank strip above the element.
 *
 * A variable keeps it correct in BOTH states: full chrome before the page
 * scrolls, header-only after — and it eases across as the header moves up.
 * ------------------------------------------------------------------------- */
:root { --cc-chrome-h: 114px; }          /* 38px announce + 76px header */
.cc-scrolled { --cc-chrome-h: 76px; }    /* bar hidden, header at top: 0 */

@media (max-width: 860px) {
  html .ring-col {
    top: var(--cc-chrome-h);
    transition: top .26s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring-col { transition-duration: .01ms; }
}

/* ---------------------------------------------------------------------------
 * Bottom of page: kill the white strip under the footer.
 *
 * The sticky call/book bar is position:fixed and 74px tall, so the theme adds
 * body { padding-bottom: 74px } below 767px to stop it covering content. The
 * footer ends above that reservation, leaving 74px of white page background
 * showing beneath the dark footer.
 *
 * Rather than remove the reservation (which would let the bar sit on top of the
 * footer's last line), stretch the footer down over it: pull it into the gap and
 * add matching inner padding, so the space stays reserved but reads as footer.
 * ------------------------------------------------------------------------- */
/* REVERTED: pulling the footer down over the reservation swallowed the sticky
   bar's slot. The 74px is not dead space — it is where the fixed bar sits. */

/* ---------------------------------------------------------------------------
 * Long CTA buttons on mobile.
 *
 * .btn is a flex row of [label][::after arrow] with justify-content: center.
 * At .btn-lg sizing (fs-body-lg + 2.1rem side padding) a long label such as
 * "Request Your Appointment Today" wraps to two lines; because the button is
 * width:100% the label box stretches and the arrow is stranded at the far
 * right, so the two stop reading as one unit.
 *
 * Trim the side padding and step the type down to fs-body, which buys roughly
 * 40px of line width, and centre the wrapped lines so a two-line label still
 * looks deliberate.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  html .btn-lg {
    /* Full width so long CTAs match the stacked layout around them. */
    width: 100%;
    box-sizing: border-box;
    /* align-self:flex-start is set on .btn in some sections and would collapse
       the button back to its content width inside a flex column. */
    align-self: stretch;
    padding-inline: 1.35rem;
    font-size: var(--fs-body, 1rem);
    line-height: 1.3;
    text-align: center;
  }

  /* Keep the arrow tight to the label rather than adrift at the edge. */
  html .btn-arrow {
    justify-content: center;
    gap: var(--space-1, .25rem);
  }

  html .btn-arrow::after {
    margin-left: .3em;
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------------------
 * Sticky call/book bar.
 *
 * It is position:fixed at the bottom with z-index 200; the mobile menu overlay
 * is z-index 300, so the overlay already paints over it — but a fixed bar
 * showing through behind a fading overlay reads as a glitch, and it stays
 * tappable during the fade. Take it out of play entirely while the menu is open.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html .cc-stickybar { display: flex; }
}

body.cc-mnav-open .cc-stickybar {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Body bottom padding.
 *
 * The theme reserves 74px below 767px for the fixed sticky bar
 * (@media(max-width:767px){ body{padding-bottom:74px} }). Set to 60px.
 * `html body` (0,0,2) outranks the theme's `body` (0,0,1) regardless of order.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html body {
    padding-bottom: 60px;
  }
}

/* ---------------------------------------------------------------------------
 * Drop the announce bar on small screens; it returns above 640px.
 *
 * Three things have to move together, because the chrome is a stack of fixed
 * elements:
 *
 *   1. hide .announce
 *   2. .site-header is pinned at inset: 38px 0 auto 0 — pull it to the top,
 *      or it floats 38px down with nothing above it
 *   3. --cc-chrome-h drives .ring-col's sticky offset; with no bar the chrome
 *      is just the 76px header at every scroll position
 *
 * From 641px up the bar is back and keeps its hide-on-scroll behaviour.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  html .announce { display: none; }

  html .site-header { top: 0; }

  :root { --cc-chrome-h: 76px; }
}

/* ---------------------------------------------------------------------------
 * Superhuman Protocol certification badge (footer).
 *
 * The vendor script injects an <a><img></a> with inline width:30%; max-width:200px.
 * Constrain it to the footer column and give it breathing room above the socials.
 *
 * The supplied artwork is "…logodarkr2023.jpg" — a DARK logo. The footer is dark
 * navy, so it may need a light plate behind it; see the note in the handover.
 * ------------------------------------------------------------------------- */
.footer-cert:not(:empty) {
  margin: var(--space-4, 1rem) 0 var(--space-5, 1.25rem);
}

/* The theme sizes EVERY image in the brand column as if it were the logo:
       .footer-brand img { width: 56px; height: 56px; margin-bottom: … }
   That is (0,1,1), the same as `.footer-cert img`, so it won on source order and
   pinned the badge to 56x56. Scoping through .footer-brand takes this to (0,2,1)
   so the theme rule applies to the logo only, and the badge is exempt. */
.footer-brand .footer-cert img,
html .footer-cert img {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 0;
  /* The vendor also stamps an inline style="max-width:200px" on the <img>;
     inline beats any stylesheet, so this one needs !important. */
  max-width: 100% !important;
}

/* ---------------------------------------------------------------------------
 * Hero: never a fixed height.
 *
 * The per-document "fixpack" ships this on all 35 pages:
 *
 *   @media(min-width:768px){
 *     .hero:not(.hero-v2){ min-height:560px!important; max-height:560px!important; }
 *     .hero:not(.hero-v2) .hero-inner{ padding-block:118px 30px!important; … }
 *   }
 *
 * .hero also sets overflow:hidden, so max-height is a hard clip rather than a
 * cap — any hero whose content exceeds 560px loses the bottom of it. The 118px
 * top padding (clearing the fixed chrome) plus 30px bottom leaves only ~412px
 * of usable space, which the Conditions CPT blows through: eyebrow + three-line
 * H1 + three-line lede + two buttons. The Call button was being cut in half.
 *
 * Keep the 560px floor so short heroes still look generous; drop the ceiling so
 * tall ones can grow. The homepage (.hero-v2) was never in scope of that rule.
 *
 * Specificity: the fixpack selector is (0,2,0) !important, so this needs both a
 * higher specificity AND !important to win.
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  html .hero:not(.hero-v2) {
    min-height: 560px !important;   /* floor, as before */
    max-height: none !important;    /* was 560px — the clip */
    height: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * Interior hero: stop bottom-anchoring short content.
 *
 * 7 of the 8 interior templates (all but cc-book) ship:
 *     .hero-lead { margin-top: auto; max-width: …; }
 * inside a column-flex .hero-inner that the fixpack above already sets to
 * justify-content:center!important. The auto margin overrides that intent —
 * it eats all free space above the block, so short content (no hero-sub, e.g.
 * /our-team/) gets shoved to the very bottom of the 560px floor, leaving a
 * tall dead strip of hero photo above it. Long content (e.g. /faqs/) has no
 * free space left to eat, so the auto margin resolves to 0 there and the
 * inconsistency doesn't show — which is why only the short-content pages look
 * "unaligned" next to the others.
 *
 * Neutralizing the auto margin lets justify-content:center do what it was
 * already set up to do: centered for short content, natural top-to-bottom
 * flow for content that fills or exceeds the box. Same specificity fight as
 * the block above (inline rule is (0,1,0), unqualified) — html-prefix is
 * enough here, no !important needed.
 * ------------------------------------------------------------------------- */
html .hero-lead { margin-top: 0; }

/* ---------------------------------------------------------------------------
 * Hero top padding on mobile.
 *
 * The theme sets, below 860px:
 *     .hero-inner { padding-block: calc(114px + var(--space-16)) var(--space-12); }
 * = 114px + 64px = 178px of top padding. The 114px was sized for the old fixed
 * chrome (38px announce bar + 76px header); below 640px the announce bar is now
 * hidden, so the chrome is only 76px and most of that 178px is dead space.
 *
 * Reduced to 40px as requested. NOTE: the header is position:fixed and 76px
 * tall, so 40px puts the eyebrow behind it. For 40px of CLEAR space below the
 * header use  calc(76px + 40px)  instead.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  html .hero .hero-inner,
  html .hero-inner {
    padding-block-start: 40px !important;
  }
}

/* ---------------------------------------------------------------------------
 * Article images: never upscale.
 *
 * parts/article-sidebar.php sets `.img-lead img { width: 100% }`, which forces
 * every standalone image to the full content column regardless of its natural
 * size. Imported Avada content includes small decorative assets — e.g.
 * quote-img02.png at 100x76 and star.png at 400x70 — and stretching a 100px
 * icon to ~800px is what broke the bottom of /softwave-trt/.
 *
 * width:auto + max-width:100% lets big images fill the column as before while
 * small ones stay at their natural size.
 *
 * .img-duo is deliberately excluded: its `width/height:100% + object-fit:cover`
 * is what makes the 2-up grid cells match.
 * ------------------------------------------------------------------------- */
html .img-lead img,
html .img-solo img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
 * Adjacent lists → two columns.
 *
 * The Avada import left long lists split across two consecutive <ul> elements
 * (they were side-by-side columns in the original layout). Stacked, they read
 * as one very long list with an unexplained gap where the first <ul> ends.
 * inc/article-media.php now wraps such runs in .list-duo.
 * ------------------------------------------------------------------------- */
.list-duo {
  display: grid;
  /* auto-fit, not a fixed 2, because the run length varies: /softwave-trt/ has
     two lists (12 + 11 items) and /ultrasound/ has three (4 + 4 + 3). A hard
     2-column grid would drop the third list onto a lonely second row. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 var(--space-8, 2rem);
  align-items: start;
  margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
}

.list-duo > ul { margin-block: 0; }

/* A single column on small screens — two 50% columns of list text is unreadable. */
@media (max-width: 640px) {
  .list-duo { grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------------------
 * Decorative article images (Avada import leftovers).
 *
 * star.png (400x70) and quote-img02.png (100x76) are ornaments, not content
 * images, but the article-media filter wraps every standalone image in
 * .img-lead. Sized and positioned explicitly here.
 *
 * display:block is required — an inline <img> ignores margin:auto, so the
 * centring/right-alignment below would silently do nothing.
 * ------------------------------------------------------------------------- */
html .img-lead img[src*="quote-img02"] {
  display: block;
  width: 60px;
  margin-left: auto;
}

html .img-lead img[src*="star.png"] {
  display: block;
  width: 150px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
 * Reviews hero: nudge the star row onto the eyebrow's optical line.
 *
 * <p class="overline"> and <span class="hero-stars"> are siblings, both
 * inline-flex, so they share a line but not a baseline — the 22px star icons
 * ride high against 0.875rem uppercase text.
 *
 * position:relative + top keeps this purely visual: the element is offset
 * without disturbing the flow of the eyebrow beside it. .hero-stars only
 * exists on /reviews/, so this needs no page scoping.
 * ------------------------------------------------------------------------- */
html .hero .hero-stars {
  position: relative;
  top: 7px;
}

/* ---------------------------------------------------------------------------
 * .hero-lead top margin on mobile/tablet — normalised to --space-8.
 *
 * Below 860px the per-document CSS sets one of two values, depending on which
 * kit variant the page was built from:
 *     28 documents: .hero-lead { margin-top: var(--space-20); }   (5rem / 80px)
 *     10 documents: .hero-lead { margin-top: var(--space-16); }   (4rem / 64px)
 *
 * Both are collapsed to --space-8 (2rem / 32px) so every hero opens the same
 * way. The desktop rule (margin-top:auto with a max-width) is untouched.
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  html .hero-lead {
    margin-top: var(--space-8);
  }
}

/* ---------------------------------------------------------------------------
 * Therapy card grid: .tx-e was omitted from the mobile rule.
 *
 * .tx-grid is a 12-column grid. The per-document CSS has:
 *   @media (max-width: 1060px) { .tx-a,.tx-b,.tx-c,.tx-d,.tx-e { grid-column: span 6 } }
 *   @media (max-width:  640px) { .tx-a,.tx-b,.tx-c,.tx-d       { grid-column: span 12 } }
 *
 * .tx-e is missing from the second rule, so below 640px it stays at span 6 —
 * half a 12-column grid — while every sibling goes full width. That is the
 * Massage Therapy card squeezed into a third of the screen with its heading
 * breaking one word per line. Present in 22 documents.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  html .tx-e {
    grid-column: span 12;
  }
}

/* ---------------------------------------------------------------------------
 * FAQ section: centred heading, full-width list.
 *
 * The theme centres only .booking .sec-head; the FAQ section head is left
 * aligned inside a 62ch box. And .faq-list is capped at 60rem with
 * `margin-inline: 0 !important` from the fixpack, so it sits pinned to the left
 * of a much wider .wrap — the heading and the cards end up on different axes.
 *
 * Centre the head to match .booking, and let the list use the container width.
 * ------------------------------------------------------------------------- */
html .faq .sec-head {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

html .faq .sec-head .overline {
  justify-content: center;
}

html .faq .faq-list {
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * FAQ accordion animation.
 *
 * cc-nav.js holds the `open` attribute until the height transition finishes, so
 * .faq-body needs a transitionable height and hidden overflow. The chevron is
 * driven off .is-open (set immediately on click) rather than [open] (which lags
 * by the duration of the close animation), so it turns the instant you click.
 * ------------------------------------------------------------------------- */
html .faq-item.is-open summary .chev {
  transform: rotate(180deg);
}

/* While collapsing, [open] is still set but .is-open has gone — make sure the
   chevron follows .is-open, not [open]. */
html .faq-item[open]:not(.is-open) summary .chev {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  html .faq-item .faq-body { transition: none !important; }
}

/* ---------------------------------------------------------------------------
 * Sticky mobile CTA.
 *
 * The bar's styles live in the "fixpack" inside parts/chrome-header.php, which
 * only the 33 chrome-path pages load — so the dynamic layer (page.php /
 * single.php, i.e. 230 pages) had neither markup nor CSS for it. The markup is
 * now in footer.php; these rules give it the same appearance everywhere.
 *
 * Copied from the fixpack so the two paths cannot drift.
 * ------------------------------------------------------------------------- */
.cc-stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: none;
  gap: 8px;
  padding: 8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -4px 20px rgba(8, 20, 40, .12);
}

.cc-stickybar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 13px;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
}

.cc-sb-call { background: var(--surface-subtle, #eef3f9); color: var(--text-heading, #0a1b3d); border: 1px solid var(--border-subtle, #e5ebf3); }
.cc-sb-book { background: var(--blue-600, #1178ff); color: #fff; }
.cc-stickybar svg { width: 17px; height: 17px; flex: none; }

@media (max-width: 767px) {
  .cc-stickybar { display: flex; }
}

/* ---------------------------------------------------------------------------
 * Footer legal row: copyright left, Privacy Policy far right.
 *
 * .footer-legal is flex-direction: column, so the link would stack under the
 * copyright. Turned into a row with space-between from 640px up; still stacked
 * on phones, where two items side by side would crowd.
 *
 * The link matches the copyright's size, family and colour — it inherits all
 * three from .footer-legal, and the theme's `.footer-legal a` underline is
 * dropped so the two read as one line. Underline returns on hover.
 * ------------------------------------------------------------------------- */
@media (min-width: 641px) {
  html .footer-legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

html .footer-legal .footer-privacy {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}

html .footer-legal .footer-privacy:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   FAQ accordions — one indicator style sitewide.

   Two markup variants exist: 76 items carry <svg class="chev"> (a chevron that
   rotated 180deg) and the 6 on the home page carry <span class="faq-ind"> (a
   plus in a soft circle that rotates 45deg into an x). The home page treatment
   is the one we want everywhere. Rather than rewrite <summary> in 36 documents,
   both variants are hidden and the indicator is drawn on summary::after — the
   plus is two background bars, so the same rule renders identically whichever
   markup the page happens to ship.
   --------------------------------------------------------------------------- */
html .faq-item summary { align-items: flex-start; gap: var(--space-5); }
html .faq-item summary .chev,
html .faq-item summary .faq-ind { display: none !important; }

html .faq-item summary::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: var(--radius-circle);
  background-color: var(--surface-brand-soft);
  background-image: linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor);
  background-size: 14px 2.4px, 2.4px 14px;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--blue-600);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

html .faq-item[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--blue-500);
  color: var(--white);
}

/* Open card treatment from the home page (others used --border-default). */
html .faq-item[open] { border-color: var(--blue-200); }

/* The hover state on the question shipped only in the home page's inline CSS —
   the other 12 FAQ pages had no summary:hover rule at all. Same declaration,
   applied everywhere. */
html .faq-item summary:hover { color: var(--text-brand); }

html .hero-lead h1 { line-height: 1.2; font-size: clamp(2.5rem, 6.2vw, 4.5rem); }
/* .hero-v2 h1 / .hero-v2 .hero-copy removed 2026-08-19 — see note above;
   .hv-hero h1's line-height:1.2 is now set directly in cc-home.php instead. */
/* 2026-09-01: dropdown panels are white — remove the hero text glow that
   .main-nav a carries for the transparent-over-photo header state. */
.main-nav .nav-drop a { text-shadow: none; }