/* =====================================================================
   base.css — Resets lleugers i utilitats Passarel·la
   BRIEF-014 T1.4 (29/5/2026)

   Defineix les classes d'utilitat que la maqueta usa repetidament:
   .eyebrow, .section-title (amb <em>), .badge, .btn-primary,
   .btn-outline. Per ser usades dins de blocs Kadence via "Advanced
   Settings → Additional CSS class".

   IMPORTANT: això NO sobreescriu Kadence. Només defineix tokens nous.
   ===================================================================== */

/* ---- Tipografies ---- */
body {
  font-family: var(--passa-font-body);
  color: var(--passa-text);
}
h1, h2, h3, h4, h5, h6,
.passa-heading,
.entry-title,
.kadence-advanced-heading-wrapper h1,
.kadence-advanced-heading-wrapper h2,
.kadence-advanced-heading-wrapper h3 {
  font-family: var(--passa-font-heading);
}

/* ---- Container principal (per harmonitzar amb maqueta = 1280px) ---- */
.passa-container,
.site-container,
.content-container.site-container {
  max-width: var(--passa-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ---- .eyebrow: micro-titular abans de h2 (maqueta líneas 411, 421, 445) ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--passa-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--passa-purple);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--passa-accent);
}

/* ---- Xarxa de seguretat: paraules que no caben ----
   Cap full del tema tallava paraules llargues. Amb un correu o una adreça web
   dins d'una columna estreta al mòbil, el text sortia del contenidor i
   apareixia barra de desplaçament horitzontal a tota la pàgina.
   `break-word` només parteix quan la paraula no hi cap de cap manera, així que
   no afecta la resta del text.
   Important també de cara al client: si l'Andrea enganxa una URL llarga a
   qualsevol bloc, no li trencarà el disseny. ---- */
body,
.wp-block-group,
.wp-block-column,
p, li, h1, h2, h3, h4, td, dd, figcaption {
  overflow-wrap: break-word;
}

/* ---- .section-title: títol de secció amb <em> en morat subrayat accent ---- */
.section-title {
  font-family: var(--passa-font-heading);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--passa-ink);
  margin: 0 0 14px;
}
.section-title em {
  font-style: normal;
  color: var(--passa-purple);
}

/* ---- .badge: pill petita per a convocatòria del hero (maqueta línea 372) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--passa-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--passa-purple);
  background: rgba(76, 27, 105, .08);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.badge .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--passa-accent);
}

/* ---- .btn-primary i .btn-outline (CTAs del hero) ---- */
a.btn-primary,
a.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--passa-font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--passa-radius);
  text-decoration: none;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.btn-primary {
  background: var(--passa-purple);
  color: #fff;
}
a.btn-primary:hover {
  background: var(--passa-purple-dark);
}
a.btn-outline {
  background: transparent;
  color: var(--passa-purple);
  border-color: var(--passa-purple);
}
a.btn-outline:hover {
  background: var(--passa-purple);
  color: #fff;
}

/* =====================================================================
   Botó de marca del bloc natiu de WordPress            (31/8)
   ---------------------------------------------------------------------
   Un sol lloc per a tot el lloc. Abans això estava escrit TRES vegades
   —aquí per als enllaços, a hero.css per a la portada i a actic.css per a
   l'ACTIC— amb dos jocs de noms (btn-primary/btn-outline i
   btn-principal/btn-secundari) i valors que ja havien divergit: 13px de
   farciment i pes 700 a l'ACTIC contra 12px i 600 a la portada.

   Aquí hi ha NOMÉS la forma. Els colors venen del Personalitzador
   (Aparença → Personalitza → General → Botons), que escriu
   --global-palette-btn-bg i companyia, així que l'Andrea els pot canviar
   sense tocar codi i sense demanar-nos res.

   ⚠️ La forma no es pot posar al Personalitzador: allà el selector és
   `button, .button, .wp-block-button__link…` i toca TOTS els <button> del
   lloc — fletxes dels carrusels, filtres de cursos, botons de WooCommerce—
   que no tenen mida pròpia. Provat el 31/8: 35 botons canviats de cop.
   Per això el selector d'aquí es limita al contingut.

   ⚠️ El `:is(.entry-content, .block-editor-block-list__layout)` és a posta:
   sense el segon, a l'editor no s'hi aplica. Mateixa especificitat (0,3,0). */
:is(.entry-content, .block-editor-block-list__layout) .wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--passa-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 22px;
  border-width: 2px;
  border-style: solid;
  border-radius: var(--passa-radius);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
:is(.entry-content, .block-editor-block-list__layout) .wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  :is(.entry-content, .block-editor-block-list__layout) .wp-block-button .wp-block-button__link:hover { transform: none; }
}

/* El botó ple: la vora hi és només per igualar la caixa amb la del contorn. */
:is(.entry-content, .block-editor-block-list__layout) .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  border-color: transparent;
}

/* Estil «Contorn» del bloc natiu: l'Andrea el tria a la barra lateral i els colors
   surten del Personalitzador. El text i la vora els pinta el mateix Kadence; el fons
   no el treu de cap variable, així que el posem nosaltres —però des de la seva. */
:is(.entry-content, .block-editor-block-list__layout) .wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--global-palette-btn-out-bg);
}
:is(.entry-content, .block-editor-block-list__layout) .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--global-palette-btn-out-bg-hover);
}