/* navbar.css — the site's one navbar component (logo, section/tool links,
   Ferramentas dropdown, Agendar Sessão CTA), shared by every page. Extracted
   from landing.css so pages that don't need the rest of that stylesheet
   (Glossário, Termos, Privacidade, Oráculo, Espaço Zen) can pull in just this.

   Every page uses the same markup and the same link set — a visitor who
   lands straight on a tool page (search, a shared link) should see the same
   path to the rest of the site as anyone landing on the home page. Only the
   href targets differ: the landing page uses in-page section anchors, every
   other page points those same anchors back at index.html. */

.navbar {
    padding: 1.25rem 2rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 300; /* Above the floating widgets (whatsapp-float, music-control: z-index 200) so
                     the mobile slide-out menu covers them instead of floating under them. */
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.nav-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    z-index: 101; /* Keep logo above mobile menu */
}

.logo-icon {
    height: 1.4rem;
    width: auto;
    display: block;
}

/* Mobile Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 0.5rem;
    z-index: 101;
}

.mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.mobile-menu-toggle .line-top,
.mobile-menu-toggle .line-middle,
.mobile-menu-toggle .line-bottom {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.mobile-menu-toggle[aria-expanded="true"] .line-top {
    transform: translateY(6px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .line-middle {
    opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .line-bottom {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav-links li {
    margin: 0;
    padding: 0;
}

.nav-links a:not(.btn) {
    color: var(--color-text-muted);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.nav-links a:not(.btn):hover { color: var(--color-text); }
.nav-btn { padding: 0.6rem 1.4rem; }

/* Link da página atual, dentro do dropdown Ferramentas. */
.nav-links a.is-current { color: var(--color-text); }

/* Nav Dropdown */
.nav-dropdown {
    display: inline-block;
    position: relative;
}

.nav-dropdown-btn {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-dropdown-btn:hover {
    color: var(--color-text);
}

.chevron-icon {
    transition: transform 0.3s ease;
}

/* Hover no Desktop ou Active no Mobile giram o chevron */
.nav-dropdown:hover .chevron-icon,
.nav-dropdown.is-active .chevron-icon {
    transform: rotate(180deg);
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-surface);
    min-width: 180px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    z-index: 10;
    padding: 0.5rem 0;
    margin-top: 1rem;
    list-style: none;
}

/* Mostrar dropdown no hover (Desktop) ou se estiver com .is-active (Mobile) */
.nav-dropdown:hover .nav-dropdown-content,
.nav-dropdown.is-active .nav-dropdown-content {
    display: block;
}

.nav-dropdown-content::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 0;
    width: 100%;
    height: 1rem;
}

.nav-dropdown-content li {
    margin: 0;
    padding: 0;
}

.nav-dropdown-content a {
    color: var(--color-text-muted) !important;
    padding: 0.75rem 1.25rem !important;
    text-decoration: none !important;
    display: block !important;
    margin: 0 !important;
    white-space: nowrap;
    text-align: left;
}

.nav-dropdown-content a:hover {
    color: var(--color-text) !important;
    background: rgba(255, 255, 255, 0.05);
}

@media (max-width: 1150px) {
    .nav-links { gap: 1.25rem; }
}

@media (max-width: 1024px) {
    .nav-links { gap: 0.85rem; }
}

/* Mobile Menu */
@media (max-width: 980px) {
    .mobile-menu-toggle {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 320px;
        height: 100vh;
        background: var(--color-surface);
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem 2rem 2rem;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        border-left: 1px solid var(--color-border);
        overflow-y: auto;
        gap: 1.5rem;
    }

    .nav-links.is-open {
        right: 0;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a:not(.btn), .nav-dropdown {
        margin-left: 0;
        font-size: 1.1rem;
        display: block;
        width: 100%;
    }

    .nav-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
        margin-top: 1rem;
    }

    .nav-dropdown-btn {
        font-size: 1.1rem;
        width: 100%;
        justify-content: space-between;
        /* Sem isto a altura útil do alvo de toque ficava em ~21px, abaixo
           dos 24px do WCAG 2.5.8 — os demais itens do menu já respiram
           via padding do <a>, este só igualava o botão a eles. */
        padding-block: 0.4rem;
    }

    .nav-dropdown-content {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        background: rgba(255, 255, 255, 0.03);
        margin-top: 0.5rem;
        padding: 0.5rem 0;
    }

    .nav-dropdown-content::before {
        display: none;
    }
}