/*
Theme Name: Damos en el Blanco
Theme URI: https://damosenelblanco.com
Description: Tema fill de Hello Elementor amb el Design System de Damos en el Blanco (tokens, tipografia Labil Grotesk + JetBrains Mono, components i interaccions). Construït amb Elementor V3 (Flexbox Containers) + Pro Elements + ACF + WPML.
Author: Damos en el Blanco
Author URI: https://damosenelblanco.com
Template: hello-elementor
Version: 1.0.0
Text Domain: damos-child
*/

/* -----------------------------------------------------------------------------
   Overrides que han de guanyar a Elementor (carrega l'últim de tot).
   Elementor injecta `.elementor img{height:auto}` (0,1,1) que venç les nostres
   classes (0,1,0); per al logo del header cal forçar l'alçada.
----------------------------------------------------------------------------- */
.deb-nav .deb-nav__logo,
.deb-menu .deb-menu__logo { height: 24px !important; width: auto !important; }

/* Elementor força `.elementor a{color:…}` (0,1,1) i tapa el text dels botons
   primaris (0,1,0). Pugem especificitat perquè el text fosc sobre blanc es vegi. */
.elementor a.deb-btn--primary { color: var(--accent-ink); }
.elementor a.deb-btn--secondary,
.elementor a.deb-btn--ghost { color: var(--text-strong); }
.elementor a.deb-btn { text-decoration: none; }

/* Cap element no ha de provocar scroll horitzontal — amb `clip` (no `hidden`),
   perquè `hidden` al body MATA el position:sticky del nav (liquid glass). */
html, body { overflow-x: clip; max-width: 100%; }

/* Enllaços PER CONTEXT (mai un override global — cada zona té el seu to):
   · prosa/article → blanc fort amb subratllat fi (lectura)
   · nav → muted→blanc (el component ja ho fa; assegurem specificity vs kit)
   · footer → hereta el to de cada bloc (contacte clar, meta subtil)
   · cards/CTAs → els seus components .deb-* manen */
