/*
Theme Name: iCall
Theme URI: https://www.i-call.it/
Author: iCall S.r.l.
Description: Tema a blocchi per il sito di iCall: titoli grandi, il ciano del logo, card tonde e conversazioni d'esempio con l'assistente AI.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: icall
*/

/* Titoli a capo bilanciati */
:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

/* Le sezioni si toccano: lo spazio tra header, sezioni e footer lo decidono le sezioni */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--inchiostro);
	outline-offset: 2px;
}

.has-inchiostro-background-color :focus-visible,
.has-inchiostro-2-background-color :focus-visible {
	outline-color: var(--wp--preset--color--ciano);
}

/* Testo solo per i lettori di schermo */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Indirizzi web ed email lunghi vanno a capo invece di allargare la pagina */
:where(p, li) a {
	overflow-wrap: anywhere;
}

.num,
time {
	font-variant-numeric: tabular-nums;
}

/* Telefoni e codici restano su una riga */
.num {
	white-space: nowrap;
}

.num a,
a.num {
	color: inherit;
	text-decoration: none;
}

/* ---------- Fasce: sezioni colorate con gli angoli tondi e un margine attorno ---------- */

.is-style-fascia {
	border-radius: var(--wp--custom--radius--lg);
}

.is-style-fascia.alignfull {
	margin-left: clamp(0.5rem, 1.2vw, 1rem) !important;
	margin-right: clamp(0.5rem, 1.2vw, 1rem) !important;
}

/* Dentro il contenuto della pagina c'è già il margine laterale del sito: la fascia lo annulla e tiene solo il suo */
.has-global-padding > .is-style-fascia.alignfull {
	margin-left: calc(var(--wp--style--root--padding-left) * -1 + clamp(0.5rem, 1.2vw, 1rem)) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1 + clamp(0.5rem, 1.2vw, 1rem)) !important;
}

.is-style-fascia + .is-style-fascia {
	margin-top: 1.5rem !important;
}

/* ---------- Card: riquadri tondi, staccati dal colore e non dall'ombra ---------- */

.icall-card {
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Righe di card: lo spazio sopra lo decide il blockGap del contenitore, sotto niente */
.wp-block-columns.icall-card-riga {
	gap: 1.5rem;
	margin-bottom: 0;
}

.wp-block-columns.icall-card-riga > .wp-block-column > .icall-card:only-child {
	height: 100%;
	box-sizing: border-box;
}

/* Il link in fondo alla card resta in fondo anche se il testo è corto */
.icall-card.is-layout-flex > .icall-link-freccia:last-child {
	margin-top: auto;
}

/* Conversazione d'esempio: card con i fumetti in colonna */
.icall-conversazione {
	gap: 0.75rem !important;
}

/* Riquadri piccoli col bordo: il contact center di sempre */
.icall-riquadro {
	padding: 1.5rem;
	border: 2px solid var(--wp--preset--color--linea);
	border-radius: var(--wp--custom--radius--md);
}

.icall-griglia-piccola {
	gap: 1rem;
}

/* Intestazione di sezione: titolo a sinistra, frase a destra */
.icall-intestazione > p {
	max-width: 32rem;
}

/* ---------- Etichette a pillola sopra i titoli ---------- */

.is-style-etichetta {
	width: fit-content;
	padding: 0.625rem 1rem;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--superficie-alt);
	color: var(--wp--preset--color--inchiostro);
	font-size: var(--wp--preset--font-size--piccolo);
	font-weight: 600;
	line-height: 1;
}

/* Nelle colonne centrate (pagine semplici, 404) l'etichetta si allinea al testo invece di centrarsi */
.is-layout-constrained:not(.is-content-justification-left):not(.is-content-justification-right) > .is-style-etichetta {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

.has-superficie-alt-background-color .is-style-etichetta {
	background: var(--wp--preset--color--superficie);
}

.has-ciano-background-color .is-style-etichetta {
	background: var(--wp--preset--color--inchiostro);
	color: var(--wp--preset--color--testo-su-scuro);
}

.has-inchiostro-background-color .is-style-etichetta {
	background: var(--wp--preset--color--inchiostro-2);
	color: var(--wp--preset--color--ciano);
}

/* ---------- Conversazioni d'esempio ---------- */

.is-style-fumetto-ai,
.is-style-fumetto-cliente {
	width: fit-content;
	max-width: 85%;
	margin: 0;
	padding: 0.875rem 1.125rem;
	font-size: var(--wp--preset--font-size--corpo);
	font-weight: 500;
	line-height: 1.45;
}

.is-style-fumetto-ai {
	align-self: flex-start;
	border-radius: 20px 20px 20px 10px;
	background: var(--wp--preset--color--ciano);
	color: var(--wp--preset--color--inchiostro);
}

.is-style-fumetto-cliente {
	align-self: flex-end;
	border-radius: 20px 20px 10px 20px;
	background: var(--wp--preset--color--inchiostro);
	color: var(--wp--preset--color--testo-su-scuro);
}

/* L'esito della conversazione: cosa ha fatto l'assistente nei sistemi dell'azienda */
.is-style-esito {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--successo);
	font-size: var(--wp--preset--font-size--piccolo);
	font-weight: 600;
}

