/*
Theme Name:   ReserVan — Bricks Child
Theme URI:    https://reservan.es/
Description:  Tema hijo de Bricks para ReserVan. Personalizaciones: hreflang x-default (Polylang), seguridad (xmlrpc), tokens de diseño y fuentes locales. No editar el tema padre.
Author:       ReserVan
Template:     bricks
Version:      0.2.0
Text Domain:  bricks-child
*/

/*
 * Estilos personalizados del tema hijo.
 * Los tokens de diseño (colores, tipografía, espaciado) se gestionan en
 * Bricks > Style Manager. Este archivo queda para overrides puntuales
 * que Bricks no cubra.
 */

/* ===========================================================================
 * Correcciones sobre la revisión del cliente (2026-08-04, Carlos)
 * ---------------------------------------------------------------------------
 * 1) Tamaño de texto: Bricks fija el tamaño de fuente raíz en 10px (patrón
 *    62,5%). La maqueta está diseñada en rem sobre 16px, así que todo se veía
 *    a un 62,5% de su tamaño. Se restaura el raíz a 16px para que la tipografía
 *    de la maqueta rinda al tamaño previsto (1rem = 16px). !important porque el
 *    ajuste de Bricks se inyecta después de la hoja del tema.
 * =========================================================================== */
html {
	font-size: 100% !important; /* 16px */
}

/* ---------------------------------------------------------------------------
 * 2) Contraste del logo en la cabecera: la cabecera oscura era translúcida
 *    (96%), así que la imagen del hero se transparentaba y el fondo bajo el
 *    logo no coincidía con el resto de la cabecera. Se deja totalmente opaca.
 * --------------------------------------------------------------------------- */
