@import url(fonts/fonts.css);
@import url(css/formularis.css);
@import url(css/header-carousel.css);
@import url(css/patterns.css);

/*
Theme Name: AcidH
Author: Pimpampum
Version: 1.0
*/

/*
 * INDEX
 * ─────────────────────────────────────────
 * 1.  Amaguem coses PROVISIONAL
 * 2.  PPP - Estructura
 * 3.  Estils generals
 * 4.  Carousels swiper
 * 5.  Teasers agenda i notícies
 * 6.  Teasers en general
 * 7.  Teaser notícies
 * 8.  Teaser agenda
 * 9.  Data i lloc
 * 10. Teasers actualitat aside
 * 11. Single servei
 * 12. Notícia + agenda single
 * 13. Paginació
 * 14. Botons
 * 15. Footer
 * 16. Newsletter footer
 * 17. Responsive
 * ─────────────────────────────────────────
 */

/* Amaguem coses PROVISIONAL */

li#menu-item-wpml-ls-2-ca {
	display: none;
}

.postid-16111 {
	--servei-corporatiu: var(--blau-corporatiu);

	.servei-header-info h1,
	.servei-header-info .servei-parent-title a,
	.servei-header-info .servei-parent-title a:visited {
		color: #fff;
	}

	h2.wp-block-heading,
	h2.section-title,
	h2.servei-child-title {
		color: var(--blau-accessible);
	}
}

/*.logo img {
	object-fit: contain;
}*/

:root {
	--bgpage: #ffffff;
	--bodytxt: #000;
	--bggris: #f3f0f0;
	--bggris-fosc: #e8e3e3;
	--border-gris: 1px solid #e0e0e0;
	--border-gris-accessible: 1px solid #757575;

	/* Colors corporatius */
	--accent-corporatiu: #e44d4d;
	--blau-corporatiu: #4a90e2;
	--taronja-corporatiu: #f4a07c;
	--verd-corporatiu: #2ecc71;
	--groc-corporatiu: #ffad46;
	--lila-corporatiu: #7568a9;

	/* Colors accessibles  */

	--accent-accessible: #e02e2e;
	--blau-accessible: #2275d3;
	--taronja-accessible: #cd470e;
	--verd-accessible: #1e8549;
	--groc-accessible: #b36200;
	--lila-accessible: #7568a9;

	/* Tipografia */

	--mainfont: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--txt-14: clamp(0.8125rem, 0.875vw, 0.875rem); /* 14px */
	--txt-16: clamp(0.875rem, 1vw, 1rem); /* 16px */

	--txt-18: clamp(0.9375rem, 1.0625vw, 1.125rem); /* 18px */

	--txt-body: clamp(1.0625rem, 1.25vw, 1.25rem); /* 20px, abans 18px */
	--txt-body-lh: 1.4;
	--txt-body-fw: 500;
	--txt-body-ls: -1%;

	--txt-20: clamp(1.125rem, 1.25vw, 1.25rem); /* 20px */

	--txt-24: clamp(1.25rem, 1.5vw, 1.5rem); /* 24px */
	--txt-24-lh: 1.2;
	--txt-24-fw: 800;

	--txt-32: clamp(1.5rem, 2vw, 2rem); /* 32px */
	--txt-32-lh: 1.1;
	--txt-32-fw: 900;

	--txt-36: clamp(1.6875rem, 2.25vw, 2.25rem); /* 36px */
	--txt-36-lh: 1.2;
	--txt-36-fw: 900;

	--txt-40: clamp(1.875rem, 2.5vw, 2.5rem); /* 40px */
	--txt-40-lh: 1.15;
	--txt-40-fw: 900;

	--txt-44: clamp(2rem, 2.75vw, 2.75rem); /* 44px */
	--txt-44-lh: 1.15;
	--txt-44-fw: 900;

	--txt-56: clamp(2.25rem, 3.5vw, 3.5rem); /* 56px */
	--txt-56-lh: 1;
	--txt-56-fw: 900;

	/* Mides */
	--gapXXXS: 4px;
	--gapXXS: clamp(0.5rem, 0.75vw, 0.75rem); /* 8px - 12px */
	--gapXS: clamp(0.75rem, 1vw, 1rem); /* 12px - 16px */
	--gapS: clamp(1rem, 1.5vw, 1.5rem); /* 16px - 24px */
	--gapM: clamp(1.5rem, 2.25vw, 2.25rem); /* 24px - 36px */
	--gapL: clamp(2rem, 3vw, 3rem); /* 32px - 48px */
	--gapXL: clamp(3rem, 4.5vw, 4.5rem); /* 48px - 72px */
	--gapXXL: clamp(4rem, 7.875vw, 7.875rem); /* 64px - 126px */
	--gap-block: clamp(1.875rem, 2.813vw, 3.75rem); /* 30px - 60px */
	--wrap: 1280px;
	--wrap-wide: 1600px;
	--wrap-narrow: 950px;
	--wrap-txt: 700px;
	--radius: 4px;
	--radiusS: 2px;
	--swiper-pagination-bottom: 0;
}

