/*
 * Pell global del lloc: tipografia base, capçalera, peu, botons i utilitats.
 * Els components de recursos (targetes, fitxes, filtres) viuen al CSS del plugin.
 */

/* ── Base ── */
body {
	font-family: var(--tll-font-text);
	font-weight: 300;
	font-size: var(--tll-t-base);
	color: var(--tll-text);
	background: var(--tll-fons);
	line-height: var(--tll-int-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .lluc-titol {
	font-family: var(--tll-font-titol);
	font-weight: 400;
	color: var(--tll-titol-petit);
	line-height: var(--tll-int-titol-petit);
	text-wrap: balance;
}

/*
 * Els dos nivells grans van en el marró del logotip i amb l'interlineat
 * ajustat: a partir d'unes 34 px, l'espai entre línies per defecte deixa el
 * titular desmuntat.
 */
h1, h2, .lluc-titol {
	color: var(--tll-titol);
	line-height: var(--tll-int-titol);
	letter-spacing: -.015em;
}

h1 { font-size: var(--tll-t-xxl); }
h2 { font-size: var(--tll-t-xl); }
h3 { font-size: var(--tll-t-l); }
h4 { font-size: var(--tll-t-m); }

/* Marge inferior proporcional al titular, no un valor fix per a tots. */
h1 { margin-bottom: .38em; }
h2 { margin-bottom: .45em; }
h3, h4 { margin-bottom: .55em; }

p { margin-block: 0 1.15em; }

a { color: var(--tll-marro); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--tll-verd-molt-fosc); }

strong, b { font-weight: 500; }

/*
 * Els enllaços que van sols, no dins d'un paràgraf.
 *
 * Al contingut que ve de la web vella n'hi ha una pila —«Per descobrir més…»,
 * «Més informació», «Cerqueu allotjaments»— que són l'única cosa de la seva
 * línia. Fan 20 px d'alt, i la norma d'accessibilitat en demana 24 per a
 * qualsevol cosa que s'hagi de tocar amb el dit. Els que van ENMIG d'una
 * frase no compten (la norma els exceptua a posta) i per això la regla només
 * agafa els que són fills directes del contingut.
 *
 * S'hi posa encoixinat i no una mida de lletra més gran: així creix la zona
 * que respon i el text es continua llegint igual que el que té al costat.
 */
.tll-contingut > a,
.elementor-widget-text-editor > a,
.elementor-widget-text-editor > .elementor-widget-container > a {
	display: inline-block;
	padding-block: 3px;
}

/* Amplada de lectura: el text llarg mai a tota l'amplada de la pantalla. */
.lluc-lectura { max-width: var(--tll-ample-text); }

/*
 * I el mateix als blocs de text de l'Elementor.
 *
 * Les pàgines muntades amb l'Elementor posen el text a tota l'amplada de la
 * secció: en un monitor ample sortien línies de 144 caràcters i l'ull perd la
 * ratlla quan torna a l'esquerra. La mesura còmoda són 60-70 caràcters, que és
 * el que val --tll-ample-text.
 *
 * Es limita el TEXT i no la secció perquè dins de les mateixes seccions hi ha
 * graelles de fitxes, mapes i imatges, que sí que han d'anar amples. I si
 * l'editora centra el text, la caixa també es centra: si no, el text quedaria
 * centrat dins d'una columna arrambada a l'esquerra.
 */
.elementor-widget-text-editor,
.elementor-widget-text-editor > .elementor-widget-container {
	max-width: var(--tll-ample-text);
}
/* Els dos selectors hi són perquè l'Elementor té dues maneres d'escriure el
   mateix bloc: amb un <div class="elementor-widget-container"> a dins o sense,
   segons si l'opció «sortida DOM optimitzada» està activada. Aquesta web la
   té activada; si algun dia es desactiva, la regla segueix valent. */
.elementor-widget-text-editor:is(
	[class*="text-align-center"], [class*="align-center"]
) { margin-inline: auto; }
.elementor-widget-text-editor:is(
	[class*="text-align-right"], [class*="align-right"]
) { margin-inline-start: auto; }

/*
 * ── Icones ──
 *
 * Es pinten amb TRAÇ, no amb massa, i això no és una preferència d'estil: el
 * joc d'icones és de línia. Fins ara la regla deia «fill: currentColor», que
 * per a un dibuix de línia vol dir omplir el contorn i quedar-se amb una taca.
 * A la fitxa d'un allotjament, les icones de capacitat, habitacions, llits i
 * banys eren quatre bonys marrons; el rellotge d'horari, un cercle massís; el
 * sobre del correu, un rectangle; el globus del web, una bola negra. I les 151
 * <line> i 34 <polyline> de l'sprite —que només es veuen amb traç— no es
 * pintaven gens.
 *
 * El gruix NO es declara aquí a posta. Va a cada <symbol> de l'sprite perquè
 * dins n'hi ha dues famílies amb graelles diferents (52 icones dibuixades en un
 * marc de 30 i 7 en un de 144): un gruix únic sortiria prim en unes i gruixut
 * en les altres. Un atribut al símbol perd contra el CSS, així que si algun dia
 * cal forçar-ne un des d'aquí, es pot.
 */
.lluc-icona {
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
	vertical-align: -.2em;
}

/* ── Contenidors ── */
.lluc-ample {
	max-width: var(--tll-ample);
	margin-inline: auto;
	padding-inline: var(--tll-esp-m);
}

/* ──────────────────────────────────────────────────────────────
   CAPÇALERA
   Composició del manual d'identitat (07.7 Portal web, pàg. 26):
   logotip al mig, menú repartit a banda i banda.
   ────────────────────────────────────────────────────────────── */
.site-header {
	background: var(--tll-fons);
	border-bottom: 1px solid var(--tll-linia);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: padding .28s ease, box-shadow .28s ease;
}
.site-logo img, .site-header .header-image { max-height: 68px; width: auto; }

/*
 * El sentinella marca la franja de dalt de tot. Mentre es veu, la capçalera va
 * gran; quan surt de la pantalla, es compacta. Té alçada perquè no es compacti
 * al primer píxel de moviment, que quedaria nerviós.
 */
.lluc-sentinella {
	position: absolute;
	top: 0;
	left: 0;
	height: 140px;
	width: 1px;
	pointer-events: none;
}

/* Barra fina d'utilitats */
.lluc-utils {
	background: var(--tll-fons-suau);
	border-bottom: 1px solid var(--tll-linia);
	font-family: var(--tll-font-text);
}
.lluc-utils-dins {
	max-width: var(--tll-ample);
	margin-inline: auto;
	padding-inline: var(--tll-esp-m);
	display: flex;
	justify-content: flex-end;
}
.lluc-utils-menu {
	display: flex;
	gap: var(--tll-esp-m);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lluc-utils-menu a {
	display: block;
	padding-block: 7px;
	font-size: var(--tll-t-xxs);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tll-gris);
	text-decoration: none;
}
.lluc-utils-menu a:hover,
.lluc-utils-menu a:focus-visible { color: var(--tll-verd-molt-fosc); }

/* El canvi d'idioma, al costat d'Agenda i Contacte i amb la mateixa lletra. */
.lluc-idiomes ul {
	display: flex;
	align-items: center;
	gap: .55rem;
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--tll-esp-m);
}
.lluc-idiomes li + li { border-left: 1px solid var(--tll-linia); padding-left: .55rem; }
.lluc-idiomes a,
.lluc-idiomes span {
	display: block;
	padding-block: 7px;
	font-size: var(--tll-t-xxs);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
}
.lluc-idiomes a { color: var(--tll-gris); }
.lluc-idiomes a:hover,
.lluc-idiomes a:focus-visible { color: var(--tll-verd-molt-fosc); }
/* L'idioma en què s'està llegint: en verd i més marcat, perquè es distingeixi
   de l'altre sense dependre només del color. */
