/* Theme layer - colors, backgrounds, shadows only */
@layer theme {
    nav {
        background: light-dark(oklch(100% 0.003 250 / 0.9), oklch(12% 0.015 260 / 0.85));
        backdrop-filter: blur(20px);
        border-block-end: none;
        box-shadow:
            0 1px 0 oklch(from var(--glass-tint) l c h / 0.04),
            0 4px 24px light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.3));

        /* Gradient accent line at bottom */
        &::after {
            background: linear-gradient(90deg,
                transparent 5%,
                light-dark(oklch(from var(--accent-primary) l c h / 0.4), oklch(from var(--accent-primary) l c h / 0.6)) 30%,
                light-dark(oklch(from var(--accent-warm) l c h / 0.4), oklch(from var(--accent-warm) l c h / 0.6)) 70%,
                transparent 95%);
        }

        .nav-links a {
            color: var(--text-secondary);

            &:hover {
                color: var(--text-primary);
            }

            &::after {
                background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
                box-shadow: 0 0 8px oklch(from var(--accent-primary) l c h / 0.4);
                transition-property: transform;
                transition-duration: 0.3s;
                transition-timing-function: ease-out;
            }
        }

        .nav-actions a,
        .nav-actions button {
            border-color: oklch(from var(--glass-tint) l c h / 0.08);
            background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
            color: var(--text-primary);

            &:hover {
                border-color: light-dark(oklch(from var(--accent-primary) l c h / 0.3), oklch(from var(--accent-primary) l c h / 0.4));
                background: light-dark(oklch(from var(--accent-primary) l c h / 0.06), oklch(from var(--accent-primary) l c h / 0.1));
                color: var(--accent-primary);
                box-shadow: 0 0 14px light-dark(oklch(from var(--accent-primary) l c h / 0.08), oklch(from var(--accent-primary) l c h / 0.15));
            }
        }

        .profile-button .profile-avatar {
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            color: white;
            box-shadow: 0 2px 10px light-dark(oklch(from var(--accent-primary) l c h / 0.2), oklch(from var(--accent-primary) l c h / 0.3));
        }

        #profile-menu {
            background: light-dark(oklch(100% 0 0 / 0.95), oklch(15% 0.02 270 / 0.95));
            border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.08));
            backdrop-filter: blur(20px);
            box-shadow: 0 12px 40px light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.5));

            .profile-menu-header {
                border-block-end-color: oklch(from var(--glass-tint) l c h / 0.06);
            }

            .profile-menu-name {
                color: light-dark(oklch(15% 0 0), oklch(95% 0 0));
            }

            .profile-menu-email {
                color: light-dark(oklch(45% 0 0), oklch(65% 0 0));
            }

            .profile-menu-item {
                color: light-dark(oklch(35% 0 0), oklch(75% 0 0));

                &:hover {
                    background: light-dark(oklch(from var(--accent-primary) l c h / 0.06), oklch(from var(--accent-primary) l c h / 0.1));
                    color: light-dark(oklch(15% 0 0), oklch(95% 0 0));
                }

                &:focus-visible {
                    outline-color: var(--accent-primary);
                }
            }

            .profile-menu-logout:hover {
                background: light-dark(oklch(from var(--accent-warm) l c h / 0.06), oklch(from var(--accent-warm) l c h / 0.1));
                color: light-dark(oklch(55% 0.2 25), var(--accent-warm));
            }
        }
    }

    nav {
        .hamburger {
            border-color: oklch(100% 0 0 / 0.08);
            color: var(--text-primary);

            &:hover {
                border-color: oklch(from var(--accent-primary) l c h / 0.4);
                background: oklch(from var(--accent-primary) l c h / 0.1);
            }

            span {
                background-color: var(--text-primary);
            }
        }

        #nav-menu {
            background: var(--surface-elevated);
            border-color: var(--border-color);
            box-shadow: var(--shadow-lg);

            .close-button {
                color: var(--text-primary);
            }

            a {
                color: var(--text-secondary);

                &:hover {
                    background: var(--surface-base);
                    color: var(--text-primary);
                }
            }
        }

        .mobile-profile-info {
            .mobile-profile-email {
                color: var(--text-secondary);
            }
        }
    }
}

