/* site-polish.css — accessibility + interaction polish, site-wide.
 *
 * Loaded LAST, after site-nav.css and mobile-nav.css, so it wins on ties.
 * Deliberately contains no nav layout rules: mobile-nav.css still owns the
 * responsive navigation. Everything here is additive.
 *
 * Covers: keyboard focus, tap-target sizes, rating contrast, pressed states,
 * reduced motion, touch-device hover, and number alignment.
 */

/* ══════════════════════════════════════════════
   1. KEYBOARD FOCUS
   7 places removed the outline with no replacement, so keyboard users had
   no idea where they were. :focus-visible keeps the ring off mouse clicks.
   ══════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #336600;
  outline-offset:2px;
  border-radius:2px;
}
/* On dark grounds the green ring disappears — use white there. */
footer a:focus-visible,
.newsletter a:focus-visible,
.newsletter button:focus-visible,
.newsletter input:focus-visible,
.cta a:focus-visible,
.cta-section a:focus-visible,
.hero a:focus-visible,
.ann-band a:focus-visible{
  outline-color:#fff;
}
/* Never leave a control with no focus indicator at all. */
*:focus-visible{outline-style:solid;}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ══════════════════════════════════════════════
   2. TAP TARGETS — 44px minimum on touch screens
   869 links/buttons measured under 44px tall on a phone.
   Applied only on coarse pointers so the desktop layout is untouched.
   ══════════════════════════════════════════════ */
@media (pointer:coarse){
  /* Standalone links — navigation, footers, cards, list items.
     Inline links inside a sentence are deliberately excluded: WCAG 2.5.8
     exempts them, and padding them out would wreck paragraph rhythm. */
  .footer-col ul a,
  .footer-bottom a,
  footer .info a,
  .nav-submenu a,
  .breadcrumb a,
  .info-card a,
  .info-block a,
  .contact-detail a,
  li > a:only-child,
  .post-link,.btn-read,.role-link,.res-link,
  .article-cat,.post-cat{
    display:inline-flex;align-items:center;
    min-height:44px;
  }
  .footer-col ul{gap:2px;}
  /* Social icons keep their circle but grow the hit area. */
  .footer-social a{min-width:44px;min-height:44px;}
}

/* Remove the 300ms double-tap delay on everything interactive. */
a,button,input,select,textarea,summary,[role="button"]{
  touch-action:manipulation;
}

/* ══════════════════════════════════════════════
   3. RATING CONTRAST
   The lime #A0D379 on white measured 1.65:1 against a 4.5:1 minimum —
   the stars were effectively invisible. Amber reads as a rating and passes.
   ══════════════════════════════════════════════ */
