:root {
    --paper-bg: #f5f7fa;
    --grid-line: #e1e4e8;
    --blue-ink: #0044cc;
    --dark-ink: #1a2333;
    --light-ink: #64748b;
    --highlight: #0066ff;
    --alert: #cc2200;

    --font-heading: 'Jost', sans-serif;
    /* Was 'Share Tech Mono' — retired to drop the terminal/CS feel. Labels/eyebrows
       are now Jost, letter-spaced (each element keeps its own letter-spacing). */
    --font-mono: 'Jost', sans-serif;
    /* Fixed-width digits ONLY for the countdown (so it doesn't jitter as it ticks). */
    --font-tabular: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background-color: var(--paper-bg);
    color: var(--dark-ink);
    font-family: var(--font-heading);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Background Grid */
.drafting-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    pointer-events: none;
}

/* Anchor targets sit under the fixed navbar (~90px). Without this offset,
   jumping to #materials / #ambassadors etc. lands the section title hidden
   behind the nav , especially on cross-page links like ".#materials". */
section[id],
.materials-block[id],
[id="materials"] {
    scroll-margin-top: 110px;
}

/* Navigation */
.blueprint-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(245, 247, 250, 0.95);
    border-bottom: 2px solid var(--blue-ink);
    z-index: 1000;
    padding: 1rem 0;
    backdrop-filter: blur(5px);
}

.nav-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.brand-logo {
    height: 56px;
    width: auto;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brand-logomark {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--blue-ink);
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.brand-sub {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--light-ink);
    white-space: nowrap;
}

@media (max-width: 420px) {
    .brand-sub {
        display: none;   /* too little room next to the burger */
    }
}

/* Visually hidden but available to screen readers / SEO */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: var(--light-ink);
    font-size: 0.9rem;
    font-family: var(--font-mono);
    font-weight: 700;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: var(--blue-ink);
}

.nav-cta {
    background: var(--blue-ink);
    color: #fff;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    transition: all 0.3s;
}

.nav-cta:hover {
    background: #003399;
}

/* Hero */
.hero-section {
    position: relative;
    padding: 8rem 0 7rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Scroll hint , cascading chevrons. Sits at the bottom-center of the hero, and
   only fades in once the box animation has played its first full cycle (JS adds
   the .revealed class). Kept inside the hero (absolute) so it scrolls away. */
.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--light-ink);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    transition: color 0.3s, opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
}

.scroll-hint.revealed {
    opacity: 1;
    pointer-events: auto;
}

.scroll-hint:hover {
    color: var(--blue-ink);
}

.scroll-chevrons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.scroll-chevrons span {
    display: block;
    width: 14px;
    height: 14px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
    animation: chev-cascade 1.8s ease-in-out infinite;
}

.scroll-chevrons span:nth-child(1) { animation-delay: 0s; }
.scroll-chevrons span:nth-child(2) { animation-delay: 0.2s; }
.scroll-chevrons span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chev-cascade {
    0%   { opacity: 0; transform: rotate(45deg) translate(-4px, -4px); }
    40%  { opacity: 1; }
    80%  { opacity: 0; transform: rotate(45deg) translate(4px, 4px); }
    100% { opacity: 0; transform: rotate(45deg) translate(4px, 4px); }
}

/* Side-nav (right edge, fixed) , active section highlight */
.side-nav {
    position: fixed;
    top: 50%;
    right: 1.75rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    z-index: 50;
}

.side-nav a {
    display: flex;
    /* Dot hugs the right screen edge, label reveals to its left. Keeps the
       visible footprint ~10px wide so it clears the hero visual frame. */
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-family: var(--font-mono);
    color: var(--light-ink);
    font-size: 0.75rem;
    letter-spacing: 2px;
    transition: color 0.25s;
    position: relative;
    padding: 0.15rem 0;
}

.side-nav .dot {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--light-ink);
    border-radius: 50%;
    background: transparent;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
    flex: 0 0 auto;
}