.is-style-esito::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Elenchi ---------- */

/* Pillole: sedi, sistemi collegati, canali */
.wp-block-list.is-style-pillole {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.wp-block-list.is-style-pillole > li {
	margin: 0;
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--superficie-alt);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.has-superficie-alt-background-color .wp-block-list.is-style-pillole > li {
	background: var(--wp--preset--color--superficie);
}

/* Controlli di qualità: righe con l'esito */
.wp-block-list.is-style-controlli {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-controlli > li {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	margin: 0;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linea);
}

.wp-block-list.is-style-controlli > li:last-child {
	border-bottom: 0;
}

.wp-block-list.is-style-controlli > li > strong {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--piccolo);
	white-space: nowrap;
}

.wp-block-list.is-style-controlli > li.ok > strong {
	color: var(--wp--preset--color--successo);
}

/* Elenchi nelle fasce scure: niente pallini, righe separate */
.is-style-regole {
	list-style: none;
	padding-left: 0 !important;
}

/* ---------- Foto: stesso taglio 3:2 e angoli tondi, qualunque foto si metta nell'editor ---------- */

.wp-block-image.icall-foto {
	margin: 0;
}

.wp-block-image.icall-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

/* ---------- Segnaposto delle foto ---------- */

.is-style-segnaposto-foto {
	aspect-ratio: 3 / 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border: 2px dashed var(--wp--preset--color--bordo-controllo);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--testo-tenue);
	text-align: center;
	font-size: 0.9375rem;
}

.has-inchiostro-2-background-color .is-style-segnaposto-foto,
.has-inchiostro-background-color .is-style-segnaposto-foto {
	border-color: var(--wp--preset--color--testo-tenue);
	color: var(--wp--preset--color--testo-su-scuro-tenue);
}

/* ---------- Pulsanti ---------- */

.wp-block-button__link {
	min-height: 56px;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--inchiostro);
	border: 2px solid var(--wp--preset--color--inchiostro);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--inchiostro);
	color: var(--wp--preset--color--testo-su-scuro);
}

/* Su una fascia ciano il pulsante principale diventa nero */
.has-ciano-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--inchiostro);
	color: var(--wp--preset--color--testo-su-scuro);
}

.has-ciano-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--inchiostro-2);
}

/* Navigazione a pillole (salti dentro la pagina Servizi) */
.icall-salti .wp-block-button__link {
	min-height: 48px;
	padding: 0 1.25rem;
	font-size: 1rem;
}

/* ---------- Link ---------- */

.icall-link-freccia a {
	font-weight: 600;
	text-decoration: none;
}

.icall-link-freccia a:hover {
	text-decoration: underline;
}

.has-ciano-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--inchiostro);
}

.has-inchiostro-background-color a:where(:not(.wp-element-button)),
.has-inchiostro-2-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--testo-su-scuro);
	text-decoration: none;
}

.has-inchiostro-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--ciano);
}

/* ---------- Header ---------- */

.icall-header .wp-block-navigation-item__content {
	padding-block: 0.75rem;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.6rem;
}

.icall-header .wp-block-navigation-item__content:hover,
.icall-header .current-menu-item > .wp-block-navigation-item__content,
.icall-header .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration-color: var(--wp--preset--color--ciano);
}

.icall-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--60);
}

.icall-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.icall-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
}

.icall-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: 800;
	gap: 0.5rem;
}

@media (max-width: 781px) {
	.icall-solo-desktop {
		display: none !important;
	}
}

/* ---------- Footer ---------- */

.icall-footer {
	padding-bottom: clamp(0.5rem, 1.2vw, 1rem);
}

.icall-footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0.625rem;
}

/* ---------- Moduli (Contact Form 7) ---------- */

