/**
 * AVELUNEXA — cabecera y pie.
 *
 * Blocksy imprime su propia cabecera y su propio pie. Aquí no se reconstruyen:
 * se les aplica el sistema de diseño. Reemplazarlos por marcado propio nos
 * dejaría manteniendo un menú móvil accesible a mano, que es exactamente el
 * tipo de trabajo que Blocksy ya hace bien.
 *
 * Todo son tokens. Ni un color literal.
 */

/* -------------------------------------------------------------------------
 * Barra de anuncio
 * ---------------------------------------------------------------------- */

.av-topbar {
	background-color: var(--av-color-bg-inverse);
	color: var(--av-color-text-inverse);
}

.av-topbar__inner {
	max-width: var(--av-container);
	margin-inline: auto;
	padding: var(--av-space-2xs) var(--av-gutter);
	text-align: center;
	font-size: var(--av-text-xs);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Cabecera
 * ---------------------------------------------------------------------- */

/* Blocksy imprime el fondo de cabecera desde su CSS dinámico con una
 * especificidad alta y, con la paleta mal mapeada, estaba usando el blush
 * (#EBC5C2) como fondo. Medido: los enlaces dorados daban 1.33:1 encima.
 *
 * Se fija el fondo aquí y se retira el blush de la paleta, para que ningún rol
 * de Blocksy pueda volver a convertirlo en superficie de texto. El blush queda
 * como acento decorativo, que es para lo que sirve. */
[data-header] header.ct-header,
[data-header] header.ct-header > div,
[data-header] .ct-header [data-row],
[data-header] .ct-header [data-column] {
	background-color: var(--av-color-bg);
}

header.ct-header {
	border-block-end: 1px solid var(--av-color-border);
}

/* Los enlaces de navegación son navy, nunca oro: el oro sobre ivory da 1.92:1.
 * El oro solo aparece como filete bajo el elemento activo. */
header.ct-header nav a.ct-menu-link,
header.ct-header .header-menu-1 a {
	color: var(--av-color-text);
}

header.ct-header nav a.ct-menu-link:hover,
header.ct-header .header-menu-1 a:hover {
	color: var(--av-color-accent-text);
}

/* Marca. Blocksy la imprime como texto o como imagen; el texto hereda la
   tipografía display. */
.ct-header [data-id='logo'] .site-title,
header.ct-header .site-title a {
	font-family: var(--av-font-display);
	font-size: var(--av-text-xl);
	font-weight: var(--av-weight-regular);
	letter-spacing: var(--av-tracking-widest);
	text-transform: uppercase;
	color: var(--av-color-text);
	text-decoration: none;
}

.site-description {
	font-family: var(--av-font-body);
	font-size: var(--av-text-xs);
	letter-spacing: var(--av-tracking-wide);
	color: var(--av-color-text-muted);
}

/* Navegación */
.header-menu-1 .menu-item > a,
.ct-header nav a {
	font-family: var(--av-font-body);
	font-size: var(--av-text-sm);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	color: var(--av-color-text);
	text-decoration: none;
}

.ct-header nav a:hover { color: var(--av-color-accent-text); }

/* Filete dorado bajo el elemento activo. Se dibuja siempre y se escala en 0,
   para que la transición no provoque reflow. */
.ct-header nav .current-menu-item > a,
.ct-header nav .current_page_item > a {
	position: relative;
}

.ct-header nav .menu-item > a::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.35em;
	height: 1px;
	background-color: var(--av-color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--av-duration-fast) var(--av-ease);
}

.ct-header nav .menu-item:hover > a::after,
.ct-header nav .current-menu-item > a::after,
.ct-header nav .current_page_item > a::after {
	transform: scaleX(1);
}

/* Iconos de cuenta, búsqueda y carrito: área táctil suficiente. */
.ct-header [data-id='cart'] a,
.ct-header [data-id='account'] a,
.ct-header [data-id='search'] button,
.ct-header .ct-header-cart,
.ct-header .ct-header-account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--av-tap-target);
	min-height: var(--av-tap-target);
	color: var(--av-color-text);
}

/* Contador del carrito */
.ct-cart-item-count,
.ct-header-cart .ct-cart-count {
	background-color: var(--av-color-accent);
	color: var(--av-color-text-on-gold);
	font-family: var(--av-font-body);
	font-size: 0.6875rem;
	font-weight: var(--av-weight-semibold);
	min-width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--av-radius-pill);
	display: inline-grid;
	place-items: center;
}

/* Cabecera fija: fondo sólido, nunca translúcido sobre contenido. */
.ct-header[data-sticky] {
	background-color: var(--av-color-bg);
	box-shadow: var(--av-shadow-sm);
}

/* -------------------------------------------------------------------------
 * Menú móvil
 * ---------------------------------------------------------------------- */

#offcanvas .mobile-menu a,
.ct-panel .mobile-menu a {
	font-family: var(--av-font-body);
	font-size: var(--av-text-base);
	font-weight: var(--av-weight-medium);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	/* Objetivo táctil cómodo: toda la fila, no solo el texto. */
	display: block;
	padding-block: var(--av-space-xs);
	min-height: var(--av-tap-target);
}

.ct-panel { background-color: var(--av-color-bg); }

/* El botón de hamburguesa y el de cierre necesitan área propia.
 *
 * Medido: Blocksy lo renderizaba a 18x18 px, menos de la mitad del mínimo
 * cómodo. Los selectores son los de su marcado real (`.ct-header-trigger`,
 * `.ct-toggle`), no los que uno supondría por la estructura de `data-id`. */
