/* =====================================================================
   InfoComuni · Kiosk Desktop Skin v3
   Transform current static site to match the editorial kiosk aesthetic:
   light-first, Source Serif display, squared radii, gold accents,
   proper province card grid, light footer, no fastidious borders.
   Loaded AFTER ic-editorial-skin.css, takes precedence via specificity.
   ===================================================================== */

/* ---------- tokens reinforcement ---------- */
:root,
:root:root {
  --ic-ink:      #0b2340;
  --ic-ink-2:    #1d365a;
  --ic-gold:     #c89b3c;
  --ic-gold-2:   #a57d22;
  --ic-paper:    #fbf9f4;
  --ic-paper-2:  #f5f1e7;
  --ic-paper-3:  #ede6d3;
  --ic-line:     #e4ddcc;
  --ic-line-2:   #d7cfb8;
  --ic-muted:    #6b7280;
  --ic-surface:  #ffffff;

  /* override any legacy dark tokens */
  --bg: var(--ic-paper);
  --text: var(--ic-ink);
  --muted: var(--ic-muted);
  --line: var(--ic-line);
  --brand: var(--ic-ink);
  --gold: var(--ic-gold);
}

/* ---------- force light everywhere, remove any lingering dark ---------- */
html, body,
html.force-dark, html.force-dark body {
  background: var(--ic-paper) !important;
  color: var(--ic-ink) !important;
}

/* ---------- HERO: from dark band to editorial paper ---------- */
html body .hero,
html body .hero.hero--dark,
html body .hero.hero--puglia-map,
html body section.hero,
html body .portal-hero,
html body .hv2 {
  background-color: var(--ic-paper) !important;
  background-image: none !important;
  background: var(--ic-paper) !important;
  color: var(--ic-ink) !important;
  position: relative !important;
  padding: 56px 0 48px !important;
  border-bottom: 1px solid var(--ic-line) !important;
  min-height: auto !important;
}

html body .hero *, html body .hero--dark *, html body .hero--puglia-map * {
  color: var(--ic-ink) !important;
}
html body .hero a:not(.btn-ink):not(.btn-gold):not(.btn-primary) {
  color: var(--ic-ink) !important;
}

.hero.hero--dark::before,
.hero.hero--puglia-map::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(200,155,60,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(11,35,64,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero .hero__map-bg,
.hero #puglia-hero-map {
  opacity: 0.15 !important;
  filter: saturate(0.4) !important;
  mix-blend-mode: multiply !important;
}

.hero-content,
.hero-content--compact {
  position: relative;
  z-index: 2;
}

/* Search bar in hero — editorial squared */
.hero #ic-search-bar,
#ic-search-bar {
  max-width: 640px !important;
  margin: 0 auto 24px !important;
}

#ic-search-bar input[type="search"] {
  padding: 16px 20px 16px 52px !important;
  border-radius: 3px !important;
  border: 1.5px solid var(--ic-line-2) !important;
  background: var(--ic-surface) !important;
  color: var(--ic-ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 1px 0 rgba(11,35,64,0.04) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#ic-search-bar input[type="search"]:focus {
  outline: none !important;
  border-color: var(--ic-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,155,60,0.2) !important;
}
#ic-search-bar input[type="search"]::placeholder {
  color: var(--ic-muted) !important;
  font-style: italic;
}

/* Search icon left — disabilitato: l'SVG inline nell'input è già presente,
   evita doppione visivo (l'icona ::before si centrava sull'intero #ic-search-bar
   includendo la caption sottostante). */
#ic-search-bar::before { content: none !important; display: none !important; }

/* Hero info line */
.hero-content p,
.hero-content .hero-meta,
.hero-content__tagline {
  color: var(--ic-ink) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: .7;
}

/* ---------- PROVINCE PILLS: grid of 6 editorial cards ---------- */
.prov-pills {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px 8px !important;
  background: transparent !important;
  position: relative;
  z-index: 3;
}

.prov-pill-wrap {
  background: var(--ic-surface);
  border: 1px solid var(--ic-line);
  border-radius: 3px;
  overflow: visible;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
}
.prov-pill-wrap:hover {
  border-color: var(--ic-gold);
  box-shadow: 0 4px 16px -4px rgba(11,35,64,0.15), 0 0 0 1px var(--ic-gold);
  transform: translateY(-1px);
}
.prov-pill-wrap[open] {
  border-color: var(--ic-ink);
  box-shadow: 0 8px 24px -8px rgba(11,35,64,0.2);
  z-index: 10;
}
.prov-pill-wrap::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ic-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s;
}
.prov-pill-wrap:hover::before,
.prov-pill-wrap[open]::before { transform: scaleX(1); }

html body .prov-pill,
html body summary.prov-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 16px 16px 14px !important;
  min-height: 84px !important;
  cursor: pointer !important;
  list-style: none !important;
  gap: 8px !important;
  background: transparent !important;
  color: var(--ic-ink) !important;
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
  border: none !important;
  outline: none !important;
  text-transform: none !important;
}
html body .prov-pill,
html body summary.prov-pill {
  color: var(--ic-ink) !important;
}
.prov-pill::-webkit-details-marker { display: none !important; }
.prov-pill::marker { display: none !important; }

.prov-pill small {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ic-gold-2) !important;
  letter-spacing: 0.06em !important;
  opacity: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.prov-pill__chev {
  position: absolute !important;
  top: 14px; right: 12px;
  width: 16px; height: 16px;
  color: var(--ic-muted) !important;
  transition: transform .2s, color .2s;
}
.prov-pill-wrap[open] .prov-pill__chev {
  transform: rotate(180deg);
  color: var(--ic-ink) !important;
}

/* Dropdown content */
.prov-dd {
  position: absolute !important;
  top: calc(100% - 1px) !important;
  left: -1px; right: -1px;
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-ink) !important;
  border-top-color: var(--ic-gold) !important;
  border-top-width: 1px !important;
  padding: 14px !important;
  box-shadow: 0 12px 32px -8px rgba(11,35,64,0.25) !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  z-index: 20;
  border-radius: 0 0 3px 3px !important;
}
.prov-dd::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ic-gold);
}

.prov-dd-cap {
  display: block !important;
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  background: var(--ic-paper-2) !important;
  border-left: 3px solid var(--ic-gold) !important;
  text-decoration: none !important;
  letter-spacing: -0.01em !important;
}
.prov-dd-cap:hover { background: var(--ic-paper-3) !important; }

