/* ============================================================
   MVSD Core — Layout
   Page structure: header, hero, content zones, footer, drawer
   ============================================================ */

/* ── Site Header ──────────────────────────────────────────── */
/*
 * Two-tone header:
 *   Row 1 (.header-brand) — primary green, collapses on scroll
 *   Row 2 (.header-nav)   — primary-dark green, always visible
 *
 * The nav bar has a gold Quick Links panel on the right with a
 * diagonal slash cut. The panel uses ::before so pointer-events
 * on the button inside are never clipped.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  color: var(--color-on-primary);
  --ql-slope: 2.5rem;
}

/* ── Row 1: Brand (logo + site name) ─────────────────────── */
.header-brand {
  --logo-height: 5.25rem;
  background: var(--color-primary);
  /* Scrolls off naturally — no collapse animation needed */
}

.header-brand-inner {
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
}

/* Scale up the site name in the brand row */
.header-brand .site-branding__name a {
  font-size: 2.25rem;
}

/* ── Row 2: Nav bar ───────────────────────────────────────── */
.header-nav {
  height: var(--nav-height);
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
  /* No overflow: hidden — that would clip nav items if they don't all fit */
}

.header-nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /*
   * Dynamic left padding: aligns nav items with the content column on wide
   * viewports. max() ensures we never go below the minimum comfortable gutter.
   * Right side has no padding — nav-quick panel extends to the viewport edge.
   */
  padding-left: max(var(--space-6), calc((100vw - var(--max-width)) / 2));
}

/* Primary nav takes all remaining width, left-aligned */
.header-nav-inner .site-nav {
  flex: 1;
  min-width: 0;
}

/* ── Gold Quick Links panel (nav bar only) ────────────────── */
/*
 * clip-path on the container creates the diagonal slash.
 * The button's left edge starts well past the clipped triangle
 * (padding-left > --ql-slope), so it always sits in the visible
 * gold area and receives pointer events normally.
 */
/*
 * Width = var(--drawer-width) so the bottom-left corner of the gold panel
 * sits at exactly 100vw - drawer-width — the same left edge the drawer
 * slides in from. Alignment is mathematically exact, not approximate.
 */
.nav-quick {
  flex-shrink: 0;
  align-self: stretch;
  /* Fixed width independent of drawer width — keeps the diagonal cut proportional */
  width: 200px;
  background: var(--color-accent);
  clip-path: polygon(var(--ql-slope) 0%, 100% 0%, 100% 100%, 0% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(var(--ql-slope) + var(--space-4));
  padding-right: var(--space-6);
}

/* ── Drawer toggle button ─────────────────────────────────── */
.drawer-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--color-on-accent);
  border: none;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  letter-spacing: var(--ls-snug);
  text-transform: uppercase;
  transition: opacity var(--transition-fast);
}
.drawer-toggle:hover {
  opacity: 0.8;
}
.drawer-toggle:focus-visible {
  /* sits on the gold accent bar — use dark on-accent for >= 3:1 */
  outline: 3px solid var(--color-on-accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.drawer-toggle-icon {
  font-size: var(--font-size-base);
  line-height: 1;
}

/* == Translate panel ===========================================
   Mirrors the gold Quick Links panel, sits to its LEFT so the nav
   edge layers: dark green (header bg) -> this panel -> gold. Background
   defaults to the site primary; the district overrides to brand green.
   Placeholder button -- behavior (page translation) wired later. */
.nav-translate {
  flex-shrink: 0;
  align-self: stretch;
  width: 200px;
  position: relative; /* anchor for the ::before shape + the language dropdown */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Symmetric padding so justify-content:center lands the button on the panel
     midpoint (100px) — which IS the visible parallelogram center at the button
     mid-height (the left slash + the gold overlap on the right intrude equally
     about mid-height). NOT the asymmetric padding-left nav-quick uses (nothing
     overlaps nav-quick right edge, so its text can sit further right). */
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
/* The brand-green parallelogram lives on a pseudo-element so .nav-translate
   itself stays un-clipped and the language dropdown can escape below it.
   (clip-path on the element would slice the menu off at the slash.) */
.nav-translate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  clip-path: polygon(var(--ql-slope) 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 0;
}
/* Nest the gold panel over the translate panel right edge by the slope so
   the gold diagonal reveals the green beneath it, not the dark header bg. */
.nav-quick {
  margin-left: calc(-1 * (var(--ql-slope) + var(--space-4)));
  position: relative;
  z-index: 1;
}
.translate-toggle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--color-on-primary);
  border: none;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  letter-spacing: var(--ls-snug);
  text-transform: uppercase;
  transition: opacity var(--transition-fast);
}
.translate-toggle:hover { opacity: 0.8; }
.translate-toggle:focus-visible {
  outline: 3px solid var(--color-on-primary);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.translate-toggle__icon { line-height: 0; flex-shrink: 0; }
.translate-toggle__icon svg { display: block; width: 1.15em; height: 1.15em; }

/* Language dropdown (Layer 2) — styled to MATCH the primary-nav fly-out menus
   (nav.css `.site-nav li > ul`): dark `--color-primary-dark` card, gold top
   border, white-ish links with a gold left-bar on hover/focus. So it auto-
   matches each site's own nav dropdowns — no per-site override needed. Escapes
   the panel because .nav-translate is no longer clip-path'd. */
.translate-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-primary-dark);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.translate-menu[hidden] { display: none; }
.translate-menu li {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.translate-menu li:last-child { border-bottom: none; }
.translate-menu__link,
.translate-menu__restore {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-left: 3px solid transparent;
  white-space: nowrap;
  display: flex;
  align-items: center;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
.translate-menu__link:hover,
.translate-menu__restore:hover {
  border-left-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-primary);
}
.translate-menu__link:focus-visible,
.translate-menu__restore:focus-visible {
  border-left-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-primary);
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: -3px;
}

/* Compact logo: hidden by default, drops in from above when brand row scrolls off */
.logo-compact {
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
  pointer-events: none;
  max-width: 0;
  overflow: hidden;
}

.site-header.is-scrolled .logo-compact {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-width: 3rem;
}

.logo-compact img {
  height: 2.25rem;
  width: auto;
  display: block;
}

/* ── System branding block (via template override adding BEM classes) ── */
.site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

/* Logo */
.site-branding__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}

.site-branding__logo img {
  height: var(--logo-height, 3.5rem);
  width: auto;
  display: block;
}

/* Site name */
.site-branding__name a {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-on-primary);
  text-decoration: none;        /* No underline at rest */
  letter-spacing: var(--ls-tight);
}

.site-branding__name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-on-primary);
}

.site-branding__name a:focus-visible {
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.site-branding__slogan {
  display: none; /* Shown in evergreen zone, not header */
}

/* ── Utility Drawer ───────────────────────────────────────── */
.utility-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--drawer-width);
  max-width: 90vw;
  height: 100dvh;
  background: var(--color-primary);
  color: var(--color-on-primary);
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  overflow-x: hidden; /* prevent horizontal bleed from negative-margin contact section */
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-lg);
}

