/*
 * nav-responsive-v1 + nav-instituciones-centrado-v1-marker
 * Progressive compression of the public topbar between desktop and hamburger (≤960px).
 * Wide desktop (≥1481px) only: center nav links between brand and tools.
 * Mid-width compression and mobile drawer are unchanged from nav-responsive-v1.
 * Does not restyle the mobile drawer sheet — those rules live in layouts/public.blade.php.
 */

/* Desktop: keep one row instead of wrapping into a messy multi-line nav */
@media (min-width: 961px) {
    .topbar {
        gap: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .topbar-nav {
        flex-wrap: nowrap;
        gap: 4px;
        justify-content: flex-start;
        overflow: visible;
    }

    .topbar-nav > a,
    .nav-dropdown__toggle {
        white-space: nowrap;
        padding: 7px 9px;
        font-size: .92rem;
    }

    .tools {
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
    }

    .topbar-cta-row {
        flex-wrap: nowrap;
        gap: 6px;
    }

    .topbar-cta-row .btn-ghost,
    .topbar-cta-row .btn-private-area {
        white-space: nowrap;
    }
}

/* Soft mid desktop: smaller type + tighter spacing */
@media (min-width: 961px) and (max-width: 1480px) {
    .topbar {
        gap: 10px;
        padding: 12px 14px;
    }

    .brand {
        gap: 8px;
    }

    .brand-text strong {
        font-size: .92rem;
    }

    .brand-text span {
        font-size: .74rem;
    }

    .topbar-nav {
        gap: 2px;
    }

    .topbar-nav > a,
    .nav-dropdown__toggle {
        padding: 6px 7px;
        font-size: .82rem;
        letter-spacing: -.01em;
    }

    .nav-dropdown__chevron {
        border-left-width: 3px;
        border-right-width: 3px;
        border-top-width: 4px;
    }

    .lang-switch {
        gap: 4px;
        padding: 3px;
    }

    .lang-switch a,
    .lang-switch__opt {
        padding: 6px 8px;
        font-size: .76rem;
    }

    .topbar-cta-row .btn-ghost,
    .topbar-cta-row .btn-private-area {
        padding: 7px 10px;
        font-size: .8rem;
    }
}

/* Compact: ES|GL + short CTAs (Hazte socio → Socio, etc.) */
@media (min-width: 961px) and (max-width: 1320px) {
    .brand-text span {
        display: none;
    }

    .topbar-nav > a,
    .nav-dropdown__toggle {
        padding: 5px 6px;
        font-size: .76rem;
    }

    .lang-switch a,
    .lang-switch__opt {
        width: 34px;
        min-width: 34px;
        height: 26px;
        padding: 0;
        font-size: .68rem;
        border-radius: 6px;
    }

    .lang-switch__code {
        display: inline;
    }

    .lang-switch__label {
        display: none;
    }

    .topbar-cta__full {
        display: none;
    }

    .topbar-cta__short {
        display: inline;
    }

    .topbar-cta-row .btn-ghost,
    .topbar-cta-row .btn-private-area {
        padding: 6px 9px;
        font-size: .74rem;
        line-height: 1.1;
    }

    .btn-private-area .topbar-cta__full {
        display: none;
    }

    .btn-private-area .topbar-cta__short {
        display: inline;
    }
}

/* Tight: flag-only lang pills + aggressive shrink before hamburger */
@media (min-width: 961px) and (max-width: 1120px) {
    .topbar {
        gap: 8px;
        padding: 10px 12px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
    }

    .topbar-nav > a,
    .nav-dropdown__toggle {
        padding: 4px 5px;
        font-size: .7rem;
    }

    .lang-switch {
        gap: 3px;
        padding: 2px;
        border-radius: 8px;
    }

    .lang-switch a,
    .lang-switch__opt {
        width: 28px;
        min-width: 28px;
        height: 20px;
        font-size: 0;
        line-height: 0;
        color: transparent;
        text-shadow: none;
        border-radius: 5px;
    }

    .lang-switch__code,
    .lang-switch__label {
        display: none;
    }

    .topbar-cta-row {
        gap: 4px;
    }

    .topbar-cta-row .btn-ghost,
    .topbar-cta-row .btn-private-area {
        padding: 5px 7px;
        font-size: .68rem;
    }
}

/* Wide desktop only: center links in the middle column (brand | nav | tools).
 * Mid-width (≤1480) keeps flex-start from nav-responsive-v1 above. */
@media (min-width: 1481px) {
    .topbar-nav {
        justify-content: center;
        width: 100%;
    }
}