.icall-modulo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 1.25rem 1.5rem;
}

.icall-modulo .intero {
	grid-column: 1 / -1;
}

.icall-modulo label,
.icall-modulo .etichetta {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
}

.icall-modulo .facoltativo {
	font-weight: 500;
	color: var(--wp--preset--color--testo-tenue);
}

/* Il campo esca dell'anti-spam: fuori dallo schermo, non nascosto con display, che alcuni bot riconoscono */
.icall-esca {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wpcf7 input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="date"]),
.wpcf7 select,
.wpcf7 textarea,
.wp-block-search__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	font: inherit;
	color: var(--wp--preset--color--inchiostro);
	background: var(--wp--preset--color--superficie);
	border: 1.5px solid var(--wp--preset--color--bordo-controllo);
	border-radius: var(--wp--custom--radius--sm);
}

.wpcf7 textarea {
	min-height: 160px;
	resize: vertical;
}

.wpcf7 input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	font: inherit;
	background: var(--wp--preset--color--superficie);
	border: 1.5px dashed var(--wp--preset--color--bordo-controllo);
	border-radius: var(--wp--custom--radius--sm);
}

/* Scelte multiple e singole come pillole */
.wpcf7-checkbox,
.wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 0.625rem;
}

.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-radio .wpcf7-list-item {
	margin: 0;
}

.wpcf7-checkbox .wpcf7-list-item label,
.wpcf7-radio .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 48px;
	padding: 0 1.125rem;
	border: 1.5px solid var(--wp--preset--color--bordo-controllo);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--superficie);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.wpcf7-checkbox .wpcf7-list-item label:has(input:checked),
.wpcf7-radio .wpcf7-list-item label:has(input:checked) {
	border-color: var(--wp--preset--color--inchiostro);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--inchiostro);
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--wp--preset--color--inchiostro);
}

.wpcf7-acceptance .wpcf7-list-item,
.icall-modulo .wpcf7-checkbox.singolo .wpcf7-list-item {
	margin: 0;
}

.wpcf7-acceptance label {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-weight: 500;
	line-height: 1.5;
}

.wpcf7 input[type="submit"] {
	min-height: 56px;
	padding: 0 2rem;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--ciano);
	color: var(--wp--preset--color--inchiostro);
	font: 600 1.0625rem/1.25 var(--wp--preset--font-family--body);
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--ciano-scuro);
	color: var(--wp--preset--color--testo-su-scuro);
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	color: #b3261e;
	font-size: 0.875rem;
	font-weight: 600;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--radius--sm);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--successo);
	color: var(--wp--preset--color--successo);
	font-weight: 600;
}

/* ---------- Banner dei cookie (Complianz): Accetta e Nega con lo stesso peso ---------- */

.cmplz-cookiebanner,
#cmplz-manage-consent {
	--cmplz_banner_border_radius: 20px;
	--cmplz_text_color: var(--wp--preset--color--inchiostro);
	--cmplz_hyperlink_color: var(--wp--preset--color--ciano-scuro);
	--cmplz_text_font_size: 14px;
	--cmplz_link_font_size: 14px;
	--cmplz_category_body_font_size: 14px;
	--cmplz_title_font_size: 18px;
	--cmplz_button_font_size: 15px;
	--cmplz_button_border_radius: 999px;
	--cmplz_button_accept_background_color: var(--wp--preset--color--inchiostro);
	--cmplz_button_accept_border_color: var(--wp--preset--color--inchiostro);
	--cmplz_button_accept_text_color: var(--wp--preset--color--testo-su-scuro);
	--cmplz_button_deny_background_color: var(--wp--preset--color--inchiostro);
	--cmplz_button_deny_border_color: var(--wp--preset--color--inchiostro);
	--cmplz_button_deny_text_color: var(--wp--preset--color--testo-su-scuro);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--wp--preset--color--inchiostro);
	--cmplz_button_settings_text_color: var(--wp--preset--color--inchiostro);
	--cmplz_slider_active_color: var(--wp--preset--color--ciano-scuro);
	--cmplz_category_header_always_active_color: var(--wp--preset--color--successo);
	font-family: var(--wp--preset--font-family--body);
}

.cmplz-cookiebanner .cmplz-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
}

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

/* Pagine di solo testo (privacy, articoli): titoli di sezione più piccoli, come quelli delle card */
.icall-testo .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--titolo-3);
	line-height: 1.15;
	margin-top: var(--wp--preset--spacing--70);
}