.lluc-idiomes [aria-current] {
	color: var(--tll-verd-molt-fosc);
	font-weight: 700;
}

.main-navigation,
.main-navigation .main-nav > ul > li > a {
	font-family: var(--tll-font-text);
	font-weight: 500;
	font-size: var(--tll-t-s);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.main-navigation .main-nav > ul > li > a:hover { color: var(--tll-verd-molt-fosc); }

/*
 * Els desplegables del menú.
 *
 * Tres entrades en tenen —Coneix, Escapa't i Planifica— i el tema fill no en
 * tenia ni una regla: sortia la caixa grisa de fàbrica de GeneratePress
 * (#f0f0f0, text #222, 200 px justos, una ombra dura de 1 px sense difuminar)
 * i, en passar-hi per sobre, el seu blau #1e73be, que no és a cap pàgina del
 * manual de marca. Es va cuidar el primer nivell i es va oblidar el de dins,
 * que és justament on la gent tria on va.
 *
 * Aquí es posen en el sistema: fons blanc com les targetes, la ratlla verda a
 * dalt que marca de quina secció penja, les cantonades gairebé rectes de la
 * marca i l'ombra suau dels tokens. Prou amples perquè hi càpiguen les
 * etiquetes llargues («Rutes agroalimentàries», «Identitat i tradicions»)
 * sense partir-se en dues línies.
 */
.main-navigation .main-nav ul ul {
	width: max-content;
	min-width: 220px;
	max-width: 320px;
	background: var(--tll-fons);
	border: 1px solid var(--tll-linia);
	border-top: 3px solid var(--tll-verd);
	border-radius: 0 0 var(--tll-radi) var(--tll-radi);
	box-shadow: var(--tll-ombra);
	padding-block: var(--tll-esp-xs);
}
.main-navigation .main-nav ul ul li a {
	font-family: var(--tll-font-text);
	font-size: var(--tll-t-s);
	font-weight: 400;
	line-height: 1.35;
	/* Sense majúscules, al revés del primer nivell: aquestes són set entrades
	   seguides i en majúscules es llegeixen molt pitjor. */
	text-transform: none;
	letter-spacing: 0;
	color: var(--tll-text);
	padding: .6rem var(--tll-esp-m);
	white-space: normal;
}

/*
 * L'estat actiu es marca amb fons i amb una barra a l'esquerra, no només amb
 * color: qui no distingeix bé els colors ha de poder saber igualment on és.
 */
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus-visible,
.main-navigation .main-nav ul ul li.current-menu-item > a {
	background: var(--tll-verd-clar);
	color: var(--tll-verd-molt-fosc);
	box-shadow: inset 3px 0 0 var(--tll-verd);
}

/*
 * Al mòbil el menú es desplega dins de la pàgina i no com a caixa flotant: la
 * ratlla verda de dalt i l'ombra hi sobren, i el sagnat és el que diu de qui
 * penja cada entrada.
 */
nav.toggled .main-nav ul ul,
.main-navigation.toggled .main-nav ul ul {
	min-width: 0;
	max-width: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--tll-fons-suau);
	padding-block: 0;
}
nav.toggled .main-nav ul ul li a,
.main-navigation.toggled .main-nav ul ul li a { padding-left: calc(var(--tll-esp-m) * 1.8); }