.color_fundacio {
	--servei-accessible: #ee6d36;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
}

.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper object,
.wp-block-embed__wrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/**************************
PPP - Estructura
***************************/

body,
button,
input,
select,
textarea {
	font-family: var(--mainfont);
	font-size: var(--txt-body);
	line-height: var(--txt-body-lh);
	font-weight: var(--txt-body-fw);
	background-color: var(--bgpage);
	color: var(--bodytxt);
}

body.menu-open {
	overflow: hidden;
}

.wrap,
body:not(.home) .content-wrap > * {
	width: 90%;
	max-width: var(--wrap);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.content-wrap > *:not(section):not(div):not(h2.servei-child-title) {
	max-width: var(--wrap-txt);
}

.content-wrap,
.wrap-wide,
body:not(.home) .content-wrap > .wrap-wide,
body:not(.home) .content-wrap > section.wp-block-ppp-recent-posts,
body:not(.home) .content-wrap > section.wp-block-ppp-agenda {
	width: 100%;
	max-width: var(--wrap-wide) !important;
	border-radius: 0;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

section .wrap.wrap-wide {
	border-radius: 0;
}

.wrap-narrow {
	max-width: var(--wrap-narrow);
	margin-left: auto;
	margin-right: auto;
}

.wrap-txt {
	max-width: var(--wrap-txt);
	margin-left: auto;
	margin-right: auto;
}

.home main > section,
.home main > div:not(.pagina-header) {
	margin-top: calc(var(--gap-block) * 1.5);
}

main {
	display: flex;
	flex-direction: column;
	margin-bottom: calc(var(--gap-block) * 1.5);

	.content-wrap,
	.content-wrap > section,
	.content-wrap > div,
	.content-wrap > h2.servei-child-title + section,
	.content-wrap > h2.servei-child-title + div {
		margin-top: calc(var(--gap-block) * 1.5);
	}
	.content-wrap > section,
	.content-wrap > div {
		margin-bottom: calc(var(--gap-block) * 1.5);
	}

	.content-wrap > section.wp-block-ppp-agenda {
		margin-bottom: calc(var(--gap-block) * 2);
	}

	.content-wrap > section:first-child,
	.content-wrap > div:first-child,
	.content-wrap > h2:first-child,
	.content-wrap > p:first-child {
		margin-top: 0;
	}

	.content-wrap > section:last-child,
	.content-wrap > div:last-child {
		margin-bottom: 0;
	}

	&:has(.servei-menu) div.pagina-header {
		margin-bottom: 0;
	}

	.wp-block-group:has(h2:only-child) {
		margin-bottom: calc(var(--gap-block) * -1);
	}
}

/* Estils generals */

a {
	color: #000;
	text-decoration: none;
	transition: color 0.3s ease;
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration: underline;
	text-decoration-color: var(--bodytxt);
}

main {
	p,
	ol,
	ul {
		margin-top: var(--gapS);
		margin-bottom: var(--gapS);
	}

	p:last-child,
	ol:last-child,
	ul:last-child {
		margin-bottom: 0;
	}

	p a,
	li a,
	span a {
		text-decoration: underline;
		text-decoration-color: var(--servei-accessible, var(--accent-accessible));
		text-underline-offset: 0.25em;
		text-decoration-thickness: 1px;

		&:hover {
			text-decoration-color: var(--bodytxt);
		}
	}

	a[target="_blank"] {
		&::after {
			content: "\00a0";
			display: inline;
			font-size: 0.8em;
		}
	}

	a[href*="maps"] {
		&::after {
			content: url(img/ico_mapa.svg);
			margin-left: 8px;
			position: relative;
			top: 0.2em;
		}
	}

	img {
		border-radius: var(--radius);
	}

	h3,
	h4 {
		color: var(--servei-accessible, var(--accent-accessible));
		margin-top: 1.25em;
	}

	> div.wp-block-buttons {
		max-width: var(--wrap-txt) !important;
		margin-top: 0;
	}
}

h2.wp-block-heading,
h2.section-title,
h2.servei-child-title {
	color: var(--servei-accessible, var(--accent-accessible));
	font-size: var(--txt-44);
	font-weight: var(--txt-44-fw);
	line-height: var(--txt-44-lh);
	margin-top: var(--gapL);
	margin-bottom: var(--gapS);

	&.has-medium-font-size {
		margin-bottom: var(--gapXXXS);
		+ p {
			margin-top: 0;
		}
	}
}

h2.section-title,
h2.servei-child-title {
	margin-top: 0;
}

h2.section-title.has-text-align-center {
	text-align: left;
}

h3 {
	color: var(--servei-accessible, var(--accent-accessible));
	font-size: var(--txt-32);
	font-weight: var(--txt-32-fw);
	line-height: var(--txt-32-lh);
}

h4.wp-block-heading {
	font-size: var(--txt-24);
	font-weight: var(--txt-24-fw);
	line-height: var(--txt-24-lh);
	margin-top: var(--gapS);
}

h3.wp-block-heading {
	margin-top: var(--gapL);
	margin-bottom: var(--gapXXS);
}

.wp-block-column figure + h3 {
	margin-top: var(--gapS);
}

h4.wp-block-heading,
h5.wp-block-heading {
	margin-top: var(--gapS);
}
.wp-block-group__inner-container > *:first-child,
.wp-block-media-text__content > *:first-child,
.wp-block-column > *:first-child {
	margin-top: 0;
}

figcaption {
	font-size: var(--txt-14);
	color: #666;
	margin-top: 0.5em;
}

/*.is-layout-flex {
	row-gap: 0;
}*/

.bggris {
	background-color: var(--bggris);
	padding: var(--gapL) 0;
}

.bgwhite {
	background-color: #fff;
	border-radius: var(--radius);
	padding: var(--gapM);

	h2:first-child {
		margin-top: 0;
	}
}

.share-social {
	margin-top: var(--gapM);
	> p {
		margin-bottom: 0.5em;
		font-size: var(--txt-16);
		font-weight: 600;
	}
}

/* Llistats UL i OL */

.contingut-page,
article {
	ul,
	ol {
		margin-left: 2em;
	}

	ul li::marker {
		color: var(--servei-accessible, var(--accent-accessible));
	}
}

.content-wrap {
	.wp-block-group,
	.wp-block-column,
	.wp-block-media-text {
		ul li,
		ol li {
			position: relative;
			margin-bottom: 0.5em;
			padding-left: calc(1.25em + var(--gapXS));
			list-style-type: none;
			display: block;

			&::before {
				position: absolute;
				left: 0;
				top: 0.15em;
				width: 1.5em;
				height: 1.5em;
				background-color: var(--servei-accessible, var(--accent-accessible));
				color: white;
				border-radius: var(--radius);
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 900;
				font-size: var(--txt-16);
			}

			strong {
				font-weight: 800;
				color: var(--servei-accessible, var(--accent-accessible));
			}
		}

		ul {
			padding-left: 0;

			li::before {
				content: url(img/arrow_right_white2.svg);
				font-size: var(--txt-body);
				width: 1.25em;
				height: 1.25em;
			}
		}

		ol {
			counter-reset: item;
			padding-left: 0;

			li::before {
				content: counter(item);
				counter-increment: item;
			}
		}

		ul,
		ol {
			ul {
				margin-top: 0;
				li {
					position: relative;
					padding-left: 1em;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 0.45em;
						width: 0.5em;
						height: 0.8em;
						background-color: var(--servei-accessible, var(--accent-accessible));
						mask: url(img/arrow_right_white2.svg) no-repeat center / contain;
					}
				}
			}
		}
	}
}

main {
	li {
		margin-top: var(--gapXXS);
		position: relative;
		&::marker {
			color: var(--servei-accessible, var(--accent-accessible));
		}
	}

	> ul {
		list-style-type: none;

		li {
			padding-left: 1em;
		}

		li::before {
			content: "";
			width: 0.65em;
			height: 0.65em;
			background-color: var(--servei-accessible, var(--accent-accessible));
			mask: url(img/arrow_right_white2.svg) no-repeat center / contain;
			display: inline-block;
			position: absolute;
			top: 0.45em;
			left: 0;
		}
	}
}

/* Header branding */

#site-header {
	background-color: #fff;
	padding: var(--gapXXS) 5%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gapM);

	.site-branding {
		order: 1;
	}

	#site-navigation {
		order: 3;
	}

	p.header-cta {
		display: none;
	}

	.site-title a {
		display: block;
		width: 120px;
		height: 44px;
		background: url(img/logo_acidh.svg) no-repeat center;
		background-size: contain;
		text-indent: -9999px;
	}
}