.prov-dd a:not(.prov-dd-cap) {
  display: block !important;
  padding: 6px 10px !important;
  color: var(--ic-ink) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  border-radius: 2px !important;
  transition: background .1s, color .1s !important;
}
.prov-dd a:not(.prov-dd-cap):hover {
  background: var(--ic-paper-2) !important;
  color: var(--ic-gold-2) !important;
}

/* ---------- Remove fastidious borders on cards site-wide ---------- */
/* NB: il selettore [class*="-card"] NON deve pescare figli BEM tipo
   .overview-card__title / .overview-card__desc / .overview-card__icon,
   altrimenti applica padding enorme al testo interno. Escludiamo __. */
.card, .overview-card, .stat-card, .servizio-card, .numero-card,
.scuola-card, .farmacia-card, .luogo-card, .struttura-card,
.evento-card, .news-card, .tipo-card,
[class*="-card"]:not(.comune-hero-card):not([class*="__"]) {
  border: none !important;
  background: var(--ic-surface) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  border-top: 3px solid var(--ic-line) !important;
  padding: 18px 18px 16px !important;
  transition: border-top-color .15s, transform .15s, box-shadow .15s !important;
  position: relative;
}
.card:hover,
[class*="-card"]:hover:not(.comune-hero-card):not([class*="__"]) {
  border-top-color: var(--ic-gold) !important;
  box-shadow: 0 8px 20px -6px rgba(11,35,64,0.12) !important;
  transform: translateY(-2px);
}

/* Card with clickable link — entire card is active target */
.card a, [class*="-card"] a {
  color: var(--ic-ink) !important;
  text-decoration: none !important;
}

/* Section title: serif w/ thin gold rule above */
.section h2, .section__title, section > h2,
h2.section__title, .container > h2 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--ic-ink) !important;
  margin: 0 0 28px !important;
  padding-top: 12px !important;
  position: relative;
  text-align: center;
}
.section h2::before,
.section__title::before,
section > h2::before {
  content: '';
  display: block;
  width: 48px; height: 1px;
  background: var(--ic-gold);
  margin: 0 auto 16px;
}

/* ---------- Search results, filter tabs, chip groups ---------- */
.chip, .filter-chip, .vpc-tab, .cat-chip, .cat-btn,
[class*="filter"] button, [class*="tab-"] button {
  border: 1px solid var(--ic-line) !important;
  background: var(--ic-surface) !important;
  color: var(--ic-ink) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: border-color .12s, color .12s, background .12s !important;
}
.chip:hover, .filter-chip:hover, .vpc-tab:hover, .cat-chip:hover,
.chip--active, .filter-chip--active, .vpc-tab--active, .cat-chip--active,
.is-active, [aria-pressed="true"] {
  border-color: var(--ic-ink) !important;
  background: var(--ic-ink) !important;
  color: var(--ic-paper) !important;
}

/* Active tab gold variant */
.vpc-tab.is-active,
.cat-chip.is-active,
button[aria-pressed="true"].vpc-tab {
  background: var(--ic-gold) !important;
  border-color: var(--ic-gold) !important;
  color: var(--ic-ink) !important;
}

/* ---------- Weather widget soft re-skin ---------- */
.wpv-cols, .home-meteo {
  background: var(--ic-paper) !important;
}
.wpv-col {
  background: var(--ic-surface) !important;
  border: none !important;
  border-top: 2px solid var(--ic-line) !important;
  border-radius: 3px !important;
  padding: 16px 14px !important;
  transition: border-top-color .15s !important;
}
.wpv-col:hover { border-top-color: var(--ic-gold) !important; }
.wpv-col__head {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--ic-ink) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}
.meteo-prov-row,
.wpv-col .row {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ic-ink) !important;
}

/* ---------- Calendar + Map section ---------- */
.cal-map-wrap, .vpc-wrap,
.cal-wrap, .vpc-cal, #calendar, .vpc-map, #vpc-map {
  background: var(--ic-surface) !important;
  border: none !important;
  border-top: 3px solid var(--ic-line) !important;
  border-radius: 3px !important;
}

.cal-map-footer {
  background: var(--ic-paper-2) !important;
  border-top: 1px solid var(--ic-line) !important;
  color: var(--ic-ink) !important;
}

/* Calendar day cells */
.cal-day, .day-cell, [class*="day-"]:not([class*="day-label"]) {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ic-ink) !important;
}
.cal-day.has-event,
.day-cell.has-event,
.cal-day--event {
  background: var(--ic-gold) !important;
  color: var(--ic-ink) !important;
  font-weight: 700 !important;
}

/* ---------- Cookie banner: editorial, non-invasive ---------- */
.cookie-banner, #cookie-consent, [class*="cookie-banner"] {
  background: var(--ic-paper) !important;
  color: var(--ic-ink) !important;
  border-top: 3px solid var(--ic-gold) !important;
  border-radius: 0 !important;
  box-shadow: 0 -8px 24px -8px rgba(11,35,64,0.15) !important;
}
.cookie-banner h2, .cookie-banner h3 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  color: var(--ic-ink) !important;
}
.cookie-banner button {
  border-radius: 2px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ---------- FOOTER: paper, not dark ---------- */
.site-footer, .site-footer-v2, footer.site-footer-v2, footer {
  background: var(--ic-paper-2) !important;
  color: var(--ic-ink) !important;
  border-top: 3px solid var(--ic-gold) !important;
  padding: 48px 0 32px !important;
}
.site-footer *, .site-footer-v2 *, footer * {
  color: var(--ic-ink) !important;
}
.site-footer a, .site-footer-v2 a, footer a {
  color: var(--ic-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color .15s !important;
}
.site-footer a:hover, .site-footer-v2 a:hover, footer a:hover {
  border-bottom-color: var(--ic-gold) !important;
}

.footer-top, .footer-middle, .footer-bottom, .footer-wrap {
  background: transparent !important;
}
.footer-bottom {
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--ic-line) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--ic-muted) !important;
  text-transform: uppercase !important;
}

.footer-bottom * { color: var(--ic-muted) !important; }

/* Small caps titles in footer columns */
.footer-middle h3, .footer-middle h4,
.footer-col h3, .footer-col h4 {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ic-ink) !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--ic-line) !important;
}

