/*
Theme Name:   Àrids el Català
Theme URI:    https://aridselcatala.com
Description:  Tema hijo de Hello Elementor con el sistema de diseño "Pedrera".
Author:       Àlex Baes
Template:     hello-elementor
Version:      1.10.0
Text Domain:  arids
*/

/* ==========================================================================
   SISTEMA PEDRERA — tokens
   Estos valores deben coincidir con los Colores Globales de Elementor.
   Si cambias uno aquí, cámbialo también en el panel (y al revés).
   ========================================================================== */

:root {
  /* --- Color --- */
  --ac-ground:        #E9E2D8;  /* Pols d'ocre  · fondo general           */
  --ac-surface:       #F7F3ED;  /* Calç         · tarjetas y formularios  */
  --ac-surface-2:     #DED5C8;  /* cabeceras de tabla, zonas hundidas     */
  --ac-ink:           #231C17;  /* Terra molla  · texto principal         */
  --ac-ink-2:         #574C43;  /* Grava        · texto secundario        */
  --ac-ink-3:         #6E625A;  /* Sorra        · etiquetas, metadatos    */
  --ac-line:          #CFC5B8;  /* vores y separadores                    */
  --ac-line-soft:     #DCD4C8;  /* separadores internos                   */
  --ac-accent:        #A4441F;  /* Òxid de ferro · botones, calibres      */
  --ac-accent-2:      #C4632F;  /* hover y estados activos                */
  --ac-accent-dark:   #D4763F;  /* acento SOBRE FONDO OSCURO (obligatorio)*/
  --ac-accent-soft:   #F0E2D6;  /* fondo de distintivos (marcatge CE)     */
  --ac-accent-ink:    #FBF7F2;  /* texto sobre el acento                  */

  /* --- Tipografía --- */
  --ac-font-display:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ac-font-body:     'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --ac-font-mono:     'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* --- Escala fluida (mobile-first, sin breakpoints) --- */
  --ac-step-0: clamp(1rem,     0.97rem + 0.15vw, 1.0625rem);  /* 16 → 17 */
  --ac-step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);  /* 18 → 21 */
  --ac-step-2: clamp(1.375rem, 1.20rem + 0.85vw, 1.875rem);   /* 22 → 30 */
  --ac-step-3: clamp(1.75rem,  1.35rem + 2vw,    2.75rem);    /* 28 → 44 */
  --ac-step-4: clamp(2.25rem,  1.60rem + 3.2vw,  4rem);       /* 36 → 64 */
  --ac-step-s: 0.875rem;                                      /* 14      */

  /* --- Ritmo vertical --- */
  --ac-space-section: clamp(3rem, 7vw, 5.5rem);
  --ac-space-block:   clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   BASE
   Elementor controla h1-h6 y el cuerpo desde Ajustes del sitio.
   Aquí solo va lo que Elementor no cubre.
   ========================================================================== */

body {
  background-color: var(--ac-ground);
  color: var(--ac-ink);
  font-family: var(--ac-font-body);
  font-size: var(--ac-step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ac-font-display);
  text-wrap: balance;          /* evita huérfanas en titulares */
  letter-spacing: -0.022em;
}

h1 { letter-spacing: -0.028em; }

/* Foco visible — accesibilidad. Elementor no lo pone. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 3px;
}

/* ==========================================================================
   UTILIDADES DEL SISTEMA
   ========================================================================== */

/* Cifras en columna: que 0/2 y 4000/10000 queden alineados. */
.ac-tabular,
table td.ac-num {
  font-variant-numeric: tabular-nums;
}

/* El calibre de cada material. En Archivo, no en monoespaciada:
   es un titular, no un dato de tabla. */
.ac-cal {
  font-family: var(--ac-font-display);
  color: var(--ac-accent);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* La etiqueta de arriba de cada sección: "MATERIALS", "SERVEIS"… */
.ac-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-ink-3);
}

/* Distintivo de marcatge CE */
/* --------------------------------------------------------------------------
   L'ENLLAÇ DE LA DECLARACIÓ DE PRESTACIONS

   El pinta el shortcode [dop] del plugin, amb la classe ja posada. Si la
   fitxa no té PDF no imprimeix res, així que aquests estils només es
   veuen a les fitxes que tenen documentació.
   -------------------------------------------------------------------------- */

.ac-dop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ac-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color .15s ease;
}

.ac-dop::before {
  content: '↓';
  font-weight: 700;
}

.ac-dop:hover {
  color: var(--ac-accent-2);
}

.ac-on-dark .ac-dop {
  color: var(--ac-accent-dark);
}

