/* ==========================================================================
   Al Falah — modern theme
   --------------------------------------------------------------------------
   Loaded after Bootstrap 3, which the content pages still rely on for their
   grid. Nothing here reuses a Bootstrap class name, so the two do not fight:
   the shell is built from .af- classes and the page content keeps .row and
   .col-md-* working as the editor expects.

   The palette keeps the school's existing gold and sets it against a deep
   emerald rather than the magenta that was scattered through the old theme.
   ========================================================================== */

:root {
    --af-ink:        #17201C;
    --af-ink-soft:   #4B564F;
    --af-ink-faint:  #7C877F;
    --af-paper:      #FBFAF6;
    --af-surface:    #FFFFFF;
    --af-line:       #E4E0D6;
    --af-primary:    #0E4D3C;
    --af-primary-dk: #093528;
    --af-primary-lt: #E7F0EC;
    --af-gold:       #B48640;
    --af-gold-soft:  #F5EDDD;

    --af-radius:     14px;
    --af-radius-sm:  9px;
    --af-shadow:     0 1px 2px rgba(23,32,28,.05), 0 8px 24px rgba(23,32,28,.06);
    --af-shadow-lg:  0 2px 4px rgba(23,32,28,.06), 0 18px 48px rgba(23,32,28,.11);

    --af-display: "Marcellus", Georgia, "Times New Roman", serif;
    --af-body:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

    --af-wrap: 1180px;
}

/* --------------------------------------------------------------- base ---- */

html { -webkit-text-size-adjust: 100%; }

body.af-body {
    margin: 0;
    background: var(--af-paper) !important;
    color: var(--af-ink);
    font-family: var(--af-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.af-body h1, .af-body h2, .af-body h3, .af-body h4, .af-body .af-display {
    font-family: var(--af-display);
    font-weight: 400;
    color: var(--af-ink);
    line-height: 1.22;
    text-wrap: balance;
    letter-spacing: .1px;
}
.af-body h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); margin: 0 0 .5em; }
.af-body h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); margin: 0 0 .55em; }
.af-body h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); margin: 0 0 .55em; }
.af-body h4 { font-size: 1.15rem; margin: 0 0 .5em; }
.af-body p  { margin: 0 0 1.05em; }