.side-nav .label {
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.25s, transform 0.25s, color 0.25s;
    pointer-events: none;
    white-space: nowrap;
    /* Paper chip so the label stays readable if it overlaps page content. */
    background: rgba(245, 247, 250, 0.92);
    padding: 1px 6px;
}

.side-nav a:hover {
    color: var(--blue-ink);
}

.side-nav a:hover .dot {
    border-color: var(--blue-ink);
}

.side-nav a:hover .label {
    opacity: 1;
    transform: translateX(0);
}

.side-nav a.active .dot {
    background: var(--blue-ink);
    border-color: var(--blue-ink);
    transform: scale(1.25);
}

.side-nav a.active {
    color: var(--blue-ink);
}

.side-nav a.active .label {
    opacity: 1;
    transform: translateX(0);
    font-weight: 700;
}

.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

/* Hero title + subtitle (real HTML, sits above the example box) */
.hero-text-block {
    text-align: center;
    max-width: 900px;
}

.hero-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4.3vw, 3.3rem);
    line-height: 1.06;
    letter-spacing: 2px;
    color: var(--dark-ink);
    margin: 0;
}

/* The middle line is the competition blue accent, mirroring the old outline
   heading treatment. */
.hero-heading .outline {
    color: var(--blue-ink);
}

/* Subtitle: slow fade-in (replaces the old typewriter effect). */
.hero-desc {
    margin: 1.5rem auto 0;
    max-width: 620px;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.55;
    color: var(--light-ink);
    /* opacity: 0; */
    /* animation: hero-sub-fade 2.4s ease 0.5s forwards; */
}

@keyframes hero-sub-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Centered intro above the slideshow centerpiece */
.hero-intro {
    text-align: center;
    max-width: 820px;
}

/* Hero visual (centerpiece slideshow) */
.hero-visual {
    position: relative;
    width: 100%;
}

/* Boxed: the example slideshow sits in its own panel, matching the page's
   .technical-panel language (dark border, white fill, hard offset shadow) so
   it reads clearly as a distinct "these are just examples" box. */
.visual-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 21 / 9;
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    border: 2px solid var(--dark-ink);
    background: #fff;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.05);
}

.visual-frame .corner {
    display: none;
}

.visual-prompt {
    /* Unused since the question is drawn on the canvas as part of the
       storytelling sequence (it starts centered, then docks at the top). */
    display: none;
    flex: 0 0 auto;
    padding: 0.85rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    color: var(--dark-ink);
    font-style: italic;
    line-height: 1.4;
    min-height: 3.6rem;
    align-items: center;
}

