/* ============================================================
   Anikeola Schools Child — SHELL (v2.0.0)
   The 2026 UI/UX RMP global layer: design tokens, typography,
   buttons, top utility bar (§3.1), single-row glass sticky
   header (§3.2), deduplicated 4-column footer (§3.3) and the
   §6 QA rules (no horizontal overflow, 44px touch targets).
   Loads after main.css; every v1.1.x carry-over in main.css
   and carousel.css keeps working underneath.
   ============================================================ */

:root {
    --ak-navy: #0A192F;
    --ak-navy-2: #0F294A;
    --ak-royal: #0284C7;
    --ak-royal-dark: #0369A1;
    --ak-royal-tint: #E0F2FE;
    --ak-royal-wash: #F0F9FF;
    --ak-amber: #F59E0B;
    --ak-amber-dark: #D97706;
    --ak-canvas: #F8FAFC;
    --ak-ink: #0F172A;
    --ak-body: #334155;
    --ak-muted: #64748B;
    --ak-line: #E2E8F0;
    --ak-green: #10B981;
    --ak-head: 'Plus Jakarta Sans', Inter, Arial, sans-serif;
    --ak-text: Inter, 'Segoe UI', Arial, sans-serif;
}

/* ---------- Base typography (RMP §2.2) ---------- */
body {
    font-family: var(--ak-text);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ak-body);
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--ak-head) !important;
    color: var(--ak-navy);
    letter-spacing: -0.01em;
}
h1, .elementor-widget-heading h1.elementor-heading-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
}
h2, .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.25;
}
h3, .elementor-widget-heading h3.elementor-heading-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
}
input, select, textarea, button {
    font-family: var(--ak-text);
}
a { color: var(--ak-royal); }
a:hover { color: var(--ak-royal-dark); }

/* ---------- QA §6: no horizontal overflow, ever ---------- */
html, body { overflow-x: clip; }
img, iframe, video { max-width: 100%; }

/* ---------- Button system (RMP §2.3) ---------- */
.ak-btn-amber,
a.ak-btn-amber {
    display: inline-block;
    background: var(--ak-amber);
    color: var(--ak-navy) !important;
    font: 600 15px/1.2 var(--ak-text);
    padding: 14px 28px;
    border-radius: 9999px;
    text-decoration: none !important;
    transition: background .2s ease, transform .2s ease;
}
.ak-btn-amber:hover { background: var(--ak-amber-dark); color: var(--ak-navy) !important; transform: translateY(-2px); }
.ak-btn-brand,
a.ak-btn-brand {
    display: inline-block;
    background: var(--ak-royal);
    color: #fff !important;
    font: 600 15px/1.2 var(--ak-text);
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background .2s ease, box-shadow .2s ease;
}
.ak-btn-brand:hover { background: var(--ak-royal-dark); color: #fff !important; box-shadow: 0 8px 20px rgba(2,132,199,.25); }
.ak-btn-outline,
a.ak-btn-outline {
    display: inline-block;
    background: transparent;
    border: 1.5px solid var(--ak-royal);
    color: var(--ak-royal) !important;
    font: 600 15px/1.2 var(--ak-text);
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background .2s ease;
}
.ak-btn-outline:hover { background: var(--ak-royal-wash); }
.ak-btn-ghost,
a.ak-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ak-royal) !important;
    font: 600 15px/1.2 var(--ak-text);
    text-decoration: none !important;
}
.ak-btn-ghost svg { width: 18px; height: 18px; transition: transform .2s ease; }
.ak-btn-ghost:hover svg { transform: translateX(4px); }

/* The site's existing .acc-btn (hero + closing CTA) becomes
   the RMP primary conversion button: amber pill. */
.acc-btn {
    background: var(--ak-amber);
    color: var(--ak-navy) !important;
    font: 600 15px/1.2 var(--ak-text);
    padding: 14px 28px;
    border-radius: 9999px;
    box-shadow: none;
}
.acc-btn:hover, .acc-btn:focus {
    background: var(--ak-amber-dark);
    color: var(--ak-navy) !important;
    transform: translateY(-2px);
}

/* ---------- Top utility bar (RMP §3.1) ---------- */
.ak-topbar {
    background: var(--ak-navy);
    color: #F8FAFC;
    font: 500 13px/1.3 var(--ak-text);
    position: relative;
    z-index: 1001;
}
.ak-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    min-height: 40px;
    padding: 4px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ak-topbar-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ak-tb-item {
    display: inline-flex; align-items: center; gap: 7px;
    color: #F8FAFC !important; text-decoration: none !important;
    min-height: 32px;
}
.ak-tb-item:hover { color: var(--ak-amber) !important; }
.ak-tb-item svg { width: 15px; height: 15px; flex: none; }
.ak-topbar-right { display: flex; align-items: center; gap: 8px; }
.ak-tb-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ak-green); flex: none;
    animation: ak-pulse 2s ease-in-out infinite;
}
@keyframes ak-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
    50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
