/* ═══════════════════════════════════════════════════════════════════
   ZOLLEGE — Professional education-portal design system
   Inspired by CollegeDunia / CollegeDekho, but cleaner and more premium.
   Loaded site-wide from layouts/main.php.

   Usage: tokens are global; visual components are opt-in classes (pg-*),
   so adding this file cannot break existing admin/legacy screens.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --pri: #1E50A0;          /* primary blue */
    --pri-dk: #16386F;
    --pri-lt: #2A62C9;
    --pri-soft: #EEF3FB;
    --acc: #F97316;          /* orange CTA */
    --acc-dk: #EA6A0C;
    --acc-soft: #FFF1E8;
    --ok: #16A34A;
    --ok-soft: #E9F7EF;
    --warn: #F59E0B;
    --ink: #0F172A;
    --body: #475569;
    --muted: #64748B;
    --faint: #94A3B8;
    --line: #E5EAF1;
    --bg: #F5F8FC;
    --card: #FFFFFF;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -14px rgba(15, 23, 42, .18);
    --shadow-md: 0 1px 3px rgba(15, 23, 42, .05), 0 16px 34px -20px rgba(15, 23, 42, .22);
}

/* Gentle global polish (safe for every page) */
body { -webkit-font-smoothing: antialiased; }
.pg h1, .pg h2, .pg h3, .pg h4 { color: var(--ink); letter-spacing: -.02em; }

/* ── Page wrapper ───────────────────────────────────────────── */
.pg { background: var(--bg); color: var(--body); }