.af-body a { color: var(--af-primary); text-decoration: none; }
.af-body a:hover, .af-body a:focus { color: var(--af-gold); text-decoration: underline; }
.af-body a:focus-visible,
.af-body button:focus-visible {
    outline: 3px solid var(--af-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

.af-body img { max-width: 100%; height: auto; }

.af-wrap {
    width: 100%;
    max-width: var(--af-wrap);
    margin: 0 auto;
    padding: 0 22px;
    box-sizing: border-box;
}

/* Eyebrow label — used above section headings. */
.af-eyebrow {
    display: inline-block;
    font-family: var(--af-body);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--af-gold);
    margin-bottom: .6em;
}

/* ------------------------------------------------------------- header ---- */

.af-topbar {
    background: var(--af-primary-dk);
    color: #DCE7E1;
    font-size: .86rem;
}
.af-topbar .af-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.af-topbar a { color: #DCE7E1; }
.af-topbar a:hover { color: #fff; text-decoration: none; }
.af-topbar-contact { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.af-topbar-contact i { color: var(--af-gold); margin-right: 6px; }
.af-social { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.af-social a { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; }

.af-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--af-line);
}
.af-header .af-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 78px;
}
.af-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.af-brand img { max-height: 58px; width: auto; display: block; }

.af-nav { display: flex; align-items: center; gap: 4px; }
.af-nav > ul {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.af-nav > ul > li { position: relative; }
.af-nav > ul > li > a {
    display: block;
    padding: 10px 13px;
    border-radius: var(--af-radius-sm);
    color: var(--af-ink);
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}
.af-nav > ul > li > a:hover { background: var(--af-primary-lt); color: var(--af-primary); text-decoration: none; }
.af-nav > ul > li.af-active > a { color: var(--af-primary); }
.af-nav > ul > li.af-active > a::after {
    content: "";
    display: block;
    height: 2px;
    margin: 5px 13px -6px;
    background: var(--af-gold);
    border-radius: 2px;
}
.af-caret { font-size: .62em; opacity: .65; margin-left: 5px; vertical-align: middle; }

.af-sub {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 224px;
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius-sm);
    box-shadow: var(--af-shadow-lg);
    list-style: none;
    margin: 0;
    padding: 7px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.af-nav li:hover > .af-sub,
.af-nav li:focus-within > .af-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.af-sub a {
    display: block;
    padding: 8px 12px;
    border-radius: 7px;
    color: var(--af-ink-soft);
    font-size: .93rem;
}
.af-sub a:hover { background: var(--af-primary-lt); color: var(--af-primary); text-decoration: none; }

.af-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--af-primary);
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .93rem;
    white-space: nowrap;
}
.af-login:hover { background: var(--af-primary-dk); color: #fff !important; text-decoration: none; }
.af-login-wrap { position: relative; }
.af-login-wrap .af-sub { left: auto; right: 0; }

.af-burger {
    display: none;
    width: 46px; height: 46px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--af-line);
    border-radius: 11px;
    cursor: pointer;
    color: var(--af-ink);
    font-size: 1.2rem;
}

/* ------------------------------------------------------------- slider ---- */

.af-hero { position: relative; background: var(--af-primary-dk); }
.af-slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.af-slides::-webkit-scrollbar { display: none; }
.af-slide { flex: 0 0 100%; scroll-snap-align: center; position: relative; }
.af-slide img {
    display: block;
    width: 100%;
    height: clamp(220px, 42vw, 560px);
    object-fit: cover;
}
.af-dots {
    position: absolute;
    left: 0; right: 0; bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 9px;
}
.af-dots button {
    width: 9px; height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}
.af-dots button[aria-current="true"] { width: 26px; border-radius: 999px; background: var(--af-gold); }

/* --------------------------------------------------------------- page ---- */

.af-main { padding: 46px 0 64px; }
.af-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
.af-layout.af-has-side { grid-template-columns: minmax(0,1fr); }
@media (min-width: 992px) {
    .af-layout.af-has-side { grid-template-columns: minmax(0,1fr) 320px; }
}

/* The page body is HTML the school writes in the admin, so it is styled
   generously rather than assumed to carry any particular markup. */
.af-content { min-width: 0; }
.af-content > :first-child { margin-top: 0; }
.af-content img { border-radius: var(--af-radius); }
.af-content ul, .af-content ol { padding-left: 1.25em; margin: 0 0 1.05em; }
.af-content li { margin-bottom: .4em; }
.af-content blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--af-gold);
    color: var(--af-ink-soft);
    font-size: 1.06em;
}
.af-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.3em;
    font-size: .95em;
}
.af-content th, .af-content td { padding: 10px 13px; border: 1px solid var(--af-line); text-align: left; }
.af-content thead th { background: var(--af-primary-lt); color: var(--af-primary-dk); font-weight: 700; }
.af-content tbody tr:nth-child(even) { background: #FAF9F5; }
/* a wide table should scroll inside itself, never push the page sideways */
.af-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.af-pagehead {
    background: linear-gradient(180deg, var(--af-primary) 0%, var(--af-primary-dk) 100%);
    color: #fff;
    padding: 52px 0 56px;
}
.af-pagehead h1 { color: #fff; margin: 0; }
.af-pagehead .af-eyebrow { color: var(--af-gold); }

/* ------------------------------------------------------------ sidebar ---- */

.af-side { min-width: 0; }
.af-card {
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
    box-shadow: var(--af-shadow);
    overflow: hidden;
}
.af-card-head {
    padding: 15px 18px;
    background: var(--af-primary);
    color: #fff;
    font-family: var(--af-display);
    font-size: 1.1rem;
}
.af-news { list-style: none; margin: 0; padding: 6px; max-height: 460px; overflow-y: auto; }
.af-news li + li { border-top: 1px solid var(--af-line); }
.af-news a { display: flex; gap: 13px; padding: 13px 12px; border-radius: var(--af-radius-sm); color: var(--af-ink); }
.af-news a:hover { background: var(--af-primary-lt); text-decoration: none; }
.af-date {
    flex: 0 0 52px;
    text-align: center;
    background: var(--af-gold-soft);
    border-radius: 9px;
    padding: 7px 4px;
    font-family: var(--af-display);
    font-size: 1.28rem;
    line-height: 1;
    color: var(--af-primary-dk);
}
.af-date span { display: block; font-family: var(--af-body); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; color: var(--af-ink-faint); }
.af-news-title { font-size: .95rem; font-weight: 600; line-height: 1.4; }

/* ------------------------------------------------------------- footer ---- */

.af-footer { background: var(--af-primary-dk); color: #C7D6CF; padding: 58px 0 0; margin-top: 60px; }
.af-footer h3 {
    color: #fff;
    font-size: 1.12rem;
    margin: 0 0 18px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.af-footer a { color: #C7D6CF; }
.af-footer a:hover { color: var(--af-gold); text-decoration: none; }
.af-footer-grid {
    display: grid;
    gap: 38px;
    grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .af-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .af-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.af-footer-links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 22px; }
.af-footer-links li { margin-bottom: 9px; break-inside: avoid; }
.af-footer-logo { max-height: 62px; margin-bottom: 16px; background: #fff; padding: 8px 12px; border-radius: 10px; }
.af-contact-list { list-style: none; margin: 0; padding: 0; }
.af-contact-list li { display: flex; gap: 11px; margin-bottom: 12px; align-items: flex-start; }
.af-contact-list i { color: var(--af-gold); margin-top: 5px; flex: 0 0 16px; }
.af-copy {
    margin-top: 46px;
    border-top: 1px solid rgba(255,255,255,.13);
    padding: 20px 0 24px;
    font-size: .88rem;
    color: #9FB3A9;
    text-align: center;
}

.af-enquiry {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--af-gold);
    color: #221A08 !important;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 999px;
    box-shadow: var(--af-shadow-lg);
}
.af-enquiry:hover { background: #C6974D; color: #221A08 !important; text-decoration: none; }

/* --------------------------------------------------------- small print --- */

@media (max-width: 991px) {
    .af-burger { display: inline-flex; }
    .af-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(340px, 86vw);
        background: var(--af-surface);
        border-left: 1px solid var(--af-line);
        box-shadow: var(--af-shadow-lg);
        padding: 84px 18px 30px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .24s ease;
        display: block;
    }
    .af-nav.af-open { transform: translateX(0); }
    .af-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .af-nav > ul > li > a { padding: 12px 14px; font-size: 1rem; }
    .af-nav > ul > li.af-active > a::after { display: none; }
    .af-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--af-line);
        border-radius: 0;
        margin: 2px 0 6px 14px;
        padding: 0 0 0 6px;
        min-width: 0;
    }
    .af-login { width: 100%; justify-content: center; margin-top: 10px; }
    .af-login-wrap { width: 100%; }
    .af-scrim {
        position: fixed; inset: 0;
        background: rgba(23,32,28,.42);
        opacity: 0; visibility: hidden;
        transition: opacity .24s ease, visibility .24s;
        z-index: 999;
    }
    .af-scrim.af-open { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .af-slides { scroll-behavior: auto; }
}

@media print {
    .af-header, .af-topbar, .af-footer, .af-enquiry, .af-hero, .af-side { display: none !important; }
    .af-body { background: #fff; font-size: 12pt; }
}

/* ==========================================================================
   The page content
   --------------------------------------------------------------------------
   Everything above styles the shell. What follows styles what the school has
   actually written in the editor, which uses class names from the old theme's
   style.css - a file this theme deliberately does not load, because it also
   carried the magenta and the condensed typeface being replaced.

   Without these rules those blocks arrive unstyled, which is why the sections
   looked wrong against the new header and footer. Each is rebuilt here in the
   new palette rather than the old one being pulled back in.
   ========================================================================== */

/* -- the admission banner ------------------------------------------------- */
/* It carries its own background image inline. What it lacked was a floor for
   the text to sit on, so wording over a light part of the photo vanished. */
.af-content .admission-section {
    position: relative;
    border-radius: var(--af-radius);
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    min-height: 220px;
    margin: 0 0 34px !important;
    padding: 54px 24px !important;
    box-shadow: var(--af-shadow);
}
.af-content .admission-section::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(9,53,40,.55) 0%, rgba(9,53,40,.15) 55%, rgba(9,53,40,.45) 100%);
    pointer-events: none;
}
.af-content .admission-section > * { position: relative; z-index: 1; }
.af-content .admission-section a { color: #fff; }

/* -- the figures ---------------------------------------------------------- */
.af-content .counter-main {
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
    padding: 26px 18px;
    text-align: center;
    height: 100%;
    box-shadow: var(--af-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
    color: var(--af-ink-soft);
    font-size: .95rem;
}
.af-content .counter-main:hover { transform: translateY(-3px); box-shadow: var(--af-shadow-lg); }
.af-content .counter-main img {
    width: 54px; height: 54px;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
}
.af-content .counter-main h3 {
    font-family: var(--af-display);
    font-size: 2.15rem;
    color: var(--af-primary);
    margin: 0 0 4px;
    font-variant-numeric: tabular-nums;
}

/* -- facilities and programmes ------------------------------------------- */
/* Two blocks with the same shape - a picture above, words below - so they are
   given the same card and the same picture proportion. Without a fixed
   proportion the row of cards steps up and down with whatever each photo
   happens to be. */
.af-content .staffteam,
.af-content .courses-box {
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    box-shadow: var(--af-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.af-content .staffteam:hover,
.af-content .courses-box:hover { transform: translateY(-3px); box-shadow: var(--af-shadow-lg); }

.af-content .staffteamimg,
.af-content .courses-box-img {
    margin: 0;
    background: var(--af-primary-lt);
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.af-content .staffteamimg img,
.af-content .courses-box-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform .4s ease;
}
.af-content .staffteam:hover .staffteamimg img,
.af-content .courses-box:hover .courses-box-img img { transform: scale(1.04); }

.af-content .staff-content,
.af-content .course-inner {
    padding: 17px 19px 21px;
    flex: 1 1 auto;
    color: var(--af-ink-soft);
    font-size: .95rem;
    line-height: 1.6;
}
.af-content .staff-content h3,
.af-content .course-inner h4 {
    font-family: var(--af-display);
    font-size: 1.16rem;
    margin: 0 0 7px;
    color: var(--af-ink);
    line-height: 1.3;
}
.af-content .course-inner h4 a { color: var(--af-ink) !important; }
.af-content .staffteam:hover .staff-content h3,
.af-content .courses-box:hover .course-inner h4 a { color: var(--af-primary) !important; }
.af-content .course-inner p { margin: 0; }

/* -- spacing helpers the old theme defined -------------------------------- */
.af-content .spacet40 { padding-top: 34px; }
.af-content .spaceb40 { padding-bottom: 34px; }
.af-content .spacet50 { padding-top: 42px; }

/* -- the editor's leftovers ----------------------------------------------- */
/* Text pasted over the years carries inline font and colour from the old
   theme. Inline styles beat a stylesheet, so the few that fight the new
   design are answered directly rather than left to win. */
.af-content [style*="Rajdhani"],
.af-content [style*="rajdhani"] {
    font-family: var(--af-body) !important;
    font-size: inherit !important;
}
.af-content [style*="rgb(34, 34, 34)"],
.af-content [style*="rgb(45, 62, 80)"] { color: var(--af-ink-soft) !important; }
.af-content [style*="color:#6225E6"],
.af-content [style*="color: #6225E6"] { color: var(--af-primary) !important; }

/* a stray heading set to 30px sits oddly beside the scale everything else uses */
.af-content [style*="font-size:30px"] { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem) !important; }

/* Bootstrap cards inside the content, so they match the cards around them */
.af-content .card {
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
    box-shadow: var(--af-shadow);
    background: var(--af-surface);
}
.af-content .card-body { padding: 19px; }

/* rows of cards should breathe, and never stretch the page sideways */
.af-content .row { margin-left: -12px; margin-right: -12px; }
.af-content .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }
.af-content .container { width: auto; max-width: none; padding-left: 0; padding-right: 0; }

/* headings written straight into the page */
.af-content h1, .af-content h2, .af-content h3, .af-content h4 { color: var(--af-ink); }
.af-content h1 { font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem); }

/* an image dropped into the text should not overflow its column */
.af-content img { max-width: 100%; height: auto; }

/* -- carousels that have no carousel -------------------------------------- */
/* The content wraps three blocks in .owl-carousel. That plugin ran on the old
   theme and is not loaded here - the banner strip was rebuilt without it. Left
   alone, each slide becomes a full-width block and the page turns into a long
   column of pictures.

   They are laid out as a grid instead. Everything stays visible and reachable,
   which a carousel never quite manages anyway, and nothing has to be swiped to
   be found. */
.af-content .owl-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
    margin-bottom: 8px;
}
.af-content .owl-carousel > [class*="col-"],
.af-content .owl-carousel > div {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    float: none !important;
}

/* -- what people said ----------------------------------------------------- */
.af-content .testimonial {
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-left: 3px solid var(--af-gold);
    border-radius: var(--af-radius);
    padding: 22px 22px 20px;
    height: 100%;
    box-shadow: var(--af-shadow);
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.af-content .testimonialimg {
    width: 62px; height: 62px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--af-gold-soft);
    flex: none;
}
.af-content .testimonialimg img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.af-content .testi_description { color: var(--af-ink-soft); font-size: .94rem; }
.af-content .testi_description h4 {
    font-family: var(--af-display);
    font-size: 1.04rem;
    margin: 0 0 8px;
    color: var(--af-ink);
    line-height: 1.35;
}
.af-content .testi_description p { margin: 0; font-style: italic; }

/* -- the vision / mission panels ------------------------------------------ */
/* The markup carries Bootstrap 3 and Bootstrap 5 class names at once, a
   leftover of the half-done migration: panel + accordion-item, in + show,
   data-toggle + data-bs-toggle. Bootstrap 3 is the one actually loaded, so the
   panels open and close correctly - they were simply unstyled, because the
   Bootstrap 5 names are the ones carrying the appearance. */
.af-content .accordion-item,
.af-content .panel-default {
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: var(--af-shadow);
}
.af-content .accordion-header,
.af-content .panel-heading { background: var(--af-primary-lt); padding: 0; border: 0; }
.af-content .panel-title { margin: 0; font-family: var(--af-display); }
.af-content .accordion-button,
.af-content .panel-title > a {
    display: block;
    padding: 14px 19px;
    color: var(--af-primary-dk) !important;
    font-family: var(--af-display);
    font-size: 1.08rem;
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.af-content .accordion-button:hover,
.af-content .panel-title > a:hover { background: rgba(14,77,60,.07); text-decoration: none; }
.af-content .panel-body,
.af-content .accordion-body { padding: 17px 19px 20px; color: var(--af-ink-soft); font-size: .95rem; }
.af-content .panel-collapse .panel-body { border-top: 1px solid var(--af-line); }

/* -- odds and ends the old sheet defined ---------------------------------- */
.af-content .divider {
    height: 3px; width: 62px;
    background: var(--af-gold);
    border-radius: 3px;
    margin: 12px auto 26px;
}
.af-content .our-academics { margin-bottom: 8px; }
.af-content .our-academics h1,
.af-content .our-academics h2,
.af-content .our-academics h3 { margin-bottom: 6px; }
.af-content .pb30 { padding-bottom: 24px; }
.af-content .counter-content { color: var(--af-ink-soft); }
.af-content .chievement-description { color: var(--af-ink-soft); font-size: .95rem; }
.af-content .teamstaff { margin-bottom: 22px; }

/* an icon dropped in as an image should not arrive at its natural size */
.af-content img.svg { max-width: 100%; height: auto; }
.af-content .rounded { border-radius: var(--af-radius) !important; }

/* -- one guard ------------------------------------------------------------ */
/* Wide editor content - a table, a pasted layout - scrolls inside itself
   rather than dragging the whole page sideways on a phone. */
.af-content { overflow-wrap: break-word; }

/* -- wrappers, and the classes from the other Bootstrap ------------------- */
/* Bootstrap 3 is what this theme loads, so .img-responsive and .img-rounded
   are already handled. .img-fluid belongs to Bootstrap 5 and is not, which is
   the same half-finished migration showing through the content. */
.af-content .img-fluid { max-width: 100%; height: auto; }
.af-content .panel-group,
.af-content .accordion,
.af-content .accordion-flush { margin-bottom: 22px; }
.af-content .panel { background: transparent; border: 0; box-shadow: none; }
.af-content .container-fluid { padding-left: 0; padding-right: 0; }
/* a typo in the page content joined two class names together */
.af-content .accordion-itempanel {
    display: block;
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

/* ==========================================================================
   The rebuilt home page
   --------------------------------------------------------------------------
   The old page was 164 divs of editor markup, 30 of them full-width wrappers
   stacked on each other, with three carousels whose plugin no longer loads.
   Styling could tidy that but not fix it, so the page itself was rewritten
   from the school's own words - the vision, the mission, the core values, the
   sixteen amenities - into the shape a school site actually wants: a hero,
   a band of figures, what we stand for, what we teach, the campus, and a way
   to apply.

   These sections escape the content column and run the full width of the
   page, which is what gives the rhythm. Everything else inherits the theme's
   tokens, so a colour is changed in one place.
   ========================================================================== */

/* the content column is 900px; these break out of it */
.af-content .afx-hero,
.af-content .afx-band,
.af-content .afx-cta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.af-main:has(.afx-hero) { padding-top: 0; }

/* -- hero ----------------------------------------------------------------- */
.af-content .afx-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: clamp(64px, 11vw, 132px) 22px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    min-height: clamp(300px, 46vw, 520px);
}
.af-content .afx-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(9,53,40,.90) 0%, rgba(9,53,40,.66) 44%, rgba(9,53,40,.28) 100%);
}
.af-content .afx-hero-in {
    position: relative;
    width: 100%;
    max-width: var(--af-wrap);
    margin: 0 auto;
}
.af-content .afx-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
    line-height: 1.08;
    margin: 0 0 .42em;
    max-width: 17ch;
}
.af-content .afx-lede {
    color: #D6E4DE;
    font-size: clamp(1rem, .95rem + .35vw, 1.19rem);
    max-width: 52ch;
    margin: 0 0 1.6em;
}
.af-content .afx-eyebrow {
    font-family: var(--af-body);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--af-gold);
    margin: 0 0 .85em;
}

