/*
 * Plantilla de serveis 2026 (page-templates/services-page.php amb el camp ACF
 * "plantilla_2026" actiu - /consultoria, /agencia).
 *
 * FIX targetes de #services invisibles: css/Legacy_new-child-theme.css exclou
 * el contingut de les targetes dels colors de text del gradient "bluetowhite"
 * amb ":not(.card p)" (i h1/a/span equivalents), pero el minificador va
 * menjar-se l'espai descendant dins del :not() al generar
 * Legacy_new-child-theme.min.css - el fitxer que realment es carrega
 * (functions.php, theme_enqueue_styles(), $suffix = '.min') - deixant
 * ":not(.cardp)", una classe que no existeix. Resultat: quan el JS
 * d'ungradient afegeix body.ungradient (scroll > 160px),
 * "body.ungradient .bluetowhite p" aplica color #2C2C44 !important TAMBE als
 * <p> de dins les targetes, que tenen exactament aquest mateix
 * background-color -> text invisible. El mateix selector trencat fa que,
 * abans de l'scroll, els <p> de les targetes rebin #FCFFE6 !important, que en
 * l'estat :hover de la targeta (fons #DEF561 llima) tampoc es llegeix.
 *
 * Els fitxers Legacy_* son de nomes-lectura (acord del roadmap de refactor),
 * aixi que el fix es un override aqui: "color: inherit" retorna el text de les
 * targetes a la cascada que ja era la intencionada (hereten de .card: #F9F8F1
 * sobre fosc, #2C2C44 sobre llima en :hover), en comptes de fixar un color a
 * ma que tornaria a trencar el :hover. Els selectors dupliquen expressament
 * l'especificitat dels trencats del min ((0,3,2) amb body.ungradient, (0,2,1)
 * sense) i porten el mateix !important: empaten i guanyen per ordre de
 * carrega (aquest fitxer s'encua despres de 'child-understrap-styles' via
 * matteria_custom_components_assets()) - mateixa tecnica documentada a
 * navbar.css/hero.css.
 */

.bluetowhite .card h1,
.bluetowhite .card p,
.bluetowhite .card a,
.bluetowhite .card span,
body.ungradient .bluetowhite .card h1,
body.ungradient .bluetowhite .card p,
body.ungradient .bluetowhite .card a,
body.ungradient .bluetowhite .card span {
  color: inherit !important;
}

/*
 * Gradient personalitzat amb color pickers (.custom-gradient).
 *
 * services-page.php imprimeix aquesta classe (en lloc de les legacy
 * .bluetowhite/.greentowhite) quan la pagina te color als camps ACF
 * "bg_gradient_color"/"bg_gradient_color_end", juntament amb quatre
 * variables CSS en linia:
 *   --custom-bg-color      color d'INICI triat a l'editor (dalt)
 *   --custom-bg-color-end  color de FI (baix; = inici si nomes n'hi ha un)
 *   --custom-fg-color      color de text (crema o tinta) calculat per
 *                          luminancia del color d'inici a la plantilla
 *   --custom-fg-color-end  idem per al color de fi
 *
 * El linear-gradient() es compon AQUI a partir de les variables (no ve fet
 * de PHP): la capcalera (#presentation.plantilla-2026-header) pinta el
 * degradat inici->fi, i les seccions seguents (#resume, #services) continuen
 * solides amb el color de FI perque el degradat hi desemboqui sense tall.
 *
 * L'efecte "scroll to white" es el mateix de sempre - js/ungradient-scroll.js
 * afegeix body.ungradient a partir de 160px - pero un background-image no es
 * pot transicionar: per aixo els dos colors del degradat viuen en propietats
 * registrades amb @property (syntax <color>), que SI son animables, i
 * l'ungradient les porta totes dues a blanc. On @property no existeixi, el
 * degradat es pinta igual i nomes el fos passa a ser un canvi instantani.
 * Les durades (3s fons / 1.2s text) es mantenen identiques a les del bloc
 * "gradients 2026" legacy perque les pagines velles (fallback bluetowhite) i
 * les noves es comportin igual.
 *
 * --matteria-section-fg es el color de text efectiu de cada seccio (el del
 * color de fons que hi ha sota: inici a la capcalera, fi a la resta); les
 * regles de text de sota consumeixen sempre aquesta indireccio.
 */

