/*
Theme Name: StoreSuite Fabbro
Theme URI: https://storesuite.me/
Author: AdecPC di Antonio De Cosmi – StoreSuite
Author URI: https://storesuite.me/
Description: Tema per fabbri, carpenteria metallica, serramenti in alluminio e ferramenta. Da usare con il plugin StoreSuite Fabbro e Serramenti (ss-fabbro).
Version: 1.0.1
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: storesuite-fabbro
*/

:root{
	--ssf-ferro:#1f2429;--ssf-ferro-2:#2b3138;--ssf-grigio:#5b6168;--ssf-linea:#dde1e5;--ssf-fondo:#f4f5f6;
	--ssf-scintilla:#e8641b;--ssf-scintilla-scuro:#c44f0e;--ssf-scintilla-chiaro:#ffb072;
	--r:14px;--ombra:0 2px 0 #e3e6e9,0 16px 40px -24px rgba(0,0,0,.45);
	--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:18px;line-height:1.6;color:#1d2125;background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--ssf-scintilla-scuro)}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:850}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.wrap--stretto{width:min(820px,100% - 40px)}
.salta{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:.6em 1em;z-index:99}
.salta:focus{left:0}
:focus-visible{outline:3px solid var(--ssf-scintilla);outline-offset:2px}

/* Bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--ssf-scintilla);color:#fff!important;border:2px solid transparent;border-radius:10px;padding:.8em 1.35em;font-weight:750;font-size:1rem;text-decoration:none!important;transition:transform .15s,background .15s;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--ssf-scintilla-scuro);transform:translateY(-2px)}
.btn svg{width:1.2em;height:1.2em}
.btn--grande{font-size:1.12rem;padding:1em 1.6em}
.btn--piccolo{padding:.55em 1em;font-size:.95rem}
.btn--rosso{background:#c62828}.btn--rosso:hover{background:#9d1d1d}
.btn--contorno{background:transparent;color:var(--ssf-ferro)!important;border-color:var(--ssf-ferro)}
.btn--contorno:hover{background:var(--ssf-ferro);color:#fff!important}
.btn--contorno-chiaro{background:transparent;border-color:rgba(255,255,255,.6)}
.btn--contorno-chiaro:hover{background:#fff;color:var(--ssf-ferro)!important}
.occhiello{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:800;color:var(--ssf-scintilla-scuro);margin:0 0 .6em}

/* Topbar e testata */
.topbar{background:var(--ssf-ferro);color:#c9ced3;font-size:.85rem}
.topbar .wrap{display:flex;gap:1.5em;align-items:center;min-height:38px;flex-wrap:wrap}
.topbar__urg{margin-left:auto;color:#fff;text-decoration:none;display:flex;align-items:center;gap:.5em}
.topbar__urg i{width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 0 rgba(255,77,77,.7);animation:batte 1.6s infinite}
@keyframes batte{70%{box-shadow:0 0 0 9px rgba(255,77,77,0)}100%{box-shadow:0 0 0 0 rgba(255,77,77,0)}}
@media(max-width:760px){.topbar .wrap>span{display:none}.topbar__urg{margin:0 auto}}
.testata{background:#fff;border-bottom:1px solid var(--ssf-linea);position:sticky;top:0;z-index:50}
.admin-bar .testata{top:32px}
.testata__in{display:flex;align-items:center;gap:1.5em;min-height:78px}
.marchio{display:flex;align-items:center;gap:.7em;text-decoration:none;color:var(--ssf-ferro);margin-right:auto}
.marchio__segno svg{width:46px;height:46px;display:block}
.marchio__segno rect{fill:var(--ssf-ferro)}
.marchio__segno path{fill:none;stroke:var(--ssf-scintilla);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.marchio__logo{max-height:56px;width:auto}
.marchio__txt{display:flex;flex-direction:column;line-height:1.15}
.marchio__txt b{font-size:1.15rem;font-weight:850}
.marchio__txt small{color:var(--ssf-grigio);font-size:.8rem;max-width:26ch}
.nav{display:flex;align-items:center;gap:1.2em}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.2em}
.nav a{text-decoration:none;color:var(--ssf-ferro);font-weight:650;font-size:.95rem;white-space:nowrap}
.nav li a{padding:.5em .6em;border-radius:8px;display:block}
.nav li a:hover,.nav .current-menu-item>a{background:var(--ssf-fondo);color:var(--ssf-scintilla-scuro)}
.nav ul ul{display:none}
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:.5em;flex-direction:column;gap:5px;align-items:center}
.menu-btn span{display:block;width:26px;height:3px;background:var(--ssf-ferro);border-radius:2px}
.menu-btn em{font-style:normal;font-size:.7rem;font-weight:700}
@media(max-width:1180px){
	.menu-btn{display:flex}
	.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:1em 20px 1.5em;border-bottom:1px solid var(--ssf-linea);box-shadow:0 20px 30px -20px rgba(0,0,0,.3)}
	.nav.aperto{display:flex}
	.nav ul{flex-direction:column}
	.nav li a{font-size:1.15rem;padding:.75em .5em;border-bottom:1px solid var(--ssf-fondo)}
	.testata__in{position:relative}
}

/* Hero */
.hero{position:relative;background:var(--ssf-ferro);color:#fff;overflow:hidden;isolation:isolate}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,21,25,.94) 0%,rgba(18,21,25,.78) 48%,rgba(18,21,25,.25) 100%)}
.hero__in{padding:clamp(3.5rem,9vw,7.5rem) 0}
.hero h1{max-width:19ch}
.hero h1 span{color:var(--ssf-scintilla-chiaro);display:block}
.hero .occhiello{color:var(--ssf-scintilla-chiaro)}
.hero__sotto{font-size:1.2rem;max-width:56ch;color:#dfe3e7}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8em;margin:1.8em 0 2.2em}
.hero__fiducia{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6em}
.hero__fiducia li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:30px;padding:.4em 1em;font-size:.92rem;backdrop-filter:blur(4px)}
.hero__fiducia b{color:var(--ssf-scintilla-chiaro)}

/* Sezioni */
.sezione{padding:clamp(3rem,7vw,5.5rem) 0}
.sezione--grigia{background:var(--ssf-fondo)}
.sezione__testa{margin-bottom:2em;max-width:720px}
.sezione__testa--riga{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:1em;flex-wrap:wrap}
.servizi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1em}
.servizio{display:flex;flex-direction:column;gap:.35em;padding:1.4em;border:1.5px solid var(--ssf-linea);border-radius:var(--r);text-decoration:none;color:inherit;background:#fff;transition:.2s}
.servizio:hover{border-color:var(--ssf-scintilla);transform:translateY(-3px);box-shadow:var(--ombra)}
.servizio__ico{width:52px;height:52px;border-radius:12px;background:var(--ssf-ferro);color:var(--ssf-scintilla-chiaro);display:grid;place-items:center;margin-bottom:.4em}
.servizio__ico svg{width:30px;height:30px}
.servizio b{font-size:1.15rem}
.servizio>span:not(.servizio__ico){color:var(--ssf-grigio);font-size:.97rem;flex:1}
.servizio em{font-style:normal;font-weight:750;color:var(--ssf-scintilla-scuro);font-size:.92rem}

.sezione--urgenze{background:linear-gradient(135deg,#1a1d21,#2a2f35);color:#fff}
.urgenze{display:grid;grid-template-columns:1fr 1.1fr;gap:3em;align-items:center}
@media(max-width:900px){.urgenze{grid-template-columns:1fr}}
.urgenze h2 span{color:var(--ssf-scintilla-chiaro);display:block}
.urgenze p{color:#d5dade}
.urgenze .occhiello{color:#ff8a80}
.urgenze__cta{display:flex;align-items:center;gap:1.4em;flex-wrap:wrap}
.link-chiaro{color:#fff;font-weight:700}
.urgenze__tariffe{background:#fff;color:#1d2125;border-radius:18px;padding:1.4em}
.urgenze__tariffe .ssf-tariffe{margin-top:.4em}

.passi{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1em;counter-reset:p}
@media(max-width:1000px){.passi{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.passi li{counter-increment:p;position:relative;padding:1.4em 1.2em 1.3em;border-radius:var(--r);background:var(--ssf-fondo);display:flex;flex-direction:column;gap:.3em}
.passi li:before{content:counter(p,decimal-leading-zero);font-size:2.4rem;font-weight:900;color:var(--ssf-scintilla);line-height:1}
.passi b{font-size:1.12rem}
.passi span{color:var(--ssf-grigio);font-size:.96rem}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:1.5em}
@media(max-width:900px){.duo{grid-template-columns:1fr}}
.duo__box{border-radius:20px;padding:clamp(1.6rem,4vw,2.6rem)}
.duo__box--ferr{background:#fff4ec;border:1.5px solid #ffd9bf}
.duo__box--area{background:var(--ssf-ferro);color:#fff;position:relative;overflow:hidden}
.duo__box--area .occhiello{color:var(--ssf-scintilla-chiaro)}
.duo__box--area p{color:#d5dade;max-width:44ch}
.spunte{list-style:none;padding:0;margin:1em 0 1.6em}
.spunte li{padding:.25em 0 .25em 1.7em;position:relative}
.spunte li:before{content:"✓";position:absolute;left:0;color:var(--ssf-scintilla-scuro);font-weight:900}
.telefono{width:230px;border-radius:30px;background:#0e1013;padding:10px;margin:1.4em 0;box-shadow:0 30px 50px -20px rgba(0,0,0,.8);border:1px solid #3a4048}
.telefono__schermo{background:#fff;color:#1d2125;border-radius:22px;padding:1.1em 1em;display:flex;flex-direction:column;gap:.35em}
.telefono__schermo small{color:var(--ssf-grigio);font-size:.75rem}
.telefono__schermo b{color:var(--ssf-scintilla-scuro)}
.telefono__linea{display:flex;gap:4px;margin:.4em 0}
.telefono__linea i{flex:1;height:6px;border-radius:3px;background:#dde1e5}
.telefono__linea i.f{background:#2e7d32}.telefono__linea i.o{background:var(--ssf-scintilla)}
.telefono__nota{font-size:.78rem;background:var(--ssf-fondo);border-radius:8px;padding:.5em .6em}
@media(min-width:1100px){.telefono{position:absolute;right:2.2rem;bottom:-30px;transform:rotate(6deg)}.duo__box--area p{max-width:30ch}}

.faq{max-width:860px}
.faq details{background:#fff;border:1px solid var(--ssf-linea);border-radius:12px;margin-bottom:.7em}
.faq summary{cursor:pointer;padding:1.1em 1.3em;font-weight:750;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1em}
.faq summary:after{content:"+";font-size:1.5rem;line-height:1;color:var(--ssf-scintilla)}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 1.3em 1.2em;margin:0;color:#3d4349}

/* Pagine interne */
.pagina{padding:clamp(2.2rem,5vw,4rem) 0 5rem}
.pagina__testa{margin-bottom:1.5em}
.testo>*{max-width:100%}
.testo p,.testo li{max-width:75ch}
.foto-grande img{border-radius:var(--r);width:100%}
.foto-grande{margin:0 0 1.5em}

/* Piede */
.piede{background:#15181c;color:#b9c0c7;padding:3.5rem 0 1.2rem;font-size:.95rem}
.piede a{color:#e9ecef}
.piede__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2em}
@media(max-width:760px){.piede__grid{grid-template-columns:1fr}}
.piede b{color:#fff;display:block;margin-bottom:.5em}
.piede__nome{font-size:1.2rem}
.piede ul{list-style:none;padding:0;margin:0}.piede li{margin:.3em 0}
.piede__zona{font-size:.85rem}
.piede__legale{display:flex;flex-wrap:wrap;gap:.4em 1.4em;border-top:1px solid #2b3138;margin-top:2.5em;padding-top:1.2em;font-size:.82rem}
.piede__ss{margin-left:auto}

/* Barra azioni su telefono */
.barra-mobile{display:none}
@media(max-width:760px){
	body{padding-bottom:68px}
	.barra-mobile{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--ssf-linea);box-shadow:0 -6px 20px -10px rgba(0,0,0,.3)}
	.barra-mobile a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.55em 0 .6em;text-decoration:none;color:var(--ssf-ferro);font-size:.78rem;font-weight:700}
	.barra-mobile svg{width:24px;height:24px}
	.barra-mobile__cta{background:var(--ssf-scintilla);color:#fff!important}
	.ssf-ferr__cassa{bottom:68px}
}