.menu-fundacio {
	background-color: var(--taronja-corporatiu);
}

/* Pàgina header */

div.pagina-header {
	display: grid;
	margin-top: 0;
}

.header-media {
	position: relative;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	img {
		width: 100%;
		height: 20vh;
		object-fit: cover;
		object-position: center 30%;
		border-radius: 0;
	}
}

.single-servei .header-media img {
	height: 40vh;
}

[class*="header-info"] {
	h1 {
		font-size: var(--txt-56);
		font-weight: var(--txt-56-fw);
		line-height: var(--txt-56-lh);
		text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
		color: #fff;
	}

	p {
		font-size: var(--txt-32);
		font-weight: 700;
		line-height: var(--txt-32-lh);
		margin: 0;
	}
}

.servei-header-info {
	padding: var(--gapL) 0;
	background-color: var(--servei-corporatiu, #fff);
	color: var(--servei-text, #000);

	h1 {
		margin-bottom: var(--gapXS);
		font-size: var(--txt-56);
		font-weight: var(--txt-56-fw);
		line-height: var(--txt-56-lh);
		text-shadow: none;
		color: var(--servei-text, #000);
	}

	.servei-parent-title {
		margin-bottom: 0.25em;
		a,
		a:visited {
			color: var(--servei-text, #000);
			font-size: var(--txt-24);
			text-decoration: none;
		}
		a:hover {
			text-decoration: underline;
			text-decoration-color: var(--servei-text, #000);
		}
	}
}

.pagina-header-info {
	position: relative;
	padding: var(--gapXL) 0 var(--gapM) 0;
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100%);
	color: #fff;
	align-self: end;
}

.pagina-header:has(.no-image) {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;

	.header-media,
	.pagina-header-info {
		grid-column: 1/-1;
		grid-row: 1/2;
	}

	.header-media {
		background: url(img/bg_gradient-2.jpg) no-repeat center center;
		background-size: cover;
		.carousel-gradient {
			display: none;
		}
	}

	.pagina-header-info {
		align-self: end;
		background-image: none;
		background-color: transparent;

		h1.page-title {
			text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
		}
	}
}

/* Carousels swiper */

.swiper-wrapper {
	padding-bottom: var(--gapL);
}

.carousel-container .swiper-pagination-bullet {
	background-color: transparent;
	border: 2px solid var(--accent-accessible);
	opacity: 1;
	width: 10px;
	height: 10px;
}
.carousel-container .swiper-pagination-bullet-active {
	background-color: var(--accent-accessible);
}

/***************************
 Teasers agenda i notícies 
 ***************************/

.grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--gapXL);
}

.agenda-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gapXL);
	margin-bottom: var(--gapL);
}

