/*
 * NHIS Design Foundation — pastel design tokens + reusable components.
 *
 * Additive by design: nothing in here renames or overrides the legacy
 * Tailwind color keys (primary/accent/mint/body/surface) used by the
 * current dark theme, so pages that haven't been migrated yet render
 * exactly as before. See PLAN.md for the full rationale and the
 * pastel-tint-vs-deep-shade accessibility rule referenced below.
 */

/* The old styles.css had this bundled into its body{} font rule; it got
   dropped when that rule was cleaned up as dead code, which let the page
   grow wider than the viewport on narrow phones. Keeping it as its own
   explicit rule so it doesn't get mistaken for dead code again. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

:root {
    /* ---- Color tokens ---- */
    /* Coral / salmon — primary CTA */
    --coral-50:  #FFF6F4;
    --coral-100: #FFE4DE;
    --coral-200: #FFC9BD;
    --coral-500: #FF7A61; /* decorative / large-text only, not AA-safe as button-on-white */
    --coral-700: #C43F2B; /* AA-safe: buttons w/ white text, text-on-white */
    --coral-900: #7A2415;

    /* Mint green — secondary accent */
    --mint-50:  #F1FBF7;
    --mint-100: #DFF7EE;
    --mint-200: #B7EDD9;
    --mint-500: #34C38F;
    --mint-700: #1F7A63; /* AA-safe */
    --mint-900: #124533;

    /* Lavender — secondary accent */
    --lavender-50:  #F7F4FE;
    --lavender-100: #ECE6FB;
    --lavender-200: #D6C9F5;
    --lavender-500: #9B87D6;
    --lavender-700: #7358BF; /* AA-safe */
    --lavender-900: #4A3B82;

    /* Butter yellow — decorative/badge only. Yellow never reaches AA as a
       button background with white text, so there is no "button" shade
       here on purpose — use butter for tints/badges with dark ink text. */
    --butter-50:  #FFFBEF;
    --butter-100: #FFF3C4;
    --butter-200: #FFE79B;
    --butter-500: #F2B705;
    --butter-700: #8A6D1D; /* AA-safe text-on-white */
    --butter-900: #5C4813;

    /* Peach — decorative/badge accent */
    --peach-50:  #FFF8F3;
    --peach-100: #FFE8D6;
    --peach-200: #FFD1AD;
    --peach-500: #FF9B5C;
    --peach-700: #9C5A22; /* AA-safe text-on-white */
    --peach-900: #6B3D16;

    /* Deep muted purple — footer */
    --deep-purple-700: #4E3F78;
    --deep-purple-900: #3B2E5A;

    /* Neutrals */
    --warm-bg: #FFFDF9;
    --surface: #FFFFFF;
    --ink: #3A3550;        /* body/heading text, AA 11.4:1 on --warm-bg */
    --ink-muted: #6B6580;  /* secondary text, AA 5.4:1 on --warm-bg */
    --border-soft: #ECE7F5;

    /* ---- Fonts ---- */
    --font-heading: 'Baloo 2', sans-serif;
    --font-body: 'Nunito', sans-serif;

    /* ---- Radii ---- */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ---- Shadows (ink-tinted, diffuse — not pure black) ---- */
    --shadow-sm: 0 2px 8px rgba(58, 53, 80, 0.06);
    --shadow-md: 0 8px 24px rgba(58, 53, 80, 0.10);
    --shadow-lg: 0 16px 40px rgba(58, 53, 80, 0.14);

    /* ---- Spacing rhythm ---- */
    --space-section-y: clamp(3rem, 6vw, 5rem);

    /* ---- Type scale ---- */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;

    /* ---- Motion ---- */
    --transition-fast: 180ms ease;
    --transition-lift: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect prefers-reduced-motion globally — safe to apply now since it
   only changes behavior for users who've opted into it at the OS level,
   never a regression for anyone else. Covers both the legacy hover-lift/
   float/fade animations and the new component transitions below. */
@media (prefers-reduced-motion: reduce) {
    .hover-lift,
    .animate-float,
    .animate-fade-in-up,
    .btn,
    .card,
    .icon-chip,
    [class*="hover-lift"] {
        animation: none !important;
        transition: none !important;
    }
    .btn:hover,
    .card:hover,
    .icon-chip:hover {
        transform: none !important;
    }
}

/* ---- Pastel hero background (shared by every page's top hero/header) ---- */
.hero-pastel {
    background: linear-gradient(135deg, var(--peach-100) 0%, var(--coral-50) 45%, var(--lavender-50) 100%);
    position: relative;
    overflow: hidden;
}

