/**
 * Estils base del Codina Theme.
 *
 * Els tokens viuen a theme.json i arriben aquí com a custom properties
 * (--wp--preset--* i --wp--custom--*). Aquest fitxer només conté el que
 * theme.json no pot expressar.
 */

/* -------------------------------------------------------------------------
 * Reset mínim
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/*
	 * Sense el flaix gris del navegador en tocar: el feedback el dona el
	 * `:active` de cada control (vegeu «Feedback en prémer», més avall).
	 */
	-webkit-tap-highlight-color: transparent;
}

/*
 * Amb `viewport-fit=cover` (inc/setup.php) la pàgina pot passar per sota del
 * notch dels iPhone en horitzontal. El marge lateral la'n treu; a qualsevol
 * altra pantalla `env()` val 0 i no canvia res.
 *
 * ⚠️ Només `padding-inline`. Un farciment vertical a `.wp-site-blocks` aturaria
 * el col·lapse dels marges que les regles de la capçalera fan servir (més avall).
 */
.wp-site-blocks {
	padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}

/*
 * Ritme entre seccions de la Home (2026-09-29).
 *
 * Els grups de projectes i procés porten desats 96 i 128 px de marge
 * (presets `spacing|100` i `spacing|110`), fixos a qualsevol amplada: a mòbil
 * eren un forat. Aquí passen a un sol valor fluid, 64 px a 375 i 128 a 1440.
 * Els 24 px entre seccions de pantalla completa (hero, serveis, testimonis) es
 * queden: aquelles ja porten el seu aire a dins.
 *
 * ⚠️ Es fa des del CSS i no editant la pàgina #7: així la traducció #266 no
 * s'ha de tornar a passar per WPML. El `!important` és per l'estil en línia que
 * el core escriu amb el marge desat. A l'editor el control continua dient 96 i
 * 128; el que mana al front és això.
 */
:root {
	--codina-section-gap: clamp(4rem, 2.59rem + 6.01vw, 8rem);
}

.home .wp-block-post-content > .wp-block-group[style*="margin-top:var(--wp--preset--spacing--1"] {
	margin-block: var(--codina-section-gap) !important;
}

/*
 * `manipulation` treu el retard del doble toc a iOS i conserva el pan i el
 * pessic. Qui necessita un altre valor —el llenç del retolador, el Draggable dels
 * projectes— el posa amb més especificitat o en línia i hi guanya.
 */
:where(a, button, [role="button"], summary, label) {
	touch-action: manipulation;
}

/*
 * Mantenir premut un control no n'ha de seleccionar l'etiqueta. Només controls:
 * el text i els enllaços dins del text s'han de poder copiar.
 */
