/* ==========================================================================
   Header del sitio.
   Comportamiento por defecto: header sticky en crema con borde inferior.
   Páginas con .has-overlay-header (home): header transparente sobre el hero
   que se vuelve sólido al scrollear (clase .is-scrolled añadida vía JS).
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--color-cream);
	border-bottom: 1px solid var(--color-line);
	transition: background-color var(--transition-mid),
	            border-color var(--transition-mid),
	            box-shadow var(--transition-mid);
}

/* Shadow sutil cuando el usuario ha scrolleado, para reforzar la elevación
   del header pegado en lo alto. La clase `is-scrolled` la pone main.js a
   partir del threshold de 60px. */
body.is-scrolled .site-header {
	box-shadow: 0 4px 16px rgba(11, 37, 69, 0.06);
}

.site-nav__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: var(--space-5) var(--container-pad-x);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-6);
}

/* Wordmark SVG: tamaño explícito para que no colapse en flex containers
   ni se infle al default 300×150 de SVG inline sin width/height. */
.wordmark__svg {
	display: block;
	width: 220px;
	height: auto;
	color: var(--color-navy);
}

@media (max-width: 480px) {
	.wordmark__svg {
		width: 180px;
	}
}

/* En el header overlay (home), el wordmark va sobre la foto del hero:
   mantenemos navy en escritorio (tiene contraste con el panel cream del topbar
   y con la franja superior de la foto). En móvil ya está sobre cream solid. */
.has-overlay-header.is-scrolled .wordmark__svg {
	color: var(--color-navy);
}

.site-nav__menu {
	display: none;
}

.site-nav__list {
	display: flex;
	gap: var(--space-7);
	align-items: center;
}

.site-nav__list a {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--color-graphite);
	padding: 6px 0;
	transition: color var(--transition-fast);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	color: var(--color-navy);
}

/* --- Página actual --- */
/* WordPress ya marcaba el item con `current-menu-item` y `aria-current="page"`,
   pero no había ninguna regla que lo pintara. Se enganchan las dos cosas: las
   clases (que además cubren ancestros, útil cuando haya subpáginas) y el
   atributo ARIA, que es el que marca la página exacta. */

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list .current-page-ancestor > a,
.site-nav__list a[aria-current="page"] {
	color: var(--color-navy);
	position: relative;
}

.site-nav__list .current-menu-item > a::after,
.site-nav__list .current_page_item > a::after,
.site-nav__list .current-menu-ancestor > a::after,
.site-nav__list .current-menu-parent > a::after,
.site-nav__list .current-page-ancestor > a::after,
.site-nav__list a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--color-gold);
}

/* El item con aspecto de botón no lleva subrayado: se marca invirtiendo a oro. */
.site-nav__list .current-menu-item > .site-nav__cta,
.site-nav__list .current-menu-item > a.cta,
.site-nav__list li.cta.current-menu-item > a,
.site-nav__list .site-nav__cta[aria-current="page"],
.site-nav__list a.cta[aria-current="page"],
.site-nav__list li.cta > a[aria-current="page"] {
	background: var(--color-gold);
	color: var(--color-navy);
}

.site-nav__list .current-menu-item > .site-nav__cta::after,
.site-nav__list .current-menu-item > a.cta::after,
.site-nav__list li.cta.current-menu-item > a::after,
.site-nav__list .site-nav__cta[aria-current="page"]::after,
.site-nav__list a.cta[aria-current="page"]::after,
.site-nav__list li.cta > a[aria-current="page"]::after {
	display: none;
}

/* En móvil el menú es una columna: el subrayado a todo el ancho del contenedor
   quedaría desproporcionado, así que se ciñe al texto. */
@media (max-width: 959px) {
	.site-nav__list > li {
		display: block;
	}

	.site-nav__list > li > a {
		display: inline-block;
	}
}

/* Item con aspecto de botón. Se activa de dos maneras: con la clase `cta` en el
   campo "Clases CSS" del item en Apariencia → Menús — que WordPress imprime en
   el `<li>`, no en el `<a>`, de ahí el selector `li.cta > a` — o con la clase
   `site-nav__cta` del marcado cableado. */
.site-nav__list .site-nav__cta,
.site-nav__list a.cta,
.site-nav__list li.cta > a {
	background: var(--color-navy);
	color: var(--color-cream);
	padding: 11px 22px;
	border-radius: var(--radius-button);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
}

.site-nav__list .site-nav__cta:hover,
.site-nav__list a.cta:hover,
.site-nav__list li.cta > a:hover,
.site-nav__list li.cta > a:focus-visible {
	background: var(--color-navy-deep);
	color: var(--color-cream);
}

/* Toggle hamburguesa para móvil. */
.site-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--color-navy);
}

.site-nav__toggle-bars {
	position: relative;
	width: 22px;
	height: 16px;
	display: inline-block;
}

.site-nav__toggle-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--transition-fast),
	            opacity var(--transition-fast),
	            top var(--transition-fast);
}

.site-nav__toggle-bars span:nth-child(1) { top: 0; }
.site-nav__toggle-bars span:nth-child(2) { top: 7px; }
.site-nav__toggle-bars span:nth-child(3) { top: 14px; }

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars span:nth-child(2) {
	opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* Mobile-first: menú escondido por defecto, se muestra al expandir. */
@media (max-width: 959px) {
	.site-nav__menu {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(86vw, 360px);
		background: var(--color-cream);
		padding: 96px var(--space-6) var(--space-6);
		box-shadow: -16px 0 40px rgba(11, 37, 69, 0.08);
		transform: translateX(100%);
		transition: transform var(--transition-mid);
		z-index: var(--z-nav-mobile);
		overflow-y: auto;
	}

	.site-nav__menu.is-open {
		display: block;
		transform: translateX(0);
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
	}
}

@media (min-width: 960px) {
	.site-nav__toggle {
		display: none;
	}

	.site-nav__menu {
		display: block;
	}
}

/* === Header overlay (en .has-overlay-header) === */
.has-overlay-header .site-header {
	position: fixed;
	top: var(--top-bar-height);
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
}

.has-overlay-header .top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.has-overlay-header.is-scrolled .site-header {
	background: var(--color-cream);
	border-bottom-color: var(--color-line);
	box-shadow: 0 4px 16px rgba(11, 37, 69, 0.06);
}

@media (max-width: 959px) {
	.has-overlay-header .site-header {
		/* En móvil, sobre el hero el wordmark debe leerse: forzamos cream desde el principio. */
		background: var(--color-cream);
		border-bottom-color: var(--color-line);
	}
}