/* Arreglos propios sobre el CSS heredado.
   Va el último de todo, para poder corregir sin tocar sus hojas originales. */

/* --- Tablas (TablePress) ---------------------------------------------------
   Estas tablas llevan muchas columnas y NECESITAN scroll horizontal: es su
   forma de consultarse. Lo que no debe pasar es que arrastren a toda la página.
   El scroll lo pone un contenedor que envuelve la tabla; la tabla se queda
   como display:table. Ponérselo a la tabla misma desalineaba las cabeceras
   respecto a las celdas.                                                    */
.deretiro-tabla-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.deretiro-tabla-scroll .tablepress {
  margin-bottom: 0;
}

/* --- Menú desplegable en móvil --------------------------------------------
   El desplegable se salía de la pantalla por la derecha. Y como su contenedor
   se ajusta al contenido, acababa en una columna de 105px que partía las
   palabras por la mitad ("PARROQ / UIAS"): se le da un ancho de verdad y solo
   se parten las palabras que no quepan enteras.                             */
.elementor-nav-menu--dropdown {
  max-width: 100vw;
  box-sizing: border-box;
}
.elementor-nav-menu--dropdown a {
  overflow-wrap: break-word;
}
@media (max-width: 1024px) {
  [data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    width: min(300px, calc(100vw - 40px));
    align-self: flex-end;
  }
}

/* --- Salvaguarda general --------------------------------------------------
   Nada debe empujar la página a lo ancho: si algo se pasa, que haga scroll
   dentro de su caja y no arrastre a toda la web.                            */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* El mapa no debe quedar por encima de la cabecera ni del banner de cookies */
.leaflet-pane,
.leaflet-control,
.leaflet-top,
.leaflet-bottom {
  z-index: 1 !important;
}

/* --- Menú principal en una fila -------------------------------------------
   El menú son 8 entradas de texto más las banderas de las webs hermanas, la
   lupa y COLABORA. Cada web nueva añade una bandera, así que el tope del cuerpo
   de letra y del padding se han bajado para que quepan.
   A su tamaño original piden 1.570px de ancho, así que en su web el menú
   siempre parte en dos filas. Aquí se intenta que quepa todo en una:

   1. La columna del logo se llevaba el 30% del ancho (403px a 1440) para una
      imagen de 140px. Se le deja el ancho que de verdad ocupa y ese hueco pasa
      al menú. Como el menú va pegado a la derecha, en pantalla ancha no se
      mueve nada de sitio respecto al original.
   2. El cuerpo de letra y el padding se estrechan con la ventana: del original
      (15px / 20px) hasta un mínimo legible (11,5px / 4px).

   Por debajo de 1400px ya no cabe ni apurando. Subió de 1280 a 1400 al
   escribir el idioma entero («Nederlands» en vez de «NL») al lado de las
   banderas de las webs hermanas: son unos 100px más. Entonces se parte por donde
   nos interesa, con el separador .deretiro-salto que inserta lib/html.ts:
   EUROPA y SUMMER bajan a la fila de los iconos y COLABORA, en vez de dejar a
   COLABORA descolgada en una tercera fila.                                  */
body [data-elementor-type="header"] li.deretiro-salto {
  display: none;
}

