/* ── Shared brand-highlight layer ─────────────────────────────────────────────
 * Every cross-site "brand color" element references var(--color-brand) — the
 * per-site highlight color set in each subtheme's theme.css (default in
 * base.css). Swapping a single site's brand color = changing that one line.
 *
 * To add a NEW brand-colored element across ALL sites, add ONE rule here using
 * var(--color-brand) (or var(--color-brand-deep) for a darker companion).
 *
 * Contrast: decorative accents (lines/edges) only need 3:1. White-on-brand
 * elements (back-to-top, translate panel) need each site's --color-brand to
 * clear ~4.5:1 vs white — keep brand colors dark enough (all current ones do).
 * District-only treatments (header dot motif, the gold-on-light-green two-tone
 * cards) stay in mvsd_www/css/theme.css. */

/* ── Content accent lines (highlight edges, featured/primary card borders) ── */
.para--accent--top    { border-top-color: var(--color-content-accent); }
.para--accent--bottom { border-bottom-color: var(--color-content-accent); }
.para--accent--both   { border-top-color: var(--color-content-accent); border-bottom-color: var(--color-content-accent); }
.para--accent--left   { border-left-color: var(--color-content-accent); }
.para-columns__right--emp-pull-out { border-block-color: var(--color-content-accent); }
.para-columns__left--color-brand,
.para-columns__right--color-brand {
  border-left-color: var(--color-content-accent);
  background: color-mix(in srgb, var(--color-content-accent) 6%, transparent);
}
.para-calendar-highlight { border-left-color: var(--color-content-accent); }
.news-card--featured { border-color: color-mix(in srgb, var(--color-content-accent) 18%, transparent); }
[id$="-student-section-primary"] .news-card--primary { border-color: color-mix(in srgb, var(--color-content-accent) 12%, transparent); }
.newsletter-highlight-card__pdf:hover { border-color: var(--color-content-accent); }
.newsletter-row__action:hover { border-color: var(--color-content-accent); }

/* ── News-card headline underline (the gradient IS the line color) ──
 * Main feed (primary) + featured get the bold 4px; spotlight teasers get the
 * thinner shared underline thickness. */
.news-card--primary .news-card-title a,
.news-card--teaser .news-card-title a,
.news-card--featured .news-card-title a {
  background-image: linear-gradient(var(--color-brand), var(--color-brand));
  background-size: 0 4px;
}
.news-card--primary .news-card-title a:hover,
.news-card--primary:focus-within .news-card-title a,
.news-card--teaser .news-card-title a:hover,
.news-card--teaser:focus-within .news-card-title a,
.news-card--featured .news-card-title a:hover,
.news-card--featured:focus-within .news-card-title a {
  background-size: 100% 4px;
}
.news-card--teaser .news-card-title a {
  background-size: 0 var(--link-underline-thickness);
}
.news-card--teaser .news-card-title a:hover,
.news-card--teaser:focus-within .news-card-title a {
  background-size: 100% var(--link-underline-thickness);
}

/* ── Masthead Translate panel wedge ── */
.nav-translate::before { background: var(--color-brand); }

/* ── Back-to-top button (white chevron on brand; hover darkens) ── */
.mvsd-back-to-top { background: var(--color-brand); }
.mvsd-back-to-top:hover,
.mvsd-back-to-top:focus-visible { background: var(--color-brand-deep); }

/* ── Front-page mission heading ── */
.mission-panel__title { color: var(--color-brand); }

/* ─────────────────────────────────────────────────────────────────────────────
 * Rolled out to ALL sites 2026-06-07 (were district-only). Each uses the site's
 * own var(--color-brand) + var(--color-brand-deep). Text always sits on the DEEP
 * companion (= --color-primary, dark), so contrast matches the base treatment.
 * ───────────────────────────────────────────────────────────────────────────── */

/* Header right-side dot-motif: brand-color dots fading in over the dark masthead
   toward the far right. Decorative (.header-brand is in the shared page template
   on every site). Tunable: band width (390px), dot size/spacing (radius + 24px
   grid), fade-in point (mask 60%). */
.header-brand { position: relative; }
.header-brand-inner { position: relative; z-index: 1; }
.header-brand::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 390px;
  background-image: radial-gradient(circle, var(--color-brand) 3.5px, transparent 4.5px);
  background-position: center;
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 60%);
          mask-image: linear-gradient(to right, transparent, #000 60%);
  pointer-events: none;
}

/* Upcoming Events date card — two-tone: brand-color body (white DATE) + a deep
   footer band carrying the gold TIME (gold needs the dark band to pass AA). */
.events-list__date-col {
  background: var(--color-brand);
  padding: 0;                   /* children own padding so the band bleeds edge-to-edge */
  overflow: hidden;             /* clip the deep band to the 6px radius */
}
.events-list__date {
  padding: 0.42rem 0.25rem 0.34rem;
  color: #fff;
}
.events-list__time {
  margin-top: 0;
  padding: 0.26rem 0.25rem 0.32rem;
  background: var(--color-brand-deep);
  color: var(--color-accent-on-primary);
}
.events-list__time:empty { display: none; padding: 0; }

/* News-card drawer peek — two-tone band: the 18px peek that sticks out the cover
   is the brand color; the content area (where white text sits) is the deep
   companion. Non-featured primary cards only. */
.news-card--primary:not(.news-card--featured) .news-card-overlay__body {
  background: linear-gradient(to right, var(--color-brand) 18px, var(--color-brand-deep) 18px);
}