:root {
    --nav-bg: #0098EF; /* header background */
    --nav-bg-elev: #1e293b; /* dropdown bg (desktop) */
    --nav-text: #f3f4f6; /* nav text */
    --nav-muted: #94a3b8; /* subtle text */
    --nav-accent: white; /* active underline */
    --nav-border: rgba(148,163,184,.18);
    --nav-ring: 0 0 0 3px rgba(59,130,246,.35);
    --nav-shadow-lg: 0 20px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4);
    --transition: box-shadow .5s ease, border-color .5s ease, background-color .5s ease;
}

/*dont ask how this works but it's needed for dropdowns alignmenty*/
* {
    box-sizing: border-box;
}

    body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
        color: var(--ink);
        background: radial-gradient(1200px 800px at 20% -10%, #1f2937 0%, var(--bg) 40%), var(--bg);
        line-height: 1.45;
    }



    /* ===== NAV BAR ===== */
    .site-nav {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 20px;
        height: 64px;
        padding: 0 16px;
        background: var(--nav-bg);
        color: var(--nav-text);
        border-bottom: 1px solid var(--nav-border);
    }

    .brand {
        font-weight: 700;
        color: var(--nav-text);
        text-decoration: none;
    }

  

    .menu {
        display: flex;
        align-items: center;
        gap: 6px;
        list-style: none;
        margin: 0 0 0 auto;
        padding: 0;
    }

        .menu > li {
            position: relative;
        }

        .toplink, .submenu-toggle, .menu a {
            display: inline-flex;
            align-items: center;
            height: 44px;
            padding: 0 14px;
            color: var(--nav-text);
            background: none;
            border: none;
            cursor: pointer;
            text-decoration: none;
            font-weight: 500;
            border-radius: 10px;
            transition: var(--transition);
            border: 1px solid transparent;
        }

            .toplink:hover, .submenu-toggle:hover, .menu a:hover {
                border-color: white;
                background: color-mix(in oklab, var(--nav-bg) 85%, white 15%);
            }

            .toplink.is-active::after, .menu a.is-active::after {
                content: "";
                position: absolute;
                left: 10px;
                right: 10px;
                bottom: 8px;
                height: 2px;
                background: var(--nav-accent);
                border-radius: 2px;
            }

    /* Dropdown menu */
    .submenu {
        position: absolute;
        top: 100%; /* flush below parent */
        left: 0;
        margin-top: 8px; /* small gap */
        z-index: 1000;
        min-width: 220px;
        list-style: none;
        margin: 0;
        padding: 8px;
        border-radius: 12px;
        background: var(--nav-bg-elev);
        border: 1px solid var(--nav-border);
        box-shadow: var(--nav-shadow-lg);
        display: none;
    }

        .submenu li a {
            display: block;
            padding: 10px 12px;
            border-radius: 10px;
            color: var(--nav-text);
            text-decoration: none;
            transition: var(--transition);
        }

            .submenu li a:hover {
                background: color-mix(in oklab, var(--nav-bg-elev) 80%, white 20%);
            }

        /* Hover bridge so submenu doesn’t flicker */
        .submenu::before {
            content: "";
            position: absolute;
            top: -8px;
            left: 0;
            right: 0;
            height: 8px;
        }

    .has-sub:hover > .submenu,
    .has-sub:focus-within > .submenu {
        display: block;
    }

    .has-sub > .submenu-toggle {
        display: none; /* hide mobile toggle */
    }

    .has-sub > .toplink {
        display: inline-flex; /* show link on desktop */
    }