/* ---------- Universal contrast safety net ---------- */
[style*="color: #fff"],
[style*="color:#fff"],
[style*="color: white"] {
  /* Reset inline white text on light bg — only if the element lives in a light parent */
}

/* But keep white text only on truly dark buttons (.btn-ink, etc.) */
.btn-ink, .btn-primary:not(.btn-primary--ghost),
.hv2-cta--ink, .btn-dark {
  background: var(--ic-ink) !important;
  color: #fff !important;
  border-color: var(--ic-ink) !important;
}
.btn-ink:hover, .btn-primary:hover:not(.btn-primary--ghost) {
  background: var(--ic-ink-2) !important;
}

.btn-gold, .btn-primary--gold, .hv2-cta--gold {
  background: var(--ic-gold) !important;
  color: var(--ic-ink) !important;
  border: none !important;
}
.btn-gold:hover { background: var(--ic-gold-2) !important; }

.btn-ghost, .btn-secondary, .btn-primary--ghost {
  background: transparent !important;
  color: var(--ic-ink) !important;
  border: 1.5px solid var(--ic-ink) !important;
}
.btn-ghost:hover, .btn-secondary:hover {
  background: var(--ic-ink) !important;
  color: var(--ic-paper) !important;
}

/* Standardize button radii across the board */
button, .btn, a.btn, input[type="submit"],
.btn-primary, .btn-secondary, .btn-ghost, .btn-ink, .btn-gold,
.hv2-cta, .cta-button, [class*="btn-"] {
  border-radius: 2px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 10px 18px !important;
  transition: all .15s !important;
  cursor: pointer !important;
}

/* ---------- Images with rounded corners — soften to 3px ---------- */
img[class*="rounded"], .rounded-full, .rounded-lg, .rounded-xl, .rounded-2xl {
  border-radius: 3px !important;
}
img.avatar, .avatar, [class*="avatar"] {
  border-radius: 50% !important;
}

/* ---------- Top nav cleanup ---------- */
.site-nav, .topnav, header.site-header, .main-nav {
  background: var(--ic-surface) !important;
  border-bottom: 1px solid var(--ic-line) !important;
  box-shadow: 0 1px 0 rgba(11,35,64,0.03) !important;
}
.site-nav a, .topnav a, .main-nav a {
  color: var(--ic-ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}
.site-nav a:hover, .topnav a:hover, .main-nav a:hover {
  color: var(--ic-gold-2) !important;
}

/* ---------- Language switcher flag+label ---------- */
[class*="lang"] select, [class*="language"] select {
  border: 1px solid var(--ic-line) !important;
  border-radius: 2px !important;
  background: var(--ic-surface) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 6px 10px !important;
}

/* ---------- Hide native hero-map image if it clashes (kiosk uses SVG inline) ---------- */
.hero--dark,
.hero.hero--dark.hero--puglia-map {
  background-image: none !important;
}

/* ---------- Table-like lists with tabular numbers ---------- */
.meteo-prov-row, .meteo-row, .prezzo, .numero-tel, .tabular {
  font-variant-numeric: tabular-nums !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* ---------- Cleanup any full-width dark bands between sections ---------- */
.section--dark, [class*="--dark"] {
  background: var(--ic-paper) !important;
  color: var(--ic-ink) !important;
}

/* ---------- Accessibility focus ring ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,155,60,0.4), 0 0 0 1px var(--ic-gold) !important;
  border-radius: 2px !important;
}

/* ---------- Kiosk editorial meta strip (gold line separator) ---------- */
.editorial-rule {
  height: 1px;
  background: var(--ic-gold);
  max-width: 48px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   NUCLEAR OVERRIDES — beat ic-theme-tokens.css and main.css high-specificity rules
   Uses duplicate-class selectors to win against .foo.foo patterns.
   --------------------------------------------------------------------- */

/* Hero: kill dark gradient set by main.css and ic-theme-tokens.css */
html.force-light body .hero.hero.hero,
html.force-light body .hero.hero--dark.hero--dark,
html.force-light body .hero.hero--puglia-map.hero--puglia-map,
html body .hero.hero,
html body .hero--dark.hero--dark,
html body section.hero.hero {
  background: var(--ic-paper) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
}

html.force-light body .hero.hero *,
html body .hero--dark.hero--dark * {
  color: var(--ic-ink) !important;
}

/* Province pills: kill dark gradient + white text.
   Must beat #provPills (id) rule in main.css and .force-light 4-class rule in ic-theme-tokens.css. */
#provPills.prov-pills .prov-pill-wrap > summary.prov-pill,
#provPills .prov-pill-wrap > summary.prov-pill.prov-pill,
#provPills .prov-pill-wrap > .prov-pill,
html.force-light #provPills .prov-pill-wrap > summary.prov-pill,
html.force-light body #provPills .prov-pill-wrap > summary.prov-pill {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--ic-ink) !important;
  -webkit-text-fill-color: var(--ic-ink) !important;
}

html body .prov-pill-wrap.prov-pill-wrap,
html.force-light body .prov-pill-wrap.prov-pill-wrap {
  background: var(--ic-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ic-line) !important;
  border-radius: 3px !important;
  color: var(--ic-ink) !important;
}

html body .prov-pill-wrap.prov-pill-wrap:hover {
  border-color: var(--ic-gold) !important;
  box-shadow: 0 4px 16px -4px rgba(11,35,64,0.12), 0 0 0 1px var(--ic-gold) !important;
}

html body .prov-pill-wrap[open].prov-pill-wrap,
html.force-light body .prov-pill-wrap[open].prov-pill-wrap {
  background: var(--ic-surface) !important;
  border-color: var(--ic-ink) !important;
}

#provPills .prov-pill-wrap > summary.prov-pill,
#provPills .prov-pill-wrap > summary.prov-pill.prov-pill,
html.force-light #provPills .prov-pill-wrap > summary.prov-pill {
  color: var(--ic-ink) !important;
  -webkit-text-fill-color: var(--ic-ink) !important;
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
}
#provPills .prov-pill-wrap > summary.prov-pill small,
html.force-light #provPills .prov-pill-wrap > summary.prov-pill small {
  color: var(--ic-gold-2) !important;
  -webkit-text-fill-color: var(--ic-gold-2) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
}