.visual-prompt::before {
    content: "Q.";
    font-family: var(--font-mono);
    font-style: normal;
    color: var(--blue-ink);
    margin-right: 0.6rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.visual-canvas-wrap {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
}

.visual-header,
.visual-footer {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
}

.visual-header {
    /* Box header bar (matches .panel-header): a quiet eyebrow that tells the
       reader these are illustrative examples, not the real problems. */
    background: var(--dark-ink);
    color: #fff;
    padding: 0.5rem 1rem;
    gap: 1rem;
}

.visual-eyebrow {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.visual-note {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

.visual-footer {
    /* Caption removed and slide-dots gone, so the footer is empty; hide it to
       give the animation its full height. */
    display: none;
}

.visual-tag {
    color: var(--alert);
}

#fractal-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.slide-dots {
    display: none;   /* slide-count indicator removed; the canvas is bigger instead */
}

.slide-dot {
    width: 18px;
    height: 3px;
    background: var(--grid-line);
    cursor: pointer;
    transition: background 0.3s;
    border: 0;
    padding: 0;
}

.slide-dot.active {
    background: var(--blue-ink);
}

.meta-label {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--blue-ink);
    margin-bottom: 1rem;
    font-size: 0.8rem;
    display: inline-block;
    border: 1px solid var(--blue-ink);
    padding: 2px 8px;
}


/* Decorative lines */
.line-x,
.line-y {
    position: absolute;
    background: var(--alert);
    opacity: 0.3;
}

.line-x {
    width: 100%;
    height: 1px;
    left: 0;
}

.line-y {
    height: 100%;
    width: 1px;
    top: 0;
}


/* Participation Panel */
.participation-section {
    padding: 6rem 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.technical-panel {
    border: 2px solid var(--dark-ink);
    background: #fff;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.05);
}

.panel-header {
    background: var(--dark-ink);
    color: #fff;
    padding: 0.5rem 1rem;
    font-family: var(--font-mono);
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.panel-body {
    padding: 4rem;
    text-align: center;
}

.panel-body h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.time-display {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    margin: 3rem 0;
}

.digit-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.digit-group span {
    font-size: 3.5rem;
    font-family: var(--font-tabular);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--blue-ink);
    line-height: 1;
}

.digit-group small {
    font-size: 0.75rem;
    color: var(--light-ink);
    margin-top: 0.5rem;
}

.separator {
    font-size: 3rem;
    color: var(--light-ink);
    margin-top: -10px;
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.tech-btn {
    padding: 1rem 2rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    cursor: pointer;
    border: 1px solid var(--blue-ink);
    transition: all 0.2s;
    background: transparent;
}

.tech-btn.primary {
    background: var(--blue-ink);
    color: #fff;
}

.tech-btn.primary:hover {
    background: #003399;
}

.tech-btn.secondary {
    color: var(--blue-ink);
}

.tech-btn.secondary:hover {
    background: rgba(0, 68, 204, 0.05);
}

/* Inline problem-sheet preview: embedded in the participation panel while the
   round is live. Matches the .technical-panel language (dark border + dark-ink
   header bar). The iframe is hidden on mobile (below), where the Download button
   is the fallback. */
.pdf-viewer-container {
    width: 100%;
    max-width: 760px;
    margin: 2.5rem auto 0;
    border: 2px solid var(--dark-ink);
    background: #fff;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.05);
    text-align: left;
}

.pdf-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--dark-ink);
    color: #fff;
    padding: 0.55rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.pdf-viewer-header span i {
    margin-right: 0.5rem;
    color: #7aa2ff;
}

.pdf-download-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    opacity: 0.85;
    transition: opacity 0.2s;
}

.pdf-download-link:hover {
    opacity: 1;
}

.pdf-viewer-iframe {
    width: 100%;
    height: 720px;
    border: 0;
    display: block;
    background: #fff;
}

@media (max-width: 768px) {
    /* Inline PDF embedding is unreliable on phones; hide the frame and let the
       Download / Open full PDF actions do the work. */
    .pdf-viewer-iframe {
        display: none;
    }
}

/* Corner markers */
.corner {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid var(--alert);
}

.t-l {
    top: -2px;
    left: -2px;
    border-right: 0;
    border-bottom: 0;
}

.t-r {
    top: -2px;
    right: -2px;
    border-left: 0;
    border-bottom: 0;
}

.b-l {
    bottom: -2px;
    left: -2px;
    border-right: 0;
    border-top: 0;
}

.b-r {
    bottom: -2px;
    right: -2px;
    border-left: 0;
    border-top: 0;
}


/* Timeline */
.timeline-section {
    padding: 6rem 0;
}

.section-heading {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 4rem;
    color: var(--dark-ink);
}

.blueprint-timeline {
    position: relative;
    border-left: 2px dashed var(--blue-ink);
    margin-left: 20px;
    padding: 1rem 0;
}

.milestone {
    position: relative;
    padding-left: 40px;
    margin-bottom: 3rem;
}

.milestone-marker {
    position: absolute;
    left: -7px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid var(--blue-ink);
    border-radius: 50%;
}

.milestone-data {
    border: 1px solid var(--grid-line);
    background: #fff;
    padding: 1.5rem;
    transition: border-color 0.3s;
}

.milestone:hover .milestone-data {
    border-color: var(--blue-ink);
}

.date-tag {
    display: inline-block;
    background: var(--blue-ink);
    color: #fff;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

/* Features */
.features-section {
    padding: 6rem 0;
    background: #fff;
    border-top: 1px solid var(--grid-line);
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.spec-card {
    padding: 2rem;
    background: var(--paper-bg);
    border: 1px solid var(--grid-line);
    position: relative;
}

.card-line-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--light-ink);
    transition: background 0.3s;
}

.spec-card:hover .card-line-top {
    background: var(--blue-ink);
}

.spec-card h3 {
    margin-bottom: 0.4rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.spec-q {
    font-family: var(--font-mono);
    color: var(--blue-ink);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0.75rem;
}

/* Footer */
.blueprint-footer {
    padding: 4rem 0 2rem;
    border-top: 2px solid var(--dark-ink);
    background: #fff;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--blue-ink);
    margin-bottom: 0.5rem;
}

.social-links a {
    display: block;
    color: var(--light-ink);
    font-family: var(--font-mono);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.social-links a:hover {
    color: var(--blue-ink);
    text-decoration: underline;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
    border-top: 1px solid var(--grid-line);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--light-ink);
}

@media (max-width: 768px) {
    /* Landscape canvas gets too small on phones; go portrait again. */
    .visual-frame {
        aspect-ratio: 4 / 5;
    }

    /* The long clarifying note crowds the eyebrow on a narrow header; keep
       just the eyebrow, which still signals "examples" clearly enough. */
    .visual-note {
        display: none;
    }

    .visual-header {
        justify-content: center;
    }

    .hero-heading {
        letter-spacing: 1px;
    }

    /* Compact countdown: full-size digits wrapped mid-row on phones. */
    .panel-body {
        padding: 2.5rem 1.25rem;
    }

    .time-display {
        gap: 0.75rem;
    }

    .digit-group span {
        font-size: 2.4rem;
    }

    .separator {
        font-size: 2rem;
        margin-top: -4px;
    }

    /* Tighter timeline rail so milestone cards get more width. */
    .blueprint-timeline {
        margin-left: 8px;
    }

    .milestone {
        padding-left: 26px;
    }

    .spec-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        flex-direction: column;
        gap: 2rem;
    }

    .nav-menu {
        display: none;
    }

    .time-display {
        flex-wrap: wrap;
    }

    .scroll-hint {
        display: none;
    }
}

/* Below this width the hero visual frame reaches the right screen edge, so
   even the dots would sit on top of it (e.g. when zooming in). */
@media (max-width: 1420px) {
    .side-nav {
        display: none;
    }
}


/* =================================================================
   COMPETITION SECTIONS , added in the new-design transfer.
   All colours/typography reuse the blueprint :root variables above.
   ================================================================= */

/* Nav dropdown ("More") */
.nav-has-dropdown {
    position: relative;
}

/* The multi-column panel anchors to the navbar (nearest positioned ancestor =
   .nav-wrapper), not to its own trigger; anchored to the trigger it sprawled
   far left across the middle of the nav. Single-column dropdowns (Login) stay
   under their trigger. Browsers without :has() fall back to trigger-anchored. */
.nav-wrapper {
    position: relative;
}

.nav-has-dropdown:has(> .nav-dropdown:not(.nav-dropdown-single)) {
    position: static;
    /* Extend the trigger's hover zone down through the navbar's padding so the
       cursor can travel to the panel without the hover chain breaking. The
       negative margin keeps the menu's vertical centering unchanged. */
    padding-bottom: 1.5rem;
    margin-bottom: -1.5rem;
}

.nav-has-dropdown:has(> .nav-dropdown:not(.nav-dropdown-single)) > .nav-dropdown {
    right: 2rem;   /* align with the nav content's right edge */
}

.nav-more {
    cursor: pointer;
}

.nav-more i {
    font-size: 0.7rem;
}

.nav-dropdown {
    position: absolute;
    top: 100%;            /* flush with the trigger , no dead gap to lose hover in */
    right: 0;
    display: none;
    /* One column per group (menu.php has 4); left-aligned to counter the
       global body { text-align: center } from main.css. */
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 1.25rem 1.75rem;
    width: max-content;
    max-width: min(90vw, 780px);
    text-align: left;
    background: #fff;
    border: 2px solid var(--blue-ink);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    /* No margin-top: the trigger wrapper's padding-bottom IS the visual gap and
       it stays hoverable. A margin here would sit outside the wrapper and drop
       hover before the cursor reaches the panel. */
    z-index: 1001;
}

/* Single-column variant (Login) , anchored under its own trigger, not the
   nav's right edge, and kept narrow. */
.nav-dropdown-single {
    grid-template-columns: 1fr;
    right: auto;
    left: 0;
    width: 220px;
    max-width: 220px;
}

.nav-dropdown-single .dropdown-col a i {
    width: 18px;
    color: var(--blue-ink);
    margin-right: 0.4rem;
}

/* Invisible bridge across the margin gap so moving the cursor from the
   trigger down into the dropdown never crosses an un-hovered region. */
.nav-dropdown::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    height: 1rem;
}

