/*
 * portal-header.css
 * Base limpia para cabecera + navegacion del portal.
 * Fuente: simplificacion de doc.css y navigation.css
 */

:root {
    --portal-header-bg: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --portal-header-text: var(--color-text-inverse);
    --portal-header-surface: var(--color-bg);
    --portal-header-link: var(--color-text);
    --portal-header-border: var(--color-border);
    --portal-header-overlay: rgba(0, 0, 0, 0.42);
    --portal-header-shadow: var(--shadow-lg);
    --portal-header-logo-bg: var(--color-bg);
    --portal-brand-logo-height: 3.3rem;
    --portal-brand-logo-max-width: 15rem;
    --portal-brand-logo-padding: 0.35rem 0.6rem;
    --portal-brand-logo-radius: 0.75rem;

    --portal-header-radius: var(--radius-lg);
    --portal-header-transition: var(--transition-fast);
    --portal-header-height: 3.75rem;
    --portal-header-offset: 3.75rem;
}

/* ========================================
   SITE HEADER
   ======================================== */

.site-header {
    display: flex;
    flex-direction: column;
    padding: 0 var(--spacing-md);
    min-height: var(--portal-header-height);
    background: var(--portal-header-surface);
    color: var(--portal-header-text);
    border-radius: 0; /* a sangre: sella con el carrusel héroe full-bleed de la portada */
    box-shadow: var(--portal-header-shadow);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.site-header__bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    min-height: var(--portal-header-height);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    height: var(--portal-header-height);
    padding: 0;
    margin-left: 0;
}

.site-header__brand picture {
    display: block;
    line-height: 0;
}

.site-header__brand .brand-logo__image {
    display: block;
    width: auto;
    height: var(--portal-brand-logo-height);
    max-width: min(var(--portal-brand-logo-max-width), calc(100vw - 2rem));
    background: var(--portal-header-logo-bg);
    border-radius: var(--portal-brand-logo-radius);
    box-sizing: border-box;
    flex-shrink: 0;
    padding: var(--portal-brand-logo-padding);
}

/* ========================================
   NAV LINK - MAP VARIANT
   ======================================== */

.nav__link--map {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    &::before {
        content: "";
        width: 0.48rem;
        height: 0.48rem;
        border-radius: 999px;
        flex: 0 0 auto;
    }
}

.nav__link.nav__link--map {
    font-weight: 700;
}

/* ========================================
   NAVBAR TOGGLE (HAMBURGER)
   ======================================== */

.navbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    align-self: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--portal-header-border);
    border-radius: 999px;
    background: var(--portal-header-surface);
    color: var(--portal-header-link);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 150;

    & .icon-close {
        display: none;
    }

    &[aria-expanded="true"] {
        & .icon-hamburger {
            display: none;
        }

        & .icon-close {
            display: inline;
        }
    }
}

/* ========================================
   NAV PANEL + OVERLAY
   ======================================== */

.nav-overlay {
    position: absolute;
    inset: 0;
    background: var(--portal-header-overlay);
    opacity: 0;
    transition: opacity var(--portal-header-transition);
}

.nav-panel {
    position: fixed;
    top: var(--portal-header-offset);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 140;
    display: none;
    pointer-events: none;

    &.is-open {
        display: block;
        pointer-events: auto;

        & .nav-overlay {
            opacity: 1;
        }

        & [data-navbar].navbar {
            transform: translateY(0);
            visibility: visible;
        }
    }
}

/* ========================================
   NAVBAR
   ======================================== */

[data-navbar].navbar {
    position: fixed;
    top: var(--portal-header-offset);
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(-100%);
    transition: transform var(--portal-header-transition);
    background: var(--portal-header-surface);
    overflow-y: auto;
    padding: var(--spacing-lg) 1.15rem 1.5rem;
    visibility: hidden;

    & .nav {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
}

/* ========================================
   NAV ITEMS
   ======================================== */

.nav__item {
    position: relative;

    &.has-children .nav__trigger > .nav__link {
        border-bottom: 0;
        display: inline-flex;
        align-items: center;
        padding-right: 0.6rem;
        position: relative;
        z-index: 2;
    }

    &.open > .nav__submenu {
        max-height: 80vh;
        opacity: 1;
        transform: translateY(0);
    }

    &.open .nav__trigger > .nav__toggle .nav__toggle-icon {
        transform: rotate(180deg);
    }
}

.nav__trigger {
    position: relative;
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--portal-header-border);
}

.nav__link {
    display: block;
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--portal-header-border);
    color: var(--portal-header-link);
    text-decoration: none;
    font-weight: 600;
    transition: background-color var(--portal-header-transition), color var(--portal-header-transition);

    &:hover {
        text-decoration: underline;
    }
}

/* ========================================
   NAV TOGGLE ICON
   ======================================== */