/* Mobile pill: slightly smaller, same palette */
@media (max-width: 767px) {
  #provPills .prov-pill-wrap > summary.prov-pill,
  #provPills .prov-pill-wrap > summary.prov-pill.prov-pill,
  html.force-light #provPills .prov-pill-wrap > summary.prov-pill {
    font-size: 15px !important;
    min-height: 52px !important;
    padding: 10px 12px 8px !important;
    color: var(--ic-ink) !important;
    -webkit-text-fill-color: var(--ic-ink) !important;
  }
}
html body .prov-pill__chev.prov-pill__chev { color: var(--ic-muted) !important; }

/* Kill the hero::before overlays from ic-theme-tokens */
html.force-light body .hero.hero::before,
html.force-light body .hero::before,
html body .hero::before {
  background: transparent !important;
  background-image: none !important;
}

/* Kill any ::after overlay with dark gradient */
html body .hero.hero::after { display: none !important; }

/* Nav pill dark gradient kill on home */
html body .hero-search.hero-search input,
html body #ic-search-input#ic-search-input,
html body .ic-search.ic-search input {
  background: var(--ic-surface) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  border: 1.5px solid var(--ic-line-2) !important;
}

/* Force footer light — overriding ic-theme-tokens dark footer */
html.force-light body footer.site-footer-v2,
html.force-light body .site-footer-v2,
html body footer.site-footer-v2.site-footer-v2 {
  background: var(--ic-paper-2) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
}

html.force-light body footer.site-footer-v2 *,
html body footer.site-footer-v2 *:not(a:hover),
html.force-light body .site-footer-v2 *,
html.force-light body footer *,
html body footer * {
  color: var(--ic-ink) !important;
}

html.force-light body .site-footer-v2 a:not(.brand-cta),
html.force-light body .site-footer-v2 .contact-col a,
html.force-light body footer a,
html body .site-footer-v2 a,
html body footer a {
  color: var(--ic-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.15s !important;
}

html body footer.site-footer-v2 a:hover,
html.force-light body .site-footer-v2 a:hover,
html body footer a:hover {
  color: var(--ic-gold-2) !important;
  border-bottom-color: var(--ic-gold) !important;
}

/* Footer section headings */
html body footer h2, html body footer h3, html body footer h4,
html body .site-footer-v2 h2, html body .site-footer-v2 h3, html body .site-footer-v2 h4,
html.force-light body footer h2, html.force-light body footer h3, html.force-light body footer h4 {
  color: var(--ic-ink) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

/* Brand CTA "Attiva il tuo Comune" — contrasto AA+ */
html body footer .brand-cta,
html body footer a.brand-cta,
html.force-light body .site-footer-v2 a.brand-cta {
  color: #0b2340 !important;
  background: #c89b3c !important;
  border: 1px solid #8a6518 !important;
  border-bottom-color: #8a6518 !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
html body footer .brand-cta *,
html body footer a.brand-cta *,
html.force-light body .site-footer-v2 a.brand-cta * {
  color: #0b2340 !important;
}

/* Small muted utility-row in footer */
html body .footer-bottom, html body .footer-bottom * {
  color: var(--ic-muted) !important;
}

/* ---------------------------------------------------------------------
   COMUNE PAGE — Editorial hero (no transparent map overlay)
   --------------------------------------------------------------------- */

/* Kill hero-v2 dark gradient wrapping the zip + info cards */
html body .hero-v2,
html body div.hero-v2,
html body .hv2,
html body div.hv2,
html body .comune-hero .hero-v2,
html body .comune-hero div.hero-v2 {
  background: var(--ic-paper) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  padding: 16px 0 !important;
}
html body .hero-v2 *,
html body .hv2 * {
  color: var(--ic-ink) !important;
}
html body .hero-v2-sub,
html body div.hero-v2-sub {
  background: transparent !important;
  color: var(--ic-ink) !important;
}

html body .comune-header,
html body header.comune-header {
  background: #ffffff !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  border-bottom: 1px solid var(--ic-line) !important;
  box-shadow: none !important;
  padding: 12px 24px !important;
}

html body .comune-header *,
html body header.comune-header * {
  color: var(--ic-ink) !important;
}

html body .comune-header a,
html body header.comune-header a {
  color: var(--ic-ink) !important;
  text-decoration: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html body .comune-header a:hover { color: var(--ic-gold-2) !important; }

html body .comune-header__title,
html body .comune-header__logo {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
}

/* Back-btn: solo elementi espliciti di "torna indietro".
   NB: escludere .comune-header__brand che ha href verso index.html
   ma NON e' un back button, e' il brand-link. */
html body .comune-header__back,
html body .comune-header .back-btn {
  background: var(--ic-gold) !important;
  color: var(--ic-ink) !important;
  padding: 6px 14px !important;
  border-radius: 2px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

html body .breadcrumb,
html body nav.breadcrumb {
  background: transparent !important;
  padding: 16px 0 0 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--ic-muted) !important;
  text-transform: uppercase !important;
}
html body .breadcrumb a { color: var(--ic-muted) !important; text-decoration: none !important; }
html body .breadcrumb a:hover { color: var(--ic-ink) !important; }

/* Hero paper-theme SOLO se la pagina non e' la variante --map.
   Scope esplicito con :not(.comune-hero--map) per non collidere col
   designer-pass in fondo al file. */
html body .comune-hero:not(.comune-hero--map),
:root.force-light body section.comune-hero:not(.comune-hero--map),
html.force-light body .comune-hero:not(.comune-hero--map) {
  background: var(--ic-paper) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  padding: 48px 0 32px !important;
  border-bottom: 1px solid var(--ic-line) !important;
  position: relative !important;
  min-height: auto !important;
}

html body .comune-hero:not(.comune-hero--map)::before,
html body .comune-hero:not(.comune-hero--map)::after {
  display: none !important;
  background: none !important;
}

html body .comune-hero:not(.comune-hero--map) .comune-hero__map,
html body .comune-hero:not(.comune-hero--map) .comune-hero__map-bg,
html body .comune-hero:not(.comune-hero--map) [class*="comune-hero__map"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body .comune-hero:not(.comune-hero--map) * {
  color: var(--ic-ink) !important;
}

html body .comune-hero:not(.comune-hero--map) h1 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin: 8px 0 12px !important;
  color: var(--ic-ink) !important;
}

html body .comune-hero:not(.comune-hero--map) .comune-hero__meta,
html body .comune-hero:not(.comune-hero--map) .comune-hero__badge,
html body .comune-hero:not(.comune-hero--map) .comune-hero__row {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ic-muted) !important;
}

html body .comune-hero:not(.comune-hero--map) .comune-hero__badge {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-line) !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html body .comune-hero:not(.comune-hero--map) .comune-hero__badge--pro {
  background: var(--ic-gold) !important;
  color: var(--ic-ink) !important;
  border-color: var(--ic-gold) !important;
}

html body .comune-hero:not(.comune-hero--map) .comune-hero__badge--pro * {
  color: var(--ic-ink) !important;
}

/* Quick-info cards row (Sito, Centralino, Indirizzo, PEC) */
html body .comune-hero-cards,
html body .hero-cards,
html body .comune-hero__info-grid,
html body .hv2,
html body .hv2__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

html body .hv2-box,
html body .comune-hero-card,
html body [class*="comune-hero-card"],
html body .hero-quick-card {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-line) !important;
  border-left: 3px solid var(--ic-gold) !important;
  border-radius: 3px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}

html body .hv2-box__label,
html body .comune-hero-card__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ic-muted) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

html body .hv2-box__value,
html body .comune-hero-card__value {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
  line-height: 1.3 !important;
}

html body .hv2-box__action,
html body .comune-hero-card__action {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding: 6px 12px !important;
  background: var(--ic-paper-2) !important;
  border: 1px solid var(--ic-line) !important;
  color: var(--ic-ink) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px !important;
  transition: background .12s, color .12s, border-color .12s !important;
}
html body .hv2-box__action:hover {
  background: var(--ic-ink) !important;
  color: var(--ic-paper) !important;
  border-color: var(--ic-ink) !important;
}

/* ---------------------------------------------------------------------
   COMUNE PAGE — Editorial tabs navigation
   --------------------------------------------------------------------- */

html body .comune-tabs,
html body .tabs-nav,
html body [role="tablist"] {
  background: var(--ic-surface) !important;
  border-bottom: 1px solid var(--ic-line) !important;
  padding: 0 !important;
  position: sticky !important;
  top: var(--comune-tabs-top, var(--header-h, 64px)) !important;
  margin-top: 0 !important;
  z-index: 40 !important;
  box-shadow: 0 2px 10px rgba(11,35,64,0.18) !important;
}
/* In kiosk mode l'header principale e nascosto: rimetti top: 0 */
html.ic-display-kiosk-h body .comune-tabs,
html.ic-display-kiosk-v body .comune-tabs,
body.layout-kiosk .comune-tabs {
  top: 0 !important;
}

html body .comune-tab,
html body .tabs-nav button,
html body [role="tab"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ic-muted) !important;
  padding: 14px 18px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: color .12s, border-color .12s !important;
}

