/* =========================================================
   Widget "Quanta energia farà il sole domani" — home
   Producibilità fotovoltaica per provincia, dati Open-Meteo.

   Tutto è isolato sotto .pvfc con classi .pv-* per non
   interferire con il design system del sito.

   NOTA SUI TOKEN: le variabili qui dentro sono tutte prefissate
   --pv-* . In passato questo blocco ridefiniva --ink e --line,
   che sono token GLOBALI del sito con tutt'altro significato:
   chiunque leggesse una regola dentro .pvfc trovava valori
   diversi da quelli del design system. Non reintrodurre nomi
   non prefissati.  (Se rinomini --pv-r0…--pv-r5 ricordati di
   aggiornare anche la costante STOPS in sole.js.)
   ========================================================= */

.pvfc{
  --mono:var(--sans);            /* nessun font estraneo: si usa quello del sito */
  --pv-ink:#00303a;
  --pv-panel:#063f4a;
  --pv-panel-2:#0a4a56;
  --pv-line:rgba(255,255,255,.16);
  --pv-line-soft:rgba(255,255,255,.09);
  --pv-txt:#eaf6ee;
  --pv-dim:#a8c9c2;
  /* era #7fa8a2 → 3,68:1 sul petrolio, sotto la soglia AA per testo piccolo.
     #a3c6c0 sale a 4,9:1. Usato per occhielli ed etichette. */
  --pv-dimmer:#a3c6c0;
  --pv-focus:var(--lime);
  --pv-r0:#06414d; --pv-r1:#0a6272; --pv-r2:#2f8f86;
  --pv-r3:#6fae52; --pv-r4:#9ac73c; --pv-r5:#d9ef8f;
  --pv-sp:clamp(14px,2.4vw,26px);

  background:transparent;
  color:var(--pv-txt);
  font-family:var(--sans);
  /* allineato alla scala del sito (17px), non più 15px */
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.pvfc *{box-sizing:border-box}
.pvfc .pv-wrap{max-width:none;margin:0;padding:0}
.pvfc .pv-num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pvfc a{color:var(--pv-focus)}
.pvfc :focus-visible{outline:2px solid var(--pv-focus);outline-offset:2px;border-radius:4px}

/* occhielli: 11px → 12px, e contrasto sistemato via --pv-dimmer */
.pvfc .pv-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pv-dimmer);font-weight:600;
}

/* ── testata ──────────────────────────────────────────── */
.pvfc header{padding:0 0 22px;border-bottom:1px solid var(--pv-line-soft)}
.pvfc .pv-masthead{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.pvfc h1{
  font-family:var(--display);
  font-weight:800;font-size:clamp(34px,6vw,64px);line-height:.95;letter-spacing:-.035em;
  margin:10px 0 0;max-width:14ch;
}
.pvfc h1 em{font-style:normal;color:var(--pv-r4)}
.pvfc .pv-lede{color:var(--pv-dim);max-width:46ch;margin:14px 0 0}

/* ── pannello mappa ───────────────────────────────────── */
.pvfc .pv-board{
  display:grid;grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr);
  gap:clamp(20px,3vw,40px);padding:30px 0 8px;align-items:start;
}
.pvfc .pv-board > *{min-width:0}
.pvfc .pv-mapcard{position:relative;width:100%;max-width:550px;margin-inline:auto}
.pvfc .pv-mapcard svg{width:100%;height:auto;display:block;overflow:visible}
.pvfc .pv-pdot{cursor:pointer;transition:r .12s ease}
.pvfc .pv-pdot:hover{stroke:#fff;stroke-width:1.6}

/* contorni regionali (raggruppamento indicativo delle province) */
.pvfc .pv-reg-outline{
  fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.3);stroke-width:.9;
  stroke-linejoin:round;cursor:default;
  transition:fill .25s ease,stroke .25s ease,stroke-width .25s ease;
}
.pvfc .pv-reg-outline:hover{fill:rgba(154,199,60,.18);stroke:var(--lime);stroke-width:1.6}

