/* VR Group Ideas — cabecera, menú y pie (v0.4.0) ----------------------------- */
/*
 * Estilos de inc/header-footer.php. Usa los tokens de vrgi-design-tokens.css y los
 * botones de vrgi-components.css (el carrito es .vrgi-btn .vrgi-btn--primary).
 * Punto de corte del menú: 75rem (1200 px). Por debajo, menú plegable (si hay JS).
 */

.vrgi-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Si Kadence no dejase quitar su cabecera o pie, se ocultan (ver functions de header-footer.php). */
.vrgi-chrome-fallback #masthead,
.vrgi-chrome-fallback #colophon {
	display: none;
}

/* Banda superior ----------------------------------------------------------- */
.vrgi-topbar {
	box-sizing: border-box;
	padding: 0.5625rem 1rem;
	background-color: var(--vrgi-surface-band);
	color: var(--vrgi-text-on-dark);
	font-family: var(--vrgi-font-body);
	font-size: 0.875rem;
	line-height: var(--vrgi-lh-body);
	text-align: center;
}

/* Cabecera ------------------------------------------------------------------ */
.vrgi-header {
	background-color: var(--vrgi-bg);
	color: var(--vrgi-text);
	font-family: var(--vrgi-font-body);
}

.vrgi-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	padding-block: 1.125rem;
}

.vrgi-brand,
.vrgi-brand:hover,
.vrgi-brand:focus,
.vrgi-brand:active {
	font-family: var(--vrgi-font-heading);
	font-size: 1.5rem;
	font-weight: var(--vrgi-fw-extrabold);
	line-height: 1.1;
	letter-spacing: var(--vrgi-tracking-heading);
	color: var(--vrgi-text);
	text-decoration: none;
}

.vrgi-brand > span {
	color: var(--vrgi-accent);
}

/* Menú (móvil: bloque plegable a ancho completo bajo la fila de cabecera) */
.vrgi-nav {
	flex: 1 0 100%;
	order: 4;
}

.vrgi-nav__list,
.vrgi-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vrgi-nav__list {
	display: flex;
	flex-direction: column;
}

.vrgi-nav__list > li {
	margin: 0;
	border-top: var(--vrgi-border-width) solid var(--vrgi-color-gray-200);
}

.vrgi-nav__list a,
.vrgi-nav__list a:hover,
.vrgi-nav__list a:focus,
.vrgi-nav__list a:active {
	display: block;
	padding: 0.875rem 0;
	font-size: 1rem;
	font-weight: var(--vrgi-fw-medium);
	color: var(--vrgi-text);
	text-decoration: none;
}