html body .comune-tab:hover,
html body .tabs-nav button:hover,
html body [role="tab"]:hover {
  color: var(--ic-ink) !important;
}

html body .comune-tab.is-active,
html body .comune-tab[aria-selected="true"],
html body .tabs-nav button[aria-selected="true"],
html body [role="tab"][aria-selected="true"] {
  color: var(--ic-ink) !important;
  border-bottom-color: var(--ic-gold) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* ---------------------------------------------------------------------
   COMUNE SECTIONS — Panoramica overview cards
   --------------------------------------------------------------------- */

html body .comune-section,
html body .comune-panel,
html body .tab-panel,
html body [role="tabpanel"] {
  background: var(--ic-paper) !important;
  padding: 48px 0 !important;
}

html body .comune-section h2,
html body .comune-panel h2 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(26px, 3.2vw, 38px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ic-ink) !important;
  margin: 0 0 32px !important;
  position: relative !important;
  padding-top: 16px !important;
}
html body .comune-section h2::before,
html body .comune-panel h2::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 48px !important; height: 1px !important;
  background: var(--ic-gold) !important;
  display: block !important;
}

/* Overview cards grid — editorial, content-dense, 3-col balanced */
html body .overview-grid,
html body .overview-cards,
html body [class*="overview-grid"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin-top: 24px !important;
  background: var(--ic-line) !important;
  border: 1px solid var(--ic-line) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

@media (max-width: 900px) {
  html body .overview-grid,
  html body .overview-cards,
  html body [class*="overview-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  html body .overview-grid,
  html body .overview-cards,
  html body [class*="overview-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Each card: no external borders, just 1px grid gaps simulate separators */
html body .overview-card,
html body [class*="overview-card"]:not(.overview-card__icon):not(.overview-card__title):not(.overview-card__desc) {
  background: var(--ic-surface) !important;
  border: none !important;
  border-top: none !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  box-shadow: none !important;
  transition: background .12s, color .12s !important;
  cursor: pointer !important;
  display: grid !important;
  grid-template-columns: 26px 1fr !important;
  grid-template-rows: auto auto !important;
  grid-column-gap: 14px !important;
  grid-row-gap: 6px !important;
  align-items: start !important;
  text-decoration: none !important;
  color: var(--ic-ink) !important;
  position: relative !important;
  min-height: 86px !important;
}

/* Hover: subtle paper-2 tint + gold left accent */
html body .overview-card:hover {
  background: var(--ic-paper-2) !important;
  transform: none !important;
  box-shadow: none !important;
}
html body .overview-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: transparent !important;
  transition: background .12s !important;
}
html body .overview-card:hover::before {
  background: var(--ic-gold) !important;
}

/* Icon cell — row 1 col 1 */
html body .overview-card__icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 24px !important; height: 24px !important;
  color: var(--ic-gold) !important;
  margin: 2px 0 0 0 !important;
  flex-shrink: 0 !important;
  display: block !important;
}
html body .overview-card__icon svg,
html body .overview-card__icon .ic-ico,
html body .overview-card__icon .ic-ico svg {
  width: 24px !important; height: 24px !important;
  stroke: var(--ic-gold) !important;
  color: var(--ic-gold) !important;
}
html body .overview-card__icon .ic-ico svg path {
  stroke: var(--ic-gold) !important;
}

/* Title — row 1 col 2 */
html body .overview-card__title,
html body .overview-card h3,
html body .overview-card h4 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--ic-ink) !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  border: none !important;
  background: none !important;
}

/* Kill internal horizontal rules / dividers inside cards */
html body .overview-card hr,
html body .overview-card::after,
html body .overview-card h3::before,
html body .overview-card h3::after,
html body .overview-card h4::before,
html body .overview-card h4::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
  height: 0 !important;
}