/* ── Page hero band (inner pages) ───────────────────────────── */
.pg-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--pri-dk) 0%, var(--pri) 58%, var(--pri-lt) 100%);
}
.pg-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(820px 420px at 85% -15%, rgba(249, 115, 22, .18), transparent 60%);
}
.pg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .13; }
.pg-hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 40px 32px 46px; }
.pg-crumbs { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.68); margin-bottom: 16px; flex-wrap: wrap; }
.pg-crumbs a { color: rgba(255,255,255,.68); transition: color .2s; }
.pg-crumbs a:hover { color: #fff; }
.pg-crumbs .sep { opacity: .45; }
.pg-crumbs .cur { color: #fff; }
/* `.pg h1` below sets the ink colour for page headings; a hero title inside a
   `.pg` wrapper would inherit it and render navy-on-navy, so it is listed with
   equal specificity here and wins on order. */
.pg-hero-title, .pg .pg-hero-title { color: #fff; font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 10px; }
.pg-hero-sub { color: rgba(255,255,255,.82); font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.55; max-width: 680px; margin: 0; }
.pg-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pg-hero-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 12.5px; font-weight: 650; padding: 7px 14px; border-radius: 999px; }
.pg-hero-stats { display: flex; flex-wrap: wrap; gap: clamp(20px,4vw,48px); margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); }
.pg-hero-stat .v { color: #fff; font-weight: 800; font-size: 1.35rem; line-height: 1; }
.pg-hero-stat .l { color: rgba(255,255,255,.72); font-size: 11px; font-weight: 600; margin-top: 4px; }

/* ── Cards ──────────────────────────────────────────────────── */
.pg-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.pg-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #D3DEEE; }
.pg-card-pad { padding: 20px; }

/* ── Buttons ────────────────────────────────────────────────── */
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 10px; transition: all .22s ease; white-space: nowrap; cursor: pointer; }
.pg-btn-primary { background: var(--pri); color: #fff; }
.pg-btn-primary:hover { background: var(--pri-dk); }
.pg-btn-accent { background: var(--acc); color: #fff; }
.pg-btn-accent:hover { background: var(--acc-dk); transform: translateY(-1px); }
.pg-btn-ghost { background: #fff; color: var(--pri); border: 1px solid var(--line); }
.pg-btn-ghost:hover { border-color: var(--pri); background: var(--pri-soft); }
.pg-btn-sm { font-size: 12.5px; padding: 9px 16px; border-radius: 8px; }

/* ── Chips / badges ─────────────────────────────────────────── */
.pg-chip { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--line); color: var(--body); font-size: 13px; font-weight: 650; padding: 8px 15px; border-radius: 999px; transition: .2s; }
.pg-chip:hover, .pg-chip.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.pg-chip-sm { font-size: 12px; padding: 6px 12px; }
/* A filter chip row on a phone should scroll sideways, not wrap into three
   lines that push the results below the fold. Pair with overflow-x: auto. */
.no-sb { scrollbar-width: none; -ms-overflow-style: none; }
.no-sb::-webkit-scrollbar { display: none; }
.pg-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; padding: 4px 10px; border-radius: 6px; }
.pg-badge-blue { background: var(--pri-soft); color: var(--pri); }
.pg-badge-orange { background: var(--acc-soft); color: #C2410C; }
.pg-badge-green { background: var(--ok-soft); color: #15803D; }
.pg-badge-grey { background: #F1F5F9; color: var(--muted); }

/* ── Section headings ───────────────────────────────────────── */
.pg-section { max-width: 1200px; margin: 0 auto; padding: 44px 32px; }
.pg-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.pg-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pri); margin-bottom: 8px; }
.pg-kicker::before { content: ''; width: 22px; height: 2px; background: var(--acc); border-radius: 2px; }
.pg-sec-title { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; color: var(--ink); letter-spacing: -.025em; margin: 0; }
.pg-sec-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.pg-link { color: var(--pri); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.pg-link:hover { color: var(--acc); }

/* ── Data rows (fees / stats inside cards) ──────────────────── */
.pg-stat-row { display: flex; gap: 16px; padding-top: 14px; margin-top: 14px; border-top: 1px solid #F1F5F9; }
.pg-stat .l { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.pg-stat .v { font-size: 14px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.pg-stat .v.green { color: var(--ok); }

/* ── Tables ─────────────────────────────────────────────────── */
.pg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-table th { background: var(--pri-soft); color: var(--pri); font-weight: 750; text-align: left; padding: 12px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pg-table td { padding: 12px 14px; border-top: 1px solid var(--line); color: var(--body); }
.pg-table tr:hover td { background: #FAFCFF; }

/* ── Scroll reveal (fail-safe) ──────────────────────────────────
   Content is VISIBLE by default. It is only hidden for animation once
   JS confirms it can reveal it again (html.js-on, set inline in <head>).
   If JS is disabled/slow/broken, nothing is ever left invisible.        */
.reveal { opacity: 1; transform: none; }
.js-on .reveal { opacity: 0; transform: translateY(20px); }
.js-on .reveal.rx-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .js-on .reveal { opacity: 1 !important; transform: none !important; } }

@media (max-width: 640px) {
    .pg-hero-inner { padding: 28px 18px 34px; }
    .pg-section { padding: 32px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   GLASSMORPHISM LAYER + MOBILE-FIRST REFINEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Frosted glass surfaces ─────────────────────────────────── */
.glass {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 32px -12px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* glass on top of dark/photo backgrounds */
.glass-dark {
    background: rgba(255, 255, 255, .11);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    color: #fff;
}
.glass-dark:hover { background: rgba(255, 255, 255, .17); }
/* subtle tinted glass for cards on light pages */
.glass-card {
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -24px rgba(30,80,160,.28);
    transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.glass-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -26px rgba(30,80,160,.42); }
.glass-pill {
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 999px;
}
/* ambient colour blobs to give glass something to refract */
.glass-bg { position: relative; overflow: hidden; }
.glass-bg::before, .glass-bg::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0;
}
.glass-bg::before { width: 460px; height: 460px; background: rgba(42, 98, 201, .22); top: -160px; right: -120px; }
.glass-bg::after  { width: 380px; height: 380px; background: rgba(249, 115, 22, .16); bottom: -150px; left: -100px; }
.glass-bg > * { position: relative; z-index: 1; }

/* sticky glass bar (page navs) */
.glass-bar {
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(226,232,240,.9);
}

/* Safari/older fallback — solid surfaces when blur is unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .glass-card { background: #fff; }
    .glass-dark, .glass-pill { background: rgba(255,255,255,.20); }
    .glass-bar { background: #fff; }
}

/* ── Mobile-first responsive system ─────────────────────────── */
.pg-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pg-grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* comfortable tap targets on touch devices */
@media (hover: none) {
    .pg-btn, .pg-chip { min-height: 44px; }
    .pg-card-hover:hover { transform: none; }
    .glass-card:hover { transform: none; }
}

@media (max-width: 900px) {
    .pg-hero-inner { padding: 30px 20px 36px; }
    .pg-hero-stats { gap: 22px; }
    .pg-section { padding: 34px 20px; }
}

@media (max-width: 640px) {
    :root { --radius: 12px; }
    .pg-hero-title { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
    .pg-hero-sub { font-size: .95rem; }
    .pg-hero-stats { gap: 16px 26px; padding-top: 16px; margin-top: 18px; }
    .pg-hero-stat .v { font-size: 1.15rem; }
    .pg-hero-stat .l { font-size: 10px; }
    .pg-sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pg-grid, .pg-grid-2 { grid-template-columns: 1fr; gap: 14px; }
    .pg-btn { width: 100%; }
    .pg-btn.auto { width: auto; }
    .pg-card-pad { padding: 16px; }
    /* horizontal scrollers instead of cramped grids */
    .pg-scroll-x { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
    .pg-scroll-x > * { flex: 0 0 82%; scroll-snap-align: start; }
    .pg-scroll-x::-webkit-scrollbar { display: none; }
    .pg-table { font-size: 13px; }
    .pg-table th, .pg-table td { padding: 10px 10px; }
}

/* wide tables never break the layout on phones */
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
img, video { max-width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════════
   APP-LIKE MOBILE SHELL — frosted bottom tab bar (phones only)
   ═══════════════════════════════════════════════════════════════════ */
.mnav { display: none; }

@media (max-width: 900px) {
    .mnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
        align-items: stretch; justify-content: space-around;
        padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .82);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        backdrop-filter: blur(22px) saturate(180%);
        border-top: 1px solid rgba(226, 232, 240, .9);
        box-shadow: 0 -8px 30px -12px rgba(15, 23, 42, .18);
    }
    .mnav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 6px 2px; border-radius: 12px; min-height: 50px;
        color: var(--muted); font-size: 10.5px; font-weight: 650; letter-spacing: .01em;
        transition: color .2s ease, background .2s ease, transform .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mnav-item i { font-size: 17px; line-height: 1; }
    .mnav-item:active { transform: scale(.94); }
    .mnav-item.on { color: var(--pri); background: var(--pri-soft); }
    /* raised centre action (predictor) */
    .mnav-item.mnav-cta { color: #fff; }
    .mnav-item.mnav-cta .mnav-fab {
        width: 44px; height: 44px; margin-top: -22px; border-radius: 16px;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--acc), #FB923C);
        box-shadow: 0 10px 22px -8px rgba(249, 115, 22, .75);
        border: 3px solid rgba(255, 255, 255, .9);
    }
    .mnav-item.mnav-cta .mnav-fab i { color: #fff; font-size: 17px; }
    .mnav-item.mnav-cta span { color: var(--acc-dk); }

    /* keep page content clear of the bar */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    /* any existing sticky/fixed CTA bars must sit above it */
    .pg-sticky-cta { bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* App-like touches on small screens */
@media (max-width: 640px) {
    html { scroll-behavior: smooth; }
    .pg-hero { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
}

/* ── Mobile overflow guard + nav fit ────────────────────────── */
@media (max-width: 900px) {
    /* `overflow-x: hidden` makes an element a scroll container, and that silently
       disables `position: sticky` on every descendant — which is why the site header
       and the college tab bar both scrolled away on phones while working on desktop.
       `clip` contains the same overflow without creating a scroll container.
       The `hidden` line stays first as a fallback for browsers without `clip`. */
    html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    .mnav-item { flex: 1 1 0; min-width: 0; padding: 6px 0; }
    .mnav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERFLOW CONTAINMENT
   <body> is a flex column; <main> is a flex item whose default
   min-width:auto lets a single wide child (swiper, table, nowrap text)
   stretch the entire page — which pushed the hero + bottom nav off-screen
   on phones. Allowing these to shrink keeps everything inside the viewport.
   ═══════════════════════════════════════════════════════════════════ */
main, .rx-home, .pg { min-width: 0; }

@media (max-width: 900px) {
    /* See the note above: `clip` keeps the overflow guard without breaking sticky. */
    html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    body > main { max-width: 100vw; overflow-x: hidden; overflow-x: clip; }
    /* long unbroken names shouldn't force width */
    h1, h2, h3, h4, p, a, span, td, th { overflow-wrap: anywhere; }
    /* horizontal card rails scroll instead of stretching the page */
    .swiper { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPACT LAPTOP / SMALL-DESKTOP SCALING
   The site was authored for large monitors: sections use py-24 (96px top
   AND bottom), section headers add mb-16, and display headings reach
   text-6xl. On a 1366x768 or 1280x720 laptop that burns most of the
   viewport on whitespace, so very little real content is visible.
   These rules compress the vertical rhythm and display type for the
   laptop range only — phones (<=900px) and big monitors (>=1537px) are
   untouched. !important is required because Tailwind's CDN injects its
   utilities after this stylesheet.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1536px) {

    /* --- vertical section rhythm --- */
    .py-24 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }   /* 96 -> 52 */
    .py-20 { padding-top: 3rem    !important; padding-bottom: 3rem    !important; }   /* 80 -> 48 */
    .py-16 { padding-top: 2.5rem  !important; padding-bottom: 2.5rem  !important; }   /* 64 -> 40 */
    .md\:py-24 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }

    /* --- gap between a section header and its content --- */
    .mb-16 { margin-bottom: 2.25rem !important; }   /* 64 -> 36 */
    .mb-12 { margin-bottom: 1.75rem !important; }
    .mb-10 { margin-bottom: 1.5rem  !important; }

    /* --- display headings: keep hierarchy, lose the bloat --- */
    .md\:text-6xl { font-size: 2.5rem  !important; line-height: 1.12 !important; }  /* 60 -> 40 */
    .md\:text-5xl { font-size: 2.25rem !important; line-height: 1.15 !important; }  /* 48 -> 36 */
    .text-4xl     { font-size: 1.875rem !important; line-height: 1.2 !important; }  /* 36 -> 30 */

    /* --- oversized card padding --- */
    .lg\:p-20 { padding: 3rem !important; }
    .lg\:p-16 { padding: 2.5rem !important; }
    .p-12     { padding: 2rem !important; }

    /* --- claw back horizontal room (px-12 = 96px lost to gutters) --- */
    .lg\:px-12 { padding-left: 2rem !important; padding-right: 2rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SITE-WIDE PHONE LAYER
   Pages here were authored for a desktop canvas: py-24 sections (96px
   top AND bottom), 60px display headings and 32px card padding. On a
   390px screen that reads as a shrunken website. These rules compress
   the shared rhythm on every page at once, so a page only needs its own
   mobile CSS when its LAYOUT changes (2-up grids, rails, list rows).

   !important is required throughout: Tailwind's CDN injects its
   utilities into <head> after this stylesheet loads.
   Scoped to `body > main` so it follows page content only.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* --- vertical rhythm --- */
    body > main .py-24, body > main .md\:py-24 { padding-top: 30px !important; padding-bottom: 30px !important; }
    body > main .py-20 { padding-top: 28px !important; padding-bottom: 28px !important; }
    body > main .py-16 { padding-top: 26px !important; padding-bottom: 26px !important; }
    body > main .py-12 { padding-top: 22px !important; padding-bottom: 22px !important; }
    body > main .py-10 { padding-top: 18px !important; padding-bottom: 18px !important; }
    body > main .mb-16 { margin-bottom: 18px !important; }
    body > main .mb-12 { margin-bottom: 16px !important; }
    body > main .mb-10 { margin-bottom: 14px !important; }

    /* --- gutters: 24px each side costs 12% of a 390px screen --- */
    body > main .container, body > main .px-6 { padding-left: 14px !important; padding-right: 14px !important; }

    /* --- display type --- */
    body > main h1 { font-size: 1.55rem !important; line-height: 1.18 !important; }
    body > main h2 { font-size: 1.3rem  !important; line-height: 1.22 !important; }
    body > main h3 { font-size: 1.02rem !important; line-height: 1.3 !important; }
    body > main .text-5xl, body > main .text-4xl,
    body > main .md\:text-5xl, body > main .md\:text-4xl { font-size: 1.4rem !important; line-height: 1.2 !important; }

    /* --- surfaces: app cards are tighter and less rounded than hero cards --- */
    body > main .rounded-\[2\.5rem\], body > main .rounded-\[3rem\],
    body > main .rounded-\[2rem\], body > main .rounded-3xl { border-radius: 16px !important; }
    body > main .p-10, body > main .p-12, body > main .p-14,
    body > main .md\:p-14, body > main .lg\:p-16 { padding: 16px !important; }
    body > main .p-8 { padding: 14px !important; }

    /* --- touch feedback: the single cheapest thing that reads as "app" --- */
    body > main a, body > main button { -webkit-tap-highlight-color: transparent; }
    body > main button:active, body > main .pg-btn:active, body > main .pg-card:active { transform: scale(.97); }
}

/* ═══════════════════════════════════════════════════════════════════
   .m2 — TWO CARDS PER ROW ON PHONES
   Opt-in class for a grid of cards (blog posts, scholarships, courses,
   country tiles…). One card per row wastes half a phone screen and turns
   any list into a long scroll; two-up is what an app shows. The card
   internals are compacted here too, because a card designed for a 380px
   desktop column has to work at ~170px.

   Add `m2` to the GRID element, never to a form-field grid — the same
   `grid-cols-1 md:grid-cols-2` shape is used for inputs, which must stay
   full width on a phone.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .m2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 10px !important; align-items: start; }

    .m2 > * { border-radius: 14px !important; }
    .m2 > *:active { transform: scale(.985); transition: transform .12s ease; }

    /* covers: whatever height the card asked for, a phone card gets ~88px */
    .m2 .h-40, .m2 .h-44, .m2 .h-48, .m2 .h-52, .m2 .h-56, .m2 .h-64 { height: 88px !important; }
    .m2 .aspect-video { aspect-ratio: 16 / 10; }

    .m2 .p-8, .m2 .p-6, .m2 .p-5 { padding: 10px !important; }
    .m2 h2, .m2 h3 { font-size: 12.5px !important; line-height: 1.25 !important; margin-bottom: 6px !important; }
    .m2 h4 { font-size: 11.5px !important; }
    .m2 p  { font-size: 11px !important; line-height: 1.45 !important; margin-bottom: 8px !important; }
    .m2 .text-sm, .m2 .text-xs { font-size: 10.5px !important; }
    .m2 .text-\[10px\], .m2 .text-\[11px\] { font-size: 9px !important; }
    .m2 .mb-6, .m2 .mb-5, .m2 .mb-4 { margin-bottom: 8px !important; }
    .m2 .pt-4 { padding-top: 8px !important; }
    .m2 .gap-4 { gap: 6px !important; }
    /* the long meta strip (date · views · author) rarely survives 170px:
       shrink it and stop each item breaking mid-value ("2026-03-\n06") */
    .m2 .line-clamp-3 { -webkit-line-clamp: 2; }
    .m2 .flex.items-center.gap-4, .m2 .flex.items-center.gap-3 { gap: 7px !important; }
    .m2 .flex.items-center.gap-4 > *, .m2 .flex.items-center.gap-3 > * {
        white-space: nowrap; font-size: 8.5px !important; }
    /* badges must not hyphenate themselves apart ("GOVERN / MENT") */
    .m2 span[class*="rounded"] { white-space: nowrap; font-size: 8px !important; }
    .m2 button, .m2 a[class*="rounded"][class*="bg-"] {
        font-size: 9.5px !important; padding: 9px 10px !important; border-radius: 11px !important; }
}

/* Counselling cards at two-up: at ~170px the fee and the Book button cannot
   sit on one line — the button wins the space and clips the price. Stack them.
   `.m2 .p-5` already trims the card padding, but `px-5` is a different
   utility, so the fact rows need trimming by name. */
@media (max-width: 640px) {
    .m2 .cs-facts { padding-left: 10px !important; padding-right: 10px !important; }
    .m2 .cs-foot { flex-direction: column; align-items: stretch; gap: 8px !important; }
    .m2 .cs-foot .pg-btn { width: 100%; font-size: 11px !important; padding: 9px 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPACT MOBILE FOOTER
   On a phone the desktop footer is four stacked blocks (pt-16 + gap-12
   + mb-12 ≈ 700px of scrolling) sitting directly above the bottom tab
   bar. An app puts the same links in a short, dense block: brand row,
   two link columns side by side, contact rows, one legal line.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .mf { padding-top: 24px !important; padding-bottom: 18px !important; }
    .mf-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 14px !important;
        margin-bottom: 16px !important;
    }
    /* brand and contact run the full width; the two link lists share a row */
    .mf-brand, .mf-contact { grid-column: 1 / -1; }

    .mf-brand > a { margin-bottom: 10px !important; }
    .mf-brand img { height: 38px !important; }
    .mf-tagline { display: none !important; }          /* the tagline is on the About page */
    .mf-social { gap: 10px !important; }
    .mf-social a { width: 34px !important; height: 34px !important; border-radius: 11px !important; }

    .mf h4 { font-size: 12px !important; margin-bottom: 10px !important;
             letter-spacing: .04em; text-transform: uppercase; }
    .mf h4 span { display: none; }                     /* the underline flourish */
    .mf-col ul > li + li { margin-top: 7px !important; }
    .mf-col a { font-size: 12px !important; }

    .mf-contact ul { display: grid; gap: 8px !important; }
    .mf-contact ul > li + li { margin-top: 0 !important; }
    .mf-contact li { gap: 10px !important; align-items: center !important; }
    .mf-contact li > div { width: 30px !important; height: 30px !important; flex: 0 0 30px; }
    .mf-contact li span span:first-child { font-size: 8.5px !important; }
    .mf-contact li a, .mf-contact li span span:last-child { font-size: 11.5px !important; }

    .mf-legal { padding-top: 12px !important; gap: 8px !important; font-size: 8.5px !important; }
    .mf-legal .flex { gap: 4px 12px !important; }
}

/* Short screens (most 768px-tall laptops): trim the hero so the search box
   and the first content section are visible without scrolling. */
@media (min-width: 1024px) and (max-height: 820px) {
    .ph-inner { padding-top: 40px !important; padding-bottom: 44px !important; }
    .ph-title { font-size: clamp(1.9rem, 3vw, 2.5rem) !important; }
    .ph-sub   { margin-bottom: 22px !important; }
    .ph-stats { margin-top: 24px !important; }
    .ph-badge { margin-bottom: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS Safari

   Three things that make an otherwise-fine responsive site feel broken on an
   iPhone. None of them show up in a desktop browser at a narrow width, which is
   why they survived this long.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Tapping a form control smaller than 16px makes iOS zoom the whole page in,
      and it does not zoom back out. Every input on the site was 12-15px, so every
      form did this. The rule is confined to touch-sized screens so the desktop
      typography is untouched, and marked !important because Tailwind's CDN build
      loads after this file and its text-sm would otherwise win. */
@media (max-width: 900px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* 2. On iOS, 100vh is the height of the viewport WITHOUT the address bar, so a
      full-height element is taller than what you can see and its last rows sit
      below the fold with no way to reach them. dvh follows the visible area. */
@supports (height: 100dvh) {
    .min-h-screen { min-height: 100dvh; }
    .h-screen     { height: 100dvh; }
}

/* 3. Stop the rubber-band scroll revealing a white strip behind the fixed tab bar,
      and stop a double-tap zooming instead of registering as two taps. */
html {
    -webkit-text-size-adjust: 100%;   /* landscape rotation must not inflate text */
    overscroll-behavior-y: none;
}
body { touch-action: manipulation; }

/* A tap on iOS otherwise paints a grey box over the element for a moment, which
   reads as a rendering fault rather than feedback. The focus ring stays. */
a, button, [role="button"], .mnav a {
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE

   The site's colour lives in two places: the --tokens above, which the pg-*
   components read, and Tailwind utility classes written directly into the
   views. Roughly nine thousand of those utilities are the same thirty greys,
   so dark mode is those thirty remapped plus the tokens — rather than a
   `dark:` variant added by hand to every element, which would touch hundreds
   of files and be wrong somewhere within a week.

   Every selector below is `[data-theme="dark"] .thing`, which outranks
   Tailwind's single-class `.thing` on specificity. That matters: the CDN
   build injects its stylesheet AFTER this file, so a same-specificity rule
   would lose regardless of what it says.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    --pri: #5B8DEF;
    --pri-dk: #3F6FD1;
    --pri-lt: #7BA5F5;
    --pri-soft: #16233C;
    --acc: #FB923C;
    --acc-dk: #F97316;
    --acc-soft: #2A1B0F;
    --ok: #34D399;
    --ok-soft: #10281F;
    --warn: #FBBF24;
    --ink: #E8EEF8;
    --body: #B3C1D6;
    --muted: #94A5BD;
    --faint: #7E90A9;
    --line: #24314A;
    --bg: #0B1220;
    --card: #151E30;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -14px rgba(0, 0, 0, .7);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, .45), 0 16px 34px -20px rgba(0, 0, 0, .8);

    color-scheme: dark;   /* native scrollbars, form controls and date pickers */
}

[data-theme="dark"] body { background: #0B1220 !important; color: #B3C1D6 !important; }

/* ── Surfaces ────────────────────────────────────────────────────────── */
[data-theme="dark"] .bg-white       { background-color: #151E30 !important; }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-slate-50    { background-color: #0E1626 !important; }
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-slate-100   { background-color: #1B2740 !important; }
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-slate-200   { background-color: #243350 !important; }

/* Already-dark blocks are lifted slightly, or they merge into the page and
   the section they were meant to separate disappears. */
[data-theme="dark"] .bg-gray-900,
[data-theme="dark"] .bg-slate-900,
[data-theme="dark"] .bg-gray-800,
[data-theme="dark"] .bg-black       { background-color: #080E18 !important; }

/* ── Text ────────────────────────────────────────────────────────────── */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-slate-800 { color: #E8EEF8 !important; }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-slate-700 { color: #CDD8E8 !important; }
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-slate-600 { color: #B3C1D6 !important; }
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-slate-500 { color: #94A5BD !important; }
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-slate-400 { color: #8494AC !important; }
[data-theme="dark"] .text-gray-300,
[data-theme="dark"] .text-slate-300 { color: #74849C !important; }
[data-theme="dark"] .text-gray-200  { color: #9AA9C0 !important; }

/* Tailwind writes an opacity modifier into the class name, so `bg-white/90` is
   `.bg-white\/90` — a different selector that the `.bg-white` rule above never
   matched. Those stayed white while the text on them was remapped light, which
   is the white-on-white the badges on the blog cards showed. Only the near-solid
   ones are remapped: /5 to /20 are the frosted chips sitting on the blue heroes,
   where a white veil is what the design wants in either theme. */
[data-theme="dark"] .bg-white\/50,
[data-theme="dark"] .bg-white\/60,
[data-theme="dark"] .bg-white\/70,
[data-theme="dark"] .bg-white\/75,
[data-theme="dark"] .bg-white\/80,
[data-theme="dark"] .bg-white\/90,
[data-theme="dark"] .bg-white\/95 { background-color: rgba(21, 30, 48, .93) !important; }

/* Same problem one shade down: the faint tints used to stripe table rows and
   separate panels. These are translucent by design, so they are re-tinted
   rather than made solid — the striping stays as subtle as it is on light. */
[data-theme="dark"] .bg-gray-50\/30,
[data-theme="dark"] .bg-gray-50\/40,
[data-theme="dark"] .bg-gray-50\/50,
[data-theme="dark"] .bg-gray-50\/60,
[data-theme="dark"] .bg-gray-50\/70,
[data-theme="dark"] .bg-slate-50\/30,
[data-theme="dark"] .bg-slate-50\/50,
[data-theme="dark"] .bg-slate-50\/60,
[data-theme="dark"] .bg-slate-50\/70 { background-color: rgba(14, 22, 38, .6) !important; }

/* ── Lines ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .border-gray-50,
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200 { border-color: #24314A !important; }
[data-theme="dark"] .border-white     { border-color: #151E30 !important; }
[data-theme="dark"] .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #24314A !important; }

/* ── 2026 redesign tokens (surface-*/on-*/border-subtle/primary-container/etc,
   defined as static hex colors in layouts/main.php's tailwind.config) ──────
   Unlike --pri/--pri-dk above, these are plain Tailwind colors, not CSS
   variables, so [data-theme="dark"] never touched them. Every page built from
   the 2026 Stitch mockups (home, footer, colleges, exams, blog, counselling,
   predictor, lead popup, college/study-abroad detail) uses these classes
   directly, so without this block they stayed stuck on light values and read
   as a white island against the rest of a dark-mode page — reported as
   "footer is white", but the same gap applies everywhere these tokens are
   used. */
[data-theme="dark"] .bg-surface-pure,
[data-theme="dark"] .bg-surface-container-lowest { background-color: #151E30 !important; }
[data-theme="dark"] .bg-surface,
[data-theme="dark"] .bg-surface-ice,
[data-theme="dark"] .bg-surface-bright { background-color: #0E1626 !important; }
[data-theme="dark"] .bg-surface-dim,
[data-theme="dark"] .bg-surface-container-low { background-color: #1B2740 !important; }
[data-theme="dark"] .bg-surface-container { background-color: #202D48 !important; }
[data-theme="dark"] .bg-surface-container-high { background-color: #243350 !important; }
[data-theme="dark"] .bg-surface-container-highest,
[data-theme="dark"] .bg-surface-variant { background-color: #2A3B5C !important; }

[data-theme="dark"] .text-on-surface,
[data-theme="dark"] .text-inverse-on-surface { color: #E8EEF8 !important; }
[data-theme="dark"] .text-on-surface-variant { color: #B3C1D6 !important; }
[data-theme="dark"] .text-outline { color: #8494AC !important; }
[data-theme="dark"] .text-outline-variant { color: #5B6C89 !important; }
[data-theme="dark"] .bg-inverse-surface { background-color: #E8EEF8 !important; }
[data-theme="dark"] .text-inverse-surface { color: #0B1220 !important; }

[data-theme="dark"] .border-border-subtle,
[data-theme="dark"] .border-outline-variant,
[data-theme="dark"] .divide-border-subtle > :not([hidden]) ~ :not([hidden]) { border-color: #24314A !important; }
[data-theme="dark"] .border-outline { border-color: #3A4A68 !important; }

/* primary/secondary were redefined to a very dark navy / brown for the 2026
   palette — correct as text/fill on a white surface, unreadable once the
   surface itself goes dark. */
[data-theme="dark"] .text-primary,
[data-theme="dark"] .hover\:text-primary:hover { color: #5B8DEF !important; }
[data-theme="dark"] .bg-primary,
[data-theme="dark"] .hover\:bg-primary:hover,
[data-theme="dark"] .bg-primary-container { background-color: #2E5EA8 !important; }
[data-theme="dark"] .bg-tertiary,
[data-theme="dark"] .bg-tertiary-container { background-color: #3A4560 !important; }
[data-theme="dark"] .bg-brand-navy-deep { background-color: #1E4D85 !important; }

/* ── Form controls ───────────────────────────────────────────────────── */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: #0E1626 !important;
    border-color: #24314A !important;
    color: #E8EEF8 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6B7C94 !important; }
[data-theme="dark"] option { background: #151E30 !important; color: #E8EEF8 !important; }

/* ── The site's own components ───────────────────────────────────────── */
[data-theme="dark"] .mnav {
    background: rgba(13, 20, 34, .88);
    border-top-color: #24314A;
}
[data-theme="dark"] .mnav a { color: #94A5BD; }
[data-theme="dark"] .pg-card,
[data-theme="dark"] .pg-panel { background: var(--card); border-color: var(--line); }

/* The homepage carries its own copy of the palette (`.rx-home { --ink: … }` in
   home/index.php) so its sections can be tuned without touching the rest of the
   site. A local copy also shadows the dark values set on :root above, which left
   the homepage headings reading `--ink: #0F172A` — dark ink on a section this
   file had already turned dark. Re-point the same names here rather than in the
   view, so the two palettes cannot drift apart. */
[data-theme="dark"] .rx-home {
    --pri: #5B8DEF;
    --pri-dk: #3F6FD1;
    --pri-soft: #16233C;
    --acc: #FB923C;
    --acc-soft: #2A1B0F;
    --ink: #E8EEF8;
    --body: #B3C1D6;
    --muted: #94A5BD;
    --line: #24314A;
    --bg: #0B1220;
}

/* College logos are mostly dark-on-transparent PNGs sitting in a small white
   chip. Turning that chip dark makes them vanish, so the chip stays light — but
   only the small ones, which are logo holders by construction. Plating every
   image called "logo" also hit the site's own header mark and put an ugly white
   box around it. */
[data-theme="dark"] .bg-white.w-8:has(img),
[data-theme="dark"] .bg-white.w-10:has(img),
[data-theme="dark"] .bg-white.w-11:has(img),
[data-theme="dark"] .bg-white.w-12:has(img),
[data-theme="dark"] .bg-white.w-14:has(img),
[data-theme="dark"] .bg-white.w-16:has(img),
[data-theme="dark"] .bg-white.w-20:has(img),
[data-theme="dark"] .logo-plate {
    background-color: #EEF2F8;
}

/* Shadows read as glow on a dark ground; soften rather than remove, so cards
   keep their edge. */
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-2xl { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }

/* The toggle itself */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px;
    color: #475569; background: transparent; border: 0; cursor: pointer;
    transition: background .18s, color .18s;
}
.theme-toggle:hover { background: rgba(15, 23, 42, .07); color: var(--pri); }
[data-theme="dark"] .theme-toggle { color: #FBBF24; }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, .09); }
/* One icon per theme, so the button shows what you will GET, not where you are. */
.theme-toggle .t-sun { display: none; }
[data-theme="dark"] .theme-toggle .t-sun { display: inline; }
[data-theme="dark"] .theme-toggle .t-moon { display: none; }

/* Colour changes are instant by default and the whole page flashing is jarring;
   a short tint transition reads as the lights being turned down. Respect anyone
   who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    body, .bg-white, .bg-gray-50, .bg-gray-100 {
        transition: background-color .22s ease, border-color .22s ease, color .22s ease;
    }
}

/* Only one of the two header marks is ever shown. Both are in the markup so the
   swap is instant on toggle — loading the other one at that moment would leave a
   gap where the logo should be. */
.nav-logo-dark { display: none; }
[data-theme="dark"] .nav-logo-swappable { display: none; }
[data-theme="dark"] .nav-logo-dark { display: block; }


/* ==========================================================================
   BANNER ADS  (components/ad_banner.php, managed at /superadmin/ad-banners)
   ==========================================================================
   Deliberately plain: a banner is someone else's artwork and the frame around
   it should not compete. Full width of whatever column it lands in, capped so a
   small upload is never blown up past its own resolution, and always labelled.

   `.adb` renders nothing when a slot is empty, so these rules only ever apply
   when there IS a banner - no reserved gap, no empty border. */
.adb {
    position: relative;
    margin: 28px 0;
    text-align: center;
}
.adb-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 6px;
}
.adb-link { display: block; }
.adb-img {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: auto;
    /* An upload wider than its slot must not be upscaled into a blur, and a tall
       creative must not push the page content off the screen. */
    max-height: 320px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 14px;
}
.adb-link:hover .adb-img { opacity: .94; }

/* Inside a results grid the banner spans every column, so the cards keep their
   rhythm instead of one row silently becoming shorter. */
.adb-inline-grid { grid-column: 1 / -1; }

@media (max-width: 640px) {
    .adb { margin: 18px 0; }
    .adb-img { max-height: 200px; border-radius: 10px; }
}

[data-theme="dark"] .adb-label { color: #6b7280; }