/* =====================================================================
   InfoComuni · Editorial Skin v2 · LIGHT FIRST
   Rifondazione estetica del sito esistente secondo la brand identity
   editoriale (ink / gold / paper + Oswald / Inter / JetBrains Mono).
   Modello di partenza: ambiente chiaro.
   Caricare DOPO tutti gli altri CSS.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------------------------------------------------------------------
   1 · Palette editoriale · tokens primari
   --------------------------------------------------------------------- */
:root,
:root:root,
html.force-dark,
:root.force-dark {
  /* Palette istituzionale — sempre LIGHT di default */
  --ic-blue:         #0b2340;   /* ink */
  --ic-ink:          #0b2340;
  --ic-ink-2:        #123a6b;
  --ic-ink-3:        #2a5a96;
  --ic-blue-dark:    #091a2e;
  --ic-blue-light:   #123a6b;
  --ic-accent:       #c89b3c;   /* gold */
  --ic-accent-dark:  #a68030;
  --ic-accent-dim:   #f4ecd6;   /* goldDim */
  --ic-gold:         #c89b3c;
  --ic-gold-dim:     #f4ecd6;
  --ic-bg:           #fbf9f4;   /* paper */
  --ic-paper:        #fbf9f4;
  --ic-paper-2:      #f3efe5;
  --ic-bg-deep:      #f3efe5;
  --ic-surface:      #ffffff;
  --ic-surface-2:    #fbf9f4;
  --ic-border:       #e4ddcc;   /* line */
  --ic-border-strong:#d4cbb3;   /* line-2 */
  --ic-line:         #e4ddcc;
  --ic-line-2:       #d4cbb3;
  --ic-text:         #1a1f2c;
  --ic-text-1:       #1a1f2c;
  --ic-text-2:       #49566c;
  --ic-text-3:       #7a8496;
  --ic-text-muted:   #7a8496;
  --ic-link:         #0b2340;
  --ic-link-visited: #123a6b;
  --ic-success:      #2f7a4f;
  --ic-good:         #2f7a4f;
  --ic-warning:      #b85a2c;
  --ic-warm:         #b85a2c;
  --ic-danger:       #b85a2c;
  --ic-info:         #2a5a96;
  /* Font stacks */
  --f-sans:          'Inter', -apple-system, 'Segoe UI', sans-serif;
  --f-serif:         'Oswald', 'Source Serif Pro', 'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  /* Radius editoriale · squadrato */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 4px;
  --r-xl: 4px;
  --r-2xl: 4px;
  --r-full: 9999px;
}

/* Disattiva la dark-mode forzata via .force-dark (il sito la attiva di default) */
html.force-dark body,
html.force-dark,
body.theme-dark,
body.dark {
  background: var(--ic-paper) !important;
  color: var(--ic-text) !important;
}

/* ---------------------------------------------------------------------
   2 · Tipografia premium · feature settings + gerarchia
   --------------------------------------------------------------------- */
html, body, * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--ic-text) !important;
  background: var(--ic-paper) !important;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  font-variant-ligatures: common-ligatures contextual;
}

h1, h2, h3, h4,
.hero h1, .hero h2,
[class*="hero-title"],
[class*="section-title"],
.comune-hero__title,
.comune-title,
.section__title,
.card__title,
.comune-section__title {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-feature-settings: "liga" 1, "dlig" 1, "ss01" 1, "kern" 1, "calt" 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ic-ink) !important;
}
h1 { font-weight: 400 !important; }
h2 { font-weight: 500 !important; }
h3 { font-weight: 500 !important; }

