/*
 * School-template sites (layouts.schools): the schools, dlgi, odel and gs.
 *
 * These pages use the main site's design system (bootstrap.min, style, responsive and
 * main-site.css: the Onest typeface, navy/cyan tokens, default-btn, section-title,
 * section-banner, showcase-card, main-footer). This file only adds what school pages need
 * on top of it:
 *   - each school's own colour on buttons, links and accents. --color-primary-strong is
 *     injected per school by layouts/base.blade.php (App\Support\Schools\ThemePalette) and is
 *     always readable on white; it falls back to Daystar cyan-700.
 *   - the school header, home hero, filters, prose and a few school-only components.
 * Loaded last, after the main stylesheets.
 */

:root {
    --school-colour: var(--color-primary-strong, var(--color-cyan-700));
    /* School colour blended towards navy: white text on it is always at least 7:1. */
    --school-deep: var(--color-primary-deep, var(--color-navy-900));
    /* The raw school colour, for decorative edges and rules only (never behind text). */
    --school-accent: var(--color-primary, var(--color-cyan-500));
    /* A lighter accent for rules on the deep-coloured footer, where the raw colour would vanish. */
    --school-accent-light: color-mix(in srgb, var(--school-accent) 55%, #fff);
    /* Footer link colour: mostly white with a hint of the school colour. */
    --school-footer-link: color-mix(in srgb, var(--school-accent) 22%, #fff);
    /* Navy on the left (where text sits) blending into the school colour over the photo. */
    --school-overlay: linear-gradient(90deg,
        rgb(0 33 71 / 92%) 0%,
        color-mix(in srgb, var(--school-deep) 80%, transparent) 50%,
        color-mix(in srgb, var(--school-deep) 35%, transparent) 100%);
    --school-colour-soft: color-mix(in srgb, var(--school-colour) 10%, #fff);
    --school-gutter: clamp(56px, 7vw, 96px);
}

/* ---------- School colour on shared components ---------- */
.school-header .default-btn,
.school-main .default-btn {
    background: var(--school-colour);
    border-color: var(--school-colour);
    color: #fff;
}

.school-header .default-btn:hover,
.school-header .default-btn:focus-visible,
.school-main .default-btn:hover,
.school-main .default-btn:focus-visible {
    background: var(--color-navy-900);
    border-color: var(--color-navy-900);
    color: #fff;
}

.school-main .default-btn.outline {
    background: transparent;
    border-color: var(--school-colour);
    color: var(--school-colour);
}

.school-main .default-btn.outline:hover,
.school-main .default-btn.outline:focus-visible {
    background: var(--school-colour);
    color: #fff;
}

.school-main .default-btn.secondary {
    background: #fff;
    border-color: #fff;
    color: var(--color-navy-900);
}

.school-main .default-btn.secondary:hover,
.school-main .default-btn.secondary:focus-visible {
    background: var(--color-navy-900);
    border-color: var(--color-navy-900);
    color: #fff;
}

.school-main a:not(.default-btn):not(.showcase-card__link) {
    color: var(--school-colour);
}

.school-main a:not(.default-btn):not(.showcase-card__link):hover {
    color: var(--color-navy-900);
}

.school-main .showcase-card h3 {
    transition: color 0.2s ease;
}

.school-main .showcase-card__link:hover h3,
.school-main .showcase-card__link:focus-visible h3 {
    color: var(--school-colour);
}

.school-main .showcase-card__meta,
.school-main .showcase-card__eyebrow {
    color: var(--school-colour);
}

.school-main :focus-visible {
    outline: 3px solid var(--color-cyan-700);
    outline-offset: 3px;
}

/* ---------- Skip link ---------- */
.school-skip-link {
    position: absolute;
    z-index: 1000;
    top: 8px;
    left: 8px;
    padding: 12px 18px;
    background: #fff;
    color: var(--color-navy-900);
    font-weight: 600;
}

/* ---------- Header ---------- */
.school-header {
    position: relative;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}

.school-utility {
    background: var(--school-deep);
    color: #fff;
    font-size: 13px;
}

.school-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
}

.school-utility__name {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.school-utility__links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.school-utility a,
.school-utility summary {
    color: #fff;
}

.school-utility a:hover {
    color: var(--color-cyan-500);
}

.school-header .compact-site-navigation > a:not(.default-btn),
.school-nav-group summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    color: var(--color-navy-900);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}

.school-nav-group summary::-webkit-details-marker {
    display: none;
}

/* The main site's growing underline, in the school's colour. */
.school-header .compact-site-navigation > a:not(.default-btn)::after,
.school-nav-group summary::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    background: var(--school-colour);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.school-header .compact-site-navigation > a:hover::after,
.school-header .compact-site-navigation > a[aria-current]::after,
.school-nav-group summary:hover::after,
.school-nav-group.is-current summary::after {
    transform: scaleX(1);
}

.school-header .compact-site-navigation > a[aria-current],
.school-nav-group.is-current summary {
    font-weight: 600;
    text-decoration: none;
}

.school-nav-group {
    position: relative;
}

.school-nav-group summary i {
    font-size: 17px;
    transition: transform 160ms ease-out;
}

.school-nav-group[open] summary i {
    transform: rotate(180deg);
}

.school-nav-group__menu {
    position: absolute;
    top: 100%;
    left: -20px;
    z-index: 40;
    width: 280px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px 0;
    background: var(--color-surface);
    border-top: 3px solid var(--school-colour);
    box-shadow: 0 18px 40px rgb(0 33 71 / 18%);
}

.school-nav-group__menu a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 20px;
    color: var(--color-navy-900);
    font-size: 14px;
}

.school-nav-group__menu a:hover,
.school-nav-group__menu a:focus-visible {
    background: var(--school-colour-soft);
}

.school-nav-group__all {
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
}

.school-nav-group__count {
    color: var(--color-muted);
    font-size: 12px;
}

.school-header__apply {
    margin-left: 8px;
}

.school-menu-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    background: #fff;
    color: var(--color-navy-900);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
}