.ct-header-trigger,
.ct-toggle,
.ct-toggle-close,
.ct-panel-actions .ct-toggle-close,
[data-id='trigger'] .ct-toggle {
	display: inline-flex !important; /* Blocksy fija display:block en línea */
	align-items: center;
	justify-content: center;
	min-width: var(--av-tap-target);
	min-height: var(--av-tap-target);
}

/* El icono en sí conserva su tamaño visual: crece el área, no el dibujo. */
.ct-header-trigger svg,
.ct-toggle svg {
	width: 18px;
	height: 18px;
}

/* Enlace de marca: 21 px de alto medidos es poco para el elemento más pulsado
 * de la cabecera. El padding vertical le da área sin mover la maquetación. */
.site-title a,
.ct-header [data-id='logo'] a {
	display: inline-flex;
	align-items: center;
	min-height: var(--av-tap-target);
}

/* -------------------------------------------------------------------------
 * Pie
 * ---------------------------------------------------------------------- */

footer.ct-footer {
	background-color: var(--av-color-bg-inverse);
	color: var(--av-gray-300);
}

footer.ct-footer a {
	color: var(--av-gray-300);
	text-decoration: none;
}

footer.ct-footer a:hover {
	color: var(--av-color-text-inverse);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

footer.ct-footer .widget-title,
footer.ct-footer h3,
footer.ct-footer h4 {
	font-family: var(--av-font-body);
	font-size: var(--av-text-xs);
	font-weight: var(--av-weight-semibold);
	letter-spacing: var(--av-tracking-widest);
	text-transform: uppercase;
	color: var(--av-color-accent);
}

footer.ct-footer .site-title,
footer.ct-footer .site-title a {
	font-family: var(--av-font-display);
	color: var(--av-color-text-inverse);
}

/* Medido a 360 px: el enlace de marca del pie quedaba en 20 px de alto.
 * No es prosa, es un enlace de navegación, así que le corresponde el mínimo. */
footer.ct-footer .site-title a {
	display: inline-flex;
	align-items: center;
	min-height: var(--av-tap-target);
}

/* Fila inferior de copyright */
footer.ct-footer [data-row='bottom'] {
	border-block-start: 1px solid rgba(250, 247, 242, 0.12);
	font-size: var(--av-text-xs);
	color: var(--av-gray-500);
}

/* El pie es oscuro: el foco necesita el par invertido para verse. */
footer.ct-footer :where(a, button):focus-visible {
	outline-color: var(--av-color-focus-contrast);
	box-shadow: 0 0 0 4px rgba(13, 27, 42, 0.9);
}

/* -------------------------------------------------------------------------
 * Distintivos de staging
 * ---------------------------------------------------------------------- */

.av-staging-badge {
	position: absolute;
	inset-block-start: var(--av-space-2xs);
	inset-inline-end: var(--av-space-2xs);
	z-index: 2;
	padding: 0.2rem 0.5rem;
	border-radius: var(--av-radius-sm);
	background-color: var(--av-color-warning);
	color: #fff;
	font-family: var(--av-font-body);
	font-size: 0.625rem;
	font-weight: var(--av-weight-semibold);
	letter-spacing: var(--av-tracking-wide);
	text-transform: uppercase;
	line-height: 1.4;
}

.av-staging-notice {
	margin-block: var(--av-space-2xs) var(--av-space-sm);
	padding: var(--av-space-2xs) var(--av-space-xs);
	border-inline-start: 3px solid var(--av-color-warning);
	background-color: #fff8e6;
	color: #6b4e0c;
	font-size: var(--av-text-sm);
	line-height: var(--av-leading-normal);
}

/* -------------------------------------------------------------------------
 * Móvil
 * ---------------------------------------------------------------------- */

@media (max-width: 47.9375em) {
	.av-topbar__inner {
		font-size: 0.6875rem;
		letter-spacing: var(--av-tracking-normal);
		/* Que envuelva en dos líneas antes que recortarse. */
		padding-inline: var(--av-space-2xs);
	}

	.ct-header [data-id='logo'] .site-title,
	.site-title a { font-size: var(--av-text-lg); }
}

/* -------------------------------------------------------------------------
 * Pie — corrección de especificidad
 *
 * Medido: Blocksy pintaba el pie con ivory-300 y el enlace de copyright en
 * gris claro, dando 1.24:1. Su CSS dinámico gana a `footer.ct-footer`, así que
 * hace falta un selector con más peso. No se usa !important: basta con
 * anteponer `body`.
 * ---------------------------------------------------------------------- */

[data-footer] footer.ct-footer,
[data-footer] footer.ct-footer > div,
[data-footer] footer.ct-footer [data-row] {
	/* Blocksy pinta el pie desde un <style> inline con
	 * `[data-footer*="type-1"] .ct-footer` (0,2,0), que gana a
	 * `body footer.ct-footer` (0,1,2). Se usa su mismo gancho de atributo
	 * mas el elemento para llegar a (0,2,1) y ganar sin !important. */
	background-color: var(--av-color-bg-inverse);
}

[data-footer] footer.ct-footer,
[data-footer] footer.ct-footer p,
[data-footer] footer.ct-footer li,
[data-footer] footer.ct-footer .ct-footer-copyright,
[data-footer] footer.ct-footer .site-title,
[data-footer] footer.ct-footer .site-title a {
	color: var(--av-gray-300);
}

[data-footer] footer.ct-footer a,
[data-footer] footer.ct-footer .ct-footer-copyright a {
	color: var(--av-ivory-300);
}

[data-footer] footer.ct-footer a:hover,
[data-footer] footer.ct-footer .ct-footer-copyright a:hover {
	color: var(--av-color-text-inverse);
}

[data-footer] footer.ct-footer :is(h1, h2, h3, h4, .widget-title) {
	color: var(--av-color-accent);
}