/* Description — row 2 col 2 */
html body .overview-card__desc,
html body .overview-card p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  color: var(--ic-text-2, var(--ic-muted)) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  border: none !important;
}

/* Services/Numbers/Schools lists */
html body .servizio-card,
html body .numero-card,
html body .scuola-card,
html body .farmacia-card,
html body .luogo-card,
html body .struttura-card {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-line) !important;
  border-radius: 3px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html body .servizio-card h3,
html body .numero-card h3,
html body .scuola-card h3,
html body .farmacia-card h3 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .item-meta,
html body .item-meta__row,
html body .numero-utile {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: var(--ic-muted) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html body .item-meta a {
  color: var(--ic-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ic-line) !important;
}
html body .item-meta a:hover { border-bottom-color: var(--ic-gold) !important; }

/* Tel numbers tabular */
html body .numero-tel, html body .tel {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ic-ink) !important;
  font-weight: 600 !important;
}

/* Accordion heads (salute subsections etc) */
html body .ic-acc-head,
html body .acc-head {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 22px !important;
  color: var(--ic-ink) !important;
  padding: 16px 18px !important;
  background: var(--ic-paper-2) !important;
  border: 1px solid var(--ic-line) !important;
  border-left: 3px solid var(--ic-gold) !important;
  border-radius: 3px 3px 0 0 !important;
  cursor: pointer !important;
  margin-top: 20px !important;
}

html body .ic-acc-body,
html body .acc-body {
  background: var(--ic-surface) !important;
  border: 1px solid var(--ic-line) !important;
  border-top: none !important;
  border-radius: 0 0 3px 3px !important;
  padding: 20px !important;
}

/* =====================================================================
   GLOBAL BRAND IDENTITY UNIFICATION
   Neutralize foreign accents (cyan/teal/purple) across all pages
   (including lavoro-servizi, jobcon, civic-network) so the whole site
   speaks one palette: ink · gold · paper.
   ===================================================================== */

/* Replace any cyan / light-blue accent colors with gold */
html body [style*="color: #00d4ff"],
html body [style*="color:#00d4ff"],
html body [style*="color: #22d3ee"],
html body [style*="color: #06b6d4"],
html body [style*="color: #0ea5e9"],
html body [style*="color: #38bdf8"],
html body [style*="color: #0bb4e5"],
html body [style*="color: #00b4d8"],
html body .text-cyan,
html body .cyan,
html body .text-teal,
html body .teal {
  color: var(--ic-gold) !important;
  -webkit-text-fill-color: var(--ic-gold) !important;
}

/* Kill colored step circles — replace with editorial mono numbers */
html body .step-circle,
html body .step-number,
html body [class*="step-num"],
html body [class*="step-circle"],
html body .onboard-step__number {
  background: transparent !important;
  background-image: none !important;
  color: var(--ic-gold) !important;
  border: 1px solid var(--ic-gold) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Lavoro & Servizi hero (dark navy with cyan accent) — editorialize */
html body .jobcon-hero,
html body .lavoro-hero,
html body section[class*="lavoro"],
html body .sf-hero,
html body .sf-cta-block,
html body .search-jobcon,
html body [data-section="lavoro"],
html body [data-section="jobcon"] {
  background: var(--ic-paper) !important;
  background-image: none !important;
  color: var(--ic-ink) !important;
  border-bottom: 1px solid var(--ic-line) !important;
}

html body .jobcon-hero h1,
html body .lavoro-hero h1,
html body .sf-hero h1,
html body .sf-cta-block h1 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  color: var(--ic-ink) !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

html body .sf-cta-btn,
html body .info-overlay__cta {
  background: var(--ic-ink) !important;
  color: var(--ic-paper) !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 12px 20px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
}
html body .sf-cta-btn:hover { background: var(--ic-ink-2) !important; }

html body .sf-cta-label {
  color: var(--ic-muted) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* =====================================================================
   DISPLAY MODES
   Triggered by <html class="ic-display-mobile|desktop|kiosk-h|kiosk-v">
   ===================================================================== */

/* MOBILE — simulate 420px container on desktop */
html.ic-display-mobile body {
  max-width: 420px !important;
  margin: 0 auto !important;
  border-left: 1px solid var(--ic-line) !important;
  border-right: 1px solid var(--ic-line) !important;
  min-height: 100vh !important;
  box-shadow: 0 0 48px rgba(11,35,64,0.08) !important;
  padding-bottom: 84px !important; /* space for appbar */
}
html.ic-display-mobile .comune-tabs,
html.ic-display-mobile .tabs-nav,
html.ic-display-mobile [role="tablist"] {
  overflow-x: auto !important;
  white-space: nowrap !important;
}
html.ic-display-mobile .prov-pills {
  grid-template-columns: repeat(2, 1fr) !important;
}
html.ic-display-mobile .overview-grid,
html.ic-display-mobile .overview-cards {
  grid-template-columns: 1fr !important;
}
html.ic-display-mobile .cards-grid,
html.ic-display-mobile .cal-map-wrap {
  display: block !important;
}
/* Force mobile-style bottom tab bar to render on forced mobile */
html.ic-display-mobile .ic-appbar,
html.ic-display-mobile #ic-appbar {
  display: grid !important;
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 420px !important;
  max-width: 100% !important;
  bottom: 0 !important;
  border-top: 1px solid var(--ic-line) !important;
  background: rgba(255,255,255,0.98) !important;
  backdrop-filter: blur(12px) !important;
  grid-template-columns: repeat(5, 1fr) !important;
  height: 64px !important;
  z-index: 9999 !important;
}

/* DESKTOP (default) — no override needed */
html.ic-display-desktop body {
  max-width: none !important;
}

/* KIOSK ORIZZONTALE — 1920×1080 landscape infopoint */
html.ic-display-kiosk-h {
  --ic-kiosk-scale: 1.1;
}
html.ic-display-kiosk-h body {
  max-width: 1920px !important;
  margin: 0 auto !important;
  min-height: 1080px !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}
html.ic-display-kiosk-h .hero,
html.ic-display-kiosk-h section.hero {
  min-height: 280px !important;
  padding: 64px 48px !important;
}
html.ic-display-kiosk-h .hero-content h1,
html.ic-display-kiosk-h .comune-hero h1 {
  font-size: 72px !important;
}
html.ic-display-kiosk-h .prov-pills {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 20px !important;
  padding: 0 48px !important;
}
html.ic-display-kiosk-h .prov-pill {
  font-size: 24px !important;
  padding: 24px !important;
  min-height: 112px !important;
}
html.ic-display-kiosk-h button,
html.ic-display-kiosk-h .btn,
html.ic-display-kiosk-h a.btn,
html.ic-display-kiosk-h .chip {
  padding: 14px 22px !important;
  font-size: 15px !important;
  min-height: 52px !important;
}
html.ic-display-kiosk-h .section h2,
html.ic-display-kiosk-h .comune-section h2 {
  font-size: 52px !important;
}
html.ic-display-kiosk-h .comune-tabs__btn {
  font-size: 14px !important;
  padding: 14px 22px !important;
}

/* KIOSK VERTICALE — 1080×1920 portrait infopoint */
html.ic-display-kiosk-v body {
  max-width: 1080px !important;
  margin: 0 auto !important;
  min-height: 1920px !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
}
html.ic-display-kiosk-v .hero,
html.ic-display-kiosk-v section.hero {
  padding: 80px 40px 64px !important;
  min-height: 320px !important;
}
html.ic-display-kiosk-v .hero-content h1,
html.ic-display-kiosk-v .comune-hero h1 {
  font-size: 80px !important;
}
html.ic-display-kiosk-v .prov-pills {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  padding: 0 40px !important;
}
html.ic-display-kiosk-v .prov-pill {
  font-size: 28px !important;
  padding: 28px !important;
  min-height: 128px !important;
}
html.ic-display-kiosk-v .cal-map-wrap {
  display: block !important;
}
html.ic-display-kiosk-v .cal-wrap,
html.ic-display-kiosk-v .vpc-cal,
html.ic-display-kiosk-v #calendar,
html.ic-display-kiosk-v .vpc-map,
html.ic-display-kiosk-v #vpc-map {
  width: 100% !important;
  margin-bottom: 24px !important;
  min-height: 500px !important;
}
html.ic-display-kiosk-v .overview-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
html.ic-display-kiosk-v button,
html.ic-display-kiosk-v .btn {
  min-height: 56px !important;
  padding: 16px 24px !important;
  font-size: 15px !important;
}
html.ic-display-kiosk-v .comune-tabs {
  overflow-x: auto !important;
  white-space: nowrap !important;
}
html.ic-display-kiosk-v .comune-tabs__btn {
  font-size: 16px !important;
  padding: 18px 24px !important;
}