.school-menu-toggle i {
    font-size: 24px;
}

@media (max-width: 1199px) {
    .school-header .compact-site-navigation > a::after,
    .school-nav-group summary::after {
        display: none;
    }

    .school-header .compact-site-navigation > a:not(.default-btn),
    .school-nav-group summary {
        width: 100%;
        padding: 12px 4px;
        border-bottom: 1px solid var(--color-border);
    }

    .school-header .compact-site-navigation > a[aria-current] {
        color: var(--school-colour);
    }

    .school-nav-group__menu {
        position: static;
        width: 100%;
        max-height: none;
        box-shadow: none;
        border-top: 0;
        padding: 0 0 8px 12px;
    }

    .school-header__apply {
        margin: 16px 0 4px;
        align-self: flex-start;
    }
}

/* ---------- Language switcher (shared component) ---------- */
.locale-switcher {
    position: relative;
}

.locale-switcher > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.locale-switcher > summary::-webkit-details-marker {
    display: none;
}

.locale-switcher-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    min-width: 160px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 12px 30px rgb(0 33 71 / 15%);
}

.locale-switcher-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--color-navy-900) !important;
}

.locale-switcher-menu a[aria-current] {
    font-weight: 700;
}

/* ---------- Home hero ---------- */
.school-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(460px, 68vh, 680px);
    overflow: hidden;
    background: var(--color-navy-900);
    isolation: isolate;
}

.school-hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.school-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--school-overlay);
}

.school-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--school-accent);
}

.school-hero__content {
    padding-top: var(--school-gutter);
    padding-bottom: var(--school-gutter);
    color: #fff;
}

.school-hero__title {
    max-width: 16ch;
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.school-hero__lead {
    max-width: 58ch;
    margin: 0 0 32px;
    color: rgb(255 255 255 / 88%);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.6;
}

.school-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Eyebrows and section titles ---------- */
.school-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--school-colour);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.school-eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: currentColor;
}

.school-eyebrow--light {
    color: #fff;
}

