/* OneGetUp — Responsive. Copyright © 2026 OneGetUP — JAZO.
 *
 * Breakpoints mobile-first: sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536.
 * Notación de prefijo (max-width / min-width), no de rango.
 * La verificación en 320/375/390/414/768/1024/1440/1920 px es de la Fase 16.
 *
 * FASE 7 — el punto de corte de la cabecera es `lg` (1024 px):
 *   · por debajo → panel plegable accionado por el botón de divulgación;
 *   · por encima → fila horizontal y botón oculto.
 *
 * El mismo valor está escrito en `assets/js/main.js` como
 * `matchMedia('(max-width: 1023px)')`. Si se cambia aquí, hay que cambiarlo
 * allí: son las dos únicas apariciones.
 */

/* ── Cabecera por debajo de lg ─────────────────────────────────────────────
 *
 * Estrategia sin salto visual: el panel se pliega por defecto y `.no-js` lo
 * vuelve a desplegar. La clase `no-js` la retira `wp_head` antes del primer
 * pintado (`onegetup_no_js_class()`), de modo que el usuario nunca ve el menú
 * abrirse y cerrarse solo.
 *
 * El plegado se aplica únicamente con el modificador `--collapsible`, que
 * `header.php` añade solo cuando hay menú principal. Sin él no habría botón y
 * el panel quedaría inalcanzable.
 */

@media (max-width: 1023px) {
	.ogu-header__toggle {
		display: inline-flex;
	}

	.ogu-header__panel {
		flex: 1 0 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ogu-space-4);
		padding-block-start: var(--ogu-space-4);
		border-block-start: 1px solid var(--ogu-border-strong);
	}

	.ogu-header__panel .ogu-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--ogu-space-2);
		width: 100%;
	}

	.ogu-header__actions {
		flex-wrap: wrap;
		width: 100%;
	}

	/* Los submenús quedan desplegados y sangrados. En pantalla táctil no hay
	 * `hover`, y un acordeón exigiría JavaScript adicional sin ganancia real:
	 * la profundidad aprobada es 2, así que la lista completa cabe. */
	.ogu-nav--primary .sub-menu {
		display: flex;
		position: static;
		min-width: 0;
		padding: 0;
		padding-inline-start: var(--ogu-space-4);
		border: 0;
		box-shadow: none;
		background-color: transparent;
	}

	.ogu-nav--primary .menu-item-has-children > a::after {
		display: none;
	}

	.ogu-header--collapsible .ogu-header__panel {
		display: none;
	}

	.ogu-header--collapsible.is-nav-open .ogu-header__panel {
		display: flex;
	}

	/* Sin JavaScript: panel siempre visible y botón oculto, porque no habría
	 * nada que lo accionase. */
	.no-js .ogu-header--collapsible .ogu-header__panel {
		display: flex;
	}

	.no-js .ogu-header__toggle {
		display: none;
	}
}

/* ── Cabecera desde lg ───────────────────────────────────────────────────── */

@media (min-width: 1024px) {
	.ogu-header__inner {
		flex-wrap: nowrap;
	}
}

/* ── Pie: una columna → dos en md → cuatro en lg ──────────────────────────── */

@media (min-width: 768px) {
	.ogu-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ogu-footer__columns {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ── Rejillas de contenido (Fase 5) ──────────────────────────────────────── */

@media (min-width: 1024px) {
	.ogu-grid--split {
		grid-template-columns: 7fr 5fr;
	}
}