/* Teasers en general */

.post-card img {
	filter: brightness(1);
	transition: all 0.3s ease;

	&:hover {
		filter: brightness(1.075);
		transition: all 0.3s ease;
	}
}

/* Teaser notícies */

.post-card {
	display: flex !important;
	flex-direction: column;
	gap: 5px;
	position: relative;
}

.post-thumbnail img {
	border-radius: var(--radius);
	aspect-ratio: 1.5;
	object-fit: cover;
	width: 100%;
}

.post-meta {
	margin: 0;
}

.post-date {
	font-weight: 500;
	font-size: var(--txt-14);
}

.post-title {
	font-size: var(--txt-24);
	line-height: 1.16;
	letter-spacing: 1%;
	font-weight: 900;
	margin: 0 !important;

	a {
		color: #000000;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
}

.wp-block-ppp-recent-posts {
	.recent-posts-header {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--gapL);
	}

	.view-all-link {
		display: inline-flex;
		align-items: center;
		gap: var(--gapXXS);
		font-weight: 700;
		font-size: var(--txt-16);
		line-height: 1;
		color: var(--servei-accessible, var(--accent-accessible));
		text-decoration: none;
		white-space: nowrap;
		&:hover {
			text-decoration: underline;
		}

		svg path {
			fill: var(--servei-accessible, var(--accent-accessible)) !important;
		}
	}
}

/* Teaser agenda */

.activitat-teaser {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gapXS);
	align-items: start;
	line-height: 1.4;
	font-size: var(--txt-18);

	h3 {
		font-size: var(--txt-24);
		line-height: 1.16;
		letter-spacing: 1%;
		font-weight: 800;
		margin: 0 !important;
	}
}

.activitat-excerpt > *:first-child {
	margin-top: 0;
}

.activitat-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	aspect-ratio: 1.7;
	object-fit: cover;
}

.activitat-info {
	display: flex;
	flex-direction: column;
	gap: var(--gapXXS);
}

/* Data i lloc */

.activitat-meta {
	display: flex;
	flex-direction: column;
	font-weight: 500;
	gap: var(--gapXXXS);
}

.activitat-info .activitat-data,
.activitat-info .activitat-ubicacio {
	display: flex;
	align-items: center;
	gap: var(--gapXXS);
}
.activitat-info path {
	fill: var(--servei-accessible, var(--accent-accessible));
}

.agenda-tots {
	justify-content: center;
}

/* Teasers actualitat aside */

p.date {
	font-size: var(--txt-16);
	font-weight: 500;
	margin-bottom: 0.5em;
	letter-spacing: 0;
}

.sidebar-ultimes-noticies {
	h2 {
		margin-bottom: 1em;
	}
}

