/* ==========================================================================
   style.css — Shared layout, alignment and typography system for NSSR
   Installed on every page (see <link> in each <head>), AFTER Tailwind so
   the !important typography rules below take precedence over per-page
   utilities. Content, colours, images and page structure are unchanged:
   this file only standardises layout, spacing, alignment and type scale.
   ========================================================================== */

/* ---------- Fonts (token fonts: DM Serif Display = headings, Inter = body) -- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif:ital@0;1&family=Inter:wght@300;400;600;700&display=swap');

/* ---------- 1. Design tokens (spacing scale: 4/8/12/16/24/32/48/64/96) ------ */
:root {
    --max-width: 1200px;
    --gutter: 20px;        /* mobile side padding */
    --gutter-lg: 32px;     /* side padding from 768px up */
    --section-y: 64px;     /* section top/bottom padding, mobile */
    --section-y-lg: 96px;  /* from 768px up */

    /* Spacing-scale tokens (only values 4 8 12 16 24 32 48 64 96 are used) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    --border-soft: #E2E7F0;  /* card border (spec) */
}

/* ---------- 1a. Shared container: one invisible left edge everywhere -------- */
/* Overrides Tailwind's own .container padding so logo, headings, text,
   cards and footer all align on the same container edge on every page. */
.container {
    width: 100%;
    max-width: var(--max-width) !important;
}
.container,
.mx-auto.container {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
}
@media (min-width: 768px) {
    .container {
        padding-left: var(--gutter-lg) !important;
        padding-right: var(--gutter-lg) !important;
    }
}

/* ---------- 1a.1 Footer-specific container -------- */
.site-footer .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
@media (min-width: 768px) {
    .site-footer .container {
        padding-left: var(--gutter-lg);
        padding-right: var(--gutter-lg);
    }
}

/* ---------- 2. Heading hierarchy — same sizes on every page ----------------- */
h1, h2, h3 {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400 !important;
}

/* Emoji/label glyphs that pages place inside decorative chips keep their size */
.stat-number, .metric-number {
    font-size: clamp(1.5rem, 3vw, 2.25rem) !important; /* large stats stay prominent */
}

/* Eyebrow: small label above a heading. Colour is left to the page's own
   colour changes; this normalises type, size and spacing. */
.eyebrow {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    margin-bottom: var(--space-3) !important; /* 12px */
}

/* Intro / subheading paragraph under an H1 or H2. */
.lead {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
    line-height: 1.7 !important;
}

/* Limit long body text for readability (text width, not colour or content) */
.research-card p, .outreach-card p, .pathway-card p, .team-card p {
    max-width: 68ch;
}

/* ---------- 3. Alignment helpers -------------------------------------------- */
/* Reusable section head: eyebrow then heading then intro, one block */
.section-head {
    margin-bottom: var(--space-12); /* 48px — 56px on desktop */
}
@media (min-width: 768px) {
    .section-head { margin-bottom: 56px; }
}

/* Centre a section-head that sits above a centred card grid: the limited
   text block is centred too via margin-inline: auto */
.section-head.is-centred {
    text-align: center;
    margin-inline: auto;
}

/* Buttons/groups line up on the text edge; wrap cleanly */
.btn-row {
    display: flex;
    gap: var(--space-3); /* 12px */
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- 4. Cards: shared box model -------------------------------------- */
.team-card,
.pathway-card,
.research-card,
.outreach-card {
    padding: var(--space-6) !important;     /* 24px */
    border-radius: 8px !important;
    border-color: var(--border-soft) !important;
}
/* Keep the existing top-accent border on team cards, only as tall as before */
.team-card { border-top-width: 4px; }       /* design accent preserved */

/* Card titles sit compactly under their icon/label */
.research-card h2, .outreach-card h2 {
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    line-height: 1.3 !important;
    margin-top: var(--space-2) !important;
    margin-bottom: var(--space-2) !important;
    max-width: none !important;
}

/* Grids behind cards use a clean 24px gap (covers bespoke-lg paddings) */
.team-section, .grid { gap: var(--space-6); }  /* utility gap-6 = 24px; normalises gap-5/gap-8 used ad hoc */
@media (min-width: 768px) {
    .pathway-grid { gap: var(--space-12); }    /* 64px: 2-column text grids */
}

/* ---------- 5. Header -------------------------------------------------------- */
/* 64px header, vertically centred content (logo left / nav right is kept). */
.site-nav { height: 64px !important; }
#nav-placeholder { min-height: 64px; }
@media (max-width: 1024px) {
    /* Mobile dropdown menu hangs off the shorter header */
    .nav-links { top: 64px !important; }
}

/* ---------- 6. Footer -------------------------------------------------------- */
/* Premium Navy Footer - deep sophisticated background with NSSR blue accents */

/* Column headings: small uppercase label, eyebrow-like, in current colour */
.footer-label,
footer h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    margin-bottom: var(--space-4) !important; /* 16px */
    opacity: 1;
}

