/* Theme layer - colors, backgrounds, shadows only */
@layer theme {
    nav {
        background: var(--surface-sunken);
        border-block-end-color: var(--border-color);

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

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

            &::after {
                background: var(--accent-primary);
            }
        }

        .nav-actions a,
        .nav-actions button {
            border-color: var(--border-color);
            background: transparent;
            color: var(--text-primary);

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

        .profile-button .profile-avatar {
            background: var(--accent-primary);
            color: var(--bg-primary);
        }

        /* Dark mode (default) */
        #profile-menu {
            background: oklch(18% 0.01 270);
            border-color: oklch(30% 0.02 270);
            box-shadow: 0 8px 32px oklch(0% 0 0 / 0.5);

            .profile-menu-header {
                border-block-end-color: oklch(25% 0.02 270);
            }

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

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

            .profile-menu-item {
                color: oklch(75% 0 0);

                &:hover {
                    background: oklch(25% 0.02 270);
                    color: oklch(95% 0 0);
                }

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

            .profile-menu-logout:hover {
                color: oklch(70% 0.2 25);
            }
        }
    }

    /* Light mode profile menu */
    html[data-theme="light"] nav #profile-menu {
        background: oklch(98% 0 0);
        border-color: oklch(85% 0 0);
        box-shadow: 0 8px 32px oklch(0% 0 0 / 0.1);

        .profile-menu-header {
            border-block-end-color: oklch(90% 0 0);
        }

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

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

        .profile-menu-item {
            color: oklch(35% 0 0);

            &:hover {
                background: oklch(93% 0 0);
                color: oklch(15% 0 0);
            }
        }

        .profile-menu-logout:hover {
            color: oklch(55% 0.2 25);
        }
    }

    nav {
        .hamburger {
            border-color: var(--border-color);
            color: var(--text-primary);

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

            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(--wire-gap);
        border-block-end: var(--wire-border);

        .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);
                transition: all 0.15s ease-out;

                &::after {
                    content: '';
                    position: absolute;
                    inset-block-end: -2px;
                    inset-inline: 50%;
                    inline-size: 0;
                    block-size: 2px;
                    transition: all 0.15s ease-out;
                }

                &:hover::after {
                    inset-inline: 0;
                    inline-size: 100%;
                }
            }
        }

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

            a, button {
                padding: var(--space-xs) var(--space-md);
                border: var(--wire-border);
                border-radius: var(--wire-radius);
                font-weight: var(--fw-medium);
                transition: all 0.15s 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;
            }

            .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;
            top: anchor(bottom);
            right: anchor(right);
            margin-block-start: var(--space-sm);
            padding: var(--space-md);
            border: var(--wire-border);
            border-radius: var(--wire-radius);
            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: var(--wire-border);
            }

            .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: var(--wire-radius);
                text-decoration: none;
                transition: all var(--time-fast) var(--ease-standard);

                &: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 {
            object-fit: contain;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-xs);
            background: transparent;
            border: var(--wire-border);
            border-radius: var(--wire-radius);
            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;
            top: 0;
            right: 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 {
                    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;
            }
        }
    }
}