/* ==========================================================================
   PISCINASDEARENA.ES
   COMPONENTE: HEADER Y NAVEGACIÓN PRINCIPAL

   Dependencias:
   - tokens.css
   - base.css
   - buttons.css

   Estructura compatible:
   - .pa-header
   - .pa-header--overlay
   - .pa-header__container
   - .pa-header__brand
   - .pa-header__logo
   - .pa-header__toggle
   - .pa-navigation
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HEADER BASE
   -------------------------------------------------------------------------- */

.pa-header {
    position: relative;
    z-index: var(--pa-z-header, 1000);

    width: 100%;
    min-height: 88px;

    display: flex;
    align-items: center;

    color: var(--pa-color-heading);
    background: rgba(255, 255, 255, 0.94);

    border-bottom:
        1px solid
        rgba(215, 228, 226, 0.82);

    font-family: var(--pa-font-primary);

    transition:
        color var(--pa-transition-base),
        background-color var(--pa-transition-base),
        border-color var(--pa-transition-base),
        box-shadow var(--pa-transition-base),
        backdrop-filter var(--pa-transition-base);
}

@supports (backdrop-filter: blur(18px)) or
    (-webkit-backdrop-filter: blur(18px)) {

    .pa-header {
        background: rgba(255, 255, 255, 0.86);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
}


/* --------------------------------------------------------------------------
   2. HEADER STICKY
   -------------------------------------------------------------------------- */

.pa-header.is-sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;

    width: 100%;

    background: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(215, 228, 226, 0.95);

    box-shadow:
        0 8px 28px
        rgba(15, 23, 42, 0.09);
}

@supports (backdrop-filter: blur(20px)) or
    (-webkit-backdrop-filter: blur(20px)) {

    .pa-header.is-sticky {
        background: rgba(255, 255, 255, 0.88);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}


/* --------------------------------------------------------------------------
   3. HEADER SUPERPUESTO SOBRE EL HERO
   -------------------------------------------------------------------------- */

.pa-header--overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;

    width: 100%;

    color: var(--pa-color-white);
    background: color-mix(
    in srgb,
    var(--pa-color-primary) 12%,
    transparent
    );

    border-bottom-color: rgba(255, 255, 255, 0.16);
    box-shadow: none;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        backdrop-filter 0.35s ease;
}