.vrgi-nav__list a:hover,
.vrgi-nav__list a:focus {
	text-decoration: underline;
	text-decoration-color: var(--vrgi-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.vrgi-nav__list .current-menu-item > a,
.vrgi-nav__list .current_page_item > a {
	text-decoration: underline;
	text-decoration-color: var(--vrgi-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* «Impulsa IA»: acento azul de la división tecnológica. */
.vrgi-nav__list .vrgi-nav-tech > a,
.vrgi-nav__list .vrgi-nav-tech > a:hover,
.vrgi-nav__list .vrgi-nav-tech > a:focus {
	color: var(--vrgi-tech);
}

/* Botón del menú móvil: solo existe con JavaScript y por debajo de 75rem. */
.vrgi-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--vrgi-control-height-touch);
	height: var(--vrgi-control-height-touch);
	padding: 0;
	border: var(--vrgi-border-width) solid var(--vrgi-text);
	border-radius: var(--vrgi-radius-pill);
	background-color: transparent;
	color: var(--vrgi-text);
	box-shadow: none;
	cursor: pointer;
}

.vrgi-nav-toggle:hover,
.vrgi-nav-toggle:focus,
.vrgi-nav-toggle:active {
	background-color: var(--vrgi-surface-band);
	border-color: var(--vrgi-surface-band);
	color: var(--vrgi-text-on-dark);
	box-shadow: none;
}

.vrgi-nav-toggle__bars {
	display: block;
	width: 1.25rem;
	height: 2px;
	background-color: currentColor;
	box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.vrgi-nav-toggle:focus-visible,
.vrgi-nav__list a:focus-visible,
.vrgi-brand:focus-visible,
.vrgi-footer a:focus-visible {
	outline: 3px solid var(--vrgi-color-blue);
	outline-offset: 2px;
}

.vrgi-footer a:focus-visible {
	outline-color: var(--vrgi-color-white);
}

.vrgi-js .vrgi-nav-toggle {
	display: inline-flex;
	order: 3;
}

/* Con JavaScript el menú móvil se pliega; sin JavaScript se muestra desplegado. */
.vrgi-js .vrgi-nav {
	display: none;
}

.vrgi-js.vrgi-nav-open .vrgi-nav {
	display: block;
}

/* Carrito (solo si WooCommerce está activo) */
.vrgi-cart {
	order: 2;
	margin-left: auto;
	text-decoration: none;
}

.vrgi-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.375rem;
	box-sizing: border-box;
	border-radius: var(--vrgi-radius-pill);
	background-color: var(--vrgi-color-white);
	color: var(--vrgi-accent);
	font-size: 0.8125rem;
	font-weight: var(--vrgi-fw-bold);
	line-height: 1;
}

.vrgi-cart-count[hidden] {
	display: none;
}

/* Móvil estrecho: el carrito muestra solo el icono y el contador (el nombre sigue disponible para lectores de pantalla). */
@media (max-width: 36rem) {
	.vrgi-cart {
		padding-inline: 1rem;
	}

	.vrgi-cart__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Sin carrito, el botón de menú va al extremo derecho. */
.vrgi-brand + .vrgi-nav-toggle {
	margin-left: auto;
}

.vrgi-cart + .vrgi-nav-toggle,
.vrgi-nav-toggle ~ .vrgi-cart {
	margin-left: 0;
}

/* Escritorio: marca, menú centrado y carrito en una sola fila. */
@media (min-width: 75rem) {
	.vrgi-header__inner {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.vrgi-nav {
		flex: 1 1 auto;
		order: 0;
	}

	.vrgi-js .vrgi-nav,
	.vrgi-js.vrgi-nav-open .vrgi-nav {
		display: block;
	}

	.vrgi-js .vrgi-nav-toggle {
		display: none;
	}

	.vrgi-nav__list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.375rem 1.625rem;
	}

	.vrgi-nav__list > li {
		border-top: 0;
	}

	.vrgi-nav__list a,
	.vrgi-nav__list a:hover,
	.vrgi-nav__list a:focus,
	.vrgi-nav__list a:active {
		padding: 0.375rem 0;
	}

	.vrgi-cart {
		order: 0;
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vrgi-nav-toggle {
		transition: none;
	}
}

/* Pie ---------------------------------------------------------------------- */
.vrgi-footer {
	box-sizing: border-box;
	padding: 3rem 0 2rem;
	background-color: var(--vrgi-surface-band);
	color: var(--vrgi-text-on-dark-secondary);
	font-family: var(--vrgi-font-body);
	font-size: 0.9375rem;
	line-height: var(--vrgi-lh-body);
	overflow-wrap: break-word;
}

.vrgi-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
	gap: 2rem;
}

.vrgi-footer__col > * {
	margin: 0;
}

.vrgi-footer__col > * + * {
	margin-top: 0.625rem;
}

.vrgi-footer__brand {
	font-family: var(--vrgi-font-heading);
	font-size: 1.25rem;
	font-weight: var(--vrgi-fw-bold);
	color: var(--vrgi-color-white);
}

.vrgi-footer__title,
.vrgi-footer__widget-title {
	font-weight: var(--vrgi-fw-bold);
	color: var(--vrgi-color-white);
}

.vrgi-footer__text,
.vrgi-footer__widget p {
	margin: 0;
}

.vrgi-footer a,
.vrgi-footer a:hover,
.vrgi-footer a:focus,
.vrgi-footer a:active {
	color: inherit;
}

.vrgi-footer a {
	text-decoration: none;
}

.vrgi-footer a:hover,
.vrgi-footer a:focus {
	text-decoration: underline;
}

.vrgi-footer__list > li {
	margin: 0 0 0.375rem;
}

.vrgi-footer__bottom {
	margin-top: 2rem;
	font-size: 0.8125rem;
}

.vrgi-footer__bottom > p {
	margin: 0;
}