.utility-drawer.is-open {
  transform: translateX(0);
}

.utility-drawer a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.utility-drawer a:hover {
  color: var(--color-on-primary);
}

/* ── Drawer header: title + close ─────────────────────────── */
.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.drawer-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
}

.drawer-close {
  background: none;
  border: 2px solid rgba(255,255,255,0.4);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font-size: var(--font-size-xl);
  line-height: 1;
  transition: border-color var(--transition-fast);
  flex-shrink: 0;
}
.drawer-close:hover {
  border-color: var(--color-on-primary);
}
.drawer-close:focus-visible {
  outline: 3px solid var(--color-focus-ring-on-dark);
}

/* ── Drawer menu ──────────────────────────────────────────── */
.utility-drawer .block-menu {
  margin: 0 0 var(--space-5);
}

/*
 * Top-level list — grid layout.
 * Quick links (no children) fill the grid naturally.
 * Resources parent (has child ul) spans full width.
 */
.utility-drawer nav > ul,
.utility-drawer nav > .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* Quick link items — grid cells */
.utility-drawer nav > ul > li:not(:has(> ul)),
.utility-drawer nav > .menu > li:not(:has(> ul)) {
  display: flex;
}

.utility-drawer nav > ul > li > a,
.utility-drawer nav > .menu > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  color: rgba(255,255,255,0.92);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
.utility-drawer nav > ul > li > a:hover,
.utility-drawer nav > ul > li > a:focus-visible,
.utility-drawer nav > .menu > li > a:hover,
.utility-drawer nav > .menu > li > a:focus-visible {
  background: rgba(255,255,255,0.14);
  border-color: var(--color-accent);
  color: var(--color-on-primary);
}

/* Resources parent — spans both columns, section heading style */
.utility-drawer nav > ul > li:has(> ul),
.utility-drawer nav > .menu > li:has(> ul) {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
}

.utility-drawer nav > ul > li:has(> ul)::before,
.utility-drawer nav > .menu > li:has(> ul)::before {
  content: '';
  display: block;
  border-top: 1px solid rgba(255,255,255,0.2);
  margin-bottom: var(--space-4);
}

/* Parent label — rendered as <span> (route:<nolink>) or <a> */
.utility-drawer nav > ul > li:has(> ul) > a,
.utility-drawer nav > ul > li:has(> ul) > span,
.utility-drawer nav > .menu > li:has(> ul) > a,
.utility-drawer nav > .menu > li:has(> ul) > span {
  display: block;
  width: auto;
  padding: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--color-accent);
  background: none;
  border: none;
  border-radius: 0;
  cursor: default;
  pointer-events: none;
}
.utility-drawer nav > ul > li:has(> ul) > a:hover,
.utility-drawer nav > ul > li:has(> ul) > span:hover,
.utility-drawer nav > .menu > li:has(> ul) > a:hover,
.utility-drawer nav > .menu > li:has(> ul) > span:hover {
  background: none;
  border-color: transparent;
  color: var(--color-accent);
}

/* Sub-menu (Resources list) — two columns, compact vertical spacing */
.utility-drawer nav li > ul,
.utility-drawer nav li > .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-3);
}

.utility-drawer nav li > ul > li,
.utility-drawer nav li > .menu > li {
  display: flex;
}

.utility-drawer nav li > ul a,
.utility-drawer nav li > .menu a {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  color: rgba(255,255,255,0.8);
  font-size: var(--font-size-sm);
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
.utility-drawer nav li > ul a:hover,
.utility-drawer nav li > ul a:focus-visible,
.utility-drawer nav li > .menu a:hover,
.utility-drawer nav li > .menu a:focus-visible {
  background: rgba(255,255,255,0.08);
  border-left-color: var(--color-accent);
  color: var(--color-on-primary);
}

/* ── Drawer blocks wrapper — makes margin-top:auto work ────── */
/*
 * {{ page.drawer }} renders inside Drupal's anonymous region <div>.
 * We wrap it in .drawer-blocks so we can create a flex chain:
 *   .utility-drawer (flex column)
 *     └── .drawer-blocks (flex:1, flex column)
 *           └── > div (Drupal region wrapper, flex:1, flex column)
 *                 └── .views-element-container (margin-top:auto → pins to bottom)
 */
.drawer-blocks {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Drupal's anonymous region wrapper inside .drawer-blocks */
.drawer-blocks > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ── Contact info block — footer of drawer ────────────────── */
/*
 * The contact block renders as .views-element-container (not .block).
 * margin-top: auto pins it to the bottom of the flex column.
 * Negative margins bleed it to drawer edges; darker bg = distinct footer.
 *
 * Views renders fields as .views-field > .views-label + .field-content
 * (NOT .field__label / .field__item — those are entity field template classes).
 */
.utility-drawer .views-element-container {
  margin-top: auto;
  margin-left: calc(-1 * var(--space-6));
  margin-right: calc(-1 * var(--space-6));
  margin-bottom: calc(-1 * var(--space-6));
  padding: var(--space-4) var(--space-6) var(--space-5);
  background: var(--color-primary-dark);
  border-top: 3px solid var(--color-accent);
}

/* Views row — 2-column grid; short-label fields pair up, hours span full width */
.utility-drawer .views-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: start;
}

/* Every field — flex row: label · value */
.utility-drawer .views-field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  min-width: 0;
  overflow: hidden;
}

/* Label — dim, tiny caps */
.utility-drawer .views-label {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

/* Value */
.utility-drawer .field-content {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.88);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Address — allow wrapping so the full address is visible */
.utility-drawer .views-field-field-sci-address .field-content {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: var(--line-height-base);
}

/* Address field spans full width so there's room for two lines */
.utility-drawer .views-field-field-sci-address {
  grid-column: 1 / -1;
}

.utility-drawer .field-content a {
  color: rgba(255,255,255,0.88);
}
.utility-drawer .field-content a:hover {
  color: var(--color-accent);
}

/* Hours fields have long labels — span both columns */
.utility-drawer .views-field-field-sci-school-hours,
.utility-drawer .views-field-field-sci-office-hours,
.utility-drawer .views-field-field-sci-er-school-hrs,
.utility-drawer .views-field-field-sci-er-office-hrs,
.utility-drawer .views-field-field-sci-summer-hours {
  grid-column: 1 / -1;
}

/* Staff contacts — full width, grid of names */
.utility-drawer .views-field-field-sci-staff-contacts {
  grid-column: 1 / -1;
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.utility-drawer .views-field-field-sci-staff-contacts > .views-label {
  display: block;
  margin-bottom: var(--space-2);
}

.utility-drawer .views-field-field-sci-staff-contacts > .field-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-1) var(--space-3);
  white-space: normal;
  overflow: visible;
}