.stars,.testi-stars{color:#8F5400;}
/* On dark grounds an amber that stays legible against green. */
.hero .stars,.hero .testi-stars,
.cta .stars,.cta .testi-stars,
.cta-section .stars,.cta-section .testi-stars,
.testimonial-band .stars,.testimonial-band .testi-stars,
.ann-band .stars,.ann-band .testi-stars,
footer .stars,footer .testi-stars{color:#FFD97A;}

/* Footer fine print sat at 70% white = 3.96:1 against the green. */
.footer-bottom > div,
.footer-bottom a{color:rgba(255,255,255,.92)!important;}

/* Lime eyebrow labels sat at 3.97:1 against the mid-green gradient.
   A lighter tint of the same hue clears 4.5:1 without leaving the palette. */
.map-section .tag,.map-text .tag,
.newsletter .tag,.newsletter .section-tag,
.cta .tag,.cta .section-tag,
.cta-section .tag,.cta-section .section-tag,
.ann-band .tag,.ann-band .section-tag,
.testimonial-band .tag,.testimonial-band .section-tag,
footer .tag,footer .section-tag{color:#C5E8A0;}

/* ══════════════════════════════════════════════
   4. PRESSED STATES
   Nothing on the site responded to being pressed. Subtle scale on :active
   is the single highest-value polish detail — it makes the UI feel heard.
   ══════════════════════════════════════════════ */
.btn-green,.btn-outline,.btn-lime,.btn-light,.btn-ghost,.btn,.btn-read,
.nav-cta-btn,.nav-portal,.form-submit,.cf-submit,.hero-cta,
.cta-btn-secondary,.ann-band-cta,.featured-cta,.post-link,.role-link,
button,input[type="submit"]{
  /* !important is required: several pages declare
     `transition:background .25s!important` inline, which would otherwise
     drop the transform and kill the press feedback. */
  transition:transform 160ms cubic-bezier(.23,1,.32,1),
             background-color 250ms ease,
             color 250ms ease,
             border-color 250ms ease!important;
}
.btn-green:active,.btn-outline:active,.btn-lime:active,.btn-light:active,
.btn-ghost:active,.btn:active,.btn-read:active,.nav-cta-btn:active,
.nav-portal:active,.form-submit:active,.cf-submit:active,.hero-cta:active,
.cta-btn-secondary:active,.ann-band-cta:active,.featured-cta:active,
.post-link:active,.role-link:active,
button:active,input[type="submit"]:active{
  transform:scale(.97)!important;
}

/* ══════════════════════════════════════════════
   4b. CARDS — stop the hover shake, make the whole card clickable

   The shake: these cards lift on hover with translateY(-4px). Lifting
   vacates the 4px strip the cursor was sitting in, so :hover drops, the
   card falls back under the cursor, :hover fires again — a flicker loop
   at the bottom edge. The ::after below extends the hover area downward
   by more than the lift, so the pointer is never orphaned.

   The dead click: .post-card is an <article> and .res-card a <div>, so
   only the small "Read Article" text was clickable even though the card
   animates like a button. Stretching that link over the whole card fixes
   it without adding a second link for screen readers to announce.
   ══════════════════════════════════════════════ */
.post-card,.res-card,.value-card,.why-card,
.pillar,.route,.tool-card,.ind-tile,.subind-tile{
  position:relative;
}
.post-card::after,.res-card::after,.value-card::after,.why-card::after,
.pillar::after,.route::after,.tool-card::after,.ind-tile::after,
.subind-tile::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-8px;
  height:8px;
  z-index:0;
}

/* Blog cards are now real <a> elements (markup change in blog.html), so the
   whole card is clickable and supports Cmd-click, middle-click and keyboard.
   A CSS "stretched link" was tried first and proved unreliable here: the
   card's own hover transform creates a stacking context that reorders hit
   testing, and its overflow:hidden clips the overlay. */
a.post-card{
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
}
a.post-card:focus-visible{outline:3px solid #336600;outline-offset:3px;}
/* "Read Article" is a span inside the card link now — keep it looking the same
   but stop it stealing the pointer, so the whole card reads as one target. */
a.post-card .btn-read{pointer-events:none;}

/* .res-card keeps the stretched link: both of its inner anchors point at the
   same article, and it has no clipping or transform working against it. */
.res-card .res-link::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:-8px;
  z-index:1;
}
.res-card .res-link:focus-visible{outline-offset:3px;}

/* Removing the lift kills the flicker outright: nothing moves, so the pointer
   can never be orphaned. Elevation and border still signal interactivity. */
.post-card:hover,.res-card:hover{
  transform:none!important;
  box-shadow:0 14px 34px rgba(51,102,0,.16)!important;
  border-color:#A0D379!important;
}

/* ══════════════════════════════════════════════
   5. TOUCH DEVICES — don't leave cards stuck in a hover state
   A tap on a phone fires :hover and it sticks until you tap elsewhere.
   ══════════════════════════════════════════════ */
@media (hover:none){
  .post-card:hover,.tool-card:hover,.res-card:hover,.why-card:hover,
  .value-card:hover,.pillar:hover,.ind-tile:hover,.subind-tile:hover,
  .route:hover,.btn-read:hover{
    transform:none;
    box-shadow:none;
  }
}

/* ══════════════════════════════════════════════
   6. REDUCED MOTION
   Only 14 of 46 pages honoured the OS setting. This covers all of them.
   Motion is removed; opacity and colour changes stay so nothing vanishes.
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  /* Reveal-on-scroll content must never be left invisible. */
  .reveal,.fade-in,.js-anim .reveal,.js-anim .fade-in,
  .word-reveal .w,.intro-text > *,.intro-mark .word,
  .ann-band-text > *,.ann-band-photo,
  .js-anim .hero-eyebrow,.js-anim .hero-sub-head,.js-anim .hero-body,
  .js-anim .hero-actions,.js-anim .hero-proof,.js-anim .hero-rule{
    opacity:1!important;
    transform:none!important;
  }
  .curtain,.member-curtain{transform:translateY(-101%)!important;}
}

/* ══════════════════════════════════════════════
   7. NUMBERS & HEADINGS
   ══════════════════════════════════════════════ */
/* Calculator output must not jitter as digits change width. */
.result,.result *,.cci-val,.bstat-n,.wip-out,.calc-out,
output,table td,table th{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* Stop single-word orphans on the last line of a heading. */
h1,h2,h3{text-wrap:balance;}
p,li{text-wrap:pretty;}

/* ══════════════════════════════════════════════
   8. OVERFLOW GUARD
   team.html needed 392px inside a 390px screen.
   ══════════════════════════════════════════════ */
html,body{overflow-x:hidden;max-width:100%;}
img,svg,video,table,pre{max-width:100%;}