/* ============================================================
   MVSD Core — Base
   CSS custom properties (district defaults), reset, typography
   ============================================================ */

/* ── 1. CSS Custom Properties ─────────────────────────────── */
:root {
  /* Brand — overridden per subtheme ----------------------- */
  --color-primary:       #01491f;
  --color-primary-dark:  #002b12;
  --color-primary-mid:   #0b8545;
  --color-primary-light: #e8f5ed;
  --color-accent:        #f5a623;
  --color-accent-dark:   #d4891a;
  /* Accent used AS TEXT on a primary/brand-deep ground (events time band,
     footer link hover). Defaults to the accent so themes that already pass
     are unchanged; subthemes whose accent fails WCAG AA on their own primary
     override this to #fff. Added 2026-07-13 a11y sweep. */
  --color-accent-on-primary: var(--color-accent);
  --color-accent-deep:   var(--color-accent);  /* per-theme override; fallback = brand accent (theme should override for AA-on-white) */
  --color-on-primary:    #ffffff;
  --color-on-accent:     #1a1a1a;

  /* Brand highlight — the single per-site "brand color" knob. Each subtheme
     overrides --color-brand in its theme.css; every shared brand element
     (css/brand.css) references it, so one line reskins the whole site.
     --color-brand-deep (darker companion for hover / two-tone bands) and the
     content-accent token both derive from it automatically. Default = the
     district brand green. */
  --color-brand:          #008544;
  --color-brand-deep:     var(--color-primary);
  --color-content-accent: var(--color-brand);

  /* Neutrals — shared across all themes ------------------- */
  --color-text:          #1a1a1a;
  --color-text-muted:    #5a5a5a;
  --color-bg:            #ffffff;
  --color-bg-subtle:     #f5f5f5;
  --color-border:        #e0e0e0;
  --color-focus-ring:    #b45309;          /* dark amber — AA non-text (>=3:1) on white */
  --color-focus-ring-on-dark: #ffbf47;      /* bright gold — AA non-text on dark navy */
  --color-error:         #c0392b;
  --color-success:       #27ae60;

  /* Typography -------------------------------------------- */
  --font-sans:            system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-size-xs:         0.75rem;
  --font-size-sm:         0.875rem;
  --font-size-base:       1rem;
  --font-size-lg:         1.125rem;
  --font-size-xl:         1.25rem;
  --font-size-2xl:        1.5rem;
  --font-size-3xl:        1.875rem;
  --font-size-4xl:        2.25rem;
  --line-height-tight:    1.25;
  --line-height-base:     1.6;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;
  --font-weight-semibold:  600;

  /* Letter-spacing scale ---------------------------------- */
  --ls-tight:    -0.01em;
  --ls-normal:    0;
  --ls-snug:      0.02em;
  --ls-relaxed:   0.04em;
  --ls-loose:     0.08em;
  --ls-tracked:   0.12em;
  --ls-display:   0.18em;

  /* Spacing ----------------------------------------------- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;

  /* Layout ------------------------------------------------- */
  --max-width:        1200px;
  --max-width-wide:   1400px;
  --max-width-narrow: 800px;
  --nav-height:       3rem;
  --hero-height:      70vh;
  --hero-height-min:  400px;
  --drawer-width:     480px;

  /* UI ----------------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.18);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Link animation — unified accent underline that grows on hover.
     Per-site colors come from --color-accent; motion + thickness are
     shared. Override --link-underline-color OR --link-hover-color to
     retint per-context (the footer scope flips hover to accent because
     the dark-green footer kills the default primary color shift). */
  --link-underline-color:     var(--color-accent-deep);
  --link-underline-thickness: 2px;
  --link-hover-color:         var(--color-primary);
  --link-anim-duration:       320ms;
  --link-anim-ease:           cubic-bezier(.2, .8, .2, 1);

  /* Z-index scale ------------------------------------------ */
  --z-overlay: 50;
  --z-header:  100;
  --z-drawer:  200;
  --z-alert:   300;
}

/* ── 2. Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  /* Prevent wide block content from causing horizontal scroll. Use `clip`, not
   * `hidden`: `overflow-x: hidden` forces the computed `overflow-y` to `auto`,
   * which makes <body> a scroll container and silently breaks `position: sticky`
   * for every descendant (e.g. the page-TOC "sticky on wide screens" option).
   * `clip` prevents the horizontal scroll the same way without that side effect. */
  overflow-x: clip;
}

img, video, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--color-primary);
}
a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Unified animated text-link treatment ───────────────────────────
   Used across content + UI links so hover behaviour is the same
   everywhere — replaces the mix of plain underlines + ad-hoc color
   shifts that existed per-component. The linear-gradient renders as
   a fake underline whose width grows from 0 → 100% on hover; works on
   inline links without needing block layout.

   Apply via `.mvsd-link-anim` OR via the scoped selectors below for
   common content surfaces. News-card titles get their own related but
   slightly thicker treatment in panels.css (the "card signature"
   variant). Front-page primary news cards still use a `:focus-within`
   pop-out overlay — see panels.css for the tease-tab + slide.

   Per-site: --color-accent drives the underline color, so each
   school's theme retints automatically. Motion + thickness are shared.
   Override --link-hover-color in a scope (see .site-footer below) to
   change where the text shifts on hover. */
.mvsd-link-anim,
.page-body a:not([class]),
.article-body a:not([class]),
.dept-content a:not([class]),
.feed-list-item__title a,
.news-view-all a,
.evergreen-zone a:not([class]),
/* Front-page right column — calendar + ParentSquare links. */
.events-list__title,
.ps-feed__link a,
.ps-feed__footer a,
/* Footer — contact/compliance/safety blocks. Hover color flipped to
   accent in the .site-footer scope override below. */
