/* ==========================================================================
   Good News School of Hope - Master Mobile-First Design System
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand Color Palette */
    --color-primary: #0F2C59;          /* Deep Royal Navy (Discipline & Authority) */
    --color-primary-dark: #071933;     /* Darker Header/Footer Navy */
    --color-primary-light: #1E4E8C;    /* Vibrant Accent Blue */
    --color-secondary: #C8102E;        /* Crimson Red (Badges, CTA) */
    --color-secondary-hover: #9E0B22;  /* Dark Red Hover */
    --color-accent: #D4AF37;           /* Academic Gold / Wisdom (HUNU NYANSA) */
    --color-accent-light: #FDF4D2;     /* Gold Soft Highlight */
    
    /* Neutrals & Surfaces */
    --color-bg-main: #F8FAFC;          /* Clean Slate Background */
    --color-bg-card: #FFFFFF;          /* Pure White Card Surface */
    --color-bg-subtle: #F1F5F9;        /* Subtle Grey/Blue Tint */
    --color-text-main: #1E293B;        /* High Contrast Charcoal Body Text */
    --color-text-muted: #64748B;       /* Secondary Slate Text */
    --color-text-light: #94A3B8;       /* Muted Light Text */
    --color-border: #E2E8F0;           /* Clean Border */
    --color-border-focus: #1E4E8C;     /* Border Focus Ring */
    
    /* Feedback States */
    --color-success: #10B981;
    --color-success-bg: #ECFDF5;
    --color-warning: #F59E0B;
    --color-warning-bg: #FFFBEB;
    --color-danger: #EF4444;
    --color-danger-bg: #FEF2F2;
    --color-info: #0EA5E9;
    --color-info-bg: #F0F9FF;
    
    /* Fluid Mobile-First Typography (Refined, Clean & Professional Scale) */
    --font-heading: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    
    --text-xs: clamp(0.6875rem, 1.2vw, 0.75rem);   /* 11px - 12px (Badges, metadata, breadcrumb) */
    --text-sm: clamp(0.8125rem, 1.4vw, 0.875rem);   /* 13px - 14px (Secondary copy, card text, buttons) */
    --text-base: clamp(0.875rem, 1.6vw, 0.9375rem); /* 14px - 15px (Main body text) */
    --text-lg: clamp(1rem, 2vw, 1.125rem);          /* 16px - 18px (H4, card titles, subheads) */
    --text-xl: clamp(1.125rem, 2.4vw, 1.25rem);     /* 18px - 20px (H3, modal headers) */
    --text-2xl: clamp(1.35rem, 3vw, 1.65rem);       /* 21.6px - 26.4px (H2, section titles) */
    --text-3xl: clamp(1.6rem, 3.6vw, 2rem);         /* 25.6px - 32px (H1, page banners) */
    --text-hero: clamp(1.85rem, 4.5vw, 2.65rem);    /* 29.6px - 42.4px (Hero headlines) */
    
    /* Fluid Spacing (Refined & Compact) */
    --space-xs: clamp(0.25rem, 0.75vw, 0.375rem);
    --space-sm: clamp(0.5rem, 1vw, 0.625rem);
    --space-md: clamp(0.75rem, 1.5vw, 1.125rem);
    --space-lg: clamp(1.125rem, 2.5vw, 1.75rem);
    --space-xl: clamp(1.75rem, 3.5vw, 2.35rem);
    
    /* Elevation & Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    
    /* Touch Target & Radii */
    --touch-target-min: 44px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Container Widths */
    --container-max: 1200px;
}

/* Base Reset & Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--color-bg-main);
    overflow-x: hidden;
    padding-bottom: 64px; /* Space for mobile sticky bottom bar */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* Typography Defaults (Crisp & Clean) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg); letter-spacing: -0.005em; }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p {
    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary);
}

img, svg, picture, video {
    display: block;
    max-width: 100%;
    height: auto;
}

ul, ol {
    padding-left: 1.5rem;
    margin-bottom: var(--space-md);
}

li {
    margin-bottom: 0.35rem;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

.container-narrow {
    max-width: 860px;
}

/* Section Spacing */
.section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.section-bg-white {
    background-color: #FFFFFF;
}

.section-bg-subtle {
    background-color: var(--color-bg-subtle);
}

.section-bg-navy {
    background-color: var(--color-primary-dark);
    color: #FFFFFF;
}

.section-bg-navy h1,
.section-bg-navy h2,
.section-bg-navy h3,
.section-bg-navy h4 {
    color: #FFFFFF;
}

/* Section Header (Refined & Balanced) */
.section-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.section-subtitle {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    background: rgba(200, 16, 46, 0.08);
    padding: 3px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 0.4rem;
}

.section-title {
    font-size: var(--text-2xl);
    color: var(--color-primary);
    margin-bottom: 0.4rem;
    letter-spacing: -0.015em;
}

.section-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Grid Utilities (Mobile-First 1 Column) */
.grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .grid-2-sm { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-gold { color: var(--color-accent); }
.text-crimson { color: var(--color-secondary); }
.text-navy { color: var(--color-primary); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

/* Visibility */
.mobile-only {
    display: block;
}
.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: block !important; }
}