/* School Alive interface palette. HAMSTER, house, level and status colors are
   independent content colors and must not be remapped by this stylesheet. */
html:root {
  --sa-brand-red:#c90000;
  --sa-brand-text:var(--sa-brand-red);
  --sa-paper:#fff;
  --sa-surface:#fff;
  --sa-soft:#f5f5f5;
  --sa-ink:#000;
  --sa-muted:#454545;
  --sa-line:#d4d4d4;
  --sa-red:var(--sa-brand-red);
  --sa-brand-rule:var(--sa-brand-red);
  --sa-accent-ink:var(--sa-brand-text);
  --sa-accent-on-dark:#fff;
  --sa-divider:var(--sa-brand-red);
  --sa-red-hover:var(--sa-ink);
  --sa-red-ring:rgb(201 0 0 / 12%);
  --sa-accent-soft:rgb(201 0 0 / 5%);
  --sa-sage:var(--sa-soft);
  --sa-focus:var(--sa-ink);
  --sa-on-brand:#fff;
  --sa-hover-bg:#000;
  --sa-hover-ink:#fff;
}
html:root[data-theme=dark] {
  --sa-paper:#000;
  --sa-surface:#181818;
  --sa-soft:#242424;
  --sa-ink:#fff;
  --sa-muted:#d0d0d0;
  --sa-line:#525252;
  --sa-accent-ink:var(--sa-accent-on-dark);
  --sa-accent-soft:rgb(201 0 0 / 12%);
  --sa-hover-bg:#fff;
  --sa-hover-ink:#000;
}
/* One red matches “Watch School Alive in Action.” White text on red fills;
   white accent type on dark surfaces avoids introducing another red shade. */