@media (min-width: 1025px) {
  /* ids del header congelado de Elementor: 277775d1 = logo, 4c116a14 = menú */
  body [data-elementor-type="header"] .elementor-column.elementor-element.elementor-element-277775d1 {
    width: auto;
    flex: 0 0 auto;
  }
  body [data-elementor-type="header"] .elementor-column.elementor-element.elementor-element-4c116a14 {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* El widget del menú se declaraba al 130,899% de su columna y se salía de
     ella; con la columna ya a su aire, se ajusta a lo que hay. */
  body [data-elementor-type="header"] .elementor-element.elementor-element-34639417 {
    width: 100%;
    max-width: 100%;
    --container-widget-width: 100%;
  }
  /* La regla de Elementor que fija los 15px pesa (0,4,0): hay que igualarla. */
  body [data-elementor-type="header"] .elementor-element.elementor-element-34639417 .elementor-nav-menu .elementor-item {
    font-size: clamp(11.5px, calc(4.7px + 0.44vw), 13px);
    padding-left: clamp(4px, calc(2.2vw - 25px), 14px);
    padding-right: clamp(4px, calc(2.2vw - 25px), 14px);
  }
}

@media (min-width: 1025px) and (max-width: 1399px) {
  body [data-elementor-type="header"] li.deretiro-salto {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

/* --- Aviso de cookies ------------------------------------------------------
   Su CSS personalizado pinta TODOS los enlaces de turquesa a la fuerza
   (`a, p a { color: #79ACB2 !important }`), así que el "Atrás" del panel de
   preferencias salía turquesa sobre turquesa: invisible. Pasa igual en su web.
   La cabecera del panel lo quiere en blanco.                                 */
#qlk-cookie-setup-modal > div > span > a,
#qlk-cookie-setup-modal > div > span > a:hover {
  color: #fff !important;
  font-weight: 500 !important;
}

/* En móvil su plugin monta el panel con la cabecera y los botones fijos y la
   caja a `top:50px; bottom:400px; height:100vh`: la caja se salía de la
   pantalla y dejaba un hueco blanco enorme, con dos barras de scroll. Se
   rehace como una columna normal: cabecera, cuerpo que rueda y botones. */
@media (max-width: 480px) {
  #qlk-cookie-setup-modal > div {
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #qlk-cookie-setup-modal > div > span {
    position: static;
    flex: 0 0 auto;
  }
  #qlk-cookie-setup-modal .cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #qlk-cookie-setup-modal .cookies--btns {
    position: static;
    flex: 0 0 auto;
  }
}

/* El «no hay resultados» del buscador de retiros. La rejilla de tarjetas reparte
   a sus hijos en columnas, así que un párrafo suelto salía estrujado en un
   tercio del ancho: se le dice que ocupe la fila entera. */
#deretiro-sin-resultados {
  width: 100%;
  flex: 1 1 100%;
  grid-column: 1 / -1;
  margin: 18px 0;
  text-align: center;
  color: #6b5b4d;
}

/* Dos webs del mismo país comparten bandera (Bélgica tiene una en neerlandés y
   otra en francés), así que al lado de la bandera va el idioma. Pequeño y en el
   color del menú, para que no compita con los rótulos de las secciones. */
.deretiro-idioma {
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 3px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Encabezados

   lib/html.ts deja cada página con un solo <h1>: promueve el encabezado de las
   fichas de parroquia (que era un h4) y baja a h2 los segundos <h1> de las seis
   páginas que traían dos. Al cambiar la etiqueta se le pone la clase del nivel
   que tenía —.h1, .h4—, que el tema Bridge define con los mismos estilos.

   Lo que el tema NO ata a esas clases son los tamaños de móvil, que cuelgan
   sólo de la etiqueta. Aquí se completan, con los mismos valores del tema, para
   que el arreglo sea de marcado y no se vea en pantalla.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 1000px) {
  h1.h4 { font-size: 30px; line-height: 35px; }
  h2.h1 { font-size: 50px; line-height: 55px; }
}
@media only screen and (max-width: 600px) {
  h2.h1 { font-size: 30px; line-height: 60px; }
}

/* El titular que lib/html.ts pone en /events/, que no traía ninguno. */
.deretiro-titulo-seccion {
  text-align: center;
  margin: 40px 0 20px;
}

/* ---------------------------------------------------------------------------
   Ficha de un retiro: el encabezado que le faltaba

   Las 1.383 fichas de /events/ no tenían <h1>: su título viajaba en un <span>
   dentro de un <a>. Ahora ese span va envuelto en un <h1> que no pinta nada
   —display:contents lo saca de la caja visual— para que el CSS de EventON, que
   cuelga de `span.evcal_event_title`, siga aplicando igual.

   Y el contenedor de la tarjeta pasó de <p> a <div> por la misma razón: un
   párrafo no puede llevar dentro un encabezado. Aquí se repone lo que EventON
   sólo declaraba para `p.desc_trig_outter`.
   --------------------------------------------------------------------------- */
h1.deretiro-titulo-ficha {
  display: contents;
}

.evo_page_body .evo_sin_page #evcal_list div.desc_trig_outter {
  border-radius: 15px;
  overflow: hidden;
  border: none;
  margin: 0;
}