/* Individual staff contact paragraph */
.staff-contact {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-name {
  color: rgba(255,255,255,0.9);
  font-weight: var(--font-weight-medium);
}

a.staff-name {
  text-decoration: none;
}
a.staff-name:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.staff-title {
  font-style: italic;
  color: rgba(255,255,255,0.5);
  font-size: 0.68rem;
}

/* ── Drawer overlay ───────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.drawer-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* ── Hero Zone ────────────────────────────────────────────── */
/* ── Content Zones ────────────────────────────────────────── */
.news-zone {
  background-color: var(--color-bg);
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.superintendent-zone {
  background-color: var(--color-primary-light);
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--color-border);
}

.evergreen-zone {
  background-color: var(--color-bg-subtle);
  padding-block: var(--space-10);
  position: relative;
}

/* Random community photo background — set via --evergreen-bg custom property */
.evergreen-zone[style*="--evergreen-bg"] {
  background:
    linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.92)),
    var(--evergreen-bg) center / cover no-repeat;
  background-color: var(--color-bg-subtle);
}

/* ── Breadcrumb region ────────────────────────────────────── */
.page-breadcrumb-region {
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.breadcrumb__link {
  font-size: var(--font-size-sm);
  color: var(--color-primary-mid);
  text-decoration: none;
}
.breadcrumb__link:hover {
  text-decoration: underline;
  color: var(--color-primary);
}

.breadcrumb__current {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.breadcrumb__sep {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* ── Interior page content ────────────────────────────────── */
.page-content {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
}

/* ── Page header (node title + optional date) ─────────────── */
.page-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 3px solid var(--color-accent);
}

.page-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
}

.page-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.page-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ── Page body (prose content) ────────────────────────────── */
.page-body {
  max-width: var(--max-width-narrow);
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--color-text);
}

.page-body h2 {
  font-size: var(--font-size-2xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

.page-body h3 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}

.page-body p {
  margin-bottom: var(--space-5);
}

.page-body ul,
.page-body ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-8);
}

.page-body li {
  margin-bottom: var(--space-2);
}

.page-body a:not([class]) {
  color: var(--color-primary-mid);
}
.page-body a:not([class]):hover {
  color: var(--color-primary);
}

.page-body img {
  border-radius: var(--radius-sm);
  margin-block: var(--space-4);
}

/* ── Alert Region (modal overlay) ─────────────────────────── */
.alert-region {
  position: fixed;
  inset: 0;
  z-index: var(--z-alert);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: calc(var(--z-alert) - 1);
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-10);
}

.footer-contact,
.footer-compliance {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-contact h2,
.footer-compliance h2,
.footer-contact h3,
.footer-compliance h3 {
  color: var(--color-on-primary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  margin-bottom: var(--space-3);
  opacity: 0.75;
}

.footer-contact a,
.footer-compliance a {
  color: rgba(255,255,255,0.85);
  font-size: var(--font-size-sm);
}
/* Hover treatment now handled by .mvsd-link-anim in base.css —
   the .site-footer scope override flips --link-hover-color to accent
   so the underline + color shift both land in the brand gold. */

/* ── Footer contact view fields ───────────────────────────────────────────────
 * The footer uses views_block:school_contact_info-block_2 which renders
 * address, phone, email, and social links as .views-field rows.
 */
.footer-contact .views-element-container {
  display: contents; /* let .footer-contact flex column handle spacing */
}

.footer-contact .views-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Node title — section label treatment, matches .footer-compliance h2/h3 */
.footer-contact .views-field-title .field-content {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: var(--color-on-primary);
  opacity: 0.75;
  margin-bottom: var(--space-3);
}

/* Each field: label hidden (label is '' in view config), value shown */
.footer-contact .views-field {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,0.85);
}

.footer-contact .views-label {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  /* 0.7 opacity on white over #01491f gives ~5.8:1 — passes AA for large/bold text */
  color: rgba(255,255,255,0.70);
  white-space: nowrap;
}

.footer-contact .field-content {
  min-width: 0;
}

.footer-contact .field-content a {
  color: rgba(255,255,255,0.85);
}
.footer-contact .field-content a:hover {
  color: var(--color-accent);
}

/* Address — allow wrapping */
.footer-contact .views-field-field-sci-address .field-content {
  white-space: normal;
  line-height: var(--line-height-base);
}

/* ── Social links — icon + platform name, stacked vertically ────────────────
 * Each social field renders as its own .views-field row in the flex column.
 * We style each link as icon (mask-image) + platform name text side-by-side.
 * A top-border separator groups the social block visually below the email.
 */

/* Social fields share flex layout with the other contact fields */
.footer-contact .views-field-field-sci-facebook,
.footer-contact .views-field-field-sci-instagram,
.footer-contact .views-field-field-sci-youtube,
.footer-contact .views-field-field-sci-twitter,
.footer-contact .views-field-field-sci-linkedin {
  align-items: center;
}

/* Separator above facebook (first social field) */
.footer-contact .views-field-field-sci-facebook {
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* Each social link: icon (mask-image) + platform name, side by side */
.footer-contact .views-field-field-sci-facebook .field-content a,
.footer-contact .views-field-field-sci-instagram .field-content a,
.footer-contact .views-field-field-sci-youtube .field-content a,
.footer-contact .views-field-field-sci-twitter .field-content a,
.footer-contact .views-field-field-sci-linkedin .field-content a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,0.75);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  position: relative; /* needed for ::after visually-hidden positioning */
}
.footer-contact .views-field-field-sci-facebook .field-content a:hover,
.footer-contact .views-field-field-sci-instagram .field-content a:hover,
.footer-contact .views-field-field-sci-youtube .field-content a:hover,
.footer-contact .views-field-field-sci-twitter .field-content a:hover,
.footer-contact .views-field-field-sci-linkedin .field-content a:hover {
  color: var(--color-on-primary);
  background: rgba(255,255,255,0.1);
}

/* Screen-reader "opens in new window" announcement for social links.
 * CSS ::after content is read by screen readers as part of the link text.
 * Visually hidden — sighted users see the platform name; AT hears it too. */
.footer-contact .views-field-field-sci-facebook .field-content a::after,
.footer-contact .views-field-field-sci-instagram .field-content a::after,
.footer-contact .views-field-field-sci-youtube .field-content a::after,
.footer-contact .views-field-field-sci-twitter .field-content a::after,
.footer-contact .views-field-field-sci-linkedin .field-content a::after {
  content: " (opens in new window)";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Icon pseudo-element shared styles */
.footer-contact .views-field-field-sci-facebook .field-content a::before,
.footer-contact .views-field-field-sci-instagram .field-content a::before,
.footer-contact .views-field-field-sci-youtube .field-content a::before,
.footer-contact .views-field-field-sci-twitter .field-content a::before,
.footer-contact .views-field-field-sci-linkedin .field-content a::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Facebook icon */
.footer-contact .views-field-field-sci-facebook .field-content a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

/* Instagram icon */
.footer-contact .views-field-field-sci-instagram .field-content a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.791-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

/* YouTube icon */
.footer-contact .views-field-field-sci-youtube .field-content a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z'/%3E%3C/svg%3E");
}

