/*
Theme Name: Sant Fost Informació
Theme URI: https://santfost.info
Author: Agustí Vila
Author URI: https://agustivila.cat
Description: Plantilla dissenyada per la web del diari digital Sant Fost Informació.
Version: 2.2.0
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sant-fost
Tags: blog, responsive, seo, block, Editor del sitio, Patrones del editor de bloques, rtl-language-support, Entrada fija, threaded-comments, translation-ready, Bloques anchos, Estilos del editor de bloques, Variaciones de estilos, Listo para accesibilidad, Blog, Porfolio, Noticias
Requires at least: 6.8
Tested up to: 7.1.2
Requires PHP: 8.3
*/

/* Theme CSS starts here */

/* ---------- Barra d'última hora (carrusel) ---------- */
.sfi-ticker-bar a,
.sfi-ticker-bar a:hover {
	color: inherit;
}
.sfi-ticker {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}
.sfi-ticker .wp-block-post-template {
	display: inline-flex;
	gap: 1.25rem;
	max-width: none;
	margin: 0;
	padding-left: 100%;
	white-space: nowrap;
	animation: sfi-ticker 30s linear infinite;
}
.sfi-ticker .wp-block-post-template > li {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 0;
}
.sfi-ticker .wp-block-post-template > li:not(:first-child)::before {
	content: "\2022";
}
.sfi-ticker .wp-block-post-title {
	margin: 0;
}
.sfi-ticker-bar:hover .wp-block-post-template,
.sfi-ticker-bar:focus-within .wp-block-post-template {
	animation-play-state: paused;
}
@keyframes sfi-ticker {
	to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
	.sfi-ticker { overflow-x: auto; }
	.sfi-ticker .wp-block-post-template {
		animation: none;
		padding-left: 0;
	}
}

/* ---------- Selector d'idioma ---------- */
.sfi-lang a {
	color: inherit;
	text-decoration: none;
}
.sfi-lang a:hover,
.sfi-lang a:focus {
	color: var(--wp--preset--color--primary);
}

/* ---------- Capçalera: logo centrat ---------- */
.sfi-masthead > :first-child,
.sfi-masthead > :last-child {
	flex: 1 1 0;
}
.sfi-masthead > :last-child {
	justify-content: flex-end;
}
@media (max-width: 600px) {
	.sfi-masthead .wp-block-social-links .wp-block-social-link.wp-social-link {
		display: none;
	}
}

/* ---------- Logotip ---------- */
.sfi-logo img {
	height: auto;
}
.sfi-masthead .sfi-logo {
	display: flex;
	justify-content: center;
}
.sfi-masthead .sfi-logo img {
	width: 420px;
	max-width: 100%;
}
@media (max-width: 1024px) {
	.sfi-masthead .sfi-logo img {
		width: 340px;
	}
}
@media (max-width: 600px) {
	.sfi-masthead .sfi-logo img {
		width: 220px;
	}
}

/* ---------- Logotip apilat del peu ---------- */
.sfi-logo-peu {
	margin: 0;
}
.sfi-logo-peu img {
	display: block;
	width: 180px;
	max-width: 100%;
	height: auto;
}
@media (max-width: 600px) {
	.sfi-logo-peu img {
		width: 150px;
		margin-inline: auto;
	}
}

/* ---------- Menú de seccions: scroll horitzontal en mòbil ---------- */
@media (max-width: 781px) {
	.wp-block-navigation.sfi-sections.is-content-justification-center {
		--navigation-layout-justify: flex-start;
		--navigation-layout-wrap: nowrap;
		justify-content: flex-start;
	}
	.sfi-sections .wp-block-navigation__container {
		flex-wrap: nowrap;
		justify-content: flex-start;
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.sfi-sections .wp-block-navigation__container::-webkit-scrollbar {
		display: none;
	}
	.sfi-sections .wp-block-navigation-item {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* ---------- Menú hamburguesa ---------- */
.sfi-masthead .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.sfi-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}
.sfi-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sfi-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item:has(.wp-block-search) {
	border-bottom: 0;
	padding-bottom: var(--wp--preset--spacing--40);
}
.sfi-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--40) 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}
.sfi-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:hover,
.sfi-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary);
}

