/* ==========================================================================
   Ossola Wine Climate — frontend styles
   Le variabili puntano prima alle CSS custom properties del tema attivo
   (generate da theme.json / Site Editor: --wp--preset--color--...,
   --wp--preset--font-family--...) e solo se il tema non le definisce
   cadono sui valori di default del plugin. Cosi' il widget eredita la
   palette/i font del tema invece di imporne uno proprio.
   ========================================================================== */

.owc{
  --w:var(--wp--preset--color--primary,var(--wp--preset--color--contrast,#741b32));
  --ink:var(--wp--preset--color--contrast,#182027);
  --muted:var(--wp--preset--color--secondary,#687078);
  --line:var(--wp--preset--color--tertiary,#e8e3dc);
  --surface:var(--wp--preset--color--base,#fff);
  --tint:var(--wp--preset--color--tertiary,#f4eee8);
  --font-body:var(--wp--preset--font-family--body,Inter,system-ui,sans-serif);
  --font-heading:var(--wp--preset--font-family--heading,var(--font-body));
  color:var(--ink);
  font-family:var(--font-body);
}
.owc *{box-sizing:border-box}

/* Hero: sfondo scuro dedicato -> il testo DEVE restare bianco a prescindere
   dalle regole del tema (es. ".entry-content h2{color:...}" ha specificita'
   piu' alta della nostra ".owc-hero h2" e vinceva, rendendo il testo
   invisibile). Da qui gli !important, mirati solo a questo componente e
   necessari per garantire il contrasto qualunque sia il tema attivo. */
.owc-hero{
  position:relative;padding:42px;border-radius:18px;
  background:linear-gradient(120deg,var(--wp--preset--color--contrast,#172128),var(--wp--preset--color--primary,#4c5a54));
  color:#fff;
}
.owc-hero,
.owc-hero h2,
.owc-hero p,
.owc-hero small{color:#fff!important}
.owc-hero h2{font-family:var(--font-heading);font-size:42px;font-weight:700;margin:8px 0}
.owc-hero p{max-width:700px;font-family:var(--font-body)}
.owc-mode-toggle{position:absolute;top:20px;right:20px;background:#fff2;border:1px solid #ffffff55;color:#fff!important;padding:8px 14px;border-radius:99px;font-size:12px;cursor:pointer}
.owc-mode-toggle:hover{background:#fff3}

.owc-controls{margin:-24px 20px 0;background:var(--surface);padding:15px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;position:relative}
.owc label{display:block;font-size:11px;text-transform:uppercase;color:var(--muted)}
.owc select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-family:var(--font-body)}

.owc-title{display:flex;justify-content:space-between;align-items:end;margin:28px 0 10px}
.owc-title h3{font-family:var(--font-heading);font-size:28px;font-weight:700;margin:0}
.owc-title span{color:var(--muted);font-size:13px}

.owc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.owc-card,.owc-kpi,.owc-index{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.owc-kpi small,.owc-index small{color:var(--muted)}
.owc-big{font-size:27px;margin:6px 0}
.owc-delta{font-size:12px;color:var(--w)}

.owc-grid{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin-top:12px}
.owc-summary{background:var(--tint)}
.owc-summary h4{font-family:var(--font-heading);font-size:25px;font-weight:700;margin:10px 0}
.owc-summary p{line-height:1.6}
.owc-badge{display:inline-block;background:var(--surface);color:var(--w);padding:6px 9px;border-radius:99px;font-size:11px;font-weight:700}

.owc-indices{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.owc-index b{display:block;font-size:20px;margin:6px 0}
.owc canvas{max-height:300px}
.owc-compare-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.owc table{width:100%;border-collapse:collapse;margin-top:14px}
.owc th,.owc td{text-align:left;padding:9px;border-bottom:1px solid var(--line);font-size:13px}

.owc.owc-mode-simple .owc-tech-only{display:none}

.owc-timeline{display:flex;gap:2px;margin:16px 0 4px;overflow-x:auto;padding-bottom:4px}
.owc-timeline-cell{flex:0 0 auto;width:20px;height:38px;border-radius:4px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;font-size:9px;color:#fff;padding-bottom:2px;opacity:.85}
.owc-timeline-cell:hover,.owc-timeline-cell.active{opacity:1;outline:2px solid var(--w)}

.owc-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.owc-phase{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.owc-phase b{display:block;font-size:20px;margin:6px 0}

.owc-records{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.owc-record-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.owc-record-card b{display:block;font-size:16px;color:var(--w)}

.owc-similar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.owc-similar-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.owc-similar-card .owc-sim-pct{font-size:26px;font-weight:700;color:var(--w)}

.owc-station-picker{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.owc-station-picker label{background:var(--surface);border:1px solid var(--line);padding:8px 12px;border-radius:8px;font-size:13px;cursor:pointer}
.owc-station-compare table{width:100%}
.owc-rain-advanced ul,.owc-events ul{margin:8px 0 0 18px;line-height:1.7}

.owc-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.owc-actions button{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;color:var(--ink);font-family:var(--font-body)}
.owc-actions button:hover{background:var(--tint)}
.owc-map{background:#eee;border:1px solid var(--line)}
.owc-methodology ul{margin:10px 0 0 18px;line-height:1.7}
.owc-methodology .description{color:var(--muted);font-size:12px;margin-top:10px}

@media(max-width:800px){
  .owc-controls,.owc-grid,.owc-compare-selects{grid-template-columns:1fr}
  .owc-kpis{grid-template-columns:repeat(2,1fr)}
  .owc-indices{grid-template-columns:repeat(2,1fr)}
  .owc-hero h2{font-size:32px}
  .owc-phases,.owc-similar{grid-template-columns:1fr 1fr}
  .owc-records{grid-template-columns:1fr}
}