.school-system-switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.5rem;padding:1rem 1.1rem;background:#fff;border:1px solid #dfd3bb;border-radius:16px;box-shadow:0 10px 28px rgba(66,29,102,.06)}
.school-system-buttons{display:flex;gap:.5rem;flex-wrap:wrap}
.school-system-button{border:2px solid #d7c9e2;background:#fff;color:var(--ink);border-radius:99px;padding:.72rem 1.05rem;font:inherit;font-weight:850;cursor:pointer}
.school-system-button.active{background:var(--purple);border-color:var(--purple);color:#fff}
.school-system-button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.quick-cards-zion{grid-template-columns:repeat(2,minmax(0,1fr))}
[hidden]{display:none!important}

/* Keep the history section aligned with the active school-system selector. */
.school-history-district23{display:block}
.school-history-zion{display:none}
body:has(.school-system-button[data-system="zion"].active) .school-history-district23{display:none!important}
body:has(.school-system-button[data-system="zion"].active) .school-history-zion[hidden]{display:block!important}

/* Keep both school marks in the same visual frame. */
.school-logo{width:280px;height:210px;max-width:100%;max-height:none;padding:0;background:transparent;object-fit:contain;object-position:center;box-shadow:0 12px 30px rgba(0,0,0,.15)}

/* Zion Lutheran School branding. IESA lists Mt. Pulaski Zion's school colors as red and white.
   The active school-system selector drives the theme so direct links such as ?system=zion
   and in-page switching remain synchronized. */
html:has(.school-system-button[data-system="zion"].active){--purple:#a51f26;--purple-2:#c52b33;--purple-soft:#f8e9ea;--gold:#202124;--cream:#fafafa;--paper:#fff;--line:#dedede;--muted:#626262;background:#a51f26}
body:has(.school-system-button[data-system="zion"].active) .school-header{background:linear-gradient(120deg,#751419 0%,#a51f26 58%,#c52b33 100%);border-bottom-color:#fff}
body:has(.school-system-button[data-system="zion"].active) .school-header .eyebrow{color:#fff}
body:has(.school-system-button[data-system="zion"].active) .school-logo{display:none}
body:has(.school-system-button[data-system="zion"].active) .school-identity::after{content:"";justify-self:end;display:block;width:280px;height:210px;max-width:100%;background:transparent url('../img/Zion_school_and_church_logo.jpg') center/contain no-repeat;box-shadow:0 12px 30px rgba(0,0,0,.15)}
body:has(.school-system-button[data-system="zion"].active) .school-nav a[aria-current="page"]{color:#fff;border-color:#fff}
body:has(.school-system-button[data-system="zion"].active) .school-system-button.active,body:has(.school-system-button[data-system="zion"].active) .school-filter-button.active,body:has(.school-system-button[data-system="zion"].active) .school-view-button.active,body:has(.school-system-button[data-system="zion"].active) .today-button{background:#a51f26;border-color:#a51f26;color:#fff}
body:has(.school-system-button[data-system="zion"].active) .school-system-button:focus-visible,body:has(.school-system-button[data-system="zion"].active) .school-filter-button:focus-visible,body:has(.school-system-button[data-system="zion"].active) .school-view-button:focus-visible,body:has(.school-system-button[data-system="zion"].active) .today-button:focus-visible,body:has(.school-system-button[data-system="zion"].active) .period-button:focus-visible{outline-color:#202124}
body:has(.school-system-button[data-system="zion"].active) .quick-card{border-top-color:#a51f26;box-shadow:0 10px 28px rgba(165,31,38,.08)}
body:has(.school-system-button[data-system="zion"].active) .quick-card-gold{border-top-color:#202124;background:#fafafa}
body:has(.school-system-button[data-system="zion"].active) .quick-card-kicker{color:#7c252a}
body:has(.school-system-button[data-system="zion"].active) .school-controls{box-shadow:0 10px 28px rgba(165,31,38,.07)}
body:has(.school-system-button[data-system="zion"].active) .period-bar{background:#f8e9ea;border-color:#e4c1c4}
body:has(.school-system-button[data-system="zion"].active) .period-button{color:#a51f26;border-color:#d8aaad}
body:has(.school-system-button[data-system="zion"].active) .school-day-header{background:#fbf0f1;border-bottom-color:#a51f26}
body:has(.school-system-button[data-system="zion"].active) .school-event-card{border-left-color:#a51f26}
body:has(.school-system-button[data-system="zion"].active) .school-event-time{color:#a51f26}
body:has(.school-system-button[data-system="zion"].active) .school-event-school,body:has(.school-system-button[data-system="zion"].active) .school-calendar-event{background:#f8e9ea;color:#86191f}
body:has(.school-system-button[data-system="zion"].active) .school-weekdays{background:#f8e9ea;border-bottom-color:#e4c1c4;color:#6f2025}
body:has(.school-system-button[data-system="zion"].active) .school-calendar-day.is-today{background:#fff5f5;box-shadow:inset 0 0 0 3px #a51f26}
body:has(.school-system-button[data-system="zion"].active) .school-calendar-day.is-selected{box-shadow:inset 0 0 0 3px #a51f26}
body:has(.school-system-button[data-system="zion"].active) .school-status{border-left-color:#a51f26}
body:has(.school-system-button[data-system="zion"].active) footer{background:#8b191f}

html[data-theme="dark"] .school-system-switch,body.theme-dark .school-system-switch{background:#24182f;border-color:#493754;color:#f9f5fb}
html[data-theme="dark"] .school-system-button,body.theme-dark .school-system-button{background:#24182f;color:#f9f5fb;border-color:#644e73}
html[data-theme="dark"] .school-system-button.active,body.theme-dark .school-system-button.active{background:#74469a;border-color:#9b74bb}

html[data-theme="dark"]:has(.school-system-button[data-system="zion"].active),body.theme-dark:has(.school-system-button[data-system="zion"].active){--ink:#f8f8f8;--cream:#171717;--paper:#232323;--line:#4b4b4b;--muted:#d0d0d0}
html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-system-switch,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-system-switch{background:#232323;border-color:#4b4b4b;color:#f8f8f8}
html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-system-button,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-system-button{background:#232323;color:#f8f8f8;border-color:#666}
html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-system-button.active,html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-filter-button.active,html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-view-button.active,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-system-button.active,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-filter-button.active,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-view-button.active{background:#a51f26;border-color:#d64b52;color:#fff}
html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .period-bar,body.theme-dark:has(.school-system-button[data-system="zion"].active) .period-bar{background:#2e2021;border-color:#654044}
html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-day-header,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-day-header{background:#302021;border-bottom-color:#c52b33}
html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-event-school,html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-calendar-event,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-event-school,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-calendar-event{background:#5a2327;color:#fff}
html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-weekdays,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-weekdays{background:#302021;color:#f2d9da;border-color:#654044}
html[data-theme="dark"] body:has(.school-system-button[data-system="zion"].active) .school-calendar-day.is-today,body.theme-dark:has(.school-system-button[data-system="zion"].active) .school-calendar-day.is-today{background:#321f21}

@media(max-width:900px){.school-logo{justify-self:start;width:220px;height:180px}body:has(.school-system-button[data-system="zion"].active) .school-identity::after{justify-self:start;width:220px;height:180px;max-width:60vw}}
@media(max-width:700px){.school-system-switch{align-items:flex-start;flex-direction:column}.school-system-buttons{display:grid;grid-template-columns:1fr 1fr;width:100%}.school-system-button{width:100%}.quick-cards-zion{grid-template-columns:1fr}}