/* KS Page Lean — header con menu completo + footer, senza Salient/WPBakery.
   Misure e colori ricalcati sull'header Salient del sito. 2026-10-21 (Claude/dev) */

:root{
	--kpl-navy:#1A2A4F;
	--kpl-ink:#021538;
	--kpl-blue:#0063FA;
	--kpl-head-bg:#fdfcf9;
	--kpl-head-h:74px;
	--kpl-wrap:1360px;
	--kpl-font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	/* il wizard KSHM legge l'altezza header da qui */
	--kshm-header-h:74px;
}

.ks-pagelean{margin:0;font-family:var(--kpl-font);color:var(--kpl-navy);background:var(--kpl-head-bg);-webkit-font-smoothing:antialiased;font-size:16px;line-height:26px;letter-spacing:-.48px}

/* ── Base tipografica: gli stessi valori che oggi dà Salient (misurati sul sito il 21-10).
   :where() tiene la specificità al minimo, così come in Salient gli stili dei plugin
   (immobili, wizard, recensioni…) restano più forti di questa base. ── */
:where(.ks-pagelean) :where(h1,h2,h3,h4,h5,h6){margin:0 0 7px;color:var(--kpl-navy)}
/* Scala dei titoli di Salient, misurata sul sito a 1400/1200/800/390 px (21-10). */
:root{
	--h1-fs:33px;--h1-lh:37px;--h1-ls:-.99px;
	--h2-fs:25px;--h2-lh:33px;--h2-ls:-.75px;
	--h3-fs:12px;--h3-lh:20px;--h3-ls:.36px;
	--h4-fs:22px;--h4-lh:28px;--h4-ls:-.66px;
	--h5-fs:18px;--h5-lh:30px;--h5-ls:-.9px;
	--h6-fs:12px;--h6-lh:28px;--h6-ls:.6px;
}
@media (max-width:1300px){:root{--h1-fs:25px;--h1-lh:28px;--h1-ls:-.75px;--h2-fs:22px;--h2-lh:29px;--h2-ls:-.66px;--h3-fs:11px;--h3-lh:17px;--h3-ls:.33px}}
@media (max-width:1000px){:root{--h2-fs:21px;--h2-lh:25.2px;--h2-ls:-.63px}}
@media (max-width:999px){:root{--h1-fs:22px;--h1-lh:22px;--h1-ls:-.66px;--h3-fs:9px;--h3-lh:15px;--h3-ls:.27px;--h4-fs:20px;--h4-lh:26px;--h4-ls:-.6px;--h5-fs:17px;--h5-lh:27px;--h5-ls:-.85px}}
@media (max-width:690px){:root{--h1-fs:19px;--h1-lh:19px;--h1-ls:-.57px}}
:where(.ks-pagelean) h1{font-size:var(--h1-fs);line-height:var(--h1-lh);letter-spacing:var(--h1-ls);font-weight:600}
:where(.ks-pagelean) h2{font-size:var(--h2-fs);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);font-weight:600}
:where(.ks-pagelean) h3{font-size:var(--h3-fs);line-height:var(--h3-lh);letter-spacing:var(--h3-ls);font-weight:500;text-transform:uppercase}
:where(.ks-pagelean) h4{font-size:var(--h4-fs);line-height:var(--h4-lh);letter-spacing:var(--h4-ls);font-weight:500}
:where(.ks-pagelean) h5{font-size:var(--h5-fs);line-height:var(--h5-lh);letter-spacing:var(--h5-ls);font-weight:400}
:where(.ks-pagelean) h6{font-size:var(--h6-fs);line-height:var(--h6-lh);letter-spacing:var(--h6-ls);font-weight:500;text-transform:uppercase}
:where(.ks-pagelean) p{margin:0;padding-bottom:27px}
:where(.ks-pagelean) :where(strong,b){font-weight:600}
/* 2026-10-22 — elenchi come Salient: "ol,ul{list-style:none;margin-left:30px;margin-bottom:30px}" (padding 0),
   "ul li{list-style:outside disc}", "ol>li{list-style:decimal outside}" — prima 40px di padding del browser */
