/**
 * Header institucional — SEAFORMEC
 */

/* ==========================================================
   Contenedor
   ========================================================== */

.sf-header {
    width: 100%;
	gap: 0 !important;
}

.sf-header > .sf-header__top,
.sf-header > .sf-header__main {
	margin-block: 0 !important;
}


/* ==========================================================
   Barra superior
   ========================================================== */

.sf-header__top {
        width: 100%;
        background: #242424;
        color: #fff;
}

.sf-header__top-inner {
        width: calc(100% - 48px);
        max-width: 1320px;
        margin-inline: auto !important;

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

        padding-block: 8px;
}

/* ==========================================================
   Contacto / idiomas
   ========================================================== */

.sf-header__email,
.sf-header__languages {
        margin: 0;
        font-size: 15px;
        line-height: 1.2;
}

.sf-header__email {
        font-weight: 600;
}

.sf-header__email a {
        color: inherit;
        text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {

        .sf-header__email a:hover {
                text-decoration: underline;
                text-underline-offset: 3px;
        }
}

.sf-header__languages {
        font-weight: 600;
        white-space: nowrap;
}


/* ==========================================================
   Barra principal
   ========================================================== */

.sf-header__main {
        width: 100%;
        background: #fff;

        border-bottom: 1px solid rgb(0 0 0 / 8%);
        box-shadow: 0 2px 5px rgb(0 0 0 / 6%);
	
        position: relative;
        z-index: 10;
}

.sf-header__main-inner {
        width: calc(100% - 48px);
        max-width: 1320px;
        margin-inline: auto !important;

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

        gap: 32px;

        padding-block: 16px;
}


/* ==========================================================
   Navegación
   ========================================================== */

.sf-header__nav {
        flex: 1 1 auto;
        min-width: 0;
}

/* ==========================================================
   Navegación — escritorio
   ========================================================== */
@media (min-width: 1101px) {

        .sf-header__nav .wp-block-navigation__container {
                width: 100%;

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

                gap: 32px;
        }
}


.sf-header__nav .wp-block-navigation-item__content {
        color: #000;
		font-weight: 600;
        text-decoration: none;
        transition: color 180ms ease;
}

/* ==========================================================
   Estado activo / hover / foco de navegación
   ========================================================== */

/* Página actual:
   WordPress puede marcarla con .current-menu-item o aria-current="page". */
.sf-header__nav .current-menu-item > .wp-block-navigation-item__content,
.sf-header__nav .wp-block-navigation-item__content[aria-current="page"] {
	color: #000;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--seaformec-yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* Hover en dispositivos que lo soportan */
@media (hover: hover) and (pointer: fine) {

	.sf-header__nav .wp-block-navigation-item__content:hover,
	.sf-header__nav .current-menu-item > .wp-block-navigation-item__content:hover,
	.sf-header__nav .wp-block-navigation-item__content[aria-current="page"]:hover {
		color: var(--wp--preset--color--seaformec-yellow);
	}
}

/* Foco visible para teclado.
   Se diferencia del estado activo para no parecer "página seleccionada". */
.sf-header__nav .wp-block-navigation-item__content:focus-visible {
	color: #000;
	outline: 2px dashed rgb(0 0 0 / 55%);
	outline-offset: 3px;
}

/* ==========================================================
   Botón
   ========================================================== */

.sf-header__main-inner .wp-block-site-logo,
.sf-header__main-inner .wp-block-buttons {
        flex: 0 0 auto;
}

/* ==========================================================
   Responsive
   ========================================================== */

/* CTA duplicado dentro de Navigation:
   oculto mientras exista el botón amarillo independiente. */
.sf-header__mobile-cta {
        display: none !important;
}

/* ==========================================================
   Botón hamburguesa
   ========================================================== */

.sf-header__nav .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;

	align-items: center;
	justify-content: center;

	padding: 0;
	position: relative;
}

.sf-header__nav .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.sf-header__nav .wp-block-navigation__responsive-container-open::before {
	content: "";

	width: 24px;
	height: 2px;

	background: currentColor;

	box-shadow:
		0 -7px 0 currentColor,
		0 7px 0 currentColor;
}

/* ==========================================================
   Botón cierre
   ========================================================== */
   
.sf-header__nav .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;

	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================
   Navegación responsive — tablet
   ========================================================== */
@media (max-width: 1100px) {

        .sf-header__main-inner {
                display: grid !important;
                grid-template-columns: 1fr auto 1fr;
                align-items: center;

                gap: 20px;
        }

        /* Logo a la izquierda */
        .sf-header__main-inner .wp-block-site-logo {
                justify-self: start;
        }

        .sf-header__main-inner .wp-block-site-logo img {
                width: 160px;
                height: auto;
        }

        /* Navigation / hamburguesa exactamente en el centro */
        .sf-header__nav {
                justify-self: center;
                flex: none;
        }

        /* Botón independiente a la derecha */
        .sf-header__desktop-cta {
                justify-self: end;
        }

        /* Oculta navegación horizontal */
        .sf-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
                display: none !important;
        }

        /* Muestra hamburguesa */
        .sf-header__nav .wp-block-navigation__responsive-container-open {
                display: flex !important;
        }
}

