:root {
--shadow-primary: hsla(0, 0%, 0%, 0.15);
--shadow-xs: 0 1px 2px var(--shadow-primary);
--shadow-s: 0 1.5px 3px var(--shadow-primary);
--shadow-m: 0 2px 6px var(--shadow-primary);
--shadow-l: 0 3px 12px var(--shadow-primary);
--shadow-xl: 0 6px 48px var(--shadow-primary);
}

/* Nav menu style */
.header-wrapper__nav {
    flex-grow: 1;
    
    > :not(.bricks-mobile-menu-wrapper) > ul {
        align-items: center;
    }
    
    > nav:not(.bricks-mobile-menu-wrapper) {
        > ul {
            > li {
                &:first-child,
                &:nth-last-of-type(3) {
                    margin-left: auto;
                }
                
                /* Desktop links */
                > a:not(.header-cta) {
                    font-weight: 600;
                    position: relative;
                    display: inline-block;
                }
                
                &:not(.current-menu-item):not(:last-child) {
                    color: var(--base);
                }
                
                &.current-menu-item:not(:last-child) > a,
                > a:not(:last-child):hover {
                    color: var(--accent);
                }
                
                /* Animated underline */
                &:not(:last-child):not(.user-logged-in):not(.user-logged-out) {
                    > a:not(.header-cta) {
                        &::after {
                            content: "";
                            position: absolute;
                            width: 0;
                            height: 2px;
                            bottom: 0;
                            left: 0;
                            background-color: var(--accent);
                            transition: width 0.3s ease;
                        }
                        
                        &:hover::after {
                            width: 100%;
                        }
                    }
                }
                
                /* CTA Button - last child */
                &:last-child {
                    &:hover {
                        background: var(--accent-dark);
                        transform: scale(1.05);
                        
                        a {
                            color: var(--base);
                        }
                    }
                }
                
                /* Submenu */
                &.menu-item-has-children {
                    position: relative;
                    
                    > ul.sub-menu {
                        position: absolute;
                        top: 100%;
                        left: 0;
                        background: var(--primary);
                        color: var(--base);
                        border-radius: var(--radius-m);
                        box-shadow: 0 0 1em hsl(0 0% 0% / 0.1);
                        min-width: 200px;
                        z-index: 10;
                        max-height: 0;
                        overflow: hidden;
                        transition: max-height 0.6s ease;
                        margin-top: 0.5rem;
                        
                        > li {
                            padding-block: 0.5rem;
                            padding-inline: 0.8rem;
                            
                            > a {
                                color: var(--base);
                                font-weight: 600;
                                transition: color 0.3s ease;
                                
                                &:hover {
                                    background-color: var(--accent);
                                    color: var(--base);
                                    border-radius: var(--radius-m);
                                }
                            }
                            
                            &.current-menu-item > a {
                                font-weight: 600;
                                color: var(--accent);
                            }
                        }
                    }
                    
                    &:hover > ul.sub-menu {
                        max-height: 500px;
                    }
                }
            }
        }
        
        /* CTA Login */
        .user-logged-out,
        .user-logged-in {
            border: 2px solid var(--accent);
            padding-block: 1.2em;
            padding-inline: 1.00em;
            line-height: 1;
            border-radius: var(--radius-m);
            margin-inline-start: 1em;
            transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
            z-index: 1;
            
            &:hover {
                transform: scale(1.05);
                
                a {
                    color: var(--base);
                }
            }
        }
        
        /* CTA Button */
        .header-cta {
            background: var(--accent);
            padding-block: var(--space-s);
            padding-inline: var(--space-xs);
            line-height: 1;
            border-radius: var(--radius-m);
            color: var(--base);
            margin-inline-start: 1em;
            transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
            font-weight: 600;
            position: relative;
            z-index: 1;
            
            &:focus {
                outline: 2px solid var(--accent);
                outline-offset: 2px;
            }
        }
    }
    
    /* Mobile Menu */
    > nav.bricks-mobile-menu-wrapper {
        > ul {
            align-items: center;
            display: flex;
            flex-direction: column;
            
            > li.current-menu-item > a:not(.header-cta) {
                color: var(--accent);
            }
        }
        
        .user-logged-out,
        .user-logged-in {
            border: 2px solid var(--accent);
            padding-block: 1.2em;
            padding-inline: 1.00em;
            line-height: 1;
            border-radius: var(--radius-m);
            font-weight: 600;
            display: inline-block;
        }
        
        .header-cta {
            background: var(--accent);
            padding-block: var(--space-s);
            padding-inline: var(--space-xs);
            line-height: 1;
            border-radius: var(--radius-m);
            color: var(--white);
            margin: 1em auto;
            font-weight: 600;
            display: inline-block;
        }
    }
}

/* Hamburger menu positioning */
.bricks-mobile-menu-toggle {
    margin-left: auto;
}

/* Submenu toggle */
.brx-submenu-toggle {
    font-weight: 600;
}

/* Utility Classes */
.link {
    color: var(--accent);
    font-size: var(--text-m);
    font-weight: 600;
    letter-spacing: 0.05rem;
    box-shadow: 0 2px 0 var(--accent-trans-20);
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}
.link:hover {
    box-shadow: 0 2px 0 var(--accent-trans-40);
}
.link:focus {
    background: var(--accent-trans-10);
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    padding: var(--space-xs) var(--space-xs);
    background: var(--accent);
    color: var(--base);
    font-size: var(--text-m);
    font-weight: 600;
    border-radius: var(--radius-m);
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-m);
    transition: all 0.25s ease-in-out;
    outline: 0;
    cursor: pointer;
}
.btn:hover {
    background: var(--accent-dark);
    border: 1px solid var(--accent-dark);
    /* transform: translateY(-0.1rem); */
    transform: scale(1.05);
}