/* ==========================================================================
   EduFokam design system
   Identity: an official school ledger — trustworthy, structured, warm.
   Palette:  Indigo (ink/primary), Parchment (paper/background),
             Harmattan Gold (secondary accent), Report Blue (passing grades),
             Liberian Red (alerts / underperformance).
   Type:     Archivo (display), Public Sans (body), IBM Plex Mono (figures).
             Loaded via preconnected <link> tags in includes/header.php, not
             @import here — @import serializes the fetch (parse this file,
             discover the import, THEN fetch fonts.googleapis.com, THEN
             fonts.gstatic.com) instead of letting the browser discover and
             fetch fonts in parallel with everything else. That waterfall
             hits slower mobile connections hardest.
   ========================================================================== */

:root {
    --ink: #1B2A4A;
    --ink-deep: #101a30;
    --parchment: #F7F4EC;
    --paper: #FFFFFF;
    --gold: #C99A3B;
    --gold-soft: #f2e6c8;
    --blue: #2456A3;
    --red: #C1272D;
    --red-soft: #fbe9e7;
    --text: #21242c;
    --text-muted: #62687a;
    --border: #e4ddc9;
    --border-quiet: #ece7d8;

    --font-display: 'Archivo', sans-serif;
    --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floatSlow {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -14px, 0) scale(1.03);
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--parchment);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

/* ---------- Top bar + persistent nav ---------- */

.topbar {
    background: var(--ink);
    color: #fff;
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--gold);
}

