/* DomoticaInCasa.net – tema su Bootstrap 5.3. Font di sistema: nessuna richiesta a server esterni. */
:root {
  /* palette ricavata dal logo ufficiale */
  --brand: #2b7a0f;          /* verde del logo, leggibile come testo su bianco */
  --brand-dark: #10380b;     /* verde scuro: footer, hover */
  --accent: #6cb31f;         /* verde chiaro del logo: filetti e dettagli, mai per testo */
  --ink: #222221;            /* nero del logo */
  --muted: #5b6774;
  --paper: #ffffff;
  --soft: #f3f6f7;
  --radius: .75rem;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color-rgb: 43, 122, 15;
  --bs-link-hover-color-rgb: 16, 56, 11;
}
body { background: var(--paper); font-size: 1.0625rem; }
.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 2000; background: #fff; padding: .5rem 1rem; }
.text-brand { color: var(--brand); }
.btn-brand { background: var(--brand); color: #fff; border: 0; }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--brand-dark); color: #fff; }

/* Header */
.site-header { background: #fff; position: sticky; top: 0; z-index: 1030; }
.site-logo { height: 58px; width: auto; display: block; }
@media (min-width: 992px) { .site-logo { height: 64px; } }
/* le immagini WebP sono dentro <picture>: dentro un riquadro .ratio deve riempirlo come faceva <img> */
.ratio > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.navbar .nav-link { white-space: nowrap; }
.site-wordmark { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.site-wordmark span { color: var(--brand); }
.navbar .nav-link { font-weight: 600; color: var(--ink); text-transform: uppercase; font-size: .875rem; letter-spacing: .04em; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--brand); }
.site-search .form-control { min-width: 200px; }

/* Home */
.hero { background: linear-gradient(135deg, #eef6e9 0%, #f7faf5 60%, #ffffff 100%); }
.hero a { color: var(--ink); text-decoration: none; }
.hero a.btn { color: #fff; }
.hero-kicker, .card-kicker, .guide-label { text-transform: uppercase; font-size: .75rem; font-weight: 700; letter-spacing: .08em; color: var(--brand); text-decoration: none; }
.hero-img { aspect-ratio: 16/9; object-fit: cover; }
.section-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 3px solid var(--accent); display: inline-block; }
.guide-box, .topic-box { background: var(--soft); border-radius: var(--radius); padding: 1.25rem; text-decoration: none; color: var(--ink); border: 1px solid #e2ebdd; transition: border-color .15s; }
.guide-box:hover, .topic-box:hover { border-color: var(--brand); }
.guide-title { display: block; font-weight: 700; font-size: 1.1rem; margin-top: .25rem; }
.popular-list a { text-decoration: none; color: var(--ink); font-weight: 600; }
.popular-num { flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }

/* Card */
.article-card { border: 1px solid #e6ebee; border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s; }
.article-card:hover { box-shadow: 0 .5rem 1.25rem rgba(16, 56, 11, .08); }
.article-card .card-title a { color: var(--ink); text-decoration: none; }
.card-img-wrap img { object-fit: cover; }

/* Articolo */
.article-title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.15; }
.article-body { line-height: 1.75; }
.article-body h2 { font-size: 1.6rem; font-weight: 700; margin-top: 2.5rem; scroll-margin-top: 90px; }
.article-body h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.75rem; scroll-margin-top: 90px; }
.article-body img { max-width: 100%; height: auto; border-radius: .5rem; }
.article-body table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid #dfe5e8; padding: .5rem .75rem; vertical-align: top; }
.article-body th { background: var(--soft); }
.article-body blockquote { border-left: 4px solid var(--accent); padding-left: 1rem; margin: 1.5rem 0; }
.article-body blockquote h2, .article-body blockquote h3 { margin-top: .5rem; }
.article-body a[data-affiliate]::after { content: " ↗"; font-size: .8em; }
.toc, #indicecontainer { background: var(--soft); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0; }
#indicecontainer h2, #indicecontainer h3 { font-size: 1.1rem; margin-top: 0; }
#indicecontainer .href { color: var(--brand); cursor: pointer; font-size: .85rem; text-decoration: underline; }
.pillar-box { border: 2px solid var(--brand); border-radius: var(--radius); padding: 1rem 1.25rem; }

/* Sidebar */
.sidebar-sticky { position: sticky; top: 90px; }
.sidebar-box { border: 1px solid #e6ebee; border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.sidebar-box li { padding: .35rem 0; border-bottom: 1px solid #f0f3f4; }
.sidebar-box li:last-child { border-bottom: 0; }
.sidebar-title { font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; color: var(--muted); }

/* Footer */
.site-footer { background: var(--brand-dark); color: #cfe0c8; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
/* link del piè di pagina più facili da toccare sul telefono (almeno 24 px di altezza) */
.site-footer li a { display: inline-block; padding: .3rem 0; }
.footer-title { color: #fff; font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; }

/* Consenso */
.consent-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; background: var(--brand-dark); color: #fff; padding: 1rem 0; box-shadow: 0 -4px 16px rgba(0,0,0,.15); }
.consent-banner a { color: #fff; }

/* Banner VIGI Solutions (da banner-vigisolutions.php) */
.vs-wrap{container-type:inline-size;width:100%;max-width:970px;margin:20px auto;}
.vs-banner{position:relative;overflow:hidden;box-sizing:border-box;border-radius:14px;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#0b2a3c 0%,#0f3d4f 55%,#125a52 100%);}
.vs-banner::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 88% 18%,rgba(250,204,21,.35),transparent 30%),repeating-linear-gradient(120deg,rgba(255,255,255,.04) 0 2px,transparent 2px 26px);}
.vs-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:250px;padding:30px 30px 38px;box-sizing:border-box;}
.vs-left{flex:1 1 auto;min-width:0;}
.vs-brand{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:#cde7e3;font-size:13px;font-weight:700;letter-spacing:.14em;}
.vs-dot{width:10px;height:10px;border-radius:50%;background:#facc15;box-shadow:0 0 0 4px rgba(250,204,21,.2);}
.vs-title{margin:0;color:#fff;font-size:32px;line-height:1.12;font-weight:700;}
.vs-text{margin:10px 0 0;color:#d7e6e4;font-size:16px;line-height:1.45;max-width:560px;}
.vs-pills{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.vs-pills li{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13px;border-bottom:1px solid rgba(255,255,255,.12)!important;}
.vs-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;}
.vs-btn{display:inline-block;padding:13px 22px;border-radius:8px;background:#facc15;color:#0b2a3c;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .15s;}
.vs-btn:hover,.vs-btn:focus-visible{background:#fde047;color:#0b2a3c;}
.vs-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.vs-note{color:#b9d3cf;font-size:12px;}
.vs-label{position:absolute;right:12px;bottom:9px;z-index:1;color:#8fb3ae;font-size:11px;}
@container (max-width:760px){.vs-inner{min-height:220px;padding:24px 20px 34px;gap:18px;}.vs-title{font-size:26px;}.vs-text{font-size:15px;}}
@container (max-width:520px){.vs-banner{border-radius:12px;}.vs-inner{flex-direction:column;align-items:stretch;min-height:auto;padding:18px 18px 34px;gap:14px;}.vs-brand{font-size:12px;margin-bottom:8px;}.vs-title{font-size:21px;}.vs-text{font-size:14px;margin-top:8px;}.vs-pills{margin-top:12px;gap:6px;}.vs-pills li{font-size:12px;padding:5px 10px;}.vs-right{align-items:stretch;}.vs-btn{text-align:center;padding:12px 16px;}.vs-note{text-align:center;}.vs-label{left:0;right:0;text-align:center;}}
@media (prefers-reduced-motion:reduce){.vs-btn,.article-card,.guide-box{transition:none;}}