@media (prefers-reduced-motion: reduce) { .ak-tb-dot { animation: none; } }
.ak-tb-apply {
    color: var(--ak-amber) !important; font-weight: 700;
    text-decoration: none !important; white-space: nowrap;
}
.ak-tb-apply:hover { color: #FBBF24 !important; }
@media (max-width: 900px) {
    .ak-tb-address span, .ak-tb-mail span { display: none; }
    .ak-tb-item { min-height: 36px; }
}
@media (max-width: 560px) {
    .ak-tb-note { display: none; }
    .ak-topbar-inner { justify-content: center; }
}

/* OceanWP's own top bar renders empty on this site — hide its
   shell so it adds no stray height above the RMP bar. */
#top-bar-wrap { display: none; }

/* ---------- Sticky shell + glass header (RMP §3.2, REQ-001) ----------
   The wrap (top bar + header) sticks with a -40px offset so the
   utility bar scrolls away and the 84px glass header stays. */
#site-header-wrap {
    position: sticky;
    top: -40px;
    z-index: 1000;
}
#site-header.minimal-header,
#site-header {
    background: rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ak-line);
    box-shadow: none;
}
#site-header #site-header-inner {
    min-height: 84px;
    /* v2.0.3 (M1 — no hamburger on mobile): this cap used to be
       a flat 1280px. #site-header-inner is also OceanWP's
       .container (width:1200px; max-width:90%), and this rule's
       specificity (two IDs) silently killed the 90% viewport
       cap — so on a phone the header row stayed 1200px wide,
       the flex row's last item (the .oceanwp-mobile-menu-icon
       toggle, margin-left:auto) landed ~800px beyond the right
       edge of the screen, and shell.css's own overflow-x:clip
       cut it off. Desktop nav is display:none at ≤959px, so
       mobile visitors had NO navigation at all. The toggle
       markup was in the DOM all along (verified in the served
       HTML, with #mobile-dropdown). min() keeps the 1280
       design cap on wide screens and restores the viewport
       cap everywhere else; at ≥1280px viewports the rendered
       header is byte-for-byte the v2.0.2 layout (width:1200px
       still governs). The two footer inners below carry the
       same .container + flat-cap combination and get the
       same fix — the owner's phone shot of Admissions shows
       footer text clipped at the right edge by it. */
    max-width: min(1280px, 100%);
    gap: 16px;
}

/* Brand lockup: crest at the RMP's 48px (the near-square master
   renders ≈45×48, undistorted), name/motto as a placed grid —
   since v2.0.4 the name rides ::after ALONE and the motto rides
   ::before ALONE, each theme-owned with !important content, so
   the two lines size independently (owner's instruction: the
   motto at half the name's size). Specificity (3 IDs + class)
   beats both snippet rules that fight over these pseudos —
   the full cascade evidence is in DEPLOY-v2.0.4.md. */