.topbar .brand {
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

.topbar nav a {
    color: #fff;
    margin-left: 18px;
    text-decoration: none;
    opacity: 0.9;
    font-weight: 500;
    font-size: 0.92rem;
}
.topbar nav a:hover { opacity: 1; text-decoration: underline; }
.topbar nav .who { opacity: 0.7; font-size: 0.85rem; }
.topbar nav .who-role { opacity: 0.8; }
.topbar nav a.logout-btn {
    margin-left: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    white-space: nowrap;
    flex-shrink: 0;
}
.topbar nav a.logout-btn:hover { background: rgba(255,255,255,0.12); text-decoration: none; }

nav.sitenav {
    background: var(--paper);
    border-bottom: 1px solid var(--border);
    padding: 10px 28px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
nav.sitenav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid transparent;
}
nav.sitenav a:hover { background: var(--parchment); }
nav.sitenav a.active {
    background: var(--ink);
    color: #fff;
}

/* ---------- App shell: persistent left icon sidebar (all screen sizes) ----------
   The old behavior was a horizontal pill row that only made sense on wide
   screens and wrapped into a mess on narrow ones. This makes the sidebar
   from the reference design (icon above label, full-height, one solid
   color block, current page highlighted) the standard nav for every
   signed-in page at every width — phones, tablets, and desktop alike —
   instead of switching layouts at a breakpoint. Scoped to body.app-shell
   (set in includes/header.php only when a user is signed in) so it never
   touches the landing/login pages, which have their own layout in
   landing.css. */
body.app-shell {
    display: flex;
    flex-wrap: wrap;
}
body.app-shell > .topbar { flex: 1 1 100%; order: 1; }
body.app-shell > nav.sitenav {
    order: 2;
    flex: 0 0 84px;
    width: 84px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 3px;
    background: var(--ink);
    border-bottom: none;
    padding: 12px 6px;
    align-self: stretch;
    overflow-y: auto;
}
body.app-shell > nav.sitenav a {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 12px 4px;
    border-radius: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}
body.app-shell > nav.sitenav a svg { width: 24px; height: 24px; }
body.app-shell > nav.sitenav a .nav-label { white-space: normal; }
body.app-shell > nav.sitenav a:hover { background: rgba(255,255,255,0.1); }
body.app-shell > nav.sitenav a.active { background: var(--gold); color: var(--ink-deep); }
body.app-shell > main.container {
    order: 3;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 18px 16px 32px;
}
body.app-shell > .footer { order: 4; flex: 1 1 100%; }

.topbar { flex-wrap: wrap; row-gap: 8px; }
.topbar nav { display: flex; align-items: center; width: 100%; }
.topbar nav .who {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}

/* A bit roomier once there's more width to spare than a phone gives. */
@media (min-width: 481px) and (max-width: 899px) {
    body.app-shell > nav.sitenav { flex-basis: 100px; width: 100px; padding: 14px 8px; }
    body.app-shell > nav.sitenav a { font-size: 0.74rem; padding: 13px 5px; }
    body.app-shell > nav.sitenav a svg { width: 26px; height: 26px; }
}

/* Desktop/laptop: enough width for icon-and-label side by side rather
   than stacked, same overall "persistent left sidebar" shape as the
   phone layout — just laid out like a typical desktop app sidebar. */
@media (min-width: 900px) {
    body.app-shell > nav.sitenav {
        flex-basis: 232px;
        width: 232px;
        padding: 18px 12px;
        gap: 4px;
    }
    body.app-shell > nav.sitenav a {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 11px 14px;
        font-size: 0.92rem;
        text-align: left;
    }
    body.app-shell > nav.sitenav a svg { width: 21px; height: 21px; flex-shrink: 0; }
    body.app-shell > main.container { padding: 28px 32px; }
}

/* ---------- Layout ---------- */

.container {
    max-width: 1000px;
    margin: 28px auto;
    padding: 0 20px;
}

.card {
    background: var(--paper);
    border: 1px solid var(--border-quiet);
    border-radius: 10px;
    padding: 26px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(27, 42, 74, 0.04);
}

/* Dedicated horizontal-scroll wrapper for individually wide tables
   (marksheet, the developer Schools list, etc.) — unlike the .card-level
   overflow rule above (phones/tablets only, and scrolls the whole card
   including buttons/text with it), this wraps just the <table> itself,
   works at every screen width, and does nothing/is invisible when the
   table already fits. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
}
.table-scroll table {
    width: auto;
    min-width: 100%;
}
.table-scroll table th,
.table-scroll table td {
    white-space: nowrap;
}
.table-scroll::-webkit-scrollbar { height: 10px; }
.table-scroll::-webkit-scrollbar-track { background: var(--parchment); border-radius: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 6px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-deep); }

/* Phones/tablets only — desktop is left exactly as it was, since wide
   screens rarely need it and this keeps that behavior unchanged there.
   Lets a wide table (like the Schools table) scroll horizontally within
   its own card instead of forcing the whole page to overflow sideways or
   silently clipping columns off-screen. */
@media (max-width: 900px) {
    .card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .receipt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- Tables (ledger rows, tabular figures) ---------- */

table {
    border-collapse: collapse;
    width: 100%;
    background: var(--paper);
    font-size: 0.93rem;
}

th, td {
    border: 1px solid var(--border-quiet);
    padding: 9px 11px;
    text-align: center;
}

th {
    background: var(--ink);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

td { font-family: var(--font-mono); font-size: 0.92rem; }
td:first-child { font-family: var(--font-body); text-align: left; font-weight: 600; }

tbody tr:nth-child(even) td, table tr:nth-child(even) td {
    background: var(--parchment);
}

.low { color: var(--red); font-weight: 700; }
.high { color: var(--blue); font-weight: 700; }

/* ---------- Footer ---------- */

.footer {
    background: var(--ink);
    color: #f6f2e8;
    padding: 28px 24px 20px;
    margin-top: 40px;
}

.footer-top {
    max-width: 1100px;
    margin: 0 auto 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.footer h3 {
    color: #fff;
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.footer p {
    margin: 0;
    color: rgba(255,255,255,0.82);
}

.footer-contacts {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.contact-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 180px;
}

.contact-label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-bottom: 4px;
}

.contact-card a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
}

.contact-card a:hover {
    text-decoration: underline;
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.14);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    margin-right: 14px;
    font-weight: 600;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover {
    background: var(--ink-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(27, 42, 74, 0.18);
}
.btn.secondary { background: var(--gold); color: var(--ink-deep); }
.btn.secondary:hover { background: #b98a2e; }
.btn.danger { background: var(--red); }
.btn.danger:hover { background: #9e1f24; }

/* ---------- MoMo tap-to-pay row (principal/subscribe.php) ---------- */
.momo-pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.momo-pay-row .btn { padding: 5px 12px; font-size: 0.8rem; border-radius: 5px; }
.momo-pay-row .btn.copied { background: var(--green, #2f9e58); color: #fff; }

/* ---------- Forms ---------- */

form input, form select, form textarea {
    width: 100%;
    padding: 10px 12px;
    margin: 6px 0 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--text);
}
form input:focus, form select:focus, form textarea:focus {
    border-color: var(--gold);
}

label { font-weight: 600; color: var(--ink); font-size: 0.92rem; }

/* ---------- Password show/hide toggle (assets/js/password-toggle.js) ----
   Auto-applied to every input[type=password] on the page. A wrapper div
   takes over the input's own margin/spacing so visual rhythm with
   surrounding labels is unchanged; the input itself just loses its
   margin and gains right-padding so typed text never runs under the
   eye button. */
.password-field-wrap {
    position: relative;
    margin: 6px 0 14px;
}
.password-field-wrap input {
    margin: 0;
    padding-right: 40px;
    width: 100%;
}
.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted, #6b7280);
    border-radius: 4px;
}
.password-toggle-btn:hover { color: var(--ink); }
.password-toggle-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.password-toggle-btn svg { width: 19px; height: 19px; display: block; }
body.auth-page .password-toggle-btn { color: rgba(255,255,255,0.5); }
body.auth-page .password-toggle-btn:hover { color: #fff; }

/* ---------- Searchable select (assets/js/searchable-select.js) ----------
   Any <select> with more than 8 options auto-upgrades into this. The
   dropdown list is appended to <body> (not this wrapper) and positioned
   with fixed coordinates, specifically so it's never clipped by a card
   using overflow-x:auto for a wide table (see .card above). */
.searchable-select-wrap { position: relative; }
.searchable-select-wrap .searchable-select-native { display: none; }
.searchable-select-wrap.has-error .searchable-select-input { border-color: var(--red); }
.searchable-select-list {
    position: fixed;
    z-index: 200;
    margin: 2px 0 0;
    padding: 4px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(27, 42, 74, 0.14);
    list-style: none;
    font-size: 0.93rem;
}
.searchable-select-option {
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.searchable-select-option:hover,
.searchable-select-option.is-active { background: var(--parchment); }
.searchable-select-option.is-selected { font-weight: 700; color: var(--blue); }
.searchable-select-empty { padding: 8px 10px; color: var(--text-muted); font-size: 0.88rem; }

/* ---------- Banners / alerts ---------- */

.banner {
    background: var(--gold-soft);
    color: #5a4415;
    border: 1px solid var(--gold);
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-weight: 600;
}

.alert-error {
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid #f0b6b3;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-weight: 500;
}

.alert-success {
    background: #eaf3ea;
    color: #1e5c33;
    border: 1px solid #b9dcc0;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-weight: 500;
}

.badge-warning {
    display: inline-block;
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid #f0b6b3;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ---------- Support ticket status badges ---------- */
[class^="badge-status-"] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-status-open { background: var(--red-soft); color: var(--red); }
.badge-status-in_progress { background: var(--gold-soft); color: #8a6416; }
.badge-status-resolved { background: #e3f3e6; color: #2f7d3d; }
.badge-status-closed { background: #e8e8e8; color: #666; }

/* ---------- Footer ---------- */

.site-footer {
    background: var(--ink);
    color: #cdd3e4;
    margin-top: 48px;
    padding: 48px 28px 0;
}
.site-footer-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 28px;
    padding-bottom: 36px;
}
@media (max-width: 720px) {
    .site-footer-grid { grid-template-columns: 1fr 1fr; }
}
.site-footer-brand .brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 800;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.site-footer-brand p { font-size: 0.85rem; color: #9aa3bd; max-width: 260px; }
.site-footer h4 {
    color: var(--gold);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.site-footer a, .site-footer .footer-static {
    display: block;
    color: #cdd3e4;
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 10px;
}
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-static { color: #8791ac; }
.site-footer-bottom {
    max-width: 1000px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: #8791ac;
}

/* ---------- Tabs (used for the promotion year-history selector) ---------- */

nav.tabs a {
    display: inline-block;
    margin-right: 10px;
    padding: 8px 16px;
    background: var(--parchment);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
}
nav.tabs a.active { background: var(--ink); color: #fff; }

/* ---------- Homepage hero ---------- */

.hero {
    background: linear-gradient(135deg, #17325f 0%, var(--ink) 50%, #10203d 100%);
    color: #fff;
    padding: 72px 28px 88px;
    text-align: center;
    border-bottom: 4px solid var(--gold);
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -28px;
    min-height: 72vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeInUp 0.6s ease-out both;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 38%, rgba(201,154,59,0.12));
    pointer-events: none;
}
.hero-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-ambient .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(14px);
    opacity: 0.35;
    animation: floatSlow 8s ease-in-out infinite;
}
.hero-ambient .orb-1 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(201,154,59,0.28), transparent 70%);
    left: -70px;
    top: -70px;
}
.hero-ambient .orb-2 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(36,86,163,0.26), transparent 72%);
    right: -50px;
    top: 18%;
    animation-duration: 10s;
}
.hero-ambient .orb-3 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 72%);
    left: 42%;
    bottom: -50px;
    animation-duration: 9s;
}
.hero > * {
    position: relative;
    z-index: 1;
}
.hero .seal-wrap {
    background: var(--paper);
    border-radius: 50%;
    display: inline-flex;
    padding: 10px;
    margin-bottom: 24px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
    animation: floatSlow 6s ease-in-out infinite;
}
.hero .eyebrow, .hero h1, .hero .lede, .hero .hero-actions {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero .eyebrow {
    font-family: var(--font-display);
    color: var(--gold);
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 14px;
    animation-delay: 0.1s;
}
.hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin: 0 0 18px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    animation-delay: 0.2s;
}
.hero p.lede {
    color: #d7dced;
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 30px;
    animation-delay: 0.35s;
}
.hero .hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    animation-delay: 0.5s;
}
.hero .btn.secondary { color: var(--ink-deep); }

.section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 56px 20px;
    animation: fadeInUp 0.7s ease-out both;
}
.section .eyebrow {
    font-family: var(--font-display);
    color: var(--gold);
    letter-spacing: 0.15em;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}
.section h2 { text-align: center; font-size: 2rem; margin: 0 0 12px; }
.section .section-lede { text-align: center; color: var(--text-muted); max-width: 560px; margin: 0 auto 40px; }

/* ---------- Team grid ---------- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}
.team-card {
    background: var(--paper);
    border: 1px solid var(--border-quiet);
    border-radius: 12px;
    padding: 26px 20px;
    text-align: center;
    animation: fadeInUp 0.7s ease-out both;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-card:nth-child(2) { animation-delay: 0.08s; }
.team-card:nth-child(3) { animation-delay: 0.16s; }
.team-card:nth-child(4) { animation-delay: 0.24s; }
.team-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 16px 34px rgba(27, 42, 74, 0.1);
}
.team-card .avatar-ring {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--gold);
    background: var(--paper);
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.team-card:hover .avatar-ring {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 20px rgba(201, 154, 59, 0.2);
    border-color: #d4a745;
}
.team-card .avatar-ring img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: var(--paper);
}
.team-card h3 { font-size: 1.05rem; margin: 0 0 4px; }
.team-card .role { color: var(--blue); font-weight: 700; font-size: 0.85rem; margin-bottom: 10px; }
.team-card .location { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.team-card p.bio { font-size: 0.88rem; color: var(--text-muted); margin: 0; }

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

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 26px;
}
@media (max-width: 720px) {
    .contact-grid, .grid-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
.location-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--parchment);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 4px 6px 4px 0;
}
.location-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* ---------- Marksheet-specific (kept here for cascade simplicity) ---------- */

.year-tabs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.year-tab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: 8px; border: 1px solid var(--border-quiet);
    border-left: 4px solid transparent; text-decoration: none; color: var(--text);
    background: var(--paper); font-weight: 600;
}
.year-tab.active { border-left-color: var(--gold); color: var(--ink); background: var(--gold-soft); }
.year-tab .chevron { opacity: 0.6; }

.marksheet-letterhead {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 18px;
    gap: 20px;
}
.marksheet-letterhead h1 { margin: 0 0 4px; font-size: 1.3rem; }
.marksheet-letterhead .school-meta { font-size: 0.85rem; color: var(--text-muted); }
.marksheet-letterhead .report-label { text-align: right; font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }

.marksheet-footer {
    margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--border-quiet);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.8rem; color: var(--text-muted);
}
.marksheet-footer .brand-mark { font-weight: 700; color: var(--ink); }

.signature-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 40px; gap: 16px; }
.signature-row .signature-line { flex: 1 1 45%; border-top: 1px solid #999; text-align: center; padding-top: 6px; font-size: 0.85rem; }
.signature-row .signature-seal { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding-bottom: 8px; opacity: 0.85; }

@media print {
    .topbar, nav.sitenav, .no-print { display: none !important; }
    body { background: #fff; }
    #marksheet-printable { border: none; box-shadow: none; padding: 0; }
    .table-scroll { overflow-x: visible; }

    /* The marksheet table (12 columns: Subject, P1-P6, Exam, Sem 1 Avg,
       Final, Sem 2 Avg, Yearly Avg) is too wide to print cleanly in
       portrait — columns were getting cut off at the page edge.
       `page:`/`@page` below (CSS Named Pages) tells supporting browsers
       to default this specific print job to landscape, without affecting
       any other printable page (e.g. developer/receipt.php, which stays
       portrait as it should for a narrow receipt). As a safety net for
       browsers that don't support named pages, or if someone still picks
       portrait manually, the smaller font/padding here gives it a better
       chance of fitting either way. */
    #marksheet-printable { page: marksheet-page; }
    #marksheet-printable table { font-size: 0.72rem; }
    #marksheet-printable th, #marksheet-printable td { padding: 4px 5px; }
}
@page marksheet-page {
    size: landscape;
    margin: 10mm;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}