/* X / Twitter icon */
.footer-contact .views-field-field-sci-twitter .field-content a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

/* LinkedIn icon */
.footer-contact .views-field-field-sci-linkedin .field-content a::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

.footer-compliance dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: var(--font-size-sm);
  margin: 0;
}
.footer-compliance dt {
  font-weight: var(--font-weight-medium);
  opacity: 0.85;
}
.footer-compliance dd {
  margin: 0;
  opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════════
   Footer — Safety & Compliance (right column)
   Five compliance areas, each with coordinator + policies + resources.
   Compact two-column grid on wider footers, stacks on narrow.
   ══════════════════════════════════════════════════════════════ */
.footer-safety-compliance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}
.footer-safety-compliance .fsc__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.footer-safety-compliance h3 {
  /* Inherits opacity 0.75 from the .footer-compliance h3 baseline — kept
     consistent with the section labels in the school contact column. */
  margin: 0 0 0.3rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-on-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 0.35rem;
}
.footer-safety-compliance .fsc__coordinator,
.footer-safety-compliance .fsc__phone {
  margin: 0;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.85); /* matches general footer body color */
  line-height: 1.4;
}
.footer-safety-compliance .fsc__policies,
.footer-safety-compliance .fsc__resources {
  margin: 0.4rem 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
  line-height: 1.45;
}
.footer-safety-compliance .fsc__resources {
  margin-top: 0.6rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18); /* solid (was dashed) */
}
.footer-safety-compliance .fsc__lang {
  /* Bumped from 0.65 → 0.80 — at 0.85em (~11px) on dark green, the lower
     opacity computed to ~4.49:1 contrast, just under WCAG AA. The
     translation sub-links (Spanish/Russian/Ukrainian) are an equity
     feature for multilingual families and shouldn't be the dimmest text. */
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.85em;
}
.footer-safety-compliance .fsc__lang a {
  font-size: inherit;
}

/* Stack to a single column on narrow viewports. */
@media (max-width: 720px) {
  .footer-safety-compliance {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   Footer — Keep Schools Safe (left column, below contact info)
   ══════════════════════════════════════════════════════════════ */
.footer-safety {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-safety h2 {
  /* Inherits opacity 0.75 from the .footer-contact h2 baseline above. */
  margin: 0 0 0.6rem;
}
.footer-safety p {
  margin: 0 0 0.6rem;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85); /* matches general footer body color */
}
.footer-safety__brand {
  margin-block: 0.5rem 0.75rem;
}
.footer-safety__logo {
  display: block;
  max-width: 180px;
  height: auto;
  /* Transparent-bg logo isn't visible on the dark green footer.
     White card with soft rounded corners + a hint of padding so the
     type has breathing room from the edges. */
  background: #fff;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.footer-safety__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}
.footer-safety__channels li a {
  /* 44px min tap target so emergency reporting buttons are easy to hit
     on a phone. Inline-flex centers the label inside the taller box. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
/* Hover uses gold accent so the pill feedback matches every other footer link */
.footer-safety__channels li a:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.footer-safety__apps,
.footer-safety__flyer {
  font-size: var(--font-size-xs);
  margin: 0 0 0.4rem;
}

.footer-legal {
  background-color: rgba(0,0,0,0.3);
  padding: var(--space-4) var(--space-6);
  text-align: center;
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.65);
}
.footer-legal a {
  color: rgba(255,255,255,0.8);
}
.footer-legal a:hover {
  color: var(--color-on-primary);
}

/* ── Drawer Search ────────────────────────────────────────── */
.drawer-search {
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

/* Hide block title and Drupal's search label — use display:none, NOT
   display:contents (which would leak the text into the flex flow) */
.drawer-search .block-title,
.drawer-search h2,
.drawer-search h3 {
  display: none;
}

/* Make the form a flex row */
.drawer-search form {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

/* Drupal wraps the input in .form-item — make it flex so input fills it */
.drawer-search .form-item,
.drawer-search .js-form-item {
  flex: 1;
  min-width: 0;
  display: flex;
  margin: 0;
}

/* Drupal wraps submit in .form-actions — shrink to fit button */
.drawer-search .form-actions,
.drawer-search .js-form-wrapper {
  flex-shrink: 0;
  display: flex;
  margin: 0;
}

.drawer-search input[type="search"],
.drawer-search input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--color-on-primary);
  font-size: var(--font-size-sm);
}

.drawer-search input[type="search"]::placeholder,
.drawer-search input[type="text"]::placeholder {
  color: rgba(255,255,255,0.55);
  font-style: italic;
}

.drawer-search input[type="search"]:focus,
.drawer-search input[type="text"]:focus {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.16);
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: -1px;
}

/* Icon-only submit — hide text, show magnifier SVG via background-image.
   Scoped under #utility-drawer to outrank Drupal core's default form-button
   styles via specificity (1,2,1 vs core's element/class-only rules) so we
   don't need !important. */
#utility-drawer .drawer-search input[type="submit"],
#utility-drawer .drawer-search button[type="submit"] {
  flex-shrink: 0;
  width: 3rem;
  padding: 0;
  background-color: var(--color-accent-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  border: 1px solid var(--color-accent-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  text-indent: -9999px;
  overflow: hidden;
}

#utility-drawer .drawer-search input[type="submit"]:hover,
#utility-drawer .drawer-search button[type="submit"]:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* ── Mobile Side Panel ────────────────────────────────────── */
/*
 * Left-side slide-in panel for mobile. Contains search, primary nav
 * accordion, and Quick Links accordion. Replaces both the desktop
 * hamburger dropdown and the utility drawer on small screens.
 */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 90vw;
  height: 100dvh;
  background: var(--color-primary);
  color: var(--color-on-primary);
  z-index: var(--z-drawer);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.mobile-menu-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) 0;
  flex-shrink: 0;
}

/* When the widget is absent (anon + no login link case), keep the close
   button right-anchored so the header doesn't collapse to the left. */
.mobile-menu-header:not(:has(.mobile-menu-user-widget)) {
  justify-content: flex-end;
}

.mobile-menu-user-widget {
  display: inline-flex;
  align-items: center;
  min-width: 0;  /* allow name ellipsis */
}

.mobile-menu-close {
  background: none;
  border: 2px solid rgba(255,255,255,0.5);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-xl);
  line-height: 1;
  transition: border-color var(--transition-fast);
}
.mobile-menu-close:hover {
  border-color: var(--color-on-primary);
}
.mobile-menu-close:focus-visible {
  outline: 3px solid var(--color-focus-ring-on-dark);
}

