/*
Theme Name: VizioPeloso
Theme URI: https://viziopeloso.com/
Author: VizioPeloso
Author URI: https://viziopeloso.com/chi-siamo/
Description: Tema editoriale hand-built per VizioPeloso, la rivista italiana per chi vive con cani e gatti. Magazine caldo ed editoriale, mobile-first, leggero, GDPR-friendly, senza dipendenze esterne.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viziopeloso
Tags: blog, magazine, animali, editoriale, responsive, custom-colors
*/

/* ============================================================
   VIZIOPELOSO — Design system
   Palette: neutri caldi (crema/sabbia), verde bosco primario,
   terracotta come accento. Mai solo il colore per comunicare:
   badge e segnali usano sempre icona + testo.
   ============================================================ */
:root{
  /* VizioPeloso locked palette — built on luminance contrast (dark vs light),
     never hue alone. Every signal pairs color with icon + text label. */
  --bg:           #FAF7F2; /* warm cream paper background */
  --surface:      #FFFFFF; /* cards */
  --ink:          #2B2620; /* warm charcoal body text — 14.0:1 on --bg */
  --ink-soft:     #4A4238; /* softer ink for secondary headings */
  --muted:        #6B6259; /* secondary text — 5.6:1 on --bg (WCAG AA) */
  --line:         #E2D5BB; /* borders, dividers */
  --primary:      #2E5B3F; /* deep botanical green — nav, links, trust (7.8:1 on white) */
  --primary-dark: #234430; /* hover states, footer, dark bands */
  --accent:       #B65E26; /* burnt terracotta — CTA buttons (white bold 4.6:1) */
  --accent-deep:  #9A4F20; /* text-safe terracotta — 5.6:1 on --bg */
  --accent-soft:  #F5E6D4; /* tinted callout box backgrounds */
  --sage:         #7A9B7E; /* secondary badges, subtle backgrounds */
  --sage-soft:    #E9F0E7; /* soft green tint backgrounds */
  --sand:         #EDE4D3; /* section dividers, muted bands */
  --sand-dark:    #E0D2B4; /* darker sand, decorative type */
  --gold:         #D9A441; /* decorative ONLY on dark bands (4.8:1 on --primary-dark) */
  --radius:       14px;
  --radius-sm:    10px;
  --shadow:       0 12px 32px rgba(43,38,32,.09);
  --shadow-sm:    0 4px 14px rgba(43,38,32,.07);
  --font-serif:   Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --maxw:        1180px;
  --maxw-text:    760px;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--primary); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--accent-deep); }
h1,h2,h3,h4{ font-family:var(--font-serif); line-height:1.25; color:var(--ink); margin:0 0 .6em; font-weight:700; }
p{ margin:0 0 1.2em; }
::selection{ background:var(--accent-soft); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.section{ padding:56px 0; }
.section--sand{ background:var(--sand); }
.section-title{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.3em; }
.section-lead{ color:var(--muted); max-width:640px; margin:0 0 2rem; }

.kicker{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-deep); margin-bottom:.8rem;
}
.kicker::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--accent); }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff;
  padding:.7em 1.2em; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; color:#fff; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; font-size:1rem; line-height:1;
  padding:.95em 1.7em; border-radius:999px; border:2px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--accent-deep); color:#fff; transform:translateY(-2px); }