.sidebar-ultimes-noticies-list {
	display: flex;
	flex-direction: column;
	gap: var(--gapL);

	.post-card {
		gap: 0;
	}

	.post-title {
		font-size: var(--txt-20);
	}
}

/* Single servei */

.servei-menu {
	.wrap-wide {
		background-color: var(--bggris);
		padding: var(--gapXXS) 0;
	}

	ul {
		list-style-type: none;
		margin-top: 0;

		li {
			padding-left: 1em;
			position: relative;
			margin-top: 0;
			&.selected {
				font-weight: 700;
			}

			&::before {
				content: "";
				width: 0.65em;
				height: 0.65em;
				background-color: var(--servei-accessible, var(--accent-accessible));
				mask: url(img/arrow_right_white2.svg) no-repeat center / contain;
				display: inline-block;
				position: absolute;
				top: 0.45em;
				left: 0;
			}
		}

		a,
		a:visited {
			text-decoration: none;
		}

		a:hover {
			text-decoration: underline;
		}
	}
}

.servei-perfils-professionals {
	background-color: var(--bggris);
	padding: var(--gapM);
	border-radius: var(--radius);
}

/* Notícia + agenda single */

.single-post,
.single-event {
	.hentry {
		figure {
			margin: 2em 0;
		}

		img {
			border-radius: var(--radius);
		}

		h1 {
			font-size: var(--txt-44);
			font-weight: var(--txt-44-fw);
			line-height: var(--txt-44-lh);
			margin-bottom: var(--gapS);
			color: var(--accent-accessible);
		}

		.post-serveis {
			margin-top: var(--gapXL);
			p {
				margin-bottom: 0.5em;
				font-size: var(--txt-16);
				font-weight: 600;
			}

			ul {
				list-style: none;
				display: flex;
				flex-wrap: wrap;
				gap: calc(var(--gapXXS) / 1.5);
				margin: 0 0 var(--gapM) 0;

				li {
					margin-top: 0;
					a {
						display: block;
						background-color: var(--bggris);
						padding: var(--gapXXXS) var(--gapXS);
						border-radius: var(--radius);
						font-size: var(--txt-14);
						font-weight: 600;
						color: #000;
						text-decoration: none;
						transition: all 0.3s ease;

						&:hover {
							background-color: var(--bggris-fosc);
							transition: all 0.3s ease;
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: none;
	position: static;
	color: var(--bodytxt);
	text-shadow: none;
	font-size: var(--txt-16);
	line-height: 1.2;
	text-align: left;
	padding-left: 0;
	padding-right: 0;
	max-height: none;
	overflow-y: unset;
	scrollbar-color: auto;
	scrollbar-width: auto;
	scrollbar-gutter: unset;
}

.single-event main {
	padding-bottom: 0;

	article {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: var(--gapM);

		.activitat-txt {
			order: 2;
			> figure:first-child {
				margin-top: 0;
			}
		}

		.sidebar-agenda {
			order: 1;
		}
	}
}

.sidebar-agenda {
	background-color: var(--bggris);
	padding: var(--gapM);
	border-radius: var(--radius);
	font-size: var(--txt-18);

	p {
		margin: 0;
	}

	.event-organizer > p {
		font-weight: 600;
		float: left;
	}
}

/* Icones contacte */

a[href*="maps"],
a[href*="tel:"],
a[href*="mailto:"],
a[href*="maps"]:visited,
a[href*="tel:"]:visited,
a[href*="mailto:"]:visited {
	text-decoration: none;
	display: inline-block;
	position: relative;
	padding-left: 1.75em;
}

a[href*="maps"]:hover,
a[href*="tel:"]:hover,
a[href*="mailto:"]:hover {
	text-decoration: underline;
}

a[href*="maps"]::before,
a[href*="tel:"]::before,
a[href*="mailto:"]::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.2em;
	height: 1.2em;
	mask-repeat: no-repeat;
	mask-size: contain;
	background-color: var(--servei-accessible, var(--accent-accessible));
}

footer {
	a[href*="maps"]::before,
	a[href*="tel:"]::before,
	a[href*="mailto:"]::before {
		background-color: var(--accent-accessible);
	}
}

a[href*="maps"]::before {
	mask-image: url("img/ico_lloc.svg");
}

a[href*="tel:"]::before {
	mask-image: url("img/ico_tel.svg");
}

a[href*="mailto:"]::before {
	mask-image: url("img/ico_mail.svg");
}

.contacte-bloc div:not(.bgwhite) h2 {
	font-size: var(--txt-24);
	margin-bottom: var(--gapXXS);
}

/* Paginació */

.nav-links {
	display: flex;
	justify-content: center;
	gap: var(--gapXXS);

	.page-numbers {
		padding: var(--gapXXS) var(--gapS);
		transition: background-color 0.3s ease;
		display: block;
		color: var(--bodytxt);
		font-weight: 700;
		background-color: var(--bggris);
		border-radius: var(--radius);
		&.current {
			color: var(--accent-accessible);
			background-color: transparent;
		}

		&:hover {
			background-color: var(--bggris-fosc);
		}
	}
}

/* Botons */

.boto,
.wp-block-button {
	position: relative;
	display: flex;
	margin-bottom: 0;

	a {
		display: block;
		background-color: var(--accent-accessible);
		color: #fff;
		padding: 0.75em var(--gapM);
		font-size: var(--txt-body);
		font-weight: 800;
		line-height: 1;
		border-radius: var(--radiusS);
		text-decoration: none;
		transition: all 0.3s;
	}
}

main .boto a,
main .wp-block-button a {
	background-color: var(--servei-accessible, var(--accent-accessible));
}

/* Footer */

footer#site-footer {
	background-color: #000;
	color: #fff;
	padding-top: var(--gapXL);

	> .wrap {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--gapXL);
	}

	a,
	a:visited {
		color: #fff;
	}

	ul {
		list-style-type: none;
	}

	p.site-logo {
		display: block;
		width: 200px;
		height: 39px;
		background: url(img/logo_acidh_footer.svg) no-repeat center;
		background-size: contain;
		text-indent: -9999px;
		margin-bottom: var(--gapS);
	}

	p.site-name {
		text-wrap: balance;
	}

	.footer-widgets {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--gapS);

		ul.wp-block-list {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: var(--gapXXXS);
		}
	}

	.footer-xarxes {
		display: flex;
		gap: var(--gapXXS);
		list-style: none;

		.menu-item a {
			display: block;
			width: 36px;
			height: 36px;
			border: 1.5px solid #fff;
			border-radius: 50%;
			background-size: 16px 16px;
			background-repeat: no-repeat;
			background-position: center;
			object-fit: contain;
			text-indent: -9999px;
			transition: all 0.3s ease;

			&:hover {
				border-color: var(--accent-accessible);
			}
		}

		a[href*="facebook.com"] {
			background-image: url(img/ico_fb.svg);
		}

		a[href*="x.com"] {
			background-image: url(img/ico_tw.svg);
		}

		a[href*="linkedin.com"] {
			background-image: url(img/ico_in.svg);
		}

		a[href*="instagram.com"] {
			background-image: url(img/ico_ig.svg);
		}

		a[href*="youtube.com"] {
			background-image: url(img/ico_yt.svg);
		}
	}

	.footer-legal {
		margin-top: var(--gapXXL);
		background-color: #242424;
		color: #b3b3b3;
		font-weight: 400;
		padding: var(--gapXXS) 0;
		.wrap {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			column-gap: var(--gapL);
			row-gap: var(--gapXXXS);
		}
		ul {
			list-style-type: none;
			display: flex;
			flex-wrap: wrap;
			font-size: var(--txt-14);
		}

		li {
			&:after {
				content: "·";
				margin: 0 var(--gapXXS);
				font-weight: 500;
			}

			&:last-child:after {
				content: "";
				margin: 0;
			}
		}
		a,
		a:visited {
			color: #b3b3b3;
		}
	}
}

/* Newsletter footer */

.alta_newsletter {
	display: none;
}

.footer-newsletter {
	background-color: var(--accent-accessible);
	color: #fff;
	padding: var(--gapXL) 0;

	h2.wp-block-heading {
		color: #fff;
		margin-bottom: var(--gapXXS);
	}

	.wp-element-button {
		border: 1.5px solid #fff;
		margin-top: var(--gapS);
	}

	.sinergia-form-wrapper.alta_newsletter {
		max-width: 650px;
		background-color: #fff;
		padding: var(--gapM);
		border-radius: var(--radius);
		font-size: var(--txt-body);
		margin: var(--gapM) auto 0 auto;

		h2 {
			display: none;
		}

		p:empty {
			display: none;
			margin: 0;
		}

		.col {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: var(--gapXXS);
		}

		form .row:first-of-type .col {
			display: grid;
			row-gap: 0;
			column-gap: var(--gapXXS);
			grid-template-columns: 20px 1fr;
			label[for*="proteccio"] {
				grid-row: 1/2;
				grid-column: 2/3;
			}

			input[type="checkbox"] {
				grid-row: 1/2;
				grid-column: 1/2;
			}

			a[href*="avis"] {
				grid-column: 1/-1;
			}

			margin-bottom: var(--gapM);
		}

		label {
			margin-bottom: 0;
		}

		input {
			max-width: 300px;
		}
	}
}

/****************
Responsive
*****************/

@media (max-width: 767px) {
	.home-definicio.accordion-item {
		margin-bottom: 1rem;
	}

	.accordion-header {
		cursor: pointer;
		position: relative;
		transition: all 0.3s ease;
		padding-right: 40px;
		&:hover {
			opacity: 0.8;
		}

		&:focus {
			outline: 2px solid #000;
			outline-offset: 2px;
		}
	}

	.accordion-icon {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		transition: transform 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		color: var(--accent-corporatiu);
		svg {
			transition: transform 0.3s ease;
		}
	}

	.accordion-active .accordion-icon svg {
		transform: rotate(180deg);
	}

	.accordion-content {
		transition:
			max-height 0.4s ease,
			padding 0.4s ease;
		overflow: hidden;
		max-height: 0;
	}

	.accordion-active .accordion-content {
		padding-top: 1rem;
	}

	.accordion-item {
		border-bottom: var(--border-gris);
		padding-bottom: 1rem;
		&:last-child {
			border-bottom: none;
			padding-bottom: 0;
			margin-bottom: 0;
		}
	}
}

@media (min-width: 576px) {
	#site-header {
		p.header-cta.boto {
			display: flex;
			order: 2;
			margin-left: auto;

			a {
				padding: var(--gapXXS) var(--gapS);
			}
		}
	}

	.single-servei .activitat-teaser {
		grid-template-columns: 1fr 1fr;
		gap: var(--gapL);
	}

	footer#site-footer .footer-legal li {
		white-space: nowrap;
	}
}