/* Search bar */
.mobile-menu-search {
  padding: var(--space-4);
  flex-shrink: 0;
}

.mobile-search-wrap {
  display: flex;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mobile-search-wrap input[type="search"] {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: rgba(255,255,255,0.12);
  border: none;
  color: var(--color-on-primary);
  font-size: var(--font-size-sm);
}

.mobile-search-wrap input[type="search"]:focus {
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: -2px;
}

.mobile-search-wrap input[type="search"]::placeholder {
  color: rgba(255,255,255,0.55);
}

.mobile-search-wrap button {
  background: rgba(255,255,255,0.15);
  border: none;
  color: var(--color-on-primary);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: background var(--transition-fast);
}
.mobile-search-wrap button:hover {
  background: rgba(255,255,255,0.25);
}

/* Primary nav section — flex-grows to fill space */
.mobile-nav {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* Quick Links accordion — gold, pinned to bottom */
.mobile-quick-links {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
}

.mobile-quick-links-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-relaxed);
  transition: background var(--transition-fast);
}
.mobile-quick-links-toggle:hover {
  background: var(--color-accent-dark);
}
.mobile-quick-links-toggle:focus-visible {
  /* sits on the gold accent — use dark on-accent for >= 3:1 */
  outline: 3px solid var(--color-on-accent);
  outline-offset: -3px;
}

.mobile-accordion-icon {
  font-size: 0.7em;
  transition: transform var(--transition-fast);
}
.mobile-quick-links-toggle[aria-expanded="true"] .mobile-accordion-icon {
  transform: rotate(180deg);
}

.mobile-quick-links-body {
  background: rgba(0,0,0,0.25);
  padding: var(--space-4) var(--space-5);
}

/* ── Mobile Quick Links menu — mirrors desktop drawer treatment ────────────
 * Without these rules the utility-links menu inside .mobile-quick-links-body
 * renders as plain default <a> tags ("only basic text"). Bring it visually
 * in line with the desktop drawer: card-style top items, parent labels as
 * uppercase section headings, indented sub-items with accent border on
 * hover. Single-column instead of two-col since mobile width is constrained
 * (320px panel max).
 */
.mobile-quick-links-body nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Top-level link items (Jobs, Calendar, Skyward, etc.) */
.mobile-quick-links-body nav > ul > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: rgba(255,255,255,0.92);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
.mobile-quick-links-body nav > ul > li > a:hover,
.mobile-quick-links-body nav > ul > li > a:focus-visible {
  background: rgba(255,255,255,0.14);
  border-color: var(--color-accent);
  color: var(--color-on-primary);
}

/* Parent items with submenus (Resources): label as section heading */
.mobile-quick-links-body nav > ul > li:has(> ul) {
  margin-top: var(--space-3);
}
.mobile-quick-links-body nav > ul > li:has(> ul) > a,
.mobile-quick-links-body nav > ul > li:has(> ul) > span {
  display: block;
  width: auto;
  min-height: 0;
  padding: 0 0 var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracked);
  color: var(--color-accent);
  background: none;
  border: none;
  border-radius: 0;
  border-top: 1px solid rgba(255,255,255,0.2);
  cursor: default;
}

/* Sub-menu items (under Resources, etc.) */
.mobile-quick-links-body nav li > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-2);
}
.mobile-quick-links-body nav li > ul a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  color: rgba(255,255,255,0.8);
  font-size: var(--font-size-sm);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
.mobile-quick-links-body nav li > ul a:hover,
.mobile-quick-links-body nav li > ul a:focus-visible {
  background: rgba(255,255,255,0.08);
  border-left-color: var(--color-accent);
  color: var(--color-on-primary);
}

/* ── Mobile contact info card — mirrors desktop drawer styling ─────────────
 * The contact block sits inside .mobile-quick-links-body via .views-element-container.
 * Same field structure as the desktop drawer (views-row / views-field / views-label /
 * field-content), just scoped here instead of to .utility-drawer.
 */
.mobile-quick-links-body .views-element-container {
  margin: var(--space-4) calc(-1 * var(--space-5)) calc(-1 * var(--space-4));
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--color-primary-dark);
  border-top: 3px solid var(--color-accent);
}

/* 2-column grid for short fields; hours and address span full width */
.mobile-quick-links-body .views-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: start;
}

/* Field row — label beside value */
.mobile-quick-links-body .views-field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  min-width: 0;
  overflow: hidden;
}

/* Dim tiny-caps label */
.mobile-quick-links-body .views-label {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

/* Field value */
.mobile-quick-links-body .field-content {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,0.88);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Address — allow wrapping */
.mobile-quick-links-body .views-field-field-sci-address .field-content {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: var(--line-height-base);
}

/* Address — keep label inline; content wraps within its own space */
.mobile-quick-links-body .views-field-field-sci-address {
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Email — span full width so the address fits on one line beside the label */
.mobile-quick-links-body .views-field-field-sci-email {
  grid-column: 1 / -1;
}

/* Address and hours fields span both columns */
.mobile-quick-links-body .views-field-field-sci-address,
.mobile-quick-links-body .views-field-field-sci-school-hours,
.mobile-quick-links-body .views-field-field-sci-office-hours,
.mobile-quick-links-body .views-field-field-sci-er-school-hrs,
.mobile-quick-links-body .views-field-field-sci-er-office-hrs,
.mobile-quick-links-body .views-field-field-sci-summer-hours {
  grid-column: 1 / -1;
}

/* Links */
.mobile-quick-links-body .field-content a {
  color: rgba(255,255,255,0.88);
}
.mobile-quick-links-body .field-content a:hover {
  color: var(--color-accent);
}

/* Staff contacts — full width, grid of names */
.mobile-quick-links-body .views-field-field-sci-staff-contacts {
  grid-column: 1 / -1;
  display: block;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.mobile-quick-links-body .views-field-field-sci-staff-contacts > .views-label {
  display: block;
  margin-bottom: var(--space-2);
}

.mobile-quick-links-body .views-field-field-sci-staff-contacts > .field-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-1) var(--space-3);
  white-space: normal;
  overflow: visible;
}

/* Hidden state (uses HTML hidden attribute — no extra CSS needed) */

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .header-brand-inner {
    padding: var(--space-4);
  }

  .header-nav-inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    gap: var(--space-3);
  }

  .header-brand .site-branding__name a {
    font-size: var(--font-size-2xl);
  }

  /* Hide the gold Quick Links + brand-green Translate panels on mobile — replaced by mobile panel */
  .nav-quick,
  .nav-translate {
    display: none;
  }

  /* Hide the desktop utility drawer and its overlay on mobile */
  .utility-drawer,
  .drawer-overlay {
    display: none;
  }

  /* Collapse news two-column to single column */
  .news-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Collapse kudos to single column — image above text */
  .kudos-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .kudos-grid > img {
    max-width: 200px;
    margin-inline: auto;
  }

  /* Superintendent zone padding tighter on tablet */
  .superintendent-zone {
    padding-block: var(--space-8);
  }
}

