/* ============================================================
   Anikeola Schools Child — PAGES (v2.0.0)
   The 2026 RMP route designs. Loads after shell.css.
   Homepage rules build on the EXISTING .acc-* markup and the
   v1.1.x carry-overs in main.css / carousel.css (face anchors,
   580px carousel, 480px chess cell — none of that is touched
   here). Subpage rules key off the .ak-page-* body classes
   added in functions.php, plus .ak-* hook classes the deploy
   step applies to restructured Elementor sections (see
   DEPLOY.md in the redesign workspace).
   ============================================================ */

/* ================================================================
   HOME (§4)
   ================================================================ */

/* §4.1 — Dark split hero. The .acc-hero markup (text panel +
   the existing 5-slide carousel) is restyled onto the RMP navy
   gradient; grid ratio 1.15fr / 0.85fr. Carousel internals —
   height, anchors, dots, caption — stay exactly as carousel.css
   has them; only its frame is finished here. */
@media (min-width: 1025px) {
    body.page-id-26 .acc-hero {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 48px;
        background: linear-gradient(135deg, #0A192F 0%, #0F294A 100%);
        border-radius: 24px;
        padding: 56px 48px;
    }
    body.page-id-26 .acc-hero > div:first-child {
        background: transparent;
        border-radius: 0;
        padding: 0 8px 0 0;
    }
    body.page-id-26 .acc-hero h1 {
        color: #fff;
        font-size: clamp(2.1rem, 3.4vw, 3rem);
        margin: 0 0 20px;
    }
    body.page-id-26 .acc-hero > div:first-child p {
        color: #CBD5E1;
        font-size: 18px;
        line-height: 1.65;
    }
    body.page-id-26 .acc-hero .ak-carousel {
        border-radius: 16px;
        box-shadow: 0 24px 48px rgba(2, 8, 23, .45);
    }
}
@media (max-width: 1024px) {
    body.page-id-26 .acc-hero h1 { color: #0A192F; }
}
/* v2.0.1 (defect 2): the hero H1 rendered dark navy on desktop.
   Two layers beat the white rule in the ≥1025px block above:
   (a) shell.css's global `h1, … .elementor-heading-title`
   colour (var(--ak-navy), non-!important) and (b) a pre-theme
   WPCode snippet rule `h1, … { color:#1f3a5f !important }`
   printed AFTER the theme styles (snippets are untouchable).
   Only an equal-or-stronger !important rule in the theme can
   win. Scoped to the homepage hero H1 ONLY — the carousel,
   framing, dots and every other hero property are untouched;
   below 1025px the hero has no navy panel and the navy
   heading above stays correct. */
@media (min-width: 1025px) {
    body.page-id-26 .acc-hero h1 { color: #fff !important; }
}
/* Eyebrow becomes the RMP glass pill on the dark hero.
   v2.0.2 SCOPE FIX (defect 4 of the v2.0.1 verify): this rule
   was written for the hero pill alone, but it is scoped to
   the whole homepage — and the homepage's WHITE sections
   reuse .acc-eyebrow ("Academic Tiers", "Campus Life"). On
   white, this rule's glass background composites to ≈
   RGB(204,230,244) under near-white #E0F2FE text: contrast
   1.13:1 — the exact values the v2.0.1 deploy checker
   sampled (RGB 224,242,254 bg / RGB 243,250,255 text,
   1.09:1) on the mid-scroll sample. The rule is now scoped
   to the hero block itself (.acc-hero), where the navy
   panel makes the glass pill correct (≈12:1); off-hero
   homepage eyebrows fall back to the main.css base colour
   #0369A1 on white (5.9:1), consistent with every other
   page. Hero appearance is unchanged — the hero pill gets
   the same declarations from this narrower selector. */
body.page-id-26 .acc-hero .acc-eyebrow {
    background: rgba(2, 132, 199, .2);
    border: 1px solid #38BDF8;
    color: #E0F2FE;
    border-radius: 9999px;
    padding: 7px 14px;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: none;
    margin-bottom: 18px;
}
/* v2.0.3 (M2 — hero pill unreadable on the phone): the navy
   hero panel exists only at ≥1025px (see the hero rules
   above); at ≤1024px the hero text block sits on the light
   page background — the owner's phone homepage shows the
   text first with the carousel below — while the glass pill
   above applied at ALL widths: #E0F2FE text on a 20%-alpha
   tint over white is ≈1.1:1, unreadable. At ≤1024px (the
   theme's own light-hero breakpoint — the same one where
   the hero H1 turns navy) the hero eyebrow takes the
   off-hero treatment instead: royal-dark #0369A1 on the
   solid royal tint #E0F2FE with a royal border, ≈5.2:1.
   The desktop navy-hero glass look is untouched. */
@media (max-width: 1024px) {
    body.page-id-26 .acc-hero .acc-eyebrow {
        background: var(--ak-royal-tint);
        border-color: var(--ak-royal);
        color: var(--ak-royal-dark);
    }
}
/* Second hero CTA (glass) — the anchor is added to the hero
   block at deploy; styled here so it lands designed. */
body.page-id-26 .acc-hero .ak-btn-glass {
    display: inline-block;
    border: 1.5px solid rgba(255,255,255,.75);
    color: #fff !important;
    background: rgba(255,255,255,.08);
    font: 600 15px/1.2 var(--ak-text);
    padding: 13px 26px;
    border-radius: 9999px;
    text-decoration: none !important;
    margin-left: 10px;
    transition: background .2s ease;
}
body.page-id-26 .acc-hero .ak-btn-glass:hover { background: rgba(255,255,255,.18); }
@media (max-width: 560px) {
    body.page-id-26 .acc-hero .ak-btn-glass { margin: 10px 0 0; }
}

/* §4.2 — Floating metrics bar. The block is restyled as the
   elevated white bar; deploy trims it to the RMP's four
   metrics (1996 / 110+ / 11+ / 241+) with the RMP labels. */
body.page-id-26 .acc-stats {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(10, 25, 47, .08);
    padding: 32px;
    gap: 24px;
    margin-top: -40px;
    position: relative;
    z-index: 5;
}
body.page-id-26 .acc-stat b {
    font: 800 36px/1.1 var(--ak-head);
    color: #0A192F;
}
body.page-id-26 .acc-stat span {
    font-size: 14px;
    color: #64748B;
    margin-top: 6px;
}
body.page-id-26 .acc-stat svg {
    width: 26px; height: 26px; color: var(--ak-royal);
    margin-bottom: 10px;
}
@media (max-width: 767px) {
    body.page-id-26 .acc-stats { margin-top: 0; padding: 24px 18px; }
}

/* §4.3 — Academic Pathways bento (deploy-added .ak-pathways
   block; copy is the Academics page's real tier copy). */
.ak-pathways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.ak-path-card {
    border-radius: 16px;
    padding: 30px 28px;
    background: #fff;
    border: 1px solid var(--ak-line);
}
.ak-path-card.ak-tint-sky { background: var(--ak-royal-tint); border-color: transparent; }
.ak-path-card.ak-tint-green { background: #D1FAE5; border-color: transparent; }
.ak-path-card.ak-tint-amber { background: #FEF3C7; border-color: transparent; }
.ak-path-card .ak-path-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: #fff; display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.ak-path-card .ak-path-icon svg { width: 26px; height: 26px; color: var(--ak-royal); }
.ak-path-card h3 { margin: 0 0 8px; }
.ak-path-card p { margin: 0 0 16px; color: var(--ak-body); }
@media (max-width: 1024px) { .ak-pathways { grid-template-columns: 1fr; } }

/* §4.4 — Consolidated Why Choose grid (deploy replaces BOTH
   offer blocks with one .ak-why grid of six cards; Lucide
   icons inline in the markup). */
.ak-why {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.ak-why-card {
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    padding: 28px 26px;
}
.ak-why-card .ak-why-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--ak-royal-wash);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.ak-why-card .ak-why-icon svg { width: 24px; height: 24px; color: var(--ak-royal); }
.ak-why-card h3 { margin: 0 0 8px; font-size: 20px; }
.ak-why-card p { margin: 0; color: var(--ak-body); }
@media (max-width: 1024px) { .ak-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ak-why { grid-template-columns: 1fr; } }

/* §4.5 — Campus Life bento gallery. Deploy restructures the
   four Learning-in-Action rows into ONE .ak-bento block of
   four tiles (text becomes the tile caption — same real copy,
   nothing dropped). Tile geometry is set per photo from the
   measured face/subject bands:
   - ICT (landscape 2560×1920): wide feature tile.
   - Chemistry (portrait): heads span 0–31.5% of frame height.
   - Assembly (landscape): group tile.
   - Chess (portrait): head 2.5–33.2%, board far edge ~54%,
     FIRST RANK ~54–62% — the tile must show a ≥62% window,
     which no 400px cell could (49.8%). Here the chess tile
     spans two rows (≥640px tall against a ~600px column ⇒
     window ≥66% at the 50% 2% anchor): head AND the full
     first rank fit, with margin at both ends. The board's
     near edge is outside the source photo entirely — no
     geometry can show it (verified in the 82–100% band). */
.ak-bento {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-auto-rows: 300px;
    gap: 18px;
}
.ak-bento-tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 0;
    background: var(--ak-navy);
}
.ak-bento-tile img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.ak-bento-tile figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 42px 20px 16px;
    background: linear-gradient(transparent, rgba(10, 25, 47, .88));
    color: #fff;
}
.ak-bento-tile figcaption strong {
    display: block;
    font: 700 19px/1.3 var(--ak-head);
    margin-bottom: 4px;
}
.ak-bento-tile figcaption span {
    display: block; font-size: 14px; line-height: 1.5; color: #E2E8F0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ak-bento-tile.ak-tile-ict { grid-column: 1; grid-row: 1; }
.ak-bento-tile.ak-tile-chem { grid-column: 2; grid-row: 1; }
.ak-bento-tile.ak-tile-assembly { grid-column: 1; grid-row: 2; }
.ak-bento-tile.ak-tile-chess { grid-column: 2; grid-row: 2 / span 2; }
/* Per-photo anchors inside the tiles (desktop geometry) */
.ak-bento-tile.ak-tile-chem img { object-position: 50% 0%; }
.ak-bento-tile.ak-tile-chess img { object-position: 50% 2%; }
.ak-bento-tile.ak-tile-ict img { object-position: 50% 30%; }
.ak-bento-tile.ak-tile-assembly img { object-position: 50% 30%; }
@media (max-width: 767px) {
    .ak-bento { grid-template-columns: 1fr; grid-auto-rows: 260px; }
    .ak-bento-tile.ak-tile-ict,
    .ak-bento-tile.ak-tile-chem,
    .ak-bento-tile.ak-tile-assembly,
    .ak-bento-tile.ak-tile-chess { grid-column: 1; grid-row: auto; }
    .ak-bento-tile.ak-tile-chess { grid-row: auto / span 2; }
}
/* The pre-restructure split rows (until deploy swaps in the
   bento) get the same elevated-card presentation. Their image
   cells, heights and face anchors stay main.css's. */
body.page-id-26 .acc-split {
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(10, 25, 47, .05);
    margin-bottom: 26px;
}
body.page-id-26 .acc-split img { border-radius: 14px; }

/* §4.6 — Faculty grid (RMP): 260px top-anchored portraits
   (object-position:top per spec), role pill, clamped bios,
   no template discs (main.css already hides the discs and
   flattens the kit structure; this layer restyles the cards
   it produces). */
@media (min-width: 1025px) {
    body.page-id-26 .elementor-element-3cbab727 .elementor-inner-section .elementor-col-50 {
        background: #fff;
        border: 1px solid var(--ak-line);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 26px rgba(10, 25, 47, .05);
    }
    body.page-id-26 .elementor-element-3cbab727 .elementor-widget-image img {
        width: 100%;
        height: 260px;
        border-radius: 0;
        object-position: top;
    }
    body.page-id-26 .elementor-element-3cbab727 .elementor-widget-heading .elementor-heading-title {
        font-size: 20px; font-weight: 700; text-align: left;
        padding: 0 22px;
    }
    body.page-id-26 .elementor-element-3cbab727 .elementor-col-50 .elementor-widget-wrap {
        padding-bottom: 20px;
    }
    body.page-id-26 .elementor-element-3cbab727 .elementor-col-50 .elementor-widget-wrap > .elementor-widget-text-editor {
        padding: 0 22px;
    }
    /* Qualification line becomes the role pill (it is the first
       text widget under the name in each card). */
    body.page-id-26 .elementor-element-3cbab727 .elementor-col-50 .elementor-widget-wrap > .elementor-widget-text-editor:first-of-type {
        display: inline-block;
        background: var(--ak-royal-tint);
        color: var(--ak-royal-dark);
        border-radius: 9999px;
        padding: 4px 12px;
        margin: 2px 22px 10px;
        font-size: 13px; font-weight: 600;
        width: auto;
    }
    /* Bio clamped to 3 lines per RMP */
    body.page-id-26 .elementor-element-3cbab727 .elementor-col-50 .elementor-widget-wrap > .elementor-widget-text-editor:last-child {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* §4.7 — Pre-footer: the closing CTA becomes the RMP royal
   banner; the map keeps its main.css frame directly beneath
   it, reading as one stacked split card. */
body.page-id-26 .acc-cta {
    background: var(--ak-royal);
    border-radius: 20px;
    padding: 52px 32px;
}
body.page-id-26 .acc-cta h2 { color: #fff; }
body.page-id-26 .acc-cta p { color: #E0F2FE; }
body.page-id-26 .acc-cta .ak-btn-white {
    display: inline-block;
    border: 1.5px solid #fff; color: #fff !important;
    font: 600 15px/1.2 var(--ak-text);
    padding: 13px 26px; border-radius: 9999px;
    text-decoration: none !important; margin-left: 10px;
}
body.page-id-26 .acc-cta .ak-btn-white:hover { background: rgba(255,255,255,.14); }

/* The "Get Started Today" banner section (4860986f) joins the
   token system: deep navy instead of the template blue. */
body.page-id-26 .elementor-26 .elementor-element.elementor-element-4860986f {
    background: var(--ak-navy);
}

/* "A complete school" cards join the token system */
body.page-id-26 .acc-card { border-radius: 16px; border-color: var(--ak-line); }
body.page-id-26 .acc-card h3 { color: var(--ak-navy); }
body.page-id-26 .acc-card .acc-icon {
    background: var(--ak-royal-tint);
    border-radius: 14px;
}
body.page-id-26 .acc-card .acc-icon svg { width: 30px; height: 30px; color: var(--ak-royal); }

/* ================================================================
   ACADEMICS (§5.2, REQ-002 — P0)
   Root fix for any narrow-column wrap: every Elementor column
   and widget on the page may shrink (min-width:0) and headings
   never break mid-word. The stage cards grid into 3-across
   (the page's real four stages flow 2×2 / 4-across); the
   subject list becomes pills.
   ================================================================ */
.ak-page-academics .elementor-column,
.ak-page-academics .elementor-widget-wrap,
.ak-page-academics .elementor-widget-container {
    min-width: 0;
}
.ak-page-academics h1, .ak-page-academics h2, .ak-page-academics h3,
.ak-page-academics .elementor-heading-title {
    word-break: normal;
    overflow-wrap: break-word;
}
/* Stage cards: whichever inner section holds the stages, lay
   its columns out as an even grid (deploy also tags the
   section .ak-tiers for precision). */
.ak-page-academics .ak-tiers .elementor-inner-section > .elementor-container,
.ak-page-academics .elementor-top-section .elementor-inner-section > .elementor-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
}
@media (max-width: 1024px) {
    .ak-page-academics .ak-tiers .elementor-inner-section > .elementor-container,
    .ak-page-academics .elementor-top-section .elementor-inner-section > .elementor-container {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 640px) {
    .ak-page-academics .ak-tiers .elementor-inner-section > .elementor-container,
    .ak-page-academics .elementor-top-section .elementor-inner-section > .elementor-container {
        grid-template-columns: 1fr;
    }
}
.ak-page-academics .ak-tiers .elementor-column > .elementor-element-populated,
.ak-page-academics .ak-tier-card {
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    padding: 28px 26px;
    height: 100%;
}
/* v2.0.1 (defect 3): the deployed stage cards are NOT Elementor
   columns — the deploy fallback built them as a plain HTML
   widget: <div class="ak-tiers"> wrapping four
   <article class="ak-tier-card">. The grid rules above only
   target .elementor-inner-section containers, so the four
   articles stacked as plain blocks. Grid the actual markup:
   2×2 on desktop (four stages), stacking on phones; the
   sidebar-narrowed content measure on this page keeps 2×2
   readable where 4-across would crush the cards. The card
   chrome itself comes from the .ak-tier-card rule above. */
.ak-page-academics div.ak-tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
@media (max-width: 640px) {
    .ak-page-academics div.ak-tiers { grid-template-columns: 1fr; }
}
/* Subject pills (deploy tags the subjects block .ak-subjects;
   the generic rule covers a plain list too) */
.ak-page-academics .ak-subjects ul,
.ak-page-academics .ak-subjects .elementor-text-editor ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.ak-page-academics .ak-subjects li {
    background: var(--ak-royal-wash);
    border: 1px solid var(--ak-royal-tint);
    color: var(--ak-navy);
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 14px; font-weight: 500;
}

/* ================================================================
   ADMISSIONS (§5.3, REQ-004)
   The 7/5 split is applied by tagging the restructured
   two-column section .ak-adm-split at deploy (form column
   .ak-adm-form ≈ 7/12, side column .ak-adm-side ≈ 5/12).
   The inquiry form itself is only styled — fields, plugin
   behaviour and submit flow untouched.
   ================================================================ */
.ak-page-admissions .ak-adm-split > .elementor-container {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    max-width: 1200px;
}
@media (max-width: 1024px) {
    .ak-page-admissions .ak-adm-split > .elementor-container { grid-template-columns: 1fr; }
}
.ak-page-admissions .ak-adm-form,
.ak-adm-form-card {
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 16px 36px rgba(10, 25, 47, .06);
}
@media (max-width: 640px) { .ak-adm-form-card { padding: 26px 20px; } }
/* RMP form control styling (presentation only) */
.ak-page-admissions input[type="text"],
.ak-page-admissions input[type="tel"],
.ak-page-admissions input[type="email"],
.ak-page-admissions select,
.ak-page-admissions textarea {
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    font-size: 15px;
    width: 100%;
    background: #fff;
    color: var(--ak-ink);
}
.ak-page-admissions textarea { height: auto; padding: 12px 16px; }
.ak-page-admissions input:focus,
.ak-page-admissions select:focus,
.ak-page-admissions textarea:focus {
    border-color: var(--ak-royal);
    box-shadow: 0 0 0 3px rgba(2,132,199,.15);
    outline: none;
}
.ak-page-admissions input[type="submit"],
.ak-page-admissions button[type="submit"] {
    width: 100%;
    height: 52px;
    background: var(--ak-royal);
    color: #fff;
    font: 600 15px var(--ak-text);
    border: 0; border-radius: 10px;
    cursor: pointer;
}
.ak-page-admissions input[type="submit"]:hover,
.ak-page-admissions button[type="submit"]:hover { background: var(--ak-royal-dark); }
/* ================================================================
   v2.0.2 — Admissions split width (defect 3 of the v2.0.1
   verify). The OceanWP per-page Content Layout IS now Full
   Width (body carries content-full-width; no #right-sidebar
   exists in the DOM), yet the form/roadmap pair rendered
   ≈682px combined inside the ≈1200px container. Fresh served
   evidence (2026-11-11): the deployed section
   (elementor-element-2767bafc, full_width) holds TWO plain
   Elementor columns — post-13.css sizes them 58%/42% at
   ≥768px — and the .ak-adm-split section the rules above
   were written for was REMOVED at the v2.0.0 deploy (the
   class survives nowhere on the page). The 58/42 machinery
   exists; what caps the pair is the Elementor container's
   own width, which the removal left governed by defaults
   the RMP never reset. Fix, scoped to this page and this
   section only: stretch the section's container to the full
   content width so the 58/42 column percentages apply to
   ≈1200px (≈695/505px) instead of ≈682px. The form's fields
   and behaviour are untouched; no other page is selected.
   ================================================================ */
.ak-page-admissions .elementor-element-2767bafc > .elementor-container {
    max-width: none;
    width: 100%;
}
/* ================================================================
   v2.0.3 (M5 desktop + M4 mobile — same section). v2.0.2's
   stretch rule above FAILED its live verification: at 1919px
   the form+roadmap pair still spanned only ≈686px of the
   ≈1200px container (form ≈432px, panel ≈242px, then ≈505px
   of white), AFTER cache purges — while the served cascade
   provably contains everything the width theory needs
   (container width:100%/max-width:none winning; post-13.css
   columns at 58%/42% for ≥768px; #content-wrap 1200px;
   #primary 100% !important). Two facts convict the flex ROW
   rather than any width declaration: (1) the pair's width
   tracked exactly the 58% share of the content measure in
   BOTH layout eras (≈475px when the content area was ≈72%,
   ≈686px at full width) — as if the row were laid out at
   first-column width; (2) the pair's INTERNAL split measured
   ≈63/37, which matches neither the columns' declared 58/42
   nor any served rule. Elementor 4.x drives every
   .elementor-element's flex sizing from its --flex-basis /
   --flex-grow / --flex-shrink custom-property machinery, and
   two rounds of width-based fixes (v2.0.0 expectations,
   v2.0.2 container stretch) demonstrably did not move the
   rendered row. So v2.0.3 takes the row OUT of flex sizing:
   the container becomes a grid whose tracks are fractions of
   the container BY DEFINITION — the same pattern this theme
   already uses for the Academics, About and Contact grids.
   The columns' own width declarations (post-13.css 58%/42%,
   Elementor's col-50) are neutralised inside this section
   only, so a percentage of a track can never shrink a column
   again; min-width:0 stops the wide form from forcing its
   track open. End state at desktop: pair ≈360→1560, split
   ≈696/504. M4: at ≤767px the same grid collapses to one
   column — form first (it is first in the DOM), roadmap
   below — replacing the phone rendering the owner shot,
   where the two columns stayed side by side at ≈40%/58%
   and the form's selects truncated ("Select C…").
   ================================================================ */
.ak-page-admissions .elementor-element-2767bafc > .elementor-container {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}
.ak-page-admissions .elementor-element.elementor-element-2767bafc .elementor-column {
    width: auto;
    min-width: 0;
}
@media (max-width: 767px) {
    .ak-page-admissions .elementor-element-2767bafc > .elementor-container {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Roadmap card (deploy-added markup, REAL 3 steps) */
.ak-roadmap {
    background: var(--ak-navy);
    color: #fff;
    border-radius: 16px;
    padding: 36px;
}
.ak-roadmap h3 { color: #fff; margin: 0 0 22px; }
.ak-roadmap ol { list-style: none; margin: 0; padding: 0; counter-reset: ak-step; }
.ak-roadmap li {
    counter-increment: ak-step;
    position: relative;
    padding: 0 0 22px 52px;
    color: #CBD5E1;
}
.ak-roadmap li:last-child { padding-bottom: 4px; }
.ak-roadmap li::before {
    content: counter(ak-step);
    position: absolute; left: 0; top: -2px;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ak-royal); color: #fff;
    font: 700 15px/36px var(--ak-head);
    text-align: center;
}
.ak-roadmap li strong { display: block; color: #fff; font-size: 16.5px; margin-bottom: 3px; }
.ak-helpbox {
    border: 1.5px solid var(--ak-royal-tint);
    background: var(--ak-royal-wash);
    border-radius: 12px;
    padding: 20px 22px;
    margin-top: 22px;
    color: var(--ak-body);
}
.ak-helpbox strong { color: var(--ak-navy); }

/* ================================================================
   CONTACT (§5.5, REQ-005)
   ================================================================ */
.ak-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 900px) { .ak-contact-cards { grid-template-columns: 1fr; } }
.ak-contact-card {
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    padding: 28px 26px;
}
.ak-contact-card .ak-cc-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--ak-royal-tint);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.ak-contact-card .ak-cc-icon svg { width: 24px; height: 24px; color: var(--ak-royal); }
.ak-contact-card h3 { margin: 0 0 6px; font-size: 20px; }
.ak-contact-card p { margin: 0; color: var(--ak-body); }
.ak-contact-card .ak-cc-sub { margin-top: 6px; font-size: 14px; color: var(--ak-muted); }
/* Legacy kit icon boxes on Contact: seat any surviving glyph
   in the same rounded-square so nothing renders as a blank
   circle while the strip above replaces them. */
.ak-page-contact .elementor-widget-icon-box .elementor-icon {
    background: var(--ak-royal-tint);
    border-radius: 14px;
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ak-royal); fill: var(--ak-royal);
}
/* Form + map split (deploy tags the section .ak-contact-split) */
.ak-page-contact .ak-contact-split > .elementor-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .ak-page-contact .ak-contact-split > .elementor-container { grid-template-columns: 1fr; }
}
.ak-page-contact .ak-contact-split iframe {
    width: 100%; height: 100%; min-height: 380px;
    border: 0; border-radius: 16px; display: block;
}
.ak-page-contact input[type="text"],
.ak-page-contact input[type="email"],
.ak-page-contact textarea {
    border: 1.5px solid #CBD5E1; border-radius: 8px;
    font-size: 15px; padding: 12px 16px; width: 100%;
}
.ak-page-contact input:focus, .ak-page-contact textarea:focus {
    border-color: var(--ak-royal);
    box-shadow: 0 0 0 3px rgba(2,132,199,.15); outline: none;
}
.ak-page-contact input[type="submit"] {
    background: var(--ak-royal); color: #fff; border: 0;
    border-radius: 10px; padding: 14px 28px;
    font: 600 15px var(--ak-text); cursor: pointer; min-height: 48px;
}
.ak-page-contact input[type="submit"]:hover { background: var(--ak-royal-dark); }

/* ================================================================
   STUDENT LOGIN (§5.6, REQ-003)
   The wlsm form is restyled, never re-behaved. Standalone it
   becomes a centred card; when the deploy step wraps it with
   the branding panel in .ak-login-split, it becomes the RMP
   two-panel card.
   ================================================================ */
.ak-page-login .wlsm-login-form {
    max-width: 560px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(10, 25, 47, .08);
    padding: 44px 44px 36px;
}
@media (max-width: 640px) {
    .ak-page-login .wlsm-login-form { padding: 30px 22px 26px; margin: 24px 12px; }
}
.ak-page-login .wlsm-login-form label {
    font: 600 14px var(--ak-text);
    color: #1E293B;
    display: block;
    margin-bottom: 8px;
}
.ak-page-login .wlsm-login-form input[type="text"],
.ak-page-login .wlsm-login-form input[type="email"],
.ak-page-login .wlsm-login-form input[type="password"] {
    width: 100%;
    height: 48px;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 15px;
    margin-bottom: 18px;
}
.ak-page-login .wlsm-login-form input:focus {
    border-color: var(--ak-royal);
    box-shadow: 0 0 0 3px rgba(2,132,199,.15); outline: none;
}
.ak-page-login .wlsm-login-form input[type="submit"],
.ak-page-login .wlsm-login-form button[type="submit"] {
    width: 100%;
    height: 50px;
    background: var(--ak-royal);
    color: #fff;
    border: 0; border-radius: 10px;
    font: 600 15px var(--ak-text);
    cursor: pointer;
}
.ak-page-login .wlsm-login-form input[type="submit"]:hover,
.ak-page-login .wlsm-login-form button[type="submit"]:hover { background: var(--ak-royal-dark); }
/* Remember-me / lost-password on one row where the markup
   allows (flex on the form's utility paragraph/container). */
.ak-page-login .wlsm-login-form .wlsm-form-group:last-of-type,
.ak-page-login .wlsm-login-form p.login-remember {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
}
/* Two-panel split (deploy wraps form + branding block) */
.ak-page-login .ak-login-split {
    max-width: 920px;
    margin: 56px auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(10, 25, 47, .08);
    overflow: hidden;
}
.ak-page-login .ak-login-split > .elementor-container {
    display: grid;
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}
@media (max-width: 860px) {
    .ak-page-login .ak-login-split > .elementor-container { grid-template-columns: 1fr; }
}
.ak-page-login .ak-login-split .wlsm-login-form {
    max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
}
.ak-login-brand {
    background: var(--ak-navy);
    color: #fff;
    padding: 48px;
    height: 100%;
}
.ak-login-brand img { max-width: 84px; max-height: 84px; object-fit: contain; background: #fff; border-radius: 14px; padding: 5px; }
.ak-login-brand h2 { color: #fff; margin: 22px 0 18px; font-size: 28px; }
.ak-login-brand ul { list-style: none; margin: 0; padding: 0; }
.ak-login-brand li {
    display: flex; gap: 10px; align-items: flex-start;
    margin-bottom: 14px; color: #CBD5E1; font-size: 15px;
}
.ak-login-brand li svg { width: 20px; height: 20px; flex: none; color: var(--ak-green); margin-top: 2px; }
.ak-login-help {
    max-width: 920px; margin: -28px auto 48px;
    text-align: center; font-size: 13px; color: var(--ak-muted);
}

/* ================================================================
   ABOUT (§5.1, REQ-008)
   ================================================================ */
/* Navy page hero: the page's first top section, when tagged
   .ak-page-hero at deploy; generic fallback tints the OceanWP
   page-header area if present. */
.ak-page-about .ak-page-hero {
    background: var(--ak-navy);
    min-height: 220px;
    display: flex; align-items: center;
}
.ak-page-about .ak-page-hero h1,
.ak-page-about .ak-page-hero .elementor-heading-title { color: #fff; }
.ak-page-about .ak-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    color: #94A3B8; font-size: 14px;
}
.ak-page-about .ak-breadcrumb svg { width: 16px; height: 16px; }
.ak-page-about .ak-breadcrumb a { color: #CBD5E1; }
/* Values cards — the page's REAL principles (Learning first /
   Care for every child / Character and community). Deploy tags
   the section .ak-values; columns become equal cards. */
.ak-page-about .ak-values .elementor-inner-section > .elementor-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}
@media (max-width: 900px) {
    .ak-page-about .ak-values .elementor-inner-section > .elementor-container { grid-template-columns: 1fr; }
}
.ak-page-about .ak-values .elementor-column > .elementor-element-populated {
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    padding: 30px 28px;
    height: 100%;
    box-shadow: 0 10px 26px rgba(10, 25, 47, .05);
}
/* v2.0.1 (defect 4): same failure shape as Academics — the
   deployed values block is an HTML widget holding the school's
   homepage-style cards (<div class="acc-grid3"> with three
   .acc-card children) inside the .ak-values section, not
   Elementor columns, so the inner-section grid rule above
   never matched and the cards stacked; and because main.css's
   .acc-grid3 grid is homepage-scoped (body.page-id-26), no
   grid applied here at all. Page-scope the grid + card chrome
   to the About values block only (homepage rules untouched).
   The "large blue disc" icons are .acc-icon's homepage
   presentation without its flex centring here — the icon is
   centred inside its disc by the rules below. */
.ak-page-about .ak-values .acc-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 1024px) {
    .ak-page-about .ak-values .acc-grid3 { grid-template-columns: 1fr; }
}
.ak-page-about .ak-values .acc-card {
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 10px 26px rgba(10, 25, 47, .05);
}
.ak-page-about .ak-values .acc-card .acc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
    margin-bottom: 16px;
    /* v2.0.2 (defect 2 of the v2.0.1 verify): centre the DISC
       itself in the card. The rule above centred the glyph
       inside the disc, but the disc is a 74px-wide block
       (sized by a pre-theme snippet rule, !important) and a
       block boxes to the LEFT edge of its card — the deploy
       measured disc centres ≈60/46/42px left of the column
       centres while the glyph sat dead-centre in its disc.
       margin-inline:auto is the missing half; it centres the
       fixed-width disc in the card at every width. The
       matching homepage-scoped rule in main.css has the same
       one-sided pattern but the homepage cards were verified
       centred — homepage rules are deliberately untouched. */
    margin-inline: auto;
}
.ak-page-about .ak-values .acc-card h3 { margin: 0 0 8px; }
.ak-page-about .ak-values .acc-card p { margin: 0; }
/* Facilities grid (deploy-added .ak-facilities; ONLY facilities
   evidenced on the site: science labs, ICT centre, sports) */
.ak-facilities {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 900px) { .ak-facilities { grid-template-columns: 1fr; } }
.ak-facility {
    background: var(--ak-canvas);
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    padding: 28px 26px;
    text-align: left;
}
.ak-facility .ak-fac-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: var(--ak-royal-tint);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.ak-facility .ak-fac-icon svg { width: 24px; height: 24px; color: var(--ak-royal); }
.ak-facility h3 { margin: 0 0 6px; font-size: 19px; }
.ak-facility p { margin: 0; color: var(--ak-body); font-size: 15px; }

/* ================================================================
   NEWS (§5.4)
   Uniform card grid over the posts listing. Filter pills are
   deliberately NOT shipped: they could not be wired to real
   categories from the theme layer, and a control that does
   nothing is worse than none (flagged in the report).
   ================================================================ */
.ak-page-news .elementor-posts,
.ak-page-news .oceanwp-blog-entries,
.ak-page-news #blog-entries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
}
@media (max-width: 420px) {
    .ak-page-news .elementor-posts,
    .ak-page-news .oceanwp-blog-entries,
    .ak-page-news #blog-entries { grid-template-columns: 1fr; }
}
.ak-page-news .elementor-post,
.ak-page-news article.blog-entry {
    background: #fff;
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    overflow: hidden;
    display: flex; flex-direction: column;
    margin: 0;
}
.ak-page-news .elementor-post__thumbnail,
.ak-page-news .blog-entry-thumbnail {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}
.ak-page-news .elementor-post__thumbnail img,
.ak-page-news .blog-entry-thumbnail img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.ak-page-news .elementor-post__title,
.ak-page-news .blog-entry-title {
    font-size: 19px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ak-page-news .elementor-post__excerpt,
.ak-page-news .blog-entry-summary {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--ak-body);
}
.ak-page-news .elementor-post__text,
.ak-page-news .blog-entry-inner { padding: 20px 22px 24px; }
.ak-page-news .elementor-post__meta-data,
.ak-page-news .blog-entry-meta {
    font-size: 13px; color: var(--ak-muted);
}
/* v2.0.1 (defect 7): /news/ is OceanWP's LARGE-entry blog layout
   (article.blog-entry.large-entry inside #blog-entries), and the
   rules above missed it three ways: (1) the .ak-page-news body
   class was never emitted (functions.php now adds it for
   is_home()); (2) OceanWP scopes the thumbnail under
   .thumbnail, not .blog-entry-thumbnail; (3) the summary lives
   in .blog-entry-summary p, there is no .blog-entry-inner
   wrapper — the padded box is .blog-entry-inner in OceanWP's
   grid/medium layouts only. Large-entry corrections below;
   the generic card rules above still apply. */
.ak-page-news #blog-entries {
    align-items: stretch;
}
.ak-page-news article.blog-entry.large-entry {
    border-bottom: 1px solid var(--ak-line);
    margin: 0;
    padding: 0;
}
.ak-page-news .blog-entry.large-entry .blog-entry-inner {
    display: flex; flex-direction: column; height: 100%;
}
.ak-page-news .blog-entry.large-entry .thumbnail {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0;
}
.ak-page-news .blog-entry.large-entry .thumbnail img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.ak-page-news .blog-entry.large-entry .blog-entry-header {
    padding: 18px 22px 0;
}
.ak-page-news .blog-entry.large-entry .blog-entry-summary {
    padding: 0 22px;
}
.ak-page-news .blog-entry.large-entry .blog-entry-summary p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--ak-body);
}
.ak-page-news .blog-entry.large-entry .blog-entry-readmore {
    padding: 0 22px 22px;
    margin-top: auto;
}

/* ================================================================
   v2.0.3 (M3 — "some icons don't look good", owner's phone
   check). Diagnosis, from the served code: a pre-theme WPCode
   snippet ("Level 2 batch 3: feature-card icon discs in sky",
   read-only evidence) owns the disc's size and colour —
   .acc-icon { background:#69a7e2 !important; width:74px
   !important; height:74px !important; border-radius:50%
   !important } and .acc-icon svg { stroke:#fff !important;
   width:34px; height:34px } — but sets NO centring. The
   theme's flex centring only ever existed scoped to the
   homepage selector (main.css: body.page-id-26 .acc-card
   .acc-icon) and the About values cards (pages.css), so on
   Academics — whose tier cards are plain .acc-card > .acc-icon
   > svg markup in an HTML widget — the glyph sat at the
   disc's top-left, exactly as the owner's Academics shot
   shows (74 CSS px disc, glyph riding the top-left edge).
   The same shot and the homepage shot show the pale sky
   disc reading washed-out at phone size.
   Fix: ONE icon system for every .acc-icon on the site, all
   widths — a 60px disc in a richer royal tint (#BFE3F7),
   glyph centred on both axes by flex, glyph 28px in
   royal-dark #0369A1 (≈3.9:1 on the tint, a large graphic).
   The contested properties carry !important AND a body
   prefix, so they outrank the snippet's !important rules on
   specificity ((0,1,1)/(0,1,2) against (0,1,0)/(0,1,1))
   regardless of print order; the snippet itself is not
   touched. Margins are deliberately NOT set here, so the
   About discs keep v2.0.2's margin-inline:auto block
   centring and the homepage cards keep their spacing.
   Desktop effect (intended, called out in the runbook):
   homepage and About discs go 74px→60px, sky→royal tint,
   white glyph→royal-dark glyph; grids, card layout and
   centring are unchanged. Contact-strip icons and the
   footer contact icons use different classes and are not
   selected here.
   ================================================================ */
body .acc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #BFE3F7 !important;
    background-color: #BFE3F7 !important;
    color: var(--ak-royal-dark) !important;
}
body .acc-icon svg {
    width: 28px !important;
    height: 28px !important;
    stroke: var(--ak-royal-dark) !important;
    fill: none !important;
    flex: none;
}
body .acc-icon svg * {
    stroke: var(--ak-royal-dark) !important;
    fill: none !important;
}