#site-header #site-logo-inner .custom-logo-link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    text-decoration: none;
}
#site-header #site-logo-inner .custom-logo-link img.custom-logo {
    grid-column: 1; grid-row: 1 / span 2;
    max-width: 48px; max-height: 48px;
    width: auto; height: auto; object-fit: contain;
}
#site-header #site-logo #site-logo-inner .custom-logo-link::after {
    /* v2.0.4 (owner: "Learning Towards a Better Society is too
       big — reduce it, half the size of Anikeola Schools"):
       ::after now carries the NAME LINE ONLY. v2.0.1 merged both
       lines onto ::after because the WPCode snippet's two-line
       ::after content (!important) beat the theme's split — but
       the theme's content here is !important at specificity
       (3,1,1) against the snippet's LIVE rule at (0,1,1) (bare
       .custom-logo-link::after; its (2,1,1) twin is anchored to
       #site-header-wrap, which does not exist in the served
       header markup), so the theme's content wins outright and
       the split is safe. History: v2.0.1 defect 5, DEPLOY-
       v2.0.4.md §1. Typography is byte-for-byte the v2.0.1–2.0.3
       rendering of the combined block, so the name line renders
       EXACTLY as before; grid-row is now 1 (was 1 / span 2) and
       align-self:end pairs with the motto's align-self:start so
       the two lines hug as one centred block beside the crest. */
    content: "Anikeola Schools" !important;
    grid-column: 2; grid-row: 1;
    align-self: end;
    white-space: pre-line;
    font: 800 19px/1.35 var(--ak-head);
    color: var(--ak-navy);
    letter-spacing: -0.01em;
}
#site-header #site-logo #site-logo-inner .custom-logo-link::before {
    /* v2.0.4: the MOTTO LINE lives here, alone, at half the
       name's size (9.5px against 19px; the media queries below
       halve in step: 9px vs 18px at ≤1024px, 8px vs 16px at
       ≤767px). Same family, weight and colour as the name —
       the owner's complaint was size only, and at 9.5px the
       RMP's old 500-weight muted treatment (designed for 12px)
       would go faint; the shared 800 keeps the stroke legible.
       content is !important because a snippet rule sets
       content:none !important on this pseudo for every page
       except Login (body:not(.page-id-73) #site-logo a::before,
       specificity (1,1,3)) — beaten here on IDs, 3 vs 1.
       The width/height/background/margin resets answer the
       same snippet family's badge rule (body:not(.elementor-
       page) #site-logo a::before: a 52×52 school-badge.jpg box),
       which fires on non-Elementor pages such as /news/ and
       would otherwise size and paint this text box. As a grid
       item the pseudo is blockified by the grid itself, so no
       display value is needed. Retired-empty in v2.0.1; the
       slot is the motto's again. */
    content: "Learning Towards a Better Society" !important;
    grid-column: 2; grid-row: 2;
    align-self: start;
    /* Owner follow-up (2026-11-11): the motto is also ITALIC —
       folded into the shorthand itself, because the font
       shorthand would reset a separate font-style longhand. */
    font: italic 800 9.5px/1.3 var(--ak-head);
    color: var(--ak-navy);
    letter-spacing: -0.01em;
    width: auto; height: auto;
    background: none;
    margin: 0; margin-right: 0;
    vertical-align: baseline;
}

/* Centre navigation + link states */
#site-header #site-navigation-wrap {
    margin-left: auto; margin-right: auto;
}
#site-navigation .main-menu {
    display: flex; align-items: center; gap: 28px;
}
#site-navigation .main-menu > li > a.menu-link {
    font: 500 15px/1.2 var(--ak-text);
    color: var(--ak-body) !important;
    padding: 10px 0;
    position: relative;
    text-decoration: none;
}
#site-navigation .main-menu > li > a.menu-link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
    height: 2px; background: var(--ak-royal);
    transition: right .25s ease;
}
#site-navigation .main-menu > li > a.menu-link:hover { color: var(--ak-royal) !important; }
#site-navigation .main-menu > li > a.menu-link:hover::after { right: 0; }
#site-navigation .main-menu > li.current-menu-item > a.menu-link,
#site-navigation .main-menu > li.current_page_item > a.menu-link {
    color: var(--ak-royal) !important;
}
#site-navigation .main-menu > li.current-menu-item > a.menu-link::after,
#site-navigation .main-menu > li.current_page_item > a.menu-link::after { right: 0; }

/* Action group: Student Login outline + Apply Now amber pill */
#site-navigation .main-menu > li.ak-login-link > a.menu-link {
    border: 1.5px solid var(--ak-royal);
    color: var(--ak-royal) !important;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
}
#site-navigation .main-menu > li.ak-login-link > a.menu-link::after { display: none; }
#site-navigation .main-menu > li.ak-login-link > a.menu-link:hover { background: var(--ak-royal-wash); }
#site-navigation .main-menu > li.ak-apply-item > a.menu-link.ak-apply-link {
    background: var(--ak-amber);
    color: var(--ak-navy) !important;
    border-radius: 9999px;
    padding: 12px 22px;
    font-weight: 600;
}
#site-navigation .main-menu > li.ak-apply-item > a.menu-link.ak-apply-link::after { display: none; }
#site-navigation .main-menu > li.ak-apply-item > a.menu-link.ak-apply-link:hover {
    background: var(--ak-amber-dark); color: var(--ak-navy) !important;
}

/* Header responsiveness: OceanWP's own breakpoint collapses the
   menu to the mobile toggle; keep the lockup and tap targets
   sane all the way down (RMP §6: 44px targets, compact bar). */
/* ≤959px is OceanWP's mobile-menu breakpoint (body.default-
   breakpoint shows .oceanwp-mobile-menu-icon there and the
   desktop nav wrap hides). v2.0.3 (M1): with the header row
   back inside the viewport (min() fix above), make sure the
   toggle can never be squeezed or pushed out again — it
   keeps its natural size, and the logo block (not the
   toggle) absorbs any shortage of room. main.css already
   gives the toggle margin-left:auto at ≤959px, which is
   what right-aligns it once the row fits the screen. */