@supports (backdrop-filter: blur(8px)) or
    (-webkit-backdrop-filter: blur(8px)) {

    .pa-header--overlay {
        background: color-mix(
            in srgb,
            var(--pa-color-primary) 12%,
            transparent
        );

        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

/*
 * Cuando JavaScript añade .is-sticky a un header overlay,
 * recupera el fondo claro para mantener legibilidad.
 */

/* Estado después de hacer scroll */

.pa-header--overlay.is-sticky {
    position: fixed;

    color: var(--pa-color-heading);
    background: rgba(255, 255, 255, 0.92);

    border-bottom-color: rgba(215, 228, 226, 0.92);

    box-shadow:
        0 8px 28px
        rgba(15, 23, 42, 0.09);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@supports (backdrop-filter: blur(20px)) or
    (-webkit-backdrop-filter: blur(20px)) {

    .pa-header--overlay.is-sticky {
        background: rgba(255, 255, 255, 0.88);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}


/* --------------------------------------------------------------------------
   4. CONTENEDOR
   -------------------------------------------------------------------------- */

.pa-header__container {
    position: relative;

    width: min(100% - 40px, 1440px);
    min-height: 88px;

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--pa-space-8, 2rem);
}


/* --------------------------------------------------------------------------
   5. MARCA Y LOGOTIPO
   -------------------------------------------------------------------------- */

.pa-header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;

    color: inherit;
    text-decoration: none;

    border-radius: var(--pa-radius-sm, 8px);

    transition:
        opacity var(--pa-transition-base),
        transform var(--pa-transition-base);
}

.pa-header__brand:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.pa-header__brand:focus-visible {
    outline:
        3px solid
        var(--pa-color-accent);

    outline-offset: 5px;
}

.pa-header__logo {
    width: auto;
    max-width: 210px;
    height: 58px;

    display: block;

    object-fit: contain;
}


/* --------------------------------------------------------------------------
   6. NAVEGACIÓN PRINCIPAL
   -------------------------------------------------------------------------- */

.pa-navigation {
    position: static;

    display: flex;
    align-items: center;

    gap: var(--pa-space-8, 2rem);

    transform: none;
}

.pa-navigation__list {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    gap: var(--pa-space-6, 1.5rem);

    list-style: none;
}

.pa-navigation__item {
    position: relative;
}

.pa-navigation__link {
    position: relative;

    min-height: 44px;

    display: inline-flex;
    align-items: center;

    padding-inline: 2px;

    color: var(--pa-color-text);

    font-family: var(--pa-font-primary);
    font-size: var(--pa-font-size-sm, 0.875rem);
    font-weight: var(--pa-font-weight-bold, 700);
    line-height: 1.2;
    text-decoration: none;

    transition:
        color var(--pa-transition-fast);
}

.pa-navigation__link::after {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;

    height: 2px;

    content: "";

    background: var(--pa-color-primary);
    border-radius: var(--pa-radius-pill, 999px);

    transform: scaleX(0);
    transform-origin: right;

    transition:
        transform var(--pa-transition-base);
}

.pa-navigation__link:hover {
    color: var(--pa-color-primary);
}

.pa-navigation__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* --------------------------------------------------------------------------
   7. ENLACE ACTIVO
   -------------------------------------------------------------------------- */

.pa-navigation__link.is-active,
.pa-navigation__link[aria-current="page"] {
    color: var(--pa-color-primary);
}

.pa-navigation__link.is-active::after,
.pa-navigation__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* --------------------------------------------------------------------------
   8. NAVEGACIÓN SOBRE EL HERO
   -------------------------------------------------------------------------- */

.pa-header--overlay:not(.is-sticky)
.pa-navigation__link {
    color: rgba(255, 255, 255, 0.94);
}

.pa-header--overlay:not(.is-sticky)
.pa-navigation__link::after {
    background: var(--pa-color-accent);
}

.pa-header--overlay:not(.is-sticky)
.pa-navigation__link:hover,
.pa-header--overlay:not(.is-sticky)
.pa-navigation__link.is-active,
.pa-header--overlay:not(.is-sticky)
.pa-navigation__link[aria-current="page"] {
    color: var(--pa-color-accent);
}


/* --------------------------------------------------------------------------
   9. CTA DEL HEADER
   -------------------------------------------------------------------------- */

.pa-header__cta {
    min-height: 48px;

    padding-inline: 22px;

    flex-shrink: 0;

    font-family: var(--pa-font-primary);
    font-size: var(--pa-font-size-sm, 0.875rem);
    font-weight: var(--pa-font-weight-bold, 700);
    white-space: nowrap;
}

/* CTA sobre el Hero */

.pa-header--overlay:not(.is-sticky)
.pa-header__cta {
    color: var(--pa-color-primary-dark);
    background: var(--pa-color-white);
    border-color: var(--pa-color-white);

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.14);
}

.pa-header--overlay:not(.is-sticky)
.pa-header__cta:hover {
    color: var(--pa-color-white);
    background: var(--pa-color-primary);
    border-color: var(--pa-color-primary);

    box-shadow:
        0 16px 36px
        rgba(0, 0, 0, 0.18);
}


/* --------------------------------------------------------------------------
   10. BOTÓN HAMBURGUESA
   -------------------------------------------------------------------------- */

.pa-header__toggle {
    position: relative;
    z-index: calc(var(--pa-z-header, 1000) + 2);

    width: 48px;
    height: 48px;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    flex-shrink: 0;

    gap: 5px;
    padding: 0;

    color: var(--pa-color-heading);
    background: var(--pa-color-white);

    border:
        1px solid
        var(--pa-color-border);

    border-radius: 50%;

    cursor: pointer;

    transition:
        color var(--pa-transition-base),
        background-color var(--pa-transition-base),
        border-color var(--pa-transition-base),
        box-shadow var(--pa-transition-base),
        transform var(--pa-transition-base);
}

.pa-header__toggle:hover {
    border-color: var(--pa-color-primary);

    box-shadow:
        0 8px 20px
        rgba(13, 111, 117, 0.14);

    transform: translateY(-1px);
}

.pa-header__toggle:focus-visible {
    outline:
        3px solid
        var(--pa-color-accent);

    outline-offset: 4px;
}

.pa-header__toggle-line {
    width: 20px;
    height: 2px;

    display: block;

    background: currentColor;
    border-radius: var(--pa-radius-pill, 999px);

    transform-origin: center;

    transition:
        transform var(--pa-transition-base),
        opacity var(--pa-transition-base),
        background-color var(--pa-transition-base);
}


/* Botón sobre el Hero */

.pa-header--overlay:not(.is-sticky)
.pa-header__toggle {
    color: var(--pa-color-white);
    background: rgba(255, 255, 255, 0.10);

    border-color: rgba(255, 255, 255, 0.40);
}

.pa-header--overlay:not(.is-sticky)
.pa-header__toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.72);
}


/* --------------------------------------------------------------------------
   11. ANIMACIÓN DEL BOTÓN HAMBURGUESA
   -------------------------------------------------------------------------- */

