/* Public school pages share preferences with the signed-in portals.
   Keep photographs in their original colors; only interface colors change. */
body[data-site="school"] {
  --paper: var(--a11y-bg);
  --ink: var(--a11y-text);
  --muted: var(--a11y-muted);
  --red: var(--a11y-accent);
  --line: var(--a11y-border);
  --sage: #e6eddf;
  --peach: #f5e5da;
  --lavender: #eae7f2;
  --school-section-bg: #eeefe8;
  --school-sticker-bg: #e5ebae;
  --school-inverse-bg: #1d2b25;
  --school-inverse-text: #f8f7f2;
  --school-inverse-muted: #c0c9c2;
  --school-inverse-accent: #d6dfa6;
  --school-inverse-border: #6f8070;
  background: var(--paper);
  color: var(--ink);
}

/* Named pathways, headings, and initials remain visible in every palette.
   These colors supplement their labels rather than replacing them. */
html:is([data-theme="dark"], [data-color-vision="protan"], [data-color-vision="deutan"], [data-color-vision="tritan"], [data-color-vision="mono"], [data-contrast="more"]) body[data-site="school"] {
  --sage: var(--a11y-success-soft);
  --peach: var(--a11y-warning-soft);
  --lavender: var(--a11y-info-soft);
  --school-section-bg: var(--a11y-surface-alt);
  --school-sticker-bg: var(--a11y-warning-soft);
  --school-inverse-bg: var(--a11y-text);
  --school-inverse-text: var(--a11y-bg);
  --school-inverse-muted: var(--a11y-bg);
  --school-inverse-accent: var(--a11y-bg);
  --school-inverse-border: var(--a11y-bg);
}

html[data-theme="dark"] body[data-site="school"] {
  --school-inverse-bg: var(--a11y-surface-alt);
  --school-inverse-text: var(--a11y-text);
  --school-inverse-muted: var(--a11y-muted);
  --school-inverse-accent: var(--a11y-accent);
  --school-inverse-border: var(--a11y-border);
}

body[data-site="school"] .school-login-notice {
  background: var(--a11y-danger-soft);
  border-color: var(--a11y-danger);
}

body[data-site="school"] .button-red {
  background: var(--a11y-accent);
  color: var(--a11y-on-accent);
}

/* An outline and underline provide a hover cue without weakening contrast. */
body[data-site="school"] .button-red:hover {
  background: var(--a11y-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body[data-site="school"] .button-dark,
body[data-site="school"] .skip-link {
  background: var(--ink);
  color: var(--paper);
}

body[data-site="school"] .button-dark:hover {
  background: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body[data-site="school"] .school-nav a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

body[data-site="school"] .muted-heading {
  color: var(--muted);
}

body[data-site="school"] .pathways-section,
body[data-site="school"] .resource-card:hover {
  background: var(--school-section-bg);
}

body[data-site="school"] .pathway-card,
body[data-site="school"] .pathway-tags li,
body[data-site="school"] .pathway-body details {
  border-color: var(--line);
}

body[data-site="school"] .hero-sticker {
  background: var(--school-sticker-bg);
  color: var(--ink);
}

body[data-site="school"] .hero-spark {
  color: var(--school-inverse-accent);
}

/* These sections use deliberately paired foreground and background colors.
   Changing --ink alone would otherwise leave light text on a light surface. */
body[data-site="school"] .school-topline,
body[data-site="school"] .life-section {
  background: var(--school-inverse-bg);
  color: var(--school-inverse-text);
}

body[data-site="school"] .school-topline a,
body[data-site="school"] .life-copy .eyebrow,
body[data-site="school"] .life-copy h2 > span,
body[data-site="school"] .life-links a > span:last-child {
  color: var(--school-inverse-accent);
}

body[data-site="school"] .life-copy > p:not(.eyebrow),
body[data-site="school"] .life-links small {
  color: var(--school-inverse-muted);
}

body[data-site="school"] .life-links a {
  border-color: var(--school-inverse-border);
}

body[data-site="school"] .visit-section {
  background: var(--a11y-accent);
  color: var(--a11y-on-accent);
}

body[data-site="school"] .visit-section .eyebrow,
body[data-site="school"] .visit-section address p,
body[data-site="school"] .visit-section address > span {
  color: var(--a11y-on-accent);
}

body[data-site="school"] .visit-section address {
  border-color: var(--a11y-on-accent);
}

body[data-site="school"] .directory-controls input,
body[data-site="school"] .directory-controls select,
body[data-site="school"] .person-card {
  background: var(--a11y-surface);
  color: var(--ink);
  border-color: var(--line);
}

body[data-site="school"] .directory-controls input::placeholder {
  color: var(--muted);
  opacity: 1;
}

body[data-site="school"] .directory-reset {
  color: var(--ink);
}

body[data-site="school"] .person-card a {
  color: var(--ink);
}

body[data-site="school"] :is(.school-topline, .life-section, .visit-section) :focus-visible {
  outline-color: currentColor;
}

html[data-contrast="more"] body[data-site="school"] :is(.school-header, .pathway-card, .person-card, .resource-grid, .directory-controls input, .directory-controls select) {
  border-width: 2px;
}

html[data-contrast="more"] body[data-site="school"] .photo-label {
  background: #000;
  color: #fff;
  border-color: #fff;
}

html[data-contrast="more"] body[data-site="school"] .hero-photo-caption > span:first-child {
  background: #000;
  color: #fff;
  padding: 8px 12px;
}

html[data-motion="reduce"] body[data-site="school"] .school-button:hover,
html[data-motion="reduce"] body[data-site="school"] .pathway-card:hover .pathway-photo img {
  transform: none;
}