/* ==========================================================================
   Cabecera Mersan Tours — una sola barra
   Ajusta el aspecto cambiando solo estas variables.
   ========================================================================== */
:root {
	--mh-bg: #ffffff;                                   /* fondo de la barra sólida */
	--mh-text: var(--mersan-color-text, #222);          /* texto en barra sólida */
	--mh-overlay-text: #ffffff;                         /* texto sobre la imagen de portada */
	--mh-accent: var(--mersan-color-primary, #F77F00);  /* activo y teléfono */
	--mh-pad-y: 14px;                                   /* alto de la barra */
	--mh-pad-x: clamp(16px, 3vw, 48px);                 /* margen lateral izquierdo */
	--mh-gap: clamp(16px, 2vw, 32px);                   /* separación entre bloques */
	--mh-logo-h: 60px;                                  /* alto del logo */
	--mh-menu-size: 15px;
	--mh-shadow: 0 4px 20px rgba(0, 0, 0, .12);
	--mh-speed: .3s;
}

/* --- Posición base: fuera del flujo, encima de todo --- */
#page { position: relative; }

.mersan-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--mh-bg);
	color: var(--mh-text);
}

/* En páginas interiores reservamos el hueco de la barra para que no tape el contenido */
.mersan-header-spacer { display: none; }
.mersan-header-solid .mersan-header-spacer {
	display: block;
	height: var(--mersan-header-h, 90px);
}

/* --- Portada: transparente sobre la imagen --- */
.mersan-header-overlay .mersan-header:not(.is-fixed) {
	background: transparent;
	color: var(--mh-overlay-text);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* --- Estado fijo: aparece al subir, se esconde al bajar --- */
.mersan-header.is-fixed {
	position: fixed;
	transform: translateY(-100%);
	box-shadow: var(--mh-shadow);
}
.mersan-header.is-fixed.is-animated { transition: transform var(--mh-speed) ease; }
.mersan-header.is-fixed.is-shown { transform: translateY(0); }

body.admin-bar .mersan-header.is-fixed { top: 32px; }
@media (max-width: 782px) { body.admin-bar .mersan-header.is-fixed { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .mersan-header.is-fixed { top: 0; } }

/* --- Distribución: logo | menú | teléfono --- */
.mersan-header__inner {
	display: flex;
	align-items: center;
	gap: var(--mh-gap);
	padding: 0 var(--mh-pad-x);
	min-height: calc(var(--mh-logo-h) + var(--mh-pad-y) * 2);
}

/* Logo */
.mersan-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	padding: var(--mh-pad-y) 0;
	margin: 0;
}
.mersan-header .custom-logo { max-height: var(--mh-logo-h); width: auto; display: block; }
.mersan-header .site-title { margin: 0; font-size: 22px; line-height: 1.1; }
.mersan-header .site-title a { color: inherit; text-decoration: none; }
.mersan-header .site-description { margin: 2px 0 0; font-size: 12px; opacity: .8; }

/* Menú: ocupa el espacio entre logo y teléfono, elementos repartidos */
.mersan-header__nav { flex: 1; min-width: 0; float: none; margin: 0; padding: 0; }
.mersan-header__nav #primary-menu {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mersan-header__nav #primary-menu > li { float: none; margin: 0; padding: 0; position: relative; }
.mersan-header__nav #primary-menu > li > a {
	display: block;
	padding: 8px 4px;
	color: inherit;
	font-size: var(--mh-menu-size);
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	text-decoration: none;
}
.mersan-header__nav #primary-menu > li > a:hover,
.mersan-header__nav #primary-menu > li.current-menu-item > a { color: var(--mh-accent); }

/* Teléfono */
.mersan-header__phone {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	color: inherit;
	text-decoration: none;
	line-height: 1.2;
}
.mersan-header__phone .fa-phone,
.mersan-header__phone svg { color: var(--mh-accent); font-size: 18px; }
.mersan-header__phone-text { display: flex; flex-direction: column; text-align: right; }
.mersan-header__phone .phone-label { font-size: 12px; opacity: .8; }
.mersan-header__phone .phone { font-size: 20px; font-weight: 600; color: var(--mh-accent); }
.mersan-header-overlay .mersan-header:not(.is-fixed) .mersan-header__phone .phone { color: inherit; }

/* Menú móvil oculto en escritorio */
.mersan-header__mobile { display: none; }
.mersan-header #primary-toggle-button {
	background: none;
	border: 0;
	color: inherit;
	font-size: 22px;
	padding: 8px;
	cursor: pointer;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
	.mersan-header__phone .phone-label { display: none; }
	:root { --mh-menu-size: 14px; }
}

@media (max-width: 1024px) {
	.mersan-header__nav { display: none; }
	.mersan-header__mobile { display: block; }
	.mersan-header__phone { margin-left: auto; }
	:root { --mh-logo-h: 48px; }
}

@media (max-width: 600px) {
	.mersan-header .text-logo { display: none; }
	.mersan-header__phone-text { display: none; }   /* solo icono */
	.mersan-header__phone .fa-phone,
	.mersan-header__phone svg { font-size: 22px; }
	:root { --mh-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.mersan-header.is-fixed.is-animated { transition: none; }
}