/* ---------- Cercador ---------- */
.sfi-masthead .wp-block-search {
	width: 100%;
}
.sfi-masthead .wp-block-search__inside-wrapper {
	width: 100%;
	gap: var(--wp--preset--spacing--30);
}
.sfi-masthead .wp-block-search__input {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
}
.sfi-masthead .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}
.sfi-masthead .wp-block-search__button {
	margin-left: 0;
	padding: 0.75rem 1rem;
	border-radius: 4px;
}

/* ---------- Portada ---------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal;
}
.sfi-obertura-titol {
	line-height: 1.1;
	text-wrap: balance;
}
.sfi-secundaries .wp-block-post-template > li {
	margin-block-start: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sfi-secundaries .wp-block-post-template > li:first-child {
	padding-top: 0;
}
.sfi-secundaries .wp-block-post-template > li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.sfi-secundaria__text {
	flex: 0 0 calc(60% - var(--wp--preset--spacing--40) / 2);
	min-width: 0;
}
.sfi-secundaries .wp-block-post-title {
	margin: 0;
	line-height: 1.3;
}
.sfi-secundaries .wp-block-post-excerpt,
.sfi-seccio .wp-block-post-excerpt {
	margin-top: var(--wp--preset--spacing--20);
}
.sfi-secundaries .wp-block-post-excerpt__excerpt,
.sfi-seccio .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
	line-height: 1.5;
}
.sfi-secundaries .wp-block-post-template > li > .wp-block-group {
	gap: var(--wp--preset--spacing--40);
}
.sfi-secundaries .wp-block-post-featured-image {
	flex: 0 0 calc(40% - var(--wp--preset--spacing--40) / 2);
	width: auto;
	margin: 0;
}
.sfi-secundaries .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Peu de pàgina ---------- */
.sfi-subscribe .wp-block-button__link,
.sfi-mes .wp-block-button__link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 4px;
}
.sfi-logos img {
	height: 40px;
	width: auto;
}

/* ---------- Peu: línia legal ---------- */
.sfi-legal__links::before {
	content: "\00B7";
	margin-right: 0.4em;
}
@media (max-width: 600px) {
	.wp-block-group.sfi-legal {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}
	.sfi-legal__links::before {
		content: none;
	}
}

/* ---------- Peu centrat en mòbil ---------- */
@media (max-width: 600px) {
	footer.wp-block-template-part {
		text-align: center;
	}
	footer.wp-block-template-part .is-layout-flex {
		justify-content: center;
		align-items: center;
	}
	footer.wp-block-template-part .wp-block-group.sfi-legal {
		align-items: center;
	}
	footer.wp-block-template-part .wp-block-navigation {
		--navigation-layout-justify: center;
		--navigation-layout-justification-setting: center;
		justify-content: center;
	}
	footer.wp-block-template-part .wp-block-navigation__container,
	footer.wp-block-template-part .wp-block-social-links {
		justify-content: center;
	}
}

/* ---------- Espai entre capçalera i contingut ---------- */
main.wp-block-group {
	margin-block-start: 0;
}
main > .screen-reader-text:first-child + * {
	margin-block-start: 0;
}

/* ---------- Portada: títols de secció ---------- */
.sfi-seccio-titol {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.02em;
}
.sfi-seccio-titol::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 6rem;
	height: 4px;
	background: var(--wp--preset--color--contrast);
}

/* ---------- Portada: files de secció ---------- */
.sfi-seccio .wp-block-post-template > li {
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sfi-seccio .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--40);
	line-height: 1.3;
}
.sfi-seccio + .wp-block-buttons,
.sfi-opinio + .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------- Portada: opinió ---------- */
.sfi-opinio .wp-block-post-template > li {
	text-align: center;
}
.sfi-opinio__foto {
	width: 96px;
	margin: 0 auto var(--wp--preset--spacing--40);
}
.sfi-opinio__foto img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
}
.sfi-opinio__foto:has(img:not([src])),
.sfi-opinio__foto:has(img[src=""]) {
	display: none;
}
.sfi-opinio__titol {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------- Pàgines de secció (archive.html) ---------- */
.sfi-arxiu-titol {
	margin-bottom: var(--wp--preset--spacing--30);
}
.wp-block-term-description {
	max-width: 45rem;
	margin-bottom: var(--wp--preset--spacing--60);
}
.sfi-arxiu .wp-block-post-template > li {
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sfi-arxiu .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--40);
	line-height: 1.3;
}
.sfi-arxiu .wp-block-post-excerpt {
	margin-top: var(--wp--preset--spacing--30);
}
.sfi-arxiu .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
}