@media (min-width: 768px) {
	main {
		margin-bottom: calc(var(--gap-block) * 2);

		.content-wrap,
		.content-wrap > section,
		.content-wrap > div {
			margin-top: calc(var(--gap-block) * 2);
		}

		.content-wrap > h2.servei-child-title + section,
		.content-wrap > h2.servei-child-title + div {
			margin-top: calc(var(--gap-block) * 1);
		}
	}

	.home main > section,
	.home main > div:not(.pagina-header) {
		margin-top: calc(var(--gap-block) * 2);
	}

	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
		column-gap: var(--gapM);
		row-gap: var(--gapXL);
	}

	#site-header {
		padding: var(--gapS) var(--gapM);

		.site-title a {
			width: 150px;
			height: 50px;
		}
	}

	.bgwhite {
		padding: var(--gapL);
	}

	.bggris {
		padding: var(--gapXL) 0;
	}

	/* Pàgina header */

	.pagina-header .header-media {
		img {
			min-height: 200px;
			height: 30vh;
		}
		&.no-image {
			min-height: 100px;
			height: 15vh;
		}
	}

	/* Single servei - servei menu */

	.servei-menu {
		ul {
			display: flex;
			list-style-type: none;
			flex-wrap: wrap;

			li {
				padding-left: 0;
				&::after {
					content: "·";
					margin: 0 var(--gapXS);
					font-weight: 500;
				}

				&:first-child::after {
					content: "\00BB";
				}

				&:last-child::after {
					content: "";
					margin: 0;
				}

				&::before {
					content: none;
				}

				&.current-menu-item {
					font-weight: 700;
				}
			}
		}
	}

	.servei-perfils-professionals {
		padding: var(--gapL);
	}

	.page-template-page-with-children .servei-menu {
		background-color: var(--bggris);
		ul li:first-child::after {
			content: "·";
		}
	}

	/* Single agenda */

	.single-event main article {
		display: grid;
		grid-template-columns: minmax(400px, 700px) minmax(220px, 360px);
		column-gap: var(--gapM);
		align-items: start;
		justify-content: center;

		h1 {
			grid-column: 1/-1;
		}

		.activitat-txt {
			order: 1;
		}

		.sidebar-agenda {
			order: 2;
		}
	}

	/* Botó fletxa */

	.boto,
	.wp-block-button {
		a {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 1em 30px;
		}

		a::after {
			content: url(img/arrow_right_white.svg);
			object-fit: contain;
		}

		a:hover {
			padding-left: 25px;
			padding-right: 25px;
			gap: 20px;
			transition: all 0.3s;
		}
	}

	#site-header p.header-cta.boto a {
		padding: 1em 25px;
		&:hover {
			padding-left: 20px;
			padding-right: 20px;
		}
	}

	/* Footer */
	footer#site-footer {
		.wrap {
			grid-template-columns: repeat(2, 1fr);
			.footer-xxss {
				justify-self: start;
			}
		}

		p.site-logo {
			width: 260px;
			height: 50px;
			margin-bottom: var(--gapL);
		}

		.footer-widgets {
			margin-top: calc(var(--gapL) + 54px);
		}

		.footer-legal li {
			white-space: nowrap;
		}

		.menu-item a {
			width: 50px;
			height: 50px;
			background-size: 22px 22px;
		}
	}

	.footer-newsletter {
		font-size: var(--txt-24);

		.newsletter-info > .wp-block-group__inner-container {
			display: grid;
			grid-template-columns: 1fr max-content;
			align-items: center;
			gap: var(--gapL);
		}
	}
}