/* El logotip dins del menú */
.lluc-logo { display: block; width: 100%; height: auto; }
.lluc-item-marca > a {
	padding-inline: clamp(18px, 2.6vw, 40px) !important;
	display: flex;
	align-items: center;
}
.lluc-item-marca .lluc-logo {
	width: clamp(112px, 12vw, 150px);   /* per sota de ~110px el «TERRITORI SERÈ» ja no es llegeix */
	transition: width .28s ease;
}
.lluc-item-marca > a:hover { background: none !important; }

/* 1.101 px: el punt on el menú passa a horitzontal. Va lligat al filtre
   generate_mobile_menu_media_query de functions.php; canviar-ne un sol
   deixa la capçalera a mig camí entre les dues versions. */
@media (min-width: 1101px) {
	/*
	 * La navegació ocupa tota l'amplada i es reparteix des del centre.
	 *
	 * El contenidor del tema té l'amplada del CONTINGUT (1.240 px) i el menú,
	 * que creix amb la pantalla, se n'hi sortia: a partir de 1.600 px la lupa
	 * no hi cabia per una dotzena de píxels i queia a una segona ratlla, sota
	 * el logotip. La capçalera és una franja de banda a banda —el logotip hi va
	 * centrat— i per tant no ha de respectar aquella amplada: només li cal un
	 * marge als costats.
	 */
	.lluc-cap-centrada .site-header .inside-header {
		display: block;
		padding-block: 0;
		max-width: none;
		padding-inline: clamp(16px, 2vw, 48px);
	}
	/* El logotip de la capçalera sobra: el del menú ja fa aquesta feina. */
	.lluc-cap-centrada .site-header .site-logo,
	.lluc-cap-centrada .site-header .site-branding { display: none; }

	.lluc-cap-centrada .main-navigation { float: none; width: 100%; }
	/*
	 * I el menú no es parteix mai en dues ratlles.
	 *
	 * Amb «wrap», l'últim element —la lupa— queia a sota quan no hi cabia per
	 * poc. Amb «nowrap» els encoixinats s'estrenyen abans de trencar la
	 * ratlla, que és el que ha de passar: quan de debò no hi càpiga, per sota
	 * de 1.101 px, ja hi ha el menú desplegable.
	 */
	.lluc-cap-centrada .main-navigation .main-nav > ul {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
	}
	.lluc-cap-centrada .main-navigation .main-nav > ul > li > a {
		padding-inline: clamp(10px, 1.15vw, 20px);
		line-height: 1;
		padding-block: 30px;
		transition: padding-block .28s ease;
		white-space: nowrap;
	}
	/* Compactada: mateixa composició, menys alçada. Sense salts de posició. */
	.lluc-cap-centrada .site-header.es-compacta .main-navigation .main-nav > ul > li > a { padding-block: 16px; }
	.lluc-cap-centrada .site-header.es-compacta .lluc-item-marca .lluc-logo { width: clamp(92px, 8vw, 108px); }
	.site-header.es-compacta { box-shadow: 0 1px 14px rgba(31, 35, 24, .09); }

	/* Subratllat de marca a l'entrada activa i en passar-hi per sobre. */
	.lluc-cap-centrada .main-nav > ul > li:not(.lluc-item-marca):not(.lluc-item-lupa) > a { position: relative; }
	.lluc-cap-centrada .main-nav > ul > li:not(.lluc-item-marca):not(.lluc-item-lupa) > a::after {
		content: '';
		position: absolute;
		left: clamp(10px, 1.15vw, 20px);
		right: clamp(10px, 1.15vw, 20px);
		bottom: 22px;
		height: 2px;
		background: var(--tll-verd);
		transform: scaleX(0);
		transition: transform .22s ease, bottom .28s ease;
	}
	/*
	 * WordPress marca l'entrada activa amb noms diferents segons si és la
	 * pàgina mateixa o una pàgina filla; hi són totes perquè el subratllat
	 * també es vegi dins de les seccions.
	 *
	 * Els dos :not() s'han de repetir aquí: sense ells aquesta regla té MENYS
	 * pes que la de dalt i el subratllat no apareixia mai.
	 */
	.lluc-cap-centrada .main-nav > ul > li:not(.lluc-item-marca):not(.lluc-item-lupa):is(
		:hover, .current-menu-item, .current-menu-parent, .current-menu-ancestor,
		.current-page-parent, .current-page-ancestor
	) > a::after { transform: scaleX(1); }
	.lluc-cap-centrada .site-header.es-compacta .main-nav > ul > li > a::after { bottom: 9px; }
}