.btn--green{ background:var(--primary); color:#fff; }
.btn--green:hover{ background:var(--primary-dark); color:#fff; transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--primary); color:var(--primary); }
.btn--light{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); }
.btn--light:hover{ background:rgba(255,255,255,.25); color:#fff; }

/* ---------- Header ---------- */
.site-topbar{
  background:var(--primary-dark); color:#F3EEDF; font-size:.82rem;
  padding:.45em 0; text-align:center; letter-spacing:.02em;
}
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(251,247,237,.97);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
}
.site-header__inner{ display:flex; align-items:center; gap:1.2rem; padding:.8rem 0; }
.site-logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; }
.site-logo__mark{ width:42px; height:42px; flex:none; }
.site-logo__word{ font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--primary-dark); line-height:1; }
.site-logo__word em{ font-style:normal; color:var(--accent-deep); }
.site-logo__tag{ display:block; font-family:var(--font-sans); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
/* Logo ufficiale: lockup orizzontale su desktop, sola icona sotto i 640px. */
.site-logo__full svg{ display:block; height:46px; width:auto; }
.site-logo__icon{ display:none; }
.site-logo__icon svg{ display:block; height:42px; width:auto; }
.site-logo__icon--always svg{ display:block; height:34px; width:auto; }
@media (max-width:640px){
  .site-logo__full{ display:none; }
  .site-logo__icon{ display:block; }
}
/* Logo nel footer (versione chiara su verde scuro). */
.site-logo--footer svg{ display:block; height:52px; width:auto; max-width:100%; }

.nav-primary ul{ display:flex; gap:.2rem; list-style:none; margin:0; padding:0; }
.nav-primary a{
  display:block; padding:.65em .9em; border-radius:999px; text-decoration:none;
  color:var(--ink-soft); font-weight:600; font-size:.95rem; white-space:nowrap;
}
.nav-primary a:hover{ background:var(--sand); color:var(--primary-dark); }
.nav-primary .current-menu-item a,
.nav-primary .current-category-ancestor a{ background:var(--primary); color:#fff; }

.header-actions{ display:flex; align-items:center; gap:.5rem; }
.icon-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink);
}
.icon-btn:hover{ border-color:var(--primary); color:var(--primary); }
.icon-btn svg{ width:20px; height:20px; }
.menu-toggle{ display:none; }

/* Search overlay */
.search-overlay{
  position:fixed; inset:0; z-index:150; background:rgba(35,68,48,.92);
  display:none; align-items:flex-start; justify-content:center; padding:15vh 20px 20px;
}
.search-overlay.is-open{ display:flex; }
.search-overlay__box{ width:100%; max-width:640px; }
.search-overlay form{ display:flex; gap:.6rem; }
.search-overlay input[type="search"]{
  flex:1; font-size:1.25rem; padding:.9em 1.1em; border-radius:var(--radius-sm);
  border:2px solid transparent; font-family:var(--font-sans);
}
.search-overlay__close{
  position:absolute; top:22px; right:26px; background:none; border:none; color:#fff;
  font-size:2rem; cursor:pointer; line-height:1;
}
.search-overlay__hint{ color:#D9E4D5; margin-top:1rem; font-size:.95rem; }

/* Mobile nav */
.mobile-nav{
  position:fixed; inset:0; z-index:150; background:var(--bg);
  transform:translateX(100%); transition:transform .25s ease; padding:1.2rem 1.4rem 2rem;
  display:flex; flex-direction:column; gap:.4rem; overflow:auto;
}
.mobile-nav.is-open{ transform:none; }
.mobile-nav__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.mobile-nav a{ font-family:var(--font-serif); font-size:1.5rem; color:var(--ink); text-decoration:none; padding:.45em 0; border-bottom:1px solid var(--line); }
.mobile-nav a:hover{ color:var(--accent-deep); }

/* ---------- Hero (front page) ---------- */
.hero{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(182,94,38,.16), transparent 60%),
    var(--primary-dark);
  color:#F5F0E2; padding:64px 0 72px; position:relative; overflow:hidden;
}
.hero::after{ /* subtle paw pattern */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cellipse cx='36' cy='44' rx='11' ry='9'/%3E%3Ccircle cx='19' cy='30' r='5.5'/%3E%3Ccircle cx='30' cy='22' r='5.5'/%3E%3Ccircle cx='42' cy='22' r='5.5'/%3E%3Ccircle cx='53' cy='30' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}
.hero__inner{ position:relative; z-index:1; display:grid; gap:2.5rem; }
.hero__kicker{ color:var(--gold); }
.hero h1{ color:#fff; font-size:clamp(2rem,4.6vw,3.3rem); max-width:16ch; margin-bottom:.5em; }
.hero__lead{ color:#DCE5D6; font-size:1.15rem; max-width:52ch; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; }
.hero-card{
  background:var(--bg); color:var(--ink); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:grid;
}
.hero-card__thumb{ min-height:220px; background:var(--sand) var(--paw-bg, none); position:relative; }
.hero-card__body{ padding:1.8rem; }
.hero-card__body h2{ font-size:1.6rem; }
.hero-card__body h2 a{ color:var(--ink); text-decoration:none; }
.hero-card__body h2 a:hover{ color:var(--accent-deep); }
.meta{ display:flex; flex-wrap:wrap; gap:.4em 1em; font-size:.86rem; color:var(--muted); align-items:center; }
.meta svg{ width:15px; height:15px; vertical-align:-2px; margin-right:.3em; }

/* ---------- Topic hub cards ---------- */
.topic-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(2,1fr); }
.topic-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem 1.4rem; text-decoration:none; display:flex; gap:1rem; align-items:flex-start;
  transition:transform .15s ease, box-shadow .15s ease; position:relative;
}
.topic-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.topic-card__icon{
  width:52px; height:52px; flex:none; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sage-soft); color:var(--primary);
}
.topic-card__icon svg{ width:28px; height:28px; }
.topic-card:nth-child(even) .topic-card__icon{ background:var(--accent-soft); color:var(--accent-deep); }
.topic-card h3{ font-size:1.15rem; margin:0 0 .2em; color:var(--ink); }
.topic-card p{ font-size:.9rem; color:var(--muted); margin:0; }
.topic-card__count{ font-size:.78rem; font-weight:700; color:var(--accent-deep); text-transform:uppercase; letter-spacing:.08em; }
.topic-card__arrow{ margin-left:auto; align-self:center; color:var(--muted); font-size:1.3rem; }