@property --matteria-grad-start {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

@property --matteria-grad-end {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

.custom-gradient {
  --matteria-section-fg: var(--custom-fg-color-end, var(--custom-fg-color));
  background-color: var(--custom-bg-color-end, var(--custom-bg-color)) !important;
  transition: background-color 3s ease;
}

.custom-gradient.plantilla-2026-header {
  --matteria-section-fg: var(--custom-fg-color);
  --matteria-grad-start: var(--custom-bg-color);
  --matteria-grad-end: var(--custom-bg-color-end, var(--custom-bg-color));
  background-image: linear-gradient(180deg, var(--matteria-grad-start), var(--matteria-grad-end));
  transition: background-color 3s ease, --matteria-grad-start 3s ease, --matteria-grad-end 3s ease;
}

body.ungradient .custom-gradient {
  background-color: #ffffff !important;
  transition: background-color 3s ease;
}

/* La regla d'ungradient de sobre (0,2,1) guanya a la de la capcalera (0,2,0)
   i el seu "transition: background-color" per si sol ESBORRARIA la transicio
   dels colors del degradat - el fos saltaria a blanc de cop. Es redeclara
   aqui la llista sencera. */
body.ungradient .custom-gradient.plantilla-2026-header {
  --matteria-grad-start: #ffffff;
  --matteria-grad-end: #ffffff;
  transition: background-color 3s ease, --matteria-grad-start 3s ease, --matteria-grad-end 3s ease;
}

/* Text de les seccions (les targetes de #services en queden fora - regla
   d'exclusio mes avall). h2/h3 tambe: el titol "Els nostres serveis" viu
   dins de #services i ha de contrastar amb el color triat. */
.custom-gradient h1,
.custom-gradient h2,
.custom-gradient h3,
.custom-gradient p,
.custom-gradient a,
.custom-gradient span {
  color: var(--matteria-section-fg);
  transition: color 1.2s ease;
}

body.ungradient .custom-gradient h1,
body.ungradient .custom-gradient h2,
body.ungradient .custom-gradient h3,
body.ungradient .custom-gradient p,
body.ungradient .custom-gradient a,
body.ungradient .custom-gradient span {
  color: #2C2C44;
  transition: color 1.2s ease;
}

/* L'enllac "Descobreix..." de #presentation: el legacy el fixa a #2C2C44 amb
   mes especificitat ((1,3,1), ~linia 48332) - es replica la cadena amb la
   classe extra perque el color del picker guanyi mentre el fons es el color
   triat, i torni a tinta amb l'ungradient. */
.plantilla-2026.page-template-services-page #presentation.custom-gradient a {
  color: var(--matteria-section-fg);
}

body.ungradient.plantilla-2026.page-template-services-page #presentation.custom-gradient a {
  color: #2C2C44;
}

/* Divisoria de l'h1 (nomes visible en mobil; el legacy la fixa amb
   !important per a .bluetowhite, mateix patro aqui). */
.page-template-services-page #presentation.custom-gradient .inner-presentation-content h1::after {
  background-color: var(--matteria-section-fg) !important;
}

body.ungradient .page-template-services-page #presentation.custom-gradient .inner-presentation-content h1::after,
body.ungradient #presentation.custom-gradient .inner-presentation-content h1::after {
  background-color: #2C2C44 !important;
}

/* Hover de les targetes de #services amb el color triat a l'editor: el legacy
   fixa llima #DEF561 (min.css, (1,4,0), nomes >=992px), pero quan la pagina
   te color als pickers el hover ha de ser AQUEST color - i si es un degradat,
   el color de BAIX (--custom-bg-color-end, que ja val = inici quan nomes n'hi
   ha un). El text agafa --custom-fg-color-end, el crema/tinta calculat per
   luminancia a la plantilla, i els fills l'hereten via la regla d'exclusio
   "color: inherit" de sota. La classe .custom-gradient afegida al selector
   puja l'especificitat a (1,5,0) i guanya el legacy sense !important. Les
   pagines velles (fallback bluetowhite/greentowhite, sense picker) conserven
   la llima: el seu color "de baix" es el blanc del fos i deixaria la targeta
   invisible en hover. */
@media screen and (min-width: 992px) {
  .page-template-services-page #services.custom-gradient .content .card:hover {
    background-color: var(--custom-bg-color-end, var(--custom-bg-color));
    color: var(--custom-fg-color-end, var(--custom-fg-color));
  }
}

/* Mateixa exclusio de targetes que el bloc .bluetowhite de dalt: el
   contingut de les .card de #services mante la seva propia cascada
   (crema sobre fosc, tinta sobre llima en :hover). h3 inclos: es l'etiqueta
   del titol de cada targeta. */
.custom-gradient .card h1,
.custom-gradient .card h3,
.custom-gradient .card p,
.custom-gradient .card a,
.custom-gradient .card span,
body.ungradient .custom-gradient .card h1,
body.ungradient .custom-gradient .card h3,
body.ungradient .custom-gradient .card p,
body.ungradient .custom-gradient .card a,
body.ungradient .custom-gradient .card span {
  color: inherit !important;
}