/* =====================================================================
   NAVBAR · Editorial heritage masthead
   ===================================================================== */

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(10, 19, 42, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: var(--paper);
    height: 76px;
    padding: 0 clamp(20px, 4vw, 60px);
    z-index: 1000;
    border-bottom: 1px solid rgba(229, 208, 143, 0.18);
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease), height 0.4s var(--ease);
}

.header.scrolled {
    background: rgba(10, 19, 42, 0.94);
    border-bottom-color: rgba(229, 208, 143, 0.32);
    height: 64px;
}

.header.scrolled img.logo-nav {
    height: 36px;
}

.header a {
    color: var(--paper);
    text-decoration: none;
}

.brand-mark {
    display: flex;
    align-items: center;
}

.header img.logo-nav {
    height: 42px;
    transition: transform 0.4s var(--ease);
}

.brand-mark:hover img.logo-nav {
    transform: rotate(-3deg);
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav {
    display: flex;
    align-items: center;
}

.menu {
    list-style: none;
    display: flex;
    gap: 0.3rem;
    margin-right: clamp(0px, 4vw, 80px);
    align-items: center;
}

.menu li {
    position: relative;
}

.menu a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 0;
    position: relative;
    transition: color 0.4s var(--ease);
}

.menu a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 1px;
    background: var(--dourado);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}

.menu a:hover {
    color: var(--dourado-light);
    background: transparent;
}

.menu a:hover::after {
    transform: scaleX(1);
}

.item-selected {
    background: transparent !important;
}

.item-selected a {
    color: var(--dourado);
}

.item-selected a::after {
    transform: scaleX(1);
    background: var(--dourado);
}

.btn-menu {
    display: none;
}

@media (max-width: 768px) {
    .header {
        height: 66px;
        padding: 0 18px;
    }

    .header img.logo-nav {
        height: 34px;
    }

    .menu {
        display: block;
        position: absolute;
        top: 66px;
        left: 0;
        background: var(--azul-deep);
        text-align: left;
        width: 100%;
        height: 0;
        z-index: 1;
        visibility: hidden;
        overflow-y: hidden;
        transition: 0.5s var(--ease);
        margin-right: 0;
        border-top: 1px solid rgba(229, 208, 143, 0.2);
    }

    .menu a {
        padding: 1.2rem clamp(20px, 6vw, 40px);
        margin-inline: 0;
        border-bottom: 1px solid rgba(229, 208, 143, 0.08);
        border-radius: 0;
        font-size: 1.15rem;
        letter-spacing: 0.04em;
        font-family: var(--display);
        font-weight: 300;
        text-transform: none;
        justify-content: flex-start;
        font-variation-settings: "SOFT" 50, "opsz" 144;
    }

    .menu a::after {
        display: none;
    }

    .btn-menu {
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        position: relative;
    }

    .btn-menu img,
    .btn-menu span {
        display: none;
    }

    /* 3 traços: o grupo ocupa 18px (2+6+2+6+2), centralizado com margin auto */
    .btn-menu::before {
        content: "";
        display: block;
        width: 22px;
        height: 18px;
        background:
            linear-gradient(var(--dourado), var(--dourado)) 0 0/22px 2px,
            linear-gradient(var(--dourado), var(--dourado)) 0 8px/22px 2px,
            linear-gradient(var(--dourado), var(--dourado)) 0 16px/22px 2px;
        background-repeat: no-repeat;
    }

    .nav.active .menu {
        height: calc(100vh - 66px);
        visibility: visible;
        overflow-y: auto;
        padding-top: 20px;
    }

    .item-selected {
        background: transparent !important;
        border-bottom: 1px solid rgba(229, 208, 143, 0.18);
    }

    .item-selected a {
        color: var(--dourado);
    }
}