@keyframes pv-pop{
  from{opacity:0;transform:scale(.2);transform-origin:center;transform-box:fill-box}
  to{opacity:1}
}
/* I pallini NON si vedono finché la carta non è tutta a schermo: la classe
   .is-visible la mette animaQuandoTuttaVisibile() in sole.js quando
   l'IntersectionObserver segnala che la carta è interamente nel viewport.
   Prima erano già disegnati e mancava solo l'animazione; il cliente li vuole
   proprio assenti fino a quel momento (17 agosto 2026).

   ATTENZIONE: adesso la visibilità dipende dalla CLASSE, non dall'animazione.
   Se togli o rinomini .is-visible la carta resta vuota. Le due reti di
   sicurezza stanno in sole.js: se IntersectionObserver non c'è la classe si
   mette subito, e se la carta è più alta della finestra basta l'85% invece
   del 99% (altrimenti non potrebbe mai essere visibile al 100%). */
.pvfc #map .pv-pdot{opacity:0}
.pvfc #map.is-visible .pv-pdot{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .pvfc #map.is-visible .pv-pdot{animation:pv-pop .5s cubic-bezier(.2,1.4,.4,1) backwards}
}

/* ── giorni ───────────────────────────────────────────── */
.pvfc .pv-days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-bottom:2px;min-width:0}
.pvfc .pv-day{
  width:100%;background:var(--pv-panel);border:1px solid var(--pv-line-soft);border-radius:12px;
  padding:11px 15px;cursor:pointer;text-align:left;color:var(--pv-dim);font:inherit;
  min-width:0;overflow:hidden;
}
.pvfc .pv-day b{
  display:block;color:var(--pv-txt);font-size:15px;font-weight:600;text-transform:capitalize;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pvfc .pv-day span{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--pv-dim)}
.pvfc .pv-day[aria-pressed="true"]{border-color:var(--pv-r4);background:var(--pv-panel-2);color:var(--pv-r4)}
.pvfc .pv-day[aria-pressed="true"] b{color:var(--pv-r4)}

/* ── legenda ──────────────────────────────────────────── */
.pvfc .pv-legend{margin:26px 0 0}
.pvfc .pv-ramp{
  height:9px;border-radius:5px;
  background:linear-gradient(90deg,var(--pv-r0),var(--pv-r1) 22%,var(--pv-r2) 45%,
    var(--pv-r3) 68%,var(--pv-r4) 85%,var(--pv-r5));
}
.pvfc .pv-ramp-ax{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--pv-dimmer)}

/* ── classifiche ──────────────────────────────────────── */
.pvfc .pv-ranks{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
/* erano 10px maiuscoletto: un <h3> da 10px accanto ai <h3> da 20px del
   resto del sito era una rottura della scala tipografica. */
.pvfc .pv-ranks h3{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pv-dimmer);margin:0 0 10px;font-weight:600;
}
.pvfc .pv-ranks ol{list-style:none;margin:0;padding:0}
.pvfc .pv-ranks li{
  display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--pv-line-soft);font-size:14px;
}
.pvfc .pv-ranks li:last-child{border-bottom:0}
.pvfc .pv-ranks .pv-v{font-family:var(--mono);color:var(--pv-dim)}

/* ── dettaglio provincia (finestra modale) ────────────── */
.pvfc dialog{
  border:1px solid var(--pv-line);background:var(--pv-panel);color:var(--pv-txt);border-radius:18px;
  padding:0;max-width:620px;width:calc(100% - 32px);
}
.pvfc dialog::backdrop{background:rgba(0,35,42,.82);backdrop-filter:blur(3px)}
.pvfc .pv-dl-head{padding:22px 24px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pvfc .pv-dl-head h2{font-family:var(--display);font-weight:700;font-size:26px;margin:6px 0 0;letter-spacing:-.02em}
.pvfc .pv-dl-body{padding:18px 24px 24px}
.pvfc .pv-dl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;margin:0 0 18px}
.pvfc .pv-dl-stats div span{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pv-dimmer);margin-bottom:3px;
}
.pvfc .pv-dl-stats div b{font-family:var(--mono);font-weight:500;font-size:19px}
.pvfc .pv-chart{width:100%;height:auto;display:block}
.pvfc .pv-close{background:transparent;border:0;color:var(--pv-dim);font-size:24px;line-height:1;cursor:pointer;padding:4px 6px}
.pvfc .pv-close:hover{color:var(--pv-txt)}