/* Numeri old-style su body · tabular sui mono */
p, li, blockquote { font-variant-numeric: oldstyle-nums proportional-nums; }
code, pre, kbd, samp,
.font-mono, [class*="mono"], .item-meta,
.tag, .chip, .label, .stat, .chip-label,
.eyebrow, .kicker, .overline {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Playfair (hero attuale) → Oswald */
*[style*="Playfair"],
[class*="playfair"] {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
}

/* ---------------------------------------------------------------------
   3 · Italic editoriale · seconda metà titolo diventa oro
   --------------------------------------------------------------------- */
h1 em, h2 em, h3 em,
h1 i:not([class*="fa-"]):not([class*="icon"]),
h2 i:not([class*="fa-"]):not([class*="icon"]),
h3 i:not([class*="fa-"]):not([class*="icon"]) {
  font-style: italic !important;
  color: var(--ic-gold) !important;
  font-weight: 400 !important;
}

/* ---------------------------------------------------------------------
   4 · Link editoriale · underline oro sottile + visited
   --------------------------------------------------------------------- */
a {
  color: var(--ic-ink) !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: transparent !important;
  text-underline-offset: 4px !important;
  transition: text-decoration-color .18s, color .18s;
}
a:not(.btn):not([class*="btn-"]):not(.cta):not(.hero-cta):not([class*="button"]):hover {
  color: var(--ic-ink-2) !important;
  text-decoration-color: var(--ic-gold) !important;
}

/* ---------------------------------------------------------------------
   5 · Squadratura radicale · radius max 4px
   --------------------------------------------------------------------- */
button, .btn, [class*="btn-"],
input, select, textarea,
.hero-cta, .cta, [class*="cta"],
.card, [class*="-card"]:not([class*="__"]),
.modal, [class*="modal"],
.tooltip, .popover,
.meteo-card, .weather-card,
.event-card, .news-card, .comune-card,
.province-card, .service-card {
  border-radius: 4px !important;
}
.chip, .badge, .tag, .filter-chip, .filter-btn,
[class*="chip"], [class*="pill"], [class*="badge"],
.comune-tabs__btn,
.numero-utili__tag {
  border-radius: 2px !important;
}
[class*="-dot"], .avatar, [class*="avatar"],
.dot, .bullet-dot, .status-dot { /* cerchi veri restano rotondi */ }

/* ---------------------------------------------------------------------
   6 · Header istituzionale · bianco su paper + bordo sottile
   --------------------------------------------------------------------- */
.site-header,
header.site-header,
header[class*="site-header"]:not(.site-header-v2),
.ic-header {
  background: #ffffff !important;
  color: var(--ic-ink) !important;
  border-bottom: 1px solid var(--ic-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.site-header a,
.site-header .brand,
.site-header [class*="logo"],
.site-header nav a {
  color: var(--ic-text-2) !important;
}
.site-header nav a:hover,
.site-header nav a.active,
.site-header nav a[aria-current="page"] {
  color: var(--ic-ink) !important;
  border-bottom-color: var(--ic-gold) !important;
}

/* Logo: su sfondo light usa la versione scura */
.site-header [src*="logo-white"] { display: none !important; }
.site-header [src*="logo-bianco"] { display: none !important; }

/* ---------------------------------------------------------------------
   7 · Hero editoriale · ink deep + tipografia serif display
   --------------------------------------------------------------------- */
.hero,
[class*="hero-section"],
section.hero,
.hero-v2 {
  background: linear-gradient(180deg, var(--ic-ink) 0%, var(--ic-ink-2) 100%) !important;
  color: var(--ic-paper) !important;
  position: relative;
}
.hero::before, .hero::after,
[class*="hero"]::before, [class*="hero"]::after {
  background: none !important;
}
.hero h1,
.hero [class*="title"]:not([class*="sub"]):not([class*="kicker"]),
.hero-title {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1 !important;
  color: var(--ic-paper) !important;
}
.hero em, .hero i:not([class*="fa-"]):not([class*="icon"]),
.hero [class*="accent"], .hero [class*="italic"] {
  font-style: italic !important;
  color: var(--ic-gold) !important;
  font-weight: 400 !important;
}
.hero p,
.hero [class*="subtitle"],
.hero [class*="lead"],
.hero [class*="description"] {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  color: rgba(251, 249, 244, 0.82) !important;
  font-weight: 400 !important;
}

/* Stats / numeri nella hero */
.hero [class*="stat"] [class*="number"],
.hero [class*="stat"] strong {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  color: var(--ic-gold) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* CTA primary oro */
.hero-cta,
.cta-primary,
[class*="btn-primary"],
button[class*="primary"],
.btn-gold {
  background: var(--ic-gold) !important;
  color: var(--ic-ink) !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 14px 26px !important;
  box-shadow: none !important;
  transition: all .2s !important;
  font-family: 'Inter', sans-serif !important;
}
.hero-cta:hover,
.cta-primary:hover,
[class*="btn-primary"]:hover {
  background: var(--ic-accent-dark) !important;
  transform: translateY(-1px) !important;
}

/* ---------------------------------------------------------------------
   8 · Sezioni body · alternanza paper / white / paper-2
   --------------------------------------------------------------------- */
main, .main {
  background: var(--ic-paper) !important;
}
section, .section {
  background: var(--ic-paper);
}
section + section,
section.alt, section[class*="-alt"],
section:nth-of-type(2n) {
  background: #ffffff !important;
}
section:nth-of-type(3n),
section.bg-deep {
  background: var(--ic-paper-2) !important;
}

/* ---------------------------------------------------------------------
   9 · Card · squadrate + bordo sottile + hover gold
   --------------------------------------------------------------------- */
/* NB: escludiamo i figli BEM (`[class*="__"]`) altrimenti il bordo beige
   finisce intorno a .overview-card__title / __desc / __icon ecc. */
.card, [class*="-card"]:not([class*="cardioid"]):not([class*="__"]),
.province-card, .comune-card, .service-card, .event-card, .news-card,
.meteo-card {
  background: #ffffff !important;
  border: 1px solid var(--ic-line) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.card:hover,
[class*="-card"]:not([class*="cardioid"]):not([class*="__"]):hover {
  border-color: var(--ic-gold) !important;
  box-shadow: 0 4px 20px rgba(11, 35, 64, 0.06) !important;
}

/* ---------------------------------------------------------------------
   10 · Micro-label editoriale universale · "━━ 01 / ESPLORA..."
   --------------------------------------------------------------------- */
[class*="eyebrow"], [class*="kicker"],
[class*="section-label"], [class*="overline"],
.mono-label, .ic-mono-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  color: var(--ic-gold) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* ---------------------------------------------------------------------
   11 · Chip · uppercase mono editoriale · squadrati 2px
   --------------------------------------------------------------------- */
.chip, .tag, .filter-chip, .badge,
.provincia-chip, .categoria-chip,
[class*="chip"], [class*="tag-"], [class*="pill"] {
  border-radius: 2px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  padding: 6px 11px !important;
  background: var(--ic-paper-2) !important;
  color: var(--ic-text-2) !important;
  border: 1px solid var(--ic-line) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}
.chip.active, .chip[aria-selected="true"],
.filter-chip.active, .badge.active,
[class*="chip"].active, [class*="-pill"].active {
  background: var(--ic-ink) !important;
  color: var(--ic-gold) !important;
  border-color: var(--ic-ink) !important;
}

/* ---------------------------------------------------------------------
   12 · Tab menu comuni · editoriale (10 sezioni orizzontali)
   --------------------------------------------------------------------- */
.comune-tabs,
nav.comune-tabs {
  background: #ffffff !important;
  border-bottom: 1px solid var(--ic-line) !important;
}
.comune-tabs__scroll {
  gap: 4px !important;
  padding: 0 !important;
}
.comune-tabs__btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--ic-text-2) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 16px 20px !important;
  border-radius: 0 !important;
  text-transform: none !important;
  transition: color .18s, border-color .18s !important;
}
.comune-tabs__btn:hover {
  color: var(--ic-ink) !important;
  background: transparent !important;
}
.comune-tabs__btn[aria-selected="true"],
.comune-tabs__btn.comune-tabs__btn--home[aria-selected="true"],
.comune-tabs__btn.is-active {
  color: var(--ic-ink) !important;
  background: transparent !important;
  border-bottom-color: var(--ic-gold) !important;
  font-weight: 600 !important;
}
/* Badge "Pro" editoriale */
.comune-tabs__btn .tab-lock {
  background: var(--ic-gold-dim) !important;
  color: var(--ic-ink) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  padding: 2px 6px !important;
  margin-left: 6px !important;
  border-radius: 2px !important;
  border: 1px solid var(--ic-gold) !important;
}

/* ---------------------------------------------------------------------
   13 · Accordion macro-sezioni comuni · elegante
   --------------------------------------------------------------------- */
.ic-acc,
[data-ic-accordion] {
  background: #ffffff !important;
  border: 1px solid var(--ic-line) !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}
.ic-acc-head,
.comune-section > h2,
.comune-section > h3 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  color: var(--ic-ink) !important;
  background: transparent !important;
  padding: 20px 24px !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.ic-acc-body {
  padding: 0 24px 24px !important;
}

/* Lista item nelle schede comuni */
.scuola-card, .item-card, .item-list > li,
.comune-section .info-list > li {
  background: var(--ic-paper) !important;
  border: 1px solid var(--ic-line) !important;
  border-radius: 2px !important;
  padding: 14px 16px !important;
}

/* ---------------------------------------------------------------------
   14 · Hero mini-sito comune
   --------------------------------------------------------------------- */
.comune-hero,
.comune-hero--map,
.minisite-hero {
  background: linear-gradient(180deg, var(--ic-ink) 0%, var(--ic-ink-2) 100%) !important;
  color: var(--ic-paper) !important;
}
.comune-hero__title,
.comune-hero h1 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  color: var(--ic-paper) !important;
}
.comune-hero__subtitle,
.comune-hero__meta,
.comune-hero p {
  color: rgba(251, 249, 244, 0.82) !important;
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
}

/* ---------------------------------------------------------------------
   15 · Footer editoriale
   --------------------------------------------------------------------- */
.site-footer, .site-footer-v2, footer {
  background: var(--ic-paper-2) !important;
  color: var(--ic-text-2) !important;
  border-top: 1px solid var(--ic-line-2) !important;
  box-shadow: none !important;
}
footer h3, footer h4,
footer [class*="-title"] {
  color: var(--ic-ink) !important;
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
}
footer a {
  color: var(--ic-text-1) !important;
  text-decoration: none !important;
}
footer a:hover {
  color: var(--ic-gold) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--ic-gold) !important;
}

/* ---------------------------------------------------------------------
   16 · Focus AAA · gold 3px
   --------------------------------------------------------------------- */
*:focus-visible {
  outline: 3px solid var(--ic-gold) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
   17 · Icon replacement · emoji → line-icon style
   Le icone lineari sono applicate via JS (ic-editorial-icons.js).
   CSS qui prepara lo stile della <span class="ic-ico">.
   --------------------------------------------------------------------- */
.ic-ico {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  margin-right: 0.5em;
  color: var(--ic-gold);
  flex-shrink: 0;
}
.ic-ico svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Nascondi il carattere emoji originale quando sostituito */
.ic-ico + .ic-emoji-original,
.ic-heading-iconified .ic-emoji-glyph { display: none; }

/* ---------------------------------------------------------------------
   18 · Scrollbar sottile editoriale
   --------------------------------------------------------------------- */
* {
  scrollbar-color: var(--ic-line-2) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ic-line-2); border-radius: 2px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ic-gold); }