@media (min-width: 900px) {
	h2.section-title.has-text-align-center {
		text-align: center;
	}
}

@media (min-width: 1024px) {
	#site-header {
		display: grid;
		grid-template-columns: 170px 1fr 170px;
		gap: var(--gapXXS);
		padding: var(--gapS) var(--gapM);

		#site-navigation {
			order: 2;
		}

		p.header-cta.boto {
			order: 3;
		}

		.grid-3 {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.bggris {
		padding: var(--gapXXL) 0;
	}

	.servei-perfils-professionals {
		padding: var(--gapL) var(--gapXL);
	}

	/* Notícia + agenda single */

	.page.page-template-page-agenda main {
		padding-bottom: 0;
	}

	.page.page-template-page-agenda main,
	.single-event main,
	.single-post main {
		gap: calc(var(--gap-block) * 1.5);

		.bggris {
			padding: var(--gapXL) 0;

			h2 {
				margin-top: 0;
				margin-bottom: var(--gapM);
			}
		}
	}

	.single-event article.event-single {
		display: grid;
		grid-template-columns: minmax(400px, 700px) minmax(260px, 360px);
		column-gap: var(--gapXL);
	}

	.single-post main .wrap {
		display: grid;
		grid-template-columns: minmax(400px, 700px) minmax(260px, 360px);
		gap: var(--gapXXL);
		justify-content: space-between;
		align-items: baseline;
	}
}