/* ---- Floating nav (pastel variant) ---- */
.nav-floating-friendly {
    margin-top: 1rem;
    border-radius: var(--radius-pill);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    background: rgba(255, 253, 249, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
}

/* ---- Header style variants (Theme Settings → Appearance) ----
   header.php stamps the choice on <body data-header="…">; "light" is the
   default above and needs no rules. These override the utility classes on the
   nav markup (text-ink / text-ink-muted / hover:text-…), which they can do
   because the selectors carry an extra element or attribute. */
body[data-header="dark"] .nav-floating-friendly {
    background: color-mix(in srgb, var(--deep-purple-900) 88%, transparent);
    border-color: color-mix(in srgb, #fff 14%, transparent);
}
body[data-header="solid"] .nav-floating-friendly {
    background: var(--coral-700);
    border-color: color-mix(in srgb, #fff 20%, transparent);
}
body[data-header="dark"] .nav-floating-friendly h1,
body[data-header="solid"] .nav-floating-friendly h1 {
    color: #fff;
}
body[data-header="dark"] .nav-floating-friendly p,
body[data-header="solid"] .nav-floating-friendly p,
body[data-header="dark"] .nav-floating-friendly a,
body[data-header="solid"] .nav-floating-friendly a,
body[data-header="dark"] .nav-floating-friendly button,
body[data-header="solid"] .nav-floating-friendly button {
    color: rgba(255, 255, 255, 0.86);
}
body[data-header="dark"] .nav-floating-friendly a:hover,
body[data-header="solid"] .nav-floating-friendly a:hover {
    color: #fff;
}
body[data-header="dark"] .nav-floating-friendly #mobile-menu,
body[data-header="solid"] .nav-floating-friendly #mobile-menu {
    border-color: color-mix(in srgb, #fff 18%, transparent);
}
/* The call-to-action has to invert on a dark or brand-coloured bar: a coral
   button on a coral bar disappears. */
body[data-header="dark"] .nav-floating-friendly .btn-primary,
body[data-header="solid"] .nav-floating-friendly .btn-primary {
    background: #fff;
    color: var(--coral-900);
    box-shadow: none;
}
body[data-header="dark"] .nav-floating-friendly .btn-primary:hover,
body[data-header="solid"] .nav-floating-friendly .btn-primary:hover {
    background: var(--coral-50);
    color: var(--coral-900);
}
/* Transparent sits directly on the hero: drop the panel, keep the text dark
   because every page's hero is a light pastel wash. */
body[data-header="transparent"] .nav-floating-friendly {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* =========================================================
   Reusable components
   ========================================================= */

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-base);
    padding: 0.9rem 2rem;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition-lift), box-shadow var(--transition-lift), background-color var(--transition-fast);
}
.btn:hover {
    transform: translateY(-2px);
}
.btn:focus-visible {
    outline: 3px solid var(--lavender-500);
    outline-offset: 2px;
}

/* The glow under the primary button is tinted with the button's own colour.
   It used to be a hardcoded coral rgba(), which stayed coral-red under a blue
   or green brand colour and gave the button a mismatched halo. */
.btn-primary {
    background: var(--coral-700);
    color: #fff;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--coral-700) 45%, transparent);
}
.btn-primary:hover {
    background: var(--coral-900);
    box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--coral-700) 55%, transparent);
}

.btn-secondary-mint {
    background: var(--mint-100);
    color: var(--mint-900);
    border: 1px solid var(--mint-200);
}
.btn-secondary-mint:hover {
    background: var(--mint-200);
}

.btn-secondary-lavender {
    background: var(--lavender-100);
    color: var(--lavender-900);
    border: 1px solid var(--lavender-200);
}
.btn-secondary-lavender:hover {
    background: var(--lavender-200);
}

/* ---- Cards ---- */
.card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
    padding: 2rem;
    transition: box-shadow var(--transition-lift), transform var(--transition-lift);
}
.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card-coral    { background: var(--coral-50);    border-color: var(--coral-100); }
.card-mint     { background: var(--mint-50);     border-color: var(--mint-100); }
.card-lavender { background: var(--lavender-50); border-color: var(--lavender-100); }
.card-butter   { background: var(--butter-50);   border-color: var(--butter-100); }
.card-peach    { background: var(--peach-50);    border-color: var(--peach-100); }

