/*
 * SB Business Kit - stili dei blocchi.
 *
 * Questo file viaggia col plugin, non col tema: i blocchi devono avere un
 * aspetto decoroso anche sotto una skin diversa. Ogni valore è letto dalle
 * custom property generate da theme.json, con un fallback esplicito per i
 * temi che non le definiscono. Il file viene caricato solo nelle pagine che
 * contengono davvero uno di questi blocchi.
 */

:root {
	--sbbk-radius-card: var(--wp--custom--radius--card, 14px);
	--sbbk-radius-input: var(--wp--custom--radius--input, 8px);
	--sbbk-radius-pill: var(--wp--custom--radius--pill, 999px);
	--sbbk-color-primary: var(--wp--preset--color--primary, #1D4ED8);
	--sbbk-color-ink: var(--wp--preset--color--ink, #0A1A33);
	--sbbk-color-text: var(--wp--preset--color--text, #334155);
	--sbbk-color-muted: var(--wp--preset--color--muted, #64748B);
	--sbbk-color-border: var(--wp--preset--color--border, #E2E8F0);
	--sbbk-color-surface: var(--wp--preset--color--surface, #FFFFFF);
	--sbbk-color-success: var(--wp--preset--color--success, #10B981);
	--sbbk-color-danger: #DC2626;
	--sbbk-transition: var(--wp--custom--transition--base, 180ms cubic-bezier(0.2, 0, 0.2, 1));
	--sbbk-gap-sm: var(--wp--preset--spacing--30, 0.75rem);
	--sbbk-gap: var(--wp--preset--spacing--40, 1rem);
	--sbbk-font-sm: var(--wp--preset--font-size--small, 0.9375rem);
	--sbbk-font-xs: var(--wp--preset--font-size--x-small, 0.8125rem);
	--sbbk-gradient-cta: var(--wp--preset--gradient--cta, linear-gradient(135deg, #22D3EE 0%, #1D4ED8 100%));
	--sbbk-shadow-cta: var(--wp--preset--shadow--cta, 0 6px 18px rgba(29, 78, 216, 0.28));
}

/* -------------------------------------------------------------------------
 * 1. Icone dei blocchi
 * ---------------------------------------------------------------------- */

.ss-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 0;
}

/* Vale sia per l'SVG dentro il contenitore, sia per un SVG che porti la
   classe direttamente: l'icona deve restare a contorno in entrambi i casi. */
.ss-icon svg,
svg.ss-icon {
	width: 100%;
	height: 100%;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

svg.ss-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.ss-icon--tile {
	width: 3rem;
	height: 3rem;
	padding: 0.7rem;
	border-radius: var(--wp--custom--radius--small, 10px);
	background: color-mix(in srgb, var(--ss-icon-color, var(--sbbk-color-primary)) 12%, transparent);
	color: var(--ss-icon-color, var(--sbbk-color-primary));
	margin-bottom: var(--sbbk-gap);
}

/* Segnaposto mostrato nell'editor quando un blocco non ha dati da mostrare. */
.sbbk-placeholder {
	padding: 1rem;
	border: 1px dashed var(--sbbk-color-border);
	border-radius: var(--sbbk-radius-input);
	color: var(--sbbk-color-muted);
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
 * 2. Recapiti e modulo
 * ---------------------------------------------------------------------- */


.ss-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--sbbk-gap);
}

.ss-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--sbbk-gap-sm);
}

.ss-contact-list a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.ss-contact-list a:hover {
	text-decoration: underline;
}

.ss-contact-list__label {
	display: block;
	font-size: var(--sbbk-font-xs);
	color: var(--sbbk-color-muted);
	font-weight: 500;
	margin-bottom: 0.1rem;
}

/* Form */
.ss-form {
	display: grid;
	gap: var(--sbbk-gap);
}

.ss-form__row {
	display: grid;
	gap: var(--sbbk-gap);
}

@media (min-width: 782px) {
	.ss-form__row--two {
		grid-template-columns: 1fr 1fr;
	}
}

.ss-field {
	display: grid;
	gap: 0.35rem;
}

.ss-field label {
	font-size: var(--sbbk-font-sm);
	font-weight: 600;
	color: var(--sbbk-color-ink);
}

.ss-field .ss-required {
	color: var(--sbbk-color-primary);
}

.ss-field input,
.ss-field textarea,
.ss-field select {
	width: 100%;
	font: inherit;
	font-size: var(--sbbk-font-sm);
	color: var(--sbbk-color-text);
	background: var(--sbbk-color-surface);
	border: 1px solid var(--sbbk-color-border);
	border-radius: var(--sbbk-radius-input);
	padding: 0.7rem 0.9rem;
	transition: border-color var(--sbbk-transition), box-shadow var(--sbbk-transition);
}

.ss-field textarea {
	min-height: 8rem;
	resize: vertical;
}

.ss-field input:focus,
.ss-field textarea:focus {
	border-color: var(--sbbk-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sbbk-color-primary) 16%, transparent);
	outline: none;
}

.ss-field input[aria-invalid="true"],
.ss-field textarea[aria-invalid="true"] {
	border-color: var(--sbbk-color-danger);
}

.ss-field__error {
	font-size: var(--sbbk-font-xs);
	color: #B91C1C;
	min-height: 1em;
}

.ss-field__hint {
	font-size: var(--sbbk-font-xs);
	color: var(--sbbk-color-muted);
}

/* Checkbox consenso privacy. */
.ss-field--consent {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.65rem;
}

.ss-field--consent input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--sbbk-color-primary);
}

.ss-field--consent label {
	font-weight: 400;
	font-size: var(--sbbk-font-sm);
	color: var(--sbbk-color-muted);
	line-height: 1.5;
}

.ss-field--consent .ss-field__error {
	grid-column: 1 / -1;
}

/* Honeypot: nascosto agli umani ma non con display:none, che alcuni bot
   rilevano. Resta fuori dal flusso e fuori dal tab order. */
.ss-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ss-form__feedback {
	border-radius: var(--sbbk-radius-input);
	font-size: var(--sbbk-font-sm);
	line-height: 1.5;
}

.ss-form__feedback:not(:empty) {
	padding: 0.85rem 1rem;
	border: 1px solid transparent;
}

.ss-form__feedback.is-success {
	background: color-mix(in srgb, var(--sbbk-color-success) 12%, transparent);
	border-color: color-mix(in srgb, var(--sbbk-color-success) 40%, transparent);
	color: color-mix(in srgb, var(--sbbk-color-success) 80%, #000);
}

.ss-form__feedback.is-error {
	background: rgba(220, 38, 38, 0.08);
	border-color: rgba(220, 38, 38, 0.35);
	color: #991B1B;
}

.ss-form button[type="submit"] {
	justify-self: start;
	font: inherit;
	font-size: var(--sbbk-font-sm);
	font-weight: 600;
	color: var(--sbbk-color-surface);
	background: var(--sbbk-gradient-cta);
	border: 0;
	border-radius: var(--sbbk-radius-pill);
	padding: 0.85rem 1.9rem;
	cursor: pointer;
	box-shadow: var(--sbbk-shadow-cta);
	transition: transform var(--sbbk-transition), box-shadow var(--sbbk-transition),
		opacity var(--sbbk-transition);
}

.ss-form button[type="submit"]:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(29, 78, 216, 0.34);
}

.ss-form button[type="submit"]:disabled {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

/* Form dentro un pannello scuro. */
.ss-panel-dark .ss-field label,
.is-style-panel-dark .ss-field label {
	color: var(--sbbk-color-surface);
}

.ss-panel-dark .ss-field input,
.ss-panel-dark .ss-field textarea,
.is-style-panel-dark .ss-field input,
.is-style-panel-dark .ss-field textarea {
	background: color-mix(in srgb, var(--sbbk-color-surface) 10%, transparent);
	border-color: color-mix(in srgb, var(--sbbk-color-surface) 22%, transparent);
	color: var(--sbbk-color-surface);
}

.ss-panel-dark .ss-field input::placeholder,
.is-style-panel-dark .ss-field input::placeholder {
	color: color-mix(in srgb, var(--sbbk-color-surface) 45%, transparent);
}


/* -------------------------------------------------------------------------
 * 3. Movimento ridotto
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ss-form button[type="submit"],
	.ss-form button[type="submit"]:hover:not(:disabled) {
		transition: none;
		transform: none;
	}
}