/**
 * Roots & Routes Core — Header chrome (TASK-123, Fase A).
 *
 * Público: alinea verticalmente menú y widget de cuenta con el logo,
 * sustituye el acento rojo por defecto de Listeo por teal/crema de marca
 * SOLO dentro del header, y compacta el clon pegajoso que el tema crea
 * por JS (`#header.cloned`, activado desde HeaderChrome.php con el filtro
 * nativo `listeo_sticky_header_filter`). Dashboard: quita el "corte"
 * visual del logo sobre el sidebar gris.
 *
 * Contrato: solo overrides sobre selectores que ya existen en header.php /
 * header-dashboard.php de Listeo; sin markup, sin JS propio. Colores
 * literales = tokens de home.css (--rr-teal-deep #1b4b4a, --rr-cream
 * #faf6ec, --rr-ink #2b2420, --rr-ink-soft #6b6153, --rr-border #e8dfcc,
 * --rr-orange-dark #c94a24) escritos aquí porque este archivo carga en
 * todo el sitio, no solo dentro de `.rrc-home`.
 */

/* ---------------------------------------------------------------------
 * 1. Alineación vertical (header público, escritorio). En móvil Listeo ya
 *    centra logo, "Sign In" y hamburguesa; no se toca.
 * ------------------------------------------------------------------- */

@media (min-width: 992px) {
	#header-container:not(.dashboard) #header .container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	#header-container:not(.dashboard) #header .left-side {
		display: flex;
		align-items: center;
		gap: 28px;
		float: none;
		width: auto;
	}

	#header-container:not(.dashboard) #header .right-side {
		display: flex;
		align-items: center;
		float: none;
		margin-left: auto;
	}

	#header-container:not(.dashboard) #header #logo,
	#header-container:not(.dashboard) #header #navigation {
		float: none;
		margin: 0;
	}
}

/* ---------------------------------------------------------------------
 * 2. Acento de marca solo en el header (pills del menú y "Sign In").
 * ------------------------------------------------------------------- */

#header-container #navigation > ul > li > a {
	color: #2b2420;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}

#header-container #navigation > ul > li > a:hover,
#header-container #navigation > ul > li > a:focus-visible,
#header-container #navigation > ul > li.current-menu-item > a,
#header-container #navigation > ul > li.current_page_item > a,
#header-container #navigation > ul > li.current-menu-ancestor > a {
	background-color: #faf6ec;
	color: #1b4b4a;
}

#header-container #navigation > ul > li > a:focus-visible,
#header-container .header-widget .sign-in:focus-visible {
	outline: 3px solid #2e9c8f;
	outline-offset: 2px;
}

#header-container .header-widget .sign-in {
	background-color: transparent;
	border: 1px solid #e8dfcc;
	color: #2b2420;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

#header-container .header-widget .sign-in:hover {
	background-color: #faf6ec;
	border-color: #1b4b4a;
	color: #1b4b4a;
}

/* ---------------------------------------------------------------------
 * 3. Clon pegajoso compacto (el tema lo inserta tras 100px de scroll y le
 *    pone `pp_sticky_logo_upload`, el ícono cuadrado). ≈ 64px de alto.
 * ------------------------------------------------------------------- */

#header.cloned {
	padding: 6px 0 !important;
	background-color: rgba(255, 255, 255, 0.96);
	box-shadow: 0 2px 4px rgba(27, 75, 74, 0.06), 0 8px 24px rgba(27, 75, 74, 0.1);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
}

#header.cloned #logo img {
	max-height: 40px !important;
}

#header.cloned .container {
	min-height: 52px;
}

/* Bajo 768px una barra fija se come demasiado contenido; hasta tener
 * "sticky al subir" (Fase C), el clon no se muestra en teléfonos. */
@media (max-width: 767px) {
	#header.cloned {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#header.cloned,
	#header.cloned.sticky,
	#header-container #navigation > ul > li > a,
	#header-container .header-widget .sign-in {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------
 * 4. Header de dashboard (template-dashboard.php): el logo vive en una
 *    caja absoluta de 260-280px sobre el sidebar gris mientras el resto
 *    del header es blanco, lo que se lee como un header "cortado". Fondo
 *    blanco continuo, logo centrado y más pequeño, separación sutil.
 * ------------------------------------------------------------------- */

#header-container.dashboard #header {
	box-shadow: 0 1px 0 rgba(27, 75, 74, 0.08);
}

#header-container.dashboard #logo {
	background-color: #ffffff !important;
	display: flex !important;
	align-items: center;
}

/* Listeo imprime dos anclas en #logo (logo ancho y `a.dashboard-logo`
 * cuadrado) y decide por media query cuál mostrar; no se toca esa
 * selección, solo el centrado y el tamaño de la imagen visible. */
#header-container.dashboard #logo a {
	align-self: center;
}

#header-container.dashboard #logo img {
	max-height: 48px !important;
	top: auto !important;
	transform: none !important;
}

/* Botón de la derecha ("Browse Listings"/"Add Listing", usuario logueado):
 * del rojo por defecto de Listeo al teal profundo de marca, en ambos
 * headers. */
#header-container .right-side .button,
#header-container .right-side a.button.border-with-icon {
	border-color: #1b4b4a;
	color: #1b4b4a;
	background-color: transparent;
}

#header-container .right-side .button:hover,
#header-container .right-side a.button.border-with-icon:hover {
	background-color: #1b4b4a;
	border-color: #1b4b4a;
	color: #ffffff;
}

/* ---------------------------------------------------------------------
 * 5. TASK-148/150: dentro del dashboard (Listeo template-dashboard.php, y
 *    My Account forzado por AccountPageTemplate) el header no repite el
 *    menú público ("Home / My Bookings"): el sidebar ya es la navegación.
 *    Las migas "Home › Dashboard" junto al título tampoco aportan nada en
 *    una pantalla con sidebar y título propios.
 *
 *    TASK-148 conservaba la hamburguesa (`.mmenu-trigger`, abre el panel
 *    Home/My Bookings de `.mobile-navigation-wrapper`) en móvil a
 *    propósito, "para no perder acceso al menú del sitio". TASK-150 la
 *    quita también ahí: "Home" ya se alcanza tocando el logo y "My
 *    Bookings" ya está en el sidebar "Dashboard Navigation" — el panel no
 *    aportaba nada que no estuviera ya disponible, solo confusión (dos
 *    hamburguesas visibles a la vez con contenido casi idéntico).
 * ------------------------------------------------------------------- */
#header-container.dashboard #navigation.style-1 {
	display: none !important;
}

#header-container.dashboard .mmenu-trigger {
	display: none !important;
}

body.page-template-template-dashboard .dashboard-headline #breadcrumbs,
body.page-template-template-dashboard #breadcrumbs {
	display: none !important;
}