/* Header Styles - Mobile First & Fluid */
.top-nav {
    /* Truque: Variável local para manter o dropdown sempre colado no header */
    --header-height: clamp(64px, 8vw, 80px);

    height: var(--header-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--surface-container-highest);

    /* Make it sticky */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    /* AUMENTADO: Garante que os submenus fiquem acima de tudo no site */

    /* Glass effect */
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.logo {
    /* Escala fluida: 20px no mobile até 24px no desktop */
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.05em;
    text-decoration: none;
}

/* Mobile buttons */
.desktop-only {
    display: none;
}

.mobile-only {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
}

/* Hidden menu content on mobile */
.nav-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* Usa a mesma variável da altura do header para alinhar perfeitamente */
    top: var(--header-height);
    left: 0;
    width: 100%;
    background-color: var(--surface-container-low);
    /* Fluid padding */
    padding: clamp(1.5rem, 5vw, 2rem);
    border-bottom: 1px solid var(--surface-container-highest);
    gap: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Animation magic */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: -1;
}

/* Class added by JS to show menu */
.nav-content.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 40;
}

/* --- Base Menu & WP Resets --- */
.nav-links {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
    /* Necessário para os submenus flutuarem a partir daqui */
}

.nav-links a {
    font-weight: 600;
    color: var(--secondary);
    font-size: 1.125rem;
    text-decoration: none;
    display: flex;
}

/* --- Mobile Submenu Styles --- */
.nav-links .sub-menu {
    display: none;
    /* Escondido por padrão no celular */
    list-style: none;
    padding-left: 1.5rem;
    /* Recuo para mostrar hierarquia no mobile */
    padding-top: 1rem;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

/* Classe JS para abrir o submenu no celular */
.nav-links li.open>.sub-menu {
    display: flex;
}

.mobile-extras {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border-top: 1px solid var(--surface-container-highest);
    padding-top: 1.5rem;
}

.header-socials {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.header-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 5vw, 42px);
    height: clamp(36px, 5vw, 42px);
    background-color: var(--surface-container-highest);
    border-radius: 50%;
    color: var(--primary);
    transition: background-color 0.2s;
}

.header-socials a:hover {
    background-color: var(--primary-container);
    color: var(--on-primary);
}

.header-actions .btn-primary {
    display: none;
}

/* Contêiner que segura a Imagem e o Texto */
.brand-wrapper {
    display: flex;
    align-items: center;
    /* Espaço entre a logo e o nome */
    text-decoration: none;
    /* Remove underline do link */
}

/* Imagem da Logo */
.brand-icon {
    height: clamp(32px, 5vw, 40px);
    /* Altura fluida: 32px no celular, 40px no desktop */
    width: auto;
    /* Mantém a proporção da imagem */
    object-fit: contain;
}

/* O Texto (Mantenha os estilos que você já tinha, apenas reforcei a cor) */
.brand-wrapper .logo {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.05em;
    margin: 0;
}

a.brand-wrapper:hover::after {
    width: 0px;
}

a.brand-wrapper {
    transition: transform 0.3s ease;
}

a.brand-wrapper:hover {
    transform: scale(1.1);
}

/* ==========================================================================
   Desktop Styles (> 768px)
========================================================================== */
@media (min-width: 768px) {
    .desktop-only {
        display: inline-flex;
    }

    .mobile-only {
        display: none;
    }

    .nav-content {
        display: flex;
        position: static;
        flex-direction: row;
        background: none;
        padding: 0;
        border: none;
        width: auto;
        box-shadow: none;

        /* Reset animation for desktop */
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .nav-links {
        flex-direction: row;
        align-items: center;
    }

    .nav-links a {
        font-size: clamp(0.9rem, 1.5vw, 1rem);
        transition: color 0.2s;
    }

    .nav-links a:hover {
        color: var(--primary);
    }

    /* WP Active States & Your Custom Active Class */
    .nav-links a.active,
    .nav-links li.current-menu-item>a,
    .nav-links li.current-page-ancestor>a {
        color: var(--primary);
        border-bottom: 2px solid var(--primary);
        padding-bottom: 4px;
    }

    /* --- Nível 1: Dropdown (Desktop) --- */
    .nav-links .sub-menu {
        display: block;
        /* Override do 'none' do mobile */
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #ffffff;
        min-width: 220px;
        padding: 0.75rem 0;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--surface-container-highest);

        /* Animação suave de entrada */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }

    /* Mostrar no Hover */
    .nav-links li:hover>.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Estilização dos links de dentro do submenu */
    .nav-links .sub-menu li a {
        padding: 0.6rem 1.5rem;
        display: block;
        border: none;
        /* Remove a borda azul de link ativo */
        width: 100%;
    }

    .nav-links .sub-menu li a:hover {
        background-color: var(--surface-container-low);
        color: var(--primary);
    }

    .nav-links .sub-menu li.current-menu-item>a {
        border: none;
        /* Garante que itens ativos no submenu não tenham a borda embaixo */
        background-color: var(--surface-container-low);
    }

    /* --- Nível 2: Flyout (Abre pro lado) --- */
    .nav-links .sub-menu .sub-menu {
        top: 0;
        left: 100%;
        /* Pula pra direita do menu pai */
        margin-left: 2px;
        transform: translateX(10px);
        /* Anima da direita pra esquerda */
    }

    .nav-links .sub-menu li:hover>.sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-links .sub-menu .menu-item-has-children>a::after {
        content: ' \25B8';
        /* Joga a seta pro canto direito do menu */
        margin-top: 2px;
    }

    .mobile-extras {
        display: none;
    }

    .header-actions .btn-primary {
        display: block;
    }
}