@media (min-width: 1200px) {
	:root {
		--txt-body-lh: 1.6;
	}

	.content-wrap {
		.wp-block-group,
		.wp-block-column,
		.wp-block-media-text {
			ul li,
			ol li {
				padding-left: calc(1.5em + var(--gapXS));
				&::before {
					top: 0.1em;
					width: 1.5em;
					height: 1.5em;
					font-size: var(--txt-body);
				}
			}
		}
	}

	/* Estructura */

	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
		align-items: start;
	}

	/* Header */

	#site-header {
		grid-template-columns: 180px 1fr 180px;
		p.header-cta.boto a {
			padding: 0.75em 25px;
			&:hover {
				padding: 0.75em 20px;
			}
		}
	}

	/* Pàgina header */

	.pagina-header .header-media {
		img {
			min-height: 300px;
			height: 50vh;
		}
		&.no-image {
			min-height: 150px;
			height: 20vh;
		}
	}

	/* Footer */
	footer#site-footer {
		> .wrap {
			grid-template-columns: repeat(3, 1fr);
			gap: var(--gapXL);

			.footer-xxss {
				justify-self: end;
			}
		}
		.footer-logo p.site-logo {
			width: 277px;
			height: 54px;
		}
	}
}

@media (min-width: 1600px) {
	#page.site {
		display: grid;
		grid-template-columns: 1fr;
		justify-content: center;
		align-items: start;
	}

	#site-header,
	#content {
		grid-column: 1/-1;
		grid-row: 1/2;
	}
	body:not(.home) .content-wrap > .wrap .content-wrap,
	body:not(.home) .content-wrap > .wrap-wide,
	.wrap.wrap-wide,
	.wrap-wide,
	body:not(.home) .content-wrap > section.wp-block-ppp-recent-posts,
	body:not(.home) .content-wrap > section.wp-block-ppp-agenda {
		border-radius: var(--radius);
		width: calc(100% - var(--gapL) * 2);
	}

	.content-wrap > .wrap-wide,
	.content-wrap .wrap.wrap-wide,
	.content-wrap > .bggris {
		width: 100%;
		border-radius: var(--radius);
		max-width: var(--wrap-wide);
	}

	/* Header */

	#site-header {
		grid-template-columns: 220px 1fr 220px;
		grid-template-areas: "logo menu cta";
		border-radius: var(--radius);
		width: calc(100% - var(--gapL) * 2);
		z-index: 99;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
		margin-top: var(--gapM);

		.site-title a {
			width: 190px;
			height: 50px;
		}

		p.header-cta.boto a {
			padding: 1em 35px;
			&:hover {
				padding: 1em 30px;
			}
		}
	}

	.pagina-header .header-media.no-image {
		min-height: 300px;
		height: 30vh;
	}

	.single-servei .header-media img {
		height: 80vh;
	}

	/* Header pàgines */

	.servei-header-info {
		position: relative;
		z-index: 2;
		margin-top: calc(var(--gapXXL) * -1);
		border-radius: var(--radius);
	}

	main:has(nav.servei-menu) .servei-header-info {
		border-radius: var(--radius) var(--radius) 0 0;
	}

	.servei-menu.wrap.wrap-wide {
		border-radius: 0 0 var(--radius) var(--radius);
	}
}