/* Header transparente superpuesto – estilos del componente */

:root {
    /* Color base del fondo del header. Cambiar según contraste del sitio */
    --overlay-header-bg-base: var(--wp--preset--color--white);
    /* Opacidad dinámica (0 → 1), controlada por JS */
    --overlay-header-opacity: 0;
}

.overlay-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    background-color: color-mix(in srgb, var(--overlay-header-bg-base) calc(var(--overlay-header-opacity, 0) * 100%), transparent);
    backdrop-filter: saturate(140%) blur(3px);
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.overlay-header.is-transparent {
    box-shadow: none;
}

.overlay-header.is-solid {
    box-shadow: 0 2px 16px color-mix(in srgb, var(--wp--preset--color--neutral-900) 10%, transparent);
}

.overlay-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    min-height: 64px;
    padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.5rem);
}

.overlay-header .wp-block-navigation__responsive-container-open,
.overlay-header .wp-block-navigation__responsive-container-close {
    min-height: 44px;
    min-width: 44px;
}

/* Asegurar que el contenido inferior no queda oculto si el primer bloque tiene padding 0 */
.overlay-header-spacer {
    height: 64px; /* debe coincidir con la altura mínima del header */
}

@media (max-width: 768px) {
    .overlay-header__inner {
        min-height: 56px;
        padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
    }
    .overlay-header-spacer { height: 56px; }
}