/*
 * Balneari Caldes d'Estrac — reglas propias del tema WordPress.
 * main.css es la copia sin cambios del CSS de la web estática; aquí solo va lo que el tema añade.
 * Solo reglas del hueco del selector de idioma y la de palabras largas en <main> (tools/comparar_dom.py comprueba que
 * no haya otras).
 */

/* Palabras largas escritas por la clienta (una dirección web, un correo) en párrafos y títulos: se parten en vez de
   salirse de la pantalla en el móvil (main.css solo lo hacía en .hero__contingut; en el estático no hacía falta). Con
   «break-word» el ancho mínimo de las cajas no cambia: con los textos por defecto no se mueve nada (medido caja a caja en
   las 12 páginas de 320 a 1440 px). «anywhere» sí lo cambia (tablas de normes y serveis-i-preus, datos de la portada a
   768 px, tarjetas de allotjaments a 320 px), así que las rejillas que se ensanchan con una palabra larga llevan su
   propio arreglo en la plantilla (sostenibilitat, politica-de-privacitat, galeria). */
main{overflow-wrap:break-word}

/* Hueco del selector de idioma, con o sin GTranslate: ocupa exactamente lo mismo que el botón «CA ▾» del estático
   (.idiomes__boto: padding, gap, texto «CA» y chevron de 14 px), así el menú, los teléfonos y «Reservar» no se mueven
   en ningún ancho. El «CA» va en ::before (no está en el DOM ni lo traduce GTranslate) y es invisible. El chevron es un
   <svg> vacío de 14 px en el HTML, como el del estático: un pseudoelemento no sirve porque el <svg> se comprime (de 14 a
   0 px entre 1250 y 1200 px de ancho de ventana) y un bloque normal no. */
.idiomes--hueco,.idiomes--gtranslate{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px;padding:var(--sp-2) var(--sp-3);font-weight:500;font-size:var(--fs-small);letter-spacing:.04em}
.idiomes--hueco::before,.idiomes--gtranslate::before{content:"CA";visibility:hidden}

/* Sin GTranslate: todo invisible. */
.idiomes--hueco{visibility:hidden;pointer-events:none}

/* Con GTranslate: el widget va encima del hueco (posición absoluta sobre .idiomes, que ya es relative en main.css) y
   se ajusta a su ancho (50–64 px), sin empujar el menú ni desbordar la cabecera. En el plugin conviene un widget
   compacto (códigos de idioma o banderas): un desplegable con nombres largos se ve recortado. */
.idiomes--gtranslate>.idiomes__widget{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;min-width:0}
.idiomes--gtranslate>.idiomes__widget>*{max-width:100%}
.idiomes--gtranslate select{width:100%;max-width:100%;min-height:36px;padding:0 2px;border:1px solid var(--c-linia);border-radius:var(--r-s);background:var(--c-blanc);color:var(--c-tinta);font:inherit;letter-spacing:0}