@media (max-width: 959px) {
    #site-header .oceanwp-mobile-menu-icon { flex: none; }
    #site-header #site-logo,
    #site-header #site-logo-inner { min-width: 0; }
}
@media (max-width: 1024px) {
    #site-header #site-logo #site-logo-inner .custom-logo-link::after { font-size: 18px; }
    /* v2.0.4: motto halves in step with the name (18px → 9px). */
    #site-header #site-logo #site-logo-inner .custom-logo-link::before { font-size: 9px; }
}
@media (max-width: 767px) {
    #site-header-wrap { top: -44px; }
    #site-header #site-header-inner { min-height: 68px; }
    #site-header #site-logo-inner .custom-logo-link img.custom-logo { max-width: 40px; max-height: 40px; }
    #site-header #site-logo #site-logo-inner .custom-logo-link::after { font-size: 16px; }
    /* v2.0.4: was the retired slot's dead 11px; now the motto
       at half the name's mobile size (16px → 8px). */
    #site-header #site-logo #site-logo-inner .custom-logo-link::before { font-size: 8px; }
    #site-header .oceanwp-mobile-menu-icon a {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
}

/* ---------- Footer (RMP §3.3, REQ-007) ---------- */
#footer, #footer-widgets, #footer-bottom {
    background: var(--ak-navy);
    color: #CBD5E1;
}
#footer-widgets { padding: 72px 0 8px; }
#footer-widgets .footer-widgets-inner {
    /* v2.0.3: min() — same .container flat-cap fix as the
       header inner above (M1); desktop rendering unchanged. */
    max-width: min(1280px, 100%);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
    float: none;
}
#footer-widgets .footer-box {
    float: none; width: auto; margin: 0; padding: 0;
}
#footer-widgets .widget-title {
    font: 700 16px/1.3 var(--ak-head);
    color: #fff;
    margin: 0 0 18px;
    border: 0; padding: 0;
}
#footer-widgets a { color: #CBD5E1; text-decoration: none; }
#footer-widgets a:hover { color: var(--ak-amber); }
#footer-widgets ul.menu { list-style: none; margin: 0; padding: 0; }
#footer-widgets ul.menu li { margin: 0 0 10px; padding: 0; border: 0; }
#footer-widgets ul.menu a {
    font-size: 14.5px; display: inline-block; padding: 3px 0;
}
/* Column 1 identity: crest at 64px when the widget carries it */
#footer-widgets .footer-box.col-1 img {
    max-width: 64px; max-height: 64px; object-fit: contain;
    background: #fff; border-radius: 12px; padding: 4px;
}
#footer-widgets .footer-box.col-1 p { font-size: 14.5px; line-height: 1.65; color: #CBD5E1; }
/* Column 4 contact rows (when built with .ak-f-contact) */
.ak-f-contact { list-style: none; margin: 0; padding: 0; }
.ak-f-contact li {
    display: flex; gap: 10px; align-items: flex-start;
    margin-bottom: 12px; font-size: 14.5px; line-height: 1.5;
}
.ak-f-contact svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ak-royal); }
/* Latest News separation (v1.1.5 pattern, kept + tokenised) */
#footer-widgets .widget_recent_entries li { margin-bottom: 14px; }
#footer-widgets .widget_recent_entries li a { display: block; font-size: 14.5px; line-height: 1.45; }
#footer-widgets .widget_recent_entries .post-date {
    display: block; margin-top: 2px; font-size: 12.5px; color: #94A3B8;
}
/* Bottom legal bar: the redundant menu goes (RMP §3.3);
   copyright left, motto right (the motto span is added by
   main.js; the pair wraps cleanly on phones). */
#footer-bottom { border-top: 1px solid #1E293B; padding: 20px 0 26px; }
#footer-bottom-menu { display: none !important; }
#footer-bottom-inner {
    /* v2.0.3: min() — same .container flat-cap fix as above. */
    max-width: min(1280px, 100%);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; float: none;
}
#footer-bottom #copyright {
    color: #CBD5E1; font-size: 13.5px; float: none; width: auto;
}
#footer-bottom .ak-motto {
    color: #94A3B8; font: italic 500 13.5px var(--ak-text);
}
@media (max-width: 1024px) {
    #footer-widgets .footer-widgets-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 767px) {
    #footer-widgets { padding: 48px 0 4px; }
    #footer-widgets .footer-widgets-inner { grid-template-columns: 1fr; gap: 30px; }
    #footer-bottom-inner { justify-content: center; text-align: center; }
}

/* Elementor section rhythm on the new canvas */
.elementor-section.ak-section { padding: 80px 0; }
@media (max-width: 767px) {
    .elementor-section.ak-section { padding: 52px 0; }
}