/* Debug indicator rimosso da produzione: mostrava il valore di data-ic-display
   (es. "KIOSK-H") come badge in top-right, sovrapponendosi al CTA Kiosk e al
   FAB accessibilita. Era utile solo in fase di test. */
html[data-ic-display]:not([data-ic-display="desktop"])::before {
  content: none !important;
  display: none !important;
}

/* ---------- Responsive: at tablet, 3x2 grid for province pills ---------- */
@media (max-width: 1024px) {
  .prov-pills { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .prov-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0 16px 8px !important;
  }
  .hero.hero--dark, section.hero { padding: 48px 0 40px !important; }
  .section h2 { font-size: 24px !important; }
}

/* ---------------------------------------------------------------------
   COMUNE HEADER — in light mode mostra il logo SCURO (senza filter)
   e nascondi il bianco. Fix contrasto su sfondo chiaro editoriale.
   --------------------------------------------------------------------- */
html.force-light header.comune-header .comune-header__logo--light,
body.theme-light header.comune-header .comune-header__logo--light,
html:not(.force-dark) header.comune-header .comune-header__logo--light {
  display: none !important;
}
html.force-light header.comune-header .comune-header__logo--dark,
body.theme-light header.comune-header .comune-header__logo--dark,
html:not(.force-dark) header.comune-header .comune-header__logo--dark {
  display: inline-block !important;
  filter: none !important;
}
/* Dark mode esplicito: logo bianco con drop-shadow, logo scuro nascosto */
html.force-dark header.comune-header .comune-header__logo--light {
  display: inline-block !important;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.35)) !important;
}
html.force-dark header.comune-header .comune-header__logo--dark {
  display: none !important;
}

/* =====================================================================
   DESIGNER PASS — COMUNE PAGE (v1)
   - Header brand pulito, tipografico, niente rettangolo gold
   - Hero comune con mappa OSM grigia + glass morphism sui contenuti
   - Footer: logo scuro + testo leggibile
   ===================================================================== */

/* ---- 1) COMUNE HEADER BRAND: pulizia totale ---- */
html body header.comune-header a.comune-header__brand {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--ic-ink) !important;
}
/* Divider verticale tra logo e "Comune di X" */
html body header.comune-header .comune-header__divider {
  width: 1px !important;
  height: 22px !important;
  background: var(--ic-line-2, #d7cfb8) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}
/* "Comune di X": label piccola + nome serif */
html body header.comune-header .comune-header__comune {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.1 !important;
  gap: 2px !important;
}
html body header.comune-header .comune-header__comune-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ic-muted) !important;
  opacity: 1 !important;
  background: transparent !important;
  padding: 0 !important;
}
html body header.comune-header .comune-header__comune-name {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ic-ink) !important;
  background: transparent !important;
  padding: 0 !important;
  letter-spacing: -0.005em !important;
}
/* Rimuovi il colore bianco forzato da main.css sul brand e comune name */
html body header.comune-header,
html body header.comune-header .comune-header__brand,
html body header.comune-header .comune-header__comune-name {
  color: var(--ic-ink) !important;
}

/* ---- 2) COMUNE HERO: mappa OSM grigia + glass ---- */
:root.force-light body section.comune-hero.comune-hero--map {
  position: relative !important;
  overflow: hidden !important;
  min-height: 360px !important;
  padding: 52px 0 40px !important;
  background: #1a2436 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
/* Mappa Leaflet come sfondo, convertita in grigio */
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__map,
:root.force-light body section.comune-hero.comune-hero--map .leaflet-container {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: #1a2436 !important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__map .leaflet-tile-pane,
:root.force-light body section.comune-hero.comune-hero--map .leaflet-tile {
  filter: grayscale(1) contrast(1.02) brightness(0.82) !important;
  -webkit-filter: grayscale(1) contrast(1.02) brightness(0.82) !important;
  opacity: 0.85;
}
/* Overlay di leggibilita' (scuro graduato) */
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg,
    rgba(18,26,42,0.45) 0%,
    rgba(18,26,42,0.75) 100%
  ) !important;
}
/* Contenuto sopra la mappa */
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__content,
:root.force-light body section.comune-hero.comune-hero--map .container {
  position: relative !important;
  z-index: 2 !important;
}

