/* ============================================================
   LaTerradiPuglia — Stili pagine principali del menu
   File: ldp-pages.css
   v3 — aggiunto .ldp-page .ldp-summary-box (12/08/2026)
   
   Attivato dal wrapper: <div class="ldp-page">...</div>
   Compatibile con il tema esistente (zero conflitti)
   ============================================================ */

/* ── VARIABILI ── */
.ldp-page {
  --ldp-oro:    #c8922a;
  --ldp-nero:   #222222;
  --ldp-crema:  #fdf6ec;
  --ldp-crema2: #f5ead5;
  --ldp-bordo:  #e8d5b0;
  --ldp-grigio: #efefef;
  --ldp-testo:  #444444;
  --ldp-radius: 4px;
}

/* ── CONTENITORE ── */
.ldp-page {
  max-width: 100%;
  color: var(--ldp-testo);
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 15px;
  line-height: 22px;
}

/* ── PARAGRAFI ── */
.ldp-page p {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-size: 15px !important;
  line-height: 22px !important;
  margin: 0 0 18px !important;
  color: var(--ldp-testo) !important;
}

/* ── PARAGRAFO LEAD (primo paragrafo della pagina) ── */
.ldp-page p.ldp-lead {
  font-size: 17px !important;
  line-height: 26px !important;
  color: #333 !important;
  font-weight: 400 !important;
  border-left: 3px solid var(--ldp-oro) !important;
  padding-left: 14px !important;
  margin-bottom: 22px !important;
  background: none !important;
  font-style: normal !important;
}

/* ── BOLD ── */
.ldp-page strong,
.ldp-page b {
  font-weight: 700 !important;
  color: var(--ldp-nero) !important;
}

/* ── H2 — linea dorata sotto (diverso dagli articoli che hanno bordo sinistro) ── */
.ldp-page h2 {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  letter-spacing: -0.3px !important;
  color: var(--ldp-nero) !important;
  margin: 30px 0 14px !important;
  padding: 0 0 10px !important;
  border-bottom: 2px solid var(--ldp-oro) !important;
  border-left: none !important;
  background: transparent !important;
}

/* ── H3 — testo colore oro, nessun bordo ── */
.ldp-page h3 {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  color: var(--ldp-oro) !important;
  margin: 22px 0 8px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  letter-spacing: 0 !important;
}

/* ── H4 — sottotitolo discreto, corsivo ── */
.ldp-page h4 {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  color: #888 !important;
  font-style: italic !important;
  margin: 18px 0 6px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  text-transform: none !important;
}

/* ── LINK ── */
.ldp-page a {
  color: var(--ldp-oro) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ldp-bordo) !important;
  transition: border-color 0.15s !important;
}
.ldp-page a:hover {
  border-bottom-color: var(--ldp-oro) !important;
}

/* ── IMMAGINI ── */
.ldp-page img.aligncenter,
.ldp-page .wp-caption.aligncenter {
  display: block !important;
  margin: 20px auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--ldp-radius) !important;
  border: 1px solid var(--ldp-bordo) !important;
}
.ldp-page .wp-caption {
  max-width: 100% !important;
  text-align: center !important;
}
.ldp-page .wp-caption-text,
.ldp-page p.wp-caption-text {
  font-size: 12px !important;
  color: #999 !important;
  font-style: italic !important;
  margin-top: 5px !important;
  line-height: 18px !important;
  text-align: center !important;
}

/* ── LISTA SOTTOPAGINE (page-list generata da WordPress) ── */
.ldp-page ul.page-list,
.ldp-page ul.subpages-page-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
}

.ldp-page ul.page-list > li,
.ldp-page ul.subpages-page-list > li {
  background: var(--ldp-crema) !important;
  border: 1px solid var(--ldp-bordo) !important;
  border-radius: var(--ldp-radius) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  list-style: none !important;
}

.ldp-page ul.page-list > li > a,
.ldp-page ul.subpages-page-list > li > a {
  font-weight: 700 !important;
  color: var(--ldp-nero) !important;
  text-decoration: none !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
  border-bottom: none !important;
}
.ldp-page ul.page-list > li > a:hover,
.ldp-page ul.subpages-page-list > li > a:hover {
  color: var(--ldp-oro) !important;
}