:where(.ks-pagelean) :where(ul,ol){margin:0 0 30px 30px;padding:0;list-style:none}
:where(.ks-pagelean) ul li{list-style:outside disc}
:where(.ks-pagelean) ol>li{list-style:decimal outside}
:where(.ks-pagelean) blockquote{margin:0 0 30px;font-size:20px;line-height:32px}
:where(.ks-pagelean) :where(input,select,textarea,button){font-family:inherit}
:where(.ks-pagelean) :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],textarea){font-size:16px;line-height:16px;padding:15px;color:#555;background:#fff}
:where(.ks-pagelean) select{font-size:16px;padding:10px;color:var(--kpl-navy);background:#fff}
/* Pulsanti di invio: in Salient battono gli stili dei plugin, quindi qui servono un po' più forti */
:where(.ks-pagelean) :where(button[type=submit],input[type=submit]){padding:15px 35px;line-height:1.2}
.ks-pagelean :is(button[type=submit],input[type=submit]){font-size:17px;font-weight:500;border:0;border-radius:4px;background:#162660;color:#fff;cursor:pointer}
/* Nel guscio i paragrafi di header e footer non prendono lo spazio dei paragrafi di testo */
.kpl-header p,.kpl-footer:not(.kpl-footer--gs) p{padding-bottom:0}
.ks-pagelean *,.ks-pagelean *::before,.ks-pagelean *::after{box-sizing:border-box}
.ks-pagelean img{max-width:100%;height:auto}
.ks-pagelean a{color:inherit}
/* 2026-10-22 — Contenitore di header e footer come ".container" di Salient (misurato): 1450px sopra i 1450px
   di schermo, 1200px tra 1000 e 1450, sempre con 45px di margine interno; sotto i 1000px l'88% senza padding.
   Prima era 1360px + 20px fissi: logo e "Chiama" stavano più vicini ai bordi dell'originale. */
.kpl-wrap{width:100%;max-width:1450px;margin:0 auto;padding:0 45px}
@media (min-width:1000px) and (max-width:1449px){.kpl-wrap{max-width:1200px}}
@media (max-width:999px){.kpl-wrap{width:88%;max-width:none;padding:0}}

/* ── Header ───────────────────────────── */
.kpl-header{position:relative;z-index:1000;background:var(--kpl-head-bg)}
.kpl-header__inner{display:flex;align-items:center;gap:24px;height:var(--kpl-head-h)}
.kpl-logo{display:flex;align-items:center;flex:0 0 auto}
.kpl-logo img{display:block;height:28px;width:auto}
.kpl-nav{flex:1 1 auto;display:flex;justify-content:center}
.kpl-menu{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none}
.kpl-item{list-style:none}
.kpl-top{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:500;line-height:var(--kpl-head-h);color:var(--kpl-navy);text-decoration:none;white-space:nowrap}
.kpl-top:hover{color:var(--kpl-blue)}
.kpl-chev{transition:transform .2s ease}
/* 2026-10-22 — misure del menu Salient (desktop): 8px tra testo e freccia, freccia in un riquadro di 10px + 2px;
   il menu si centra tra la fine del logo e 31px prima del "Chiama" (16px di gap + 15px di margine del bottone) */
@media (min-width:1000px){
	.kpl-header__inner{gap:0}
	.kpl-nav{margin-right:31px}
	.kpl-top{gap:8px}
	.kpl-top .kpl-chev{width:10px;height:10px;margin-right:2px}
}

/* Megamenu: pannello unico sotto l'header, tre colonne come in Salient */
.kpl-mega{position:absolute;left:0;right:0;top:calc(var(--kpl-head-h) - 9px);display:none;padding:0 20px}
.kpl-mega__inner{max-width:calc(var(--kpl-wrap) - 117px);margin:0 auto 0 auto;display:grid;grid-template-columns:1fr 1fr 2fr;background:#fff;border-radius:5px;box-shadow:0 6px 28px rgba(0,0,0,.08);overflow:hidden}
@media (hover:hover){ .kpl-item--mega:hover .kpl-mega{display:block} .kpl-item--mega:hover .kpl-chev{transform:rotate(180deg)} }
.kpl-item--mega:focus-within .kpl-mega,.kpl-item--mega.kpl-show .kpl-mega{display:block}
.kpl-col{padding:35px;margin:0;list-style:none}
.kpl-mega__title{margin:0 0 12px;font-size:25px;font-weight:600;line-height:1.2;letter-spacing:-.75px;color:var(--kpl-ink)}
.kpl-mega__label{display:inline;margin:0;font-size:15px;font-weight:500;line-height:1.6;color:#141722;background:#dfe9f7;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:4px 8px;border-radius:3px}
.kpl-col--links li{list-style:none}
.kpl-col--links a{display:block;padding:6px;font-size:16px;font-weight:500;line-height:22px;color:var(--kpl-navy);text-decoration:none;border-radius:4px}
.kpl-col--links a:hover{color:var(--kpl-blue)}
.kpl-col--card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 18px 22px;text-decoration:none}
.kpl-card__img{display:block;width:100%;height:250px;overflow:hidden;border-radius:4px}
.kpl-card__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 2s ease}
.kpl-col--card:hover .kpl-card__img img{transform:scale(1.06)}
.kpl-card__title{font-size:18px;line-height:30px;letter-spacing:-.9px;color:var(--kpl-navy)}

/* Pulsante Chiama: stesso sfumato del sito */
/* 2026-10-22 — come la voce di menu Salient "button-animated_extra-color-gradient": sfumato che scorre di continuo
   (nectarBtnGradientScroll, 40s), pillola 131x46 con 24px ai lati e 10px tra icona e testo (misurato a 1920px) */
.kpl-call{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 24px;border-radius:4px;color:#fff !important;font-size:16px;font-weight:500;line-height:16px;text-decoration:none;background:linear-gradient(90deg,#0063FA,#162660,#0063FA) 0 50%/1300% auto;animation:kplCallGradient 40s linear infinite}
.kpl-call svg{flex:0 0 auto;width:18px;height:18px;display:block}
@keyframes kplCallGradient{0%{background-position:0 50%}100%{background-position:1300% 50%}}
@media (prefers-reduced-motion:reduce){.kpl-call{animation:none}}

.kpl-burger{display:none;flex:0 0 auto;width:42px;height:42px;padding:10px;border:0;background:transparent;cursor:pointer}
.kpl-burger span{display:block;height:2px;margin:5px 0;background:var(--kpl-navy);border-radius:2px;transition:transform .2s ease,opacity .2s ease}

/* ── Mobile / tablet (stesso breakpoint dell'header Salient: 1000px) ── */
@media (max-width:999px){
	/* Come l'header mobile Salient: menu tondo a sinistra, logo al centro, Chiama a destra */
	:root{--kpl-head-h:68px;--kshm-header-h:68px}
	.kpl-header__inner{position:relative;justify-content:space-between;gap:12px}
	.kpl-logo{position:absolute;left:50%;transform:translateX(-50%)}
	.kpl-logo img{height:24px}
	.kpl-call{order:2;height:42px;padding:0 14px;gap:6px;font-size:13px}
	/* 2026-10-22 — misure dell'hamburger Salient: cerchio 40px #fdfcf9 con ombra 0 10px 25px, linee 16,8px #141722 */
	.kpl-burger{order:-1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:40px;height:40px;padding:0;border-radius:50%;background:#fdfcf9;box-shadow:0 10px 25px rgba(0,0,0,.13)}
	.kpl-burger span{width:16.8px;margin:0;background:#141722}
	.kpl-open .kpl-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
	.kpl-open .kpl-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
	.kpl-nav{position:absolute;left:0;right:0;top:var(--kpl-head-h);display:none;justify-content:flex-start;max-height:calc(100dvh - var(--kpl-head-h));overflow-y:auto;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.08);border-top:1px solid #ebe8e0}
	.kpl-open .kpl-nav{display:block}
	.kpl-open .kpl-burger span:nth-child(2){opacity:0}
	.kpl-menu{display:block;width:100%;padding:8px 0}
	.kpl-item{border-bottom:1px solid #f0ede6}
	.kpl-top{display:flex;justify-content:space-between;width:100%;padding:0 20px;line-height:54px}
	.kpl-mega{position:static;padding:0 0 10px}
	.kpl-item--mega:focus-within .kpl-mega{display:none}
	.kpl-item--mega.kpl-show .kpl-mega{display:block}
	.kpl-item--mega.kpl-show .kpl-chev{transform:rotate(180deg)}
	.kpl-mega__inner{display:block;box-shadow:none;border-radius:0}
	.kpl-hm{display:none !important}
	.kpl-col{padding:0 20px}
	.kpl-col--links a{padding:10px 12px;font-size:15px}
	html.kpl-menu-open,html.kpl-menu-open body{overflow:hidden}
}
@media (max-width:340px){ .kpl-call span{display:none} .kpl-call{padding:0 12px} }

/* ── Footer (ricalca le global section Salient) ── */
/* 2026-10-22 — le regole qui sotto valgono solo per il footer scritto a mano (ripiego): il footer normale
   (.kpl-footer--gs) è fatto dalle global section Salient e prende gli stili del contenuto, come l'originale. */
.kpl-footer:not(.kpl-footer--gs){font-size:15px}
.kpl-footer:not(.kpl-footer--gs) h3{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--kpl-ink)}
.kpl-footer:not(.kpl-footer--gs) p{margin:0 0 4px}
.kpl-footer:not(.kpl-footer--gs) a{text-decoration:underline;text-underline-offset:3px}
.kpl-cta{background:#CBDCEB;padding:34px 0}
.kpl-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.kpl-cta__title{flex:1 1 420px;margin:0;font-size:26px;font-weight:600;line-height:1.25;color:var(--kpl-ink)}
.kpl-cta__side{display:flex;flex-direction:column;align-items:center;gap:10px}
.kpl-btn{display:inline-block;padding:16px 26px;border-radius:4px;background:var(--kpl-blue);color:#fff !important;font-size:17px;font-weight:600;text-decoration:none !important}
.kpl-btn:hover{background:#0050cc}
.kpl-cta__checks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin:0;padding:0;font-size:13px}
.kpl-cta__checks li{list-style:none}
.kpl-cta__checks li::before{content:"✓ ";color:#0a8f3c;font-weight:700}
.kpl-foot{background:#84A8D5;padding:48px 0 30px;color:var(--kpl-ink)}
.kpl-foot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:34px;border-bottom:1px solid rgba(2,21,56,.25)}
.kpl-fiaip{display:block;width:90px;height:auto}
.kpl-foot__local{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:34px 0}
.kpl-local ul{margin:0;padding:0}
.kpl-local li{list-style:none;margin:2px 0}
.kpl-local summary{margin-top:10px;cursor:pointer;font-size:13px;font-weight:600;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;list-style:none}
.kpl-local summary::-webkit-details-marker{display:none}
.kpl-foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px}
@media (max-width:760px){
	.kpl-cta__inner{flex-direction:column;align-items:flex-start}
	.kpl-cta__title{flex:none;font-size:22px}
	.kpl-foot__grid{grid-template-columns:1fr 1fr}
	.kpl-foot__local{grid-template-columns:1fr}
	.kpl-foot__bottom{flex-direction:column;align-items:flex-start}
}

/* Footer "immobile": banda richiesta info + copyright (come le schede Salient) */
.kpl-cta__lead{flex:1 1 420px}
.kpl-cta__lead p{margin:6px 0 0;max-width:60ch}
.kpl-foot--compact{padding:22px 0}
.kpl-btn--dark{background:#162660}
.kpl-btn--dark:hover{background:#0f1b47}

/* Come Salient: niente scorrimento orizzontale da elementi larghi 100vw (es. galleria swipe).
   clip invece di hidden, così position:sticky continua a funzionare. */
html:has(> body.ks-pagelean),.ks-pagelean{overflow-x:clip}

/* Contenitore del contenuto, come .container di Salient (1200px con 45px di margine interno,
   88% su mobile). Le pagine a tutta larghezza (es. /immobili) lo saltano con la meta
   _ks_lean_fullwidth = 1. */
/* 2026-10-22 — Come .container di Salient: 1450px oltre i 1450 di schermo, 1200px tra 1000 e 1450 */
.kpl-content{max-width:1450px;margin:0 auto;padding:0 45px 40px}
@media (min-width:1000px) and (max-width:1450px){ .kpl-content{max-width:1200px} }
@media (max-width:999px){ .kpl-content{max-width:88%;padding:0 0 40px} }

/* ── Articolo (template-post-lean.php): ricalca il single post Salient ── */
.kpl-post{padding:0 0 40px}
.kpl-post__col{max-width:1000px;margin:0 auto;background:#faf7f3}
.kpl-post__banner{position:relative;height:400px;overflow:hidden}
.kpl-post__banner::before{content:"";position:absolute;inset:-30px;background:var(--kpl-banner) center/cover no-repeat;filter:blur(18px)}
.kpl-post__banner .kpl-post__banner-img{position:relative;display:block;width:100%;height:100%;max-width:none;object-fit:contain}
.kpl-post__head{max-width:700px;margin:0 auto;padding:35px 20px 10px;text-align:center}
.kpl-post__cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px}
.kpl-post__cats a{font-size:14px;font-weight:600;line-height:1.3;padding:7px 15px;border-radius:4px;background:rgba(0,0,0,.05);color:var(--kpl-navy);text-decoration:none}
.kpl-post__head h1{font-size:30px;line-height:33px;font-weight:600;letter-spacing:-.9px;margin:0}
.kpl-post__content{max-width:700px;margin:0 auto;padding:20px 0 10px}
.kpl-post__content figure{margin:0 0 20px}
.kpl-post__head .kscr-updated-badge{display:inline-block;margin-top:14px}
.kpl-post__content p{padding-bottom:8px}
.kpl-post__content h2{font-size:25px;line-height:33px;margin:10px 0 7px}
.kpl-post__content h3{font-size:21px;line-height:1.3;font-weight:600;text-transform:none;letter-spacing:-.4px;margin:0 0 7px}
.kpl-post__content img{height:auto}
.kpl-report{max-width:700px;margin:30px auto;display:grid;grid-template-columns:200px 1fr 210px;gap:24px;align-items:center;padding:40px 30px;border-radius:10px;background:#daeaf5}
.kpl-report__img{width:100%;height:auto}
.kpl-report h2{font-size:22px;line-height:28px;margin:0 0 8px}
.kpl-report p{padding:0}
.kpl-related{max-width:900px;margin:0 auto;padding:30px 20px 50px}
.kpl-related__title{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.63px;margin:0 0 20px}
.kpl-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:29px}
.kpl-card{display:flex;flex-direction:column;border-radius:5px;overflow:hidden;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.14);text-decoration:none;color:var(--kpl-navy)}
.kpl-card__img{display:block;height:189px;overflow:hidden}
.kpl-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.kpl-card__body{display:flex;flex-direction:column;gap:10px;padding:22px 30px 30px}
.kpl-card__cats{font-size:14px;font-weight:600}
.kpl-card__title{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.5px}
.kpl-card__excerpt{font-size:16px;line-height:26px}
@media (max-width:999px){
	/* Come Salient su mobile: colonna all'88%, banner 250px, titolo più piccolo */
	.kpl-post__col{max-width:88%}
	.kpl-post__banner{height:250px}
	.kpl-post__head{padding:35px 0 10px}
	.kpl-post__head h1{font-size:20px;line-height:22px;letter-spacing:-.4px}
	.kpl-post__content{padding:20px 0 10px}
	.kpl-report{grid-template-columns:1fr;text-align:center;margin:30px 16px}
	.kpl-report__img{max-width:180px;margin:0 auto}
	.kpl-related__grid{grid-template-columns:1fr}
}

/* Breadcrumb in cima al footer completo, come la global section Salient */
.kpl-crumbs{padding:12px 0;font-size:16px}
.kpl-crumbs p{padding:0;margin:0}
.kpl-crumbs a{text-decoration:none}

/* Come Salient: [hidden] vince sempre. Diversi plugin (es. il modulo kspop) nascondono con
   l'attributo hidden ma hanno display:flex/block nel loro CSS. */
.ks-pagelean [hidden]{display:none !important}

/* Come Salient: i paragrafi vuoti (anche con solo un commento HTML) non occupano spazio */
.ks-pagelean p:empty{display:none}

/* Come Salient (stessa specificità 0,1,1): i campi di testo sono larghi 100% del contenitore,
   così nei moduli in riga (es. valutazione) si restringono invece di sbordare. */
:where(.ks-pagelean) :is(input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=date],textarea){width:100%}

/* 2026-10-22 — Tabelle come Salient (main-styles: "body:not(.woocommerce-cart) .main-content table…"),
   stessa specificità; le usa ad es. il widget dati di zona (keyspace-area-insights). */
body:not(.woocommerce-cart) .kpl-main table{margin:0 0 20px;padding:0;width:100%;border-collapse:collapse;border-spacing:0;background-color:#fff;border-top:1px solid #ececec}
body:not(.woocommerce-cart) .kpl-main table tr:nth-child(2n+1){background-color:#fcfcfc}
body:not(.woocommerce-cart) .kpl-main td{border-color:#ececec;border-left:none;border-style:none solid solid none;border-top:medium none;border-width:medium 1px 1px medium;font-size:14px;padding:10px}
body:not(.woocommerce-cart) .kpl-main th{border-left:medium none;border-style:none solid solid none;border-top:medium none;border-width:medium 1px 1px medium;font-weight:700;padding:10px;text-align:left;border-color:#ececec}
body:not(.woocommerce-cart) .kpl-main tr td:first-child,body:not(.woocommerce-cart) .kpl-main tr th:first-child{border-left-style:solid;border-left-width:1px;border-color:#ececec}