/* En pantalla petita, el logotip torna a la capçalera i el menú al desplegable. */
@media (max-width: 1100px) {
	.lluc-item-marca { display: none; }
	.site-header .inside-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 12px;
	}
	.lluc-marca-capcalera { margin: 0; }
	.lluc-marca-capcalera .lluc-logo { width: 124px; transition: width .28s ease; }
	.lluc-utils-menu a { padding-block: 9px; }

	/*
	 * La capçalera també s'encongeix en pantalla petita.
	 *
	 * L'encongiment estava escrit només per a l'escriptori: al mòbil la
	 * capçalera es quedava enganxada a dalt amb la mida sencera i es menjava
	 * 98 px de les 812 que té un telèfon, tota l'estona. El JavaScript que hi
	 * posa la classe ja funcionava a totes les mides; només faltaven aquestes
	 * tres línies.
	 */
	.site-header.es-compacta .inside-header { padding-block: 6px; }
	.site-header.es-compacta .lluc-marca-capcalera .lluc-logo { width: 96px; }
	.site-header.es-compacta { box-shadow: 0 1px 14px rgba(31, 35, 24, .09); }
}

@media (prefers-reduced-motion: reduce) {
	.site-header, .lluc-item-marca .lluc-logo,
	.lluc-cap-centrada .main-nav > ul > li > a,
	.lluc-cap-centrada .main-nav > ul > li > a::after { transition: none; }
}

