/*
Theme Name: W Collodi
Theme URI: https://example.com/w-collodi
Author: Marcynkus
Author URI: https://example.com
Description: Tema WordPress custom ispirato a collodi.com. Accessibile, mobile-first, WooCommerce-ready.
Version: 1.0.0
Requires PHP: 7.2
Requires at least: 6.0
Tested up to: 6.6
Text Domain: w-collodi
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, blog, e-commerce, custom-colors, custom-logo, custom-menu, featured-images
*/
:root{
  --wc-primary:#1fbf91;
  --wc-accent:#ffd166;
  --wc-bg:#0b1021;
  --wc-bg-soft:#131a36;
  --wc-text:#e9ecf1;
  --wc-muted:#b9c1d6;
  --wc-border:rgba(255,255,255,.12);
  --wc-radius:16px;
}
body.wcold-body{
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  line-height: 1.55;
}
a{color:var(--wc-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:8px}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.wcold-header{background:rgba(11,16,33,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--wc-border);position:sticky;top:0;z-index:50}
.wcold-header .bar{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px 0}
.wcold-logo{display:flex;align-items:center;gap:12px}
.wcold-logo img{width:40px;height:40px;border-radius:50%}
.wcold-brand{font-weight:800;letter-spacing:.4px}
.wcold-nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.wcold-search{display:flex;align-items:center;gap:8px}
.wcold-search input{background:var(--wc-bg-soft);border:1px solid var(--wc-border);color:var(--wc-text);padding:8px 10px;border-radius:10px;min-width:200px}
#wcold-preloader{position:fixed;inset:0;background:radial-gradient(1000px 400px at -10% -10%,rgba(31,191,145,.25),transparent 50%),var(--wc-bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s ease; }
#wcold-preloader.hidden{opacity:0;pointer-events:none}
.wcold-spinner{width:64px;height:64px;border-radius:50%;border:6px solid rgba(255,255,255,.15);border-top-color:var(--wc-primary);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wcold-footer{background:#0a0f20;border-top:1px solid var(--wc-border);margin-top:40px}
.wcold-footer .widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding:30px 0}
.wcold-footer .footbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:12px 0;color:var(--wc-muted);border-top:1px solid var(--wc-border)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid-2,.grid-3{grid-template-columns:1fr} }
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--wc-border);background:var(--wc-bg-soft);color:var(--wc-text);cursor:pointer}
.btn.primary{background:var(--wc-primary);color:#08131a;border-color:transparent}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--wc-border);border-radius:var(--wc-radius);padding:16px}
.hero{position:relative;padding:40px 0 24px;overflow:hidden}
.hero .bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(1000px 400px at 0% -10%, rgba(31,191,145,.25), transparent 55%), radial-gradient(800px 500px at 120% -20%, rgba(255,209,102,.14), transparent 60%);filter:blur(40px)}
.hero .content{position:relative}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.woocommerce .products .product{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid var(--wc-border);border-radius:12px;padding:12px}
.woocommerce div.product .summary .button{background:var(--wc-primary)!important;color:#08131a!important;border-radius:10px;padding:.6rem 1rem}
a:focus, button:focus, input:focus{outline:2px dashed var(--wc-accent);outline-offset:2px}

/* ===== NAV Moderno Collodi ===== */
:root{
  --hdr-h: 68px;
  --gap: 16px;
  --rad: 14px;
  --shadow: 0 8px 30px rgba(0,0,0,.08);
  --bg: #0b1220;
  --bg-2: #10192e;
  --txt: #e2e8f0;
  --muted:#94a3b8;
  --acc:#86efac;
}
.wcold-header{
  position: sticky; top:0; z-index:1000;
  background: rgba(11,18,32,.75);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(148,163,184,.12);
}
body.admin-bar .wcold-header{ top: 32px; }
.wcold-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--hdr-h);
  gap: var(--gap);
}
.wcold-logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--txt);}
.wcold-brand{font-weight:700; letter-spacing:.2px}

/* Hamburger */
.wcold-nav-toggle{
  display:inline-flex; flex-direction:column; gap:4px; padding:10px;
  border:0; background:transparent; cursor:pointer;
}
.wcold-burger{width:24px; height:2px; background:var(--txt); display:block; border-radius:2px;}

/* Nav panel */
.wcold-nav-panel{
  display:flex; align-items:center; gap:24px;
}
.wcold-nav-extras form.search-form{ margin:0; }

/* Menu base */
.wcold-nav .menu{
  display:flex; align-items:center; gap:18px; list-style:none; margin:0; padding:0;
}
.wcold-nav .menu > li{
  position:relative;
}
.wcold-nav .menu > li > a{
  display:inline-flex; align-items:center; padding:10px 8px;
  color:var(--txt); text-decoration:none; font-weight:600;
}
.wcold-nav .menu > li > a:hover{ color: var(--acc); }

