@layer theme, basic, advanced, grid, tt_content, page, components, plugins, utilities;

@layer theme {
    :root {
        color-scheme: light;

        --background: light-dark(#fff, #fff);
        --foreground: light-dark(#001844, #001844);

        --card: light-dark(#fff, #fff);
        --card-foreground: light-dark(#001844, #001844);

        --primary: light-dark(#001844, #001844);
        --primary-foreground: light-dark(#fafafa, #18181b);

        --secondary: light-dark(#EEE8DF, #EEE8DF);
        --secondary-foreground: light-dark(#001844, #001844);

        --muted: light-dark(#f4f4f5, #27272a);
        --muted-foreground: light-dark(#71717a, #a1a1aa);

        --faint: light-dark(#fafafa, #1e1e21);
        --faint-foreground: light-dark(#a1a1aa, #71717a);

        --accent: light-dark(#f4f4f5, #27272a);
        --danger: light-dark(#d32f2f, #f4807b);
        --danger-foreground: light-dark(#fafafa, #18181b);
        --success: light-dark(#008032, #6cc070);
        --success-foreground: light-dark(#fafafa, #18181b);
        --warning: light-dark(#a65b00, #f0a030);
        --warning-foreground: #09090b;

        --border: light-dark(#d4d4d8, #52525b);
        --input: light-dark(#d4d4d8, #52525b);
        --ring: light-dark(#574747, #d4d4d8);

        /* === ELEMENTS === */
        --nav: light-dark(rgba(249, 248, 243, 1), rgba(249, 248, 243, 1));
        --nav-hover: light-dark(rgba(216, 211, 199, 1), rgba(216, 211, 199, 1));
        --nav-hidden: light-dark(rgba(249, 248, 243, 0.78), rgba(249, 248, 243, 0.78));
        --nav-border: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
        --nav-foreground: var(--primary);

        /* === SPACING === */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-14: 3.5rem;
        --space-16: 4rem;
        --space-18: 4.5rem;

        --space-content: var(--space-12);

        --radius-small: 0.125rem;
        --radius-medium: 0.375rem;
        --radius-large: 0.75rem;
        --radius-full: 9999px;

        --bar-height: 0.5rem;

        /* === FONT === */
        --font-sans: Inter, sans-serif;
        --font-sans-variable: InterVariable, sans-serif;
        --font-mono: ui-monospace, Consolas, monospace;

        --text-1: clamp(2rem, 2.5rem + 1.5vw, 3.5rem);
        --text-2: clamp(1.5rem, 2rem + 0.8vw, 2.25rem);
        --text-3: clamp(1.25rem, 1.25rem + 0.5vw, 2rem);
        --text-4: clamp(1.125rem, 1.125rem + 0.3vw, 1.5rem);
        --text-5: 1.125rem;
        --text-6: 1rem;
        --text-7: 0.875rem;
        --text-8: 0.75rem;
        --text-regular: var(--text-6);

        --leading-normal: 1.5;

        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 800;

        /* === SHADOW === */
        --shadow-small: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --shadow-large: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

        /* === ANIMATIONS === */
        --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
        --transition: 500ms cubic-bezier(0.4, 0, 0.2, 1);

        /* === Z-INDEX === */
        --z-dropdown: 50;
        --z-modal: 200;

        /* === GRID === */
        --grid-cols: 12;
        --grid-gap: 2rem;
        --nav-max: 1080px;
        --container-max: 1200px;
        --container-pad: 1rem;
    }
}

@layer basic {
    :root {
        font-family: var(--font-sans);
        font-size: var(--text-regular);
        line-height: var(--leading-normal);
        color: var(--foreground);
        scroll-behavior: smooth;
    }

    @supports (font-variation-settings: normal) {
        :root {
            font-family: var(--font-sans-variable);
            font-optical-sizing: auto;
        }
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    * {
        margin: 0;
    }

    html {
        tab-size: 4;
    }

    body {
        background-color: var(--background);
        color: var(--foreground);
        -webkit-font-smoothing: antialiased;
    }

    ::selection {
        background-color: var(--primary);
        color: var(--primary-foreground);
    }

    img,
    picture,
    video,
    canvas,
    svg {
        max-width: 100%;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: var(--font-bold);
        line-height: 1.25;

        &:first-child {
            margin-block-start: 0;
        }
    }

    h1 {
        font-size: var(--text-1);
        margin: var(--space-10) 0 var(--space-6);
    }

    h2 {
        font-size: var(--text-2);
        margin: var(--space-8) 0 var(--space-5);
    }

    h3 {
        font-size: var(--text-3);
        margin: var(--space-6) 0 var(--space-4);
    }

    h4 {
        font-size: var(--text-4);
        margin: var(--space-5) 0 var(--space-3);
    }

    h5 {
        font-size: var(--text-5);
        margin: var(--space-4) 0 var(--space-2);
    }

    h6 {
        font-size: var(--text-regular);
        margin: var(--space-4) 0 var(--space-2);
    }

    p {
        margin-block-end: var(--space-4);

        &:last-child {
            margin-block-end: 0;
        }
    }

    a {
        color: var(--primary);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color var(--transition-fast);

        &:hover {
            color: rgb(from var(--primary) r g b / 0.8);
        }
    }

    strong,
    b {
        font-weight: var(--font-semibold);
    }

    em,
    i {
        font-style: italic;
    }

    small {
        font-size: var(--text-7);
    }

    code {
        font-family: var(--font-mono);
        font-size: 0.875em;
        padding: calc(var(--space-1) / 2) var(--space-1);
        background-color: var(--faint);
        border-radius: var(--radius-small);
    }

    pre {
        font-family: var(--font-mono);
        padding: var(--space-4);
        background-color: var(--faint);
        border-radius: var(--radius-medium);
        overflow-x: auto;
        margin-block-end: var(--space-4);

        code {
            padding: 0;
            background: none;
            border-radius: 0;
        }
    }

    blockquote {
        border-inline-start: 4px solid var(--border);
        padding-inline-start: var(--space-4);
        margin: var(--space-4) 0;
        color: var(--muted-foreground);
        font-style: italic;
    }

    hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: var(--space-2) 0;
    }

    ul,
    ol {
        padding-inline-start: var(--space-6);
        margin-block-end: var(--space-4);
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }

    li {
        margin-block-end: var(--space-1);
    }

    mark {
        background-color: rgb(from var(--warning) r g b / 0.3);
        padding: calc(var(--space-1) / 2) var(--space-1);
        border-radius: var(--radius-small);
    }

    [hidden] {
        display: none;
    }

    :focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }

    :disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

@layer advanced {
    .subheader {
        display: flex;
        align-items: center;

        font-size: .9rem;
        font-weight: var(--font-semibold);
    }
    .subheader::before {
        content: '';
        display: block;

        width: var(--space-8);
        height: 1px;
        margin-right: var(--space-2);
        background-color: var(--primary);
    }
    header .subheader {
        margin-bottom: var(--space-1);
    }
    header .subheader + h1,
    header .subheader + h2 {
        margin-top: 0;
    }
}

@layer tt_content {
    .frame {
        width: 100%;
        max-width: var(--container-max);
        margin: var(--space-content) 0;
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;

        padding: var(--space-content) 0;
        margin: var(--space-content) 0;
    }

    .container .row {
        width: 100%;
        max-width: var(--container-max);
        margin: var(--space-content) 0;
    }

    .container--color-primary {
        background-color: var(--primary);
        color: var(--primary-foreground);
    }
    .container--color-primary ::selection {
        background-color: var(--primary-foreground);
        color: var(--primary);
    }
    .container--color-primary .subheader::before {
        background-color: var(--primary-foreground);
    }

    .container--color-secondary {
        background-color: var(--secondary);
        color: var(--secondary-foreground);
    }

    figcaption.image-caption {
        margin-top: var(--space-3);
        font-size: 0.8rem;
        font-style: italic;
    }
}

@layer utilities {
    .align-left {
        text-align: start;
    }

    .align-center {
        text-align: center;
    }

    .align-right {
        text-align: end;
    }

    .text-light {
        color: var(--muted-foreground);
    }

    .text-lighter {
        color: var(--faint-foreground);
    }

    .text-big {
        font-size: var(--text-3);
    }

    .text-bold {
        font-weight: var(--font-semibold);
    }

    .flex {
        display: flex;
    }

    .flex-col {
        flex-direction: column;
    }

    .items-center {
        align-items: center;
    }

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

    .justify-between {
        justify-content: space-between;
    }

    .justify-end {
        justify-content: flex-end;
    }

    /* Bootstrap inspired. */
    .hstack {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        flex-wrap: wrap;
        align-content: flex-start;
        height: auto;

        * {
            margin: 0;
        }
    }

    .vstack {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .gap-1 {
        gap: var(--space-1);
    }

    .gap-2 {
        gap: var(--space-2);
    }

    .gap-4 {
        gap: var(--space-4);
    }

    .mt-2 {
        margin-block-start: var(--space-2);
    }

    .mt-4 {
        margin-block-start: var(--space-4);
    }

    .mt-6 {
        margin-block-start: var(--space-6);
    }

    .mb-2 {
        margin-block-end: var(--space-2);
    }

    .mb-4 {
        margin-block-end: var(--space-4);
    }

    .mb-6 {
        margin-block-end: var(--space-6);
    }

    .p-4 {
        padding: var(--space-4);
    }

    .w-100 {
        width: 100%;
    }

    :is(ul, ol, a).unstyled {
        list-style: none;
        text-decoration: none;
        padding: 0;
    }
}

@layer page {
    #main-navigation {
        position: fixed;
        z-index: 100;
        inset: var( --space-8) 0 auto 0;
    }
    #main-navigation .container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);

        margin: 0 auto;
        padding: 5px;
        background: var(--nav);
        border: 1px solid var(--nav-border);
        color: var(--nav-foreground);
        max-width: var(--nav-max);

        box-shadow: 0 5px 15px rgba(0,0,0,.25);

        border-radius: var(--radius-full);
        backdrop-filter: blur(14px);
    }

    #main-navigation.main-header--top {
        top: var( --space-8);
        transition: top var(--transition);
    }
    #main-navigation.main-header--not-top {
        top: -200px;
        transition: top var(--transition);
    }
    #main-navigation.main-header--not-top .container {
        background: var(--nav);
    }
    #main-navigation.main-header--pinned {
        top: var( --space-8);
    }
    #main-navigation.main-header--not-pinned {
        top: -200px
    }

    .logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 15px 10px 10px;

        background-color: var(--primary);
        border-radius: var(--radius-full);

        transition: opacity var(--transition-fast), transform var(--transition-fast);
    }

    a.logo-wrapper:hover {
        opacity: .9;
        transform: scale(1.02)
    }
    a.logo-wrapper:active {
        opacity: .9;
        transform: scale(.98)
    }

    /* ── Hamburger ── */
    .nav-hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-full);
        transition: background var(--transition-fast);
        flex-shrink: 0;
    }
    .nav-hamburger:hover {
        background: var(--secondary);
    }
    .nav-hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--foreground);
        border-radius: 2px;
        transform-origin: center;
        transition: transform 250ms ease, opacity 250ms ease, width 250ms ease;
    }
    .nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
    .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Nav overlay close button (mobile only) ── */
    .nav-overlay-close {
        display: none;
    }

    /* ── Main nav list ── */
    #main-navigation nav {
        flex-grow: 1;
    }
    .nav-main {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .nav-main__item {
        list-style: none;
        margin-block-end: 0;
        position: static;
    }
    .nav-main__link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        text-decoration: none;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-full);
        font-size: var(--text-6);
        color: var(--nav-foreground);
        transition: background var(--transition-fast), color var(--transition-fast);
        white-space: nowrap;
    }
    .nav-main__link:hover,
    .nav-main__item.is-open > .nav-main__link {
        background: var(--nav-hover);
        color: var(--nav-foreground);
    }
    .nav-main__item.is-active > .nav-main__link {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .nav-arrow {
        transition: transform 250ms ease;
        flex-shrink: 0;
    }
    .nav-main__item.is-open .nav-arrow {
        transform: rotate(180deg);
    }

    /* Hide chevron arrows on desktop — mobile keeps them */
    @media (min-width: 769px) {
        .nav-arrow,
        .nav-arrow-right {
            display: none;
        }
    }

    /* ── Mega dropdown ── */
    .nav-dropdown {
        position: absolute;
        left: var(--space-4);
        right: var(--space-4);
        top: calc(100% + 10px);
        z-index: var(--z-dropdown);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-6px);
        /* visibility delays to 0s on open, 200ms on close so it hides only after fade-out */
        transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
    }
    /* Invisible bridge fills the gap between the pill and the dropdown panel,
       so mouseleave on the nav item isn't triggered while crossing the gap. */
    .nav-dropdown::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }
    .nav-main__item.is-open > .nav-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
    }
    .nav-dropdown__inner {
        display: flex;
        max-width: var(--nav-max);
        margin: 0 auto;
        background: var(--nav);
        border: 1px solid var(--nav-border);
        border-radius: var(--radius-large);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
        backdrop-filter: blur(14px);
        overflow: hidden;
        min-height: 280px;
    }

    /* Left list (level 2) */
    .nav-dropdown__list {
        width: 240px;
        flex-shrink: 0;
        padding: var(--space-3) var(--space-2);
        margin: 0;
        list-style: none;
        border-right: 1px solid var(--border);
    }
    .nav-dropdown__item {
        margin: 0;
    }
    .nav-dropdown__link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) var(--space-4);
        text-decoration: none;
        color: var(--foreground);
        font-size: var(--text-6);
        border-radius: var(--radius-full);
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .nav-dropdown__link:hover,
    .nav-dropdown__item.is-active > .nav-dropdown__link {
        background: var(--nav-hover);
        color: var(--nav-foreground);
    }
    .nav-arrow-right {
        opacity: 0;
        transition: opacity 150ms, transform 150ms;
        flex-shrink: 0;
    }
    .nav-dropdown__item.is-active .nav-arrow-right,
    .nav-dropdown__link:hover .nav-arrow-right {
        opacity: 1;
        transform: translateX(2px);
    }

    /* Middle column (level 3) */
    .nav-dropdown__sublists {
        width: 240px;
        flex-shrink: 0;
        position: relative;
        border-right: 1px solid var(--border);
    }
    .nav-dropdown__sublist {
        position: absolute;
        inset: 0;
        padding: var(--space-3) var(--space-2);
        margin: 0;
        list-style: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }
    .nav-dropdown__sublist.is-active {
        opacity: 1;
        pointer-events: auto;
    }
    .nav-dropdown__subitem {
        margin: 0;
    }
    .nav-dropdown__sublink {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-2) var(--space-4);
        text-decoration: none;
        color: var(--foreground);
        font-size: var(--text-6);
        border-radius: var(--radius-full);
        transition: background var(--transition-fast), color var(--transition-fast);
    }
    .nav-dropdown__sublink:hover,
    .nav-dropdown__subitem.is-active > .nav-dropdown__sublink {
        background: var(--nav-hover);
        color: var(--nav-foreground);
    }

    /* Right panels */
    .nav-dropdown__panels {
        flex: 1;
        position: relative;
        background: var(--primary);
    }
    .nav-dropdown__panel {
        position: absolute;
        inset: 0;
        padding: var(--space-8);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }
    .nav-dropdown__panel.is-active {
        opacity: 1;
        pointer-events: auto;
    }
    .nav-dropdown__panel-title {
        font-size: var(--text-4);
        margin: 0 0 var(--space-3);
    }
    .nav-dropdown__panel-title a {
        text-decoration: none;
        color: var(--primary-foreground);
        transition: color var(--transition-fast);
    }
    .nav-dropdown__panel-title a:hover {
        color: rgb(from var(--primary-foreground) r g b / 0.8);
    }
    .nav-dropdown__panel-desc {
        color: rgb(from var(--primary-foreground) r g b / 0.7);
        font-size: var(--text-6);
        margin-bottom: var(--space-5);
        max-width: 42ch;
    }
    .nav-dropdown__panel-links {
        list-style: none;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-1);
        margin: 0 0 var(--space-6);
    }
    .nav-dropdown__panel-links li {
        margin: 0;
    }
    .nav-dropdown__panel-links a {
        display: block;
        padding: var(--space-2) var(--space-3);
        text-decoration: none;
        font-size: var(--text-7);
        border-radius: var(--radius-medium);
        color: var(--primary-foreground);
        transition: background var(--transition-fast);
    }
    .nav-dropdown__panel-links a:hover {
        background: rgb(from var(--primary-foreground) r g b / 0.12);
    }
    .nav-dropdown__panel-cta {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        text-decoration: none;
        font-size: var(--text-7);
        font-weight: var(--font-medium);
        color: var(--primary-foreground);
        transition: gap var(--transition-fast);
    }
    .nav-dropdown__panel-cta:hover {
        gap: var(--space-3);
        color: var(--primary-foreground);
    }

    /* ── Mobile ── */
    @media (max-width: 768px) {
        .nav-hamburger {
            display: flex;
        }

        nav#nav-overlay {
            position: fixed;
            inset: 0;
            background: var(--nav);
            transform: translateX(100%);
            transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            z-index: 300;
            padding: var(--space-6);
        }
        nav#nav-overlay.is-open {
            transform: translateX(0);
        }

        .nav-overlay-close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin-left: auto;
            margin-bottom: var(--space-6);
            background: var(--secondary);
            border: none;
            border-radius: var(--radius-full);
            cursor: pointer;
            color: var(--foreground);
        }

        .nav-main {
            flex-direction: column;
            align-items: stretch;
            gap: 0;
        }
        .nav-main__item {
            border-bottom: 1px solid var(--border);
        }
        .nav-main__link {
            justify-content: space-between;
            padding: var(--space-4) var(--space-2);
            border-radius: 0;
            font-size: var(--text-5);
            width: 100%;
        }
        .nav-main__link:hover,
        .nav-main__item.is-open > .nav-main__link {
            background: transparent;
        }

        /* Mobile dropdown: accordion style */
        .nav-dropdown {
            position: static;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: none;
            max-height: 0;
            overflow: hidden;
            transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .nav-main__item.is-open > .nav-dropdown {
            max-height: 1400px;
        }
        .nav-dropdown__inner {
            flex-direction: column;
            border-radius: 0;
            border: none;
            background: transparent;
            backdrop-filter: none;
            box-shadow: none;
            min-height: auto;
        }
        .nav-dropdown__list {
            width: 100%;
            border-right: none;
            padding: 0;
        }
        .nav-dropdown__link {
            padding: var(--space-3) var(--space-2);
            font-size: var(--text-6);
            border-radius: 0;
            border-bottom: 1px solid rgb(from var(--border) r g b / 0.5);
        }
        .nav-dropdown__link:hover,
        .nav-dropdown__item.is-active > .nav-dropdown__link {
            background: transparent;
        }
        .nav-arrow-right {
            opacity: 1;
        }
        .nav-dropdown__item.is-active .nav-arrow-right {
            transform: rotate(90deg);
        }

        /* Mobile: level 3 sublists */
        .nav-dropdown__sublists {
            width: 100%;
            border-right: none;
        }
        .nav-dropdown__sublist {
            position: static;
            opacity: 0;
            pointer-events: none;
            max-height: 0;
            overflow: hidden;
            padding: 0;
            transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms;
        }
        .nav-dropdown__sublist.is-active {
            opacity: 1;
            pointer-events: auto;
            max-height: 600px;
        }
        .nav-dropdown__sublink {
            padding: var(--space-3) var(--space-2);
            font-size: var(--text-6);
            border-radius: 0;
            border-bottom: 1px solid rgb(from var(--border) r g b / 0.5);
        }
        .nav-dropdown__sublink:hover,
        .nav-dropdown__subitem.is-active > .nav-dropdown__sublink {
            background: transparent;
        }
        .nav-dropdown__subitem.is-active .nav-arrow-right {
            transform: rotate(90deg);
        }

        /* Mobile panels: transparent background, normal text colors */
        .nav-dropdown__panels {
            position: static;
            background: transparent;
        }
        .nav-dropdown__panel-title a {
            color: var(--foreground);
        }
        .nav-dropdown__panel-desc {
            color: var(--muted-foreground);
        }
        .nav-dropdown__panel-links a {
            color: var(--foreground);
        }
        .nav-dropdown__panel-links a:hover {
            background: var(--secondary);
        }
        .nav-dropdown__panel-cta {
            color: var(--primary);
        }
        .nav-dropdown__panel-cta:hover {
            color: var(--primary);
        }
        .nav-dropdown__panel {
            position: static;
            opacity: 0;
            pointer-events: none;
            max-height: 0;
            overflow: hidden;
            padding: 0;
            transition: opacity 200ms, max-height 300ms ease, padding 200ms;
        }
        .nav-dropdown__panel.is-active {
            opacity: 1;
            pointer-events: auto;
            max-height: 600px;
            padding: var(--space-5) var(--space-2);
        }
        .nav-dropdown__panel-links {
            grid-template-columns: 1fr;
        }
    }

    /* BANNER */
    #banner {
        position: relative;
        max-height: 90vh;
        overflow: hidden;
    }

    #banner .container {
        max-width: var(--container-max);
    }

    #banner .banner__content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;

        display: flex;
        justify-content: center;
        align-items: flex-end;

        background: linear-gradient(to top, #001844 0%, #00184400);
        min-height: 33vh;

        color: var(--primary-foreground);
    }
    #banner .subheader::before {
        background-color: var(--primary-foreground);
    }

    #content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    footer {
        background: var(--primary);
        color: var(--primary-foreground);
        height: 200px;
    }

    #cookie-consent {
        position: fixed;
        z-index: 99;
        padding: 8px;
        left: 2rem;
        bottom: 2rem;
        width: 3rem;
        height: 3rem;

        cursor: pointer;

        background: var(--card);
        color: var(--card-foreground);
        border: none;
        border-radius: 3rem;
        box-shadow: var(--shadow-medium);

        transition: background var(--transition-fast);
    }
    #cookie-consent:hover {
        background: var(--primary);
        color: var(--primary-foreground);
    }
}