.elementor-kit-4 .deb-prose a,
.elementor-kit-4 .deb-art__body a { color: var(--text-strong); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.elementor-kit-4 .deb-nav__link { color: var(--text-muted); }
.elementor-kit-4 .deb-nav__link:hover, .elementor-kit-4 .deb-nav__link.current-menu-item { color: var(--text-strong); }
.elementor-kit-4 .deb-foot__contact a { color: var(--text); }
.elementor-kit-4 .deb-foot__meta a { color: var(--text-subtle); }
.elementor-kit-4 .deb-foot__meta a:hover, .elementor-kit-4 .deb-foot__contact a:hover { color: var(--text-strong); }
.elementor-kit-4 a.deb-pcard, .elementor-kit-4 .deb-brow, .elementor-kit-4 .deb-id__card { color: inherit; text-decoration: none; }

/* Article: centrat i amb aire (no arrambat a l'esquerra) */
.deb-art { margin-inline: auto; }

/* El DS defineix --pm dins .deb-home; aquí les seccions van soltes dins
   d'Elementor, així que --pm ha d'existir globalment o els paddings que
   l'usen queden invàlids (=0). */
:root { --pm: var(--page-margin); }
/* Hero mòbil: força el bloc del claim a l'amplada del viewport (evita el clip per flex). */
@media (max-width: 600px) {
  .deb-home-hero__inner,
  .deb-home-hero__claim,
  .deb-home-hero__sub { max-width: calc(100vw - 40px) !important; box-sizing: border-box; }
  .deb-home-hero__claim { word-break: break-word; }
}


/* Nav flotant "liquid glass": dins d'Elementor el sticky no pot funcionar
   (el contenidor pare fa la seva alçada), així que fixed + espai al body. */
.deb-nav { position: fixed !important; top: 0; left: 0; right: 0; z-index: 90; }
body { padding-top: 76px; }
@media (max-width: 980px) { body { padding-top: 64px; } }

/* ── Fixes preQA ───────────────────────────────────────────── */
/* Mòbil: cap tag ni botó pot desbordar el viewport (sectores: tag
   "EL SEÑOR DE LOS ANILLOS…" indivisible; blog: CTA newsletter llarg). */
@media (max-width: 700px) {
  .deb-sec2__row, .deb-sec2__body { min-width: 0; }
  .deb-sec2__body .deb-tag { white-space: normal; overflow-wrap: anywhere; height: auto; min-height: 26px; text-align: left; }
  .deb-btn { max-width: 100%; white-space: normal; }
  /* Forms d'una línia (recursos, kit, newsletter): que l'input encongeixi i el botó baixi. */
  .deb-rc__form, .deb-kd__form, .deb-foot__news { flex-wrap: wrap; }
  .deb-rc__form input, .deb-kd__form input, .deb-foot__news input { min-width: 0; flex: 1 1 180px; max-width: 100%; }
}
/* Test: l'stage reservava 62vh i a la càrrega es veia com secció buida. */
.deb-test { min-height: 42vh; }
/* Ideas/blog: la graella hairline mostrava un panell buit quan l'última
   fila no era completa — dos fillers amb el fons de targeta tapen el forat. */
.deb-id__grid::before, .deb-id__grid::after { content: ""; background: var(--bg); }
.deb-id__grid::before { order: 98; }
.deb-id__grid::after { order: 99; }

/* ── Banner de cookies (damos-toolbox) amb la pell del DS ──── */
.damos-cookie-banner {
  --dcb-bg: var(--surface);
  --dcb-fg: var(--text);
  --dcb-muted: var(--text-muted);
  --dcb-border: var(--border-strong);
  --dcb-primary: var(--accent);
  --dcb-primary-fg: var(--accent-ink);
  --dcb-radius: var(--radius-md);
  --dcb-font: var(--font-mono);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
}

/* Les paraules-servei del claim són enllaços de debò (porten al single del
   servei) però es vesteixen com el text: sense subratllat del base (el seu
   underline animat és el ::after de .deb-svc) i heretant el color del claim. */
.deb-home-hero__claim a.deb-svc { color: inherit; text-decoration: none; }

/* ── Burger: coreografia d'obertura (DS interaction) ─────────── */
/* Overlay: fade + micro-lliscament; el fons puja primer, els links després. */
.deb-menu { transform: translateY(-10px); transition: opacity .38s var(--ease-standard), transform .45s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.deb-menu.open { transform: none; }
/* Links principals: entren esglaonats de baix a dalt */
.deb-menu__link { opacity: 0; transform: translateY(28px); transition: opacity .5s var(--ease-out, cubic-bezier(.22,1,.36,1)), transform .5s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.deb-menu.open .deb-menu__link { opacity: 1; transform: none; }
.deb-menu.open .deb-menu__link:nth-child(1) { transition-delay: .10s; }
.deb-menu.open .deb-menu__link:nth-child(2) { transition-delay: .16s; }
.deb-menu.open .deb-menu__link:nth-child(3) { transition-delay: .22s; }
.deb-menu.open .deb-menu__link:nth-child(4) { transition-delay: .28s; }
.deb-menu.open .deb-menu__link:nth-child(5) { transition-delay: .34s; }
.deb-menu.open .deb-menu__link:nth-child(6) { transition-delay: .40s; }
/* Secundaris i peu: arriben els últims, en bloc suau */
.deb-menu__secondary, .deb-menu__foot { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease-standard), transform .45s var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.deb-menu.open .deb-menu__secondary { opacity: 1; transform: none; transition-delay: .48s; }
.deb-menu.open .deb-menu__foot { opacity: 1; transform: none; transition-delay: .56s; }
/* Burger → X quan està obert (aria-expanded el posa deb.js) */
.deb-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.deb-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.deb-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .deb-menu, .deb-menu__link, .deb-menu__secondary, .deb-menu__foot { transition: none !important; transform: none !important; }
  .deb-menu:not(.open) { opacity: 0; }
}

/* ── Menú obert: fora el banner de cookies (z-index 999999 > .deb-menu 60) ── */
html.deb-menuopen .damos-cookie-banner {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .2s var(--ease-standard), visibility .2s;
}

/* ── Mides tàctils (només tacte: el desktop no canvia ni un píxel) ────────── */
@media (pointer: coarse) {
  .deb-nav__burger { padding: 14px 10px; } /* 40×32 → 44×44 */
  .deb-btn--secondary, .deb-btn--ghost, .deb-btn--sm { min-height: 44px; }
  .deb-work-filters button, .deb-work-filters a,
  .deb-vtoggle button, .deb-vtoggle a { min-height: 42px; }
  .deb-vies__opt { min-height: 44px; }
  .deb-take__btns button, .deb-roba__c button,
  .deb-rc__form button, .deb-foot__news button { min-height: 44px; }
  .deb-foot__cta { min-height: 44px; }
}