/* === Typographic refresh: Elegant header + full Latin accents === */
/* Load fonts with full Latin support (accents): */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@600;700;800&display=swap');

:root{
  --bg:#f7f5ee; --surface:#ffffff; --ink:#0a172a; --muted:#49566a;
  --brand:#b78a2c; --brand-ink:#1b2a44; --brand-dark:#8e6d21;
  --line:#e6e1d7; --soft:#f2ede5; --shadow: 0 12px 30px rgba(13,19,36,.09);
}

html,body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans', 'DejaVu Sans';
}

/* Headings use an elegant serif with great diacritics coverage */
.h1, h1, h2, .brand-title{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing:.2px;
}

/* Header refresh */
.sitebar{ position:sticky; top:0; z-index:50; background:rgba(247,245,238,.92); backdrop-filter: blur(10px) saturate(1.05); border-bottom:1px solid var(--line) }
.top{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:14px; color:var(--brand-ink) }
.brand .emblem{ width:40px; height:40px; border-radius:12px; background: radial-gradient(100% 140% at 30% 0%, #ecdcb7, #c2a05a); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(0,0,0,.08); display:grid; place-items:center }
.brand .emblem svg{ width:22px; height:22px; fill:#6f5212 }
.brand-title{ font-weight:800; font-size:22px; line-height:1.05 }
.brand-sub{ font-size:12px; color:var(--muted) }
.contactline{ color:var(--muted); font-size:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end }
.season-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); font-weight:700; color:var(--brand-ink) }
.season-badge .dot{ width:9px;height:9px;border-radius:50%; background:var(--brand) }
.navwrap{ border-top:1px solid var(--line) }
.nav{ display:flex; align-items:center; gap:4px; overflow:auto; scrollbar-width:none }
.nav a{
  --pad:12px;
  display:inline-flex; align-items:center; gap:8px;
  color:var(--brand-ink); text-decoration:none; padding:12px var(--pad);
  border-bottom:2px solid transparent; border-right:1px solid transparent; border-left:1px solid transparent;
  border-radius:12px 12px 0 0; font-weight:700;
}
.nav a .ico{ width:18px; height:18px; display:inline-grid; place-items:center }
.nav a:hover{ background:var(--surface); border-color:var(--line) }
.nav a.active{ background:var(--surface); border-color:var(--line); border-bottom-color:var(--brand) }

/* Keep rest of UI consistent (inherits previous theme variables) */

/* ===== GUTTER GLOBALI (margini a sinistra/destra) ===== */
:root{
  --page-max: 1200px;   /* larghezza massima area contenuto */
  --gutter:   18px;     /* margine interno ai lati */
}

/* contenuti principali centrati e “respirati” */
main, .page, .wrapper, .content, #main{
  max-width: var(--page-max);
  margin-left: 90%;
  margin-right: 0%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* header/footer allineati ai gutter */
.site-header, .site-footer{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* il widget NON deve colorare/riempire il fondo pagina */
.news-modern,
.news-modern.size-bleed{
  background: transparent !important;
}

/* HERO – immagine grande in alto */
.hero{
  max-width: var(--page-max, 1200px);
  margin: 16px auto 24px;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.hero-img{
  display: block !important;
  width: 100%;
  height: auto;
}

/* === HERO overlay harden (override sicuro) === */
.hero.has-hero{ background: transparent !important; }
.hero{ 
  position: relative; 
  height: 420px; 
  margin: 20px auto 24px; 
  border-radius: 16px; 
  overflow: hidden; 
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
.hero .container{ position: relative; z-index: 2; }
.hero .bg{
  position: absolute; inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* scrim (se non già presente in core) */
.hero.has-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 100%);
}
@media (max-width:640px){ .hero{ height:320px; } }