/* ---------- 7. Overflow guard ------------------------------------------------ */
html, body { overflow-x: clip; }  /* never sideways scroll; content unaffected */

/* ---------- 8. Footer (Premium Navy Version) ------------------------------
   Deep navy background with white/contrasting text and NSSR blue accents. */

.site-footer {
    background: #0B1F3A;               /* deep navy blue */
    color: #CBD5E1;                    /* soft blue-gray for text */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* Same container/max-width as the rest of the site -> left edges align */
.site-footer .container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
@media (min-width: 768px) {
    .site-footer .container {
        padding-left: var(--gutter-lg);
        padding-right: var(--gutter-lg);
    }
}

/* Main grid: 2fr 1fr 1fr 1fr desktop; single column on mobile */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-top: 64px;               /* equal padding above ... */
    padding-bottom: 64px;            /* ... and below the link grid */
}
@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;                   /* clear spacing between stacked groups */
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* Links: NSSR blue, gentle hover, 0.2s. No default underline. */
.site-footer a {
    color: #93C5FD;
    text-decoration: none;
    transition: color 0.2s ease;
}
.site-footer a:hover,
.site-footer a:focus { color: #60A5FA; }   /* bright NSSR blue on hover */
.site-footer a:focus-visible {
    outline: 2px solid #7EA2F7;      /* visible outline when tabbing */
    outline-offset: 3px;
    border-radius: 2px;
}

/* Column 1: identity */
/* .site-footer .footer-brand img { height: 48px; width: auto; margin-bottom: 16px; }
 */
.site-footer .footer-brand img {
    height: 48px;
    width: auto;
    margin-bottom: 16px;

    /* Force white logo on navy footer */
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    object-fit: contain;
}
.site-footer .footer-name {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400 !important;
    font-size: 1.4rem !important;
    line-height: 1.25;
    color: #FFFFFF;                    /* white for dark background */
    margin-bottom: 12px;
    max-width: none;                 /* override the global h-size ch limits */
}
.site-footer .footer-about { max-width: 44ch; margin-bottom: 12px; }
.site-footer .footer-location { margin-bottom: 8px; }

/* Social links: icon WITH a visible text label (accessibility) */
.site-footer .footer-social { margin-top: 16px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.site-footer .footer-social a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #CBD5E1; }   /* soft blue-gray */
.site-footer .footer-social i { width: 16px; text-align: center; font-size: 14px; }

/* Columns 2-4: link groups */
.site-footer .footer-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    color: #FFFFFF;                    /* white for dark background */
    margin-bottom: 16px !important;
}
.site-footer .footer-links { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-links li { margin-bottom: 12px; }   /* generous vertical spacing */
.site-footer .footer-links li:last-child { margin-bottom: 0; }

/* Divider: subtle blue above copyright */
.site-footer .footer-rule { border-top: 1px solid #294563; }   /* subtle blue accent */
/* Bottom bar: thin 1px rule at low opacity */
.site-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-top: 24px;
    padding-bottom: 24px;
}
.site-footer .footer-bottom p { margin: 0; color: #B8C7D9; }   /* muted light blue-gray for copyright */
.site-footer .footer-utility { display: flex; align-items: center; gap: 12px; }
.site-footer .footer-sep { opacity: 0.4; }
.site-footer .footer-dim { color: rgba(15, 31, 58, 0.55); }   /* dimmed placeholders for navy bg */

/* ---------- 9. Responsive overflow guard ------------------------------------------------ */
html, body { overflow-x: clip; }  /* never sideways scroll; content unaffected */