/* Dropdown desktop: overlay (non spinge l'header) */
.wcold-nav .menu > li .sub-menu{
  position:absolute; left:0; top:100%;
  min-width: 220px; background: var(--bg-2);
  border:1px solid rgba(148,163,184,.18);
  border-radius: var(--rad);
  box-shadow: var(--shadow);
  padding:8px; list-style:none; display:none; z-index: 1001;
}
.wcold-nav .menu > li:hover > .sub-menu,
.wcold-nav .menu > li:focus-within > .sub-menu{
  display:block;
}
.wcold-nav .sub-menu li a{
  display:block; padding:10px 12px; border-radius:10px; color:var(--txt); text-decoration:none;
}
.wcold-nav .sub-menu li a:hover{ background: rgba(255,255,255,.06); }

/* ===== Mobile ===== */
@media (max-width: 960px){
  .wcold-nav-toggle{ display:inline-flex; }
  .wcold-nav-panel{
    position: fixed; inset: 0 0 0 auto; width: min(86vw, 420px);
    background: var(--bg); color: var(--txt);
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 18px; border-left:1px solid rgba(148,163,184,.15);
    transform: translateX(100%); transition: transform .28s ease;
  }
  .wcold-nav-panel.is-open{ transform: translateX(0); }
  .wcold-nav-backdrop{
    position: fixed; inset:0; background: rgba(0,0,0,.4);
  }

  .wcold-nav .menu{
    flex-direction: column; align-items: stretch; gap: 4px;
  }
  .wcold-nav .menu > li > a{
    padding: 12px 10px; border-radius: 12px; background: transparent;
  }

  /* Sottomenu mobile: collassabili (non overlay) */
  .wcold-nav .menu > li .sub-menu{
    position: static; display: none; padding: 6px 8px; margin: 4px 0 8px; border-radius: 12px;
    background: rgba(255,255,255,.04); border:1px solid rgba(148,163,184,.12);
  }
  .wcold-nav .menu > li.is-open > .sub-menu{ display:block; }

  /* Pulsante per aprire i sottomenu su mobile */
  .wcold-subtoggle{
    margin-left: 6px; border:0; background:transparent; color:var(--muted); cursor:pointer;
    width: 28px; height: 28px; border-radius: 8px;
  }
  .wcold-subtoggle:focus{ outline: 2px solid rgba(134,239,172,.6); outline-offset: 2px; }
}

/* Backdrop hidden helper */
.wcold-nav-backdrop[hidden]{ display:none; }
.wcold-nav-panel[hidden]{ display:none; }

/* Piccole rifiniture */
.wcold-nav .menu .current-menu-item > a{ color: var(--acc); }
/* === FIX: dropdown overlay desktop (non spingono il menu) === */
.wcold-header .wcold-nav .menu,
.wcold-header .wcold-nav .menu > li{ position:relative; }

.wcold-header .wcold-nav .menu > li > .sub-menu{
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 10px) !important;
  min-width: 220px;
  background: #10192e;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.16);
  z-index: 2000;

  /* niente “spinta” layout */
  display: none !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}

