/*
Theme Name: Ali Gabriele
Description: Tema di Alì Gabriele, centro assistenza caldaie: stesso aspetto del sito precedente, senza Elementor.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Author: Valerio
License: GPL-2.0-or-later
Text Domain: aligabriele
Update URI: https://kit.wpfactory/aligabriele
*/

:root {
	--blu: #283891;
	--rosso: #ED1C24;
	--notte: #1C244B;
	--ardesia: #324A6D;
	--grigio: #CECECE;
	--chiaro: #F3F5F8;
	--bordo-bottone: #467FF7;
	/* CONTRATTO COMUNE: i pezzi dei plugin si vestono con queste. */
	--fc-accento: var(--rosso);
	--fc-scuro: var(--blu);
	--fc-chiaro: #fff;
	--fc-su-scuro: var(--chiaro);
	--fc-display: Poppins, sans-serif;
	--fc-testo: Poppins, sans-serif;
	--fc-raggio: 100px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: #333; font: 300 16px/1.5 Poppins, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
h1, h2, h3 { font-weight: 600; }

/* ---------- intestazione ---------- */
.intestazione__riga { display: flex; align-items: center; justify-content: space-between; min-height: 119px; padding: 0 8%; box-sizing: border-box; }
.marchio { display: block; }
.marchio img { width: 300px; height: 87px; }
.menu { font-size: 16px; font-weight: 400; color: var(--notte); }
.menu .wp-block-navigation-item__content { padding: 8px 15px; text-decoration: none; }
.menu .wp-block-navigation__container { gap: 0; }

/* ---------- pulsanti ---------- */
.bottone { display: block; }
.bottone .wp-block-button__link { display: inline-block; padding: 16px 55px; border: 1px solid var(--bordo-bottone); border-radius: 100px; color: #fff; font: 400 21px/21px Poppins, sans-serif; text-decoration: none; transition: filter .2s; }
.bottone .wp-block-button__link:hover, .bottone .wp-block-button__link:focus-visible { filter: brightness(1.15); }
.bottone--rosso .wp-block-button__link { background: var(--rosso); }
.bottone--blu .wp-block-button__link { background: var(--blu); }

/* ---------- prima schermata ---------- */
.eroe { display: grid; grid-template-columns: 52fr 48fr; min-height: 95vh; padding-left: 8%; background: var(--blu); }
.eroe__testo { display: flex; flex-direction: column; justify-content: center; padding-right: 20%; color: #fff; }
.eroe__testo h1 { font-size: clamp(65px, 5.49vw, 79px); line-height: 1; }
.eroe > *, .cura > *, .richiamo > *, .contatti > *, .dove > *, .schede > *, .localita > * { min-width: 0; }
.eroe__sotto { margin-top: 20px; padding-right: 22%; color: var(--grigio); font-size: 24px; line-height: 1.5; }
.eroe__testo .wp-block-buttons { margin-top: 40px; }
.eroe__foto { position: relative; background: #fff; min-height: 350px; }
.eroe__foto .wp-block-image { position: absolute; inset: 0; }
.eroe__foto img, .cura__foto img { width: 100%; height: 100% !important; object-fit: cover; object-position: center; }

/* ---------- marchi ---------- */
.marchi { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1140px; margin: 0 auto; padding-bottom: 45px; }
.marchi .wp-block-image { margin: 0; padding: 10px; }
.marchi a { display: block; }
.marchi img { width: 100%; }

/* ---------- manutenzione ---------- */
.cura { display: grid; grid-template-columns: 56fr 44fr; padding-right: 8%; background: var(--rosso); color: #fff; }
.cura__foto { position: relative; min-height: 350px; }
.cura__foto .wp-block-image { position: absolute; inset: 0; }
.cura__testo { padding: 58px 5% 58px 25%; }
.cura__testo h2 { font-size: clamp(43px, 4.24vw, 61px); line-height: 1.2; }
.cura__testo ul { margin-top: 25px; padding-left: 40px; }
.cura__testo ul + p { margin-top: 24px; }
.wp-block-navigation__responsive-container-open { padding: 6px; border-radius: 4px; background: #EEF1F6; color: var(--blu); }
.cura__testo .wp-block-buttons { margin-top: 43px; }

/* ---------- fascia ---------- */
.fascia { margin-top: 70px; padding: 30px 5%; background: var(--blu); color: #fff; text-align: center; }
.fascia h2 { max-width: 672px; margin: 0 auto; font-size: 35px; line-height: 1.2; }

/* ---------- schede ---------- */
.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 70px; padding: 10px calc(8% + 10px); }
.scheda { text-align: center; }
.scheda img { width: 100%; }
.scheda h3 { margin-top: 29px; color: var(--notte); font-size: 23px; line-height: 1.2; }
.scheda p { margin-top: 15px; color: var(--ardesia); }

/* ---------- richiamo ---------- */
.richiamo { display: grid; grid-template-columns: 1fr 1fr; max-width: 1140px; margin: 70px auto 0; padding-top: 70px; }
.richiamo h2 { color: var(--rosso); font-size: 79px; line-height: 1; }
.richiamo__blu { color: var(--blu); }
.richiamo__sotto { margin-top: 20px; padding-bottom: 15px; color: var(--rosso); font-size: 21px; line-height: 1.5; }
.richiamo .rr-contatto { margin-top: 20px; }
.richiamo__foto img { width: 100%; }

/* ---------- moduli ---------- */
.rr-contatto label, .rr-contatto legend, .rr-contatto__titoletto { display: block; padding: 0; font-weight: 300; }
.rr-contatto input[type=text], .rr-contatto input[type=email], .rr-contatto input[type=tel], .rr-contatto textarea { display: block; width: 100%; box-sizing: border-box; background: #fff; font: 300 16px/1.5 Poppins, sans-serif; color: #333; }
.rr-contatto small { font-size: 13px; }
.rr-contatto__esito { margin-bottom: 16px; padding: 12px 16px; border-radius: 3px; background: #fff; color: var(--notte); }
.rr-contatto__esito--ok { border-left: 4px solid #1a7f37; }
.rr-contatto__esito--ko { border-left: 4px solid var(--rosso); }
.rr-contatto__esito a { color: var(--blu); }
.rr-contatto__errore { color: #B3121A; }
.rr-contatto__invia { cursor: pointer; font: 400 16px/16px Poppins, sans-serif; color: #fff; }

.rr-contatto--richiamo input[type=tel] { height: 42px; padding: 8px 16px; border: 1px solid #666; border-radius: 3px; }
.rr-contatto--richiamo .rr-contatto__privacy { margin-top: 18px; padding-left: 16px; }
.rr-contatto--richiamo input[type=checkbox] { display: inline-block; width: 13px; height: 13px; margin: 0 4px 0 0; vertical-align: -1px; }
.rr-contatto--richiamo .rr-contatto__privacy label { display: inline; }
.rr-contatto--richiamo .rr-contatto__privacy { padding-left: 0; }
.rr-contatto--richiamo .rr-contatto__privacy a { color: #C36; text-decoration: none; }
.rr-contatto--richiamo .rr-contatto__invia { margin-top: 4px; padding: 8px 16px; border: 1px solid #C36; border-radius: 3px; background: var(--blu); }

.rr-contatto--messaggio { color: #FFFEFE; }
.rr-contatto--messaggio .rr-contatto__persona { display: flow-root; }
.rr-contatto--messaggio legend { float: left; width: 100%; margin-bottom: 4px; }
.rr-contatto--messaggio .rr-contatto__sotto { float: left; clear: none; width: calc(50% - 10px); }
.rr-contatto--messaggio .rr-contatto__sotto + .rr-contatto__sotto { margin-left: 20px; }
.rr-contatto__obbligo { color: #FF4D4D; }
.rr-contatto--messaggio .rr-contatto__sotto label { margin-top: 4px; }
.rr-contatto--messaggio .rr-contatto__campo { margin-top: 20px; }
.rr-contatto--messaggio .rr-contatto__campo label { margin-bottom: 4px; }
.rr-contatto--messaggio input[type=text], .rr-contatto--messaggio input[type=email] { height: 38px; padding: 6px 10px; border: 1px solid #CCC; border-radius: 2px; }
.rr-contatto--messaggio textarea { height: 120px; padding: 6px 10px; border: 1px solid #CCC; border-radius: 2px; }
.rr-contatto--messaggio .rr-contatto__privacy { margin-top: 20px; }
.rr-contatto--messaggio input[type=checkbox] { display: inline-block; width: 14px; height: 14px; margin: 0 8px 0 3px; vertical-align: -2px; }
.rr-contatto--messaggio .rr-contatto__privacy label { display: inline; font-size: 15px; line-height: 23.4px; }
.rr-contatto--messaggio .rr-contatto__privacy a { color: #F9B; text-decoration: none; }
.rr-contatto--messaggio .rr-contatto__privacy a:hover, .rr-contatto--richiamo .rr-contatto__privacy a:hover { text-decoration: underline; }
.rr-contatto--messaggio .rr-contatto__invia { width: 100%; height: 38px; margin-top: 22px; padding: 10px 15px; border: 1px solid #DDD; border-radius: 0; background: var(--rosso); }
.rr-contatto--messaggio .rr-contatto__errore { color: #FFD7D9; }

/* ---------- contatti ---------- */
.contatti { display: grid; grid-template-columns: 1fr 1fr; scroll-margin-top: 0; }
.contatti__modulo { padding: 50px 12% 25px 20%; background: var(--blu); color: #fff; }
.contatti__modulo h2 { font-size: 29px; line-height: 1.2; color: #fff; }
.contatti__modulo .rr-contatto { margin-top: 34px; }
.contatti__dati { display: flex; flex-direction: column; justify-content: center; padding: 24px 12% 24px 20%; }
.contatti__logo img, .contatti__partner img { width: 300px; }
.recapiti { margin: 50px 0; color: #000; }
.recapito { display: flex; align-items: center; min-height: 24px; margin-bottom: 6px; padding-left: 35px; background-repeat: no-repeat; background-position: 0 center; background-size: 22px 22px; }
.recapito--indirizzo { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231C244B' d='M12 1.5A8 8 0 0 0 4 9.5c0 5.6 8 13 8 13s8-7.400 8-13a8 8 0 0 0-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/></svg>"); }
.recapito--telefono { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231C244B' fill-rule='evenodd' d='M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm4.300 3.500-2.600.6a.8.8 0 0 0-.6.800A12.900 12.900 0 0 0 18.100 18.900a.8.8 0 0 0 .8-.6l.6-2.600a.8.8 0 0 0-.5-.9l-2.800-1.200a.8.8 0 0 0-.9.2l-1.200 1.500a9.800 9.800 0 0 1-4.700-4.700l1.500-1.200a.8.8 0 0 0 .2-.9L9.200 6a.8.8 0 0 0-.9-.5Z'/></svg>"); }
.recapito--email { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231C244B' d='M2 7.200V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7.200l-10 7.300Z'/><path fill='%231C244B' d='M3.900 4A2 2 0 0 0 2.200 5.200L12 12.300l9.800-7.100A2 2 0 0 0 20.100 4Z'/></svg>"); }
.recapito__voce .wp-block-button__link { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-decoration: none; }
.recapito__voce .wp-block-button__link:hover { text-decoration: underline; }

/* ---------- dove siamo ---------- */
.dove { display: grid; grid-template-columns: 1fr 1fr; min-height: 707px; }
.dove__titolo { display: flex; align-items: center; justify-content: center; padding: 0 10%; text-align: center; }
.dove__titolo h2 { color: var(--notte); font-size: 65px; line-height: 1.2; }
.mappa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 700px; padding: 24px; box-sizing: border-box; background: #E9ECF4; color: var(--notte); text-align: center; }
.mappa--aperta { padding: 0; }
.mappa iframe { display: block; width: 100%; height: 100%; border: 0; }
.mappa__nota { max-width: 36em; }
.mappa__apri { padding: 16px 40px; border: 1px solid var(--bordo-bottone); border-radius: 100px; background: var(--blu); color: #fff; font: 400 16px/16px Poppins, sans-serif; cursor: pointer; }
.mappa__apri:hover, .mappa__apri:focus-visible { filter: brightness(1.15); }

/* ---------- località ---------- */
.localita { display: grid; grid-template-columns: repeat(4, 1fr); padding: 50px 0; background: var(--blu); color: var(--chiaro); }
.localita ul { padding: 10px; list-style: none; }
.localita li { padding-left: 23px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='m2 13 3-3 5 5L19.500 5.500l3 3L10 21Z'/></svg>") no-repeat 0 5px / 14px 14px; }

/* ---------- piè di pagina ---------- */
.piede { background: var(--rosso); color: var(--chiaro); }
.piede__testo { padding: 16px; text-align: center; }
.piede__testo a { color: inherit; }

/* ---------- pagine interne ---------- */
.pagina { max-width: 860px; margin: 0 auto; padding: 60px 24px 80px; }
.pagina__titolo { margin-bottom: 32px; color: var(--notte); font-size: 42px; line-height: 1.15; }
.pagina h2 { margin: 32px 0 8px; color: var(--notte); font-size: 24px; }
.pagina p, .pagina ul { margin-bottom: 12px; }
.pagina a { color: var(--blu); }

:focus-visible { outline: 2px solid var(--bordo-bottone); outline-offset: 2px; }

/* ---------- menu aperto al telefono ---------- */
.menu .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; background: #fff; color: var(--notte); }
.menu .is-menu-open .wp-block-navigation__responsive-container-content { align-items: center; }
.menu .is-menu-open .wp-block-navigation__container { align-items: center; gap: 12px; font-size: 22px; }
.menu .is-menu-open .wp-block-navigation-item { width: 100%; align-items: center; text-align: center; }
.menu .is-menu-open .wp-block-navigation-item__content { padding: 10px 24px !important; }

/* ---------- editor: l'area è più stretta della finestra, il titolo non deve finire sulla foto ---------- */
.editor-styles-wrapper .eroe__testo h1 { font-size: 60px; }
.editor-styles-wrapper .eroe__testo { padding-right: 8%; }
.editor-styles-wrapper .cura__testo { padding-left: 10%; }
.editor-styles-wrapper .cura__testo h2 { font-size: 40px; }


@media (max-width: 1300px) {
	.eroe__testo { padding-right: 8%; }
	.cura__testo { padding-left: 12%; }
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
	.eroe, .cura { padding: 0; }
	.eroe__testo { padding: 40px 8%; }
	.eroe__testo h1 { font-size: clamp(42px, 6vw, 65px); }
	.richiamo h2 { font-size: clamp(42px, 6vw, 65px); }
	.eroe__sotto { padding-right: 0; font-size: 14px; }
	.richiamo__sotto { font-size: 14px; }
	.cura__testo { padding: 58px 8%; }
	.cura__testo h2 { font-size: clamp(30px, 4.4vw, 45px); }
	.scheda h3 { font-size: 20px; }
	.fascia { padding: 30px 5%; }
	.schede { padding: 10px 5%; }
	.richiamo { padding-left: 24px; padding-right: 24px; }
	.contatti__modulo, .contatti__dati { padding-left: 8%; padding-right: 8%; }
	.dove__titolo h2 { font-size: clamp(30px, 4.4vw, 45px); }
	.localita { grid-template-columns: 1fr 1fr; }
	.contatti__logo img, .contatti__partner img { max-width: 100%; }
}

/* ---------- telefono ---------- */
@media (max-width: 767px) {
	body { font-size: 14px; line-height: 21px; }
	.intestazione__riga { min-height: 150px; padding: 0 30px; flex-wrap: nowrap; }
	.marchio img { width: 260px; height: auto; }
	.wp-block-buttons:has(.bottone) { justify-content: center; }
	.bottone { text-align: center; }
	.bottone .wp-block-button__link { font-size: 14px; line-height: 14px; }
	.eroe, .cura, .richiamo, .contatti, .dove { grid-template-columns: 1fr; }
	.eroe { min-height: 0; }
	.eroe__testo { padding: 78px 5% 39px; display: block; }
	.eroe__testo h1 { font-size: 48px; }
	.eroe__sotto, .cura__testo ul, .cura__testo p { font-size: 14px; line-height: 21px; }
	.eroe__foto, .cura__foto { min-height: 350px; }
	.marchi { grid-template-columns: 1fr; }
	.cura__foto { order: 2; }
	.cura__testo { padding: 78px 5% 39px; }
	.cura__testo h2 { font-size: 42px; line-height: 1.1; }
	.cura__testo ul + p { margin-top: 21px; }
	.fascia { padding: 30px 10px; }
	.fascia h2 { font-size: 28px; line-height: 1.1; }
	.schede { grid-template-columns: 1fr; margin-top: 206px; padding: 10px 29.5px; gap: 20px; }
	.scheda h3 { margin-top: 28px; font-size: 28px; line-height: 1.1; }
	.scheda p { margin-top: 16px; }
	.richiamo { padding: 70px 0 0; }
	.richiamo__testo { padding: 0 18px; text-align: center; }
	.richiamo h2 { font-size: 48px; }
	.richiamo__sotto { font-size: 14px; }
	.rr-contatto { text-align: left; }
	.rr-contatto label, .rr-contatto legend, .rr-contatto__titoletto, .rr-contatto input, .rr-contatto textarea { font-size: 14px !important; }
	.rr-contatto--richiamo input[type=tel] { height: 39px; }
	.rr-contatto--richiamo .rr-contatto__invia { margin-top: 3px; }
	.richiamo__foto { margin-top: 85px; }
	.rr-contatto--messaggio .rr-contatto__sotto { width: calc(50% - 7px); }
	.rr-contatto--messaggio .rr-contatto__sotto + .rr-contatto__sotto { margin-left: 14px; }
	.rr-contatto--messaggio .rr-contatto__invia { margin-top: 28px; }
	.contatti { margin-top: 136px; }
	.contatti__dati { order: -1; align-items: center; padding: 0 5% 39px; text-align: center; }
	.contatti__modulo { padding: 50px 5% 63px; }
	.contatti__modulo h2 { font-size: 28px; line-height: 1.1; text-align: center; }
	.recapito { justify-content: flex-start; }
	.recapiti { display: flex; flex-direction: column; align-items: center; }
	.dove { margin-top: 136px; min-height: 0; }
	.dove__titolo { padding: 0 5% 39px; }
	.dove__titolo h2 { font-size: 28px; line-height: 1.1; }
	.dove__mappa { padding: 0 20px 45px; }
	.localita { grid-template-columns: 1fr; padding: 50px 0; }
	.localita li { background-position: 0 4px; }
}