/* Testi bianchi */
:root.force-light body section.comune-hero.comune-hero--map h1,
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__subtitle,
:root.force-light body section.comune-hero.comune-hero--map .breadcrumb,
:root.force-light body section.comune-hero.comune-hero--map .breadcrumb a,
:root.force-light body section.comune-hero.comune-hero--map .breadcrumb span,
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-label,
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-value,
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-value a {
  color: #ffffff !important;
}
:root.force-light body section.comune-hero.comune-hero--map h1 {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 14px 0 6px !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__subtitle {
  opacity: 0.85;
  font-size: 14px !important;
  margin-bottom: 22px !important;
}
:root.force-light body section.comune-hero.comune-hero--map .breadcrumb {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  opacity: 0.85;
  padding: 0 !important;
  margin-bottom: 14px !important;
}
:root.force-light body section.comune-hero.comune-hero--map .breadcrumb a:hover { color: #ffd97a !important; }

/* Badges glass */
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__badge {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__badge--pro {
  background: rgba(200,155,60,0.2) !important;
  border-color: rgba(255,204,51,0.55) !important;
  color: #ffd97a !important;
}

/* Meta cards — glass panels */
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-item {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 4px !important;
  padding: 11px 16px 12px !important;
  transition: background .2s, border-color .2s !important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-item:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,204,51,0.35) !important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.68 !important;
  margin-bottom: 4px !important;
}
:root.force-light body section.comune-hero.comune-hero--map .comune-hero__meta-value {
  font-family: 'Oswald', 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  word-break: break-word;
}

/* Quick action buttons (Telefono, PEC, Sito Web) — glass pills */
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 16px !important;
}
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn {
  background: rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: background .18s, border-color .18s, color .18s !important;
}
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn:hover {
  background: rgba(255,204,51,0.18) !important;
  border-color: rgba(255,204,51,0.55) !important;
  color: #ffd97a !important;
}
:root.force-light body section.comune-hero.comune-hero--map .ms-hero-btn i {
  color: rgba(255,204,51,0.9) !important;
  margin-right: 2px !important;
}

/* ---- 3) TABS sticky: sotto la comune-header (misura dinamica via JS) ---- */
:root.force-light body section.comune-hero.comune-hero--map + nav.comune-tabs,
html body .comune-tabs {
  box-shadow: 0 2px 10px rgba(11,35,64,0.12) !important;
}

/* ---- 4) FOOTER: logo scuro su bg paper + testi leggibili ---- */
html body .site-footer-v2 { color: var(--ic-ink) !important; }
html body .site-footer-v2 .brand-logo-img {
  /* Logo brand a colori (logo-blue.png navy/cyan) - nessun filtro */
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  max-width: 180px !important;
  height: auto !important;
  display: block !important;
}
html body .site-footer-v2 p,
html body .site-footer-v2 li,
html body .site-footer-v2 a {
  color: var(--ic-ink) !important;
}
html body .site-footer-v2 .sf-col-title,
html body .site-footer-v2 h4,
html body .site-footer-v2 [class*="title"],
html body .site-footer-v2 .contact-col-title,
html body .site-footer-v2 .links-group-title {
  color: var(--ic-ink, #0b2340) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}
html body .site-footer-v2 a:hover {
  color: var(--ic-gold-2, #8a6518) !important;
}
/* CTA "Attiva il tuo Comune" con contrasto forte (AA+) */
html body footer .brand-cta,
html body footer a.brand-cta,
html.force-light body .site-footer-v2 a.brand-cta {
  color: var(--ic-ink, #0b2340) !important;
  background: var(--ic-gold, #c89b3c) !important;
  border: 1px solid var(--ic-gold-2, #8a6518) !important;
  border-bottom-color: var(--ic-gold-2, #8a6518) !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
html body footer a.brand-cta:hover {
  background: var(--ic-gold-2, #8a6518) !important;
  color: #ffffff !important;
}
html body footer a.brand-cta .brand-cta-dot {
  background: var(--ic-ink, #0b2340) !important;
}
html body footer a.brand-cta:hover .brand-cta-dot {
  background: #ffffff !important;
}

/* =====================================================================
   FINE DESIGNER PASS — COMUNE PAGE v1
   ===================================================================== */

/* =====================================================================
   DESIGNER PASS ADD-ON v2 — 2026-04-22
   - Header comune pure-white, zero alone cream
   - Nav button uniformi
   ===================================================================== */
html body header.comune-header,
html body header.comune-header *:not(svg):not(path):not(circle):not(line):not(polyline):not(rect) {
  background-image: none !important;
}
html body header.comune-header {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
html body header.comune-header a.comune-header__brand,
html body header.comune-header .comune-header__inner {
  background: transparent !important;
  background-color: transparent !important;
}
/* Logo-dark: nessun alone, nessun drop-shadow */
html body header.comune-header .comune-header__logo--dark {
  filter: none !important;
  -webkit-filter: none !important;
  background: transparent !important;
}
/* Voce nav iniettata: aspetto neutro, niente rettangolo gold */
html body header.comune-header nav a.ic-nav-retecivica,
html body header.site-header nav a.ic-nav-retecivica,
html body nav a.ic-nav-retecivica {
  background: transparent !important;
  color: var(--ic-ink) !important;
  font-weight: 600 !important;
}
html body nav a.ic-nav-retecivica:hover {
  color: var(--ic-gold-2, #a57d22) !important;
  background: transparent !important;
}
/* =====================================================================
   FINE ADD-ON v2
   ===================================================================== */

/* =====================================================================
   MOBILE v1 — 2026-04-22
   Nasconde site-footer su mobile (le info sono in un drawer dal tasto
   "Servizi" della bottom-nav). bottom-nav sempre visibile.
   ===================================================================== */
@media (max-width: 767px){
  html body .site-footer-v2,
  html body footer.site-footer-v2,
  html body .site-footer,
  html body footer.site-footer {
    display: none !important;
  }
  /* Garantisce spazio in fondo per la bottom-nav */
  html body main { padding-bottom: 84px; }
}
/* =====================================================================
   FINE MOBILE v1
   ===================================================================== */