/* Southland Wellness - shared root chrome.
 *
 * ==> THIS STYLESHEET MUST LOAD *AFTER* EACH PAGE'S INLINE STYLE BLOCK, AND
 *     THAT ORDER IS LOAD-BEARING. Do not tidy it up into the head with the
 *     other stylesheet references.
 *
 *     69 of these 70 rules originally sat after at least one rule that stayed
 *     inline, including the block that repaints .btn-gold with --ink-on-gold.
 *     Loading first makes the inline base rule win again and the hero button's
 *     label reverts to white - 2.72:1 on gold. A border-top also vanishes and
 *     four elements shift ~1.14px. Loading last reproduces the cascade exactly,
 *     verified with a computed-style fingerprint over all five pages
 *     (619 elements, 43 properties each).
 *
 * index.html, privacy.html and terms.html do NOT reference this: only 44 of
 * these rules are byte-identical on the homepage and 18 across all eight, so
 * pulling them in would CHANGE rendering rather than preserve it.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* A30: the vestibular trigger that actually fires. Every /#schedule
   click is a full-page animated scroll; this hands it back to the
   user's OS-level motion preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { font-family: 'Open Sans', sans-serif; color: var(--navy); background: var(--white); line-height: 1.6; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.btn-gold:hover { background: var(--gold-hover); transform: translateY(-1px); }
.section-heading { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--navy); text-align: center; }
.divider { width: 55px; height: 2px; background: var(--gold); margin: 0.65rem auto 2.2rem; }
nav { background: var(--navy-dark); position: sticky; top: 0; z-index: 999; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
.logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
/* 76px in an 80px bar: 2px clearance top and bottom. The bar height is
   NOT raised with it - `nav.open .nav-links` positions the mobile drawer
   at top:80px and #schedule's scroll-margin is tuned to the 80.57px nav,
   so growing the bar would silently move both. Height costs no horizontal
   room here: the logo block's width is set by the wordmark text, measured
   at 286.7px whether the image is 68 or 88. */