/* Keep the trigger "active" (hoverable) while the cursor travels down into the
   dropdown. The padding must span the dropdown's full margin-top gap (1rem),
   otherwise hover drops in the gap and the menu collapses before the cursor
   reaches it. Negative margin cancels the layout shift so centering is kept.
   (Multi-column dropdowns get their own 1.5rem bridge via the :has() rule.) */
.nav-has-dropdown {
    padding-bottom: 1rem;
    margin-bottom: -1rem;
}

.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown,
.nav-has-dropdown.open .nav-dropdown {
    display: grid;
}

/* Right-hand nav cluster: language selector + CTA + burger */
.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Language selector dropdown */
.language-selector {
    position: relative;
    /* Bridge the full gap down to the dropdown with real padding on the
       always-present wrapper. The dropdown's own ::before bridge cannot help:
       it lives inside the dropdown, which is display:none until hovered, so the
       moment the cursor leaves this wrapper the bridge is gone and hover drops. */
    padding-bottom: 1rem;   /* stays hoverable across the gap to the dropdown */
    margin-bottom: -1rem;   /* cancel the padding so nav-right centering is kept
                               (selector stays aligned with the Participate button) */
}

.selected-language {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light-ink);
    border: 1px solid var(--grid-line);
    padding: 0.4rem 0.7rem;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}