.footer-contact a,
.footer-compliance a,
.footer-safety a,
.footer-safety-compliance a {
  text-decoration: none;
  background-image: linear-gradient(var(--link-underline-color), var(--link-underline-color));
  background-size: 0 var(--link-underline-thickness);
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition:
    background-size var(--link-anim-duration) var(--link-anim-ease),
    color 200ms ease;
}
.mvsd-link-anim:hover,
.mvsd-link-anim:focus-visible,
.page-body a:not([class]):hover,
.page-body a:not([class]):focus-visible,
.article-body a:not([class]):hover,
.article-body a:not([class]):focus-visible,
.dept-content a:not([class]):hover,
.dept-content a:not([class]):focus-visible,
.feed-list-item__title a:hover,
.feed-list-item__title a:focus-visible,
.news-view-all a:hover,
.news-view-all a:focus-visible,
.evergreen-zone a:not([class]):hover,
.evergreen-zone a:not([class]):focus-visible,
.events-list__title:hover,
.events-list__title:focus-visible,
.ps-feed__link a:hover,
.ps-feed__link a:focus-visible,
.ps-feed__footer a:hover,
.ps-feed__footer a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible,
.footer-compliance a:hover,
.footer-compliance a:focus-visible,
.footer-safety a:hover,
.footer-safety a:focus-visible,
.footer-safety-compliance a:hover,
.footer-safety-compliance a:focus-visible {
  background-size: 100% var(--link-underline-thickness);
  color: var(--link-hover-color);
}

/* Footer scope: text is light on dark green, so the default hover shift
   to primary would invisibly. Flip to accent — the same gold the
   underline already uses, giving a coherent "highlight" feel. */
.site-footer {
  --link-hover-color: var(--color-accent-on-primary);
}

@media (prefers-reduced-motion: reduce) {
  .mvsd-link-anim,
  .page-body a:not([class]),
  .article-body a:not([class]),
  .dept-content a:not([class]),
  .feed-list-item__title a,
  .news-view-all a,
  .evergreen-zone a:not([class]),
  .events-list__title,
  .ps-feed__link a,
  .ps-feed__footer a,
  .footer-contact a,
  .footer-compliance a,
  .footer-safety a,
  .footer-safety-compliance a {
    transition: none;
  }
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

p { margin-top: 0; }

ul, ol { padding-left: var(--space-6); }

/* ── 3. Shared utilities ──────────────────────────────────── */

/* WCAG skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: calc(var(--z-alert) + 10);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: var(--space-4);
}

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

/* Zone wrapper */
.zone-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.zone-inner--wide {
  max-width: var(--max-width-wide);
}
.zone-inner--narrow {
  max-width: var(--max-width-narrow);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  line-height: var(--line-height-tight);
}
.btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-on-accent);
}
.btn-ghost {
  background: transparent;
  color: var(--color-on-primary);
  border-color: rgba(255,255,255,0.6);
}
.btn-ghost:hover {
  border-color: var(--color-on-primary);
  background: rgba(255,255,255,0.12);
  color: var(--color-on-primary);
}

/* ── Reduced motion — scroll-behavior ────────────────────────
 * The transitions/animations block is in layout.css.
 * scroll-behavior must be reset here since it's set on html.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------------------
   Pre-publish review callout
   Strong, unmissable warning shown (inside the standard warning message) after
   an editor publishes content that still has outstanding items — missing
   image, missing alt text, no audience feeds, etc. The publish is allowed to
   go through (work is never lost); this callout makes the follow-up obvious.
   Scoped to its own class so it does NOT restyle other site messages.
--------------------------------------------------------------------------- */
.mvsd-prepublish-warning {
  border-left: 6px solid #b3540a;            /* saturated amber — clearly a warning */
  background: #fff4e3;                        /* warm amber wash */
  padding: 0.85rem 1.1rem;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(120, 60, 0, 0.18);
}
.mvsd-prepublish-warning > strong {
  display: block;
  color: #8a3f06;
  font-size: 1.08rem;
  line-height: 1.35;
  margin-bottom: 0.45rem;
}
.mvsd-prepublish-warning ul {
  margin: 0.35rem 0 0.5rem 1.15rem;
  padding: 0;
}
.mvsd-prepublish-warning li {
  margin: 0.2rem 0;
}
.mvsd-prepublish-warning .mvsd-prepublish-warning__foot {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  color: #5a3a14;
}

/* ── External-link icon: open everywhere, but show the icon only in prose ──────
   (2026-06-02) extlink runs site-wide so EVERY external link opens in a new tab
   with rel=noopener (the desired behavior — do NOT scope that). The problem was
   purely the injected icons (.ext, .mailto, .tel as svg/span) breaking structured links —
   menus, FullCalendar events, branded buttons. Fix: hide the icon everywhere by
   default and reveal it ONLY inside authored prose paragraphs, where it's useful
   and can't break a layout. The new-tab target + rel stay on every link. */
svg.ext,
svg.mailto,
svg.tel,
span.ext,
span.mailto,
span.tel {
  display: none !important;
}

:is(.para--rich-text, .para--columns, .para--callout, .para--accordion, .para--table) svg.ext,
:is(.para--rich-text, .para--columns, .para--callout, .para--accordion, .para--table) svg.mailto,
:is(.para--rich-text, .para--columns, .para--callout, .para--accordion, .para--table) svg.tel {
  display: inline-block !important;
  vertical-align: baseline;
}
:is(.para--rich-text, .para--columns, .para--callout, .para--accordion, .para--table) span.ext,
:is(.para--rich-text, .para--columns, .para--callout, .para--accordion, .para--table) span.mailto,
:is(.para--rich-text, .para--columns, .para--callout, .para--accordion, .para--table) span.tel {
  display: inline-block !important;
}