/* -- buttons -------------------------------------------------------------- */
.af-content .afx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.af-content .afx-btn {
    display: inline-block;
    padding: 13px 27px;
    border-radius: 999px;
    background: var(--af-gold);
    color: #221A08 !important;
    font-weight: 700;
    font-size: .96rem;
    border: 1px solid transparent;
    transition: transform .15s ease, background .15s ease;
}
.af-content .afx-btn:hover { background: #C6974D; text-decoration: none; transform: translateY(-1px); }
.af-content .afx-btn-ghost {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255,255,255,.55);
}
.af-content .afx-btn-ghost:hover { background: rgba(255,255,255,.12); }
.af-content .afx-btn-gold { background: var(--af-gold); }

/* -- the figures ---------------------------------------------------------- */
.af-content .afx-band {
    background: var(--af-primary-dk);
    padding: clamp(34px, 5vw, 56px) 22px;
    margin-bottom: 0;
}
.af-content .afx-stats {
    max-width: var(--af-wrap);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 18px;
    text-align: center;
}
@media (min-width: 760px) { .af-content .afx-stats { grid-template-columns: repeat(4, 1fr); } }
.af-content .afx-stat b {
    display: block;
    font-family: var(--af-display);
    font-weight: 400;
    font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem);
    line-height: 1;
    color: var(--af-gold);
    font-variant-numeric: tabular-nums;
}
.af-content .afx-stat span {
    display: block;
    margin-top: 9px;
    color: #C7D6CF;
    font-size: .87rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* -- a section ------------------------------------------------------------ */
.af-content .afx-sec { padding: clamp(46px, 7vw, 82px) 0 0; }
.af-content .afx-sec > h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);
    margin: 0 0 1.1em;
    max-width: 22ch;
}

