/* =========================================================
   HEADER — Placa de Herbario + Navegación + Responsive
   =========================================================

   Agrupa todo lo relacionado con la cabecera del sitio:
   - El marco .specimen-frame (usado también en footer)
   - Esquinas de montaje
   - Topbar tipo catálogo
   - Título y tagline
   - Divisor botánico SVG
   - Menú de navegación con efecto enredadera
   - Foto circular del espécimen
   - Botón hamburguesa móvil
   - Responsive del header (≤640px)

   Estructura HTML (header.php):
   .site-header
     .specimen-frame
       .specimen-corner (x4)
       .specimen-topbar
       .specimen-main
         .specimen-photo
         .site-title
         .site-tagline
       .botanical-divider
       .specimen-nav
         .specimen-menu
           li > a
       .nav-toggle
   ========================================================= */


/* ── CONTENEDOR EXTERIOR ─────────────────────────────── */

.site-header {
	padding: var(--frame-margin);
}


/* ── MARCO PRINCIPAL ───────────────────────────────────
   Simula la lámina de herbario montada en cartulina.
   position: relative → permite posicionar las esquinas dentro.
   max-width + margin: 0 auto → centra el marco.
   ────────────────────────────────────────────────────── */

.specimen-frame {
	position: relative;
	max-width: var(--container-max);
	margin: 0 auto;
	border: var(--frame-border);
	padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 1.75rem;
}


/* ── ESQUINAS DE MONTAJE ───────────────────────────────
   Cada esquina es un cuadrado de 14x14px con solo 2 bordes
   visibles, simulando las marcas de montaje artesanal.

   Las 4 clases (.tl, .tr, .bl, .br) position: absolute
   para colocarse en cada esquina del marco.
   ────────────────────────────────────────────────────── */

.specimen-corner {
	position: absolute;
	width: 14px;
	height: 14px;
	border-color: var(--color-line);
	border-style: solid;
	border-width: 0;
}

.specimen-corner.tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.specimen-corner.tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.specimen-corner.bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.specimen-corner.br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }


/* ── BARRA SUPERIOR (TOPBAR) ───────────────────────────
   Etiqueta de catálogo: "2024 — Herbario | 07.15".
   Flexbox con space-between separa los lados.
   ────────────────────────────────────────────────────── */

.specimen-topbar {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-line);
	padding-bottom: 0.85rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-cream-deep);
}

.specimen-topbar .specimen-index {
	color: var(--color-marigold);
}


/* ── BLOQUE CENTRAL (TÍTULO + TAGLINE) ───────────────── */

.specimen-main {
	text-align: center;
	position: relative;
}

/* Título del sitio: grande, serif italic, responsive */
.site-title {
	display: inline-block;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: italic;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--color-ink);
}

.site-title:hover {
	color: var(--color-magenta);
}

/* Subtítulo/tagline del sitio */
.site-tagline {
	margin: 0.6rem 0 0;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-line);
}


/* ── DIVISOR BOTÁNICO ──────────────────────────────────
   SVG inline dibujado a mano que simula una planta.
   ────────────────────────────────────────────────────── */

.botanical-divider {
	display: flex;
	justify-content: center;
	margin: 1.1rem 0 1.6rem;
	color: var(--color-cosmos);
}

.botanical-divider svg {
	width: 140px;
	height: auto;
}


/* =========================================================
   NAVEGACIÓN PRINCIPAL
   =========================================================

   Menú en fila centrada con puntos separadores rosas.
   Al hover, aparece una línea orgánica tipo enredadera.
   ========================================================= */

.specimen-nav {
	display: flex;
	justify-content: center;
}

.specimen-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 2rem;
}

.specimen-menu li {
	position: relative;
}

/* ── PUNTO SEPARADOR ───────────────────────────────────
   Pseudo-elemento ::after: punto circular de 4px
   entre cada enlace (excepto el último).
   ────────────────────────────────────────────────────── */

.specimen-menu li:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -1.15rem;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-cosmos);
}

/* ── ENLACES DEL MENÚ ──────────────────────────────────
   Pseudo-elemento ::before crea la "enredadera":
   una línea SVG que crece bajo el texto en hover.
   ────────────────────────────────────────────────────── */

.specimen-menu a {
	position: relative;
	display: inline-block;
	padding: 0.25rem 0.05rem;
	font-family: var(--font-nav);
	font-size: 1.05rem;
	font-style: italic;
	letter-spacing: 0.03em;
}

/* La enredadera: SVG inline que crece de 0% a 100% */
.specimen-menu a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 6px;
	/* SVG curva sinusoidal: stroke='%23A63A63' = magenta */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q 10 0, 20 5 T 40 5 T 60 5 T 80 5 T 100 5' fill='none' stroke='%23A63A63' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size 0.35s ease;
}

/* Hover y foco: la enredadera crece */
.specimen-menu a:hover::before,
.specimen-menu a:focus-visible::before {
	background-size: 100% 100%;
}

/* Foco accesibilidad: recuadro magenta */
.specimen-menu a:focus-visible {
	outline: 2px solid var(--color-magenta);
	outline-offset: 4px;
}

/* Elemento activo: texto en magenta */
.specimen-menu .current-menu-item > a {
	color: var(--color-magenta);
}


/* ── FOTO CIRCULAR (ESPÉCIMEN) ─────────────────────────
   Imagen circular en la esquina superior derecha.
   ────────────────────────────────────────────────────── */

.specimen-photo {
	position: absolute;
	top: 1.4rem;
	right: clamp(1.25rem, 4vw, 3rem);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--color-line);
	box-shadow: 0 0 0 4px var(--color-cream);
}

.specimen-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ── BOTÓN MENÚ MÓVIL ──────────────────────────────────
   Oculto por defecto (display: none).
   Visible solo en ≤640px.
   ────────────────────────────────────────────────────── */

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--color-line);
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.5rem 0.9rem;
	cursor: pointer;
	margin: 0 auto 1rem;
}

.nav-toggle:hover {
	border-color: var(--color-magenta);
	color: var(--color-magenta);
}


/* =========================================================
   RESPONSIVE — HEADER (≤640px)
   ========================================================= */

@media (max-width: 640px) {

	/* Ocultar la foto circular (no cabe) */
	.specimen-photo {
		display: none;
	}

	/* Mostrar el botón hamburguesa */
	.nav-toggle {
		display: block;
	}

	/* Ocultar el menú (se muestra con JS) */
	.specimen-nav {
		display: none;
	}

	.specimen-nav.is-open {
		display: flex;
	}

	/* Menú en columna vertical */
	.specimen-menu {
		flex-direction: column;
		gap: 0.75rem;
	}

	/* Quitar puntos separadores */
	.specimen-menu li:not(:last-child)::after {
		display: none;
	}
}


/* ── ACCESIBILIDAD: MOVIMIENTO REDUCIDO ──────────────── */

@media (prefers-reduced-motion: reduce) {
	.specimen-menu a::before {
		transition: none;
	}
}