/* Sottovoci della lista */
.ldp-page ul.page-list ul,
.ldp-page ul.subpages-page-list ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.ldp-page ul.page-list ul li,
.ldp-page ul.subpages-page-list ul li {
  font-size: 12px !important;
  line-height: 20px !important;
  padding: 0 0 0 12px !important;
  position: relative !important;
  background: none !important;
  border: none !important;
  list-style: none !important;
}
.ldp-page ul.page-list ul li::before,
.ldp-page ul.subpages-page-list ul li::before {
  content: "›" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--ldp-oro) !important;
  font-weight: 700 !important;
}
.ldp-page ul.page-list ul li a,
.ldp-page ul.subpages-page-list ul li a {
  color: #666 !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
.ldp-page ul.page-list ul li a:hover,
.ldp-page ul.subpages-page-list ul li a:hover {
  color: var(--ldp-oro) !important;
}

/* ── SEPARATORE ── */
.ldp-page hr {
  border: none !important;
  border-top: 1px dotted #ddd !important;
  margin: 24px 0 !important;
}

/* ============================================================
   COMPONENTI BOX — v2
   ============================================================ */

/* ── BOX EVIDENZA ORO ── */
/* Uso: concetti importanti, intro sezione, note da non perdere */
/* HTML: <div class="ldp-box-oro"><p>testo...</p></div> */
.ldp-page .ldp-box-oro {
  background: var(--ldp-crema) !important;
  border-left: 4px solid var(--ldp-oro) !important;
  border-radius: 3px !important;
  padding: 14px 18px !important;
  margin: 0 0 20px !important;
}
.ldp-page .ldp-box-oro p {
  font-size: 15px !important;
  line-height: 22px !important;
  color: #3d2e0e !important;
  margin: 0 !important;
}
.ldp-page .ldp-box-oro strong {
  color: var(--ldp-oro) !important;
}

/* ── BOX FATTO NOTEVOLE SCURO ── */
/* Uso: curiosità, "lo sapevi", fatti storici da evidenziare */
/* HTML: <div class="ldp-box-nero"><p>testo...</p></div> */
.ldp-page .ldp-box-nero {
  background: var(--ldp-nero) !important;
  border-radius: var(--ldp-radius) !important;
  padding: 16px 20px !important;
  margin: 0 0 20px !important;
}
/* Il colore chiaro sta sul RIQUADRO, non sui soli paragrafi: dentro il box
   finisce spesso del testo sciolto, che WordPress non avvolge in <p> quando
   segue subito l'apertura del div. Con il colore sui soli <p> quel testo
   restava a --ldp-testo (#444), cioe' grigio scuro su nero.
   Corretto il 18/08/2026. */
.ldp-page .ldp-box-nero {
  color: #e8d5b0 !important;
}
.ldp-page .ldp-box-nero p,
.ldp-page .ldp-box-nero li,
.ldp-page .ldp-box-nero td {
  font-size: 15px !important;
  line-height: 22px !important;
  color: #e8d5b0 !important;
  margin: 0 !important;
}
.ldp-page .ldp-box-nero p + p {
  margin: 12px 0 0 !important;
}
.ldp-page .ldp-box-nero strong {
  color: var(--ldp-oro) !important;
}
/* la lista dentro un riquadro scuro non porta il suo fondo bianco */
.ldp-page .ldp-box-nero .ldp-lista li {
  /* il colore va ripetuto QUI, e non basta la regola generica del box:
     `.ldp-page .ldp-lista li` ha la stessa specificita' e sta piu' in
     basso nel file, quindi vincerebbe lei e il testo tornerebbe #444 —
     grigio su nero, cioe' esattamente il difetto che stiamo chiudendo.
     Succede sulle due pagine delle olive, dove il riquadro di sicurezza
     contiene un elenco. */
  color: #e8d5b0 !important;
  background: transparent !important;
  border-bottom-color: rgba(232, 213, 176, .25) !important;
}

/* ── BOX NUMERI / STATISTICHE ── */
/* Uso: dati, statistiche, numeri chiave della regione */
/* HTML:
   <div class="ldp-box-numeri">
     <div class="ldp-num-card"><span class="ldp-n">400 km</span><span class="ldp-l">di costa</span></div>
     ...
   </div> */
.ldp-page .ldp-box-numeri {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 20px !important;
}
.ldp-page .ldp-box-numeri .ldp-num-card {
  background: var(--ldp-nero) !important;
  border-radius: var(--ldp-radius) !important;
  padding: 14px 10px !important;
  text-align: center !important;
}
.ldp-page .ldp-box-numeri .ldp-num-card .ldp-n {
  display: block !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--ldp-oro) !important;
  line-height: 1.1 !important;
}
.ldp-page .ldp-box-numeri .ldp-num-card .ldp-l {
  display: block !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-size: 11px !important;
  color: #ccc !important;
  margin-top: 4px !important;
  line-height: 15px !important;
}