/* apertura su hover/focus */
.wcold-header .wcold-nav .menu > li:hover > .sub-menu,
.wcold-header .wcold-nav .menu > li:focus-within > .sub-menu{
  display: block !important;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* link del dropdown */
.wcold-header .wcold-nav .sub-menu li a{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
}
.wcold-header .wcold-nav .sub-menu li a:hover{
  background: rgba(255,255,255,.06);
}

/* Nascondi il bottoncino ▾ dei sottomenu su desktop */
.wcold-header .wcold-subtoggle{ display:none; }

/* === Mobile: sottomenu collassabili (non overlay) === */
@media (max-width:960px){
  .wcold-header .wcold-subtoggle{ display:inline-flex; }

  .wcold-header .wcold-nav .menu > li > .sub-menu{
    position: static !important;
    left:auto !important; top:auto !important;
    min-width: 0; box-shadow:none;
    margin: 4px 0 8px;
    /* chiuso di default */
    display: none !important;
    visibility: visible; opacity: 1; transform:none; transition:none;
  }
  .wcold-header .wcold-nav .menu > li.is-open > .sub-menu{
    display: block !important;
  }
}

/* Piccolo aiuto di layout (desktop): nav + search allineati */
.wcold-header .wcold-nav-panel{ display:flex; align-items:center; gap:20px; }
.wcold-header .wcold-nav .menu{ display:flex; align-items:center; gap:18px; margin:0; padding:0; list-style:none; }
/* 1) Niente gap tra voce e dropdown */
.wcold-header .wcold-nav .menu > li > .sub-menu{
  top: 100% !important;          /* prima era calc(100% + 10px) */
  margin-top: 0 !important;
  /* overlay + animazione morbida */
  position: absolute !important;
  display: none !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index: 10000;                /* sopra tutto */
}

/* 2) Mostra il dropdown su hover/focus senza spostare il menu */
.wcold-header .wcold-nav .menu > li:hover > .sub-menu,
.wcold-header .wcold-nav .menu > li:focus-within > .sub-menu{
  display: block !important;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* 3) “Ponte” invisibile per evitare che si chiuda mentre scendi col mouse */
.wcold-header .wcold-nav .menu > li{
  position: relative;
  --bridge: 10px;
}
.wcold-header .wcold-nav .menu > li::after{
  content:"";
  position:absolute; left:0; right:0; top:100%;
  height: var(--bridge); /* area invisibile cliccabile tra voce e submenu */
}

/* 4) Evita clipping e problemi di stacking */
.wcold-header,
.wcold-header .bar,
.wcold-header .wcold-nav{ overflow: visible !important; }
.wcold-header{ z-index: 9999; }

/* 5) Mobile: resta collassabile */
@media (max-width:960px){
  .wcold-header .wcold-nav .menu > li > .sub-menu{
    position: static !important; display:none !important;
    visibility: visible; opacity:1; transform:none; transition:none;
  }
  .wcold-header .wcold-nav .menu > li.is-open > .sub-menu{ display:block !important; }
  /* === W-Collodi: fix off-canvas mobile da SINISTRA === */

/* Header sopra a tutto */
.wcold-header{position:sticky;top:0;z-index:1000}

/* Pannello mobile (chiuso di default) */
#wcold-nav-panel{
  position:fixed;
  inset:0 auto 0 0;              /* attaccato a SINISTRA */
  width:min(88vw, 360px);
  height:100dvh;
  transform:translateX(-100%);   /* fuori a sinistra */
  transition:transform .28s ease;
  background:#0b1220;            /* SOLIDO: cambia se vuoi chiaro (#ffffff) */
  color:#e2e8f0;
  box-shadow: 2px 0 24px rgba(0,0,0,.28);
  z-index:10000;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Stato aperto */
#wcold-nav-panel.is-open{ transform:translateX(0) }

/* Menu verticale leggibile su mobile */
#wcold-nav-panel .wcold-nav .menu{
  list-style:none;margin:0;padding:18px 16px;
  display:flex;flex-direction:column;gap:6px;
}
#wcold-nav-panel .wcold-nav .menu > li > a{
  display:block; padding:12px 10px; border-radius:10px;
  text-decoration:none;
  color:inherit;
}
#wcold-nav-panel .wcold-nav .menu > li > a:hover{
  background:rgba(255,255,255,.06)
}

/* Submenu mobile: apri/chiudi con la classe is-open aggiunta dallo script */
#wcold-nav-panel .menu .sub-menu{ 
  display:none; padding-left:12px; margin:6px 0 0;
}
#wcold-nav-panel .menu-item-has-children.is-open > .sub-menu{ display:block }

/* Bottone caret per i figli (già creato dallo script) */
.wcold-subtoggle{
  margin-left:8px; border:0; background:transparent; color:currentColor;
  font-size:18px; line-height:1; cursor:pointer;
}

/* Backdrop scuro dietro al pannello */
.wcold-nav-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.45);   /* scurisce lo sfondo */
  opacity:0; transition:opacity .2s ease;
}
.wcold-nav-backdrop[hidden]{ display:none }
.wcold-nav-backdrop:not([hidden]){ opacity:1 }

/* Nascondi il toggle su desktop e ripristina nav inline */
@media (min-width:961px){
  .wcold-nav-toggle{ display:none }
  #wcold-nav-panel{
    position:static; inset:auto; height:auto; width:auto;
    transform:none; background:transparent; box-shadow:none; 
    z-index:auto; overflow:visible;
  }
  .wcold-nav-backdrop{ display:none !important }
  .wcold-nav .menu{ 
    padding:0; flex-direction:row; gap:16px;
  }
  .wcold-nav .menu > li{ position:relative }
  .wcold-nav .menu .sub-menu{
    position:absolute; left:0; top:100%;
    background:#ffffff; color:#0b1220; display:none;
    min-width:220px; padding:10px; border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
  }
  .wcold-nav .menu > li:hover > .sub-menu{ display:block }
}
/***** Collodi – Borghi, Colline e Giardini: Stili Globali v2.0 *****/

/* Stili per la mappa Leaflet */
.bcg-map {
    height: 64vh;
    min-height: 400px; /* Aumentato per una migliore usabilità su schermi piccoli */
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,.1);
    background-color: #f0f2f5; /* Aggiunto un colore di sfondo per il caricamento */
}

/* Stili per il cloud di categorie */
.bcg-catcloud {
    list-style: none;
    margin: 1.25rem 0 0; /* Unità rem per coerenza */
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.bcg-catcloud a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px; /* Aumentato leggermente per più respiro */
    border-radius: 999px;
    background: rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.08);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease; /* Transizione per hover */
}
.bcg-catcloud a:hover {
    background: rgba(0,0,0,.08);
    transform: translateY(-2px); /* Effetto "lift" al passaggio del mouse */
}
.bcg-catcloud .count {
    font-size: .8rem;
    opacity: .8;
}

/* Helper per l'intestazione delle sezioni */
.bcg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap; /* Permette al layout di andare a capo su schermi piccoli */
    gap: 12px;
    margin-bottom: 1.25rem;
}
.bcg-more {
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap; /* Evita che il link vada a capo */
}