@media (max-width: 600px) {
  .site-branding__logo img {
    height: 2.5rem;
  }

  .header-brand .site-branding__name a {
    font-size: var(--font-size-base);
  }

  .hero-zone {
    height: 50vh;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Tighter zone padding on small mobile */
  .news-zone,
  .superintendent-zone,
  .evergreen-zone {
    padding-block: var(--space-8);
  }

  /* Page content less vertical padding on small screens */
  .page-content {
    padding: var(--space-8) var(--space-4);
  }

  /* Zone inner horizontal padding tighter */
  .zone-inner {
    padding-inline: var(--space-4);
  }

  /* Evergreen images — allow narrower on small screens */
  .evergreen-images img {
    width: 160px;
    height: 112px;
    max-width: calc(50% - var(--space-2));
  }

  /* Footer legal always visible — prevent any overflow pushing it off */
  .footer-legal {
    padding: var(--space-3) var(--space-4);
  }
}

/* ══════════════════════════════════════════════════════════════
   School Front Page — News Zone Sections
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Article Detail Page — open article view
   ══════════════════════════════════════════════════════════════ */

/* Article hero: featured image with a title box overlapping its bottom.
   The wrapper carries the 24px (--space-6) side inset so the image is held
   off the page edges, matching the department content gutters. */
.article-hero {
  padding-inline: var(--space-6);
}

.article-hero-image {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
}

.article-hero-image img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

/* Constrained column for article content */
.article-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-10) var(--space-6);
}

.article-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 3px solid var(--color-accent);
}

/* Title box overlapping the hero image (2026-05-26): a centered green box
   holding just the title. translateY(-50%) is relative to the box's OWN
   height, so the box stays centered on the image's bottom edge no matter how
   many lines the title wraps to. With no image it sits normally at the top. */
.article-hero-titlebox {
  position: relative;
  z-index: 1;
  width: 70%;
  margin: 0 auto;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-5, 1.25rem) var(--space-6);
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.article-hero--has-image .article-hero-titlebox {
  transform: translateY(-50%);
}
.article-hero-titlebox .article-title {
  color: #fff;
  margin: 0;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}

/* Meta (date / source) now sits below the box, on the page background, so it
   keeps the default light-background colors — just center it. */
.article-hero .article-meta {
  justify-content: center;
  margin-top: var(--space-2);
}

/* The box is shifted up half its height via translateY, which leaves empty
   flow space beneath it. Pull the date up so it sits just under the box.
   Tuned to clear the box for typical 1–2 line titles; very long titles keep a
   little more space. */
.article-hero--has-image .article-meta {
  margin-top: -1.5rem;
}

@media (max-width: 640px) {
  .article-hero-titlebox {
    width: 90%;
    padding: var(--space-4);
  }
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.article-source {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-mid);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
}

.article-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.article-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  margin: 0;
}

.article-body {
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--color-text);
}

.article-body h2 {
  font-size: var(--font-size-2xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}

.article-body h3 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}

.article-body p {
  margin-bottom: var(--space-5);
}

.article-body ul,
.article-body ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-8);
}

.article-body li {
  margin-bottom: var(--space-2);
}

.article-body a {
  color: var(--color-primary-mid);
}

.article-body a:hover {
  color: var(--color-primary);
}

.article-body img {
  border-radius: var(--radius-sm);
  margin-block: var(--space-4);
  max-width: 100%;
}