.selected-language:hover {
    color: var(--blue-ink);
    border-color: var(--blue-ink);
}

.selected-language .fa-caret-down {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.language-selector:hover .fa-caret-down,
.language-selector.open .fa-caret-down {
    transform: rotate(180deg);
}

.language-dropdown {
    position: absolute;
    top: 100%;            /* flush with the wrapper's padded bottom , the 1rem
                             padding on .language-selector is the visual gap and
                             stays hoverable, so no dead zone to lose hover in */
    right: 0;
    display: none;
    text-align: left;
    flex-direction: column;
    min-width: 160px;
    max-height: 60vh;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 2px solid var(--blue-ink);
    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0;
    z-index: 1001;
}

/* Invisible bridge across the margin gap (same fix as the nav dropdowns). */
.language-dropdown::before {
    content: "";
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    height: 1rem;
}

.language-selector:hover .language-dropdown,
.language-selector:focus-within .language-dropdown,
.language-selector.open .language-dropdown {
    display: flex;
}

.language-dropdown li {
    margin: 0;
}

.language-dropdown a {
    display: block;
    text-decoration: none;
    color: var(--dark-ink);
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
}

.language-dropdown a:hover {
    background: var(--paper-bg);
    color: var(--blue-ink);
    padding-left: 1.25rem;
}

.dropdown-col h6 {
    font-family: var(--font-mono);
    color: var(--blue-ink);
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--grid-line);
    padding-bottom: 0.4rem;
}

.dropdown-col a {
    display: block;
    text-decoration: none;
    color: var(--dark-ink);
    font-size: 0.85rem;
    padding: 0.3rem 0;
    transition: color 0.2s, padding-left 0.2s;
}

.dropdown-col a:hover {
    color: var(--blue-ink);
    padding-left: 4px;
}

/* Burger (hidden on desktop, shown on mobile) */
.nav-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--blue-ink);
    color: var(--blue-ink);
    font-size: 1.1rem;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
}