.site-header--dark {
	background: var(--rv-prussian, #003153);
	backdrop-filter: none;
}

/* ---------------------------------------------------------------------------
 * 3) Cabecera: al restaurar el raíz a 16px, la barra de navegación (logo + 7
 *    enlaces + ES/EN + 2 CTAs) no cabía en una línea y se partía. Se compacta
 *    la navegación (tamaño y separaciones) para que quepa a partir de ~1200px,
 *    manteniendo el texto de contenido a tamaño completo. La navegación un poco
 *    menor que el cuerpo es una convención tipográfica habitual.
 * --------------------------------------------------------------------------- */
.header-inner { gap: var(--rv-space-3); }
.main-nav ul { gap: 1.15rem; }
.main-nav a { font-size: 0.9375rem; white-space: nowrap; }
.header-actions { gap: var(--rv-space-3); }
.header-actions .btn { font-size: 0.9375rem; padding: 0.5rem 0.9rem; white-space: nowrap; }
.lang-switch a { font-size: 0.8125rem; }

/* ---------------------------------------------------------------------------
 * 1b) Logo de la cabecera: el contenedor flex lo estaba comprimiendo a ~38px
 *     de ancho (debía medir ~200px). Al aplastarse, el SVG se distorsionaba y
 *     asomaba su lienzo de fondo — ese era el "fondo distinto" que se veía.
 *     Se fija el ancho natural y se evita que el flex lo encoja o lo deforme.
 *     SOLO EN ESCRITORIO (min-width:768px): sin este límite, esta regla (dos
 *     clases, más específica que el `.logo-img` a secas de maqueta.css) ganaba
 *     también en móvil y anulaba el encogimiento a ~30-32px previsto ahí,
 *     dejando el logo a 202px de ancho en un viewport de 390px — eso empujaba
 *     el conmutador de idioma, el botón de WhatsApp y el propio botón de menú
 *     fuera del viewport (invisibles, sin scroll por `overflow-x:clip`). Carlos,
 *     2026-08-05 (bloqueante): "en la versión móvil no se visualiza el menú de
 *     navegación" — confirmado por iPhone 14: el botón de menú existía en el DOM
 *     pero renderizaba fuera de la pantalla.
 * --------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.site-header .logo { flex-shrink: 0; }
	.site-header .logo-img {
		height: 36px;
		width: auto;
		max-width: none;
		flex-shrink: 0;
		object-fit: contain;
	}
}

/* ---------------------------------------------------------------------------
 * 4) CTAs de sección (revisión de Carlos, 2026-08-04): los grupos de botones
 *    que cierran una sección (flota, cómo funciona) quedaban pegados y alineados
 *    a la izquierda, con lo que parecían "colgar" de la primera columna en vez de
 *    ser una llamada a la acción de toda la sección. En la conversión, además, se
 *    perdió su margen superior. Se centran y se les devuelve el aire.
 *    Los CTAs del hero y del bloque final NO se ven afectados (van en otros
 *    contenedores, no como hijos directos de .container).
 * --------------------------------------------------------------------------- */
.container > .btn-group {
	margin-top: var(--rv-space-6);
	justify-content: center;
}

/* Se restauran también estilos en línea que la conversión no conservó */
.pillar-ico { color: var(--rv-champagne); }

/* ---------------------------------------------------------------------------
 * 5) Barra fija móvil (.sticky-bar) tapa el CTA de WhatsApp del hero en pantallas
 *    bajas: en la maqueta un <script> por IntersectionObserver la ocultaba según
 *    el scroll (mirando #presupuesto/#cta-final/footer/banner de cookies), pero
 *    el conversor descarta <script> del origen (solo traduce estructura), así
 *    que en el sitio construido la barra queda siempre visible y, en viewports
 *    de poca altura, se solapa con el botón de WhatsApp del propio hero.
 *    Carlos, 2026-08-04: "Iconos se sobreponen al texto".
 *    Mitigación CSS: ocultar la barra en viewports bajos (donde se da el
 *    choque) y dar al CTA del hero un margen inferior de seguridad en todo
 *    móvil. 17/09/2026: el comportamiento de la maqueta vuelve con un script
 *    propio del tema (assets/rv-sticky-bar.js); esta regla se mantiene como red
 *    de seguridad para pantallas muy bajas.
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) and (max-height: 700px) {
	.sticky-bar { display: none !important; }
}
@media (max-width: 767px) {
	.hero .btn-group,
	.hero--split .btn-group {
		margin-bottom: calc(var(--rv-space-3) + 76px);
	}
}

/* ---------------------------------------------------------------------------
 * 6) Cabecera fija durante la navegación: la maqueta pone `position:sticky` en
 *    `.site-header`, pero ese elemento es un DESCENDIENTE de `#brx-header`, que
 *    es el hijo flex directo de `<body>` (Bricks pone `body{display:flex;
 *    flex-direction:column}` para poder anclar el pie abajo). Comprobado en el
 *    propio navegador: aplicar sticky a `.site-header` no ancla nada (se
 *    desplaza 1:1 con el scroll); aplicarlo al envoltorio `#brx-header` sí
 *    funciona. Carlos, 2026-08-04 (xlsx HOME-01): "comportamiento fijo header
 *    sticky, para que el menú sea visible durante la navegación".
 * --------------------------------------------------------------------------- */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 900;
	/* Sin fondo propio, `#brx-header` era transparente (el color navy vive en
	 * `.site-header`, su hijo). Carlos, 2026-08-05: "se observa una línea o
	 * franja blanca sobre el logo" en iPhone 14 — no reproducible en Chromium
	 * (WebKit no se pudo instalar en este entorno para confirmar visualmente,
	 * ver nota en 08_client_comms), pero es la firma clásica de un fallo de
	 * Safari con `position:sticky`: un margen de redondeo de subpíxel entre el
	 * envoltorio con scroll y su hijo puede dejar ver, por una fracción de
	 * píxel, el fondo de `<body>` (marfil `--rv-ivory`, no blanco puro, pero
	 * se percibe como "blanco") justo en el borde superior — donde está el
	 * logo. Se iguala el fondo del envoltorio al de la cabecera para que, si
	 * ese hueco existe, muestre navy en vez de marfil.
	 */
	background: var(--rv-prussian, #003153);
}

/* ---------------------------------------------------------------------------
 * 7) Proporción del logo en móvil: a 30px de alto quedaba muy pequeño junto a
 *    los botones ES/EN y WhatsApp, que miden 44px. Carlos, 2026-08-05: "la
 *    proporción de tamaños de logo vs (ES/EN) y Whatsapp debe corregirse".
 *    Se sube a 38px (más cerca del tamaño de esos botones, sin llegar a
 *    igualarlo — sigue siendo el elemento secundario del grupo) y se fuerza
 *    `object-fit:contain` en todos los anchos: en móvil ningún otro selector
 *    lo fijaba, así que el navegador usaba el valor inicial (`fill`), que
 *    ESTIRA el gráfico para rellenar la caja en vez de conservar su
 *    proporción real — con `width:auto` normalmente no se nota, pero al
 *    encogerse por flex junto a los otros botones sí podía deformarse.
 *    Probado en el propio sitio a 390px tras el cambio: cabecera sin
 *    desbordamiento, botón de menú dentro del viewport.
 * --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.site-header .logo-img {
		height: 38px;
		object-fit: contain;
	}
}

/* ---------------------------------------------------------------------------
 * 8) Botón "Continuar por WhatsApp" del mensaje de éxito del formulario.
 *    Antes heredaba `.btn-wa`, que es el estilo fantasma para fondos OSCUROS
 *    (texto y borde en marfil). El mensaje de éxito de Forminator tiene fondo
 *    verde menta muy claro, así que el botón salía marfil sobre casi blanco:
 *    prácticamente ilegible. Carlos, 2026-09-12 (feedback del cliente de la
 *    Fase 1): "revisar colores de contraste del botón Continuar por WhatsApp".
 *    Es el mismo tipo de fallo que tuvo el botón de WhatsApp de la cabecera:
 *    un estilo pensado para una superficie aplicado sobre otra.
 *    Ahora lleva relleno azul prusia con texto marfil (contraste ~12,6:1, AAA)
 *    y no depende de la superficie donde se inyecte.
 * --------------------------------------------------------------------------- */
.rv-wa-after {
	margin-top: var(--rv-space-3, 1rem);
	margin-bottom: 0;
}
.rv-wa-continue.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--rv-prussian, #003153);
	color: var(--rv-ivory, #FAF8F5);
	border: 1px solid var(--rv-prussian, #003153);
	text-decoration: none;
}
.rv-wa-continue.btn:hover,
.rv-wa-continue.btn:focus {
	background: #00253f;
	border-color: #00253f;
	color: var(--rv-ivory, #FAF8F5);
}


/* ---------------------------------------------------------------------------
 * 9) Elección visible del tipo de servicio (assets/rv-form-intent.js).
 *    Hoja "Chofer privado V2" (17/09/2026), HOUR-01B: "Selección inicial visible:
 *    Chófer por horas · Excursión o viaje privado". Son radios nativos (teclado y
 *    lectores de pantalla sin trabajo extra) con aspecto de botón; manejan el
 *    desplegable original de Forminator, que queda oculto pero es el que se envía.
 * --------------------------------------------------------------------------- */
.rv-intent-collapsed > .forminator-label,
.rv-intent-collapsed > select,
.rv-intent-collapsed > .select2 {
	display: none !important;
}
.rv-intent-choice {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.rv-intent-legend {
	padding: 0;
	margin-bottom: var(--rv-space-2, 0.5rem);
	font-weight: 600;
	color: var(--rv-prussian, #003153);
}
.rv-intent-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--rv-space-2, 0.5rem);
}
/* Modalidades de Parque Warner (13/10/2026): tres botones cortos que deben quedar en una
   sola fila dentro de la columna del formulario, como en el mockup. Con el mínimo de
   150px de arriba, «Ida y vuelta» se iba a una segunda línea. */
.rv-mode-choice .rv-intent-options { grid-template-columns: repeat(3, 1fr); }
.rv-mode-choice .rv-intent-option { padding-inline: var(--rv-space-2, 0.5rem); text-align: center; }
@media (max-width: 479px) {
	.rv-mode-choice .rv-intent-options { grid-template-columns: 1fr; }
}
.rv-intent-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.rv-intent-option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--rv-prussian, #003153);
	border-radius: var(--rv-radius, 4px);
	background: #fff;
	color: var(--rv-prussian, #003153);
	font-weight: 600;
	text-align: center;
	line-height: 1.25;
	cursor: pointer;
}
.rv-intent-input:checked + .rv-intent-option {
	background: var(--rv-prussian, #003153);
	color: var(--rv-ivory, #FAF8F5);
}
.rv-intent-input:focus-visible + .rv-intent-option {
	outline: 3px solid var(--rv-copper, #B87333);
	outline-offset: 2px;
}
.rv-intent-other {
	margin-top: var(--rv-space-2, 0.5rem);
	padding: 0.25rem 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.875rem;
	color: var(--rv-prussian, #003153);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 10) Lista sugerida de direcciones en Origen y Destino
 *     (assets/rv-address-suggest.js). Carlos 2026-09-17: "Google Places: Ok,
 *     lista sugerida y evaluamos API posteriormente".
 * --------------------------------------------------------------------------- */
.rv-suggest {
	position: relative;
}
.rv-suggest-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 320px;
	overflow-y: auto;
	margin-top: 4px;
	background: #fff;
	border: 1px solid var(--rv-border-subtle, rgba(122, 131, 138, 0.35));
	border-radius: var(--rv-radius, 4px);
	box-shadow: 0 12px 28px rgba(0, 49, 83, 0.18);
	text-align: left;
}
.rv-suggest-list[hidden] {
	display: none;
}
.rv-suggest-group {
	padding: 0.5rem 0.75rem 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rv-secondary, #5A636B);
}
.rv-suggest-option {
	display: flex;
	flex-direction: column;
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	line-height: 1.3;
}
.rv-suggest-option:hover,
.rv-suggest-option[aria-selected="true"] {
	background: rgba(0, 49, 83, 0.07);
}
.rv-suggest-option[aria-selected="true"] {
	box-shadow: inset 3px 0 0 var(--rv-prussian, #003153);
}
.rv-suggest-name {
	color: var(--rv-prussian, #003153);
	font-weight: 600;
	font-size: 0.9375rem;
}
.rv-suggest-detail {
	color: var(--rv-secondary, #5A636B);
	font-size: 0.8125rem;
}

/* --- Hora de recogida: las dos listas, lado a lado también en móvil ----------
   Pedido por el cliente el 06/11/2026 («para seleccionar la hora que esté en
   horizontal»).

   Hay DOS filas anidadas: la de fuera reparte «Fecha» y «Hora», y dentro de la
   de «Hora» hay otra con las horas y los minutos. La regla va sólo a la de
   dentro: si se aplica también a la de fuera, el ancho se parte dos veces y los
   desplegables se quedan en 70 px con el texto recortado («S..»).

   El !important no es pereza: la hoja de Forminator se carga después que la del
   tema y fija `flex-wrap: wrap` en todas las filas. */
@media (max-width: 782px) {
	.forminator-ui .forminator-timepicker > .forminator-row {
		display: flex;
		flex-wrap: nowrap !important;
		gap: var(--rv-space-2, .5rem);
	}
	.forminator-ui .forminator-timepicker > .forminator-row > .forminator-col {
		flex: 1 1 50% !important;
		max-width: 50% !important;
		min-width: 0;
	}
	.forminator-ui .forminator-timepicker .select2-container {
		width: 100% !important;
	}
}