.pa-header__toggle[aria-expanded="true"]
.pa-header__toggle-line:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.pa-header__toggle[aria-expanded="true"]
.pa-header__toggle-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.pa-header__toggle[aria-expanded="true"]
.pa-header__toggle-line:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* --------------------------------------------------------------------------
   12. TABLET Y MENÚ MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {

    .pa-header__container {
        width: min(100% - 32px, 1440px);
        gap: var(--pa-space-5, 1.25rem);
    }

    .pa-navigation {
        gap: var(--pa-space-5, 1.25rem);
    }

    .pa-navigation__list {
        gap: var(--pa-space-4, 1rem);
    }

    .pa-header__cta {
        padding-inline: 18px;
    }
}


@media (max-width: 991px) {

    .pa-header,
    .pa-header__container {
        min-height: 78px;
    }

    .pa-header__container {
        width: min(100% - 24px, 1440px);
        gap: var(--pa-space-4, 1rem);
    }

    .pa-header__logo {
        max-width: 180px;
        height: 50px;
    }

    .pa-header__toggle {
        display: flex;
    }

    .pa-navigation {
        position: absolute;
        top: calc(100% + 12px);
        right: 18px;
        left: 18px;
        z-index: calc(var(--pa-z-header, 1000) + 1);

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: var(--pa-space-5, 1.25rem);

        padding: 22px;

        color: var(--pa-color-heading);
        background: rgba(255, 255, 255, 0.98);

        border:
            1px solid
            var(--pa-color-border);

        border-radius:
            var(--pa-radius-lg, 20px);

        box-shadow:
            var(
                --pa-shadow-md,
                0 18px 45px rgba(15, 23, 42, 0.14)
            );

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform:
            translateY(-10px)
            scale(0.98);

        transform-origin: top center;

        transition:
            opacity var(--pa-transition-base),
            visibility var(--pa-transition-base),
            transform var(--pa-transition-base);
    }

    @supports (backdrop-filter: blur(18px)) or
        (-webkit-backdrop-filter: blur(18px)) {

        .pa-navigation {
            background: rgba(255, 255, 255, 0.94);

            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
    }

    /*
     * Compatible con dos posibles clases JS:
     * .is-open y .open
     */

    .pa-navigation.is-open,
    .pa-navigation.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);
    }

    .pa-navigation__list {
        width: 100%;

        flex-direction: column;
        align-items: stretch;

        gap: var(--pa-space-1, 0.25rem);
    }

    .pa-navigation__item {
        width: 100%;
    }

    .pa-navigation__link,
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link {
        width: 100%;
        min-height: 48px;

        padding-inline: 14px;

        color: var(--pa-color-heading);

        border-radius:
            var(--pa-radius-sm, 8px);

        font-size:
            var(--pa-font-size-base, 1rem);
    }

    .pa-navigation__link::after {
        display: none;
    }

    .pa-navigation__link:hover,
    .pa-navigation__link.is-active,
    .pa-navigation__link[aria-current="page"],
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link:hover,
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link.is-active,
    .pa-header--overlay:not(.is-sticky)
    .pa-navigation__link[aria-current="page"] {
        color: var(--pa-color-primary);
        background: var(--pa-color-primary-light);
    }

    .pa-header__cta {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   13. MÓVIL
   -------------------------------------------------------------------------- */

@media (max-width: 576px) {

    .pa-header,
    .pa-header__container {
        min-height: 72px;
    }

    .pa-header__logo {
        max-width: 155px;
        height: 44px;
    }

    .pa-header__toggle {
        width: 44px;
        height: 44px;
    }

    .pa-navigation {
        top: calc(100% + 8px);
        right: 12px;
        left: 12px;

        padding: 18px;

        border-radius:
            var(--pa-radius-md, 14px);
    }

    .pa-navigation__link {
        min-height: 46px;
        font-size: 0.95rem;
    }

    .pa-header__cta {
        min-height: 48px;
        padding-inline: 18px;
    }
}


/* --------------------------------------------------------------------------
   14. PANTALLAS PEQUEÑAS
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {

    .pa-header__logo {
        max-width: 135px;
        height: 40px;
    }

    .pa-header__container {
        gap: var(--pa-space-3, 0.75rem);
    }

    .pa-header__toggle {
        width: 42px;
        height: 42px;
    }
}


/* --------------------------------------------------------------------------
   15. MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .pa-header,
    .pa-header__brand,
    .pa-navigation,
    .pa-navigation__link,
    .pa-navigation__link::after,
    .pa-header__cta,
    .pa-header__toggle,
    .pa-header__toggle-line {
        transition-duration: 0.01ms;
    }
}