/* ── LISTA FRECCE ZEBRATA ── */
/* Uso: elenchi strutturati, aree geografiche, itinerari */
/* HTML:
   <ul class="ldp-lista">
     <li><strong>Titolo</strong> — descrizione</li>
     ...
   </ul> */
.ldp-page .ldp-lista {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  border: 1px solid var(--ldp-bordo) !important;
  border-radius: var(--ldp-radius) !important;
  overflow: hidden !important;
}
.ldp-page .ldp-lista li {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif !important;
  font-size: 15px !important;
  line-height: 22px !important;
  padding: 10px 14px 10px 36px !important;
  position: relative !important;
  border-bottom: 1px solid var(--ldp-bordo) !important;
  color: var(--ldp-testo) !important;
  background: #fff !important;
  list-style: none !important;
}
.ldp-page .ldp-lista li:last-child {
  border-bottom: none !important;
}
.ldp-page .ldp-lista li:nth-child(even) {
  background: var(--ldp-crema) !important;
}
.ldp-page .ldp-lista li::before {
  content: "→" !important;
  position: absolute !important;
  left: 14px !important;
  top: 10px !important;
  color: var(--ldp-oro) !important;
  font-weight: 700 !important;
}

/* ── BOX CTA ── */
/* Uso: rimando allo shop o a sezioni chiave del sito */
/* HTML:
   <div class="ldp-box-cta">
     <p>testo...</p>
     <a href="https://shop.laterradipuglia.it">Testo bottone →</a>
   </div> */
.ldp-page .ldp-box-cta {
  background: var(--ldp-oro) !important;
  border-radius: var(--ldp-radius) !important;
  padding: 18px 22px !important;
  margin: 20px 0 !important;
  text-align: center !important;
}
.ldp-page .ldp-box-cta p {
  font-size: 16px !important;
  line-height: 24px !important;
  color: #fff !important;
  margin: 0 0 12px !important;
}
.ldp-page .ldp-box-cta strong {
  color: #fff !important;
  font-weight: 700 !important;
}
.ldp-page .ldp-box-cta a {
  display: inline-block !important;
  background: #fff !important;
  color: var(--ldp-oro) !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  padding: 8px 22px !important;
  border-radius: 3px !important;
  border: none !important;
  box-shadow: none !important;
  transition: background 0.2s, transform 0.15s !important;
}
.ldp-page .ldp-box-cta a:hover {
  background: var(--ldp-crema) !important;
  transform: translateY(-1px) !important;
}

/* ── RESPONSIVE ── */
/* ── BOX RIASSUNTO ──
   Stesso componente di ldp-articoli.css, dove pero' e' definito come
   `.ldp-article .ldp-summary-box`: dentro una pagina quel selettore non
   combacia e il box resta senza stile. Succedeva su quattro pagine comune
   gia' pubblicate (Collepasso, Cerignola, Cellino San Marco, San Severo),
   che lo usano in apertura. Aggiunto il 12/08/2026. */
.ldp-page .ldp-summary-box {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: var(--ldp-radius);
  padding: 14px 18px;
  margin: 0 0 20px;
}
.ldp-page .ldp-summary-box p {
  font-size: 15px !important;
  line-height: 22px !important;
  color: #555 !important;
  font-style: italic;
  margin: 0 !important;
}


@media (max-width: 600px) {
  .ldp-page h2 { font-size: 18px !important; line-height: 24px !important; }
  .ldp-page h3 { font-size: 15px !important; }
  .ldp-page p.ldp-lead { font-size: 15px !important; line-height: 22px !important; }
  .ldp-page ul.page-list,
  .ldp-page ul.subpages-page-list {
    grid-template-columns: 1fr 1fr !important;
  }
  .ldp-page .ldp-box-numeri {
    grid-template-columns: 1fr 1fr !important;
  }
  .ldp-page .ldp-box-cta { padding: 14px 14px !important; }
}
@media (max-width: 400px) {
  .ldp-page ul.page-list,
  .ldp-page ul.subpages-page-list {
    grid-template-columns: 1fr !important;
  }
  .ldp-page .ldp-box-numeri {
    grid-template-columns: 1fr 1fr !important;
  }
}