:where(button, [role="button"], .wp-element-button, .codina-nav-button, .codina-world__filter, .codina-world__more, .bottom-nav__bar) {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip; /* Cap secció ha de provocar scroll horitzontal (TASKS T49). */
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

:where(button, [role="button"]) {
	font: inherit;
}

/* -------------------------------------------------------------------------
 * Tinta i superfície
 *
 * Tot el lloc va en negre sobre blanc. La capa d'indirecció es queda igualment:
 * el CSS del theme demana `--codina-ink` i `--codina-surface` i no els tokens
 * de la paleta, i això vol dir que invertir una secció sencera continua sent
 * redefinir cinc variables en un sol lloc.
 *
 * ⚠️ El mode fosc de codina stories (2026-08-18) es va retirar el 2026-08-19: el
 * Figma `2026 3` va tornar a dibuixar l'arxiu i l'entrada en clar. No el tornis
 * a introduir sense demanar-ho.
 * ---------------------------------------------------------------------- */

:root {
	--codina-surface: var(--wp--preset--color--cs-white);
	--codina-ink: var(--wp--preset--color--cs-black);
	--codina-ink-55: var(--wp--preset--color--cs-black-55);
	--codina-ink-10: var(--wp--preset--color--cs-black-10);
	--codina-ink-10-solid: var(--wp--preset--color--cs-black-10-solid);

	/*
	 * El groc de postit de les targetes de serveis (fase 28, 2026-09-14). Es
	 * multiplica per la textura de paper, o sigui que el que es veu és una mica
	 * més fosc que aquest valor. No és el groc pur `#FFFF00` del retolador: al
	 * costat del text negre d'una targeta de 500 px, aquell cremava.
	 */
	--codina-postit: #FFF27A;

	/*
	 * El traç de l'animació «Draw Random Underline» dels enllaços (fase 29). El
	 * groc del retolador, triat per l'usuari sabent que damunt del blanc es
	 * llegeix poc: el traç no és l'indicador de l'enllaç, ho és la negreta.
	 */
	--codina-highlight: #FFFF00;

	/*
	 * El fons de la píndola inactiva del filtre de categories — Figma 95:78,
	 * que l'anomena `cs-black-5-solid`. És un gris més clar que el 10 %, i cal
	 * que sigui opac: la píndola seu damunt del patró de punts i amb un negre
	 * translúcid s'hi transparentarien.
	 */
	--codina-ink-5-solid: var(--wp--preset--color--cs-black-5-solid);

	/*
	 * El punt del fons al centre del halo del cursor.
	 *
	 * ⚠️ NO és `--codina-ink-55`, tot i que ho va ser un moment. Aquell és el
	 * token del text secundari, i la graella viu DARRERE del text: amb el 55 %
	 * el halo competia amb el que hi ha escrit a sobre i costava de llegir.
	 * Al 30 % encara és tres vegades més marcat que el 10 % del repòs, que és
	 * el que fa que l'efecte es vegi, i ja no fa nosa.
	 *
	 * És l'única palanca del color de l'efecte: la llegeix `readTokens()` de
	 * codina-dots.js i d'allà la pren codina-dots-interactive.js.
	 */
	--codina-dot-active: rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------------------
 * Tipografia
 * ---------------------------------------------------------------------- */

/**
 * Els fitxers de la Codina tenen com a nom intern dues famílies separades
 * («Codina Light» i «Codina Semibold»). theme.json ja les unifica sota
 * font-family: "Codina" amb pesos 300 i 600, però el navegador no ha de
 * sintetitzar cap pes intermedi ni cap cursiva: no existeixen.
 */
body {
	font-synthesis: none;
}

/**
 * La negreta ha de ser la Semibold, sempre.
 *
 * El `<strong>` del navegador no és `font-weight: 700` sinó `bolder`, que és
 * relatiu al pare: amb el cos a 300, `bolder` es resol a 400 i 400 cau a la
 * Light, així que la negreta no es veia. Per això el cos va a 500 a
 * theme.json (500 també renderitza Light, el text normal no canvia gens).
 *
 * Aquesta regla ho fixa igualment: hi ha contextos que declaren el 300
 * explícitament (cites, llistes de serveis, títols de projecte…) i allà el
 * `bolder` tornaria a fallar. Una regla pròpia sempre guanya a l'herència.
 */
b,
strong {
	font-weight: 600;
}

/**
 * Tagline: mateixa mida que el cos però amb més aire. Al Figma és un estil
 * propi (16/20) i no una mida diferent, així que no és un font-size preset.
 */
.is-style-tagline {
	line-height: var(--wp--custom--line-height--tagline);
}

/* Fletxa dels enllaços externs. Per CSS, per no haver-la de traduir
   ni fer-la llegir al lector de pantalla. */
.is-style-external-link::after {
	content: "\2197";
	display: inline-block;
	margin-inline-start: 0.25em;
	speak: never;
}

/* -------------------------------------------------------------------------
 * Botons «anterior / següent»
 *
 * L'estil de tots els prev/next del lloc, en un sol lloc. És el de la secció
 * de testimonis, que és el que val: sense fons, vora fina i un gris suau en
 * passar-hi per damunt. Qualsevol control nou de tipus anterior/següent ha de
 * portar aquesta classe i no inventar-se cap variant.
 *
 * El SVG que hi va a dins ha de ser la fletxa amb pal de 12 × 12 i
 * `width="100%"`: el `padding` del botó és qui li dona la mida.
 * ---------------------------------------------------------------------- */

.codina-nav-button {
	display: flex;
	justify-content: center;
	align-items: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 12px;
	color: var(--codina-ink);
	background: none;
	border: 1px solid var(--codina-ink-10);
	border-radius: var(--wp--custom--radius--full);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--duration--fast) ease,
		transform var(--wp--custom--duration--press) var(--wp--custom--ease--out);
}

/*
 * L'àrea de toc fa 44 × 44 (mínim d'Apple i WCAG 2.5.5) sense que el cercle de
 * 40 creixi ni un píxel: l'amplia un pseudoelement invisible.
 */
.codina-nav-button {
	position: relative;
}

.codina-nav-button::before {
	content: "";
	position: absolute;
	inset: -2px;
}

/* Només amb ratolí: a tàctil el hover es quedaria encallat després del toc. */
@media (hover: hover) and (pointer: fine) {

	.codina-nav-button:hover {
		background-color: var(--codina-ink-10);
	}
}

.codina-nav-button:active:not(.is-disabled) {
	transform: scale(0.97);
}

/* -------------------------------------------------------------------------
 * Patró de punts de fons
 *
 * Punt de 2 px de diàmetre a `rgba(0,0,0,.1)` en graella de 20 × 20 px: és el
 * de codina.studio, que hi pinta un SVG de 100 × 100 amb un cercle de r=5 a
 * `background-size: 20px`. Mana per damunt del Figma, que en deia una el·lipse
 * de 5 px a #F4F4F4 en graella de 24 (decisió del 2026-08-12).
 *
 * Les mides són a theme.json, `custom.pattern`; el `dot` és el RADI.
 * ---------------------------------------------------------------------- */

.has-dot-pattern {
	background-image: radial-gradient(
		circle at center,
		var(--codina-ink-10) var(--wp--custom--pattern--dot),
		transparent calc(var(--wp--custom--pattern--dot) + 0.1px)
	);
	background-size: var(--wp--custom--pattern--size) var(--wp--custom--pattern--size);
	background-position: 0 0;
	background-repeat: repeat;
	background-color: var(--codina-surface);

	/*
	 * Context d'apilament propi, i fa dues feines alhora:
	 *
	 *   - Manté els `z-index` interns de les seccions (serveis, projectes,
	 *     galeria) resolts aquí dins i no competint amb la navegació.
	 *   - És el que fa que la capa de la graella interactiva, que hi entra com a
	 *     fill amb `z-index: -1`, quedi damunt del `background-image` d'aquí
	 *     sobre i sota de tot el contingut, sense escapar-se cap al `body`.
	 */
	isolation: isolate;
}

/* -------------------------------------------------------------------------
 * La graella de punts interactiva — assets/js/codina-dots-interactive.js
 *
 * ⚠️ Aquests dos elements els crea el JavaScript, i només quan el visitant té
 * un punter fi i no ha demanat moviment reduït. Sense efecte, el `<main>` es
 * queda `position: static` i el fons és exactament el d'aquí sobre.
 *
 * ⚠️ L'`overflow: clip` de la capa NO és decoratiu: el llenç fa uns 460 px i
 * segueix el cursor, o sigui que amb el cursor a prop de la vora dreta en
 * sobresurt. Sense retallar-lo, el document agafaria scroll horitzontal.
 * `clip` i no `hidden`: `hidden` convertiria la capa en contenidor de
 * desplaçament i el navegador hi ancoraria l'scroll.
 * ---------------------------------------------------------------------- */

.codina-dots {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: clip;
	pointer-events: none;
}

/*
 * ⚠️⚠️ La capa entra com a PRIMER fill del `<main>`, i això mou tot el lloc.
 *
 * El contingut real deixa de ser el primer fill i rep el `blockGap` del core
 * (`:root :where(.is-layout-flow) > * + *`, 24 px). Com que ni el `<main>`, ni
 * `.codina-page`, ni l'overlay, ni el `<header>` buit tenen vora o farciment,
 * aquell marge es col·lapsa cap enfora i baixava `.wp-site-blocks` sencer a
 * y = 24. A l'overlay de codina*stories es veia dues vegades: en obrir, per la
 * franja de 24 px es veia la graella al 45 % fins que passava a `hidden`; en
 * tancar, el `mount()` tornava a inserir la capa i la pàgina saltava.
 */
.has-dot-pattern > .codina-dots + * {
	margin-block-start: 0;
}

.codina-dots__canvas {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
}

/*
 * El peu és negre (Figma 112:41, fase 29) i no porta punts.
 *
 * El `background-image` del patró només pinta dins del `<main>` i el peu en
 * queda fora. El fons opac hi ha de ser igualment: el peu porta un `transform`
 * propi (`codina/footer-parallax`) i, mentre puja, el contingut es retalla
 * contra aquesta caixa.
 *
 * ⚠️ Negre literal i no `--codina-ink`: el peu és negre a totes les pàgines, no
 * «el contrari de la superfície». Si algun dia s'inverteix una secció, el peu
 * no l'ha de seguir.
 */
.codina-footer {
	color: var(--wp--preset--color--cs-white);
	background-color: var(--wp--preset--color--cs-black);
}

/* -------------------------------------------------------------------------
 * El contingut ha de començar a sang
 *
 * La capçalera només conté elements fixos (navegació, Progressive Blur i
 * retolador), així que no ocupa cap alçada al flux. Tot i així WordPress hi
 * posa el `blockGap` entre ella i el `<main>`, i aquells 24 px es queden com
 * a espai mort a dalt de tot.
 * ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part + * {
	margin-block-start: 0;
}

/*
 * ⚠️ I el marge del `<header>` mateix, que és el que realment baixava el lloc.
 *
 * El `<header>` és el primer fill de `.wp-site-blocks` i també rep el
 * `blockGap`. Com que `.wp-site-blocks` no té ni vora ni farciment, el marge
 * **es col·lapsa cap enfora** i empeny tot el bloc 24 px avall. La regla d'aquí
 * sobre només netejava el germà següent, o sigui que els 24 px hi eren igual:
 * mesurat, `.wp-site-blocks` començava a y = 24. On es notava més era a codina
 * world, que fa exactament una finestra d'alt i quedava descentrada.
 */
.wp-site-blocks > header.wp-block-template-part {
	margin-block-start: 0;
}

/*
 * El peu comença just on acaba l'última secció (fase 32). És germà del `<main>`
 * dins de `.codina-page`, que és `layout: default`, i hi rebia el `blockGap`.
 */
.codina-page > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * Ordre d'apilament
 *
 * En un sol lloc, perquè es pugui llegir d'un cop:
 *
 *    -1  graella interactiva  (dins del <main>, que té context propi)
 *    30  llenç de dibuix
 *    40  Progressive Blur
 *    50  loader d'entrada     (el CSS és a inc/loader.php, no aquí)
 *   100  navegació inferior   (el botó del retolador hi va a dins des del
 *                              2026-08-19, i per tant ja no té nivell propi)
 *
 * L'overlay de l'entrada de codina stories no és en aquesta llista a posta: va
 * en flux, després de la graella, i per tant ja hi pinta al damunt sense cap
 * `z-index` alt. Si en tingués un, taparia la navegació i el retolador, que
 * són globals i han de continuar sent accessibles amb l'entrada oberta.
 *
 * El loader es queda per **sota** del retolador i de la navegació a posta: no
 * els tapa, sinó que aquests s'amaguen amb `opacity` i en surten i hi entren
 * per damunt.
 *
 * L'overlay de codina stories sí que tapa la pàgina —hi conté una pàgina
 * sencera—, però ha de quedar per sota de la navegació, que és global i ha de
 * continuar sent accessible mentre l'entrada és oberta.
 * ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * Hero — Figma 5:209
 *
 * Al Figma fa 1024 px d'alt amb el text centrat verticalment. Aquí es fa
 * servir svh perquè a mòbil la barra del navegador no talli el text.
 * ---------------------------------------------------------------------- */

.codina-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
}