/* Primera notícia destacada (només a la primera pàgina i en pantalles grans) */
@media (min-width: 782px) {
	body:not(.paged) .sfi-arxiu .wp-block-post-template > li:first-child {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: 3fr 2fr;
		column-gap: var(--wp--preset--spacing--60);
		align-content: start;
		padding-bottom: var(--wp--preset--spacing--60);
	}
	body:not(.paged) .sfi-arxiu .wp-block-post-template > li:first-child > .wp-block-post-featured-image {
		grid-column: 1;
		grid-row: 1 / span 3;
	}
	body:not(.paged) .sfi-arxiu .wp-block-post-template > li:first-child > :not(.wp-block-post-featured-image) {
		grid-column: 2;
	}
	body:not(.paged) .sfi-arxiu .wp-block-post-template > li:first-child .wp-block-post-title {
		margin-top: 0;
		/* !important: cal per superar la mida predefinida del bloc */
		font-size: var(--wp--preset--font-size--xx-large) !important;
		line-height: 1.15;
	}
	body:not(.paged) .sfi-arxiu .wp-block-post-template > li:first-child .wp-block-post-excerpt__excerpt {
		-webkit-line-clamp: 5;
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* Paginació */
.sfi-paginacio {
	margin-top: var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	gap: var(--wp--preset--spacing--30);
}
.sfi-paginacio a,
.sfi-paginacio .page-numbers {
	text-decoration: none;
}
.sfi-paginacio .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast);
}
.sfi-paginacio .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}
.sfi-paginacio .page-numbers.dots {
	border: 0;
}
.sfi-paginacio a.page-numbers:hover,
.sfi-paginacio .wp-block-query-pagination-previous:hover,
.sfi-paginacio .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ---------- Pàgines estàtiques (page.html) ---------- */
.sfi-pagina-titol {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}
.sfi-pagina-titol::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 12rem;
	max-width: 40%;
	height: 4px;
	background: var(--wp--preset--color--contrast);
}

/* ---------- Cercador dins de les pàgines (cerca i 404) ---------- */
.sfi-cercador {
	max-width: 36rem;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.sfi-cercador .wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--30);
}
.sfi-cercador .wp-block-search__input {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
}
.sfi-cercador .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}
.sfi-cercador .wp-block-search__button {
	margin-left: 0;
	padding: 0.75rem 1rem;
	border-radius: 4px;
}

/* ---------- Resultats de cerca (search.html) ---------- */
.sfi-resultats .wp-block-post-template > li {
	margin-block-start: 0;
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sfi-resultats .wp-block-post-template > li:first-child {
	padding-top: 0;
}
.sfi-resultats .wp-block-post-template > li > .wp-block-group {
	gap: var(--wp--preset--spacing--50);
}
.sfi-resultat__text {
	flex: 1;
	min-width: 0;
}
.sfi-resultats .wp-block-post-title {
	line-height: 1.25;
}
.sfi-resultats .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	margin: 0;
}
.sfi-resultat__imatge {
	flex: 0 0 220px;
	width: 220px;
	margin: 0;
}
.sfi-resultat__imatge img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
@media (max-width: 600px) {
	.sfi-resultat__imatge {
		flex-basis: 35%;
		width: 35%;
	}
}

