/* OneGetUp — Componentes base. Copyright © 2026 OneGetUP — JAZO.
 *
 * Solo los componentes mínimos que necesitan las plantillas de la Fase 5.
 * El catálogo completo (botones en 5 variantes, formularios, badges, tablas,
 * navegación, tarjetas y componentes de WooCommerce) se construye en las fases
 * que corresponden a cada plantilla.
 */

/* Enlace de salto al contenido. Debe ser el primer elemento enfocable. */
.ogu-skip-link:focus {
	position: fixed;
	inset-block-start: var(--ogu-space-2);
	inset-inline-start: var(--ogu-space-2);
	z-index: var(--ogu-z-toast);
	padding: var(--ogu-space-3) var(--ogu-space-4);
	background-color: var(--ogu-accent);
	color: var(--ogu-accent-contrast);
	border-radius: var(--ogu-radius-sm);
	text-decoration: none;
}

/* ── Cabecera y pie — FASE 7 ─────────────────────────────────────────────
 *
 * Superficie navy mediante la clase `.ogu-surface-brand`, que remapea los
 * tokens semánticos. Aquí no se declara ni un solo color literal.
 *
 * La cabecera NO es sticky: los tokens `--ogu-shadow-sticky` y `--ogu-z-sticky`
 * existen en el Design System, pero ninguna decisión aprobada declara la
 * cabecera fija al hacer scroll. Queda diferido.
 */

/* La cabecera no lleva borde inferior: la transición de la superficie navy al
 * lienzo claro ya es el límite visual. Un borde `--ogu-border` sobre navy rinde
 * 1.13:1 y no se vería. */

.ogu-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ogu-space-4);
	padding-block: var(--ogu-space-4);
}

/* Marca. */

.ogu-brand {
	flex: 0 0 auto;
}

.ogu-site-title {
	font-family: var(--ogu-font-display);
	font-size: var(--ogu-text-xl);
	font-weight: var(--ogu-weight-bold);
	letter-spacing: var(--ogu-tracking-tight);
	margin: 0;
}

.ogu-brand__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.ogu-brand__logo {
	display: block;
	width: auto;
	max-height: 40px;
}

/* Panel de la cabecera: fila en escritorio, desplegable en móvil. */

.ogu-header__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ogu-space-6);
}

.ogu-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ogu-space-4);
}

.ogu-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-inline: var(--ogu-space-4);
	border-radius: var(--ogu-radius-sm);
	background-color: var(--ogu-accent);
	color: var(--ogu-accent-contrast);
	font-weight: var(--ogu-weight-semibold);
	text-decoration: none;
}

.ogu-header__cta:hover {
	text-decoration: underline;
}

.ogu-header__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--ogu-space-3);
	border: 1px solid var(--ogu-border-strong);
	border-radius: var(--ogu-radius-round);
	color: inherit;
	font-family: var(--ogu-font-mono);
	text-decoration: none;
}

.ogu-header__cart:hover,
.ogu-header__cart:focus-visible {
	border-color: var(--ogu-accent);
	color: var(--ogu-accent);
}

/* Botón del panel. Oculto por defecto: solo aparece por debajo de 1024 px y
 * únicamente cuando hay JavaScript (regla en responsive.css). Sin JavaScript el
 * panel se muestra siempre y un botón que no hace nada sería un engaño. */

.ogu-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--ogu-border-strong);
	border-radius: var(--ogu-radius-sm);
	background: none;
	color: inherit;
	cursor: pointer;
}

.ogu-header__toggle:hover {
	color: var(--ogu-accent);
}

.ogu-header__toggle-icon {
	display: inline-flex;
}

.ogu-icon--close,
.is-nav-open .ogu-icon--menu {
	display: none;
}

.is-nav-open .ogu-icon--close {
	display: block;
}

/* Navegación. */

.ogu-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ogu-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogu-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.ogu-nav a:hover {
	color: var(--ogu-accent);
	text-decoration: underline;
}

.ogu-nav a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Submenús de profundidad 2. Se abren con hover y con focus-within: sin
 * JavaScript y sin ARIA añadido, porque los padres son enlaces reales. */

.ogu-nav--primary .menu-item-has-children {
	position: relative;
}

.ogu-nav--primary .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-inline-start: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.1em);
}