/* Les etiquetes que pinta el shortcode [etiquetes] del plugin. */
.ac-etiquetes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ac-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--ac-line);
  border-radius: 2px;
  color: var(--ac-ink-3);
}

.ac-tag--ce {
  background: var(--ac-accent-soft);
  border-color: transparent;
  color: var(--ac-accent);
}

/* --------------------------------------------------------------------------
   LLISTES DE DADES DINS D UN TEXT

   Dos patrons per a les pagines de Serveis. Totes dues van dins del mateix
   widget d Editor de text, a la pestanya Text, de manera que el bloc sencer
   es un sol widget: una sola classe i una sola unitat a traduir amb WPML.

   ac-calibres  etiqueta + xifra, la xifra en Archivo i taronja. Per a dades
                que el client busca: pesos, granulometries.
   ac-llista    titol + descripcio, tot en text. Per a serveis o opcions.
   -------------------------------------------------------------------------- */

.ac-calibres {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin: 0.25rem 0 1rem;
  padding: 1rem 1.15rem;
  background: var(--ac-surface);
  border-left: 2px solid var(--ac-accent);
  font-variant-numeric: tabular-nums;
}

.ac-calibres li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  margin: 0;
}

.ac-calibres strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ac-ink);
}

.ac-calibres span {
  font-family: var(--ac-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ac-accent);
}

/* La columna de dades de la pagina de Contacte. Etiqueta petita a dalt i
   valor a sota, separats per filets. El telefon va gros i en Archivo: es
   l accio mes rapida de tota la web i ha de cridar sense ser un boto. */

.ac-dades {
  list-style: none;
  display: grid;
  margin: 0.25rem 0 1.5rem;
  padding: 0;
}

.ac-dades li {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0.95rem 0;
  border-top: 1px solid var(--ac-line);
}

.ac-dades li:last-child { border-bottom: 1px solid var(--ac-line); }

.ac-dades strong {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-ink-3);
}

.ac-dades a {
  color: var(--ac-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ac-line);
  width: fit-content;
  transition: color .15s ease, border-color .15s ease;
}

.ac-dades a:hover {
  color: var(--ac-accent);
  border-bottom-color: currentColor;
}

.ac-tel {
  font-family: var(--ac-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  border-bottom: 0 !important;
  font-variant-numeric: tabular-nums;
}

.ac-llista {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  margin: 0.25rem 0 1rem;
  padding: 0;
}

.ac-llista li {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--ac-line);
}

.ac-llista strong {
  display: block;
  font-weight: 600;
  color: var(--ac-ink);
}

.ac-on-dark .ac-calibres {
  background: rgba(233, 226, 216, .06);
  border-left-color: var(--ac-accent-dark);
}

.ac-on-dark .ac-calibres span { color: var(--ac-accent-dark) !important; }

/* --------------------------------------------------------------------------
   SECCIONES OSCURAS
   Pon la clase  ac-on-dark  en el contenedor y TODO lo de dentro se
   adapta: titulares, párrafos, listas, etiquetas y enlaces.
   Así no hay que cambiar el color de cada widget a mano.
   -------------------------------------------------------------------------- */

.ac-on-dark {
  color: var(--ac-ground);
}

/* Los !important son deliberados. Elementor pinta los titulares y los
   botones desde su propio CSS, que se carga DESPUÉS del tema y con la
   misma especificidad. Sin ellos, estas reglas pierden siempre.
   Son clases de utilidad: su trabajo es ganar. */

.ac-on-dark h1,
.ac-on-dark h2,
.ac-on-dark h3,
.ac-on-dark h4,
.ac-on-dark h5,
.ac-on-dark h6,
.ac-on-dark p,
.ac-on-dark li,
.ac-on-dark .elementor-heading-title {
  color: var(--ac-ground) !important;
}

/* El acento base no llega a contraste AA sobre oscuro: se aclara solo. */
.ac-on-dark .ac-cal,
.ac-on-dark .ac-label,
.ac-on-dark .ac-label .elementor-heading-title,
.ac-on-dark a:not(.elementor-button) {
  color: var(--ac-accent-dark) !important;
}

/* --------------------------------------------------------------------------
   ANCHOS DE LECTURA
   Un titular a toda la pantalla pierde fuerza y un párrafo de 120
   caracteres por línea no se lee. Pon la clase y se acabó.
   -------------------------------------------------------------------------- */

/* El límite se aplica al texto en sí, NO al contenedor del widget.
   La unidad ch depende del tamaño de letra del elemento: en el
   contenedor del widget son 17px y saldría una columna ridícula,
   mientras que en un titular de 64px da justo lo que buscamos. */