/* ---------- Pàgina d'error (404.html) ---------- */
.sfi-404__codi {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(4rem, 3rem + 5vw, 7rem);
	font-weight: 900;
	line-height: 1;
}
.sfi-404 {
	text-align: center;
}
.sfi-404 h1 {
	margin-top: var(--wp--preset--spacing--40);
}
.sfi-404 .wp-block-buttons {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------- Targetes d'igual alçada (portada i seccions) ---------- */
.sfi-arxiu .wp-block-post-template > li,
.sfi-seccio .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
}
.sfi-arxiu .wp-block-post-template > li > .wp-block-post-date,
.sfi-seccio .wp-block-post-template > li > .wp-block-post-date {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* ---------- Notícia: línia d'autoria, data i temps de lectura ---------- */
.sfi-meta-punt::before {
	content: "\00B7";
	margin-right: 0.5em;
	color: var(--wp--preset--color--contrast-2);
}

/* ---------- Títols de secció enllaçats ----------
   Mateix comportament que els cintillos: la fletxa només apareix en passar-hi el ratolí. */
body .sfi-seccio-titol a {
	color: inherit;
	text-decoration: none;
}
body .sfi-seccio-titol a::after {
	content: "\203A";
	display: inline-block;
	margin-left: 0.3em;
	opacity: 0;
	transform: translateX(-3px);
	transition: opacity .15s ease, transform .15s ease;
}
body .sfi-seccio-titol a:hover,
body .sfi-seccio-titol a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
body .sfi-seccio-titol a:hover::after,
body .sfi-seccio-titol a:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* ---------- Estats de hover coherents a tot el web ----------
   Selectors amb prioritat alta a propòsit: el CSS dels blocs de WordPress
   usa fins a tres classes (p. ex. el menú), i aquestes regles l'han de superar
   sigui quin sigui l'ordre de càrrega. */

/* Cintillos de secció (ACTUALITAT, POLÍTICA…): subratllat i fletxa en passar-hi el ratolí */
body .wp-block-post-terms a {
	text-decoration: none;
}
body .wp-block-post-terms a::after {
	content: "\203A";
	display: inline-block;
	margin-left: 0.3em;
	opacity: 0;
	transform: translateX(-3px);
	transition: opacity .15s ease, transform .15s ease;
}
body .wp-block-post-terms a:hover,
body .wp-block-post-terms a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
body .wp-block-post-terms a:hover::after,
body .wp-block-post-terms a:focus-visible::after {
	opacity: 1;
	transform: translateX(0);
}

/* Menú de seccions de la capçalera i menú del peu: vermell */
body .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	transition: color .15s ease;
}
body .wp-block-navigation.sfi-sections .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
body .wp-block-navigation.sfi-sections .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
body footer.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
body footer.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Icones de xarxes socials (capçalera i peu): vermell.
   Es canvia tant l'element de la llista com l'enllaç i la icona, perquè no depengui
   de com WordPress aplica el color. !important: WordPress hi posa el color com a estil en línia. */
body .wp-block-social-links .wp-block-social-link.wp-social-link,
body .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor {
	transition: color .15s ease, fill .15s ease;
}
body .wp-block-social-links .wp-block-social-link.wp-social-link:hover,
body .wp-block-social-links .wp-block-social-link.wp-social-link:focus-within,
body .wp-block-social-links .wp-block-social-link.wp-social-link:hover .wp-block-social-link-anchor,
body .wp-block-social-links .wp-block-social-link.wp-social-link:focus-within .wp-block-social-link-anchor,
body .wp-block-social-links .wp-block-social-link.wp-social-link:hover svg,
body .wp-block-social-links .wp-block-social-link.wp-social-link:focus-within svg {
	color: var(--wp--preset--color--primary) !important;
	fill: var(--wp--preset--color--primary) !important;
}

/* Enllaços legals del peu: vermell */
body footer.wp-block-template-part .sfi-legal a:hover,
body footer.wp-block-template-part .sfi-legal a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* ---------- Transicions entre pàgines (versió 2.2) ---------- */

/* 1. Navegadors amb View Transitions entre documents: transició nativa */
@view-transition {
	navigation: auto;
}
header.wp-block-template-part {
	/* La capçalera es manté fixa: només canvia el contingut */
	view-transition-name: sfi-capcalera;
}
::view-transition-old(root) {
	animation: sfi-sortida 0.2s ease-in both;
}
::view-transition-new(root) {
	animation: sfi-entrada 0.35s ease-out both;
}

/* 2. Resta de navegadors (Firefox): fos breu gestionat pel petit script de functions.php */
html.sfi-fallback main {
	animation: sfi-entrada 0.35s ease-out both;
}
html.sfi-fallback main,
html.sfi-fallback footer.wp-block-template-part {
	transition: opacity 0.15s ease-in;
}
html.sfi-sortint main,
html.sfi-sortint footer.wp-block-template-part {
	opacity: 0;
}

@keyframes sfi-sortida {
	to {
		opacity: 0;
	}
}
@keyframes sfi-entrada {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* 3. Accessibilitat: sense animacions si l'usuari ha demanat reduir el moviment */
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
	html.sfi-fallback main {
		animation: none;
	}
}