/* Wandroz — shared design system
   Loaded on every page (linked from each template's <head>) so brand
   colors, spacing, type scale and component styles (cards, badges,
   buttons, header) stay in one place instead of duplicated per-template.
   Page-specific layout (map sizing, sidebar widths, etc.) stays inline in
   each template's own <style> block and reads these custom properties. */

:root{
  /* Brand */
  --navy:#0c1d39;
  --ink:#0c1d39;
  --muted:#5b6270;
  --muted-soft:#8890a0;
  --panel:#ffffff;
  --bg:#f4f6f8;
  --line:#e5e8ee;
  --accent:#147a65;
  --accent-bright:#1fa987;
  --accent-bg:#e7f5f1;

  /* Safety tones (meaningful — not brand color, don't repurpose) */
  --green:#2e7d46;   --green-bg:#e6f4ea;
  --yellow:#c98a02;  --yellow-bg:#fdf3d9;
  --red:#c0392b;     --red-bg:#fbe4e1;
  --grey:#7a8190;    --grey-bg:#e9eaed;

  /* Spacing scale */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:28px; --sp-7:40px; --sp-8:56px;

  /* Radius + shadow */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(12,29,57,0.06), 0 1px 1px rgba(12,29,57,0.04);
  --shadow-md:0 4px 14px rgba(12,29,57,0.08), 0 1px 3px rgba(12,29,57,0.06);
  --shadow-lift:0 10px 24px rgba(12,29,57,0.12), 0 2px 6px rgba(12,29,57,0.06);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3 { font-family: var(--font); letter-spacing:-0.01em; color: var(--navy); }

a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Site header (shared shell used by _base.html, city_map.html, neighbourhood.html) */
.wz-header {
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  position: sticky; top:0; z-index: 30;
  /* L'ombra non e' decorazione: e' quello che fa leggere la barra come un
     piano sopra la pagina invece che come un taglio netto nel titolo. Con il
     solo bordo inferiore, il testo che ci passa sotto sembra tranciato. */
  box-shadow: 0 1px 0 var(--line), 0 4px 14px rgba(12,29,57,.06);
}
/* Quanto e' alta la barra dipende dal gradino tipografico, quindi non si puo'
   scrivere qui: la misura JS e la mette in --hdr, e tutto quello che si
   congela sotto di lei ci si aggancia. Cosi' il blocco fisso e' uno solo. */
/* Leaflet non dichiara uno z-index su .leaflet-container, quindi il contenitore
   NON crea un contesto di impilamento e i suoi pannelli interni — z-index 400
   per le mappe, 1000 per i controlli — competono direttamente con il resto
   della pagina. L'header sticky sta a 30, quindi su mobile, scorrendo, la
   mappa gli saliva sopra e si leggeva "day night Home Methodology" attraverso
   le tile. Dare z-index 0 al contenitore chiude tutto quel mondo dentro il suo
   contesto: dentro resta l'ordine di Leaflet, fuori la mappa vale 0 e passa
   sotto a qualunque cosa sia sopra. */
.leaflet-container { z-index: 0; }

.wz-brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.wz-brand:hover { text-decoration:none; }
.wz-logo { border-radius:10px; display:block; object-fit:cover; flex-shrink:0; box-shadow: var(--shadow-sm); }
.wz-brand .wz-name { font-size:17px; margin:0; color:var(--navy); font-weight:700; letter-spacing:-0.01em; }
.wz-brand .wz-tagline { margin:0; font-size:12px; color:var(--muted); }
.wz-nav a { color:var(--muted); text-decoration:none; font-size:13.5px; margin-left:22px; font-weight:500; transition: color .15s; }
.wz-nav a:hover { color: var(--accent); text-decoration:none; }

/* Cards */
.card, .wz-card {
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom:14px;
  box-shadow: var(--shadow-sm);
}

/* Badges / pills */
.badge { display:inline-block; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:0.01em; }
.badge.good, .badge.green { background: var(--green-bg); color: var(--green); }
.badge.mid, .badge.yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge.caution, .badge.red { background: var(--red-bg); color: var(--red); }
.badge.grey { background: var(--grey-bg); color: var(--muted); }

/* Buttons */
.btn-primary {
  display:inline-block; background: var(--navy); color:#fff; text-decoration:none;
  padding:12px 20px; border-radius: var(--radius-sm); font-size:14.5px; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { text-decoration:none; transform: translateY(-1px); box-shadow: var(--shadow-md); background:#122644; }
.btn-secondary {
  display:inline-block; background: var(--accent); color:#fff; text-decoration:none;
  padding:12px 20px; border-radius: var(--radius-sm); font-size:14.5px; font-weight:600;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-secondary:hover { text-decoration:none; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Notes / callouts */
.note {
  font-size: 13.5px; color:#6b5a10; background:#fff9e8; border:1px solid #f1dfa3;
  border-radius: var(--radius-sm); padding:14px 16px; margin: 20px 0;
}

footer.wz-footer {
  text-align:center; font-size:12px; color:var(--muted);
  padding: 28px 20px; margin-top: 40px;
  background: var(--panel); border-top:1px solid var(--line);
}
footer.wz-footer a { color: var(--muted); }

/* Scroll-reveal-free subtle transition helpers */
.hover-lift { transition: transform .15s ease, box-shadow .15s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* ---------------------------------------------------------------------------
   Scala tipografica per schermi grandi.
   La scala di base e' tarata sul telefono, dove riempie i 375px che ci sono.
   Su un laptop la stessa scala si legge minuta, e su una finestra molto larga
   — monitor grande, o browser rimpicciolito, che dal lato CSS sono la stessa
   cosa — di piu' ancora. Quindi cresce a gradini, e il telefono resta com'e'.
--------------------------------------------------------------------------- */
@media (min-width: 721px){
  /* Il logo ha width/height nell'HTML, quindi qui serve !important per
     scavalcarli: senza, il marchio resta a 34px mentre tutto intorno cresce. */
  .wz-logo { width:59px !important; height:59px !important; border-radius:16px; }
  .wz-brand { gap:15px; }
  .wz-brand .wz-name { font-size:26.5px; }
  .wz-brand .wz-tagline { font-size:15px; }
  .wz-nav a { font-size:21px; margin-left:28px; }
  .badge { font-size:13.5px; padding:5px 14px; }
  .btn-primary, .btn-secondary { font-size:16px; padding:13px 22px; }
  .note { font-size:15px; }
  footer.wz-footer { font-size:13.5px; }
}
@media (min-width: 1800px){
  .wz-logo { width:70px !important; height:70px !important; border-radius:18px; }
  .wz-brand { gap:17px; }
  .wz-brand .wz-name { font-size:29.5px; }
  .wz-brand .wz-tagline { font-size:17px; }
  .wz-nav a { font-size:23px; }
  .badge { font-size:15px; padding:6px 16px; }
  .btn-primary, .btn-secondary { font-size:17.5px; }
  .note { font-size:16.5px; }
  footer.wz-footer { font-size:15px; }
}
@media (min-width: 2400px){
  .wz-logo { width:81px !important; height:81px !important; border-radius:20px; }
  .wz-brand .wz-name { font-size:33.5px; }
  .wz-brand .wz-tagline { font-size:19px; }
  .wz-nav a { font-size:26px; }
  footer.wz-footer { font-size:16.5px; }
}

/* Corpo dei testi lunghi (metodologia, about, privacy). Era scritto inline sui
   singoli paragrafi, dove nessuna media query poteva arrivarci: lo stile inline
   vince sempre, quindi quelle pagine restavano alla misura del telefono su
   qualunque schermo. Ora e' una classe, e cresce come il resto. */
.mbody { font-size:13.5px; color:var(--muted); line-height:1.6; }
@media (min-width: 721px){
  .mbody { font-size:16px; line-height:1.65; }
}
@media (min-width: 1800px){
  .mbody { font-size:19px; }
}
@media (min-width: 2400px){
  .mbody { font-size:21px; }
}

/* ---------------------------------------------------------------------------
   Wandy and the hidden gem.

   One place per city, chosen by a person. Everything else on this site is
   computed, so this card is the only warm thing on the page: a character
   instead of a badge, and a teal rule down the left instead of a full border.
   It must not be mistakable for a rating, so it borrows none of the rating
   colours.

   The layout is a grid, not a column, because the card is as wide as the hub
   and a single capped column left two thirds of it empty — the text huddled on
   the left at footnote size while the box stretched to 1,500px. Capping the
   line length was right; doing it without giving the rest of the width a job
   was not.

   So: Wandy, then the place, then the disclosure in its own column. The
   disclosure earns that column. It is a different kind of statement from the
   rest of the card — the one sentence here that must not read as small print —
   and standing it beside the recommendation rather than under it is the
   clearest way to say so.
   --------------------------------------------------------------------------- */
.gem{
  display:grid; gap:28px; align-items:start;
  grid-template-columns:auto minmax(0,1.6fr) minmax(260px,1fr);
  margin:28px 0; padding:28px 30px;
  background:var(--panel);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius-md);
}
.gem-figure{width:112px; text-align:center}
.gem-figure .wandy{width:112px; height:auto; display:block; margin:0 auto}
.gem-name{
  display:block; margin-top:10px; font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.gem-body{min-width:0}
.gem-kicker{
  margin:0 0 10px; font-size:13.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.gem-title{margin:0 0 8px; font-size:34px; line-height:1.15; color:var(--ink)}
.gem-title a{color:inherit; text-decoration:none; border-bottom:2px solid #c3e2d9}
.gem-title a:hover{border-bottom-color:var(--accent-bright)}
.gem-meta{margin:0 0 16px; font-size:16.5px; line-height:1.5; color:var(--muted)}
.gem-meta span+span:before{content:" · "; color:var(--muted-soft)}
.gem-quote{margin:0 0 14px; font-size:20px; line-height:1.5; color:var(--ink)}
.gem-blurb{margin:0 0 18px; font-size:17px; line-height:1.6; color:var(--muted)}
.gem-link{
  display:inline-block; font-size:17px; font-weight:600;
  color:var(--accent); text-decoration:none;
}
.gem-link:hover{text-decoration:underline}
.gem-link:after{content:" \2197"}
/* On the hub the link stays inside the site, so no outbound arrow. */
.gem-hub .gem-link:after{content:" \2192"}
.gem-note{
  margin:0; padding:18px 20px;
  background:var(--accent-bg); border-radius:var(--radius-sm);
  font-size:15px; line-height:1.6; color:var(--ink);
}

/* Below 1080px the disclosure drops under the place rather than beside it, and
   keeps its own capped measure so it never runs the full width of the card. */
@media (max-width:1080px){
  .gem{grid-template-columns:auto minmax(0,1fr); gap:22px}
  .gem-note{grid-column:1 / -1; max-width:78ch}
}
@media (max-width:640px){
  .gem{grid-template-columns:1fr; gap:16px; padding:22px}
  .gem-figure{width:72px; text-align:left}
  .gem-figure .wandy{width:72px; margin:0}
  .gem-title{font-size:26px}
  .gem-quote{font-size:17.5px}
  .gem-blurb{font-size:16px}
  .gem-meta{font-size:15px}
}

/* Wandy herself. Two dots, a thin mouth, one sparkle. The blush, the eye
   highlights and the float that were here read as a mascot on a site that
   publishes police statistics; restraint is the whole point of the mark. */
.wandy-body{fill:url(#wandy-body)}
.wandy-face{fill:#fff}
.wandy-eye{fill:var(--navy)}
.wandy-lid{fill:none; stroke:var(--navy); stroke-width:2.8; stroke-linecap:round; opacity:0}
.wandy-smile{fill:none; stroke:var(--navy); stroke-width:2.4; stroke-linecap:round}
/* The sparkle is the only mark that sits OUTSIDE the pin, so it is the only
   one that has to survive whatever is behind it. In accent teal it was the
   pin's own colour an inch away from the pin and simply vanished. Navy ties it
   to the eyes and the mouth instead, which leaves the whole mark on two
   colours: teal body, navy features. On a dark ground it flips to the face
   white, for the same reason. */
.wandy-sparkle{fill:var(--navy)}
.wandy-on-dark .wandy-sparkle,
.wandy-dark .wandy-sparkle{fill:#fff; opacity:.9}

/* Both eyes open at rest; the right one winks for a beat every six seconds.
   The closing eye and the lid arc share one timeline so they swap without
   overlapping, and nine tenths of the loop is the resting state. */
.wandy-eye-r{transform-box:fill-box; transform-origin:center;
             animation:wandy-shut 6s ease-in-out infinite}
.wandy-lid{animation:wandy-lid 6s ease-in-out infinite}
@keyframes wandy-shut{
  0%,88%,100%{transform:scaleY(1)}
  91%,95%{transform:scaleY(0)}
}
@keyframes wandy-lid{
  0%,89%,100%{opacity:0}
  91%,95%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .wandy-eye-r,.wandy-lid{animation:none}
}