.ac-mida-titular .elementor-heading-title { max-width: 17ch; }

.ac-mida-curta .elementor-heading-title,
.ac-mida-curta p { max-width: 32ch; }

.ac-mida .elementor-heading-title,
.ac-mida p { max-width: 48ch; }

.ac-mida-llarga .elementor-heading-title,
.ac-mida-llarga p { max-width: 65ch; }

/* Entradeta: el párrafo grande que va bajo un titular. */
.ac-entradeta,
.ac-entradeta p {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.6;
}

.ac-on-dark .ac-entradeta { opacity: .84; }

/* Cuando la etiqueta va en un widget de titular hay que alcanzar el
   elemento de dentro, no el contenedor del widget. */
.ac-label .elementor-heading-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-ink-3);
}

/* --------------------------------------------------------------------------
   BOTÓN SECUNDARIO
   El principal ya lo define Theme Style. Este es el fantasma: borde
   fino y sin fondo, para que no compita con el naranja.
   -------------------------------------------------------------------------- */

/* El contorn va amb el color del text, no amb el dels filets: --ac-line
   serveix per separar blocs i sobre l ocre no es veu com a boto. */
.ac-boto-secundari .elementor-button {
  background-color: transparent !important;
  color: var(--ac-ink) !important;
  border: 1px solid var(--ac-ink) !important;
  transition: background-color .15s ease, color .15s ease;
}

.ac-boto-secundari .elementor-button:hover {
  background-color: var(--ac-ink) !important;
  color: var(--ac-ground) !important;
}

.ac-on-dark .ac-boto-secundari .elementor-button {
  color: var(--ac-ground) !important;
  border-color: rgba(233, 226, 216, .55) !important;
}

.ac-on-dark .ac-boto-secundari .elementor-button:hover {
  background-color: var(--ac-ground) !important;
  color: var(--ac-ink) !important;
  border-color: var(--ac-ground) !important;
}

/* Tablas anchas: que scrolle la tabla, nunca la página. */
.ac-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   MÓVIL — barra fija de contacto
   El usuario está en la obra, con guantes. Llamar a un toque.
   ========================================================================== */

.ac-bar-movil {
  display: none;
}

@media (max-width: 767px) {
  .ac-bar-movil {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 999;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--ac-line);
  }

  .ac-bar-movil a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    background: var(--ac-accent);
    color: var(--ac-accent-ink);
  }

  .ac-bar-movil a + a {
    background: var(--ac-ink);
    color: var(--ac-ground);
  }

  /* Que la barra no tape el final del contenido */
  body { padding-bottom: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   FILTRES DEL CATÀLEG

   La disposició la fa Elementor amb els controls del mateix widget:
   Direcció, Ajust, Amplada de l'element, Espai entre i Alineació. I el raïl
   s'enganxa amb Avançat → Efectes de moviment → Enganxós.

   Aquí només queden els dos detalls del sistema que el widget no cobreix:
   el filet entre termes i la marca taronja del terme triat.

   Els 1024px són el punt de tauleta d'Elementor. Si allà hi tornes a posar
   Direcció: Fila, la marca passa de barra lateral a subratllat tota sola.
   ========================================================================== */

/* El rail no s'ha d'encongir. La graella de materials te min-width: auto,
   aixi que quan les 16 fitxes no caben empeny, la fila es desborda i l'unic
   element que pot cedir es el rail: la seva amplada acabaria depenent de
   quantes targetes mostri el filtre.

   L'!important hi ha de ser: .e-con d'Elementor posa flex-shrink: 1 amb la
   mateixa especificitat i es carrega despres del tema. */
.ac-filtre { flex-shrink: 0 !important; }

.ac-filtre .e-filter-item { position: relative; }

/* L'!important hi ha de ser: el control de Vora del widget posa
   border-width: 0 amb la mateixa especificitat i es carrega despres. */
.ac-filtre .e-filter-item + .e-filter-item {
  border-top: 1px solid var(--ac-line-soft) !important;
}

.ac-filtre .e-filter-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--ac-accent);
  transform: translateY(-50%);
  transition: height .18s ease;
}

.ac-filtre .e-filter-item[aria-pressed="true"]::before { height: 1.15em; }

@media (max-width: 1024px) {
  .ac-filtre .e-filter-item + .e-filter-item { border-top: 0 !important; }

  .ac-filtre .e-filter-item::before {
    inset-inline: 0;
    top: auto;
    bottom: 0;
    width: auto;
    transform: none;
  }

  .ac-filtre .e-filter-item[aria-pressed="true"]::before { height: 2px; }
}