/* ============================================================
   InfoComuni — Civic Editorial · layer ORIGINALITA ("tocco in piu")
   Firma trasversale: "Nodo Civico" (cerchio navy + anello oro),
   righelli con terminale a nodo, micro-interazioni, watermark hero.
   Coerente con home + schede-comune + sezioni. Solo decorazione.
   ============================================================ */
:root{
  --ce-gold:#5BC4FF; --ce-gold-deep:#1A72B8; --ce-navy:#0b2340; --ce-navy-700:#13315c;
}

/* --- NODO CIVICO: marker prima dei kicker/eyebrow di sezione --- */
.ic-v3-eyebrow::before, .ic-storia-subtitle::before, .ic-cammini-subtitle::before,
.brand-sub::before, .ce-kicker::before, .nt-hero__counter::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ce-navy); box-shadow:0 0 0 2px var(--ce-gold);
  margin-right:9px; vertical-align:middle; position:relative; top:-1px;
}

/* --- pulse del nodo (rispetta reduced-motion) --- */
@media (prefers-reduced-motion: no-preference){
  @keyframes ce-node-pulse{0%,100%{box-shadow:0 0 0 2px var(--ce-gold)}50%{box-shadow:0 0 0 2px var(--ce-gold),0 0 0 6px rgba(91,196,255,.18)}}
  .ic-v3-eyebrow::before, .brand-sub::before{ animation:ce-node-pulse 3.2s ease-in-out infinite; }
}

/* --- watermark "costellazione" leggera sugli hero navy --- */
.hero, .comune-hero, .nt-hero, .section--hero{
  background-image:
    radial-gradient(circle at 18% 30%, rgba(91,196,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 64%, rgba(91,196,255,.07) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,.06) 0 2px, transparent 3px);
  background-repeat:no-repeat;
}

/* --- righelli oro con terminale a nodo --- */
.ic-v3-section__head::after{ position:relative; }

/* --- micro-interazione card: bordo blu pieno on-hover --- */
.ic-v3-arg-card:hover, .overview-card:hover, .comune-section:hover{
  outline: none;
}

/* --- link in-content: underline oro on-hover --- */
.comune-section a:not(.ic-btn):hover, .ic-tourism a:hover, .section a:not(.brand-cta):hover{
  text-decoration-color:var(--ce-gold-deep); text-underline-offset:3px;
}

/* --- A11y: garantisci oro-scuro per testo su chiaro (mai oro brillante) --- */
.ic-v3-eyebrow, .ic-storia-subtitle, .ic-cammini-subtitle, .brand-sub,
.prov-pill__meta, .card__meta, .ic-tourism__monument-type{
  color:var(--ce-gold-deep)!important;
}
/* focus-visible coerente */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:0; box-shadow:0 0 0 3px rgba(91,196,255,.6)!important; border-radius:4px;
}

/* ── FASE4 QA a11y (2026-06-08): focus-visible universale e robusto ──────
   Garantisce un anello di focus visibile anche dove box-shadow viene
   clippato da overflow:hidden. Copre elementi interattivi e ARIA roles.
   WCAG 2.1 AA — 2.4.7 Focus Visible. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible,
[role="tab"]:focus-visible, [role="link"]:focus-visible,
[role="menuitem"]:focus-visible, [role="option"]:focus-visible,
.ic-constel__node:focus-visible, .prov-pill:focus-visible{
  outline:3px solid #5BC4FF !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 5px rgba(91,196,255,.35) !important;
  border-radius:4px;
}