/* ==========================================================================
   PIANTE.IT — RESTYLE SEZIONE "VIVAI E FIORAI" (Sabai Directory)
   Caricato SOLO su /vivai-fiorai/ (vedi lib/directory-page.php).

   v2 — selettori corretti confrontando il sorgente reale della pagina
   (Ctrl+U su /vivai-fiorai/), stessa verifica gia' fatta per il forum.
   Differenze importanti rispetto alla prima versione (ipotizzata):
   - la barra di ricerca visibile usa ".sabai-search" (non ".sabai-form",
     che e' invece il pannello CAP nascosto dietro "Filtra");
   - le card in lista sono ".sabai-entity" dentro ".sabai-row" >
     ".sabai-col-xs-3.sabai-directory-images" (foto) +
     ".sabai-col-xs-9.sabai-directory-main" (testo) — non
     ".sabai-directory-photo" come ipotizzato prima;
   - niente distinzione reale Vivaio/Fioraio: la "categoria" nei dati di
     questo sito e' l'area geografica (es. "Provincia di Torino"), non
     il tipo di attivita' — la variante rosa "fioraio" ipotizzata prima
     e' stata tolta (il filtro sull'URL avrebbe comunque colpito TUTTE
     le categorie per errore, dato che ogni link contiene "vivai-fiorai");
   - la paginazione e' ".sabai-pagination" con <a> piatti (non <li>), non
     ".sabai-paginator";
   - la sidebar (nuvola regioni, box "Segnalazioni") usa gia' classi del
     tema stesso (".p-region-grid", "#segnala"), gia' stilizzate
     ovunque: nessun CSS extra necessario qui.
   ========================================================================== */