.codina-hero p {
	margin-block: 0;
	line-height: var(--wp--custom--line-height--body);

	/**
	 * L'`!important` no és un pegat nostre: WordPress emet els presets de mida
	 * com a `.has-large-font-size { font-size: … !important }`, i el contingut
	 * que ja hi ha desat porta aquella classe. `.codina-hero p` té més
	 * especificitat, així que guanya, i alhora cobreix el marcatge nou del
	 * pattern, que ja no porta cap preset.
	 */
	font-size: 2rem !important;
}

@media (min-width: 1024px) {
	.codina-hero p {
		font-size: 3rem !important;
	}
}

/* -------------------------------------------------------------------------
 * CTA — Figma 8:993
 * ---------------------------------------------------------------------- */

.codina-cta {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 900px;
	padding-inline: var(--wp--custom--gutter);
}

@media (max-width: 767px) {
	.codina-cta {
		min-height: auto;
		padding-block: var(--wp--preset--spacing--110);
	}
}

/* -------------------------------------------------------------------------
 * Accessibilitat
 * ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--codina-ink);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	z-index: 100000;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	clip-path: none;
	background: var(--codina-ink);
	color: var(--codina-surface);
	border-radius: var(--wp--custom--radius--s);
}

/* -------------------------------------------------------------------------
 * Moviment reduït
 *
 * Regla transversal del projecte: cap animació és obligatòria. Les animacions
 * de GSAP també ho comproven per JS; això cobreix les de CSS i el scroll.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/*
	 * Moviment reduït vol dir menys moviment, no cap suavitat: els canvis de
	 * color i d'opacitat dels controls es conserven curts, i el `transform` en
	 * queda fora. Només controls amb una llista tancada, i no `*`: una transició
	 * CSS damunt d'una opacitat que escriu GSAP la duplicaria.
	 */
	.codina-nav-button,
	.codina-world__filter,
	.codina-world__more,
	.codina-article__toc-link,
	.codina-entry-nav__close,
	.wp-block-codina-button .codina-button__face {
		transition-property: background-color, color, border-color, opacity !important;
		transition-duration: 0.15s !important;
		transition-timing-function: ease !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* -------------------------------------------------------------------------
 * Capçalera de l'entrada — Figma 5:7
 *
 * Comparteix amplada i marges amb el cos de l'article. El padding no pot ser
 * els 64 px fixos del disseny: a 375 px deixarien el titular en 247 px.
 * ---------------------------------------------------------------------- */

.codina-article-header {
	inline-size: 100%;

	/*
	 * Sense límit d'amplada: al Figma 63:624 la portada va a sang dins dels
	 * 64 px de marge lateral, no dins de la columna editorial de 960.
	 */
	padding-inline: clamp(var(--wp--custom--gutter), 4vw, 64px);
}

/**
 * La caixa amb la imatge destacada de fons — Figma 63:624.
 *
 * L'alçada la fixa el block (496 px); aquí només hi ha el farciment.
 *
 * ⚠️ `--codina-cover-pad` la llegeix també `codina/entry-nav`, que és fill
 * d'aquesta caixa. Al Figma el títol, les categories, les fletxes d'anterior i
 * següent i el botó de tancar cauen tots a la mateixa vertical: mesurat sobre
 * el render a 1440, la portada va de x=64 a x=1375 i tots quatre comencen a
 * x=96. Amb una sola fitxa compartida no es poden tornar a separar.
 */
.codina-article-cover.wp-block-cover {
	--codina-cover-pad: clamp(var(--wp--custom--gutter), 2.5vw, 32px);

	padding: var(--codina-cover-pad);
}

/*
 * ⚠️ `position: static` no és cosmètic. El core li posa `position: relative`,
 * i llavors la navegació de l'entrada —que és absoluta— es mesurava contra
 * aquesta caixa de baix i no contra la portada: el botó de tancar acabava al
 * mig de la imatge. Amb `static`, el bloc contenidor torna a ser la portada.
 *
 * ⚠️ Aquí NO s'hi pot forçar `width: 100%`. El core deixa el contenidor
 * arrapat al text (`width: auto`, amb `.has-custom-content-position` repetida
 * dues vegades per pujar-ne l'especificitat), i això és el que volem: el
 * contenidor és `is-layout-constrained`, o sigui que si arribés a fer tota
 * l'amplada els seus fills agafarien `max-width: 960px` i `margin: auto` i el
 * títol quedaria CENTRAT damunt de la portada.
 */
.codina-article-cover.wp-block-cover.has-custom-content-position
	.wp-block-cover__inner-container {
	position: static;
}

/*
 * El farciment global del lloc, fora.
 *
 * El `layout: constrained` de la portada fa que el core hi posi
 * `has-global-padding`, i llavors el títol no comença a la vora del farciment
 * de la portada sinó 27 px més endins (el gutter). Al Figma 63:624 el títol,
 * les categories, les fletxes i la creu cauen tots a la mateixa vertical, a
 * 32 px de la vora de la portada.
 */
.codina-article-cover.wp-block-cover.has-custom-content-position
	.wp-block-cover__inner-container.has-global-padding {
	padding-inline: 0;
}

/**
 * Sense imatge destacada, el vel del 20 % es quedaria sobre el no-res. El core
 * imprimeix igualment el `<span>` de l'overlay amb el color de marca: només
 * cal pujar-li l'opacitat i queda el negre sòlid.
 *
 * El selector va carregat de classes a posta: el del core per a l'opacitat del
 * vel en gasta quatre, i amb menys aquesta regla no arribava a aplicar-se.
 */
.codina-article-cover.wp-block-cover:not(:has(.wp-block-cover__image-background))
	.wp-block-cover__background.has-background-dim {
	opacity: 1;
}

/* El botó de tornada va al revés que a la resta del lloc perquè seu damunt del
   negre: ho resol l'estil «Primari · fons fosc» de `codina/button`, no cap
   pegat de color d'aquí. */

.codina-article-cover :focus-visible {
	outline-color: var(--wp--preset--color--cs-white);
}

/* -------------------------------------------------------------------------
 * L'entrada sobreposada de codina stories
 *
 * L'overlay entra al FLUX del document, just després de la graella, i la
 * graella es congela amb `position: fixed`. Això és el que fa que la finestra
 * continuï sent l'element que scrolla, i per tant que l'índex lateral, el
 * parallax del peu i el revelat de text funcionin exactament igual que en una
 * càrrega normal, sense haver de passar-los cap `scroller`.
 *
 * El `z-index: 1` només serveix per guanyar la graella mentre les dues
 * conviuen durant l'animació. Ha de ser baix: la navegació i el retolador
 * viuen més amunt i han de quedar per damunt de l'entrada.
 * ---------------------------------------------------------------------- */

.codina-entry-overlay {
	position: relative;
	z-index: 1;
	min-block-size: 100svh;

	/*
	 * ⚠️ L'overlay és fill de `.wp-site-blocks`, i el core hi posa el `blockGap`
	 * entre germans: sense això l'entrada començava 24 px avall, que no és on
	 * comença quan es carrega sencera del servidor. És el mateix motiu pel qual
	 * la capçalera ja en porta una de pròpia més amunt.
	 */
	margin-block-start: 0;

	/* Opac: mentre llisca cap amunt no ha de deixar veure la graella. */
	background-color: var(--codina-surface);
}

.codina-entry-overlay:focus,
.codina-entry-overlay main:focus {
	outline: none;
}

/* -------------------------------------------------------------------------
 * Els enllaços: negreta i «Draw Random Underline» (fase 29, 2026-09-14)
 *
 * Tots els enllaços que no són botons van en Semibold, que és el que diu que
 * es poden clicar, i en passar-hi per damunt s'hi dibuixa un traç groc
 * (`assets/js/codina-draw-underline.js`).
 *
 * ⚠️ La llista d'exclusions és la MATEIXA que la constant `EXCLUDE` del JS. Si
 * en toques una, toca l'altra: un enllaç en negreta sense traç, o amb traç i
 * sense negreta, es veu com un error.
 *
 * ⚠️ `:where()` sencer, especificitat zero, a posta: qualsevol regla d'un block
 * hi guanya sense haver-se d'esforçar. L'índex de l'entrada en depèn —els seus
 * enllaços van a 300 i l'actiu a 600, i amb aquesta negreta l'actiu deixaria
 * de distingir-se—, i també els títols de columna del peu, que no són enllaços.
 * ---------------------------------------------------------------------- */

:where(
	a:not(
		.codina-button,
		.wp-element-button,
		.codina-nav-button,
		.codina-card__link,
		.codina-world__filter,
		.codina-world__more,
		.codina-entry-nav a,
		.bottom-nav__menu a,
		.bottom-nav__lang a,
		.bottom-nav__logo,
		.skip-link,
		#wpadminbar a,
		[data-draw-line="none"]
	)
) {
	font-weight: 600;
}

/* El JS hi posa `data-draw-line` el primer cop que s'hi passa per damunt. */
[data-draw-line] {
	position: relative;
}

/*
 * ⚠️ La caixa és ABSOLUTA, no en flux com al recurs d'Osmo. Allà la caixa és
 * un bloc de 0,625 em sota el text d'un enllaç solitari; aquí els enllaços
 * viuen dins de paràgrafs, i una caixa en flux empenyeria la línia de sota a
 * cada hover.
 */
.codina-draw-line__box {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	block-size: 0.625em;
	color: var(--codina-highlight);
	pointer-events: none;
}

/*
 * Dins d'un text partit pel revelat, la línia és una màscara amb
 * `overflow: clip` que no es retira mai, i el traç de sota hi quedaria tallat:
 * es dibuixa dins de l'alçada de la línia, damunt dels descendents.
 */
.is-draw-line-inset > .codina-draw-line__box {
	inset-block-start: auto;
	inset-block-end: 0;
	block-size: 0.4em;
}

.codina-draw-line__box svg {
	position: absolute;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible !important;
}