.ogu-nav--primary .sub-menu {
	display: none;
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 100%;
	z-index: var(--ogu-z-dropdown);
	min-width: 12rem;
	flex-direction: column;
	gap: 0;
	padding: var(--ogu-space-2);
	border: 1px solid var(--ogu-border-strong);
	border-radius: var(--ogu-radius-sm);
	box-shadow: var(--ogu-shadow-2);
	background-color: var(--ogu-surface);
	list-style: none;
}

.ogu-nav--primary .menu-item-has-children:hover > .sub-menu,
.ogu-nav--primary .menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

/* Selector de idioma. Solo se renderiza si hay proveedor multilingüe. */

.ogu-langs__list {
	display: flex;
	gap: var(--ogu-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogu-langs__code {
	font-size: var(--ogu-text-sm);
	text-transform: uppercase;
}

.ogu-langs__code.is-current {
	font-weight: var(--ogu-weight-bold);
}

/* Pie. */

.ogu-footer {
	padding-block: var(--ogu-space-8);
	font-size: var(--ogu-text-sm);
}

.ogu-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ogu-space-8);
}

.ogu-footer__heading {
	font-size: var(--ogu-text-sm);
	font-weight: var(--ogu-weight-bold);
	letter-spacing: var(--ogu-tracking-wide);
	text-transform: uppercase;
	margin-block: 0 var(--ogu-space-3);
}

.ogu-footer__brand {
	font-family: var(--ogu-font-display);
	font-size: var(--ogu-text-lg);
	font-weight: var(--ogu-weight-bold);
	margin: 0;
}

.ogu-footer__tagline {
	color: var(--ogu-text-secondary);
	margin-block: var(--ogu-space-2) 0;
}

.ogu-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogu-footer__list li {
	margin-block-end: var(--ogu-space-2);
}

.ogu-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.ogu-footer__list a:hover {
	color: var(--ogu-accent);
	text-decoration: underline;
}

.ogu-footer__address {
	color: var(--ogu-text-secondary);
	font-style: normal;
	margin-block-start: var(--ogu-space-3);
}

.ogu-social__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogu-space-4);
	list-style: none;
	margin-block: var(--ogu-space-6) 0;
	padding: 0;
}

.ogu-social__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
}

.ogu-social__link:hover {
	color: var(--ogu-accent);
}

.ogu-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ogu-space-4);
	margin-block-start: var(--ogu-space-8);
	padding-block-start: var(--ogu-space-6);
	border-block-start: 1px solid var(--ogu-border-strong);
	color: var(--ogu-text-secondary);
}

.ogu-footer__copyright {
	margin: 0;
}

/* Entradas y listados. */
.ogu-entry + .ogu-entry {
	margin-block-start: var(--ogu-space-12);
	padding-block-start: var(--ogu-space-12);
	border-block-start: 1px solid var(--ogu-border);
}

.ogu-entry__title {
	margin-block-end: var(--ogu-space-2);
}

.ogu-entry__title a {
	color: inherit;
	text-decoration: none;
}

.ogu-entry__title a:hover,
.ogu-entry__title a:focus-visible {
	text-decoration: underline;
}

.ogu-meta__date,
.ogu-meta__author {
	font-family: var(--ogu-font-mono);
	font-size: var(--ogu-text-xs);
	color: var(--ogu-text-secondary);
}

.ogu-empty {
	padding: var(--ogu-space-8);
	border: 1px solid var(--ogu-border);
	border-radius: var(--ogu-radius-sm);
	color: var(--ogu-text-secondary);
	text-align: center;
}

.ogu-pagination {
	margin-block-start: var(--ogu-space-12);
}

.ogu-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogu-space-2);
}

.ogu-pagination a,
.ogu-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--ogu-space-3);
	border: 1px solid var(--ogu-border);
	border-radius: var(--ogu-radius-sm);
	text-decoration: none;
}

.ogu-pagination .current {
	border-color: var(--ogu-accent);
	color: var(--ogu-accent);
	font-weight: var(--ogu-weight-semibold);
}

/* Breadcrumbs — misma fuente de datos que BreadcrumbList. */
.ogu-breadcrumbs {
	padding-block: var(--ogu-space-3);
	color: var(--ogu-text-secondary);
	font-size: var(--ogu-text-sm);
}

.ogu-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ogu-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogu-breadcrumbs li:not(:last-child)::after {
	margin-inline-start: var(--ogu-space-2);
	content: "/";
	color: var(--ogu-border-strong);
}

.ogu-breadcrumbs [aria-current="page"] {
	color: var(--ogu-text);
}