/* ---- Section wrapper (alternating pastel bands) ---- */
.section {
    padding-top: var(--space-section-y);
    padding-bottom: var(--space-section-y);
}
.section-coral    { background: var(--coral-50); }
.section-mint      { background: var(--mint-50); }
.section-lavender { background: var(--lavender-50); }
.section-butter    { background: var(--butter-50); }
.section-peach      { background: var(--peach-50); }
.section-purple    { background: var(--deep-purple-900); color: #fff; }

/* ---- Badge / pill ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
}
.badge-coral    { background: var(--coral-100);    color: var(--coral-900); }
.badge-mint      { background: var(--mint-100);     color: var(--mint-900); }
.badge-lavender { background: var(--lavender-100); color: var(--lavender-900); }
.badge-butter    { background: var(--butter-100);   color: var(--butter-900); }
.badge-peach      { background: var(--peach-100);    color: var(--peach-900); }

/* ---- Icon chip ---- */
.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-pill);
    font-size: 1.5rem;
    transition: transform var(--transition-lift);
}
.icon-chip:hover { transform: scale(1.08); }
.icon-chip-coral    { background: var(--coral-100); }
.icon-chip-mint      { background: var(--mint-100); }
.icon-chip-lavender { background: var(--lavender-100); }
.icon-chip-butter    { background: var(--butter-100); }
.icon-chip-peach      { background: var(--peach-100); }

/* ---- Step marker (numbered circles, e.g. admissions process) ---- */
.step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-xl);
}
.step-marker-coral    { background: var(--coral-100);    color: var(--coral-700); }
.step-marker-mint      { background: var(--mint-100);     color: var(--mint-700); }
.step-marker-lavender { background: var(--lavender-100); color: var(--lavender-700); }
.step-marker-butter    { background: var(--butter-100);   color: var(--butter-700); }
.step-marker-peach      { background: var(--peach-100);    color: var(--peach-700); }

/* ---- Stat counter ---- */
.stat-counter-value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--text-5xl);
    color: var(--coral-700);
    line-height: 1.1;
}
.stat-counter-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin-top: 0.35rem;
}

/* ---- Wave divider ----
   Usage: <div class="wave-divider"><svg viewBox="0 0 1440 80" preserveAspectRatio="none">
            <path fill="var(--warm-bg)" d="M0,32 C240,80 480,0 720,24 C960,48 1200,88 1440,40 L1440,80 L0,80 Z"/>
          </svg></div>
   Place at the bottom of a colored section, right before the next section
   starts, with the path fill matching the *next* section's background so
   the wave reads as the transition. Add .wave-divider--flip to use the
   same markup at the top of a section instead. */
.wave-divider {
    display: block;
    width: 100%;
    line-height: 0;
    margin-top: -1px;
}
.wave-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}
.wave-divider--flip {
    transform: scaleY(-1);
    margin-top: 0;
    margin-bottom: -1px;
}

/* ---- Toggle tabs (curriculum class-group switcher) ---- */
.class-tab {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-weight: 700;
    background: var(--lavender-50);
    color: var(--ink);
    border: 1px solid var(--lavender-100);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-lift), box-shadow var(--transition-lift);
}
.class-tab:hover { background: var(--lavender-100); transform: translateY(-2px); }
.class-tab.is-active {
    background: var(--coral-700);
    color: #fff;
    border-color: var(--coral-700);
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--coral-700) 35%, transparent);
}
.class-tab.is-active:hover { background: var(--coral-900); }

/* ---- Filter pills (gallery category filter) ---- */
.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-sm);
    background: var(--lavender-50);
    color: var(--ink);
    border: 1px solid var(--lavender-100);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-lift);
}
.filter-pill:hover { background: var(--lavender-100); transform: translateY(-2px); }
.filter-pill.is-active {
    background: var(--coral-700);
    color: #fff;
    border-color: var(--coral-700);
}

@media (max-width: 640px) {
    .wave-divider svg { height: 36px; }
    .card { padding: 1.5rem; }
}

/* ---- Homepage banner slideshow (partials/banner-slider.php) ----
   Only rendered when an admin has uploaded a banner, so these rules are unused
   on a site that hasn't configured one. */
.banner-slider {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--lavender-50);
    aspect-ratio: 21 / 8;
}
.banner-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
}
.banner-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.banner-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.banner-slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1.75rem 1.5rem;
    /* A gradient scrim rather than a flat bar: caption text has to stay legible
       over whatever photograph the school uploads. */
    background: linear-gradient(to top, rgba(20, 16, 32, 0.78), transparent);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1rem, 2.4vw, 1.6rem);
    line-height: 1.25;
}
.banner-dots {
    position: absolute;
    bottom: 0.9rem;
    right: 1.1rem;
    display: flex;
    gap: 0.45rem;
    z-index: 2;
}
.banner-dot {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.banner-dot:hover { transform: scale(1.2); }
.banner-dot.is-active { background: #fff; }
.banner-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 640px) {
    .banner-slider { aspect-ratio: 3 / 2; }
    .banner-slide figcaption { padding: 2rem 1rem 1rem; }
}