/* ---------- Article cards ---------- */
.cards-grid{ display:grid; gap:1.4rem; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.card__thumb{
  aspect-ratio:16/9; background-color:var(--sand); background-size:120px;
  display:flex; align-items:flex-end; justify-content:flex-start; padding:1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%232E5B3F' fill-opacity='0.10'%3E%3Cellipse cx='60' cy='74' rx='19' ry='15'/%3E%3Ccircle cx='32' cy='50' r='9'/%3E%3Ccircle cx='50' cy='36' r='9'/%3E%3Ccircle cx='70' cy='36' r='9'/%3E%3Ccircle cx='88' cy='50' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
}
.card__thumb--gatto{ background-color:var(--accent-soft); }
.card__thumb--cane{ background-color:var(--sage-soft); }
.card__kicker{
  display:inline-block; background:var(--primary); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.4em .9em; border-radius:999px;
}
.card__kicker--terra{ background:var(--accent); }
.card__body{ padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card__title{ font-size:1.25rem; margin:0; }
.card__title a{ color:var(--ink); text-decoration:none; }
.card__title a:hover{ color:var(--accent-deep); }
.card__excerpt{ color:var(--muted); font-size:.95rem; margin:0; flex:1; }

/* ---------- Popular (I più amati) ---------- */
.popular{ counter-reset:pop; display:grid; gap:0; }
.popular-item{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start;
  padding:1.3rem 0; border-bottom:1px solid var(--line); text-decoration:none;
}
.popular-item:last-child{ border-bottom:none; }
.popular-item__num{
  counter-increment:pop;
  font-family:var(--font-serif); font-size:2.6rem; font-weight:700; line-height:1;
  color:var(--accent); min-width:1.4em; position:relative;
}
.popular-item__num::before{ content:counter(pop); }
.popular-item__label{ display:block; font-family:var(--font-sans); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.popular-item h3{ font-size:1.2rem; margin:.15em 0 .3em; color:var(--ink); }
.popular-item:hover h3{ color:var(--accent-deep); }

/* ---------- Newsletter band ---------- */
.newsletter{
  background:var(--primary); color:#EDE8D8; border-radius:calc(var(--radius) + 6px);
  padding:2.6rem 2rem; position:relative; overflow:hidden;
}
.newsletter::before{
  content:""; position:absolute; inset:0; opacity:.6; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cellipse cx='36' cy='44' rx='11' ry='9'/%3E%3Ccircle cx='19' cy='30' r='5.5'/%3E%3Ccircle cx='30' cy='22' r='5.5'/%3E%3Ccircle cx='42' cy='22' r='5.5'/%3E%3Ccircle cx='53' cy='30' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}
.newsletter__inner{ position:relative; z-index:1; max-width:620px; margin:0 auto; text-align:center; }
.newsletter h2{ color:#fff; font-size:1.7rem; }
.newsletter p{ color:#D8E2D2; }
.newsletter form{ display:flex; gap:.6rem; margin-top:1.4rem; }
.newsletter input[type="email"]{
  flex:1; padding:.95em 1.2em; border-radius:999px; border:2px solid transparent;
  font-size:1rem; font-family:var(--font-sans);
}
.newsletter__privacy{ font-size:.8rem; color:#BCCBB4; margin-top:.9rem; }
.newsletter__privacy a{ color:#fff; }

/* ---------- Trust bar ---------- */
.trustbar{ display:grid; gap:1.2rem; }
.trust-item{
  display:flex; gap:1rem; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem;
  text-decoration:none;
}
.trust-item:hover{ box-shadow:var(--shadow-sm); }
.trust-item__icon{
  width:48px; height:48px; flex:none; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-deep);
  display:flex; align-items:center; justify-content:center;
}
.trust-item__icon svg{ width:24px; height:24px; }
.trust-item h3{ font-size:1.05rem; margin:0 0 .25em; color:var(--ink); }
.trust-item p{ font-size:.9rem; color:var(--muted); margin:0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-size:.85rem; color:var(--muted); margin-bottom:1.2rem; }
.breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4em; margin:0; padding:0; }
.breadcrumbs li+li::before{ content:"›"; margin-right:.4em; color:var(--accent); }
.breadcrumbs a{ color:var(--primary); text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }

/* ---------- Article (single) ---------- */
.article-wrap{ max-width:var(--maxw-text); margin:0 auto; }
.article-hero{ margin:0 0 2rem; border-radius:var(--radius); overflow:hidden; }
.article-hero__img{
  aspect-ratio:16/8; background-color:var(--sand); background-size:140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%232E5B3F' fill-opacity='0.10'%3E%3Cellipse cx='70' cy='86' rx='22' ry='17'/%3E%3Ccircle cx='37' cy='58' r='10'/%3E%3Ccircle cx='58' cy='42' r='10'/%3E%3Ccircle cx='82' cy='42' r='10'/%3E%3Ccircle cx='103' cy='58' r='10'/%3E%3C/g%3E%3C/svg%3E");
}
.article-title{ font-size:clamp(1.9rem,4.4vw,2.9rem); margin:.4em 0 .5em; }
.article-meta{ display:flex; flex-wrap:wrap; gap:.5em 1.4em; color:var(--muted); font-size:.9rem; margin-bottom:.6rem; }
.article-meta .byline{ font-weight:700; color:var(--ink-soft); }
.updated-badge{
  display:inline-flex; align-items:center; gap:.45em; font-size:.82rem; font-weight:700;
  background:var(--sage-soft); color:var(--primary-dark); border-radius:999px; padding:.35em 1em;
}
.updated-badge svg{ width:14px; height:14px; }

.entry-content{ font-size:1.08rem; }
.entry-content h2{ font-size:1.7rem; margin:2.2em 0 .7em; padding-top:.4em; }
.entry-content h2 .h2-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.7em; height:1.7em; border-radius:50%; background:var(--accent-soft); color:var(--accent-deep);
  font-family:var(--font-sans); font-size:.62em; font-weight:800; margin-right:.5em; vertical-align:.15em;
}
.entry-content h3{ font-size:1.35rem; margin:1.8em 0 .6em; }
.entry-content ul, .entry-content ol{ margin:0 0 1.3em; padding-left:1.4em; }
.entry-content li{ margin-bottom:.5em; }
.entry-content li::marker{ color:var(--accent); font-weight:700; }
.entry-content blockquote{ margin:2em 0; padding:0; border:none; }
.entry-content img{ border-radius:var(--radius-sm); }
.wp-caption-text, figcaption{ font-size:.85rem; color:var(--muted); text-align:center; margin-top:.5em; }

.dropcap::first-letter{
  font-family:var(--font-serif); font-size:3.4em; line-height:.85; float:left;
  padding:.06em .14em 0 0; color:var(--primary); font-weight:700;
}
.pullquote{
  font-family:var(--font-serif); font-size:1.45rem; font-style:italic; line-height:1.5;
  color:var(--primary-dark); border-left:5px solid var(--accent); padding:.4em 0 .4em 1.1em; margin:2em 0;
}
.pullquote cite{ display:block; font-family:var(--font-sans); font-style:normal; font-size:.85rem; color:var(--muted); margin-top:.6em; }

/* Table of contents */
.toc{
  background:var(--sand); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.6rem; margin:0 0 2rem;
}
.toc__title{ display:flex; align-items:center; gap:.6em; font-weight:800; font-size:1rem; margin-bottom:.7em; color:var(--primary-dark); }
.toc__title svg{ width:20px; height:20px; }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; margin-bottom:.35em; }
.toc li::before{
  content:counter(toc); display:inline-flex; align-items:center; justify-content:center;
  width:1.6em; height:1.6em; border-radius:50%; background:#fff; border:1px solid var(--line);
  font-size:.78rem; font-weight:800; color:var(--accent-deep); margin-right:.6em;
}
.toc a{ text-decoration:none; color:var(--ink-soft); font-size:.95rem; }
.toc a:hover, .toc a.is-active{ color:var(--accent-deep); font-weight:700; }

/* Trust & commerce boxes */
.vet-badge{
  display:flex; gap:.9rem; align-items:center; background:var(--sage-soft);
  border:1px solid #C7D6C9; border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:0 0 1.8rem;
}
.vet-badge__icon{
  width:44px; height:44px; flex:none; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.vet-badge__icon svg{ width:24px; height:24px; }
.vet-badge strong{ display:block; color:var(--primary-dark); }
.vet-badge span{ font-size:.88rem; color:var(--ink-soft); }

.disclosure-box{
  border:2px dashed var(--accent); background:var(--accent-soft); border-radius:var(--radius-sm);
  padding:1.1rem 1.3rem; margin:0 0 1.8rem; font-size:.92rem; color:var(--ink-soft);
}
.disclosure-box__label{ display:flex; align-items:center; gap:.5em; font-weight:800; color:var(--accent-deep); margin-bottom:.4em; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }
.disclosure-box__label svg{ width:18px; height:18px; }
.disclosure-box p{ margin:0; }
.disclosure-box a{ font-weight:700; }

.pros-cons{ display:grid; gap:1rem; margin:2rem 0; }
.pc-panel{ border-radius:var(--radius-sm); padding:1.3rem 1.4rem; border:1px solid var(--line); background:var(--surface); }
.pc-panel h4{ display:flex; align-items:center; gap:.55em; font-family:var(--font-sans); font-size:1rem; margin:0 0 .7em; }
.pc-panel ul{ list-style:none; margin:0; padding:0; }
.pc-panel li{ display:flex; gap:.6em; margin-bottom:.55em; font-size:.96rem; }
.pc-panel li:last-child{ margin-bottom:0; }
.pc-icon{ flex:none; width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; margin-top:.15em; }
.pc-icon--pro{ background:var(--primary); color:#fff; }
.pc-icon--con{ background:var(--accent); color:#fff; }
.pc-panel--pro h4{ color:var(--primary-dark); }
.pc-panel--con h4{ color:var(--accent-deep); }

.verdict{
  background:var(--primary-dark); color:#EDE8D8; border-radius:var(--radius);
  padding:1.8rem; margin:2.2rem 0; position:relative; overflow:hidden;
}
.verdict::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cellipse cx='36' cy='44' rx='11' ry='9'/%3E%3Ccircle cx='19' cy='30' r='5.5'/%3E%3Ccircle cx='30' cy='22' r='5.5'/%3E%3Ccircle cx='42' cy='22' r='5.5'/%3E%3Ccircle cx='53' cy='30' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}
.verdict__inner{ position:relative; z-index:1; }
.verdict__label{ display:flex; align-items:center; gap:.6em; font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem; color:var(--gold); margin-bottom:.7em; }
.verdict__label svg{ width:22px; height:22px; }
.verdict p{ color:#E4EADF; margin:0; }
.verdict p + p{ margin-top:.8em; }
.verdict strong{ color:#fff; }

.product-box{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:1.4rem; margin:2rem 0; display:grid; gap:1rem; box-shadow:var(--shadow-sm);
}
.product-box__tag{
  display:inline-flex; align-items:center; gap:.5em; font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep);
}
.product-box__tag svg{ width:18px; height:18px; }
.product-box h4{ font-size:1.2rem; margin:0; }
.product-box p{ font-size:.94rem; color:var(--muted); margin:0; }
.product-box .btn{ justify-self:start; }

/* FAQ */
.faq{ margin:2.2rem 0; }
.faq details{
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
  margin-bottom:.7rem; overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:1.1rem 1.3rem; font-weight:700; font-size:1.02rem; list-style:none;
  display:flex; align-items:center; gap:.8em; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:"+"; flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-deep); font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.faq details[open] summary::before{ content:"–"; background:var(--primary); color:#fff; }
.faq details .faq__a{ padding:0 1.3rem 1.2rem 3.1rem; color:var(--ink-soft); }

/* Author box */
.author-box{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; margin:2.5rem 0;
}
.author-box__avatar{
  width:76px; height:76px; border-radius:50%; flex:none;
  background:var(--primary); color:#fff; font-family:var(--font-serif); font-size:1.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.author-box__role{
  display:inline-flex; align-items:center; gap:.45em; font-size:.76rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--primary-dark);
  background:var(--sage-soft); border-radius:999px; padding:.35em 1em; margin-bottom:.5em;
}
.author-box__role svg{ width:14px; height:14px; }
.author-box h3{ font-size:1.15rem; margin:0 0 .3em; }
.author-box p{ font-size:.93rem; color:var(--muted); margin:0; }

/* Tags, share, related, prev/next */
.post-tags{ margin:2rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; }
.post-tags a{
  font-size:.82rem; font-weight:600; text-decoration:none; color:var(--ink-soft);
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:.35em 1em;
}
.post-tags a:hover{ border-color:var(--accent); color:var(--accent-deep); }

.related{ margin-top:3rem; }
.related h2{ font-size:1.5rem; }

.post-nav{ display:grid; gap:1rem; margin:2.5rem 0 0; }
.post-nav a{
  display:block; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-sm);
  padding:1.1rem 1.3rem; text-decoration:none;
}
.post-nav a:hover{ border-color:var(--primary); }
.post-nav__label{ display:block; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.3em; }
.post-nav__title{ font-family:var(--font-serif); font-weight:700; color:var(--ink); }

/* Reading progress */
.reading-progress{
  position:fixed; top:0; left:0; height:4px; width:0; z-index:160;
  background:linear-gradient(90deg, var(--accent), var(--gold));
}

/* ---------- Category hub ---------- */
.hub-hero{ background:var(--sand); padding:48px 0 40px; border-bottom:1px solid var(--line); }
.hub-hero h1{ font-size:clamp(2rem,4.5vw,3rem); margin-bottom:.3em; }
.hub-hero p{ color:var(--muted); max-width:60ch; margin:0; }
.hub-nav{
  position:sticky; top:73px; z-index:50; background:rgba(251,247,237,.96);
  border-bottom:1px solid var(--line); backdrop-filter:blur(6px);
}
.hub-nav__inner{ display:flex; gap:.5rem; overflow-x:auto; padding:.7rem 20px; max-width:var(--maxw); margin:0 auto; }
.hub-nav a{
  flex:none; text-decoration:none; font-size:.88rem; font-weight:700; color:var(--ink-soft);
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:.5em 1.1em;
}
.hub-nav a:hover, .hub-nav a.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.hub-featured{ display:grid; gap:1.6rem; margin-bottom:2.5rem; }
.explore-more{
  background:var(--primary-dark); color:#EDE8D8; border-radius:var(--radius); padding:2rem;
  display:grid; gap:1rem; margin-top:3rem;
}
.explore-more h2{ color:#fff; font-size:1.4rem; margin:0; }
.explore-more p{ color:#CBD6C2; margin:0; font-size:.95rem; }
.explore-more__links{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* ---------- Pages: team, metodo, contatti ---------- */
.team-grid{ display:grid; gap:1.4rem; }
.team-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem; text-align:center;
}
.team-card__avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 1rem;
  background:var(--sand-dark); color:var(--primary-dark); font-family:var(--font-serif);
  font-size:2rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:3px solid var(--accent-soft);
}
.team-card h3{ margin:0 0 .2em; }
.team-card__role{ font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.8em; display:block; }
.team-card p{ font-size:.93rem; color:var(--muted); margin:0; }
.team-card__creds{ margin-top:1em; font-size:.82rem; color:var(--primary-dark); font-weight:600; }

.method-steps{ counter-reset:step; display:grid; gap:1.2rem; margin:2rem 0; }
.method-step{
  counter-increment:step; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.6rem 1.6rem 1.6rem 5.2rem; position:relative;
}
.method-step::before{
  content:counter(step); position:absolute; left:1.4rem; top:1.4rem;
  width:2.4em; height:2.4em; border-radius:50%; background:var(--primary); color:#fff;
  font-family:var(--font-serif); font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
}
.method-step h3{ margin:0 0 .4em; }
.method-step p{ margin:0; color:var(--ink-soft); }

.contact-grid{ display:grid; gap:1.6rem; }
.form-field{ margin-bottom:1.1rem; }
.form-field label{ display:block; font-weight:700; margin-bottom:.4em; font-size:.95rem; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:.85em 1em; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:1rem; background:#fff;
}
.form-field input:focus, .form-field textarea:focus{ border-color:var(--primary); outline:2px solid var(--sage-soft); }
.legal-doc h2{ font-size:1.5rem; margin-top:2em; }
.legal-doc{ font-size:1rem; }

/* ---------- Sidebar & widgets ---------- */
.layout-sidebar{ display:grid; gap:2.5rem; }
.widget{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; margin-bottom:1.5rem;
}
.widget-title{ font-size:1.1rem; margin:0 0 1em; padding-bottom:.6em; border-bottom:2px solid var(--accent-soft); }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ margin-bottom:.7em; font-size:.94rem; }
.widget a{ text-decoration:none; color:var(--ink-soft); }
.widget a:hover{ color:var(--accent-deep); }

/* ---------- Comments ---------- */
.comments-area{ margin-top:3rem; border-top:2px solid var(--line); padding-top:2rem; }
.comments-area h2{ font-size:1.5rem; }
.comment-list{ list-style:none; margin:0 0 2rem; padding:0; }
.comment{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.2rem 1.3rem; margin-bottom:1rem; background:var(--surface); }
.comment__meta{ display:flex; gap:.8em; align-items:center; margin-bottom:.5em; font-size:.86rem; color:var(--muted); }
.comment__avatar{ width:40px; height:40px; border-radius:50%; background:var(--sand-dark); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary-dark); }
.comment__author{ font-weight:700; color:var(--ink); }
.comment p{ margin:0 0 .6em; font-size:.96rem; }
.comment-reply-link{ font-size:.85rem; font-weight:700; }
.comment-respond{ background:var(--sand); border-radius:var(--radius); padding:1.8rem; }
.comment-respond h3{ font-size:1.3rem; }
.comment-form label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.35em; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
  width:100%; padding:.8em 1em; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:1rem; margin-bottom:1rem; background:#fff;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--primary-dark); color:#D9D2BE; margin-top:64px; }
.site-footer__top{ display:grid; gap:2rem; padding:3.2rem 0 2.4rem; }
.footer-brand p{ font-size:.92rem; color:#B9C4B0; max-width:34ch; }
.footer-brand .site-logo__word{ color:#fff; }
.footer-brand .site-logo__tag{ color:#9AA78F; }
.footer-col h3{ color:#fff; font-size:1rem; font-family:var(--font-sans); letter-spacing:.06em; text-transform:uppercase; margin:0 0 1em; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:.55em; }
.footer-col a{ color:#C9D2BE; text-decoration:none; font-size:.94rem; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.site-footer__legal{
  border-top:1px solid rgba(255,255,255,.14); padding:1.4rem 0;
  display:flex; flex-wrap:wrap; gap:.6em 1.6em; align-items:center; justify-content:space-between;
  font-size:.84rem; color:#9AA78F;
}
.site-footer__legal nav ul{ display:flex; flex-wrap:wrap; gap:.4em 1.2em; list-style:none; margin:0; padding:0; }
.site-footer__legal a{ color:#B9C4B0; text-decoration:none; }
.site-footer__legal a:hover{ color:#fff; }
.affiliate-note{ font-size:.8rem; color:#8E9A85; max-width:70ch; padding-bottom:1.2rem; }

/* ---------- Cookie banner (GDPR) ---------- */
.cookie-banner{
  position:fixed; z-index:200; left:16px; right:16px; bottom:16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.4rem 1.5rem; display:none; max-width:560px;
}
.cookie-banner.is-visible{ display:block; }
.cookie-banner h2{ font-size:1.1rem; font-family:var(--font-sans); margin:0 0 .5em; }
.cookie-banner p{ font-size:.88rem; color:var(--muted); margin:0 0 1.1em; }
.cookie-banner p a{ font-weight:700; }
.cookie-banner__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie-banner .btn{ padding:.7em 1.4em; font-size:.92rem; }

/* ---------- Search / 404 ---------- */
.search-results__item{ padding:1.4rem 0; border-bottom:1px solid var(--line); }
.search-results__item h2{ font-size:1.4rem; margin:0 0 .3em; }
.search-results__item h2 a{ color:var(--ink); text-decoration:none; }
.error-404{ text-align:center; padding:4rem 0; }
.error-404__code{ font-family:var(--font-serif); font-size:6rem; color:var(--sand-dark); line-height:1; font-weight:700; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; gap:.5rem; justify-content:center; margin:2.5rem 0 0; }
.pagination .page-numbers{
  min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; border-radius:10px; text-decoration:none;
  font-weight:700; color:var(--ink-soft); padding:0 .8em;
}
.pagination .page-numbers.current{ background:var(--primary); border-color:var(--primary); color:#fff; }
.pagination a.page-numbers:hover{ border-color:var(--primary); color:var(--primary); }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:150; width:48px; height:48px; border-radius:50%;
  background:var(--primary); color:#fff; border:none; cursor:pointer; display:none;
  align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.to-top.is-visible{ display:inline-flex; }
.to-top svg{ width:22px; height:22px; }

/* ---------- Responsive ---------- */
@media (min-width:700px){
  .cards-grid{ grid-template-columns:repeat(2,1fr); }
  .topic-grid{ grid-template-columns:repeat(3,1fr); }
  .trustbar{ grid-template-columns:repeat(3,1fr); }
  .pros-cons{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:repeat(3,1fr); }
  .post-nav{ grid-template-columns:1fr 1fr; }
  .site-footer__top{ grid-template-columns:1.3fr 1fr 1fr 1fr; }
  .hero__inner{ grid-template-columns:1.05fr .95fr; align-items:center; }
  .contact-grid{ grid-template-columns:1fr 1.4fr; }
  .explore-more{ grid-template-columns:1fr auto; align-items:center; }
}
@media (min-width:1024px){
  .cards-grid--3{ grid-template-columns:repeat(3,1fr); }
  .layout-sidebar{ grid-template-columns:minmax(0,1fr) 320px; }
  .hub-featured{ grid-template-columns:1.2fr .8fr; align-items:stretch; }
}
@media (max-width:899px){
  .nav-primary{ display:none; }
  .menu-toggle{ display:inline-flex; }
}
@media (max-width:699px){
  .section{ padding:40px 0; }
  .newsletter form{ flex-direction:column; }
  .author-box{ grid-template-columns:1fr; text-align:left; }
  .method-step{ padding:1.4rem 1.2rem 1.4rem 4.6rem; }
  .cookie-banner{ left:10px; right:10px; bottom:10px; }
}

/* ---------- Print ---------- */
@media print{
  .site-header, .site-footer, .cookie-banner, .newsletter, .related, .post-nav,
  .comments-area, .to-top, .reading-progress, .hub-nav{ display:none !important; }
  body{ background:#fff; }
}

/* Contact Form 7 — VizioPeloso styling */
.wpcf7-form p { margin-bottom: 1rem; }
.wpcf7-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%; padding: .7rem .9rem; border: 1px solid #d8cfc0;
    border-radius: .5rem; background: #fff; font: inherit; color: inherit;
}
.wpcf7-form input[type="submit"] {
    display: inline-block; padding: .8rem 1.6rem; border: none; border-radius: 999px;
    background: #B65E26; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { background: #2E5B3F; }
.wpcf7-not-valid-tip { color: #a33; font-size: .85rem; }
.wpcf7-response-output { border-radius: .5rem; }