/*
 * c-header + c-topmenu — logo a la izquierda; a la derecha una fila
 * utilitaria chica arriba y, abajo, el menú en versalitas sobre un filete
 * con la píldora "Buscar" al final.
 * Con poco ancho (media query, < 64rem): menú en cajón; en la barra quedan
 * el botón Menú, el logo centrado y la píldora.
 */
@layer components {
	.c-header {
		position: relative;
		z-index: var(--z-header);
		background: var(--header-bg);
	}
	.c-header {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0;   /* el margen del logo es su área de seguridad (c-logo.css) */
		/* a todo el ancho (el filete inferior también); el contenido, al ancho de la página */
		padding-block: 0;
		padding-inline: max(var(--gutter), (100% - var(--page-max)) / 2);
		border-block-end: 1px solid var(--color-border);
	}

	.c-topmenu {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "util util" "list search";
		align-items: center;
		column-gap: var(--space-m);
		row-gap: var(--space-2xs);
	}
	.c-topmenu__toggle { display: none; }
	.c-topmenu__list {
		grid-area: list;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		column-gap: clamp(0.8rem, 1.6vw, 1.6rem);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.c-topmenu__link {
		display: inline-block;
		padding-block: 0.4rem;
		border: 0;
		background: none;
		color: var(--color-strong);
		/* Cinzel: mayúsculas de inscripción, sin transformar */
		font-family: var(--font-institutional);
		font-size: var(--nav-size);
		font-weight: var(--nav-weight);
		letter-spacing: 0.02em;
		text-transform: none;
		white-space: nowrap;
		text-decoration: none;
		background-image: linear-gradient(var(--color-accent), var(--color-accent));
		background-size: 0 1px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		transition: background-size var(--duration) var(--easing);
	}
	.c-topmenu__link:hover, .c-topmenu__link[aria-current="page"], .c-topmenu__item.active > .c-topmenu__link { background-size: 100% 1px; }

	.c-topmenu__utility {
		grid-area: util;
		justify-self: end;
		display: flex;
		align-items: center;
		gap: var(--space-s);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--step--2);
	}
	.c-topmenu__util-link { color: var(--color-muted); text-decoration: none; }
	.c-topmenu__util-link:hover { color: var(--color-strong); text-decoration: underline; }
	.c-topmenu__search { grid-area: search; }

	/* el header no es fijo (como en la referencia): no cambia al bajar. Para uno
	   fijo o que se achica, las recetas header-*.css (un header que se achica
	   sin ser fijo hace saltar la página: ver §10 del método) */

}
/* ── poco ancho (único corte del theme, solo para el header): barra con
   Menú | logo | Buscar y el menú en un cajón desde la izquierda. El logo y
   el menú comparten la celda de la grilla. */
@layer components {
	@media (width < 64rem) {
		/* Menú | logo | Buscar en tres columnas: el <nav> se disuelve (display: contents)
		   para que ninguna caja suya entre en el área de seguridad del logo (D6) */
		.c-header { grid-template-columns: auto 1fr auto; grid-template-areas: "toggle logo search"; --logo-size: 2.6rem; }
		.c-header > .c-logo { grid-area: logo; justify-self: center; }
		.c-topmenu { display: contents; }
		.c-topmenu__panel:not(:modal) { grid-column: 1 / -1; }
		.c-topmenu__toggle {
			grid-area: toggle;
			display: inline-flex;
			align-items: center;
			gap: 0.5em;
			padding: 0.4rem 0;
			border: 0;
			background: none;
			color: var(--color-strong);
			font-size: var(--step--1);
			font-weight: 500;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			cursor: pointer;
		}
		.c-topmenu__toggle .c-icon { font-size: 1.4em; }
		.c-topmenu__panel { --mode: drawer; }
		.c-topmenu__search { font-size: var(--step--2); padding-inline: 1em; }
	}
	/* a 390 px no entran el logo de 166 px con su área de seguridad y los textos:
	   el menú y el buscador pasan a ser solo ícono (D6) */
	@media (width < 40rem) {
		.c-topmenu__toggle-text, .c-topmenu__search-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
		.c-topmenu__toggle, .c-topmenu__search { inline-size: 2.75rem; block-size: 2.75rem; padding: 0; justify-content: center; }
	}

	/* el cajón del menú */
	.c-topmenu__panel[data-mode="drawer"]:modal {
		display: flex;
		flex-direction: column;
		gap: var(--space-l);
		padding: var(--space-m) var(--space-l);
	}
	.c-topmenu__panel[data-mode="drawer"] .c-topmenu__list { flex-direction: column; row-gap: var(--space-xs); }
	.c-topmenu__panel[data-mode="drawer"] .c-topmenu__link { font-size: var(--step-1); letter-spacing: 0; text-transform: none; }
	.c-topmenu__panel[data-mode="drawer"] .c-topmenu__utility { flex-direction: column; align-items: flex-start; justify-self: start; font-size: var(--step--1); padding-block-start: var(--space-s); border-block-start: 1px solid var(--color-rule); }
}