/**
 * Footer institucional — SEAFORMEC
 *
 * Estructura:
 * .sf-footer
 * ├── .sf-footer__main
 * │   └── .sf-footer__inner.sf-footer__grid
 * │       ├── .sf-footer__logo
 * │       ├── .sf-footer__column.sf-footer__utilities
 * │       ├── .sf-footer__column.sf-footer__legal
 * │       └── .sf-footer__column.sf-footer__contact
 * └── .sf-footer__bottom
 *     └── .sf-footer__bottom-inner
 */


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

.sf-footer {
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 0 !important;
}


/* ==========================================================
   Zona principal
   ========================================================== */

.sf-footer__main {
	width: 100%;
	margin: 0;
	padding: 64px 48px;

	background: var(--wp--preset--color--dark-gray);
	color: #fff;
}


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

.sf-footer__inner {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
}


/* ==========================================================
   Grid principal — escritorio
   ========================================================== */

.sf-footer__grid {
	display: grid !important;

	grid-template-columns:
		minmax(180px, 0.8fr)
		minmax(220px, 1.15fr)
		minmax(190px, 0.9fr)
		minmax(260px, 1.15fr) !important;

	align-items: start;
	gap: 48px;
}


/* ==========================================================
   Logo
   ========================================================== */

.sf-footer__logo {
	align-self: center;
	justify-self: start;
}

.sf-footer__logo img {
	display: block;
	width: 180px;
	height: auto;
}


/* ==========================================================
   Columnas
   ========================================================== */

.sf-footer__column {
	min-width: 0;
}

.sf-footer__column h3 {
	margin: 0 0 28px;

	color: var(--wp--preset--color--seaformec-yellow);

	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;

	text-transform: uppercase;
}


/* ==========================================================
   Navegación del footer
   ========================================================== */

.sf-footer__nav {
	width: 100%;
}

.sf-footer__nav .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;

	gap: 20px;
}

.sf-footer__nav .wp-block-navigation-item {
	width: 100%;
}

.sf-footer__nav .wp-block-navigation-item__content {
	color: #fff;

	font-size: 18px;
	font-weight: 400;
	line-height: 1.45;

	text-decoration: none;

	transition:
		color 180ms ease,
		padding-left 180ms ease;
}


/* ==========================================================
   Navegación sin hamburguesa
   ========================================================== */

.sf-footer__nav .wp-block-navigation__responsive-container-open,
.sf-footer__nav .wp-block-navigation__responsive-container-close {
	display: none !important;
}

.sf-footer__nav .wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;

	width: 100%;
	height: auto;

	background: transparent !important;
}

.sf-footer__nav .wp-block-navigation__responsive-container-content {
	display: block !important;
	padding: 0 !important;
}


/* ==========================================================
   Estado activo / hover / foco
   ========================================================== */

/* El elemento activo permanece blanco.
   El amarillo se reserva para hover/foco. */
.sf-footer__nav .current-menu-item > .wp-block-navigation-item__content,
.sf-footer__nav .wp-block-navigation-item__content[aria-current="page"] {
	color: #fff;
}

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

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

.sf-footer__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--seaformec-yellow);

	outline: 2px solid var(--wp--preset--color--seaformec-yellow);
	outline-offset: 4px;
}


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

.sf-footer__contact p {
	margin: 0 0 20px;

	color: #fff;

	font-size: 18px;
	line-height: 1.55;
}

.sf-footer__contact p:last-child {
	margin-bottom: 0;
}

.sf-footer__contact a {
	color: #fff;
	text-decoration: none;

	transition: color 180ms ease;
}

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

	.sf-footer__contact a:hover {
		color: var(--wp--preset--color--seaformec-yellow);
	}
}

.sf-footer__contact a:focus-visible {
	color: var(--wp--preset--color--seaformec-yellow);

	outline: 2px solid var(--wp--preset--color--seaformec-yellow);
	outline-offset: 4px;
}


/* ==========================================================
   Barra inferior
   ========================================================== */

.sf-footer__bottom {
	width: 100%;
	margin: 0;

	background: var(--wp--preset--color--seaformec-yellow);
	color: #000;
}

.sf-footer__bottom-inner {
	width: 100%;
	max-width: 1320px;

	margin-inline: auto;
	padding: 12px 48px;

	text-align: center;
}

.sf-footer__bottom-inner p {
	margin: 0;

	font-size: 16px;
	line-height: 1.4;

	text-wrap: balance;
}


/* ==========================================================
   Tablet — 2 columnas
   ========================================================== */

@media (max-width: 900px) {

	.sf-footer__main {
		padding: 56px 40px;
	}

	/* Centra visualmente el grid y evita que la segunda
	   columna quede demasiado pegada al lateral derecho. */
	.sf-footer__inner {
		max-width: 760px;
	}

	.sf-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 48px;
		justify-content: center;
	}

	.sf-footer__logo img {
		width: 160px;
	}
}


/* ==========================================================
   Móvil — 1 columna
   ========================================================== */

@media (max-width: 600px) {

	.sf-footer__main {
		padding: 48px 0;
	}

	/* 24 px reales a izquierda y derecha,
	   independientemente del layout interno de Gutenberg. */
	.sf-footer__inner {
		width: calc(100% - 48px);
		max-width: none;
		margin-inline: auto;
	}

	.sf-footer__grid {
		grid-template-columns: 1fr !important;
		gap: 44px;
	}

	.sf-footer__logo {
		justify-self: start;
	}

	.sf-footer__logo img {
		width: 140px;
	}

	.sf-footer__column h3 {
		margin-bottom: 20px;
	}

	.sf-footer__nav .wp-block-navigation__container {
		gap: 16px;
	}

	.sf-footer__nav .wp-block-navigation-item__content,
	.sf-footer__contact p {
		font-size: 16px;
	}

	.sf-footer__bottom-inner {
		padding: 12px 24px;
	}

	.sf-footer__bottom-inner p {
		font-size: 14px;
	}
}


/* ==========================================================
   Móvil compacto
   ========================================================== */

@media (max-width: 480px) {

	/* 20 px reales a izquierda y derecha. */
	.sf-footer__inner {
		width: calc(100% - 40px);
	}

	.sf-footer__bottom-inner {
		padding-inline: 20px;
	}
}


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

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

	.sf-footer__nav .wp-block-navigation-item__content,
	.sf-footer__contact a {
		transition: none;
	}
}