.logo-img { height: 76px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
.logo-sub { font-size: 0.62rem; color: rgba(255,255,255,0.5); letter-spacing: 1.5px; text-transform: uppercase; }
.nav-links { display: flex; list-style: none; align-items: center; gap: 2rem; }
.nav-links a { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 0.85rem; color: rgba(255,255,255,0.78); text-decoration: none; transition: color 0.2s, border-color 0.2s; }
.nav-links a:not(.btn-gold) { border-bottom: 2px solid transparent; }
/* The current page was marked by COLOUR ALONE here (#82) while the resources
   nav already carried a gold underline - WCAG 1.4.1, and a gratuitous
   difference between two navs that are otherwise identical after the 08-12
   unification. The root GAINS the underline rather than resources losing it.

   The transparent border lives on the base rule so the reserved 2px is always
   in the box: painting it only on the active/hover state would shift every
   sibling label by 2px on hover. `.nav-links a` is already inline-block with
   0.5rem vertical padding (below), and the <ul> carries 9.47px of slack over
   the link box, so the 2px lands inside the existing 80.57px bar - measured,
   not assumed. Growing that bar would silently move #schedule's scroll-margin
   (A21) and the sticky top:80px.

   `aria-current="page"` is the attribute the resources nav uses and the only
   one assistive tech reads; `.active` is kept beside it because it is what the
   existing markup and index.html's nav script both key on.

   `:not(.btn-gold)` is load-bearing here, the same way it is for .service-card
   below. The CTA is a filled button carrying its own deliberate
   `1px solid rgba(255,255,255,0.14)` hairline (see .btn-gold). Suppressing the
   underline with `border-bottom: none !important` instead DELETED that
   hairline's bottom edge - measured, not theorised: the CTA went 40.48 ->
   39.91px and dragged the <ul> from 47.22 -> 46.65. Excluding the button from
   the rule leaves it untouched. */
.nav-links a:not(.btn-gold):hover,
.nav-links a:not(.btn-gold).active,
.nav-links a:not(.btn-gold)[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
.nav-links .btn-gold { padding: 0.55rem 1.25rem; color: #fff !important; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
/* Paint only when focused. An offscreen element needs no fill, and a
   position:absolute element that declares a background can be mistaken for
   an out-of-flow layer painting the surface beneath it. */
.skip-wrap { position: relative; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000;
  padding: 0.7rem 1.15rem; font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 0.85rem; text-decoration: none;
  border-radius: 0 0 5px 0; }
.skip-link:focus, .skip-link:focus:hover { left: 0; background: #111e33;
  color: #fff; outline: 2px solid #c8941e; outline-offset: -2px; }
#main { scroll-margin-top: 80px; }
/* No focus ring on the landmark itself: it is a programmatic skip target,
   not a keyboard-operable control. Outlining the whole content region on a
   skip is noise, not information. */
#main:focus { outline: none; }
.hamburger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hamburger span { display: block; width: 25px; height: 2.5px; background: #fff; border-radius: 2px; }
nav.open .nav-links { display: flex !important; flex-direction: column; position: absolute; top: 80px; left: 0; right: 0; background: var(--navy-dark); padding: 1.2rem 1.5rem 1.5rem; gap: 1rem; border-top: 1px solid rgba(255,255,255,0.08); z-index: 998; }
/* min-height and the inner padding have to move TOGETHER. The hero is
   content-driven at 531px, just over this floor, so trimming the padding alone
   would drop it to 483 and the 520 floor would immediately give it back -
   a change that measures as zero. */
.page-hero { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(17,30,51,0.93) 45%, rgba(17,30,51,0.52) 100%); }
.page-hero-inner { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 5.5rem 1.5rem; width: 100%; }
.page-hero h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.9rem); color: #fff; line-height: 1.15; margin-bottom: 1rem; max-width: 640px; }
.page-hero h1 span { color: var(--gold); }
.page-hero .hero-slogan { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.5rem); color: rgba(255,255,255,0.92); line-height: 1.3; max-width: 640px; margin-bottom: 1.25rem; }
.page-hero p { color: rgba(255,255,255,0.72); font-size: 0.97rem; max-width: 500px; line-height: 1.75; margin-bottom: 2rem; }
/* Hero badge: gold text on a translucent gold pill over a photographic hero.
   11.52px bold is NOT WCAG large text (that needs >=18.66px bold), so the
   floor is 4.5 and --gold #c8941e measured 4.02-4.21 across the five pages -
   failing on all five. --gold-light lifts it to 4.81-5.04.

   Measured from PIXELS, not from a modelled paint stack: the hero paints via
   a sibling .hero-bg, so no ancestor-walking resolver can see what is under
   this text, and check-gold-contrast.py REFUSES this element for exactly that
   reason. That refusal is correct and load-bearing - it is what stopped an
   earlier pass "fixing" five heroes of correct white-on-navy. The numbers
   above come from screenshotting the badge with color:transparent (so every
   interior pixel is real composited background) and cropping the border ring,
   whose gold rim otherwise wins "worst pixel" and manufactures a 2.7:1.
   Re-derive: scripts/measure-badge-pixels.py. A clean gate is not evidence
   here; a refusal is not a pass (#55). */
.hero-badge { display: inline-flex; align-items: center; background: rgba(200,148,30,0.15); border: 1px solid rgba(200,148,30,0.35); color: var(--gold-light); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 0.35rem 0.85rem; border-radius: 20px; margin-bottom: 1.2rem; }
section { padding: 4.5rem 1.5rem; }
.bg-gray { background: var(--gray-bg); }
.cta-strip { background: var(--gold); padding: 4rem 1.5rem; text-align: center; }
.cta-strip h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2.1rem); color: #fff; margin-bottom: 0.7rem; }
.cta-strip p { color: rgba(255,255,255,0.85); font-size: 0.97rem; margin-bottom: 1.8rem; }
.btn-white:hover { background: #f0f0f0; }
footer { background: var(--navy-dark); padding: 2.2rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; max-width: 1140px; margin: 0 auto; }
.footer-right { text-align: right; font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.9; }
.footer-right a { color: rgba(255,255,255,0.62); text-decoration: none; }
.footer-right a:hover { color: var(--gold); }
.footer-disclaimer { max-width: 1140px; margin: 1.4rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.72rem; line-height: 1.75; color: rgba(255,255,255,0.50); }
.footer-disclaimer strong { color: rgba(255,255,255,0.6); }
/* Nav sizing. The desktop nav needs ~953px of links plus a 280px logo, so
   the bar is wider than the 1140px content column and takes a real
   breakpoint rather than wrapping. A label spanning two line boxes leaves
   the gap between them unhoverable, so labels must stay on one line. */
    .nav-inner { max-width: 1320px; }
.nav-links { gap: 1.25rem; }
.nav-links a { white-space: nowrap; display: inline-block; padding: 0.5rem 0; }
.nav-links .btn-gold { padding: 0.55rem 1.25rem; }
/* The long CTA label plus the base nowrap overflowed a 375px viewport by
   18px. nowrap is right for short buttons and wrong for this one; scoped to
   .cta-strip so nav buttons keep it. The button is inline-block, so wrapping
   keeps a solid rectangular hit area. */
    @media (max-width: 560px) {
      .cta-strip .btn-gold { white-space: normal; max-width: 100%; }
    }
@media (max-width: 1299px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
    }
section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (max-width: 760px) { section { padding-top: 2.5rem; padding-bottom: 2.5rem; } }
/* The hero is a DIV.page-hero, not a section, so the section rhythm rule
   never reaches it and its inner padding is set here instead.

   This rule, NOT the 5.5rem on .page-hero-inner above, is what actually
   paints: it is unconditional and later in the cascade, so the base value
   never applies at any viewport. Editing the 5.5rem would have changed
   nothing. */
    .page-hero-inner { padding-top: 2rem; padding-bottom: 2rem; }
@media (max-width: 760px) {
      .page-hero-inner { padding-top: 1.75rem; padding-bottom: 1.75rem; }
    }
/* Gold CTA hover. No cursor tracking and no click ripple: both need script,
   and this site ships none. --mx/--my keep their 50% defaults so the glow
   sits centred and fades in. Applied to every .btn-gold rather than one
   lone button. */
    .btn-gold {
      position: relative; isolation: isolate; overflow: hidden;
      --mx: 50%; --my: 50%; --tx: 0px; --ty: 0px;
      /* No reserved arrow lane. A lane sized for a glyph whose resting opacity is
         0 pushed every gold button's text 18.4px off-centre at rest, on every
         page. A hover-only decoration does not get to bill the resting state.
         Restoring an arrow means solving the layout properly - it cannot reserve
         space while at rest - not re-adding padding-right. */
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 6px 18px rgba(200,148,30,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
      transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.32s ease, background 0.2s;
    }
.btn-gold::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(circle 120px at var(--mx) var(--my),
        rgba(255,241,205,0.55) 0%, rgba(255,214,130,0.25) 40%, transparent 75%);
      opacity: 0; transition: opacity 0.28s ease; mix-blend-mode: screen;
    }
.btn-gold:hover::before { opacity: 1; }
    .btn-gold:hover {
      transform: translate(var(--tx), calc(var(--ty) - 2px));
      box-shadow: 0 14px 30px rgba(200,148,30,0.45), 0 0 0 1px rgba(255,232,170,0.35),
                  inset 0 1px 0 rgba(255,255,255,0.28);
    }
.btn-gold:active { transform: translate(var(--tx), var(--ty)) scale(0.97); }
.btn-gold .pill-ripple {
      position: absolute; left: var(--rx, 50%); top: var(--ry, 50%);
      width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
      background: rgba(255,255,255,0.5); pointer-events: none; z-index: 2;
      transform: scale(0);
      animation: btn-gold-ripple 0.72s cubic-bezier(0.22,0.61,0.36,1) forwards;
    }
@keyframes btn-gold-ripple {
      0%   { transform: scale(0);  opacity: 0.6; }
      100% { transform: scale(24); opacity: 0; }
    }
@media (prefers-reduced-motion: reduce) {
      .btn-gold, .btn-gold::before, .btn-gold::after {
        transition: none !important; animation: none !important;
      }
      .btn-gold:hover { transform: none; }
    }
/* Ink on gold. --gold #c8941e is unchanged, so every gold FILL is
   byte-identical and the brand colour does not move; what changes is the INK
   on gold, plus a darker gold reserved for gold TEXT on light surfaces.
   The whole gold family is a FILL: a hover fill dark enough to take dark ink
   is darker still, so it is always worse as text, never better.

   --gold-light is the same idea pointed the other way: gold TEXT on a DARK
   surface, where --gold is too dark rather than too light. It already existed
   at index.html:27 and resources/style.css:10 and was simply absent from the
   five service pages, so a var() reference here would have resolved to unset
   and inherited. Declared once in this shared file rather than five times
   inline. Do NOT redefine --gold globally to fix a text case: the fills are
   the reason it is pinned. */
    :root { --gold-ink: #8a6410; --ink-on-gold: #111e33; --gold-light: #d4a535; }
.btn-gold, .btn-gold:hover { color: var(--ink-on-gold); }
.cta-strip h2 { color: var(--ink-on-gold); }
.cta-strip p { color: rgba(17,30,51,0.85); }
.stat-box .num { color: var(--gold-ink); }
/* A13: the site's first in-prose CITATION link, and the five service pages carry
   NO body-link rule at all - #41's in-prose links live in the resources/ regime,
   not here - so a bare <a> inside a service-page paragraph fell through to the
   browser default #0000EE. That passes contrast and looks nothing like this
   site; measured before this rule existed.

   Scoped to a class rather than a bare `a` on purpose: these pages already style
   nav, footer, service cards and buttons separately, and a broad `a` rule would
   fight all four (the .service-card specificity note directly below is the
   worked example of that going wrong).

   --gold-ink, never --gold: gold is a fill and a dark-surface ink, 2.72 on
   white. The UNDERLINE is kept deliberately - a link marked by colour alone is
   the same WCAG 1.4.1 defect #82 just removed from the nav. */
.src-link { color: var(--gold-ink); }
/* :not(.btn-gold) is load-bearing: a bare `.service-card a` (0,1,1) outranks
   `.btn-gold` (0,1,0) and repaints the card's own button gold-on-gold at
   1.97:1. */
    .service-card a:not(.btn-gold) { color: var(--gold-ink); }
/* Root nav CTA: `.nav-links .btn-gold` sets white !important (0,2,0) and
       `.nav-links a` sets white .78 (0,1,1); both outrank plain `.btn-gold`, so
       the nav button kept its 2.72. It carries a gold fill, so it needs the dark
       ink at a weight that actually wins the cascade. */
    .nav-links a.btn-gold,
    .nav-links a.btn-gold:hover { color: var(--ink-on-gold) !important; }
/* Hover fills and attribute-labelled controls carry no resting text node, so
   they are enumerated by hand:
     --gold-hover #a97910 under --ink-on-gold = 4.32, under AA. Raised to
       #b48014 = 4.80, still visibly darker than --gold #c8941e (6.13).
     .contact-item a:hover put brand gold on the #f0f2f5 panel = 2.43.
     .service-card a:hover used --gold-hover as INK on white = 3.87. */
    /* Hover state only. .cf-submit rests on --navy with white text (12.6:1);
       changing both states drops the resting control to 1.22. A state finding is
       fixed in that state, not in the one next to it. */
    .cf-submit:hover { color: var(--ink-on-gold); }
.contact-item a:hover { color: var(--gold-ink); }
.service-card a:hover:not(.btn-gold) { color: var(--gold-ink); }

/* Site-wide call bar. A floating pill, bottom-fixed, so it does not compete with
   the 80px sticky nav for vertical space the way a second top bar would.
   Colours are explicit hex, NOT var() tokens: this same block ships into three
   front-end regimes that declare different token sets, and an unresolved var()
   fails silently to no colour rather than erroring.
   The CTA is a gold FILL with dark ink (#111e33 on #c8941e = 6.13), which is the
   site's established button treatment - gold as TEXT would be 2.72 on a light
   surface and needs a contrast-gate exemption; a fill needs none.
   Deliberately NO availability indicator. The clinic is open 7.5 of 168 hours,
   so a live "available now" dot would be false about 95% of the time. The bar
   states no urgency and no availability, only how to reach a human. */
.call-bar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 0.85rem;
  background: #111e33; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px; padding: 0.6rem 0.7rem 0.6rem 1.1rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28); max-width: calc(100vw - 28px); }
/* The status dot. Green because the practice IS accepting new patients - its
   own booking calendar publishes four live New Patient options - and that is a
   standing fact, not a claim about this instant. The label deliberately says
   "Accepting new patients" and NOT "...today" or "...now": the clinic is open
   7.5 of 168 hours, so a time-bound version would be false most of the week
   while the dot kept implying someone is there. */
.call-bar-dot { width: 9px; height: 9px; border-radius: 50%; background: #34a853;
  box-shadow: 0 0 0 3px rgba(52,168,83,0.25); flex-shrink: 0;
  animation: call-bar-pulse 2.4s ease-in-out infinite; }
@keyframes call-bar-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52,168,83,0.28); }
  50%      { box-shadow: 0 0 0 7px rgba(52,168,83,0.05); }
}
/* An indefinite animation is exactly what this query exists for. The dot keeps
   its colour and its ring - it simply stops pulsing - so nothing is lost for a
   reader who asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .call-bar-dot { animation: none; }
}
.call-bar-label { font-family: 'Montserrat', sans-serif; font-size: 0.82rem;
  font-weight: 500; color: rgba(255,255,255,0.85); white-space: nowrap; }
.call-bar-cta { font-family: 'Montserrat', sans-serif; font-size: 0.82rem;
  font-weight: 700; background: #c8941e; color: #111e33; text-decoration: none;
  padding: 0.5rem 1.05rem; border-radius: 100px; white-space: nowrap; }
.call-bar-cta:hover { background: #b48014; color: #111e33; }
.call-bar-dismiss { background: none; border: none; cursor: pointer; line-height: 1;
  font-size: 1.25rem; padding: 0 0.35rem; color: rgba(255,255,255,0.62); }
.call-bar-dismiss:hover { color: #ffffff; }
.call-bar-cta:focus-visible, .call-bar-dismiss:focus-visible {
  outline: 2px solid #c8941e; outline-offset: 2px; }
@media (max-width: 560px) {
  .call-bar { left: 12px; right: 12px; transform: none; max-width: none;
    border-radius: 18px; flex-wrap: wrap; gap: 0.55rem; padding: 0.75rem 0.85rem; }
  .call-bar-label { white-space: normal; font-size: 0.78rem; }
}