html:root .sa-logo img {filter:url("/schoolalive-light/assets/brand-red-filter.svg#brand-red")}
html:root[data-theme=dark] .sa-logo img {filter:url(#sa-logo-on-dark) url("/schoolalive-light/assets/brand-red-filter.svg#brand-red")}
html:root :is(.wp-block-button__link,.sa-button,.sa-search-field button,.gala-button) {
  background:var(--sa-red);border-color:var(--sa-red);color:var(--sa-on-brand);
}
html:root :is(.is-style-outline .wp-block-button__link,.gala-button-outline) {
  background:transparent;border-color:var(--sa-ink);color:var(--sa-ink);
}
html:root .sa-gala-page .gala-button {background:var(--sa-red);border-color:var(--sa-red);color:var(--sa-on-brand)}
html:root .sa-gala-page .gala-button-outline {background:transparent;border-color:var(--sa-ink);color:var(--sa-ink)}
/* These sections remain dark in either theme, including their hover controls. */
html:root :is(.sa-gala,.sa-video-hero,.sa-inner-hero,.sa-system-roof,.sa-footer) {
  --sa-accent-ink:var(--sa-accent-on-dark);
  --sa-hover-bg:#fff;--sa-hover-ink:#000;--sa-focus:#fff;
}
html:root :is(.sa-video-hero,.sa-inner-hero) .is-style-outline .wp-block-button__link {
  color:#fff;border-color:#fff;background:transparent;
}
html:root .sa-gala .wp-block-button__link {
  color:#000;border-color:#fff;background:#fff;
}
html:root .sa-gala {--sa-hover-bg:#e6e6e6}
html:root .sa-gala .sa-gala-info .wp-block-button__link {
  color:#fff;border-color:#fff;background:transparent;
}
html:root .sa-gala .wp-block-button__link:not(:disabled):hover {
  color:#000;background:#e6e6e6;border-color:#e6e6e6;
}
html:root .sa-support {color:#fff;--sa-hover-bg:#000;--sa-hover-ink:#fff}
html:root .sa-support :is(h2,p){color:#fff}
html:root .sa-support .is-style-outline .wp-block-button__link {background:#fff;color:#000;border-color:#fff}
/* Shared controls, including page-specific resources, calendar and navigation. */
html:root :is(.sa-series-button,.sa-series-back,.vs-button,.ml-button,.sa-page-jumps>a,
 .sa-calendar-controls button,.ml-carousel-arrow,.sa-gallery-controls button,
 .sa-photo-controls button,.sa-bio-gallery-controls button,.sa-back-to-top,
 .sa-search-toggle,.sa-settings>summary,.sa-mobile-toggle) {
  color:var(--sa-ink);background:var(--sa-surface);border-color:var(--sa-line);
}
html:root :is(.vs-page,.ml-page) .sa-series-primary {
  background:var(--sa-red);border-color:var(--sa-red);color:var(--sa-on-brand);
}
html:root :is(.vs-page,.ml-page) :is(.vs-button-primary,.ml-button-primary) {
  background:var(--sa-red);border-color:var(--sa-red);color:var(--sa-on-brand)!important;
}
html:root .ml-heading-compact .ml-eyebrow {color:var(--sa-accent-ink)}
html:root .ml-page :is(.ml-badge b,.ml-week b,.ml-step-number),
html:root .vs-page .vs-step-number {color:#000}
html:root :is(.wp-block-button__link,.is-style-outline .wp-block-button__link,.sa-button,.sa-search-field button,.sa-gala-page .gala-button,
 .sa-series-button,.sa-series-back,.vs-button,.ml-button,.sa-page-jumps>a,
 .sa-calendar-controls button,.ml-carousel-arrow,.sa-gallery-controls button,
 .sa-photo-controls button,.sa-bio-gallery-controls button,.sa-back-to-top,
 .sa-search-toggle,.sa-settings>summary,.sa-mobile-toggle):not(:disabled):not([aria-disabled=true]):is(:hover,:focus-visible) {
  background:var(--sa-hover-bg);border-color:var(--sa-hover-bg);color:var(--sa-hover-ink)!important;filter:none;
}
html:root :is(.sa-nav-group>summary,.sa-nav-direct,.sa-dropdown a,
 .sa-compact-details>summary,.sa-identity-statement>summary,.sa-identity-story-more>summary,
 .sa-discipline>summary,.sa-system-layer>summary,.sa-gps-card>summary,.sa-passion-disclosure>summary):is(:hover,:focus-visible) {
  color:var(--sa-ink);background:var(--sa-soft);
}
html:root .sa-nav-group>summary {border-color:transparent}
html:root :is(a,button,input,select,textarea,summary):focus-visible {
  outline:3px solid var(--sa-focus);outline-offset:4px;
}
html:root :is(button,a)[aria-disabled=true],html:root button:disabled {
  cursor:default;opacity:.45;
}
html:root :is(.sa-settings input,.sa-availability-check input) {accent-color:var(--sa-accent-ink)}
/* Match the ordinary reading pages in both themes; these formerly retained
   independent blue-gray text, warm paper and white-only backgrounds. */
html:root .vs-page {
  --vs-red:var(--sa-accent-ink);--vs-ink:var(--sa-ink);--vs-muted:var(--sa-muted);
  --vs-paper:var(--sa-soft);--vs-line:var(--sa-line);
  color:var(--sa-ink);background:var(--sa-paper);
}
html:root .cp-page {
  --cp-red:var(--sa-accent-ink);--cp-ink:var(--sa-ink);--cp-muted:var(--sa-muted);
  --cp-paper:var(--sa-soft);--cp-line:var(--sa-line);
  color:var(--sa-ink);background:var(--sa-paper);
}
html:root .ml-page {--ml-muted:var(--sa-muted)}
html:root :is(.vs-question,.vs-vocab,.vs-main-verse,.vs-action,.cp-note,.cp-contact) {background:var(--sa-soft)}
html:root :is(.vs-page,.cp-page) :is(h1,h2,h3,p,blockquote,figcaption,dt,dd) {color:var(--sa-ink)}
html:root :is(.vs-page .vs-kicker,.cp-page .cp-eyebrow,.cp-translation-code) {color:var(--sa-accent-ink)}
html:root .vs-translation-controls select {background:var(--sa-surface);color:var(--sa-ink);border-color:var(--sa-line)}
html:root .sa-gala-page {--gala-accent:var(--sa-accent-ink);--gala-rule:var(--sa-line);color:var(--sa-ink)}
html:root .gala-logistics {background:#000;border-color:var(--sa-red)}
html:root .gala-logistics h2 {color:#fff}
html:root :is(.gala-general,.gala-special-thanks,.gala-archive-note) {border-color:var(--sa-red)}
html:root :is(.gala-special-thanks,.gala-archive-note,.gala-next-year) {background:var(--sa-soft);color:var(--sa-ink)}
html:root .sa-calendar-event {background:var(--sa-accent-soft);color:var(--sa-ink)}
html:root .sa-calendar-day.is-today .sa-calendar-number {color:var(--sa-on-brand);background:var(--sa-red)}
html:root .sa-governance-choice[data-selected=true] .sa-governance-dot {background:var(--sa-red);border-color:var(--sa-red)}
html:root .sa-governance-choice[data-selected=true] .sa-governance-dot::after {border-color:var(--sa-on-brand)}
html:root :is(.sa-choice-card,.sa-esa-card) {border-top-color:var(--sa-red)}
html:root .sa-tuition-error {border-left-color:var(--sa-red)}
html:root .sa-tuition-section .sa-monthly-result {background:var(--sa-red);color:var(--sa-on-brand)}
/* The footer is always black; its text and thin rule must not inherit light-mode ink. */
html:root .sa-footer {--sa-ink:#fff;--sa-muted:#fff;--sa-line:#525252;background:#000}
html:root .sa-footer :is(p,a,li,small,h3) {color:#fff}
@media(prefers-reduced-motion:reduce){html:root :is(a,button,summary){transition:none}}
@media print {
  html:root,html:root[data-theme=dark] {--sa-paper:#fff;--sa-surface:#fff;--sa-soft:#f5f5f5;--sa-ink:#000;--sa-muted:#454545;--sa-line:#d4d4d4;--sa-accent-ink:var(--sa-brand-text)}
}
@media(forced-colors:active) {
  html:root,html:root[data-theme=dark] {--sa-paper:Canvas;--sa-surface:Canvas;--sa-soft:Canvas;--sa-ink:CanvasText;--sa-muted:CanvasText;--sa-line:CanvasText;--sa-red:Highlight;--sa-accent-ink:LinkText;--sa-focus:Highlight;--sa-on-brand:HighlightText;--sa-hover-bg:Highlight;--sa-hover-ink:HighlightText}
}

/* Floating controls must not inherit the dark footer's white ink on white paper. */
html:root .sa-back-to-top{--sa-ink:#000;--sa-surface:#fff;--sa-line:#555;--sa-hover-bg:#000;--sa-hover-ink:#fff}
html:root[data-theme=dark] .sa-back-to-top{--sa-ink:#fff;--sa-surface:#181818;--sa-line:#aaa;--sa-hover-bg:#fff;--sa-hover-ink:#000}
html:root .sa-back-to-top svg{width:24px;height:24px;flex:none;stroke:currentColor;fill:none}
@media(forced-colors:active){html:root .sa-back-to-top{--sa-ink:ButtonText;--sa-surface:ButtonFace;--sa-line:ButtonText;--sa-hover-bg:Highlight;--sa-hover-ink:HighlightText}}