/* Mobile slide-in menu */
.mobile-menu {
    text-align: left;
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 360px);
    height: 100%;
    background: #fff;
    border-left: 2px solid var(--blue-ink);
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding-bottom: 3rem;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--blue-ink);
    position: sticky;
    top: 0;
    background: #fff;
}

.mobile-menu-close {
    background: transparent;
    border: 0;
    font-size: 1.3rem;
    color: var(--dark-ink);
    cursor: pointer;
}

.mobile-menu-body {
    padding: 1rem 1.25rem;
}

.mobile-menu-body > a {
    display: block;
    text-decoration: none;
    color: var(--dark-ink);
    font-family: var(--font-mono);
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--grid-line);
}

.mobile-menu-body > a.mm-primary {
    background: var(--blue-ink);
    color: #fff;
    text-align: center;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border: 0;
}

.mm-section {
    margin-top: 1.25rem;
}

.mm-section > span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--blue-ink);
    border-bottom: 1px solid var(--grid-line);
    padding-bottom: 0.3rem;
    margin-bottom: 0.4rem;
}

.mm-section a {
    display: block;
    text-decoration: none;
    color: var(--dark-ink);
    font-size: 0.9rem;
    padding: 0.35rem 0;
}

.mm-section a:hover {
    color: var(--blue-ink);
}

/* Section sub-headings */
.section-sub {
    text-align: center;
    color: var(--light-ink);
    max-width: 720px;
    margin: -3rem auto 3rem;
    font-size: 1.05rem;
}

.section-sub a {
    color: var(--blue-ink);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.section-sub a:hover {
    text-decoration: underline;
}

/* Hero announcement (dynamic banner from index_text.txt) */
.hero-announcement {
    margin: 1.5rem auto 0;
    max-width: 640px;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--alert);
    background: #fff;
    font-size: 0.95rem;
    text-align: left;
}