/* ==========================================================
   Menú responsive abierto
   ========================================================== */

@media (max-width: 1100px) {

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 32px !important;

		background: #fff;
	}

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		padding-top: 48px !important;
	}

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
		width: 100%;

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

		gap: 0;
	}

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
		width: 100%;
	}

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		width: 100%;
		color: #000;
		
		padding: 16px 0;

		font-size: 18px;
		font-weight: 600;
		line-height: 1.3;

		border-bottom: 1px solid rgb(0 0 0 / 10%);
	}

	/* Página actual dentro del menú responsive */
	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item > .wp-block-navigation-item__content,
	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content[aria-current="page"] {
		padding-left: 12px;
		background: rgb(240 171 0 / 10%);
		border-left: 4px solid #f0ab00;
		text-decoration: none;
		font-weight: 700;
	}
	
	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.sf-header__mobile-cta {
		display: flex !important;
		margin-top: 24px;
	}
	
	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.sf-header__mobile-cta .wp-block-navigation-item__content {
		width: auto;

		padding: 12px 20px;

		background: #f0ab00;
		color: #000;

		border: 0;
		border-radius: 4px;

		text-decoration: none;
	}
}
/* Hover en menú responsive */
@media (max-width: 1100px) and (hover: hover) and (pointer: fine) {

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		transition:
			color 180ms ease,
			padding-left 180ms ease;
	}

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--seaformec-yellow);
		padding-left: 8px;
	}

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item > .wp-block-navigation-item__content:hover,
	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content[aria-current="page"]:hover {
		padding-left: 12px;
	}
	
	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.sf-header__mobile-cta .wp-block-navigation-item__content:hover {
		padding-left: 20px;
		filter: brightness(0.95);
	}
}

/* Feedback táctil en menú responsive */
@media (max-width: 1100px) {

	.sf-header__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:active {
		color: var(--wp--preset--color--seaformec-yellow);
	}
}

/* ==========================================================
   Navegación responsive — móvil
   ========================================================== */

@media (max-width: 781px) {

        .sf-header__top-inner,
        .sf-header__main-inner {
                width: calc(100% - 32px);
        }

        .sf-header__main-inner {
                padding-block: 12px;
        }
}

@media (max-width: 600px) {

        .sf-header__main-inner {
                grid-template-columns: auto 1fr;
                gap: 16px;

                width: calc(100% - 32px);
                padding-block: 12px;
        }

        .sf-header__main-inner .wp-block-site-logo img {
                width: 135px;
                height: auto;
        }

        /* Desaparece el botón amarillo exterior */
        .sf-header__desktop-cta {
                display: none !important;
        }

        /* Hamburguesa al extremo derecho */
        .sf-header__nav {
                justify-self: end;
        }

}

/* ==========================================================
   Accesibilidad — reducción de movimiento
   ========================================================== */

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

	.sf-header__nav .wp-block-navigation-item__content {
		transition: none;
	}
}