@layer grid {
    .container {
        width: 100%;
        margin-inline: auto;
        padding-inline: var(--container-pad);
    }
    .container .container {
        max-width: var(--container-max);
    }

    .row {
        display: grid;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
        gap: var(--grid-gap);
        width: 100%;
    }

    /* Column spans using CSS custom property */
    .col,
    [class*="col-"] {
        grid-column-end: span var(--span, var(--grid-cols));
    }

    .col-1 {
        --span: 1;
    }

    .col-2 {
        --span: 2;
    }

    .col-3 {
        --span: 3;
    }

    .col-4 {
        --span: 4;
    }

    .col-5 {
        --span: 5;
    }

    .col-6 {
        --span: 6;
    }

    .col-7 {
        --span: 7;
    }

    .col-8 {
        --span: 8;
    }

    .col-9 {
        --span: 9;
    }

    .col-10 {
        --span: 10;
    }

    .col-11 {
        --span: 11;
    }

    .col-12 {
        --span: 12;
    }

    /* Offsets via grid-column-start */
    .offset-1 {
        grid-column-start: 2;
    }

    .offset-2 {
        grid-column-start: 3;
    }

    .offset-3 {
        grid-column-start: 4;
    }

    .offset-4 {
        grid-column-start: 5;
    }

    .offset-5 {
        grid-column-start: 6;
    }

    .offset-6 {
        grid-column-start: 7;
    }

    .col-end {
        grid-column-start: span var(--span, 1);
        grid-column-end: -1;
    }

    /* Responsive: stack on mobile */
    @media (max-width: 768px) {
        .row {
            --grid-cols: 4;
            --grid-gap: 1rem;
        }

        .col,
        [class*="col-"] {
            --span: 4;
        }

        [class*="offset-"] {
            grid-column-start: auto;
        }
    }

}