/* Our own touches on top of Webflow's CSS (public/wf/ is re-imported verbatim, so they live here).
   Linked after Webflow's stylesheet in Page.astro, so equal-specificity rules win. */
/* ── Finish (Barry, 14 Nov 2026, staging first) ─────────────────────────────────────────────
   Small touches across the site. Nothing moves and no layout changes. Each one switches itself
   off where it isn't supported, and the motion is off for reduced-motion users. Same pass as
   sustainhealthacademy.com. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }                       /* soft fade page to page */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
  @supports (interpolate-size: allow-keywords) {               /* fold-outs slide, not snap */
    details:not(nav details) { interpolate-size: allow-keywords; }
    details:not(nav details)::details-content { block-size: 0; overflow-y: clip; transition: block-size 260ms cubic-bezier(.2,.7,.2,1), content-visibility 260ms allow-discrete; }
    details[open]:not(nav details)::details-content { block-size: auto; }
  }
}
h1, h2, h3 { text-wrap: balance; }                             /* even headline lines */
p, li, blockquote { text-wrap: pretty; }                       /* no one-word last line */
a { text-underline-offset: 0.18em; }
html { accent-color: #05544a; -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(214, 232, 176, 0.75); color: inherit; }
:where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid #05544a; outline-offset: 3px; }
:where(a, button, summary, label, [role="button"]) { touch-action: manipulation; }
/* Webflow's own focus colours (Barry, 14 Nov: "it ends up blue when you tab"). Its stylesheet
   paints a focused text box or select #3898ec, and removes the outline entirely from menu
   dropdowns, the mobile menu button and tabs, which leaves keyboard users with no marker at all.
   Both are put back in the brand green. */
.w-input:focus, .w-select:focus { border-color: #05544a; }
.w-dropdown-toggle:focus-visible, .w-dropdown-link:focus-visible, .w-nav-button:focus-visible, .w-tab-link:focus-visible { outline: 2px solid #05544a; outline-offset: 3px; }

/* The search box's Search button: Webflow sets it dark green only inside some breakpoints, so at the
   rest it fell back to Webflow's default .w-button blue #3898ec (Barry, 14 Nov: "ends up blue"). */
.search-button.w-button { background-color: var(--base-color-brand--dark-green, #05544a); }
/* Webflow's starter snippet, embedded in each page AFTER this file, paints keyboard focus blue:
   [tabindex]:focus-visible { outline: #4d65ff solid .125rem } (Barry, 14 Nov: blue box round
   "Practice"). The `html` prefix outranks it. On the dark-green menu bar and footer a green ring
   would vanish, so there it takes the text colour (light green). */
html :is(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid #05544a; outline-offset: 3px; }
html :is(nav, .w-nav, footer, [class*="footer"]) :is(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color: currentColor; }