.school-eyebrow--light::before {
    background: var(--color-primary, var(--color-cyan-500));
}

.school-section-title {
    max-width: 760px;
    margin: 0 0 40px;
    text-align: left;
}

.school-section-title--center {
    margin-inline: auto;
    text-align: center;
}

.school-section-title h2 {
    margin: 0;
    color: var(--color-navy-900);
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
}

.school-section-title__intro {
    margin: 14px 0 0;
    color: var(--color-muted);
    font-size: 18px;
}

.school-subheading {
    margin: 40px 0 16px;
    color: var(--color-navy-900);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ---------- Sections ---------- */
.school-section {
    padding: var(--school-gutter) 0;
}

.school-section--tight {
    padding: 40px 0 0;
}

.school-section--muted {
    background: var(--color-surface);
}

/* A section embedded in another (the programme list on a department page) uses the outer
   section's spacing instead of adding a second gutter above and below. */
.school-section .school-section {
    padding-top: 0;
    padding-bottom: 0;
}

.school-section:not(.school-section--muted):not(.school-section--tight) + .school-section:not(.school-section--muted) {
    padding-top: 0;
}

.school-section__more {
    margin: 40px 0 0;
}

.school-group {
    margin-bottom: 56px;
}

/* ---------- Page banner (main site section-banner) ---------- */
.school-page-banner {
    background-size: cover;
    background-position: center;
}

.school-page-banner[data-page-banner]::before {
    background: var(--school-overlay);
}

.school-page-banner[data-page-banner] .section-info {
    background-color: var(--school-deep);
    border-left: 4px solid var(--school-accent);
}

.school-page-banner .section-info p {
    max-width: 60ch;
    margin: 12px 0 0;
    color: rgb(255 255 255 / 85%);
}

.school-page-banner[data-page-banner] .section-info .section-banner__title {
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.school-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: rgb(255 255 255 / 75%);
}

.school-breadcrumb li + li::before {
    content: '/';
    margin-right: 6px;
    opacity: 0.6;
}

.school-main .school-breadcrumb a:not(.default-btn) {
    color: #fff;
}

.school-main .school-breadcrumb a:not(.default-btn):hover {
    color: rgb(255 255 255 / 75%);
}

/* ---------- Level cards (home) ---------- */
.school-level-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    color: var(--color-navy-900);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.school-level-card:hover,
.school-level-card:focus-visible {
    border-color: var(--school-colour);
    box-shadow: var(--shadow-card-hover);
    color: var(--color-navy-900);
}

.school-level-card__count {
    color: var(--school-colour);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.school-level-card__name {
    margin: 10px 0 24px;
    font-size: 20px;
    font-weight: 700;
}

.school-level-card__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    color: var(--school-colour);
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Search and filters ---------- */
.school-search {
    position: relative;
    display: flex;
    gap: 10px;
}

.school-search input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 44px 0 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-navy-900);
    font: inherit;
}

.school-search input:focus {
    border-color: var(--school-colour);
    outline: 3px solid color-mix(in srgb, var(--school-colour) 25%, transparent);
}

.school-search > i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    font-size: 20px;
    pointer-events: none;
}

.school-search--large {
    max-width: 720px;
    margin-top: 40px;
}

.school-search--large input {
    min-height: 56px;
    padding-right: 16px;
    font-size: 17px;
}

.school-filter {
    position: sticky;
    top: 24px;
    padding: 24px;
    background: var(--color-surface);
    border-radius: 12px;
}

.school-filter__label {
    display: block;
    margin: 0 0 10px;
    color: var(--color-navy-900);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.school-filter .school-search {
    margin-bottom: 28px;
}

.school-filter__options {
    margin: 0;
    padding: 0;
    list-style: none;
}

.school-filter__options button {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--color-ink);
    font: inherit;
    text-align: left;
}

.school-filter__options button:hover,
.school-filter__options button.is-active {
    background: var(--school-colour-soft);
    color: var(--color-navy-900);
    font-weight: 600;
}