/* Components layer - layout, sizing, spacing only */
@layer components {
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-sm) var(--space-xl);
        position: sticky;
        inset-block-start: 0;
        z-index: 100;

        /* Gradient accent line at bottom */
        &::after {
            content: '';
            position: absolute;
            inset-inline: 0;
            inset-block-end: 0;
            block-size: 1px;
        }

        .nav-links {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            gap: var(--space-2xl);

            a {
                position: relative;
                padding: var(--space-xs) var(--space-sm);
                border-radius: var(--wire-radius);
                font-size: var(--fs-small);
                letter-spacing: 0.02em;
                transition: all 0.2s ease-out;

                &::after {
                    content: '';
                    position: absolute;
                    inset-block-end: -2px;
                    inset-inline-start: 0;
                    inline-size: 100%;
                    block-size: 2px;
                    border-radius: 2px;
                    transform: scaleX(0);
                    transform-origin: left;
                }

                &:hover::after {
                    transform: scaleX(1);
                }
            }
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: var(--space-md);

            a, button {
                padding: var(--space-xs) var(--space-md);
                border: 1px solid;
                border-radius: 100px;
                font-weight: var(--fw-medium);
                font-size: var(--fs-small);
                transition: all 0.25s ease-out;
            }
        }

        .profile-button {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            cursor: pointer;
            anchor-name: --profile-btn;

            .profile-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
                inline-size: var(--space-2xl);
                block-size: var(--space-2xl);
                border-radius: 50%;
                font-size: var(--fs-small);
                font-weight: var(--fw-semibold);
            }

            .profile-name {
                max-inline-size: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: var(--fs-small);
            }

            .profile-chevron {
                transition: transform var(--time-fast) var(--ease-standard);
            }

            &:has(+ #profile-menu:popover-open) .profile-chevron {
                transform: rotate(180deg);
            }
        }

        #profile-menu {
            position-anchor: --profile-btn;
            position: fixed;
            inset: unset;
            inset-block-start: anchor(bottom);
            inset-inline-end: anchor(right);
            margin-block-start: var(--space-sm);
            padding: var(--space-md);
            border-radius: 12px;
            min-inline-size: 220px;

            /* Animation */
            opacity: 0;
            scale: 0.95;
            transform-origin: top right;
            transition:
                opacity var(--time-fast) var(--ease-out),
                scale var(--time-fast) var(--ease-out),
                display var(--time-fast) allow-discrete;

            &:popover-open {
                opacity: 1;
                scale: 1;

                @starting-style {
                    opacity: 0;
                    scale: 0.95;
                }
            }

            .profile-menu-header {
                display: flex;
                flex-direction: column;
                gap: var(--space-2xs);
                padding: var(--space-sm) var(--space-sm) var(--space-md);
                border-block-end: 1px solid;
            }

            .profile-menu-name {
                font-weight: var(--fw-semibold);
            }

            .profile-menu-email {
                font-size: var(--fs-small);
            }

            .profile-menu-item {
                display: block;
                padding: var(--space-sm) var(--space-md);
                margin-block-start: var(--space-xs);
                border-radius: 8px;
                text-decoration: none;
                transition: all 0.2s ease-out;

                &:focus-visible {
                    outline: 2px solid;
                    outline-offset: -2px;
                }
            }
        }

        .mobile-profile-info {
            display: flex;
            flex-direction: column;
            gap: var(--space-3xs);
            text-align: center;
            margin-block-end: var(--space-md);

            .mobile-profile-name {
                font-weight: var(--fw-semibold);
            }

            .mobile-profile-email {
                font-size: var(--fs-small);
            }
        }

        .logo img {
            block-size: 32px;
            inline-size: auto;
            object-fit: contain;
        }

        html[data-theme="light"] & .logo img {
            filter: invert(1);
        }

        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-xs);
            background: transparent;
            border: 1px solid;
            border-radius: 10px;
            cursor: pointer;
            anchor-name: --hamburger;
            inline-size: var(--space-3xl);
            block-size: var(--space-3xl);

            span {
                display: block;
                inline-size: var(--space-2xl);
                block-size: var(--space-2xs);
                transition: transform var(--time-fast) var(--ease-standard),
                            opacity var(--time-fast) var(--ease-standard);
                transform-origin: center;
            }
        }

        /* Animate hamburger to X when popover is open */
        &:has(#nav-menu:popover-open) .hamburger {
            span:nth-child(1) {
                transform: translateY(calc(var(--space-xs) + var(--space-2xs))) rotate(45deg);
            }
            span:nth-child(2) {
                opacity: 0;
            }
            span:nth-child(3) {
                transform: translateY(calc(-1 * (var(--space-xs) + var(--space-2xs)))) rotate(-45deg);
            }
        }

        #nav-menu {
            position-anchor: --hamburger;
            position: fixed;
            inset: unset;
            inset-block-start: 0;
            inset-inline-end: 0;
            margin: 0;
            padding: var(--wire-gap);
            border: var(--wire-border);
            border-radius: 0;
            block-size: 100cqb;
            inline-size: 70cqi;

            /* Slide animation */
            translate: 100% 0;
            opacity: 0;
            transition:
                translate var(--time-medium) var(--ease-out),
                opacity var(--time-medium) var(--ease-out),
                display var(--time-medium) allow-discrete;

            .close-button {
                position: absolute;
                inset-block-start: var(--space-2xl);
                inset-inline-end: var(--wire-gap);
                display: flex;
                justify-content: center;
                align-items: center;
                background: transparent;
                border: var(--wire-border);
                border-radius: var(--wire-radius);
                cursor: pointer;
                inline-size: var(--space-3xl);
                block-size: var(--space-3xl);
                font-size: var(--fs-large);
                line-height: 1;
            }

            .popover-nav-links {
                display: flex;
                flex-direction: column;
                gap: var(--wire-gap);
                align-items: center;
                padding-block-start: calc(var(--space-3xl) + var(--space-2xl));

                .theme-toggle-btn {
                    margin-block: var(--space-md);
                }

                a {
                    padding: var(--space-md) var(--space-lg);
                    border-radius: var(--wire-radius);
                }
            }

            &:popover-open {
                display: flex;
                flex-direction: column;
                translate: 0 0;
                opacity: 1;

                @starting-style {
                    translate: 100% 0;
                    opacity: 0;
                }
            }
        }

        /* Wide container: show nav links, hide hamburger */
        @container root (inline-size > 600px) {
            .nav-links,
            .nav-actions {
                display: flex;
            }

            .hamburger,
            #nav-menu {
                display: none;
            }
        }

        /* Narrow container: hide nav links, show hamburger */
        @container root (inline-size <= 600px) {
            .nav-links,
            .nav-actions {
                display: none;
            }

            .hamburger {
                display: flex;
            }
        }
    }
}