/* Huertech · Encabezado dinámico. Se carga solo en el front-end.
   Todo se ajusta con las variables --hq-* (tamaños, relleno, duración). */

:root {
	--hq-logo-lg: 120px;  /* ancho del logotipo arriba */
	--hq-logo-sm: 70px;   /* ancho del logotipo al desplazarse */
	--hq-pad-lg: 12px;    /* relleno vertical del encabezado arriba */
	--hq-pad-sm: 8px;     /* relleno vertical al desplazarse */
	--hq-ratio: 1;        /* alto/ancho del logotipo; lo calcula el plugin */
	--hq-time: 300ms;
	--hq-ease: ease;
}

@media (max-width: 781px) {
	:root {
		--hq-logo-lg: 64px;
		--hq-logo-sm: 44px;
		--hq-pad-lg: 10px;
		--hq-pad-sm: 6px;
	}
}

/* Contenedor <header> de la parte de plantilla: reserva en la página el alto del encabezado grande. */
.huertech-header-wrap {
	min-height: calc(var(--hq-logo-lg) * var(--hq-ratio) + var(--hq-pad-lg) * 2);
}

/* Encabezado fijo. Al estar fuera del flujo, cambiar su tamaño no mueve el contenido. */
.huertech-header.huertech-header {
	position: fixed;
	top: var(--hq-top, 0px); /* el JS lo ajusta a la barra de administración */
	left: 0;
	right: 0;
	z-index: 999;
	margin: 0;
	padding-top: var(--hq-pad-lg);
	padding-bottom: var(--hq-pad-lg);
}

body.admin-bar .huertech-header { --hq-top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .huertech-header { --hq-top: 46px; }
}

.huertech-header .huertech-logo img {
	display: block;
	width: var(--hq-logo-lg);
	height: auto;
	max-width: none;
}

/* Estado desplazado */
.huertech-header.is-compact {
	padding-top: var(--hq-pad-sm);
	padding-bottom: var(--hq-pad-sm);
	box-shadow: 0 1px 6px rgba(38, 50, 56, 0.12);
}

.huertech-header.is-compact .huertech-logo img {
	width: var(--hq-logo-sm);
}

/* Transiciones: se activan tras el primer cálculo para que la carga no anime. */
.huertech-header.is-ready {
	transition: padding var(--hq-time) var(--hq-ease), box-shadow var(--hq-time) var(--hq-ease);
}

.huertech-header.is-ready .huertech-logo img {
	transition: width var(--hq-time) var(--hq-ease);
}

@media (prefers-reduced-motion: reduce) {
	.huertech-header.is-ready,
	.huertech-header.is-ready .huertech-logo img {
		transition: none;
	}
}

/* En pantallas pequeñas el eslogan se oculta para que el encabezado quepa en una sola línea. */
@media (max-width: 599px) {
	.huertech-header .huertech-header__tagline {
		display: none;
	}
}

/* Los enlaces internos (#ancla) no deben quedar tapados por el encabezado fijo. */
html:has(.huertech-header) {
	scroll-padding-top: calc(var(--hq-logo-sm) * var(--hq-ratio) + var(--hq-pad-sm) * 2 + 16px);
}

html:has(body.admin-bar .huertech-header) {
	scroll-padding-top: calc(var(--hq-logo-sm) * var(--hq-ratio) + var(--hq-pad-sm) * 2 + 16px + 32px);
}

@media (max-width: 782px) {
	html:has(body.admin-bar .huertech-header) {
		scroll-padding-top: calc(var(--hq-logo-sm) * var(--hq-ratio) + var(--hq-pad-sm) * 2 + 16px + 46px);
	}
}

@media (max-width: 600px) {
	/* En móvil la barra de administración se desplaza con la página. */
	html:has(body.admin-bar .huertech-header) {
		scroll-padding-top: calc(var(--hq-logo-sm) * var(--hq-ratio) + var(--hq-pad-sm) * 2 + 16px);
	}
}