.school-results {
    margin: 0 0 20px;
    color: var(--color-muted);
    font-size: 14px;
}

.school-empty {
    padding: 32px;
    background: var(--color-surface);
    border-radius: 12px;
    color: var(--color-muted);
}

.school-link-button {
    margin-left: 8px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--school-colour);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Prose and articles ---------- */
.school-prose {
    color: var(--color-ink);
    font-size: 17px;
    line-height: 1.75;
}

.school-prose p,
.school-prose li {
    color: var(--color-ink);
}

.school-prose > * + * {
    margin-top: 1em;
}

.school-prose h1,
.school-prose h2 {
    font-size: clamp(22px, 2vw, 28px);
}

.school-prose h3,
.school-prose h4 {
    font-size: 20px;
}

.school-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.school-article {
    max-width: 760px;
}

.school-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 24px;
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 600;
}

.school-article__image {
    width: 100%;
    height: auto;
    margin: 0 0 32px;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.school-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}

.school-pager a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-navy-900) !important;
    font-weight: 600;
}

.school-pager a span {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.school-pager__next {
    grid-column: 2;
    text-align: right;
}

.school-signature {
    margin: 24px 0 20px;
    color: var(--color-navy-900);
}

.school-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 7;
    object-fit: cover;
    object-position: top;
    border-radius: 12px;
    box-shadow: var(--shadow-card-hover);
}

/* ---------- Programme details ---------- */
.school-fact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.school-fact-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--school-colour-soft);
    border-radius: 999px;
    color: var(--color-navy-900);
    font-size: 14px;
    font-weight: 600;
}

.school-fact-chips--compact {
    margin-bottom: 20px;
}

.school-block + .school-block {
    margin-top: 8px;
}

.school-list {
    padding-left: 20px;
}

.school-list li {
    margin-bottom: 8px;
    color: var(--color-ink);
}

.school-summary {
    margin-bottom: 24px;
    padding: 24px;
    background: var(--color-surface);
    border-radius: 12px;
}

.school-link-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.school-link-list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-navy-900) !important;
    font-weight: 500;
}

.school-link-list a:hover {
    color: var(--school-colour) !important;
}

.school-facts dt {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.school-facts dd {
    margin: 4px 0 20px;
    color: var(--color-navy-900);
    font-weight: 600;
}

/* ---------- Call to action ---------- */
.school-cta {
    background: var(--school-deep);
    color: #fff;
}

.school-cta .default-btn {
    background: #fff;
    border-color: #fff;
    color: var(--school-deep);
}

.school-cta .default-btn:hover,
.school-cta .default-btn:focus-visible {
    background: var(--color-navy-900);
    border-color: var(--color-navy-900);
    color: #fff;
}

.school-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 64px;
    padding-bottom: 64px;
}

.school-cta h2 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(26px, 2.6vw, 36px);
}

.school-cta p {
    max-width: 60ch;
    margin: 0;
    color: rgb(255 255 255 / 80%);
}

.school-cta--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 48px;
    padding: 32px;
    border-radius: 12px;
}

.school-cta--inline h2 {
    font-size: 24px;
}