:root{
  --pit-dir-bosco: var(--p-green-ink, #1E3312);
  --pit-dir-bosco-2: var(--p-green-deep, #2E4A1C);
  --pit-dir-foglia: var(--p-green, #7CB829);
  --pit-dir-salvia: var(--p-tint, #F1F7E8);
  --pit-dir-salvia-2: var(--p-soft, #DFEEC9);
  --pit-dir-carta: var(--p-off, #FAFBF8);
  --pit-dir-bianco: var(--p-white, #FFFFFF);
  --pit-dir-inchiostro: var(--p-text, #20261B);
  --pit-dir-testo-soft: var(--p-text-soft, #66705E);
  --pit-dir-linea: var(--p-line, #E7EAE1);
  --pit-dir-radius: var(--p-radius, 12px);
  --pit-dir-radius-pill: 999px;
  --pit-dir-font-display: var(--p-font-serif, 'Source Serif 4', Georgia, serif);
  --pit-dir-font-testo: var(--p-font-sans, 'Sora', system-ui, sans-serif);
  --pit-dir-ombra: var(--p-shadow-md, 0 8px 24px -12px rgba(30,51,18,.16));
}

.pit-directory-page #primary,
.pit-directory-page .content-sidebar-wrap{
  font-family: var(--pit-dir-font-testo);
  color: var(--pit-dir-inchiostro);
}
/* Sfondo di pagina tinta salvia + foglia, stesso usato altrove nel sito
   (community, accedi/registrati, utenti) — qui NON tramite la classe
   condivisa ".pit-has-hero" perche' quella collassa anche la sidebar a
   due colonne (".content-sidebar-wrap{display:block}"), che invece qui
   resta voluta. */
.pit-directory-page .site-inner{
  background-color: var(--pit-dir-carta, #FAFBF8);
  background-image:
    url('/wp-content/themes/pianteit/images/monstera-leaf.png'),
    url('/wp-content/themes/pianteit/images/monstera-leaf.png');
  background-repeat: no-repeat, no-repeat;
  background-position: -80px -60px, calc(100% + 100px) calc(100% - 80px);
  background-size: 340px auto, 420px auto;
}
/* .site-inner qui sopra ha ora padding-top:0 (vedi style.css, stessa
   regola condivisa di categorie/tag/Il mio giardino) — corretto per la
   colonna principale, che riceve il proprio spazio dal padding interno
   della fascia hero (".p-cat-hero-inner", 40px, invariato qui). La
   sidebar pero' e' una colonna INDIPENDENTE nella stessa griglia (a
   differenza delle pagine con ".pit-has-hero", qui il layout a due
   colonne resta voluto): senza uno spazio suo, si troverebbe appiccicata
   alla barra dell'intestazione. Stesso valore (40px) della fascia hero,
   per restare allineata al bordo superiore del titolo.  */
.pit-directory-page .widget-area{
  padding-top: 40px;
}


/* ==========================================================================
   01 · FASCIA HERO
   ".p-cat-hero" (gia' in style.css) contiene qui SOLO il breadcrumb
   nativo (confermato dal sorgente): il titolo <h1> di una pagina normale
   si stampa altrove rispetto a quello delle categorie articoli, quindi
   lib/directory-page.php lo ristampa lui stesso dentro la fascia
   (".pit-directory-hero-title") e nasconde l'originale sotto.
   ========================================================================== */
/* Nasconde il titolo nativo generato da Sabai sulla scheda di
   un'attivita' (ne stampiamo uno nostro dentro la fascia hero, vedi
   lib/directory-page.php) — SOLO ".entry-header": un tentativo
   precedente aggiungeva qui anche ".sabai-directory-title" per
   sicurezza, ma quella e' la classe VERA (e gia' usata piu' sotto in
   questo file) del nome dell'attivita' in ogni card dell'elenco — il
   che nascondeva il nome ovunque nel sito, non solo il doppione sulla
   scheda singola. Tolta. */
.pit-directory-page .entry-header{
  display: none;
}
/* Fascia hero, breadcrumb e titolo: sempre allineati a sinistra,
   indipendentemente da eventuali regole di centraggio native di Sabai
   (da qui l'uso di "!important" — non ci sono altre regole nostre da
   fare a gara di specificita', quindi e' sicuro). */
.pit-directory-page .p-cat-hero,
.pit-directory-page .p-cat-hero-inner,
.pit-directory-page .breadcrumb,
.pit-directory-page .pit-directory-hero-title{
  text-align: left !important;
}
/* ".p-cat-hero" nello stile del tema usa un trucco "a tutta larghezza
   di pagina" (width:100vw + margini negativi) che assume di trovarsi
   centrato rispetto alla FINESTRA — corretto per le pagine a colonna
   unica dove viene normalmente usato. Qui invece la pagina ha
   volutamente la sidebar affiancata (griglia a due colonne), quindi la
   fascia finiva calcolata rispetto alla larghezza della sua colonna e
   sconfinava fuori schermo (visto in screenshot: titolo tagliato a
   sinistra, fascia che sconfina nella sidebar a destra). Qui la fascia
   resta contenuta nella sua colonna, con angoli arrotondati propri
   invece che il pieno sconfinamento a bordo pagina. */
.pit-directory-page .p-cat-hero{
  width: auto;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  background: transparent;
  border-bottom: 0;
}
/* La foglia decorativa era pensata per una fascia a piena larghezza:
   contenuta nella colonna (piu' stretta, per via della sidebar) veniva
   tagliata in modo innaturale sul bordo. Tolta del tutto, coerente con
   "trasparente, senza fantasie". */
.pit-directory-page .p-cat-hero-leaf{
  display: none;
}
.pit-directory-page .p-cat-hero-inner{
  max-width: none;
  margin: 0;
  /* Il valore base (in style.css) usa "clamp(20px,4vw,40px)" per il
     padding orizzontale, pensato per la fascia hero a piena larghezza
     delle pagine categoria (dove ".p-cat-hero" sconfina apposta oltre
     il contenitore per poi essere reincorniciato qui dentro). Su
     questa pagina invece ".p-cat-hero" NON sconfina (width:auto,
     margin:0 poco sopra): e' un contenitore normale, che eredita gia'
     il bordo sinistro del contenuto sotto (indirizzo, telefono, chip),
     suo fratello nello stesso contenitore padre. Aggiungere QUI un
     padding proprio significava spostare breadcrumb e titolo di
     quel tanto in piu' rispetto al resto — tolto, cosi' il bordo
     sinistro combacia sempre con quello del contenuto sotto,
     qualunque sia il padding del contenitore che li racchiude entrambi. */
  padding-left: 0;
  padding-right: 0;
}
.pit-directory-page .p-cat-hero .pit-directory-hero-title{
  font-family: var(--pit-dir-font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--pit-dir-bosco);
  margin: 10px 0 0;
}
.pit-directory-page .breadcrumb{
  color: var(--pit-dir-testo-soft);
  margin: 0;
}
.pit-directory-page .breadcrumb a{ color: var(--pit-dir-testo-soft); }


/* ==========================================================================
   02 · BARRA DI RICERCA VISIBILE
   Sabai reale: .sabai-directory-search > form.sabai-search > .sabai-row
   > .sabai-directory-search-keyword (input) /
   .sabai-directory-search-category (select) /
   .sabai-directory-search-submit (button.sabai-btn-primary)
   ========================================================================== */
/* Barra a tab (es. "Attività") che compariva a scatti dietro la card
   di ricerca — tolta del tutto su richiesta. */
.pit-directory-page .sabai-nav.sabai-nav-tabs{
  display: none;
}

.pit-directory-page .sabai-directory-search{
  background: var(--pit-dir-bianco);
  border: 1px solid var(--pit-dir-linea);
  border-radius: calc(var(--pit-dir-radius) + 4px);
  box-shadow: var(--pit-dir-ombra);
  padding: 20px 22px;
  margin: 0 0 24px;
  position: relative;
  z-index: 2;
}
.pit-directory-page .sabai-search{
  background: transparent;
  border: 0;
  padding: 0 !important;
}
/* La griglia nativa di Sabai (".sabai-row" > colonne "float") non
   allinea verticalmente elementi di altezza diversa: qui diventa flex
   con centratura, mantenendo le larghezze delle colonne native. */
.pit-directory-page .sabai-directory-search .sabai-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.pit-directory-page .sabai-directory-search .sabai-row > div{
  float: none;
}
.pit-directory-page .sabai-search input[type="text"],
.pit-directory-page .sabai-search select{
  height: 46px !important;
  border: 1.5px solid var(--pit-dir-linea) !important;
  border-radius: 10px !important;
  background: var(--pit-dir-bianco) !important;
  padding: 0 14px !important;
  font-family: var(--pit-dir-font-testo);
  font-size: 15px;
  color: var(--pit-dir-inchiostro);
}
.pit-directory-page .sabai-search input[type="text"]:focus,
.pit-directory-page .sabai-search select:focus{
  border-color: var(--pit-dir-foglia) !important;
  box-shadow: 0 0 0 3px rgba(124,184,41,.15);
  outline: none;
}
.pit-directory-page .sabai-directory-search-submit .sabai-btn{
  height: 46px !important;
  width: 100%;
}

/* Mobile: le colonne native di Sabai per la barra di ricerca sono a
   percentuale fissa (pensate per stare affiancate su schermo largo) —
   senza questa correzione, su schermi stretti finivano ognuna in una
   fetta troppo stretta, con casella di testo, menu zona e pulsante
   accostati/sovrapposti invece di leggibili. Sotto i 640px, ogni campo
   prende tutta la larghezza disponibile e va a capo. */
@media (max-width: 640px){
  .pit-directory-page .sabai-directory-search .sabai-row > div{
    width: 100% !important;
    float: none !important;
    margin-bottom: 10px;
  }
  .pit-directory-page .sabai-directory-search .sabai-row > div:last-child{
    margin-bottom: 0;
  }
}

/* Pannello CAP (nascosto dietro "Filtra"): usa le classi vere
   .sabai-form/.sabai-form-field di Sabai. */
.pit-directory-page .sabai-directory-filters{
  background: var(--pit-dir-bianco);
  border: 1px solid var(--pit-dir-linea);
  border-radius: var(--pit-dir-radius);
  padding: 18px 20px;
  margin: 12px 0 20px;
}
.pit-directory-page .sabai-form-field-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pit-dir-testo-soft);
  margin-bottom: 6px !important;
}
.pit-directory-page .sabai-directory-filters input[type="text"]{
  height: 44px;
  border: 1.5px solid var(--pit-dir-linea) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-family: var(--pit-dir-font-testo);
  font-size: 15px;
}
.pit-directory-page .sabai-directory-filters input[type="text"]:focus{
  border-color: var(--pit-dir-foglia) !important;
  outline: none;
}

/* Bottoni Sabai in genere (Filtra, Cerca, ordinamento, paginazione) */
.pit-directory-page .sabai-btn{
  font-family: var(--pit-dir-font-testo) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: background .15s, border-color .15s, color .15s;
}
.pit-directory-page .sabai-btn-primary{
  background: var(--pit-dir-bosco-2) !important;
  border-color: var(--pit-dir-bosco-2) !important;
  color: #fff !important;
}
.pit-directory-page .sabai-btn-primary:hover{
  background: var(--pit-dir-bosco) !important;
  border-color: var(--pit-dir-bosco) !important;
}
.pit-directory-page .sabai-btn-default{
  background: var(--pit-dir-bianco) !important;
  border-color: var(--pit-dir-linea) !important;
  color: var(--pit-dir-inchiostro) !important;
}
.pit-directory-page .sabai-btn-default:hover{
  background: var(--pit-dir-salvia) !important;
  border-color: var(--pit-dir-salvia-2) !important;
  color: var(--pit-dir-bosco-2) !important;
}

/* Bottone "Filtra" (apre il pannello CAP): tolto su richiesta esplicita.
   Nomi di classe plausibili qui come primo livello; un fallback via
   JavaScript (cerca il testo "Filtra" invece di un nome di classe,
   stesso principio gia' usato per altri elementi difficili da
   individuare con certezza) in lib/directory-page.php copre il caso in
   cui nessuno di questi corrisponda davvero. */
.pit-directory-page .sabai-directory-filters-toggle,
.pit-directory-page .sabai-filters-toggle,
.pit-directory-page a[data-toggle="sabai-directory-filters"]{
  display: none !important;
}

/* Barra "Filtra" + "Ordina per" sopra la lista */
.pit-directory-page .sabai-directory-listings-container > .sabai-navigation{
  padding: 0 0 16px;
  margin-bottom: 4px;
}
.pit-directory-page .sabai-dropdown-menu{
  border: 1px solid var(--pit-dir-linea);
  border-radius: 10px;
  box-shadow: var(--pit-dir-ombra);
  padding: 6px !important;
}
.pit-directory-page .sabai-dropdown-menu > li > a{
  border-radius: 8px;
  color: var(--pit-dir-inchiostro);
}
.pit-directory-page .sabai-dropdown-menu > li > a:hover{
  background: var(--pit-dir-salvia) !important;
  color: var(--pit-dir-bosco-2) !important;
}


/* ==========================================================================
   03 · CARD DELLE ATTIVITÀ (vista lista)
   Sabai reale: .sabai-directory-listings-list .sabai-entity > .sabai-row
   > .sabai-col-xs-3.sabai-directory-images (foto, colonna nativa 25%) +
   .sabai-col-xs-9.sabai-directory-main (testo). Il grid a colonne e' di
   Sabai stesso (float, non toccato qui): si interviene solo su aspetto
   (bordo/ombra/hover) e contenuto interno.
   ========================================================================== */
.pit-directory-page .sabai-directory-listings{
  margin: 20px 0;
}
.pit-directory-page .sabai-directory-listings .sabai-entity{
  background: var(--pit-dir-bianco);
  border: 1px solid var(--pit-dir-linea) !important;
  border-radius: var(--pit-dir-radius);
  padding: 16px !important;
  margin-bottom: 12px !important;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.pit-directory-page .sabai-directory-listings .sabai-entity:hover{
  transform: translateY(-2px);
  box-shadow: var(--pit-dir-ombra);
  border-color: var(--pit-dir-salvia-2) !important;
}
.pit-directory-page .sabai-directory-listings .sabai-entity:last-child{
  margin-bottom: 0 !important;
}
/* Il gutter nativo di Sabai (".sabai-row" a margine negativo +
   ".sabai-col-xs-*" con padding proprio) si sommava al padding della
   card, creando un vuoto vistoso tra il bordo sinistro della card e la
   foto (non "appiccicata" come dovrebbe). Azzerato il gutter nativo,
   sostituito con un unico spazio pulito tra foto e testo. */
.pit-directory-page .sabai-directory-listings .sabai-entity .sabai-row{
  margin-left: 0;
  margin-right: 0;
}
.pit-directory-page .sabai-directory-listings .sabai-entity .sabai-col-xs-3,
.pit-directory-page .sabai-directory-listings .sabai-entity .sabai-col-xs-9{
  padding-left: 0;
  padding-right: 0;
}
.pit-directory-page .sabai-directory-listings .sabai-entity .sabai-col-xs-9{
  padding-left: 16px;
}

/* Titolo dell'attivita' */
.pit-directory-page .sabai-directory-title a{
  font-family: var(--pit-dir-font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--pit-dir-bosco);
}
.pit-directory-page .sabai-directory-title a:hover{
  color: var(--pit-dir-bosco-2);
  text-decoration: none;
}

/* Categoria = area geografica in questo sito (non il tipo di attivita'):
   chip unica, coerente con le altre chip del sito. */
.pit-directory-page .sabai-directory-category a{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pit-dir-salvia);
  color: var(--pit-dir-bosco-2);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--pit-dir-radius-pill);
  text-decoration: none !important;
}
.pit-directory-page .sabai-directory-category a:hover{
  background: var(--pit-dir-salvia-2);
}

/* Indirizzo e telefono */
.pit-directory-page .sabai-directory-location,
.pit-directory-page .sabai-directory-contact-tel{
  font-size: 14px;
  color: var(--pit-dir-inchiostro);
  margin-top: 6px;
}
.pit-directory-page .sabai-directory-location .fa,
.pit-directory-page .sabai-directory-contact-tel .fa{
  color: var(--pit-dir-foglia);
  margin-right: 4px;
}
.pit-directory-page .sabai-directory-contact-tel a{
  color: var(--pit-dir-inchiostro);
  font-weight: 600;
}
.pit-directory-page .sabai-directory-contact-tel a:hover{
  color: var(--pit-dir-bosco-2);
}


/* ==========================================================================
   04 · FOTO E SEGNAPOSTO
   ========================================================================== */
.pit-directory-page .sabai-directory-images img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}
/* Segnaposto quando manca la foto — Sabai stesso marca la card con la
   classe ".sabai-directory-no-image" sull'entity: piu' affidabile di
   controllare il "src" dell'immagine. */
.pit-directory-page .sabai-entity.sabai-directory-no-image .sabai-directory-images img{
  visibility: hidden;
}
.pit-directory-page .sabai-entity.sabai-directory-no-image .sabai-directory-images{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.pit-directory-page .sabai-entity.sabai-directory-no-image .sabai-directory-images::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%232E4A1C' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M24 5C13 14 9 27 24 43 39 27 35 14 24 5Z'/%3E%3Cpath d='M24 12v26M24 22l-6-5M24 22l6-5M24 30l-7-6M24 30l7-6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 40% no-repeat,
    linear-gradient(150deg, var(--pit-dir-salvia), var(--pit-dir-salvia-2));
}


/* ==========================================================================
   05 · PAGINAZIONE E CONTEGGIO RISULTATI
   Sabai reale: .sabai-pagination.sabai-btn-group > a.sabai-btn (piatti,
   NON dentro <li>) — modificatori ".sabai-active"/".sabai-disabled".
   ========================================================================== */
.pit-directory-page .sabai-navigation-bottom{
  margin-top: 20px;
  padding-top: 16px;
}
.pit-directory-page .sabai-directory-listings-container > .sabai-navigation-bottom{
  border-top: 0 !important;
}
/* Testo nativo "Mostro X risultati di Y su Z" — tolto su richiesta. */
.pit-directory-page .sabai-navigation-bottom .sabai-pull-left{
  display: none;
}
.pit-directory-page .sabai-pagination.sabai-btn-group{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pit-directory-page .sabai-pagination .sabai-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  min-width: 38px;
  height: 38px;
  padding: 0 10px !important;
  background: var(--pit-dir-bianco) !important;
  border: 1px solid var(--pit-dir-linea) !important;
  color: var(--pit-dir-inchiostro) !important;
  margin-left: 0 !important;
}
.pit-directory-page .sabai-pagination .sabai-btn:not(.sabai-disabled):not(.sabai-active):hover{
  background: var(--pit-dir-salvia) !important;
  border-color: var(--pit-dir-salvia-2) !important;
}
.pit-directory-page .sabai-pagination .sabai-active{
  background: var(--pit-dir-bosco) !important;
  border-color: var(--pit-dir-bosco) !important;
  color: #fff !important;
}
.pit-directory-page .sabai-pagination .sabai-disabled{
  opacity: .45;
}


/* ==========================================================================
   06 · SIDEBAR
   Confermato dal sorgente: la nuvola di regioni usa gia'
   ".p-region-grid.p-region-grid--wrap" e il box "Segnalazioni" usa gia'
   "#segnala" — entrambe classi DEL TEMA, gia' stilizzate ovunque nel
   sito (style.css). Nessun CSS extra necessario qui.
   ========================================================================== */


/* ==========================================================================
   07 · RESPONSIVE
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .pit-directory-page .sabai-directory-listings .sabai-entity{ transition: none; }
  .pit-directory-page .sabai-directory-listings .sabai-entity:hover{ transform: none; }
}