/*
Theme Name: Serrande Adriano Pro
Theme URI: https://serrandeadriano.it
Author: Serrande Adriano
Description: Tema professionale WordPress per riparazione, installazione e motorizzazione serrande.
Version: 2.0.0
Text Domain: serrande-adriano-pro
*/
:root{
 --orange:#f36a0a; --orange2:#ff8a1a; --black:#0c0d0f; --dark:#15171a;
 --text:#202226; --muted:#6b7078; --white:#fff; --light:#f5f6f7; --green:#18b84b;
 --radius:18px; --shadow:0 18px 48px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1180px,92%);margin:auto}
.topbar{background:#070707;color:#fff;font-size:14px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.topbar span{margin-right:22px}.orange{color:var(--orange)}
.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900}
.brand-mark{width:48px;height:48px;border:4px solid #111;border-radius:11px;position:relative}
.brand-mark:after{content:"";position:absolute;inset:9px;background:var(--orange);border-radius:5px}
.brand-copy{line-height:.9}.brand-copy b{display:block;font-size:21px}.brand-copy span{font-size:21px;color:var(--orange)}
nav{display:flex;gap:26px;font-weight:800;font-size:14px}
nav a:hover{color:var(--orange)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 22px;border-radius:11px;color:#fff;font-weight:900;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-orange{background:linear-gradient(135deg,var(--orange),var(--orange2))}
.btn-green{background:var(--green)}
.hero{background:linear-gradient(90deg,#0d0f12 0%,#16191d 54%,#0b0c0e 100%);color:#fff;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:600px;align-items:center}
.hero-copy{padding:72px 0}
.eyebrow{font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#f0f0f0;font-size:14px}
.hero h1{font-size:58px;line-height:1.02;text-transform:uppercase;margin:14px 0 18px}
.hero h1 span{color:var(--orange)}
.hero p{font-size:21px;line-height:1.55;color:#e6e6e6;max-width:660px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0}
.hero-badges{display:flex;gap:24px;flex-wrap:wrap;color:#ddd;font-size:14px}
.hero-media{height:100%;display:flex;align-items:end}
.hero-media img{width:100%;height:520px;object-fit:cover;border-radius:28px 28px 0 0;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.trustbar-wrap{margin-top:-42px;position:relative;z-index:5}
.trustbar{background:#fff;border-radius:18px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(3,1fr);padding:26px}
.trust{display:flex;gap:14px;padding:5px 22px;border-right:1px solid #e8e8e8}
.trust:last-child{border-right:0}
.ico{width:48px;height:48px;border:2px solid var(--orange);border-radius:50%;display:grid;place-items:center;color:var(--orange);font-size:21px;flex:0 0 auto}
.trust h3{font-size:15px;text-transform:uppercase;margin:0 0 6px}.trust p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
section{padding:78px 0}
.title{text-align:center;margin-bottom:38px}.title h2{font-size:36px;text-transform:uppercase;margin:0}.title p{color:var(--muted);max-width:740px;margin:12px auto 0;line-height:1.6}.line{width:58px;height:4px;background:var(--orange);border-radius:4px;margin:14px auto 0}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:#fff;border:1px solid #ececec;border-radius:16px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.08)}
.card img{width:100%;height:220px;object-fit:cover}
.card-body{padding:22px}.card h3{text-transform:uppercase;font-size:18px;margin:0 0 10px}.card p{color:var(--muted);line-height:1.55;margin:0}
.highlight{background:var(--light)}
.highlight-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.highlight img{width:100%;height:470px;object-fit:cover;border-radius:20px;box-shadow:var(--shadow)}
.highlight h2{font-size:40px;line-height:1.05;text-transform:uppercase;margin:0 0 18px}
.highlight h2 span{color:var(--orange)}
.checks{list-style:none;padding:0;margin:22px 0}.checks li{padding:9px 0}.checks li:before{content:"✓";color:var(--orange);font-weight:900;margin-right:10px}
.reviews-box{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:26px}
.reviews-box .wp-gr,.reviews-box .grw-slider,.reviews-box .wp-google-list{max-width:100%!important}
.cta{background:linear-gradient(135deg,#111,#1b1e22);color:#fff}
.cta-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.cta h2{font-size:42px;text-transform:uppercase;margin:0 0 12px}.cta p{color:#ddd;font-size:18px}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.area-card{background:#fff;border:1px solid #e9e9e9;border-radius:16px;padding:28px;box-shadow:0 10px 28px rgba(0,0,0,.07)}
.area-card ul{columns:2;list-style:none;padding:0;line-height:2}.area-card li:before{content:"●";color:var(--orange);font-size:10px;margin-right:9px}
footer{background:#090a0c;color:#fff;padding:38px 0 100px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
.footer-grid h3{margin-top:0}.footer-grid p,.footer-grid li{color:#ccc;line-height:1.7}
.footer-grid ul{list-style:none;padding:0}
.mobile-actions{display:none}
@media(max-width:980px){
 nav{display:none}.hero-grid{grid-template-columns:1fr}.hero-copy{padding-bottom:30px}.hero-media img{height:380px}
 .services{grid-template-columns:repeat(2,1fr)}.highlight-grid,.cta-grid,.areas{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
 body{padding-bottom:72px}.topbar .container{justify-content:center}.topbar .social{display:none}.nav>.btn{display:none}
 .hero h1{font-size:39px}.hero p{font-size:18px}.hero-media img{height:270px}
 .trustbar{grid-template-columns:1fr;padding:16px}.trust{border-right:0;border-bottom:1px solid #eee;padding:16px 6px}.trust:last-child{border-bottom:0}
 .services{grid-template-columns:1fr}.highlight h2,.cta h2{font-size:32px}.title h2{font-size:30px}
 .footer-grid{grid-template-columns:1fr}.area-card ul{columns:1}
 .mobile-actions{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:200}
 .mobile-actions a{padding:17px 8px;color:#fff;text-align:center;font-weight:900}
 .mobile-actions .call{background:var(--orange)}.mobile-actions .wa{background:var(--green)}
}


/* Directory comuni e landing page locali */
.city-hero{background:linear-gradient(135deg,#0d0f12,#1a1d22);color:#fff;padding:72px 0}
.city-hero h1{font-size:48px;line-height:1.05;text-transform:uppercase;margin:0 0 18px}
.city-hero h1 span{color:var(--orange)}
.city-hero p{font-size:20px;line-height:1.6;max-width:800px;color:#e6e6e6}
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.city-panel{background:#fff;border:1px solid #e8e8e8;border-radius:16px;padding:24px;box-shadow:0 10px 28px rgba(0,0,0,.07)}
.city-panel h2,.city-panel h3{text-transform:uppercase;margin-top:0}
.city-list{columns:3;column-gap:28px;list-style:none;padding:0;margin:0}
.city-list li{break-inside:avoid;margin:0 0 9px}
.city-list a{color:#25272a}
.city-list a:hover{color:var(--orange)}
.city-breadcrumbs{font-size:14px;color:#c8c8c8;margin-bottom:14px}
.city-breadcrumbs a{color:#fff}
.local-services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.local-service{background:#fff;border:1px solid #e9e9e9;border-radius:14px;padding:22px}
.local-service h3{margin-top:0;text-transform:uppercase}
.nearby-links{display:flex;flex-wrap:wrap;gap:10px}
.nearby-links a{background:#f2f3f4;border-radius:999px;padding:9px 13px;font-size:14px}
.nearby-links a:hover{background:var(--orange);color:#fff}
.notice-seo{background:#fff8ee;border-left:4px solid var(--orange);padding:16px 18px;border-radius:8px;color:#555}
@media(max-width:900px){
 .city-grid,.local-services{grid-template-columns:1fr 1fr}
 .city-list{columns:2}
}
@media(max-width:640px){
 .city-hero h1{font-size:36px}
 .city-grid,.local-services{grid-template-columns:1fr}
 .city-list{columns:1}
}