.nav__toggle {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--portal-header-link);
    padding: 0 0.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 1;
}

.nav__toggle-icon {
    width: 1rem;
    height: 1rem;
    display: block;
    background-color: currentColor;
    -webkit-mask: url('../../../images/icons/arrow-updown.svg') center / contain no-repeat;
    mask: url('../../../images/icons/arrow-updown.svg') center / contain no-repeat;
    transition: transform var(--portal-header-transition);
}

/* ========================================
   NAV SUBMENU
   ======================================== */

.nav__submenu {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.85rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-0.25rem);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    & .nav__link {
        font-weight: 500;
        padding: 0.8rem 0.25rem;
        border-bottom: 1px solid var(--portal-header-border);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

/* En mobile el ultimo item si mantiene el borde para separar del siguiente nav__item */

body.no-scroll {
    overflow: hidden;
}

/* Impedir que aparezcan submenús dentro de submenús (nivel 3+) */
.nav__submenu .nav__submenu {
    display: none !important;
}

/* ========================================
   DESKTOP (min-width: 64rem)
   ======================================== */

@media (min-width: 75rem) {
    .site-header {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-lg);
        min-height: var(--portal-header-height);
        padding-inline: clamp(1.5rem, 4vw, 4rem);
    }

    .site-header__bar {
        width: auto;
        flex-shrink: 0;
        min-height: var(--portal-header-height);
    }

    .site-header__brand {
        /* Sin margen extra: el espacio izquierdo del logo lo da solo el
           padding-inline del header, simétrico con el lado de "Contacto". */
        margin-left: 0;
    }

    .navbar-toggle {
        display: none;
    }

    .nav-panel {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        align-items: center;
        position: static;
        inset: auto;
        pointer-events: auto;
        z-index: auto;
    }

    .nav-overlay {
        display: none;
    }

    [data-navbar].navbar {
        position: static;
        inset: auto;
        transform: none;
        overflow: visible;
        background: transparent;
        padding: 0;
        visibility: visible;

        & .nav {
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 1.75rem;
        }
    }

    .nav__link {
        padding-inline: 0.4rem;
        border-bottom: none;
        white-space: nowrap;
    }

    .nav__trigger {
        border-bottom: 0;
    }

    .nav__toggle {
        top: 50%;
        right: 0;
        left: auto;
        bottom: auto;
        width: auto;
        transform: translateY(-50%);
        padding: 0.3rem 0.15rem;
    }

    .nav__item {
        &.has-children .nav__trigger > .nav__link {
            display: block;
            padding-right: 1.6rem;
        }

        &.has-children:hover .nav__trigger > .nav__toggle .nav__toggle-icon {
            transform: rotate(180deg);
        }

        &.open > .nav__submenu,
        &.has-children:hover > .nav__submenu,
        &.has-children:focus-within > .nav__submenu {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            pointer-events: auto;
            transition-delay: 0s;
        }

    }

    .nav__item--map-primary {
        display: flex;
        align-items: center;
    }

    .nav__item--map {
        margin-left: 0;
    }

    /* Separador vertical entre "Mapa Comercial" y el resto del menú */
    .nav > .nav__item:first-child {
        display: flex;
        align-items: center;

        &::after {
            content: "";
            width: 2px;
            height: 1.6rem;
            /* Mismo valor que el gap del .nav para que la separación sea
               simétrica a ambos lados del separador. */
            margin-inline-start: 1.75rem;
            background: var(--color-black);
            flex-shrink: 0;
        }
    }

    /* Submenús de los últimos ítems se abren hacia la izquierda para no salir del viewport */
    .nav > .nav__item:nth-last-child(-n+3) > .nav__submenu {
        left: auto;
        right: 0;
    }

    .nav__submenu {
        position: absolute;
        top: calc(100% + 0.05rem);
        left: 0;
        width: max-content;
        min-width: 10rem;
        max-width: 22rem;
        padding: 0.5rem 0.85rem;
        background: var(--portal-header-surface);
        border: 1px solid var(--portal-header-border);
        border-radius: 0.5rem;
        box-shadow: var(--shadow-md);
        max-height: none;
        opacity: 0;
        overflow: visible;
        transform: translateY(0.35rem);
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.3s;

        & .nav__link {
            /* .nav__link hereda white-space:nowrap de la barra superior (línea ~382), pensado
               para que "Ayudas y Subvenciones" no rompa ahí -- dentro del submenú, con
               max-width:22rem arriba, un título largo como "Plan de Empresa (Anexo II Subv.
               Iniciativas empresariales)" se salía del cuadro en vez de pasar a una 2ª línea. */
            white-space: normal;
            border-bottom: 1px solid var(--portal-header-border);

            &:last-of-type {
                border-bottom: none;
            }
        }
    }

}