/*
Theme Name: ACSA
Theme URI: https://youneeda.website
Author: Snaptin Media S.L.
Author URI: https://youneeda.website
Description: Block theme for ACSA — Armengol Cabanes S.A. Corporate single-page site with split image sections, company cards and a built-in contact form. Catalan first.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: acsa
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu, editor-style, wide-blocks
*/

/* ---------------------------------------------------------------
   0. Brand colours

   Add one of these classes to any block (Advanced -> Additional CSS
   class) and everything inside it picks up that brand's colour:
   accent for links, icons and rules; the CF7 submit button; and
   backgrounds via the -bg variants below.
   --------------------------------------------------------------- */

:root {
	--acsa-accent: #0a0a0a;
	--acsa-wide: 1240px;
}

.brand-bomar   { --acsa-accent: #a0672d; }
.brand-andolac { --acsa-accent: #044f8b; }
.brand-cedi    { --acsa-accent: #182454; }
.brand-gelesa  { --acsa-accent: #eb6309; }
.brand-gadsa   { --acsa-accent: #005e63; }

/* Solid brand background with legible text on top */
.brand-bg {
	background-color: var(--acsa-accent);
	color: #fff;
}

.brand-bg :is(h1, h2, h3, h4, p, li, a) { color: inherit; }

/* Dark footer tints */
.brand-bomar-dark   { background-color: #2e1e0c; }
.brand-andolac-dark { background-color: #04223c; }
.brand-cedi-dark    { background-color: #121a3a; }
.brand-gelesa-dark  { background-color: #241608; }
.brand-gadsa-dark   { background-color: #04262b; }

/* Anything brand-tinted reads the accent */
.acsa-link { color: var(--acsa-accent); }
.acsa-values__icon { color: var(--acsa-accent); }

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

:where(a, button, input, textarea, summary):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.acsa-measure { max-width: 34ch; }
.acsa-measure-wide { max-width: 46ch; }

/* ---------------------------------------------------------------
   2. Header — transparent overlay on the hero
   --------------------------------------------------------------- */

.acsa-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	color: #fff;
}

.acsa-header a { color: #fff; }

.acsa-header .wp-block-navigation {
	font-size: 0.875rem;
	letter-spacing: 0.01em;
}

.acsa-header .wp-block-navigation a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.acsa-header .wp-block-site-title a { text-decoration: none; }

.acsa-header .wp-block-navigation__responsive-container.is-menu-open {
	background: #0e1116;
	padding: 2rem clamp(1.25rem, 4vw, 4rem);
}

/* Inner pages get a dark band so the white header stays legible */
.acsa-pagehead {
	position: relative;
	padding-top: clamp(8rem, 6rem + 8vw, 12rem);
	padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}

.acsa-pagehead h1 { color: #fff; }

/* Simple text pages (privacy etc.): the text block gets breathing room
   above the full-width footer. Add "acsa-text-page" to the wrapper group. */
.acsa-text-page {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* ---------------------------------------------------------------
   3. Hero
   --------------------------------------------------------------- */

.acsa-hero.wp-block-cover {
	min-height: 92vh;
	min-height: 92svh;
	align-items: stretch;
}

/* Inner container centres its content; the nav is lifted out of the flow */
.acsa-hero > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--30);
}

.acsa-hero h1 { margin-block: 0; }

/* Faux nav built from blocks — add "acsa-faux-nav" to the row group */
.acsa-faux-nav {
	position: absolute;
	inset-inline: 0;
	inset-block-start: var(--wp--preset--spacing--30);
	width: auto;
	max-width: none;
	color: #fff;
	padding-inline: clamp(1.25rem, 4vw, 4rem);
}

.acsa-faux-nav a {
	color: #fff;
	text-decoration: none;
}

.acsa-faux-nav a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.acsa-faux-nav p { margin: 0; }

.acsa-faux-nav img {
	display: block;
	height: auto;
}

/* Stack the logo above the links on narrow screens.
   Doubled class beats the Group block's own flex layout rule. */
@media (max-width: 640px) {
	.acsa-faux-nav.acsa-faux-nav {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 1rem;
	}

	.acsa-faux-nav { font-size: 0.8125rem; }

	/* Smaller logo; flex-basis reset stops its desktop width being
	   used as its height once the row turns into a column */
	.acsa-faux-nav .wp-block-image {
		flex-basis: auto !important;
		margin: 0 !important;
	}

	.acsa-faux-nav .wp-block-image img {
		width: 140px !important;
		max-width: 40vw;
		height: auto !important;
	}

	.acsa-faux-nav > .wp-block-group {
		justify-content: center;
		gap: 1.25rem;
	}
}

.acsa-hero .wp-block-cover__inner-container { text-align: center; }

.acsa-hero h1 {
	color: #fff;
	text-wrap: balance;
	max-width: 16ch;
	margin-inline: auto;
	font-weight: 400;
}

/* Sections and footer live in post content now — let alignfull reach the edge */
.wp-block-post-content > .alignfull {
	max-width: none;
	width: auto;
	margin-left: calc(-1 * var(--wp--style--root--padding-left));
	margin-right: calc(-1 * var(--wp--style--root--padding-right));
}

/* ---------------------------------------------------------------
   4. Split sections — image bleeds to one edge, text sits inset
   --------------------------------------------------------------- */

.acsa-split.wp-block-columns {
	gap: 0;
	align-items: stretch;
	margin-block: 0;
	padding-top: 0;
}

/* Sections carry their own padding — no global block gap between them */
.wp-site-blocks main > *,
.editor-styles-wrapper main > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ...nor above <main> itself, which core spaces off the header */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.editor-styles-wrapper > main {
	margin-block-start: 0;
}

/* Sections live inside post content, whose constrained layout adds a
   block gap between every child. Every section carries its own padding,
   so kill it here once instead of per block. The extra class outranks
   core's layout CSS, which is printed after this stylesheet. */
.wp-site-blocks .wp-block-post-content > *,
.editor-styles-wrapper .wp-block-post-content > *,
.editor-styles-wrapper .block-editor-block-list__layout > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.acsa-split > .wp-block-column { margin: 0; }

.acsa-split .acsa-split__media {
	min-height: clamp(300px, 42vw, 560px);
	background-size: cover;
	background-position: center;
}

.acsa-split .acsa-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.acsa-split .acsa-split__media figure,
.acsa-split .acsa-split__media .wp-block-image {
	height: 100%;
	margin: 0;
}

.acsa-split .acsa-split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 6rem);
}

.acsa-split .acsa-split__text > * { max-width: calc(var(--acsa-wide) / 2); }

/* Keep the text block hugging the image side. A constrained layout on the
   column would otherwise centre each child with auto margins. */
.acsa-split .acsa-split__text > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Text-left sections line up with the wide container's left edge, so the
   heading sits on the same axis as "Els nostres valors" below it. */
.acsa-split--text-first .acsa-split__text {
	padding-left: max(
		clamp(1.5rem, 5vw, 6rem),
		calc((100vw - var(--acsa-wide)) / 2)
	);
}

/* Text-left variant sits flush against the page gutter */
.acsa-split--text-left .acsa-split__text { align-items: flex-start; }

@media (max-width: 781px) {
	.acsa-split.wp-block-columns { flex-direction: column; }
	.acsa-split--media-first { flex-direction: column; }
	.acsa-split--text-first .acsa-split__media { order: -1; }
	.acsa-split .acsa-split__media { min-height: 260px; }
}

/* Full-height sections — add "acsa-tall" via Advanced → Additional CSS class */
.acsa-tall {
	min-height: 75svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Stacked on mobile, two tall halves is too much scrolling */
@media (max-width: 781px) {
	.acsa-tall { min-height: 0; }
}

/* ---------------------------------------------------------------
   5. Intro block — two-tone statement
   --------------------------------------------------------------- */

.acsa-statement {
	text-align: center;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin-inline: auto;
	max-width: 24ch;
}

.acsa-statement .acsa-statement__second {
	display: block;
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------
   6. Timeline
   Native blocks: a Columns block with the class "acsa-timeline",
   each column = logo Image + year Paragraph. Line, dots and arrow
   are drawn here. Add/remove a column to add/remove a company.
   Tune with --tl-logo-h on the block if logos need more room.
   --------------------------------------------------------------- */

.acsa-timeline.wp-block-columns {
	--tl-logo-h: 48px;
	--tl-gap: 1.75rem;                                  /* logo → line */
	--tl-line-y: calc(var(--tl-logo-h) + var(--tl-gap));
	--tl-color: var(--wp--preset--color--contrast, #111);
	position: relative;
	gap: 0 !important;
	align-items: stretch;
	padding-right: 3rem;                                /* tail before the arrow */
}

/* the line */
.acsa-timeline.wp-block-columns::before {
	content: "";
	position: absolute;
	top: var(--tl-line-y);
	left: 0;
	right: 0;
	height: 1px;
	background: var(--tl-color);
}

/* the arrowhead */
.acsa-timeline.wp-block-columns::after {
	content: "";
	position: absolute;
	top: calc(var(--tl-line-y) - 3.5px);
	right: 0;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--tl-color);
	border-right: 1px solid var(--tl-color);
	transform: rotate(45deg);
}

.acsa-timeline > .wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* the dot */
.acsa-timeline > .wp-block-column::after {
	content: "";
	position: absolute;
	top: var(--tl-line-y);
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--acsa-accent, var(--tl-color));
	transform: translate(-50%, -50%);
}

.acsa-timeline .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--tl-logo-h);
	margin: 0 !important;
}

.acsa-timeline .wp-block-image img {
	max-height: 100% !important;
	max-width: 130px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

.acsa-timeline .wp-block-column > p {
	margin: calc(var(--tl-gap) + 1.1rem) 0 0 !important;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
}

/* Mobile: the timeline stays horizontal and swipes sideways, edge to
   edge. The line is drawn per column so it runs the full scroll width. */
@media (max-width: 781px) {
	.wp-site-blocks .acsa-timeline.wp-block-columns {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		width: 100vw;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding: 0 1.25rem 0.5rem !important;
		scroll-padding-inline: 1.25rem;
	}
	.acsa-timeline.wp-block-columns::-webkit-scrollbar { display: none; }
	.wp-site-blocks .acsa-timeline.wp-block-columns::before,
	.wp-site-blocks .acsa-timeline.wp-block-columns::after { display: none; }
	.wp-site-blocks .acsa-timeline.wp-block-columns > .wp-block-column {
		flex: 0 0 42% !important;
		scroll-snap-align: start;
		background: linear-gradient(var(--tl-color), var(--tl-color)) 0 var(--tl-line-y) / 100% 1px no-repeat;
	}
}

/* ---------------------------------------------------------------
   7. Values
   --------------------------------------------------------------- */

.acsa-values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
}

.acsa-values__icon {
	display: block;
	margin-bottom: 1.5rem;
	color: var(--wp--preset--color--contrast);
}

/* Value icons (Icon blocks at the top of a column): one height on
   every page. Each SVG has its own viewBox, so at a fixed width tall
   icons came out twice the size of wide ones. */
.wp-block-column > .wp-block-icon svg {
	display: block;
	height: var(--acsa-value-icon-h, 22px) !important;
	width: auto !important;
	max-width: 30px !important;
}

.acsa-values h3 { margin: 0 0 0.6rem; font-size: 1.125rem; font-weight: 500; }

.acsa-values p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

@media (max-width: 900px) { .acsa-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .acsa-values { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   8. Company cards — pattern "acsa/companies"
   Cards wrap three per row; a short last row is centred.
   --------------------------------------------------------------- */

.acsa-companies > .wp-block-heading { margin-bottom: clamp(2rem, 5vw, 3.5rem) !important; }

.acsa-cards.wp-block-group {
	--acsa-card-gap: clamp(1rem, 2vw, 1.5rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--acsa-card-gap);
}

.acsa-cards > .acsa-card {
	flex: 0 1 calc((100% - 2 * var(--acsa-card-gap)) / 3);
	min-width: 240px;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	padding: 2rem 1.9rem 1.9rem;
	background: var(--wp--preset--color--base);
	border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.acsa-cards > .acsa-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

.acsa-card > * { margin-block: 0 !important; }

.acsa-card .acsa-card__logo {
	height: 34px;
	display: flex;
	align-items: center;
	margin-bottom: 1.75rem !important;
}
.acsa-card .acsa-card__logo img {
	max-height: 100% !important;
	max-width: 140px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

.acsa-card__title,
.acsa-card__text {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.acsa-card__title { color: var(--wp--preset--color--contrast); opacity: 0.75; }

.acsa-card__more { margin-top: auto !important; padding-top: 1.75rem; }
.acsa-card__more a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.acsa-card__more a span { font-size: 1.1em; transition: transform 0.2s ease; }
.acsa-card:hover .acsa-card__more a span { transform: translateX(3px); }

@media (max-width: 781px) {
	.wp-site-blocks .acsa-cards.wp-block-group {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		width: 100vw;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding: 0.25rem 1.25rem 1rem !important;
		scroll-padding-inline: 1.25rem;
	}
	.acsa-cards.wp-block-group::-webkit-scrollbar { display: none; }
	.wp-site-blocks .acsa-cards > .acsa-card {
		flex: 0 0 80%;
		min-width: 0;
		scroll-snap-align: start;
	}
}

.acsa-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	margin-top: 0.5rem;
}

.acsa-link svg { transition: transform 0.2s ease; }
.acsa-link:hover { text-decoration: none; }
.acsa-link:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------
   9. Contact form
   --------------------------------------------------------------- */

.acsa-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	max-width: 720px;
	margin-inline: auto;
}

.acsa-form__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.acsa-form label.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.acsa-form input[type="text"],
.acsa-form input[type="email"],
.acsa-form input[type="tel"],
.acsa-form textarea {
	width: 100%;
	padding: 0.9rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
}

.acsa-form input::placeholder,
.acsa-form textarea::placeholder { color: #9a9a95; }

.acsa-form input:focus,
.acsa-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--contrast);
}

.acsa-form__col {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.acsa-form__col--right { flex: 1; }
.acsa-form__col--right textarea { flex: 1; min-height: 160px; resize: vertical; }

.acsa-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin: 0.35rem 0 0;
}

.acsa-form__consent a { color: var(--wp--preset--color--contrast); text-decoration: underline; }

.acsa-form__submit {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.acsa-form__submit button {
	padding: 0.9rem 3rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	background: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.acsa-form__submit button:hover { background: #2b2b2b; }

.acsa-form__notice {
	grid-column: 1 / -1;
	padding: 0.9rem 1rem;
	border-radius: 4px;
	font-size: 0.875rem;
}

.acsa-form__notice--ok { background: #eef5ee; color: #1f4d2a; }
.acsa-form__notice--error { background: #fbeeee; color: #7a2020; }

@media (max-width: 700px) {
	.acsa-form { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   9b. Contact Form 7
   Markup lives in the CF7 form editor; see README.
   --------------------------------------------------------------- */

/* Utility: row of brand logos — centred, height-matched.
   Add "acsa-logos" to the Columns block. Tune with --acsa-logo-height. */
.acsa-logos.wp-block-columns { align-items: center; }

.acsa-logos .wp-block-column {
	display: flex;
	align-items: center;
	justify-content: center;
}

.acsa-logos .wp-block-image,
.acsa-logos figure { margin: 0; }

.acsa-logos img {
	max-height: var(--acsa-logo-height, 64px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Add "acsa-logos-mono" alongside "acsa-logos" to flatten mismatched
   logos to greyscale. Colour returns on hover. */
.acsa-logos-mono img {
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.acsa-logos-mono img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Drop the hover reveal if you want them permanently flat */
.acsa-logos-mono.is-static img:hover {
	filter: grayscale(1);
	opacity: 0.7;
}

/* Utility: vertical rule between columns.
   Add "acsa-divided" to the Columns block via Advanced -> Additional CSS class. */
.acsa-divided.wp-block-columns > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--acsa-rule-color, #c9c9c4);
	padding-left: clamp(1.5rem, 3vw, 3rem);
}

@media (max-width: 781px) {
	.acsa-divided.wp-block-columns > .wp-block-column + .wp-block-column {
		border-left: 0;
		padding-left: 0;
		padding-top: 1.5rem;
		border-top: 1px solid var(--acsa-rule-color, #c9c9c4);
	}
}

/* Utility: match the form's width on any block.
   Add "acsa-form-width" via Advanced -> Additional CSS class.
   Doubled class outranks core's constrained-layout rule. */
.acsa-form-width.acsa-form-width {
	max-width: var(--acsa-form-width, 1040px);
	margin-inline: auto;
}

/* CF7's wrapper is a child of a constrained layout, so it inherits the global
   content-size cap. Release it here and let --acsa-form-width decide instead. */
.wpcf7 {
	max-width: none;
	width: 100%;
}

/* Uses the columns block's own flex layout — see README for the CF7 markup */
.acsa-cf7.wp-block-columns {
	gap: 1.5rem;
	align-items: flex-start;
	max-width: var(--acsa-form-width, 1040px);
	margin-inline: auto;
}

.acsa-cf7__col.wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex-basis: 0;
	flex-grow: 1;
}

/* Core's :where(.is-layout-flow) > * rule adds a 1.5rem top margin.
   One class outranks it — its specificity is only (0,0,1). */
.acsa-cf7__col > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* CF7 wraps every control in a span — make them behave like blocks */
.acsa-cf7 .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 1.5rem;
}

/* Neutralise CF7's auto-inserted <p>/<br> if WPCF7_AUTOP is still on */
.wpcf7 p,
.wpcf7-form p,
.acsa-cf7 p {
	margin: 0;
	padding: 0;
	display: contents;
}

.wpcf7 br,
.acsa-cf7 br { display: none; }
.acsa-cf7__message { display: flex; flex: 1; }
.acsa-cf7__message .wpcf7-form-control-wrap { flex: 1; display: flex; margin-bottom: 0; }

.acsa-cf7 input[type="text"],
.acsa-cf7 input[type="email"],
.acsa-cf7 input[type="tel"],
.acsa-cf7 textarea {
	width: 100%;
	padding: 1.15rem 1.25rem;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	background: #f5f3f3;
	border: 0;
	border-radius: 3px;
}

.acsa-cf7 textarea {
	flex: 1;
	min-height: 175px;
	resize: vertical;
}

.acsa-cf7 input::placeholder,
.acsa-cf7 textarea::placeholder {
	color: #8d8d88;
	opacity: 1;
}

.acsa-cf7 input:focus,
.acsa-cf7 textarea:focus {
	outline: 2px solid var(--acsa-accent, var(--wp--preset--color--contrast));
	outline-offset: -2px;
}

.acsa-cf7__consent {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.acsa-cf7__consent .wpcf7-list-item { margin: 0; }
.acsa-cf7__consent .wpcf7-list-item label { display: flex; align-items: center; gap: 0.6rem; }

.acsa-cf7__consent input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--wp--preset--color--contrast);
}

.acsa-cf7__consent a {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

.acsa-cf7__submit {
	display: flex;
	justify-content: flex-start;
	margin-top: 1.5rem;
}

/* Falls back: page override -> brand accent -> black */
.acsa-cf7 input[type="submit"] {
	padding: 1.05rem 3.25rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--acsa-button-text, #fff);
	background: var(--acsa-button-bg, var(--acsa-accent, var(--wp--preset--color--contrast)));
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.acsa-cf7 input[type="submit"]:hover {
	background: color-mix(
		in srgb,
		var(--acsa-button-bg, var(--acsa-accent, var(--wp--preset--color--contrast))) 85%,
		#000
	);
}

/* CF7's own messaging */
.acsa-cf7 .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	color: #a32020;
}

.wpcf7-response-output {
	max-width: var(--acsa-form-width, 100%);
	margin: 1.5rem auto 0 !important;
	padding: 0.9rem 1.1rem !important;
	border-width: 1px !important;
	border-radius: 4px;
	font-size: 0.875rem;
	text-align: center;
}

.acsa-cf7 .wpcf7-spinner { margin: 0 0 0 0.75rem; }

@media (max-width: 781px) {
	.acsa-cf7.wp-block-columns { flex-direction: column; }
	.acsa-cf7__message .wpcf7-form-control-wrap { min-height: 175px; }
}

/* ---------------------------------------------------------------
   10. Contact details + map
   --------------------------------------------------------------- */

.acsa-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, auto));
	gap: clamp(2rem, 5vw, 5rem);
	justify-content: center;
	font-size: 1rem;
	line-height: 1.7;
}

.acsa-details strong { font-weight: 600; color: var(--wp--preset--color--contrast); }
.acsa-details p { margin: 0; }

@media (max-width: 600px) { .acsa-details { grid-template-columns: 1fr; } }

.acsa-map {
	position: relative;
	margin-block: 0;
	width: 100%;
	aspect-ratio: 21 / 9;
	min-height: 320px;
}

/* Phones: a fixed height instead. aspect-ratio + min-height made the
   map grow sideways (to ~750px) and push the whole page wider. */
@media (max-width: 781px) {
	.acsa-map {
		aspect-ratio: auto;
		min-height: 0;
		height: 360px;
	}
}

.acsa-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---------------------------------------------------------------
   11. Footer
   --------------------------------------------------------------- */

.acsa-footer { color: #fff; }
.acsa-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s ease; }
.acsa-footer a:hover { color: #fff; text-decoration: none; }
.acsa-footer .wp-block-navigation .wp-block-navigation-item__content { color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease; }
.acsa-footer .wp-block-navigation .wp-block-navigation-item__content:hover { color: #fff; }

.acsa-footer h2,
.acsa-footer h3 {
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	margin: 0 0 1.1rem;
}

.acsa-footer p,
.acsa-footer li:not(.wp-block-social-link) {
	font-size: 0.875rem;
	line-height: 1.85;
	color: var(--wp--preset--color--dark-muted);
	margin: 0;
}

/* Social icons size themselves from the block's own font-size — don't fight it */
.acsa-footer .wp-block-social-link { font-size: inherit; }

.acsa-footer ul { list-style: none; padding: 0; margin: 0; }

.acsa-footer .wp-block-social-links { margin-top: 1.25rem; }
.acsa-footer .wp-block-social-link { color: #fff; }

.acsa-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	font-size: 0.75rem;
	color: var(--wp--preset--color--dark-muted);
}

.acsa-footer__bottom nav ul { display: flex; gap: 1.5rem; }

/* ---------------------------------------------------------------
   12. Editor niceties
   --------------------------------------------------------------- */

/* Keep the overlay clickable and selectable in the editor */
.editor-styles-wrapper .acsa-header { pointer-events: auto; }

/* Logo row: keep logos in a wrapping row on mobile instead of stacking,
   and hard-cap their height regardless of the size set in the editor. */
.acsa-logos.wp-block-columns {
	gap: clamp(1.5rem, 4vw, 4rem);
	justify-content: space-between;
}

.acsa-logos .wp-block-image img,
.acsa-logos img {
	max-height: var(--acsa-logo-height, 64px) !important;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
}

/* Mobile: logos stack (keep "Apilar en móvil" on), each centred and
   capped so they don't blow up to full width. */
@media (max-width: 781px) {
	.acsa-logos.wp-block-columns {
		gap: 2rem;
	}
	.acsa-logos.wp-block-columns > .wp-block-column {
		justify-content: center;
	}
	.acsa-logos .wp-block-image,
	.acsa-logos figure {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.acsa-logos img {
		max-width: var(--acsa-logo-max-width-mobile, 160px) !important;
		max-height: 56px !important;
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------
   Stats / figures — pattern "acsa/stats".
   Number colour follows the page brand: add e.g. "brand-gelesa"
   to the section (or any ancestor) to get the orange.
   --------------------------------------------------------------- */
.acsa-stats > .wp-block-heading:not(:first-child) { margin-top: clamp(3rem, 6vw, 5rem); }
.acsa-stats > h3.wp-block-heading + .acsa-stats__row { margin-top: clamp(3rem, 7vw, 6rem); }
.acsa-stats__row { align-items: flex-start; }

.acsa-stat { gap: 1.25rem !important; align-items: flex-start; }
.acsa-stat__num {
	margin: 0 !important;
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--acsa-accent);
}
.acsa-stat--xl .acsa-stat__num { font-size: clamp(2.5rem, 5vw, 3.5rem); }
.acsa-stat__label,
.acsa-stat-list {
	margin: 0 !important;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.acsa-stat__label { padding-top: 0.3em; max-width: 14rem; }
.acsa-stat-list { padding-left: 1.1em; }
.acsa-stat-list li + li { margin-top: 0.25em; }

/* Stats: never break inside a word, keep numbers whole, cap the width */
/* The section keeps the wide width (so its left edge lines up with the
   other sections); its contents are capped and sit on the left.
   Change 1040px here to make the figures wider or narrower. */
.acsa-stats.wp-block-group > * {
	max-width: 1040px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.acsa-stat__num { flex-shrink: 0; }
.acsa-stat__label {
	min-width: min-content;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Stats rows: divider sits exactly halfway between columns.
   Gap is replaced by equal padding either side of each rule. */
.acsa-stats__row.wp-block-columns {
	--acsa-divider-space: clamp(1.5rem, 3vw, 2.5rem);
	gap: 0 !important;
}
.acsa-stats__row.wp-block-columns > .wp-block-column {
	padding-right: var(--acsa-divider-space);
}
.acsa-stats__row.wp-block-columns > .wp-block-column:last-child {
	padding-right: 0;
}
.acsa-stats__row.wp-block-columns > .wp-block-column + .wp-block-column {
	padding-left: var(--acsa-divider-space);
}

@media (max-width: 781px) {
	.acsa-stats__row.wp-block-columns > .wp-block-column {
		padding: 0 0 1.5rem;
	}
	.acsa-stats__row.wp-block-columns > .wp-block-column + .wp-block-column {
		padding: 1.5rem 0;
	}
}

/* Split text column: always fill the row height, centre vertically and keep
   its padding — even if the column has its own alignment or padding set in
   the editor (which would otherwise win). */
.acsa-split .acsa-split__text {
	align-self: stretch !important;
	justify-content: center !important;
	padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 6rem) !important;
}
.acsa-split--text-first .acsa-split__text {
	padding-left: max(clamp(1.5rem, 5vw, 6rem), calc((100vw - var(--acsa-wide)) / 2)) !important;
}

/* Icon blocks in columns (e.g. "Els nostres valors"): fixed-height icon box,
   so the headings and text underneath line up across columns whatever the
   icon's shape. Change 40px to adjust. */
.wp-block-columns .wp-block-icon {
	display: flex;
	align-items: flex-end;
	height: var(--acsa-icon-box, 40px);
	margin-bottom: 1.25rem !important;
}
.wp-block-columns .wp-block-icon svg {
	max-height: 100%;
	width: auto;
}

/* Split text: same comfortable line length on both sides.
   Change 34rem to adjust. */
.acsa-split .acsa-split__text > *,
.acsa-split .acsa-split__text > .wp-block-group > * {
	max-width: var(--acsa-split-text-max, 34rem) !important;
}


/* ---------------------------------------------------------------
   Motion — scroll reveal, hero entrance and parallax, logo marquee.
   Front end only: everything is scoped to .wp-site-blocks so the
   editor canvas stays static.
   --------------------------------------------------------------- */

/* Scroll reveal. assets/js/acsa.js adds .acsa-reveal to text and small
   media and .is-visible as they enter the viewport. Large images are
   never hidden. Without JS nothing is hidden. Opt a block out with
   "acsa-no-anim". */
.acsa-motion .acsa-reveal {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition:
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--acsa-delay, 0ms);
}

.acsa-motion .acsa-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Hero: content rises in on load; the image drifts slowly on scroll
   (parallax, set by the script via the "translate" property). Add
   "acsa-hero--static" to a hero to switch the parallax off. */
@keyframes acsa-rise {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes acsa-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Extra image above the hero's top edge for the drift to reveal.
   Must match the 0.2 rate in acsa.js. */
.wp-site-blocks .acsa-hero:not(.acsa-hero--static) .wp-block-cover__image-background {
	top: -20%;
	height: calc(120% + 4px); /* a few px of bleed below, clipped by the hero */
	will-change: translate;
}

.wp-site-blocks .acsa-hero > .wp-block-cover__inner-container > :not(.acsa-faux-nav) {
	animation: acsa-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.wp-site-blocks .acsa-hero > .wp-block-cover__inner-container > :not(.acsa-faux-nav) + :not(.acsa-faux-nav) {
	animation-delay: 0.3s;
}

.wp-site-blocks .acsa-hero .acsa-faux-nav {
	animation: acsa-fade 0.9s ease 0.4s both;
}

/* Logo marquee. Add "acsa-marquee" to a Columns block or a Row group
   of logo images (with "acsa-logos" for the usual sizing). The script
   duplicates the logos and scrolls them continuously.
   Speed: --acsa-marquee-speed (seconds per logo, default 4.5s). */
.wp-site-blocks .acsa-marquee.acsa-marquee--on {
	display: block;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.acsa-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;
	width: max-content;
	animation: acsa-marquee var(--acsa-marquee-duration, 30s) linear infinite;
}

.acsa-marquee__track > * {
	flex: 0 0 auto !important;
	flex-basis: auto !important;
	width: auto !important;
	margin: 0 !important;
	padding-inline: calc(var(--acsa-marquee-gap, 4rem) / 2) !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.acsa-marquee .acsa-marquee__track figure { margin: 0; width: auto !important; }

.acsa-marquee .acsa-marquee__track img {
	height: var(--acsa-logo-height, 64px) !important;
	max-height: none !important;
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
}

@media (max-width: 781px) {
	.wp-site-blocks .acsa-marquee.acsa-marquee--on .acsa-marquee__track img { height: 36px !important; }
	.wp-site-blocks .acsa-marquee.acsa-marquee--on { --acsa-marquee-gap: 3.5rem; }
	.acsa-marquee__track > * { padding-inline: 1.25rem !important; }
}

/* Front end: the scrolling row runs edge to edge, smaller and lighter */
.wp-site-blocks .acsa-marquee.acsa-marquee--on {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	--acsa-marquee-gap: 7rem;
}

.wp-site-blocks .acsa-marquee .acsa-marquee__track img {
	height: 44px !important;
}

.wp-site-blocks .acsa-marquee.acsa-logos-mono img,
.wp-site-blocks .acsa-marquee.acsa-logos-mono img:hover {
	filter: grayscale(1);
	opacity: 0.4;
}

/* Editor: no scrolling there, so show every logo in a wrapped grid
   instead of squeezing them all onto one line */
.editor-styles-wrapper .acsa-marquee.wp-block-columns {
	flex-wrap: wrap !important;
	justify-content: center !important;
	row-gap: 1.5rem !important;
	column-gap: 2.5rem !important;
}

.editor-styles-wrapper .acsa-marquee.wp-block-columns > .wp-block-column {
	flex: 0 0 auto !important;
	width: auto !important;
}

.editor-styles-wrapper .acsa-marquee img {
	height: 40px !important;
	width: auto !important;
	max-width: 180px !important;
	max-height: none !important;
	object-fit: contain;
}

@keyframes acsa-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion: no reveal, no parallax, marquee
   becomes a plain wrapping row. */
@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks .acsa-hero .wp-block-cover__image-background { top: 0; height: 100%; translate: none; }
	.acsa-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
	}
	.acsa-marquee__track > [aria-hidden="true"] { display: none !important; }
	.wp-site-blocks .acsa-marquee.acsa-marquee--on { -webkit-mask-image: none; mask-image: none; }
}


/* Phones: tighter vertical rhythm between sections. Covers both the
   spacing presets and the fixed rem paddings set in the editor. */
@media (max-width: 781px) {
	body {
		--wp--preset--spacing--60: 2.5rem;
		--wp--preset--spacing--70: 3rem;
		--wp--preset--spacing--80: 3.5rem;
	}
	.wp-site-blocks [style*="padding-top:10rem"] { padding-top: 3.5rem !important; }
	.wp-site-blocks [style*="padding-bottom:10rem"] { padding-bottom: 3.5rem !important; }
	.wp-site-blocks [style*="padding-top:7rem"] { padding-top: 3rem !important; }
	.wp-site-blocks [style*="padding-bottom:7rem"] { padding-bottom: 3rem !important; }
	.wp-site-blocks [style*="padding-top:6rem"] { padding-top: 2.75rem !important; }
	.wp-site-blocks [style*="padding-bottom:6rem"] { padding-bottom: 2.75rem !important; }
	.wp-site-blocks [style*="padding-top:4rem"] { padding-top: 2rem !important; }
}



/* Timeline logos are linked: the link must carry the slot height,
   or max-height: 100% has nothing to measure against */
.acsa-timeline .wp-block-image a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

/* Phones: smaller timeline logos, more of the line visible */
@media (max-width: 781px) {
	.wp-site-blocks .acsa-timeline.wp-block-columns { --tl-logo-h: 36px; }
	.acsa-timeline .wp-block-image img { max-width: 96px !important; }
	.wp-site-blocks .acsa-timeline.wp-block-columns > .wp-block-column { flex-basis: 36% !important; }
}