/* Inline subscribe form (CTA + newsletter) */
.inline-subscribe {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.inline-subscribe input {
    flex: 1 1 260px;
    max-width: 340px;
    padding: 1rem;
    border: 1px solid var(--blue-ink);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    background: #fff;
}

.inline-subscribe input:focus {
    outline: 2px solid var(--blue-ink);
    outline-offset: -2px;
}

/* Tech buttons used as links/anchors keep button look */
a.tech-btn {
    text-decoration: none;
    display: inline-block;
}

/* Timeline status chips */
.status-chip {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 1px 8px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1px;
    vertical-align: middle;
}

.status-chip.open {
    background: var(--blue-ink);
    color: #fff;
}

.status-chip.locked {
    background: var(--grid-line);
    color: var(--light-ink);
}

.milestone-data h3 {
    margin: 0.4rem 0;
    font-size: 1.1rem;
}

.milestone-data a {
    color: var(--blue-ink);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.milestone-data a:hover {
    text-decoration: underline;
}

.milestone-end .milestone-marker {
    background: var(--blue-ink);
}

/* Six-domain grid */
.spec-grid-6 {
    grid-template-columns: repeat(3, 1fr);
}

.spec-no {
    font-family: var(--font-mono);
    color: var(--alert);
    font-size: 0.8rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Program (teachers/schools) section */
.program-section {
    padding: 6rem 0;
    border-top: 1px solid var(--grid-line);
}

.program-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.program-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--grid-line);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.program-card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.program-card h3 i {
    color: var(--blue-ink);
    margin-right: 0.4rem;
}

.program-card p {
    color: var(--light-ink);
    font-size: 0.92rem;
    flex: 1;
}

.card-link {
    margin-top: 1rem;
    color: var(--blue-ink);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.card-link:hover {
    text-decoration: underline;
}

.card-link i {
    transition: transform 0.2s;
}

.card-link:hover i {
    transform: translateX(4px);
}

/* Materials / posters */
.materials-block {
    margin-top: 4rem;
    border-top: 1px dashed var(--blue-ink);
    padding-top: 2.5rem;
}

.materials-heading {
    font-family: var(--font-mono);
    color: var(--blue-ink);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.material-item {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--grid-line);
    background: #fff;
    text-decoration: none;
    color: var(--dark-ink);
    text-align: center;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* First-page preview of the document (thumbs generated from docs/*.pdf) */
.material-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 425 / 600;
    background: var(--paper-bg);
    border-bottom: 1px solid var(--grid-line);
    overflow: hidden;
}

.material-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Tile without a PDF (e.g. Training Hub): centered icon instead of a preview */
.material-thumb.material-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.material-thumb-icon i {
    font-size: 2.6rem;
    color: var(--blue-ink);
}

.material-label {
    display: block;
    padding: 0.6rem 0.5rem 0.15rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

.material-desc {
    display: block;
    padding: 0 0.6rem 0.7rem 0.6rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--light-ink);
}

.material-item:hover {
    border-color: var(--blue-ink);
    transform: translateY(-3px);
    box-shadow: 6px 6px 0 rgba(0, 68, 204, 0.08);
}

/* Ambassador section */
.ambassador-section {
    padding: 6rem 0;
    background: #fff;
    border-top: 1px solid var(--grid-line);
}

.ambassador-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.ambassador-card {
    border: 1px solid var(--grid-line);
    border-left: 3px solid var(--blue-ink);
    padding: 1.75rem;
    background: var(--paper-bg);
}

.ambassador-card h4 {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.ambassador-card h4 i {
    color: var(--alert);
    margin-right: 0.4rem;
}

.ambassador-card ul {
    list-style: none;
}

.ambassador-card li {
    padding: 0.35rem 0;
    font-size: 0.92rem;
    color: var(--dark-ink);
}

.level-list .level-badge {
    display: inline-block;
    background: var(--blue-ink);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 1px 8px;
    margin-right: 0.5rem;
}

.ambassador-cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem;
}

/* Newsletter section */
.newsletter-section {
    padding: 5rem 0;
}

.newsletter-panel {
    max-width: 700px;
}

/* Expanded footer */
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

.footer-brand p {
    color: var(--light-ink);
    font-size: 0.9rem;
    margin: 0.75rem 0 1rem;
    max-width: 320px;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--blue-ink);
    color: var(--blue-ink);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.footer-social a:hover {
    background: var(--blue-ink);
    color: #fff;
}

.footer-col h5 {
    font-family: var(--font-mono);
    color: var(--dark-ink);
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.footer-col > a {
    display: block;
    color: var(--light-ink);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.3rem 0;
}

.footer-col > a:hover {
    color: var(--blue-ink);
}

.footer-col > a i {
    width: 18px;
    color: var(--blue-ink);
}

/* Partners row: small logo thumbnails from src/partners/. */
.footer-partners {
    border-top: 1px solid var(--grid-line);
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    text-align: center;
}

.footer-partners h5 {
    font-family: var(--font-mono);
    color: var(--dark-ink);
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
}

.footer-partner-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 2rem;
}

/* Each logo sits on its own white tile so light- and dark-background logos
   both read clearly against the paper footer. */
.footer-partner-logos a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    background: #fff;
    border: 1px solid var(--grid-line);
    padding: 10px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.footer-partner-logos a:hover {
    border-color: var(--blue-ink);
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 rgba(0, 68, 204, 0.08);
}

.footer-partner-logos img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.footer-bottom {
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-legal {
    display: flex;
    gap: 1.25rem;
}

.footer-legal a {
    color: var(--light-ink);
    text-decoration: none;
}

.footer-legal a:hover {
    color: var(--blue-ink);
}

/* Responsive */
@media (max-width: 1100px) {
    .spec-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .program-grid { grid-template-columns: repeat(2, 1fr); }
    .materials-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .nav-burger { display: block; }
    .nav-cta { display: none; }
    .language-selector { display: none; }   /* mobile uses the in-menu language link */
    .mobile-menu { display: block; }

    .spec-grid-6 { grid-template-columns: 1fr; }
    .program-grid { grid-template-columns: 1fr; }
    .ambassador-grid { grid-template-columns: 1fr; }
    .materials-grid { grid-template-columns: repeat(2, 1fr); }

    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }

    .section-sub { margin-top: -2rem; }
}