/* ── Responsive — tablet ─────────────────────────────────────── */
@media (max-width: 900px) {
  /* Two-column news grid */
  .view-id-school-front-page-feed .view-content,
  .view-id-school_front_page_feed .view-content,
  .view-id-school-highlights .view-content,
  .view-id-school_highlights .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Responsive — mobile ─────────────────────────────────────── */
@media (max-width: 600px) {
  /* Single-column news grid */
  .view-id-school-front-page-feed .view-content,
  .view-id-school_front_page_feed .view-content,
  .view-id-school-highlights .view-content,
  .view-id-school_highlights .view-content {
    grid-template-columns: 1fr;
  }

  /* Remove padding compression for news zones on mobile */
  .view-id-school-principals-zone,
  .view-id-school_principals_zone,
  .view-id-school-front-page-feed,
  .view-id-school_front_page_feed,
  .view-id-district-news-feed,
  .view-id-district_news_feed {
    padding-inline: var(--space-4);
  }

  /* Article detail tighter on mobile */
  .article-inner {
    padding: var(--space-8) var(--space-4);
  }

  .article-title {
    font-size: var(--font-size-2xl);
  }
}

/* ── Reduced motion — WCAG SC 2.3.3 ──────────────────────────
 * Respects the OS/browser "prefer reduced motion" setting.
 * Collapses all transitions and animations to near-instant so
 * users with vestibular disorders aren't affected.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}
/* ── Quick Links Drawer — visual polish ──────────────────────────────────────
   Layered on top of existing layout.css drawer rules. Adds:
   - Smoother open/close transition with fade
   - Arrow indicators on top-level links
   - Better hover state contrast
   - Tighter contact info typography
   - Subtle section dividers between link groups
   ─────────────────────────────────────────────────────────────────────────── */

/* Smoother drawer entrance with slight opacity fade */
.utility-drawer {
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 200ms ease;
  opacity: 0;
}
.utility-drawer.is-open {
  opacity: 1;
}

/* Overlay fade is quicker to feel responsive */
.drawer-overlay {
  transition: opacity 250ms ease;
}

/* ── Top-level link refinements ────────────────────────────────────────────── */
/* Arrow indicator on quick-link items */
.utility-drawer nav > ul > li:not(:has(> ul)) > a::after,
.utility-drawer nav > .menu > li:not(:has(> ul)) > a::after {
  content: '\203A'; /* › */
  margin-left: auto;
  padding-left: var(--space-2);
  font-size: 1.1em;
  opacity: 0.4;
  transition: opacity 150ms ease, transform 150ms ease;
}

.utility-drawer nav > ul > li:not(:has(> ul)) > a:hover::after,
.utility-drawer nav > .menu > li:not(:has(> ul)) > a:hover::after {
  opacity: 0.8;
  transform: translateX(2px);
}

/* Slightly more generous grid gap for breathing room */
.utility-drawer nav > ul,
.utility-drawer nav > .menu {
  gap: var(--space-2) var(--space-3);
}

/* ── Sub-menu link refinements ─────────────────────────────────────────────── */
/* Compact sub-link padding — reduced vertical to cut scrolling */
.utility-drawer nav li > ul a,
.utility-drawer nav li > .menu a {
  padding: var(--space-1) var(--space-2);
}

/* ── Contact info section polish ──────────────────────────────────────────── */
/* Phone number — slightly larger and clickable-looking */
.utility-drawer .views-field-field-sci-phone .field-content {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.utility-drawer .views-field-field-sci-phone .field-content a {
  letter-spacing: var(--ls-snug);
}

/* Hours — slightly more readable line-height */
.utility-drawer .views-field-field-sci-school-hours .field-content,
.utility-drawer .views-field-field-sci-office-hours .field-content,
.utility-drawer .views-field-field-sci-er-school-hrs .field-content,
.utility-drawer .views-field-field-sci-er-office-hrs .field-content,
.utility-drawer .views-field-field-sci-summer-hours .field-content {
  line-height: 1.5;
  white-space: normal;
}

/* ── Social links row — tighter spacing + hover glow ──────────────────────── */
.utility-drawer .views-field-field-sci-facebook,
.utility-drawer .views-field-field-sci-instagram,
.utility-drawer .views-field-field-sci-youtube,
.utility-drawer .views-field-field-sci-twitter,
.utility-drawer .views-field-field-sci-linkedin {
  display: flex;
  align-items: center;
}

.utility-drawer .views-field-field-sci-facebook .field-content a,
.utility-drawer .views-field-field-sci-instagram .field-content a,
.utility-drawer .views-field-field-sci-youtube .field-content a,
.utility-drawer .views-field-field-sci-twitter .field-content a,
.utility-drawer .views-field-field-sci-linkedin .field-content a {
  transition: color 150ms ease;
}

.utility-drawer .views-field-field-sci-facebook .field-content a:hover,
.utility-drawer .views-field-field-sci-instagram .field-content a:hover,
.utility-drawer .views-field-field-sci-youtube .field-content a:hover,
.utility-drawer .views-field-field-sci-twitter .field-content a:hover,
.utility-drawer .views-field-field-sci-linkedin .field-content a:hover {
  color: var(--color-accent);
}

/* ── Drawer title — subtle underline effect ───────────────────────────────── */
.drawer-title {
  position: relative;
  padding-bottom: 2px;
}

.drawer-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}


/* ── Google Translate in-place widget ─────────────────────────
 * The translate dropdown drives Google's translate_a/element.js, which
 * rewrites the live DOM so the visitor never leaves our domain. Google injects
 * its own gray banner + tooltips; suppress all of it so OUR masthead dropdown
 * is the only UI. (translation_system memory documents the behavior.)
 */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.skiptranslate iframe {
  display: none !important;
}
body {
  top: 0 !important; /* the widget nudges <body> down to make room for its banner */
}
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
#goog-gt-tt {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}
#google_translate_element { line-height: 0; }

/* "More languages…" reveals Google's own <select> inline in our dropdown. */
.translate-menu__gadget[hidden] { display: none; }
.translate-menu__gadget {
  padding: var(--space-3) var(--space-5);
}
.translate-menu__gadget #google_translate_element { flex: 1 1 auto; }
.translate-menu__gadget .goog-te-combo {
  width: 100%;
  margin: 0;
  padding: 0.3rem;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

/* ── Mobile drawer + spacing tightening (stakeholder ask 2026-06-02) ───────────
   (1) narrower drawer so it reads as a side panel not full-screen; (2) tighter
   drawer item spacing (less sprawl); (3) smaller mobile page gutters to fill more
   of the window. #mobile-menu prefix raises specificity so the nav overrides win
   regardless of stylesheet order. */
.mobile-menu {
  max-width: 80vw;
}
#mobile-menu .mobile-nav a,
#mobile-menu .mobile-nav > div > nav > ul > li > .mobile-nav-row > a,
#mobile-menu .mobile-nav > div > nav > ul > li > .mobile-nav-row > span,
#mobile-menu .mobile-nav li > span {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
#mobile-menu .mobile-nav li > ul a,
#mobile-menu .mobile-nav li > ul .mobile-nav-row > a,
#mobile-menu .mobile-nav li > ul .mobile-nav-row > span {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
@media (max-width: 600px) {
  .page-content {
    padding-inline: var(--space-3);
  }
}

/* ── Article title revert (2026-06-04): house style = dark text + gold rule,
   no hero image / green title box. Matches .dept-title. ─────────────────── */
.article-header { border-bottom: none; margin-bottom: var(--space-7); }
.article-title {
  color: var(--color-text, #1a1a1a);
  text-align: left;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--color-accent);
}
.article-meta {
  margin-top: 0.85rem;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  color: var(--color-text-muted, #5a5a5a);
  font-size: var(--font-size-sm, 0.875rem);
}
.article-source { font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.03em; }

/* ── Article 2-column layout: cross-district feed rail + content ───────── */
.article-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-9, 2.5rem);
  align-items: start;
}
/* a11y 2026-07-13: .article-aside now FOLLOWS .article-main in the template so
   SR/keyboard users hit the article <h1> before the ~10-link cross-district
   rail. The grid was auto-placing by source order, so pin the columns
   explicitly — otherwise the article body would land in the 300px rail. */
.article-layout > .article-aside { grid-column: 1; grid-row: 1; }
.article-layout > .article-main  { grid-column: 2; grid-row: 1; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  /* Single column: clear the explicit placement, or grid-column:2 would spawn a
     phantom second column. Source order is main-then-aside; order:2 keeps the
     rail below the article. */
  .article-layout > .article-aside,
  .article-layout > .article-main { grid-column: 1; grid-row: auto; }
  .article-aside { order: 2; margin-top: var(--space-8); border-top: 2px solid var(--color-border, #e6ece9); padding-top: var(--space-6); }
}

.article-feed { margin-bottom: var(--space-8, 2rem); }
.article-feed__heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-primary, #01491f);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-accent);
}

/* Compact the teaser cards inside the narrow rail (drop the big thumbnail,
   stack vertically as a tight list). */
.article-aside .news-card--teaser {
  display: block;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border, #e6ece9);
}
.article-aside .news-card--teaser:last-child { border-bottom: none; }
.article-aside .news-card-thumb { display: none; }
.article-aside .news-card-title { font-size: 0.92rem; line-height: 1.3; margin: 0.2rem 0 0; }
.article-aside .news-card-title a { color: var(--color-text, #1a2a20); text-decoration: none; }
.article-aside .news-card-title a:hover { color: var(--color-primary); text-decoration: underline; }
.article-aside .news-card-date { font-size: 0.72rem; color: var(--color-text-muted, #5a5a5a); }

/* ── "Site flag" chip — school name in that school's brand colour ─────── */
.news-card-school {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-primary, #01491f);
  margin-bottom: 0.2rem;
}
.news-card-school--aspire         { background: #732ab0; }
.news-card-school--centennial     { background: #1a1a1a; }
.news-card-school--harrietrowley  { background: #3a6e71; }
.news-card-school--jefferson      { background: #0047b3; }
.news-card-school--laventure      { background: #204934; }
.news-card-school--littlemountain { background: #002207; }
.news-card-school--madison        { background: #9a1b22; }
.news-card-school--mountbaker     { background: #445078; }
.news-card-school--mvhs           { background: #01491f; }
.news-card-school--skagitacademy  { background: #1e2d52; }
.news-card-school--washington     { background: #017a6d; }

/* Site-flag chip hugs its text (was stretching full-width as a flex-column
   item under align-items:stretch). Matches the small inline content flags. */
.news-card-school {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}

/* Match the squared-off radius of the featured/important content tags. */
.news-card-school { border-radius: 3px; padding: 0.18rem 0.5rem; }

/* ── Sidebar feeds: front-page-style light-green panels ──────────────── */
.article-feed {
  background: var(--color-primary-light, #e8f5ed);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.25rem 0.95rem;
  margin-bottom: var(--space-7, 1.75rem);
}
.article-feed__heading { margin-top: 0; }

/* Featured item: restore its left rail + padding so the ★ badge clears the
   date/title (the compact-sidebar padding override had removed it). */
.article-aside .news-card--teaser.news-card--featured {
  padding: 0.6rem 0.5rem 0.65rem 0.95rem;
  margin: 0.3rem 0 0.7rem 0.55rem;
  background: #fff;
  border-left: 3px solid var(--color-accent);
  border-bottom: none;
  border-radius: 0 4px 4px 0;
}

/* ── Vary each sidebar feed panel (mirrors the front page's mix) ───────── */
.article-feed--spotlight    { background: #e8f5ed; border-left-color: var(--color-primary); }   /* light green */
.article-feed--district     { background: #fffbf0; border-left-color: var(--color-accent); }     /* warm cream */
.article-feed--parentsquare { background: #eef3fa; border-left-color: #2563eb; }                  /* light blue */

/* ── Featured item: SAME size/layout as the other teasers, just a small ★
   marker tucked top-right (drops the shrunken white box). ─────────────── */
.article-aside .news-card--teaser.news-card--featured {
  padding: 0.55rem 0;
  margin: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border, #e6ece9);
  border-radius: 0;
}
.article-aside .news-card--teaser.news-card--featured::before {
  content: '★';
  top: 0.55rem;
  left: auto;
  right: 0;
  width: 1.05rem;
  height: 1.05rem;
  box-shadow: none;
}

/* Featured item (feedback #2): just the ★ marker — no left rail, no box, no
   tint. Restores the small star badge (positioned top-right by the rule above)
   and drops the gold left accent that had replaced it. */
.article-aside .news-card--teaser.news-card--featured {
  padding-left: 0;
  border-left: none;
}
.article-aside .news-card--teaser.news-card--featured::before {
  content: '★';
  display: inline-flex;
}

/* ── Article "Print" button ──────────────────────────────────────────────
   Opens the isolated, chrome-free print view (route mvsd_helpers.article_print)
   in a new tab, which auto-fires the print dialog. Shown on the article page;
   never printed itself. Added 2026-06-22 (printing rethink). */
.article-print-link {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem 1rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-primary, #008544);
  background: #fff;
  border: 1.5px solid var(--color-primary, #008544);
  border-radius: 4px;
  text-decoration: none;
}
.article-print-link:hover,
.article-print-link:focus-visible {
  color: #fff;
  background: var(--color-primary, #008544);
}
.article-print-link__icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}
@media print {
  .article-print-link {
    display: none !important;
  }
}


/* ── Mobile: wide data tables scroll within their own box ─────────────────
   A <table> in body content has a large min-content width; on a phone that was
   forcing the whole page wider than the viewport. Below 800px let the table be a
   horizontally-scrollable block so all columns stay reachable without the page
   itself overflowing. Audit 2026-07-10 mobile pass. */
@media (max-width: 800px) {
  .article-body table,
  .text-formatted table,
  .para--text table,
  .field--type-text-long table,
  .paragraph--type--text table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * FOOTER ACCESSIBILITY REMEDIATION — 2026-08-17
 * A footer audit found four WCAG failures affecting all 12 public sites.
 * These fixes are APPENDED rather than edited in place, so they can be
 * reverted by truncating this block if anything looks wrong on cutover
 * morning.
 *
 * ── 1.4.1 Use of Colour ──
 * Footer link text is rgba(255,255,255,.85) — IDENTICAL to the surrounding
 * body text (1.00:1) — and .mvsd-link-anim sets text-decoration:none with
 * background-size:0, so footer links carry NO resting indicator at all.
 * Restore a real underline and drop the animated gradient in this scope so
 * the two treatments do not double up. Hover still shifts colour, which
 * supplies the required second indicator.
 * ═════════════════════════════════════════════════════════════════════════ */
.site-footer {
  /* a real underline replaces the animated gradient within the footer */
  --link-underline-color: transparent;
}
.site-footer .footer-contact a,
.site-footer .footer-compliance a,
.site-footer .footer-safety a,
.site-footer .footer-safety-compliance a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 2.4.7 / 1.4.11 Focus Visible ──
 * Footer links inherited the LIGHT-background focus token
 * (--color-focus-ring #b45309), which computes to 1.04:1 on the washington
 * footer and 1.15:1 on harrietrowley, and under 3:1 on 10 of 12 themes.
 * --color-focus-ring-on-dark already exists and is used in 23 places
 * elsewhere — it was simply never applied here. */
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: 2px;
}

/* ── 1.4.3 Contrast (resting text) ──
 * White at .85 / .75 / .70 opacity fails AA on the two lightest school
 * primaries: washington (#017a6d) computes to 4.28:1 for primary body text,
 * harrietrowley (#3a6e71) fails at every dimmed step. Raising the opacity
 * fixes both WITHOUT touching any brand-colour token — washington body text
 * goes 4.28:1 → 5.27:1, harrietrowley → 5.75:1. */
.site-footer .footer-contact a,
.site-footer .footer-compliance a,
.site-footer .footer-contact .views-field,
.site-footer .footer-contact .field-content a,
.site-footer .footer-safety-compliance .fsc__coordinator,
.site-footer .footer-safety-compliance .fsc__phone {
  color: #fff;
}
.site-footer .footer-contact .views-label {
  color: rgba(255, 255, 255, 0.88);
}
.site-footer .footer-safety-compliance .fsc__lang {
  color: rgba(255, 255, 255, 0.92);
}

/* ── 1.4.3 Contrast (hover) ──
 * Two earlier rules use the RAW --color-accent instead of
 * --color-accent-on-primary and win on specificity, so 7 themes drop below AA
 * on hover. Skagit Academy's four EMERGENCY-REPORTING pills fall to 1.58:1 —
 * effectively invisible at the moment somebody needs them. The 2026-07-13
 * sweep introduced --color-accent-on-primary for exactly this case; these two
 * rules were missed. */
.site-footer .footer-contact .field-content a:hover {
  color: var(--color-accent-on-primary);
}
.site-footer .footer-safety__channels li a:hover {
  border-color: var(--color-accent-on-primary);
  color: var(--color-accent-on-primary);
}