/* -- vision / mission / core values --------------------------------------- */
.af-content .afx-values {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 860px) { .af-content .afx-values { grid-template-columns: repeat(3, 1fr); } }
.af-content .afx-value {
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-top: 3px solid var(--af-gold);
    border-radius: var(--af-radius);
    padding: 26px 24px 28px;
    box-shadow: var(--af-shadow);
}
.af-content .afx-value h3 {
    font-size: 1.28rem;
    margin: 0 0 .5em;
    color: var(--af-primary);
}
.af-content .afx-quote {
    font-family: var(--af-display);
    font-size: 1.08rem;
    color: var(--af-ink);
    margin: 0 0 .9em;
    line-height: 1.4;
}
.af-content .afx-value p { color: var(--af-ink-soft); font-size: .95rem; margin: 0; }

/* -- card grids ----------------------------------------------------------- */
.af-content .afx-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 22px;
}
.af-content .afx-card {
    background: var(--af-surface);
    border: 1px solid var(--af-line);
    border-radius: var(--af-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--af-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.af-content .afx-card:hover { transform: translateY(-3px); box-shadow: var(--af-shadow-lg); }
.af-content .afx-card-img {
    aspect-ratio: 4 / 3;
    background: var(--af-primary-lt);
    overflow: hidden;
}
.af-content .afx-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform .45s ease;
}
.af-content .afx-card:hover .afx-card-img img { transform: scale(1.045); }
.af-content .afx-card-b { padding: 15px 17px 19px; flex: 1 1 auto; }
.af-content .afx-card-b h3 {
    font-size: 1.06rem;
    margin: 0;
    line-height: 1.3;
}
.af-content .afx-card-b p {
    margin: .5em 0 0;
    color: var(--af-ink-soft);
    font-size: .89rem;
    line-height: 1.55;
}

/* -- the closing call ----------------------------------------------------- */
.af-content .afx-cta {
    margin-top: clamp(52px, 8vw, 90px);
    background: var(--af-primary);
    color: #fff;
    text-align: center;
    padding: clamp(46px, 7vw, 78px) 22px;
}
.af-content .afx-cta h2 { color: #fff; margin: 0 0 .4em; }
.af-content .afx-cta p { color: #CFE0D9; margin: 0 0 1.5em; }
.af-content .afx-cta .afx-actions { justify-content: center; }

/* the rebuilt page ends with its own call, so the theme's own bottom padding
   would leave a gap under a full-width band */
.af-main:has(.afx-cta) { padding-bottom: 0; }
.af-content .afx-cta:last-child { margin-bottom: 0; }

/* ==========================================================================
   AFWIDE corrections
   ========================================================================== */

/* The rebuilt page has no sidebar, so its column is centred and the bands
   below can break out to the viewport edge correctly. */
.af-main-full .af-layout { grid-template-columns: minmax(0, 1fr); }

/* -- the welcome ---------------------------------------------------------- */
/* The banner strip at the top of the page is the hero. This sits under it, so
   it is a section of the page rather than a second full-bleed headline. */
.af-content .afx-intro {
    padding: clamp(38px, 5.5vw, 66px) 0 clamp(6px, 2vw, 18px);
    max-width: 46rem;
}
.af-content .afx-intro h1 {
    font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3rem);
    line-height: 1.12;
    margin: 0 0 .45em;
}
.af-content .afx-intro .afx-lede {
    color: var(--af-ink-soft);
    font-size: clamp(1rem, .95rem + .35vw, 1.16rem);
    margin: 0 0 1.5em;
    max-width: 54ch;
}
.af-content .afx-btn-line {
    background: transparent;
    color: var(--af-primary) !important;
    border-color: var(--af-primary);
}
.af-content .afx-btn-line:hover { background: var(--af-primary-lt); }

/* -- card grids, sized so the rows come out even --------------------------- */
/* auto-fit left an orphan on the last row - sixteen amenities across five
   columns is 5+5+5+1. Fixed counts per breakpoint divide cleanly: sixteen
   into four, and the four programmes into one row. */
.af-content .afx-cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 560px)  { .af-content .afx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .af-content .afx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .af-content .afx-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -- headings sit above their grid, not squeezed beside it ---------------- */
.af-content .afx-sec > h2 { max-width: 26ch; }

/* -- the closing call ----------------------------------------------------- */
.af-content .afx-cta p { max-width: 46ch; margin-left: auto; margin-right: auto; }

/* -- small screens -------------------------------------------------------- */
@media (max-width: 700px) {
    .af-content .afx-stats { gap: 22px 14px; }
    .af-content .afx-value { padding: 22px 20px 24px; }
    .af-content .afx-actions { gap: 10px; }
    .af-content .afx-btn { padding: 12px 22px; font-size: .92rem; }
}