/* ── Botons ── */
.lluc-boto,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	/* Verd fosc i no el verd de marca: text blanc sobre #80bc00 dona 2,3:1 i el
	   mínim per a un botó és 4,5:1. Amb #4e7200 puja a 5,6:1 i segueix sent el
	   mateix color de la família. */
	background: var(--tll-verd-molt-fosc);
	color: #fff;
	font-family: var(--tll-font-text);
	font-weight: 500;
	font-size: var(--tll-t-s);
	letter-spacing: .02em;
	padding: .7em 1.5em;
	border-radius: var(--tll-radi-ple);
	border: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--tll-transicio), transform var(--tll-transicio);
}
.lluc-boto:hover,
.wp-block-button__link:hover {
	background: var(--tll-verd-bosc);
	color: #fff;
	transform: translateY(-1px);
}
.lluc-boto--marro { background: var(--tll-marro); }
.lluc-boto--marro:hover { background: var(--tll-marro-fosc); }
.lluc-boto--contorn {
	background: transparent;
	color: var(--tll-marro);
	border: 1.5px solid var(--tll-marro);
}
.lluc-boto--contorn:hover { background: var(--tll-marro); color: #fff; }

/* ── Peu ── */
.site-footer,
.site-info {
	background: var(--tll-negre);
	color: #cfcdc7;
	font-size: var(--tll-t-s);
}
.site-footer a, .site-info a { color: #fff; }
.site-footer a:hover, .site-info a:hover { color: var(--tll-verd); }

/* ── Utilitats ── */
.lluc-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}


@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Amplada completa per als llistats i fitxes de recursos ──
   El plugin porta el seu propi contenidor; anul·lem el del tema pare. */
.lluc-ample-complet .site-content,
.lluc-ample-complet .content-area,
.lluc-ample-complet .site-main {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	display: block !important;
}
.lluc-ample-complet .site.grid-container {
	max-width: none !important;
	padding: 0 !important;
}
.lluc-ample-complet .inside-article,
.lluc-ample-complet .entry-content { margin: 0; padding: 0; }

/* ── Peu ──────────────────────────────────────────────────────────────────
   En una web institucional el peu no és decoració: és on la gent busca el
   telèfon i on han de ser els enllaços legals. */
.lluc-peu {
	background: var(--tll-negre);
	color: #cfcdc7;
	padding: var(--tll-esp-xl) var(--tll-esp-m) var(--tll-esp-m);
}
.lluc-peu-graella {
	max-width: var(--tll-ample);
	margin: 0 auto;
	display: grid;
	gap: var(--tll-esp-l);
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.lluc-peu h2 {
	font-family: var(--tll-font-text);
	font-size: var(--tll-t-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 .9rem;
}
.lluc-peu a { color: #fff; text-decoration: none; }
.lluc-peu a:hover { color: var(--tll-verd); text-decoration: underline; }
.lluc-peu-marca svg { width: 170px; height: auto; }
.lluc-peu-lema { margin: 1rem 0 0; font-size: var(--tll-t-s); max-width: 30ch; line-height: 1.6; }
.lluc-peu address { font-style: normal; line-height: 1.8; font-size: var(--tll-t-s); }
.lluc-peu-horari { margin: .6rem 0 0; font-size: var(--tll-t-s); opacity: .85; }
.lluc-peu-llista { list-style: none; margin: 0; padding: 0; line-height: 2; font-size: var(--tll-t-s); }
.lluc-peu-xarxes { margin-top: 1rem; display: flex; gap: 1rem; font-size: var(--tll-t-s); }

.lluc-peu-baix {
	max-width: var(--tll-ample);
	margin: var(--tll-esp-l) auto 0;
	padding-top: var(--tll-esp-s);
	border-top: 1px solid rgba(255, 255, 255, .15);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem var(--tll-esp-m);
	justify-content: space-between;
	align-items: center;
	font-size: var(--tll-t-xs);
}
.lluc-peu-baix p { margin: 0; }
.lluc-peu-baix ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding: 0; }

@media (max-width: 900px) {
	.lluc-peu-graella { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.lluc-peu-graella { grid-template-columns: 1fr; gap: var(--tll-esp-m); }
	.lluc-peu-baix { flex-direction: column; align-items: flex-start; }
}

/* ── Mida mínima per al dit ───────────────────────────────────────────────
   Els enllaços del peu feien 18 px d'alt. Amb el ratolí no és cap problema;
   amb el dit sí, i la norma d'accessibilitat demana 24 px com a mínim. S'hi
   afegeix encoixinat vertical en comptes de fer la lletra més gran: la zona
   clicable creix i el disseny no es mou, perquè l'interlineat ja hi era. */
.lluc-peu a,
.lluc-peu-llista a {
	display: inline-block;
	padding-block: 4px;
}
.lluc-peu-llista li { line-height: 1.5; }

/* El mateix al menú desplegat del mòbil, on cada entrada és una destinació. */
@media (max-width: 1100px) {
	.main-navigation .main-nav li a { padding-block: 12px; }
}

/* ── On soc quan navego amb el teclat ─────────────────────────────────────
   El tema no marcava enlloc l'element enfocat: qui es mou amb el tabulador
   —perquè no pot fer servir el ratolí, o perquè simplement va més ràpid— no
   tenia cap manera de saber on era. És un dels punts de la norma que es
   detecta abans i que més molesta.

   Es fa servir :focus-visible i no :focus perquè el marc només aparegui quan
   la navegació és de teclat, i no en clicar amb el ratolí.

   El doble contorn —fosc a dins, blanc a fora— és perquè es vegi tant sobre
   fons clar com sobre una foto: sense el blanc, el marc verd desapareix sobre
   la imatge de capçalera. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--tll-verd-molt-fosc, #4e7200);
	outline-offset: 2px;
	border-radius: 3px;
	box-shadow: 0 0 0 5px #fff;
}

/* Sobre fons foscos, invertit. */
.lluc-peu :where(a, button):focus-visible,
.tll-hero :where(a, button):focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, .55);
}

/* L'enllaç per saltar al contingut: amagat fins que s'hi arriba amb el
   tabulador, i llavors ben visible. És la primera cosa que troba qui navega
   amb teclat i li estalvia passar per tot el menú a cada pàgina. */
.screen-reader-text.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 9999;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: .8em 1.4em;
	background: var(--tll-verd-molt-fosc);
	color: #fff;
	border-radius: var(--tll-radi-ple, 999px);
	font-weight: 500;
	text-decoration: none;
}


/* ── Molles de pa ──
   Amb tres nivells d'estructura i QR impresos que porten a una fitxa, molta
   gent aterra en una pàgina interior sense saber on és. L'estil va aquí i no al
   CSS del plugin perquè aquest fitxer es carrega a totes les pàgines i l'altre
   només als contextos de recurs: a les pàgines fetes amb Elementor no hi
   arribaria. */
.tll-molles {
	max-width: var(--tll-ample);
	margin-inline: auto;
	/* El zero de sota deixava les molles enganxades al títol de la pàgina:
	   semblaven part del text i no un rastre de per on s'hi ha arribat. */
	padding: var(--tll-esp-s) var(--tll-esp-m);
	font-size: var(--tll-t-xs);
}
.tll-molles ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tll-molles a { color: var(--tll-text-suau); text-decoration: none; }
.tll-molles a:hover,
.tll-molles a:focus-visible { color: var(--tll-verd-molt-fosc); text-decoration: underline; }
.tll-molles [aria-current] { color: var(--tll-titol-petit); font-weight: 500; }
/* El separador va per CSS i no com a text: escrit al HTML, un lector de
   pantalla el llegeix («Inici, més gran que, Planifica») i no aporta res. */
.tll-molles li + li::before {
	content: "\203A";
	color: var(--tll-linia);
	margin-right: .5rem;
}
/* Prou alçada perquè el dit hi arribi (mínim 24 px de zona clicable). */
.tll-molles a,
.tll-molles span { display: inline-block; padding-block: .3rem; }