/*
 * Lo minimo que anade Astro al cuerpo de las paginas.
 *
 * Solo la superficie del formulario propio de Obrescat, que sustituye al widget
 * de formulario de Elementor. No hay nada mas: el resto del CSS de las paginas
 * es copia literal de produccion.
 */

.ob-form-embed {
  width: 100%;
}

.ob-form-embed iframe {
  display: block;
  width: 100%;
  border: none;
  border-radius: 16px;
}

/*
 * Titulo del tema degradado de <h1> a <p>.
 *
 * En 29 paginas CA/EN el tema imprimia su titulo como <h1> y la pagina traia
 * ademas su propio <h1>: dos H1 en el mismo documento. Por decision de Aron se
 * corrige dejando uno solo -DUPLICATE_H1_THEME_PAGE_TITLE, ver
 * docs/migration/30-correcciones-deliberadas.md-, y el que se degrada es el del
 * tema, que es un accidente de plantilla.
 *
 * Aqui se le devuelve la tipografia que tenia como h1, para que el cambio de
 * etiqueta no cambie nada de lo que se ve. Los valores no son inventados: son
 * los computados en produccion sobre https://obrescat.es/en/renovations-barcelona/les-corts/
 *   font-size 30px y font-weight 600   <- .elementor-kit-6 h1  (kit.css)
 *   line-height 1.2 -> 36px            <- h1 de hello-elementor (base-wp.css)
 *   margin .5rem arriba y 1rem abajo   <- h1 de hello-elementor (base-wp.css)
 * Un <p> traeria en su lugar los suyos, mas pequenos y con otro margen.
 */
.page-header .ob-page-title {
  font-family: inherit;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  margin-block-start: 0.5rem;
  margin-block-end: 1rem;
}

/*
 * Encabezados del cuerpo del articulo bajados un nivel.
 *
 * Dos entradas del blog escribian los titulos de seccion como <h1>: 9 y 8, mas
 * el H1 del titulo del articulo. Por decision de Aron se corrige la jerarquia de
 * verdad -BLOG_EDITORIAL_HEADING_HIERARCHY, ver
 * docs/migration/30-correcciones-deliberadas.md-, bajando TODO el arbol un
 * nivel: h1 a h2, h2 a h3, h3 a h4. Asi cada seccion sigue siendo la madre de
 * sus subsecciones y queda un unico H1.
 *
 * Aqui se le devuelve a cada uno la tipografia que tenia con su etiqueta
 * anterior, para que cambie la semantica y no el aspecto. Los valores estan
 * medidos en produccion sobre la entrada de Badalona, y son los mismos en 1440,
 * 834 y 390: no hay variacion por ancho.
 *
 * Esto NO es tapar el problema con CSS: la etiqueta cambia de verdad, y el
 * arbol de encabezados que lee un buscador o un lector de pantalla es el nuevo.
 * Lo unico que hace el CSS es que el lector no note el cambio.
 */
/*
 * El selector lleva .elementor-kit-6 a proposito, y no por adorno: el kit trae
 *   .elementor-kit-6 h2 { font-size:25px; font-weight:700 }
 * que con una sola clase empata en especificidad y gana por orden. Con
 * .ob-heading-was-h1 a secas la regla NO se aplicaba: medido, el H2 salia a
 * 25px/700 en vez de a 30px/600. Se iguala el peso del selector del kit y se le
 * suma la clase, asi no depende del orden de las hojas.
 */
.elementor-kit-6 .ob-heading-was-h1 { font-size: 30px; font-weight: 600; }
.elementor-kit-6 .ob-heading-was-h2 { font-size: 25px; font-weight: 700; }
.elementor-kit-6 .ob-heading-was-h3 { font-size: 20px; font-weight: 500; }

.elementor-kit-6 .ob-heading-was-h1,
.elementor-kit-6 .ob-heading-was-h2,
.elementor-kit-6 .ob-heading-was-h3 {
  line-height: 1.2;
  margin-block-start: 0.5rem;
  margin-block-end: 1rem;
}

/*
 * PREEXISTING_RESPONSIVE_OVERFLOW · el salto a una columna que faltaba.
 *
 * Las fichas de servicios de los barrios usan .cols4, que baja de 4 columnas a
 * 2 por debajo de 1200px... y ahi se queda. En un movil no hay sitio para dos:
 * cada article mide 203px de min-content, mas 12 de hueco son 418, y el
 * contenedor solo tiene 347. Los 1fr no pueden encoger por debajo del contenido
 * -min-width:auto- asi que la rejilla se sale y arrastra al body:
 * 375 de viewport contra 411 de body.scrollWidth.
 *
 * El umbral esta en 446px de viewport, asi que el corte va en 480: por encima
 * no cambia absolutamente nada, y a 834 y 1440 la rejilla sigue igual.
 *
 * Se escribe aqui, en el CSS propio, y NO en la hoja de la pagina: esa es copia
 * congelada de produccion. Lleva .ob-local delante porque la regla original vive
 * en un <style> dentro del cuerpo, que en orden de documento va despues de
 * todos los <link>: con una sola clase empataria y ganaria ella.
 */
@media (max-width: 480px) {
  .ob-local .cols4 {
    grid-template-columns: 1fr;
  }
}

/*
 * Mismo caso que .cols4, otra rejilla: <ol class="steps"> se queda en dos
 * columnas en el movil (186 + 170 dentro de 347) y saca 7px. Una sola columna.
 */
@media (max-width: 480px) {
  .ob-local .steps {
    grid-template-columns: 1fr;
  }
}

/*
 * La tabla de tramites del articulo mide 441px de min-content y no hay forma de
 * que quepa en 375: una tabla no encoge por debajo de su contenido. Se le deja
 * su propia barra de desplazamiento horizontal, que es la solucion de siempre.
 *
 * No se oculta nada ni se recorta: la tabla sigue entera y se lee arrastrando.
 * Solo en movil; en tablet y escritorio cabe y no se toca.
 */
@media (max-width: 480px) {
  .theme-post-content table,
  .elementor-widget-theme-post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/*
 * Una palabra larga que no cabe, en movil.
 *
 * En /ca/reforma-locals-barcelona/ el editor de texto queda a un tamano muy
 * grande en movil: "personalitzades", quince letras normales, mide 400px en un
 * parrafo de 335. No es una palabra rara, es el cuerpo de letra.
 *
 * Bajar ese tamano SERIA cambiar el diseno, y eso no toca aqui. Lo minimo que
 * resuelve la causa sin tocar nada mas es dejar que una palabra que no cabe se
 * parta, que es justo para lo que existe overflow-wrap. No cambia el copy, ni el
 * tamano, ni afecta a ninguna palabra que ya quepa.
 */
@media (max-width: 480px) {
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor li {
    overflow-wrap: break-word;
  }
}