/* ============================================================
   Ignition by MDW — core.css

   CORE-OWNED. This file belongs to the kit and is propagated like any
   other core file. Do not add campaign design to it.

   WHY IT EXISTS
   -------------
   The kit ships components whose MARKUP is core — global/a11y-menu.php,
   global/lengua-fab.php, global/mobile-menu.php — but until now their
   styling lived in styles.css, which is site-owned because it is also
   where each campaign's brand and design live. So the markup propagated
   perfectly and the styling could not: the a11y menu is byte-identical
   on all 15 sites while its CSS has drifted to four different versions
   (208 rules in the kit, 210 on Pia, 212 on Jared, 228 on Safe and
   Ready). A component the kit owns had no file the kit could ship a fix
   in.

   This is that file. Loaded BEFORE styles.css, so a site can still
   override anything here from its own sheet without editing this one.

   SCOPE: shared navigation, accessibility modes and panel, language picker,
   repeating grids, Media gallery, page transitions, pending form controls,
   and agency credit. Campaign layout and theme tokens stay in styles.css.

   THEMING
   -------
   Everything here reads --mm-* custom properties that fall back to the
   kit's existing --color-* tokens. A site themes the menu by setting
   the --mm-* values in its own styles.css :root, never by editing this
   file. Defined on :root here so a site that sets nothing still gets a
   coherent menu.

   NOTE FOR CONTRAST CHECKS: tools/contrast.php reads :root blocks. The
   fallbacks below are real values, so the menu is checkable even on a
   site that has not themed it.
   ============================================================ */

:root {
  --mm-bg:            var(--color-dark, #12151f);
  --mm-fg:            #ffffff;
  --mm-accent:        var(--color-accent, var(--color-primary, #4fd1c5));
  --mm-surface:       rgba(255, 255, 255, .10);
  --mm-surface-hover: rgba(255, 255, 255, .18);
  --mm-rule:          rgba(255, 255, 255, .50);
  --mm-muted:         rgba(255, 255, 255, .65);
}

/* ---------- The overlay ---------- */

/* Native modal top layer avoids transformed/sticky header containment. The
   controller follows the actual header toggle, not a second breakpoint. */
dialog.mdw-menu {
  position: fixed; inset: 0; box-sizing: border-box; margin: 0;
  width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
  border: 0; padding: max(4.5rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom));
  background: var(--mm-bg); color: var(--mm-fg); overflow-y: auto;
  text-align: center; overscroll-behavior: contain; opacity: 0;
  transition: opacity .2s ease;
}
dialog.mdw-menu[open] { display: flex; flex-direction: column; align-items: center; }
dialog.mdw-menu.is-open { opacity: 1; }
dialog.mdw-menu:not([open]), dialog.mdw-menu[hidden] { display: none !important; }
dialog.mdw-menu::backdrop { background: var(--mm-bg); }
dialog.mdw-menu .mobile-menu__content { margin-block: auto; flex-shrink: 0; }
.mobile-menu__extra { margin-top: 1.75rem; }
.mdw-menu-fallback { position: relative; z-index: 10001; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 1rem; background: var(--mm-bg); }
.mdw-menu-fallback a { color: var(--mm-fg); }
html.a11y-reduce-motion dialog.mdw-menu { transition: none; }

/* Honour a reduced-motion preference: the fade is decorative, the state
   change is not. */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
}

/* ---------- Close control ---------- */
/* 44px: the minimum comfortable touch target, and the size the
   accessibility review holds every control to. */
.mobile-menu__close {
  position: absolute;
  top: clamp(1rem, 4vw, 1.5rem);
  right: clamp(1rem, 4vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--mm-fg);
  cursor: pointer;
}
.mobile-menu__close:hover { background: var(--mm-surface); }
.mobile-menu__close svg { width: 24px; height: 24px; display: block; }

/* ---------- Content column ---------- */
.mobile-menu__content { width: 100%; max-width: 440px; }

/* ---------- Nav ---------- */
.mobile-menu__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-menu__nav a {
  display: block;
  padding: .22rem 0;
  font-family: var(--mm-font, var(--font-heading, sans-serif));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  color: var(--mm-fg);
  text-decoration: none;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a[aria-current="page"] { color: var(--mm-accent); }

/* ---------- Social ---------- */
.mobile-menu__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.5rem;
}
.mobile-menu__social a {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mm-surface);
  color: var(--mm-fg);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.mobile-menu__social a:hover { background: var(--mm-accent); color: var(--mm-fg); }
.mobile-menu__social svg { width: 22px; height: 22px; }

/* ---------- Call to action ---------- */
.mobile-menu__cta {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 2.25rem;
}
.mobile-menu__cta .btn { flex: 1 1 0; min-width: 0; }

/* ---------- Language ---------- */
/* Rendered only when lengua is enabled AND the FAB is not already the
   chosen placement, so a visitor never gets two switchers at once. */
.mobile-menu__lang {
  display: inline-flex;
  gap: .5rem;
  margin-top: 1.75rem;
}
.mobile-menu__lang a {
  padding: .45rem 1.1rem;
  font-family: var(--mm-font, var(--font-heading, sans-serif));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .95rem;
  color: var(--mm-fg);
  text-decoration: none;
  border: 2px solid var(--mm-rule);
  border-radius: 8px;
}
.mobile-menu__lang a:hover {
  color: var(--mm-bg);
  background: var(--mm-fg);
  border-color: var(--mm-fg);
}

/* ---------- Voter resources ---------- */
/* Deliberately the quietest row in the menu: useful, but never the
   thing competing with the CTA for a thumb. */
.mobile-menu__voter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .9rem;
  margin-top: 1.5rem;
}
.mobile-menu__voter a {
  font-size: .8rem;
  font-weight: 600;
  color: var(--mm-muted);
  text-decoration: none;
}
.mobile-menu__voter a:hover { color: var(--mm-accent); }