/* ---------- Contact ---------- */
.school-contact-card {
    height: 100%;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.school-contact-card > i {
    color: var(--school-colour);
    font-size: 30px;
}

.school-contact-card h2 {
    margin: 14px 0 10px;
    color: var(--color-navy-900);
    font-size: 20px;
}

.school-contact-card p {
    margin: 0 0 6px;
}

/* ---------- Calendar ---------- */
.school-calendar {
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    --fc-border-color: var(--color-border);
    --fc-today-bg-color: var(--school-colour-soft);
    --fc-event-bg-color: var(--school-colour);
    --fc-event-border-color: var(--school-colour);
    --fc-button-bg-color: var(--color-navy-900);
    --fc-button-border-color: var(--color-navy-900);
    --fc-button-active-bg-color: var(--school-colour);
    --fc-button-active-border-color: var(--school-colour);
}

/* ---------- People ---------- */
.school-person-card .showcase-card__image img {
    object-position: top;
}

/* ---------- Fundraising projects (DRM) ---------- */
.school-progress {
    margin-top: 16px;
}

.school-progress__bar {
    height: 8px;
    overflow: hidden;
    background: var(--school-colour-soft);
    border-radius: 999px;
}

.school-progress__bar span {
    display: block;
    height: 100%;
    background: var(--school-colour);
    border-radius: 999px;
}

.school-progress__figures {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px;
    margin: 10px 0 0;
    color: var(--color-muted);
    font-size: 14px;
}

.school-progress__figures strong {
    color: var(--color-navy-900);
}

.school-progress__figures span {
    color: var(--school-colour);
    font-weight: 700;
}

.school-summary--sticky {
    position: sticky;
    top: 24px;
}

.school-summary--sticky .school-progress {
    margin: 0 0 20px;
}

/* ---------- Values ---------- */
.school-value {
    height: 100%;
    padding: 24px;
    background: #fff;
    border-top: 3px solid var(--school-colour);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

.school-value > i {
    color: var(--school-colour);
    font-size: 28px;
}

.school-value h3 {
    margin: 12px 0 8px;
    color: var(--color-navy-900);
    font-size: 20px;
}

.school-value p {
    margin: 0;
}

/* ---------- Enquiry form ---------- */
.school-form__label {
    display: block;
    margin-bottom: 6px;
    color: var(--color-navy-900);
    font-weight: 600;
}

.school-form__input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-navy-900);
    font: inherit;
}

.school-form__input:focus {
    border-color: var(--school-colour);
    outline: 3px solid color-mix(in srgb, var(--school-colour) 25%, transparent);
}

.school-form__input.is-invalid {
    border-color: #b42318;
}

.school-form__error {
    margin: 6px 0 0;
    color: #b42318;
    font-size: 14px;
}

.school-notice {
    margin: 0 0 24px;
    padding: 16px 20px;
    background: #ecfdf3;
    border-left: 4px solid #067647;
    border-radius: 6px;
    color: #054f31;
    font-weight: 600;
}

/* ---------- Footer ---------- */
/* The main site's textured footer, painted in the school's deep colour. */
.school-footer.footer-area {
    background-color: var(--school-deep);
    border-top: 4px solid var(--school-accent-light);
}

.school-footer .main-footer__copyright {
    background-color: color-mix(in srgb, var(--school-deep) 72%, #000);
    border-top-color: rgb(255 255 255 / 12%);
}

/* 86% white keeps footer text above 5:1 on every school's deep colour. */
.school-footer address,
.school-footer address p,
.school-footer .main-footer__copyright p {
    color: rgb(255 255 255 / 86%);
}

/* Footer links: a light tint of the school colour (at least 5:1 on the deep footer),
   white and underlined on hover. Selectors beat style.css .footer-widget-info rules. */
.school-footer .footer-widget-info .footer-widget ul li a,
.school-footer .footer-widget-info address a,
.school-footer .main-footer__copyright a {
    color: var(--school-footer-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.school-footer .footer-widget-info .footer-widget ul li a:hover,
.school-footer .footer-widget-info .footer-widget ul li a:focus-visible,
.school-footer .footer-widget-info address a:hover,
.school-footer .main-footer__copyright a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.school-footer .school-footer__name {
    color: #fff;
    font-weight: 700;
}

.school-footer .main-footer__links h2 {
    border-bottom-color: var(--school-accent-light);
}

.school-footer.footer-area i,
.school-footer.footer-area address a i {
    color: var(--school-accent-light);
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
    .school-utility__name {
        display: none;
    }

    .school-utility__inner {
        justify-content: flex-end;
    }

    .school-hero {
        min-height: 520px;
    }

    .school-search--large {
        flex-direction: column;
    }

    .school-filter {
        position: static;
    }

    .school-pager {
        grid-template-columns: 1fr;
    }

    .school-pager__next {
        grid-column: 1;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .school-header .compact-site-navigation > a::after,
    .school-nav-group summary::after,
    .school-nav-group summary i {
        transition: none;
    }
}