/* ---------- RetStay: enlace en la barra superior (junto a Instagram) y bloque en el pie ---------- */
.deretiro-retstay-item { position: relative; }
.deretiro-retstay { display: inline-flex !important; align-items: center; gap: 6px; text-decoration: none; line-height: 1; padding: 4px 0; }
.deretiro-retstay img { display: block; width: auto; height: 20px; opacity: 0.95; transition: opacity 0.2s; }
.deretiro-retstay img.deretiro-retstay__nombre { height: 15px; }
.deretiro-retstay:hover img, .deretiro-retstay:focus-visible img { opacity: 1; }
/* la mini frase que explica qué es, al pasar el ratón */
.deretiro-retstay::after {
  content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: max-content; max-width: 280px; background: #471F13; color: #fff; font: 300 12px/1.45 Roboto, sans-serif;
  padding: 8px 11px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.25); text-align: left; white-space: normal;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.deretiro-retstay::before {
  content: ""; position: absolute; top: calc(100% + 2px); right: 18px; border: 6px solid transparent; border-bottom-color: #471F13;
  opacity: 0; transition: opacity .18s ease;
}
.deretiro-retstay:hover::after, .deretiro-retstay:focus-visible::after, .deretiro-retstay:hover::before, .deretiro-retstay:focus-visible::before { opacity: 1; transform: none; }
@media (max-width: 767px) {
  .elementor-10 .elementor-element.elementor-element-dcdcf11 .elementor-icon-list-items { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
  .elementor-10 .elementor-element.elementor-element-dcdcf11 .elementor-icon-list-item { margin: 0; }
  .deretiro-retstay::after { right: auto; left: 0; }
  .deretiro-retstay::before { right: auto; left: 18px; }
}
.deretiro-retstay-pie { text-align: center; margin: 26px auto 0; max-width: 560px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.deretiro-retstay-pie__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.deretiro-retstay-pie__logo img { display: block; width: auto; height: 34px; }
.deretiro-retstay-pie__logo img:last-child { height: 26px; }
.deretiro-retstay-pie p { color: #fff; font: 300 14px/1.6 Roboto, sans-serif; margin: 12px 0 10px; }
.deretiro-retstay-pie__ir { display: inline-block; color: #fff !important; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 7px 18px; font: 400 13px/1 Roboto, sans-serif; text-decoration: none; transition: background .2s, color .2s; }
.deretiro-retstay-pie__ir:hover { background: #fff; color: #471F13 !important; }
/* el contenedor del widget recorta lo que sobresale: la mini frase de RetStay tiene que poder salir de la barra */
.elementor-10 .elementor-element.elementor-element-7dffae85 .elementor-widget-container,
.elementor-10 .elementor-element.elementor-element-dcdcf11 .elementor-widget-container,
.elementor-10 .elementor-element.elementor-element-7dffae85, .elementor-10 .elementor-element.elementor-element-dcdcf11 { overflow: visible !important; }

/* ---------- Prensa reciente (tarjetas con la imagen del artículo), en /notas-prensa/ ---------- */
.deretiro-prensa { background: #fbfaf9; padding: 60px 20px; }
.deretiro-prensa__marco { max-width: 1140px; margin: 0 auto; }
.deretiro-prensa h2 { font-family: Trirong, Georgia, serif; font-weight: 500; font-size: 30px; color: #471F13; margin: 0 0 6px; text-align: center; }
.deretiro-prensa > .deretiro-prensa__marco > p { text-align: center; color: #897C70; font: 300 15px/1.5 Roboto, sans-serif; margin: 0 0 28px; }
.deretiro-prensa__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.deretiro-noticia { position: relative; display: flex; align-items: flex-end; min-height: 250px; border-radius: 10px; overflow: hidden; background: #897C70; color: #fff; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.deretiro-noticia__foto { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.deretiro-noticia__velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(71,31,19,.9) 0%, rgba(71,31,19,.45) 55%, rgba(71,31,19,.05) 100%); }
.deretiro-noticia:hover, .deretiro-noticia:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(71,31,19,.3); }
.deretiro-noticia:hover .deretiro-noticia__foto { transform: scale(1.06); }
.deretiro-noticia__cuerpo { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.deretiro-noticia:hover .deretiro-noticia__cuerpo { transform: translateY(-4px); }
.deretiro-noticia__cuerpo { position: relative; display: grid; gap: 5px; padding: 16px 18px; }
.deretiro-noticia__medio { font: 300 12px/1.3 Roboto, sans-serif; color: #DACEC5; }
.deretiro-noticia__titulo { font: 400 17px/1.3 Roboto, sans-serif; color: #fff; }
.deretiro-noticia__ir { font: 300 13px/1.3 Roboto, sans-serif; color: #e8e0d8; }