[data-mdw-desktop-nav][hidden] { display: none !important; }

[data-mdw-dialog][hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { [data-mdw-dialog], [data-mdw-dialog] > * { transition: none !important; } }
html.a11y-reduce-motion [data-mdw-dialog], html.a11y-reduce-motion [data-mdw-dialog] > * { transition: none !important; }

html:not(.js) [data-carousel-track] { display: grid; transform: none; gap: 2rem; }
html:not(.js) [data-carousel-track] > * { width: 100%; }
html:not(.js) [data-carousel-prev], html:not(.js) [data-carousel-next], html:not(.js) [data-carousel-dot],
html:not(.js) [data-mdw-share], html:not(.js) [data-mdw-copy] { display: none; }

/* Shared public components. Site styles supply theme values and layout. */
:root { --mdw-media-padding: clamp(2.5rem, 6vw, 4.5rem); }


.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-dark); color: #fff; padding: .65rem 1rem;
}

.skip-link:focus { left: 0; }


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


/* Progressive enhancement hook (header sets .js on <html>). */
.js [data-js-hidden] { display: none; }


/* ---- ACCESSIBILITY: "Display preferences" modes + menu UI ---- */

/* High contrast: dark scheme, forced with !important to beat campaign CSS */
html.a11y-contrast {
  --color-bg: #000000; --color-text: #ffffff; --color-muted: #ffffff;
  --color-border: #ffffff; --color-light: #000000;
  --color-secondary: #000000; --color-dark: #000000;
  --color-primary: #ffff00; --color-primary-accessible: #ffff00; --color-accent: #ffff00;
}