/* ── nota metodologica ────────────────────────────────── */
.pvfc .pv-notes-link{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--pv-line-soft)}
.pvfc .pv-linkish{
  background:none;border:0;padding:0;cursor:pointer;color:#b6de5c;font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;font-family:var(--sans);
}
.pvfc .pv-linkish:hover{color:#fff}
.pvfc .pv-metodo p{margin:0 0 12px;font-size:14px;color:var(--pv-dim);line-height:1.6}
.pvfc .pv-metodo p:last-child{margin-bottom:0}
.pvfc .pv-metodo a{color:#b6de5c}

/* ── stati: errore e caricamento ──────────────────────── */
.pvfc .pv-note{
  border:1px solid var(--pv-line);background:var(--pv-panel);border-radius:14px;
  padding:20px 22px;margin:28px 0 0;color:var(--pv-dim);
}
.pvfc .pv-note b{color:var(--pv-txt);display:block;margin-bottom:6px;font-size:16px}
.pvfc .pv-note .pv-retry{
  margin-top:14px;background:transparent;border:1px solid var(--pv-line);color:var(--pv-txt);
  font:inherit;font-size:14px;padding:8px 18px;border-radius:999px;cursor:pointer;
}
.pvfc .pv-note .pv-retry:hover{border-color:var(--pv-focus);color:var(--pv-focus)}

/* senza dati resta solo il messaggio: mappa vuota, legenda e titoli di
   classifica senza righe sotto farebbero sembrare la pagina rotta */
.pvfc.is-empty .pv-board{display:none}
.pvfc.is-empty .pv-note{margin-bottom:8px}

/* Scheletro di caricamento: la sezione non deve restare una banda
   petrolio vuota mentre arrivano i dati da Open-Meteo. */
.pvfc .pv-skeleton{
  border-radius:8px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.05) 100%);
  background-size:300% 100%;
}
@keyframes pv-shimmer{from{background-position:150% 0}to{background-position:-150% 0}}
@media (prefers-reduced-motion:no-preference){
  .pvfc .pv-skeleton{animation:pv-shimmer 1.6s linear infinite}
}
.pvfc .pv-sk-map{width:100%;aspect-ratio:380/452;max-width:550px;margin-inline:auto;border-radius:16px}
.pvfc .pv-sk-day{height:61px;border-radius:12px}
.pvfc .pv-sk-row{height:16px;margin:11px 0}
.pvfc .pv-sk-row:nth-child(2){width:88%}
.pvfc .pv-sk-row:nth-child(3){width:76%}
.pvfc .pv-sk-row:nth-child(4){width:83%}
.pvfc .pv-sk-row:nth-child(5){width:70%}
.pvfc .pv-sk-row:nth-child(6){width:79%}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:860px){
  .pvfc .pv-board{grid-template-columns:1fr}
  .pvfc .pv-ranks{grid-template-columns:1fr}
}
@media (min-width:861px){
  /* La mappa non detta più l'altezza della riga con un padding-top
     fisso di 126px: quel numero magico apriva un buco visibile in mezzo
     alla sezione e dipendeva dall'altezza della colonna destra, che a
     sua volta dipende dai dati. Ora entrambe le colonne sono ancorate
     in alto e la mappa ha altezza automatica. */
  .pvfc .pv-board{grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);align-items:start}
  .pvfc .pv-mapcard{max-width:none;margin-inline:0}
}
@media (max-width:430px){
  .pvfc .pv-days{gap:6px}
  .pvfc .pv-day{padding:9px 6px;text-align:center}
  .pvfc .pv-day b{font-size:12.5px}
  .pvfc .pv-day span{font-size:13px}
}
@media (max-width:360px){
  .pvfc .pv-day{padding:9px 4px}
  .pvfc .pv-day b{font-size:11px;letter-spacing:-.01em}
  .pvfc .pv-day span{font-size:12px}
}