/* ============================================================
   SWITALSKI.LAW — shared contact section (Faza 4.1b).
   The .sl-cta block MOVED verbatim from pages/home.css (Faza 3)
   so Home and the service hubs load ONE stylesheet for the one
   shared implementation (template-parts/hub/contact.php), plus
   the CF7 integration layer (wrapper column, response output,
   validation tips, GDPR note, honeypot hiding).
   Enqueued on the front page and hub templates only.
   ============================================================ */

.sl-cta {
	background: var(--ink);
	color: var(--paper);
	border-top: var(--bw-1) solid var(--border-inv-faint);
	/* Same anchor-offset compensation as the other dark Home sections
	   (see pages/home.css) — the section's own top padding provides the
	   breathing room under the sticky header. */
	scroll-margin-top: calc(var(--scroll-offset) - var(--s-9));
	padding: var(--sp-104) var(--s-6);
	position: relative;
	overflow: hidden;
}

.sl-cta__mesh {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle at center, var(--cta-mesh-dot) 1px, transparent 1.4px);
	background-size: var(--s-6) var(--s-6);
	opacity: 0.5;
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 80% 50%, var(--ink-pure) 0%, var(--ink-pure) 40%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 70% at 80% 50%, var(--ink-pure) 0%, var(--ink-pure) 40%, transparent 100%);
}

.sl-cta__inner {
	max-width: var(--mw-1180);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* Explicit 700 — sections.jsx:725 variable-Oswald regression fix */
.sl-cta__heading {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--t-cta-h2);
	line-height: 0.92;
	margin: 0;
	letter-spacing: -0.02em;
	max-width: var(--mw-1000);
	color: var(--paper);
}

.sl-cta__heading-accent {
	color: var(--gold);
}

.sl-cta__sub {
	font-family: var(--font-body);
	font-size: var(--fs-18);
	color: var(--n-200);
	margin: var(--sp-20) 0 0;
	max-width: var(--mw-620);
	line-height: 1.55;
}

.sl-cta__grid {
	margin-top: var(--s-7);
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--sp-56);
	align-items: stretch;
}

/* ------------------------------------------------------------
   Form column — CF7 wraps the <form> in its own div.wpcf7, so a
   thin flex chain keeps the designed height-filling behaviour
   (textarea grows, actions pinned at the bottom).
   ------------------------------------------------------------ */
.sl-cta__form-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sl-cta__form-col .wpcf7 {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sl-cta__form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-20);
	height: 100%;
	flex: 1;
}

.sl-cta__field--grow {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sl-cta__label {
	font-family: var(--font-mono);
	font-size: var(--fs-10-5);
	letter-spacing: 0.12em;
	color: var(--gold);
	text-transform: uppercase;
	margin-bottom: var(--s-2);
	display: block;
}

/* CF7 wraps each control in span.wpcf7-form-control-wrap — make the
   wrapper transparent to the flex layout so inputs size as designed. */
.sl-cta__field .wpcf7-form-control-wrap {
	display: block;
}

.sl-cta__field--grow .wpcf7-form-control-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sl-cta__input {
	width: 100%;
	box-sizing: border-box;
	background: var(--surface-inv-ctl);
	border: var(--bw-2) solid var(--border-inv-ctl-2);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	padding: var(--sp-14) var(--s-4);
	outline: none;
	border-radius: var(--r-1);
	transition: border-color .15s ease;
}

.sl-cta__input:focus {
	border-color: var(--gold);
}

.sl-cta__textarea {
	resize: vertical;
	line-height: 1.5;
	flex: 1;
	min-height: var(--sp-120);
}

.sl-cta__actions {
	display: flex;
	gap: var(--sp-18);
	flex-wrap: wrap;
	align-items: center;
	margin-top: var(--s-1);
}

.sl-cta__secondary {
	font-family: var(--font-body);
	font-size: var(--fs-15);
	font-weight: 600;
	color: var(--n-300);
	text-decoration: none;
	border-bottom: var(--bw-1) solid var(--border-inv-hi);
	padding-bottom: var(--sp-1);
}

.sl-cta__secondary:hover {
	color: var(--paper);
	border-color: var(--paper);
}

.sl-cta__secondary:focus-visible,
.sl-cta__gdpr a:focus-visible {
	outline: var(--bw-2) solid var(--gold);
	outline-offset: var(--sp-2);
}

/* ------------------------------------------------------------
   GDPR note — small print directly under the submit row
   ------------------------------------------------------------ */
.sl-cta__gdpr {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	line-height: 1.6;
	color: var(--n-400);
	margin: var(--sp-14) 0 0;
}

.sl-cta__gdpr a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: var(--bw-1) solid var(--gold);
	padding-bottom: var(--sp-1);
	transition: color .15s ease, border-color .15s ease;
}

.sl-cta__gdpr a:hover {
	color: var(--paper);
	border-color: var(--paper);
}

/* .sl-hp (honeypot) moved to base.css, Faza 6.8 — it's global now that
   the footer newsletter form uses it too, and the footer renders on
   templates that never load this stylesheet. */

/* ------------------------------------------------------------
   CF7 feedback — response banner + per-field validation tips,
   restyled with tokens (plugin defaults use foreign colors)
   ------------------------------------------------------------ */
.sl-cta .wpcf7-response-output {
	margin: var(--sp-18) 0 0;
	padding: var(--s-3) var(--s-4);
	border: var(--bw-2) solid var(--gold);
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	line-height: 1.5;
	color: var(--paper);
}

.sl-cta .wpcf7-form.invalid .wpcf7-response-output,
.sl-cta .wpcf7-form.unaccepted .wpcf7-response-output,
.sl-cta .wpcf7-form.failed .wpcf7-response-output,
.sl-cta .wpcf7-form.aborted .wpcf7-response-output,
.sl-cta .wpcf7-form.spam .wpcf7-response-output {
	border-color: var(--danger-inv);
}

.sl-cta .wpcf7-not-valid-tip {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.04em;
	color: var(--danger-inv);
	margin-top: var(--sp-6);
}

.sl-cta__side {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sl-cta__chips {
	border-top: var(--bw-1) solid var(--border-inv-row);
}

.sl-cta__chip {
	padding: var(--sp-18) 0;
	border-bottom: var(--bw-1) solid var(--border-inv-row);
}

.sl-cta__chip-t {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--fs-22);
	line-height: 1;
	color: var(--paper);
	letter-spacing: 0.005em;
}

.sl-cta__chip-s {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: 0.1em;
	color: var(--n-400);
	text-transform: uppercase;
	margin-top: var(--sp-7);
}

.sl-cta__trust {
	font-family: var(--font-body);
	font-size: var(--fs-13-5);
	line-height: 1.6;
	color: var(--n-400);
	margin: var(--sp-20) 0 0;
}

/* ------------------------------------------------------------
   Responsive (breakpoints per tokens.css consolidation)
   ------------------------------------------------------------ */
@media (max-width: 920px) {
	.sl-cta__grid {
		grid-template-columns: 1fr;
	}
}