html.a11y-contrast body { background: #000 !important; color: #fff !important; }

/* surfaces -> black (incl. blockquote/figure/list/table/a so cards & whole-card links aren't left light) */
html.a11y-contrast header, html.a11y-contrast main, html.a11y-contrast footer,
html.a11y-contrast section, html.a11y-contrast article, html.a11y-contrast aside,
html.a11y-contrast nav, html.a11y-contrast form, html.a11y-contrast a,
html.a11y-contrast blockquote, html.a11y-contrast figure, html.a11y-contrast ul,
html.a11y-contrast ol, html.a11y-contrast li, html.a11y-contrast dl,
html.a11y-contrast dd, html.a11y-contrast table,
html.a11y-contrast div:not([data-a11y-menu]):not(.a11y__panel) {
  background-color: #000 !important; background-image: none !important;
}

/* text -> white */
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast h4, html.a11y-contrast h5, html.a11y-contrast h6,
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span,
html.a11y-contrast label, html.a11y-contrast blockquote, html.a11y-contrast figcaption,
html.a11y-contrast td, html.a11y-contrast th, html.a11y-contrast dt, html.a11y-contrast dd,
html.a11y-contrast strong, html.a11y-contrast em, html.a11y-contrast small {
  color: #fff !important;
}

/* links: bright yellow + always underlined */
html.a11y-contrast a, html.a11y-contrast a * { color: #ffff00 !important; text-decoration: underline !important; }

/* buttons: bright yellow with black text (leave the a11y widget controls alone) */
html.a11y-contrast .btn,
html.a11y-contrast button:not(.a11y__toggle):not(.a11y__reset) {
  background: #ffff00 !important; color: #000 !important; border: 2px solid #ffff00 !important;
}

html.a11y-contrast .btn *,
html.a11y-contrast button:not(.a11y__toggle):not(.a11y__reset) * { color: #000 !important; }

html.a11y-contrast :focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 2px; }

/* keep media visible (don't blacken images/video) */
html.a11y-contrast img, html.a11y-contrast picture, html.a11y-contrast video { background: transparent !important; }

/* Menu keeps its normal look under high contrast (higher specificity wins) */
html.a11y-contrast .a11y__toggle { background: var(--a11y-accent) !important; border-color: #fff !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__panel { background: #f3f5f7 !important; color: #1b232b !important; border-color: #c9ced3 !important; }

/* Accent header / footer + circular badge + close */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__panel-head,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__footer { background: var(--a11y-accent) !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__panel-title { color: #fff !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__kbd { background: rgba(255,255,255,.22) !important; color: #fff !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__close { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.55) !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__close svg { color: #fff !important; }

/* Status strip */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__status { background: #eef1f4 !important; border-bottom-color: #d7dde3 !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__status--on .a11y__status-ico { color: #15803d !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__status-count { color: #1b232b !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__status-ico,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__resetall { background: transparent !important; color: var(--a11y-accent) !important; }

/* Sections + rows */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__section-title,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__section-icon,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__row-icon { color: var(--a11y-accent) !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__row-label { color: #1b232b !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__dys-chip { color: var(--a11y-accent) !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__section { border-color: #c9ced3 !important; }

/* Toggle switch */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__sw { background: #c9ced3 !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__sw-input:checked ~ .a11y__sw { background: var(--a11y-accent) !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__sw-knob { background: #fff !important; }

/* Segmented option buttons (off = white; active = accent) */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2-opt { background: #fff !important; color: #1b232b !important; border-color: #d3d9df !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="dark"] [data-a11y-cycle-opt="dark"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="invert"] [data-a11y-cycle-opt="invert"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="low"] [data-a11y-saturate-opt="low"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="high"] [data-a11y-saturate-opt="high"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="grey"] [data-a11y-saturate-opt="grey"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="big"] [data-a11y-cursor-opt="big"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="mask"] [data-a11y-cursor-opt="mask"],
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg2[data-state="guide"] [data-a11y-cursor-opt="guide"] { background: var(--a11y-accent) !important; color: #fff !important; border-color: var(--a11y-accent) !important; }

/* Position segmented + hide-for */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg { background: #fff !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg-opt { color: #1b232b !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__seg-opt:has(input:checked) { background: var(--a11y-accent) !important; color: #fff !important; }

/* Footer bug + Help (accent bar; keep white text, no yellow-link bleed) */
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug { background: transparent !important; color: #fff !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug-by { color: #fff !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug-tag { color: rgba(255,255,255,.9) !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug-logo,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug-logo * { color: #fff !important; fill: #fff !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__bug * { text-decoration: none !important; }

/* Neutralize generic high-contrast bleed inside the menu */
html.a11y-contrast .a11y[data-a11y-menu] ul,
html.a11y-contrast .a11y[data-a11y-menu] li,
html.a11y-contrast .a11y[data-a11y-menu] section,
html.a11y-contrast .a11y[data-a11y-menu] div { background-color: transparent !important; }

html.a11y-contrast .a11y[data-a11y-menu] p,
html.a11y-contrast .a11y[data-a11y-menu] span,
html.a11y-contrast .a11y[data-a11y-menu] label,
html.a11y-contrast .a11y[data-a11y-menu] h3 { color: #1b232b !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__section-title,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__section-icon,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__row-icon { color: var(--a11y-accent) !important; }

html.a11y-contrast .a11y[data-a11y-menu] .a11y__panel-title,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__kbd,
html.a11y-contrast .a11y[data-a11y-menu] .a11y__footer .a11y__bug-by { color: #fff !important; }


/* Larger text (rem-based layout scales with it) */
html.a11y-text-lg { --fs-base: 20px; }


/* OpenDyslexic; @font-face only downloads when dyslexia mode applies. To self-host, download woff2 to resources/fonts/ and repoint src. */
@font-face { font-family:'OpenDyslexic'; font-style:normal; font-weight:400; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2) format('woff2'),
      url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff) format('woff'); }

@font-face { font-family:'OpenDyslexic'; font-style:normal; font-weight:700; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-normal.woff2) format('woff2'),
      url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-normal.woff) format('woff'); }

@font-face { font-family:'OpenDyslexic'; font-style:italic; font-weight:400; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-italic.woff2) format('woff2'),
      url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-italic.woff) format('woff'); }

@font-face { font-family:'OpenDyslexic'; font-style:italic; font-weight:700; font-display:swap;
  src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-italic.woff2) format('woff2'),
      url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-700-italic.woff) format('woff'); }


/* Dyslexia-friendly font + extra spacing */
html.a11y-dyslexia {
  --font-body: "OpenDyslexic", system-ui, sans-serif;
  --font-heading: "OpenDyslexic", system-ui, sans-serif;
  --lh-base: 1.8;
}

html.a11y-dyslexia body { letter-spacing: .02em; word-spacing: .08em; }


/* Reduce motion (overrides regardless of OS setting) */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}


/* Hide images but keep info: a11y.js adds alt text in .a11y-alt. Decorative bg opts in via [data-decorative-bg]. */
html.a11y-hide-images img,
html.a11y-hide-images picture,
html.a11y-hide-images video,
html.a11y-hide-images svg:not(.a11y__icon) { display: none !important; }

html.a11y-hide-images [data-decorative-bg] { background-image: none !important; }

.a11y-alt {
  display: none;
  font-style: italic;
  color: var(--color-muted);
  border: 1px dashed var(--color-border);
  padding: .4rem .6rem;
}

html.a11y-hide-images .a11y-alt { display: inline-block; }


/* Underline links: thick, offset, currentColor so it stays contrasty */
html.a11y-underline-links a {
  text-decoration: underline !important;
  text-decoration-thickness: 3px !important;
  text-decoration-color: currentColor !important;
  text-underline-offset: 3px !important;
}


/* Text spacing (headings included) */
html.a11y-spacing h1, html.a11y-spacing h2, html.a11y-spacing h3,
html.a11y-spacing h4, html.a11y-spacing h5, html.a11y-spacing h6,
html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing a,
html.a11y-spacing span, html.a11y-spacing blockquote, html.a11y-spacing label {
  letter-spacing: .12em !important; word-spacing: .16em !important;
}

/* Line height (headings included; overrides their fixed 1.2) */
html.a11y-line-height { --lh-base: 2; }

html.a11y-line-height p, html.a11y-line-height li, html.a11y-line-height blockquote,
html.a11y-line-height h1, html.a11y-line-height h2, html.a11y-line-height h3,
html.a11y-line-height h4, html.a11y-line-height h5, html.a11y-line-height h6 {
  line-height: 2 !important;
}


/* Invert colors. filter on <html> makes position:fixed resolve against page not viewport (known filter side effect; acceptable for opt-in). */
html.a11y-invert body > :not(.a11y) { filter: invert(1) hue-rotate(180deg); }

/* body bg isn't inverted (menu lives in body), so give it a dark backdrop for readability */
html.a11y-invert body { background: #11151a; }

/* Re-invert real media so photos/logos render normally. Filter the <img>, not <picture> (double-filter = net negative). [data-no-invert] to opt out. */
html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert iframe,
html.a11y-invert [data-no-invert] { filter: invert(1) hue-rotate(180deg) !important; }


/* ---- Menu UI (fixed px so Larger Text can't scale it; isolated from all modes) ---- */
.a11y { position: fixed; bottom: 16px; z-index: 1000; font-size: 16px; pointer-events: none; }

.a11y--bottom-right { right: 16px; }

.a11y--bottom-left  { left: 16px; }

/* wrapper is click-through so footer links underneath aren't blocked */
.a11y__toggle, .a11y__panel { pointer-events: auto; }

.a11y__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0; border-radius: 50%;
  background: var(--a11y-accent); color: #fff; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.a11y__toggle:hover { background: color-mix(in srgb, var(--a11y-accent) 88%, #000); }

.a11y__btn-icon { width: 26px; height: 26px; }


/* Panel: fixed-height flex column */
.a11y__panel {
  position: fixed; top: 8px; right: 8px; bottom: 8px;
  width: min(376px, calc(100vw - 16px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #f3f5f7; color: #1b232b;
  border-radius: 14px; padding: 0;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  transform-origin: bottom right;
  transition: transform .22s cubic-bezier(.34,1.18,.64,1), opacity .18s ease;
}

.a11y--bottom-left .a11y__panel { left: 8px; right: auto; transform-origin: bottom left; }

.a11y__panel[hidden] { display: none; }

/* Closed state for grow/shrink anim */
.a11y__panel:not(.a11y__panel--open) { opacity: 0; transform: scale(.55); }


/* Header: accent bar with circular badge, title + shortcut, round close */
.a11y__panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--a11y-accent); color: #fff; }

.a11y__head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.a11y__panel-title { margin: 0; font-weight: 800; font-size: 22px; line-height: 1.1; color: #fff; font-family: var(--a11y-title-font, inherit); }

.a11y__kbd { align-self: flex-start; font-size: 12px; font-weight: 600; line-height: 1; color: #fff; background: rgba(255,255,255,.22); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }

/* touch-primary: no keyboard, hide shortcut hint */
@media (pointer: coarse) { .a11y[data-a11y-menu] .a11y__kbd { display: none; }
}

.a11y__close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); cursor: pointer; line-height: 1;
}

.a11y__close:hover { background: rgba(255,255,255,.16); }

.a11y__close svg { width: 16px; height: 16px; }

/* Focus ring: the menu accent by default; white inside the accent header/footer bars */
.a11y[data-a11y-menu] :focus-visible { outline: 3px solid var(--a11y-accent) !important; outline-offset: 2px !important; }

.a11y[data-a11y-menu] .a11y__panel-head :focus-visible,
.a11y[data-a11y-menu] .a11y__footer :focus-visible { outline-color: #fff !important; }


/* Status strip: adjustments counter + Reset all (accent-tinted via .--on in JS) */
.a11y__status { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 18px; background: #fff; border-bottom: 1px solid #e7ebef; transition: background .15s ease, border-color .15s ease; }

.a11y__status--on { background: color-mix(in srgb, var(--a11y-accent) 8%, #fff); border-bottom-color: color-mix(in srgb, var(--a11y-accent) 14%, #e7ebef); }

.a11y__status-count { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #1b232b; }

.a11y__status-ico { display: inline-flex; color: #9aa2ab; transition: color .15s ease; }

.a11y__status--on .a11y__status-ico { color: #15803d; }
 /* active = success green, intentionally theme-independent */
.a11y__status-ico svg { width: 20px; height: 20px; }

.a11y__resetall { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; font-size: 14px; color: var(--a11y-accent); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.a11y__resetall svg { width: 18px; height: 18px; }

.a11y__resetall:hover { color: color-mix(in srgb, var(--a11y-accent) 80%, #000); }


/* Scrolling body: positioning context for overscroll shadow + scroll indicator */
.a11y__body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }

.a11y__body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background: linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0));
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}

.a11y__body.is-over-bottom::after { opacity: 1; }

.a11y__sections { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; padding: 12px 16px 16px; scrollbar-width: none; }

.a11y__sections::-webkit-scrollbar { width: 0; height: 0; }

/* Custom scroll indicator (visual only) */
.a11y__sb {
  position: absolute; top: 6px; bottom: 6px; right: 5px; width: 6px; display: block;
  border-radius: 999px; background: rgba(0,0,0,.06);
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}

.a11y__body.is-scrollable .a11y__sb { opacity: 1; }

.a11y__sb-thumb {
  position: absolute; left: 0; right: 0; top: 0; display: block; width: 100%;
  min-height: 24px; border-radius: 999px; background: var(--a11y-accent);
}


/* Sections (Vision / Text & Reading / Navigation & Motion) */
.a11y__section { margin: 0 0 16px; padding: 14px 14px 6px; background: #fff; border: 1px solid #e4e9ee; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }

.a11y__section:last-child { margin-bottom: 4px; }

.a11y__section-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }

.a11y__section-icon { display: inline-flex; color: var(--a11y-accent); }

.a11y__section-icon svg { width: 22px; height: 22px; }

.a11y__section-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--a11y-accent); }
/* 1.0.44: the labels are <p> now, not <h3> (so they stop leading every page's
   heading outline). As <h3> they picked up each site's heading font from its
   own "h1, h2, h3, h4 { font-family: var(--font-heading) }" rule; keep that
   look. --display covers the Klein/Pia family of stylesheets. */
.a11y__section-title { font-family: var(--font-heading, var(--display, inherit)); line-height: 1.2; }


/* Rows */
.a11y__row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-radius: 10px; }

.a11y__row + .a11y__row { border-top: 1px solid #eef1f4; }

.a11y__row--toggle { cursor: pointer; user-select: none; -webkit-user-select: none; }

.a11y__row--toggle:hover { background: color-mix(in srgb, var(--a11y-accent) 5%, #fff); }

.a11y__row--seg { display: block; padding: 12px 4px; }

.a11y__row-head { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }

.a11y__row-icon { flex: 0 0 auto; display: inline-flex; color: var(--a11y-accent); }

.a11y__row-icon svg { width: 24px; height: 24px; }

.a11y__row-label { flex: 1 1 auto; font-size: 15px; font-weight: 600; line-height: 1.25; color: #1b232b; }

/* OpenDyslexic "Aa" preview chip (label stays in UI font) */
.a11y__dys-chip { display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--a11y-accent) 12%, #fff); color: var(--a11y-accent); font-family: "OpenDyslexic", system-ui, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.4; }


/* On/off toggle switch (input is visually hidden; the track/knob follow it) */
.a11y__sw-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.a11y__sw { flex: 0 0 auto; position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c9ced3; transition: background .15s ease; }

.a11y__sw-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease; }

.a11y__sw-input:checked ~ .a11y__sw { background: var(--a11y-accent); }

.a11y__sw-input:checked ~ .a11y__sw .a11y__sw-knob { transform: translateX(20px); }

.a11y__sw-input:focus-visible ~ .a11y__sw { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }


/* Segmented multi-option controls (contrast / saturation / cursor); re-click active = off */
.a11y__seg2 { display: flex; gap: 0; }

.a11y__seg2-opt { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.15; color: #1b232b; background: #fff; border: 1.5px solid #d3d9df; border-right-width: 0; border-radius: 0; padding: 9px 6px; min-height: 46px; cursor: pointer; transition: background .12s ease, color .12s ease; }

.a11y__seg2-opt:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

.a11y__seg2-opt:last-child { border-right-width: 1.5px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

.a11y__seg2-opt:hover { background: color-mix(in srgb, var(--a11y-accent) 8%, #fff); }

.a11y__seg2-opt:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; position: relative; }

/* check marks active option (not colour alone); aria-pressed synced in JS */
.a11y__seg2-opt[aria-pressed="true"]::before { content: "\2713"; margin-right: 5px; font-weight: 900; }

.a11y__seg2[data-state="dark"]   [data-a11y-cycle-opt="dark"],
.a11y__seg2[data-state="invert"] [data-a11y-cycle-opt="invert"],
.a11y__seg2[data-state="low"]    [data-a11y-saturate-opt="low"],
.a11y__seg2[data-state="high"]   [data-a11y-saturate-opt="high"],
.a11y__seg2[data-state="grey"]   [data-a11y-saturate-opt="grey"],
.a11y__seg2[data-state="big"]    [data-a11y-cursor-opt="big"],
.a11y__seg2[data-state="mask"]   [data-a11y-cursor-opt="mask"],
.a11y__seg2[data-state="guide"]  [data-a11y-cursor-opt="guide"] {
  background: var(--a11y-accent); border-color: var(--a11y-accent); color: #fff;
}

/* Menu-position picker - segmented control (radios) */
.a11y__seg { display: flex; gap: 3px; padding: 3px; background: #fff; border: 1px solid #d3d9df; border-radius: 999px; }

.a11y__seg-opt { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 3px; border-radius: 999px; cursor: pointer; user-select: none; -webkit-user-select: none; }

.a11y__seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.a11y__seg-opt:has(input:checked) { background: var(--a11y-accent); color: #fff; }

.a11y__seg-opt:has(input:focus-visible) { outline: 3px solid var(--a11y-accent); outline-offset: 2px; }


/* Footer: accent bar with the MDW bug (logo + tagline) and a Help link */
.a11y__footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--a11y-accent); }

.a11y__bug { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: #fff; }

.a11y__bug-logo { height: 22px; width: auto; flex: 0 0 auto; color: #fff; }

.a11y__bug-tag { display: flex; flex-direction: column; font-size: 11px; line-height: 1.3; color: rgba(255,255,255,.9); }

.a11y__bug-by { font-weight: 700; color: #fff; }

/* Cursor tools (page-level; toggled on <html> by mdw-a11y.js) */
html.a11y-cursor-big, html.a11y-cursor-big * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.5 1.4L16 19.5l-2.6 1.1-3.4-7L5 19z' fill='%23fff' stroke='%23111' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; }

.a11y-guide { position: fixed; left: 0; right: 0; height: 0; border-top: 5px solid var(--a11y-cursor-accent, #1b232b); box-shadow: 0 0 0 1.5px rgba(255,255,255,.75), 0 3px 8px rgba(0,0,0,.4); pointer-events: none; z-index: 999; }

.a11y-mask-panel { position: fixed; left: 0; right: 0; background: rgba(13,18,26,.6); pointer-events: none; z-index: 998; }

.a11y-mask-top { top: 0; box-shadow: inset 0 -3px 0 var(--a11y-cursor-accent, #1b232b); }

.a11y-mask-bottom { bottom: 0; box-shadow: inset 0 3px 0 var(--a11y-cursor-accent, #1b232b); }

/* Saturation: a page filter applied to everything EXCEPT the (isolated) menu */
html.a11y-saturate-low  body > :not(.a11y) { filter: saturate(.5) !important; }

html.a11y-saturate-high body > :not(.a11y) { filter: saturate(1.6) !important; }

html.a11y-saturate-grey body > :not(.a11y) { filter: saturate(0) !important; }

/* ---- MENU ISOLATION: modes must not reach inside the menu ---- */
.a11y[data-a11y-menu], .a11y[data-a11y-menu] * {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: normal !important; word-spacing: normal !important; line-height: normal !important;
}

.a11y[data-a11y-menu] .a11y__dys-chip { font-family: "OpenDyslexic", system-ui, sans-serif !important; }

.a11y[data-a11y-menu] { filter: none !important; }

/* keep menu icons visible under hide-images */
html.a11y-hide-images .a11y[data-a11y-menu] svg { display: inline-block !important; }


/* ---- r3peat (repeating-content grid; e.g. endorsements) ---- */
.r3peat-group { text-align: center; margin: 2rem 0 1rem; }

.r3peat-grid {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.5rem;
}

.r3peat-card { text-align: center; }

.r3peat-card__fig { margin: 0; }

.r3peat-card__photo {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto .75rem;
}

.r3peat-card__cap { display: flex; flex-direction: column; gap: .15rem; }

.r3peat-card__name { font-weight: 700; }

.r3peat-card__title { color: var(--color-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

.r3peat-card__link { text-decoration: none; color: inherit; }


/* ---- Red box / Media page (mdw/media.php) ----
   The literal red box: outlined in the accent colour because that is the
   convention these pages follow, and campaigns recognise it on sight.
   Built on kit tokens, so it inherits each site's palette without editing. */
.redbox {
  max-width: 820px; margin-inline: auto;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius, 8px);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.redbox > :first-child { margin-top: 0; }

.redbox > :last-child  { margin-bottom: 0; }

.redbox p { margin: 0 0 1rem; line-height: 1.65; }

.redbox h2, .redbox h3 { margin: 1.75rem 0 .5rem; }

.redbox__updated { color: var(--color-muted); font-style: italic; margin-bottom: .75rem; }


/* [panel]…[/panel] from the editor. A tinted inset for the part that is
   reference material rather than message — usually key dates. */
.redbox__panel {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.75rem;
}

.redbox__panel > :last-child { margin-bottom: 0; }


/* Ticked list. The rows are talking points a reader scans and picks from, so
   they are separated rather than bulleted. */
.redbox ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }

.redbox li { position: relative; padding: .75rem 0 .75rem 2.1rem; line-height: 1.6; }

.redbox li + li { border-top: 1px solid var(--color-border); }

.redbox li::before {
  content: "\2713"; position: absolute; left: 0; top: .72rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  font-size: .72rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
}

.redbox ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }

.redbox ol li { padding: .35rem 0; border-top: 0; }

.redbox ol li::before { content: none; }

.redbox__assets { margin-top: 2rem; }


/* ---- Red box gallery (uploaded photos + video) ----
   Its own band below the guidance panel. Everything here is built from kit
   tokens and defines its own classes — the kit's public stylesheet has no
   section-modifier or kicker convention, so depending on one would render
   unstyled on every site that hasn't invented it.

   The grid is a uniform square grid on purpose. Photos are stored twice: a
   square cover crop for the tile, and the uncropped original behind the link.
   Uniform tiles are what stop the page looking like a ransom note; keeping the
   original is what stops the crop being destructive. */
/* --color-light is the kit's alternate-background token and every site
   defines it. An invented name with a hex fallback would have quietly
   hardcoded one grey onto every palette in the fleet. */
.redbox-media {
  padding-block: var(--mdw-media-padding);
  background: var(--color-light);
}

.redbox-media__kicker {
  margin: 0 0 .35rem;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.redbox-media__h {
  margin: 0 0 1.75rem;
  text-align: center;
}


.redbox__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.4vw, 1rem);
  max-width: 1000px;
  margin-inline: auto;
}


.redbox__tile {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-border);
}

.redbox__tile > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .35s ease;
}

@supports not (aspect-ratio: 1 / 1) {
  .redbox__tile > img { height: 260px; object-fit: cover; }
}

a.redbox__tile:hover > img,
a.redbox__tile:focus-visible > img { transform: scale(1.04); }

a.redbox__tile:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}


/* Video keeps the square footprint so it sits in the grid without breaking
   the rhythm. object-fit on the element itself letterboxes rather than
   stretching a 16:9 clip into a square. */
.redbox__tile--video { background: #000; }

.redbox__video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #000;
}

@supports not (aspect-ratio: 1 / 1) {
  .redbox__video { height: 260px; }
}

.redbox__cap {
  margin: .4rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--color-muted);
}


/* Videos live below the photo grid, full width WITHIN the gallery's container
   (not the viewport), stacked. A campaign video is the thing people came to
   watch, not a thumbnail to squint at in a square. */
.redbox__videos {
  max-width: 1000px;
  margin-inline: auto;
  margin-top: clamp(1rem, 2.6vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.6vw, 1.75rem);
}

.redbox__videowrap { margin: 0; }

.redbox__video--wide {
  width: 100%;
  height: auto;
  /* Reserve 16:9 before metadata loads so the page doesn't jump; object-fit
     letterboxes anything that isn't 16:9 rather than stretching it. */
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: var(--radius);
}


@media (max-width: 760px) {
  .redbox__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .redbox__gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .redbox__tile > img { transition: none; }

  a.redbox__tile:hover > img { transform: none; }
}


/* ---- Lengua — floating language picker (default switcher) ---- */
.lengua-fab { position: fixed; bottom: 80px; z-index: 999; font-size: 16px; }

.lengua-fab--right { right: 16px; }

.lengua-fab--left  { left: 16px; }

.lengua-fab--solo  { bottom: 16px; }
  /* a11y widget off: nothing below, so sit in the corner */
.lengua-fab__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0; border-radius: 50%;
  background: #316ed2; color: #fff; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  transition: background .2s ease, transform .2s ease;
}

.lengua-fab__toggle:hover { background: #295db3; transform: translateY(-2px); }

.lengua-fab__toggle:focus-visible { outline: 3px solid #316ed2; outline-offset: 2px; }

.lengua-fab__icon { width: 28px; height: 28px; transform: translateY(1px); }


/* Picker: rounded tag beside the button.

   Stacks VERTICALLY and stays centred on the button, so it holds any number of
   languages. It was a horizontal row, which only worked because every site had
   exactly two languages and therefore exactly one option to show — the moment a
   third arrived (Taddeo: English, Español, Kreyòl) the tag grew sideways off
   the edge of the screen. Column layout grows toward the middle of the viewport
   instead, which is where there is always room.

   No arrow point. The triangle was an ::after sitting outside the tag, so the
   overflow:hidden that rounds the corners clipped it away — it had been
   invisible since the column rewrite. All four corners are rounded instead. */
.lengua-fab__pop {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: stretch;
  background: #316ed2; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.26);
  overflow: hidden;   /* let the rounded corners clip the first/last option */
}

.lengua-fab--right .lengua-fab__pop { right: calc(100% + 20px); left: auto; }

.lengua-fab--left  .lengua-fab__pop { left: calc(100% + 20px); right: auto; }

.lengua-fab__pop[hidden] { display: none; }


.lengua-fab__opt {
  display: block; padding: .72rem 1.3rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.08rem;
  letter-spacing: .01em; color: #fff; text-decoration: none; white-space: nowrap;
  text-align: center; transition: background .18s ease;
}

/* Hairline between stacked options. :not(:first-child) rather than a bottom
   border on every row, so the last one has no trailing line to clip. */
.lengua-fab__opt + .lengua-fab__opt { border-top: 1px solid rgba(255,255,255,.22); }

.lengua-fab__opt:link,
.lengua-fab__opt:visited,
.lengua-fab__opt:hover,
.lengua-fab__opt:focus { color: #fff; text-decoration: none; }

/* Hover is per-option now. It used to tint the whole tag, which was fine for a
   single row and misleading with several — it looked like the block was the
   target rather than the language under the cursor. */
.lengua-fab__opt:hover,
.lengua-fab__opt:focus-visible { background: #0fa3b1; }

.lengua-fab__opt[aria-current] { display: none; }
   /* the current language isn't an option */

/* Lift floating buttons off the footer at page bottom (body.at-bottom); small screens only */
.a11y__toggle, .lengua-fab { transition: transform .3s ease; }

@media (max-width: 768px) {
  body.at-bottom .a11y__toggle,
  body.at-bottom .lengua-fab { transform: translateY(-90px); }
}


/* ---- PAGE TRANSITIONS (opt-in via config 'transitions') ----
   Cross-document View Transitions; server adds xt + xt--<style> to <html>.
   Wrapped in prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion: no-preference) {

  /* Fade (default): sequential, not cross-fade (in delayed by out duration) */
  html.xt--fade::view-transition-old(root) { animation: xt-fade-out .30s ease both; }

  html.xt--fade::view-transition-new(root) { animation: xt-fade-in  .34s ease both; animation-delay: .30s; }

  /* Color faded through between pages (config transitions.fade_color).
     Painted on the transition group so the load gap is always covered. */
  html.xt--fade::view-transition-group(root) { background-color: var(--xt-fade-color, #fff); }


  /* Slide: small horizontal shift */
  html.xt--slide::view-transition-old(root) { animation: xt-slide-out .30s ease both; }

  html.xt--slide::view-transition-new(root) { animation: xt-slide-in  .30s ease both; }


  /* Scale: gentle zoom */
  html.xt--scale::view-transition-old(root) { animation: xt-scale-out .28s ease both; }

  html.xt--scale::view-transition-new(root) { animation: xt-scale-in  .28s ease both; }


  /* Wipe: reveal upward from bottom */
  html.xt--wipe::view-transition-old(root) { animation: xt-fade-out .20s ease both; }

  html.xt--wipe::view-transition-new(root) { animation: xt-wipe-in  .34s cubic-bezier(.4, 0, .2, 1) both; }


  /* Fallback for browsers without View Transitions */
  @supports not (view-transition-name: none) {
    html.xt #main            { animation: xt-fade-in  .30s ease both; }

    html.xt--slide #main     { animation: xt-slide-in .32s ease both; }

    html.xt--scale #main     { animation: xt-scale-in .30s ease both; }

    html.xt--wipe  #main     { animation: xt-wipe-in  .34s cubic-bezier(.4, 0, .2, 1) both; }
}
}


/* ============================================================
   FORM SUBMIT — pending state (resources/js/mdw-form.js)
   ============================================================
   The button is disabled and relabelled the moment a form is submitted, so a
   visitor gets an answer to "did that work?" instead of an unchanged page.
   Added 2026-08-20 after 51% of the Taddeo signup rows turned out to be the
   same people clicking again during a ~3s wait.

   currentColor and inherited sizing on purpose: this drops into any site's
   button styles without knowing its palette. No site-specific tokens.

   Opacity stays high while disabled — the usual dimmed-disabled look reads as
   "this button is broken", which is the exact wrong message mid-submit. */
.mdw-spinner {
  display: inline-block; width: 1em; height: 1em;
  margin-right: .5em; vertical-align: -.125em;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: mdw-spin .6s linear infinite;
}

.mdw-submitting-label { vertical-align: baseline; }

button.is-submitting,
input.is-submitting {
  cursor: progress;
  opacity: .92;
}

/* Honour the visitor's motion preference AND the a11y menu's Pause Animations
   (html.a11y-reduce-motion) — a spinner is decorative, and the disabled button
   plus the label already carry the meaning. */
@media (prefers-reduced-motion: reduce) {
  .mdw-spinner { animation: none; border-right-color: currentColor; opacity: .55; }
}

html.a11y-reduce-motion .mdw-spinner {
  animation: none; border-right-color: currentColor; opacity: .55;
}

@keyframes mdw-spin { to { transform: rotate(360deg); } }


@keyframes xt-fade-in   { from { opacity: 0; } to { opacity: 1; } }

@keyframes xt-fade-out  { from { opacity: 1; } to { opacity: 0; } }

@keyframes xt-slide-in  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

@keyframes xt-slide-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-24px); } }

@keyframes xt-scale-in  { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

@keyframes xt-scale-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.012); } }

@keyframes xt-wipe-in   { from { clip-path: inset(0 0 100% 0); opacity: .85; } to { clip-path: inset(0 0 0 0); opacity: 1; } }


/* ---------- The MDW bug (agency signature) — do NOT restyle ---------- */
.footer-mdw, .footer-mdw:hover { display: inline-flex; align-items: stretch; background: #000; border-radius: var(--mdw-credit-radius, 3px); padding: 0; color: #fff; text-decoration: none; overflow: hidden; }

.footer-mdw__inner { display: inline-flex; align-items: center; padding: 9px 12px; }

.footer-mdw svg { width: 52px; height: auto; display: block; }

.footer-mdw__slot { display: grid; transition: grid-template-columns .45s cubic-bezier(.4,0,.2,1), opacity .35s ease; }

.footer-mdw__clip { overflow: hidden; min-width: 0; display: inline-flex; align-items: center; height: 18px; }

.footer-mdw__logo { grid-template-columns: 1fr; }

.footer-mdw__text { grid-template-columns: 0fr; opacity: 0; }

.footer-mdw__label { font-family: var(--mdw-credit-font, 'Montserrat', var(--font-heading), sans-serif); font-weight: var(--mdw-credit-weight, 700); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; line-height: 1; white-space: nowrap; color: #fff; padding: 0 3px; }

.footer-mdw__tm { font-size: .62em; vertical-align: .35em; }

.footer-mdw:hover .footer-mdw__logo, .footer-mdw:focus-visible .footer-mdw__logo { grid-template-columns: 0fr; opacity: 0; }

.footer-mdw:hover .footer-mdw__text, .footer-mdw:focus-visible .footer-mdw__text { grid-template-columns: 1fr; opacity: 1; }

@media (prefers-reduced-motion: reduce) { .footer-mdw__slot { transition: opacity .2s ease; }
}