/* ============================================
 * acf/footer — block-scoped styles
 *
 * Enqueued via block.json "style": "file:./footer.css". Loaded only on
 * pages where the block is used. The block emits a real <footer>, so
 * styles target `.blk-footer` rather than the bare tag to avoid
 * colliding with the previous template-part footer CSS.
 *
 * Tokens come from :root in global.css.
 * ============================================ */

.blk-footer {
	border-top: 1px solid var(--border);
	padding: 72px 0 36px;
	margin-top: 48px;
	position: relative;
	z-index: 1;
}

.blk-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
	gap: 48px;
	margin-bottom: 56px;
}
@media (max-width: 820px) {
	.blk-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 480px) {
	.blk-footer__grid { grid-template-columns: 1fr; }
}

/* ---- Brand ---- */
.blk-footer__brand p {
	font-size: 14px;
	margin-top: 16px;
	line-height: 1.6;
	max-width: 280px;
}
.blk-footer__company {
	color: var(--fg);
	font-weight: 600;
}
.blk-footer__brand a.contact {
	color: var(--fg-muted);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease);
}
.blk-footer__brand a.contact:hover { color: var(--fg); }

/* ---- Social icons (under the phone) ---- */
.blk-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}
.blk-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--fg-muted);
	transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.blk-footer__social a:hover {
	color: var(--fg);
	border-color: var(--border-strong);
	background: var(--color-overlay-3);
}
.blk-footer__social svg { display: block; }

/* ---- Columns ---- */
.blk-footer__col h3 {
	font-size: 13px;
	font-weight: 600;
	color: var(--fg);
	margin-bottom: 18px;
}
.blk-footer__menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}
.blk-footer__menu a {
	color: var(--fg-muted);
	text-decoration: none;
	font-size: 14px;
	transition: color var(--duration-fast) var(--ease);
}
.blk-footer__menu a:hover { color: var(--fg); }

.blk-footer__placeholder {
	font-size: 13px;
	color: var(--fg-dim);
	font-style: italic;
}

/* ---- Newsletter (FluentForm id 9) ----
 * The newsletter is rendered by FluentForm (see render.php). These rules
 * reshape the plugin's nested markup back into the original compact
 * "pill" — email input + accent button on one row — and override the
 * global white-card overrides in assets/css/fluentform.css on pages
 * where both stylesheets load (e.g. Contatti, which has its own form
 * AND this footer). Every selector is prefixed with `.blk-footer__news`
 * so it carries one more class than the global rules and wins the
 * cascade regardless of stylesheet print order. */
.blk-footer__news h3 { margin-bottom: 8px; }
.blk-footer__news p { font-size: 13.5px; margin-bottom: 16px; }

/* Strip the plugin wrapper's own spacing. */
.blk-footer__news .fluentform { margin: 0; }

/* The <form> itself becomes the pill (overrides .frm-fluent-form.ffs_default). */
.blk-footer__news .frm-fluent-form.ffs_default {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 4px;
	color: inherit;
	overflow: visible;
	transition: border-color var(--duration) var(--ease);
}
.blk-footer__news .frm-fluent-form.ffs_default:focus-within { border-color: var(--border-strong); }

/* Field groups: no stacking margin; email fills the row, submit hugs right. */
.blk-footer__news .frm-fluent-form .ff-el-group { margin: 0; }
/* basis 0 → the email field never out-grows the row, so the submit button
 * always stays beside it; only the full-width message rows (below) wrap. */
.blk-footer__news .frm-fluent-form .ff-el-group:not(.ff_submit_btn_wrapper) {
	flex: 1 1 0;
	min-width: 0;
}
.blk-footer__news .frm-fluent-form .ff_submit_btn_wrapper { flex: 0 0 auto; }

/* Hide the "Email" label visually (kept in the DOM for screen readers). */
.blk-footer__news .frm-fluent-form .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: 0;
}

/* Input: transparent + borderless (overrides the white-card input rules). */
.blk-footer__news .frm-fluent-form .ff-el-form-control,
.blk-footer__news .frm-fluent-form input[type="email"].ff-el-form-control {
	flex: 1;
	width: 100%;
	min-width: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	color: var(--fg);
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.4;
	padding: 8px 12px;
	box-shadow: none;
	outline: none;
}
.blk-footer__news .frm-fluent-form .ff-el-form-control::placeholder { color: var(--fg-dim); }
.blk-footer__news .frm-fluent-form .ff-el-form-control:focus,
.blk-footer__news .frm-fluent-form .ff-el-form-control:focus-visible {
	background: transparent;
	border: none;
	box-shadow: none;
	outline: none;
}

/* Submit button: accent pill (overrides global + FluentForm's per-form inline style). */
.blk-footer__news form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style),
.blk-footer__news form.frm-fluent-form button.ff-btn:not(.ff_btn_no_style) {
	width: auto;
	margin: 0;
	background-color: var(--accent);
	background-image: none;
	color: var(--bg);
	border: none;
	border-radius: 7px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	padding: 8px 14px;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease);
}
.blk-footer__news form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover,
.blk-footer__news form.frm-fluent-form button.ff-btn:not(.ff_btn_no_style):hover {
	background-color: var(--accent-hover);
	transform: none;
	color: var(--bg);
}

/* Validation errors, progress + AJAX response message drop to their own
 * full-width line below the pill instead of sitting inside the row. */
.blk-footer__news .frm-fluent-form .ff-el-group.ff_ajax_progress_wrapper,
.blk-footer__news .frm-fluent-form .ff-errors-in-stack,
.blk-footer__news .frm-fluent-form .error_placeholder,
.blk-footer__news .frm-fluent-form ul.parsley-errors-list,
.blk-footer__news .ff-message-success,
.blk-footer__news .ff-message-error {
	flex-basis: 100%;
	width: 100%;
}
/* The stacked-error container is empty until JS injects a message — keep it
 * out of the flow (no stray gap row) until it actually has content. */
.blk-footer__news .frm-fluent-form .ff-errors-in-stack:empty { display: none; }
.blk-footer__news .frm-fluent-form .ff-errors-in-stack,
.blk-footer__news .frm-fluent-form .error_placeholder,
.blk-footer__news .frm-fluent-form ul.parsley-errors-list {
	color: var(--color-error, #ef4444);
	font-size: 12px;
	list-style: none;
	margin: 6px 2px 2px;
	padding: 0 6px;
}
.blk-footer__news .ff-message-success {
	margin: 10px 0 0;
	padding: 8px 10px;
	font-size: 13px;
	color: var(--color-success, #4ade80);
	background: rgba(74, 222, 128, 0.08);
	border: 1px solid rgba(74, 222, 128, 0.25);
	border-radius: var(--radius-sm);
}

/* ---- Bottom row ---- */
.blk-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 28px;
	border-top: 1px solid var(--border);
	flex-wrap: wrap;
	gap: 12px;
}
.blk-footer__bottom p,
.blk-footer__legal a {
	font-size: 13px;
	/* --fg-muted (7.76:1), not --fg-dim (#71717A, 4.12:1 — fails WCAG AA for
	 * 13px normal text on the #09090B background). */
	color: var(--fg-muted);
	text-decoration: none;
}
.blk-footer__legal { display: flex; gap: 24px; }
.blk-footer__legal a:hover { color: var(--fg); }