/* ---------------------------------------------------------------------
   19 · Leaflet map · tint paper editoriale
   --------------------------------------------------------------------- */
.leaflet-container { background: var(--ic-paper) !important; }
.leaflet-popup-content-wrapper {
  background: #ffffff !important;
  color: var(--ic-ink) !important;
  border: 1px solid var(--ic-line) !important;
  box-shadow: 0 4px 16px rgba(11, 35, 64, 0.08) !important;
  border-radius: 4px !important;
}
.leaflet-popup-tip { background: #ffffff !important; }

/* ---------------------------------------------------------------------
   20 · Ribbon "━━ 01 / NN" automatico sulle h2 delle sezioni principali
   --------------------------------------------------------------------- */
section > h2::before,
main > section > h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--ic-gold);
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   21 · Print-friendly
   --------------------------------------------------------------------- */
@media print {
  .hero, header, footer, .site-header { background: #fff !important; color: #000 !important; }
  * { box-shadow: none !important; }
  .chip, .tag, .badge { border: 1px solid #000 !important; }
}

/* ---------------------------------------------------------------------
   22 · Overrides puntuali per componenti sito attuale
   --------------------------------------------------------------------- */
/* Cookie banner · sobrio */
#ic-cookie-banner, [class*="cookie-consent"] {
  background: var(--ic-ink) !important;
  color: var(--ic-paper) !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 40px rgba(11, 35, 64, 0.35) !important;
}
#ic-cookie-banner button,
[class*="cookie-consent"] button {
  border-radius: 4px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}

/* Search field hero · squadrato editoriale */
.hero input[type="search"],
.hero input[type="text"],
.hero [class*="search"] input {
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 4px !important;
  padding: 14px 18px !important;
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  color: var(--ic-ink) !important;
}

/* Stelle / rating se presenti → oro */
.stars, [class*="rating"] i, .fa-star {
  color: var(--ic-gold) !important;
}