/*
 Theme Name:   Divers of Naples
 Theme URI:    https://#
 Description:  Tema personalizzato per il sito Divers of Naples
 Author:       Alberto AI
 Author URI:   https://#
 Template:     astra
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         custom-theme
 Text Domain:  divers-of-naples
*/

/* ===================================
   INIZIO CSS PERSONALIZZATO
=================================== */

/* ===================================
   APPLICAZIONE FONT GLOBALI
=================================== */

/* Applica al corpo del sito */
body, p, li, span {
    font-family: var(--don-font-primary);
}

/* Applica ai titoli delle sezioni con effetto */
.don-gallery-title {
    font-family: var(--don-font-section-title); /* <-- Usa la variabile per i titoli di sezione */
}

/* Applica ai titoli delle card */
.don-card-title,
.don-spot-card-title {
    font-family: var(--don-font-headings);
}

/* Applica ai titoli H1, H2, H3 in modo indipendente */
h1 {
    font-family: var(--don-font-h1);
}
h2 {
    font-family: var(--don-font-h2);
}
h3 {
    font-family: var(--don-font-h3);
}

/* Applica ai testi decorativi */

.don-hero-overlay h1 {
    font-family: var(--don-font-special);
}

:root {

  /* ===================================
     PANNELLO DI CONTROLLO GLOBALE
     Modifica questi valori per cambiare l'aspetto di tutto il sito.
  =================================== */

  /* --- Sfondo e Superfici --- */
  --don-bg-gradient-start: #000000;
  --don-bg-gradient-mid-1: #0d2343;
  --don-bg-gradient-mid-2: #102c54;
  --don-bg-gradient-end:   #1a3f72;
  --don-card-bg:           #0f172a;
  --don-card-bg-hover:     #1e293b;
  --don-border-color:      #334155;

  /* --- Colori Testo --- */
  --don-text-primary:      #e2e8f0; /* Testo principale del corpo */
  --don-text-secondary:    #ffffff; /* Testo secondario, didascalie */
  --don-text-meta:         #94a3b8; /* Date, città, contatori */
  --don-text-link-hover:   #ffffff;

  /* --- Colori Titoli --- */
  --don-title-page:        #ffffff; /* Es. "Le mie opere", titolo singolo spot */
  --don-title-profile-name:#cbd5e1; /* Nome grosso in pagina autore */
  --don-title-card-diver:  #ffffff; /* Nome sulla card del diver */
  --don-title-card-media:  #ffffff; /* Titolo opera/spot sulla card */

  /* --- Colori di Accento e Navigazione --- */
  --don-accent-hero:       #5478ee; /* Titolo "Divers of Naples" in home */
  --don-accent-pagination: #066787; /* Paginazione galleria */
  --don-nav-arrows-bg:     #ffffff; /* Sfondo frecce carosello */
  --don-nav-arrows-color:  #0f172a; /* Colore icona freccia */
  --don-nav-dots:          #94a3b8; /* Pallini carosello inattivi */
  --don-nav-dots-active:   #ffffff; /* Pallino carosello attivo */

/* --- Colori Header & Footer --- */
  --don-header-bg:         #0f172a; /* Sfondo Header */
  --don-header-text:       #e2e8f0; /* Testo/Link Header */
  --don-header-site-title: #ffffff; /* Colore Titolo Sito nell'Header <- AGGIUNGI QUESTA RIGA */
  --don-footer-bg:         #000000; /* Sfondo Footer */
  --don-footer-text:       #94a3b8; /* Testo/Link Footer */

/* --- GESTIONE FONT --- */
  --don-font-primary: sans-serif;
  --don-font-headings: 'Comfortaa', sans-serif;         /* <-- FONT PER I TITOLI SULLE CARD */
  --don-font-special:  'Square Peg', cursive;         /* <-- FONT PER IL TITOLO in OVERLAY DIVER OF NAPLES --> */
  --don-font-section-title: 'Poiret One', sans-serif; /* <-- FONT PER I TITOLI DI SEZIONE (es. "Ultime dal profondo") */

  /* NUOVE VARIABILI PER H1, H2, H3 */
--don-font-h1: 'Comfortaa', sans-serif;   /* <-- Font per i titoli H1 */
--don-font-h2: 'Poiret One', sans-serif;  /* <-- Font per i titoli H2 */
--don-font-h3: 'Comfortaa', sans-serif;   /* <-- Font per i titoli H3 */

}

/* ===================================
   OVERRIDE GLOBALE LAYOUT BOXED ASTRA
=================================== */
/* Questa regola forza il contenitore principale di Astra ad occupare
   tutta la larghezza disponibile, eliminando l'effetto "boxed" su tutto il sito. */
.ast-container {
    max-width: 100% !important;
}

/* ===================================
   STILI GLOBALI
=================================== */
body {
  background: linear-gradient(
    to bottom,
    var(--don-bg-gradient-start),
    var(--don-bg-gradient-mid-1) 40%,
    var(--don-bg-gradient-mid-2) 80%,
    var(--don-bg-gradient-end)
  );
  color: var(--don-text-primary) !important;
}

/* ===================================
   STILE HOME PAGE HERO VIDEO
=================================== */
.don-hero-video {
    position: relative;
    left: 50%;
    transform: translateX(-50vw);
    width: 100vw;
    height: 55vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: -60px;
}

.don-hero-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
}

.don-hero-overlay {
    z-index: 2;
    position: relative;
    padding: 2rem 1rem;
    text-align: center;
}

/* ===========================================
   BLOCCO DEFINIZIONE TITOLO DIVERS OF NAPLES 
   ===========================================*/

/* 1. L'animazione che fa scorrere lo sfondo */
@keyframes animated-gradient-scroll {
  from {
    background-position: 200% center;
  }
  to {
    background-position: 0% center;
  }
}

/* 2. La regola per il titolo H1 */
.don-hero-overlay h1 {

  
background: linear-gradient(
  to right,
  #2a6fdb 20%, /* Blu Oceano Intenso */
  #f0f8ff 40%, /* Bianco Ghiaccio (AliceBlue) */
  #f0f8ff 60%,
  #2a6fdb 80%
);
  
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animated-gradient-scroll 5s linear infinite;
  font-size: 11rem;
  font-family: 'Square Peg', cursive;
  text-shadow: 0px 0px 10px rgba(200, 240, 255, 0.4);
}

 /* ====================================
     FINE BLOCCO DEFINIZIONE TITOLO
     ================================== */

.don-hero-overlay p {
    font-size: 1.2rem;
    margin: 0;
    text-shadow: none;
    color: var(--don-text-meta);
}

/* ===================================
   SEZIONI E TITOLI GENERICI
=================================== */
.don-carousel-section {
    padding-top: 0;
    margin-bottom: 2rem;
    border-top: 1px solid var(--don-border-color);
}

.don-gallery-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1rem;
}

.home .don-carousel-section .don-gallery-container {
    margin-top: 0;
    padding-top: 5;
}

.don-gallery-title {
    font-size: 4.8rem;
    /* Il 'color' originale viene ignorato, ma lo lasciamo per sicurezza */
    color: #f05006; 
    text-shadow: 2px 2px 8px rgba(6,103,135,0.7);
    margin-bottom: 1.5rem;
    text-align: center;
    
    /* Proprietà per il gradiente statico */
    background: linear-gradient(
      to right,
      #2a6fdb 20%,
      #f0f8ff 40%,
      #f0f8ff 60%,
      #2a6fdb 80%
    );
   
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ===================================
   CARD UNIFICATE (MEDIA E SPOT)
=================================== */
.don-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.don-card, .don-spot-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease-out;
    width: 100%;
}

.don-card {
    background-color: var(--don-card-bg-hover);
}

.don-card:hover, .don-spot-card:hover {
    transform: translateY(-5px);
}

.don-card-thumb, .don-spot-card-thumb {
    width: 100%;
    height: 100%;
}

.don-card-thumb {
    aspect-ratio: 1 / 1;
}

.don-spot-card {
    aspect-ratio: 1 / 1;
}

.don-card-thumb img, .don-spot-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.don-card-video-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.don-card-overlay, .don-spot-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--don-text-secondary);
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    
}

/* ===================================
   NUOVO STILE CARD CON BARRA INFO
=================================== */

/* 1. Rende la card un contenitore flessibile verticale (immagine sopra, barra sotto) */
.don-card {
    display: flex;
    flex-direction: column;
    background-color: var(--don-card-bg-hover); /* Sfondo per la barra info */
}

/* 2. La nuova barra informativa sotto l'immagine */
.don-card-info {
    padding: 0.5rem 1rem;
    
}

/* 3. Stile per il titolo con gestione del testo lungo (...) */
.don-card-title {
    font-size: 1rem;
    color: var(--don-title-card-media);
    margin: 0 0 0.25rem 0; /* Un po' di spazio sotto */

    /* Regole per i puntini se il testo è troppo lungo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. Stile per la data */
.don-card-date {
    font-size: 0.8rem;
    color: var(--don-text-meta);
}

.don-spot-card-overlay {
    padding: 2rem 1rem;
    text-align: center;
}

.don-card-title, .don-spot-card-title {
    font-size: 1.5rem;
    margin: 0;
    color: var(--don-title-card-media);
}

.don-card-title {
    font-size: 0.75rem;
}

.don-card-date {
    font-size: 0.9rem;
    color: var(--don-text-meta);
}

/* ===================================
   CARD DIVER
=================================== */
.don-diver-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    background-color: var(--don-card-bg);
    border: 1px solid var(--don-border-color);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s;
}

.don-diver-card:hover {
    background-color: var(--don-card-bg-hover);
    transform: translateY(-5px);
}

.don-diver-card-name {
    font-size: 1.5rem;
    color: var(--don-title-card-diver);
    margin: 0 0 0.25rem 0;

    /* --- GESTIONE TESTO LUNGO --- */
    white-space: nowrap; /* Impedisce al testo di andare a capo */
    overflow: hidden;    /* Nasconde il testo che esce dal contenitore */
    text-overflow: ellipsis; /* Aggiunge i puntini sospensivi */
    max-width: 100%;     /* Assicura che il contenitore prenda tutta la larghezza disponibile */
}

.don-diver-card-city {
    color: var(--don-text-meta);
    display: block;
}

.don-diver-card-count {
    margin-top: auto;
    padding-top: 2rem;
    text-align: right;
}

.don-diver-card-count strong,
.don-diver-card-count span {
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--don-text-meta);
    display: inline;
    line-height: 1;
}

.don-diver-card-count span {
    margin-left: 0.25rem;
}

/* ===================================
   PAGINE ARCHIVIO (GALLERIA, ECC.)
=================================== */

@keyframes animated-gradient-scroll {
  from {
    background-position: 200% center;
  }
  to {
    background-position: 0% center;
  }
}

.don-archive-header {
    text-align: center;
    margin-bottom: 3rem;
    
}

.don-archive-title {
    font-size: 5.5rem; /* Aumentato per Square Peg */
    margin-bottom: 0.5rem;
    color: var(--don-title-page);
    font-family: 'Square Peg', cursive; /* <-- AGGIUNTO */
    font-weight: normal;               /* <-- AGGIUNTO */
    text-transform: none;              /* <-- AGGIUNTO */
    
}

.don-archive-description {
    font-family: 'Comfortaa', sans-serif;
    font-size: 1rem; /* Leggermente più grande per una migliore leggibilità */
    letter-spacing: 0.7px; /* Un po' di spazio tra le lettere esalta l'eleganza */
    color: var(--don-text-secondary); /* Assicuriamoci che usi il colore corretto dal nostro pannello */
}

/* ===================================
   PAGINA PROFILO AUTORE
=================================== */
.don-author-profile-header {
    padding: 3rem 1rem;
    text-align: center;
}

.don-author-name {
    color: var(--don-title-profile-name);
    font-size: 3rem;
    margin: 0;
}

.don-author-city {
    font-size: 1.2rem;
    color: var(--don-text-meta);
    margin-top: 0.5rem;
    display: block;
}

.don-author-bio {
    max-width: 650px;
    margin: 1.5rem auto 0 auto;
    color: var(--don-text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* ===================================
   PAGINA SINGOLA OPERA (MEDIA)
=================================== */
.don-single-media {
    max-width: 900px;
    margin: 2rem auto;
    padding: 1rem;
}

body.single-dive_media main#primary.don-single-media {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.don-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.don-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.don-media-info {
    margin-top: 2rem;
}

.don-media-header {
    border-bottom: 1px solid var(--don-border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.don-media-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--don-title-page);
}

.don-media-meta span {
    color: var(--don-text-meta);
    margin-right: 1.5rem;
}

.don-media-meta a {
    color: var(--don-text-secondary);
    text-decoration: none;
}

.don-media-meta a:hover {
    text-decoration: underline;
    color: var(--don-text-link-hover);
}

.don-media-caption {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--don-text-secondary);
}

.don-media-attribution {
    background-color: var(--don-card-bg-hover);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--don-text-meta);
}


.don-back-button {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--don-border-color);
    color: var(--don-text-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.don-back-button:hover {
    background-color: #475569;
    color: var(--don-text-link-hover);
}

/* ===================================
   PAGINA SINGOLO SPOT (PUNTO IMMERSIONE)
=================================== */
.don-spot-featured-image {
    width: 100%;
    height: 40vh;
    max-height: 400px;
}

.don-spot-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.don-spot-header, .don-spot-content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

.don-spot-header {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 0;
    
}

.don-spot-title {
    font-size: 5rem;
    color: var(--don-title-page);
    font-family: 'Square Peg', cursive;
        
}

.don-spot-content {
    padding-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.8;
    font-family: 'Comfortaa', sans-serif;
}

.don-back-button-wrapper {
    text-align: center;
    margin: 3rem 0;
}

/* ==========================================================================
   6. COMPONENTI: CAROSELLI (SWIPER)
   ========================================================================== */
.swiper-slide {
  height: auto;
  display: flex;
}
.swiper-slide .don-diver-card,
.swiper-slide .don-spot-card,
.swiper-slide .don-card {
  width: 100%;
}
.swiper-pagination {
  position: static !important;
  width: 100%;
  margin-top: 25px !important;
}
.swiper-pagination-bullet {
  background-color: var(--don-nav-dots);
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}
.swiper-pagination-bullet-active {
  background-color: var(--don-nav-dots-active);
  transform: scale(1.2);
  opacity: 1;
}


/* ===================================
   PAGINAZIONE ARCHIVIO (NUMERI)
=================================== */
.navigation.pagination {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  font-size: 20px;
}



.navigation.pagination .page-numbers:hover {
  color: var(--don-accent-pagination);
}

.navigation.pagination .page-numbers.current {
  color: var(--don-accent-pagination);
  font-weight: 700;
}

/* ===================================
   ICONE SOCIAL
=================================== */
.don-social-icons-container {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 3rem;
    position: relative;
    top: 0px;
    margin-left: 50px;
}

.don-social-icon {
    font-size: 22px;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}

.don-social-icon:hover {
    transform: scale(1.15);
}

.icon-facebook { color: #1877F2; }
.icon-instagram { color: #E1306C; }
.icon-youtube { color: #FF0000; }


/* ===================================
   MODULI (FORM)
=================================== */
/* Form Carica Opera */
.don-form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

/* Colore per le etichette dei singoli campi (Versione più specifica) */
.page-template-page-carica-opera .acf-form .acf-label label {
    color: var(--don-text-secondary) !important;
}

.don-form fieldset {
    border: 1px solid var(--don-border-color);
    padding: 1.5rem;
    border-radius: 8px;
}

.don-form fieldset legend {
    color: var(--don-text-secondary);
    padding: 0 0.5rem;
    font-weight: bold;
}

.don-form label {
    color: var(--don-text-secondary) !important;
}

.don-form-columns fieldset {
    margin: 0;
}

.don-fieldset-fullwidth {
    max-width: 500px;
    margin: 0 auto 2rem auto;
}

.form-submit {
    text-align: center;
}

/* Form Modifica Profilo */

.don-edit-profile-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1rem;
}

.don-form-wrapper {
    background-color: var(--don-card-bg);
    border: 1px solid var(--don-border-color);
    padding: 2rem;
    border-radius: 8px;
}

.don-notice {
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    background-color: var(--don-card-bg-hover);
    border-left: 5px solid #38bdf8;
}

.don-post-update-links {
    text-align: center;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Media Query per Form */
@media (max-width: 800px) {
    .don-form-columns {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ===================================
   EFFETTO FADE-IN ON SCROLL
=================================== */
.js-animate-on-scroll {
    opacity: 0;
}

/* =================================== */
/* STILI HEADER PERSONALIZZATO         */
/* =================================== */

/* --- 1. Contenitore Principale (Sticky & Sfondo) --- */
header.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}
header.site-header .main-header-bar {
    background-color: var(--don-header-bg) !important;
}

/* --- 2. Layout Generale (Flexbox) --- */
.main-header-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0;
}

/* --- 3. Blocco Sinistro: Logo e Titolo --- */
.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.site-branding .custom-logo img {
    width: 150px !important;
    max-width: none !important;
    height: auto !important;
}
.site-branding .site-title a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 2.5rem;
    font-weight: 500;
}

/* --- 4. NUOVO: Blocco Destro (Menu + Icone) --- */
.header-right-block {
    display: flex;
    flex-direction: column;   /* Mette gli elementi uno sotto l'altro */
    align-items: flex-end;    /* Allinea tutto a destra */
    margin-top: 35px; 
}

/* --- 5. Menu di Navigazione --- */
.main-navigation ul {
    display: flex;
    gap: 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-navigation a {
    color: var(--don-header-text) !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    font-family: 'Comfortaa', sans-serif;
}
.main-navigation a:hover {
    color: #FFFFFF;
}

/* --- 6. Blocco Social (sotto il menu) --- */
.social-follow-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem; /* Spazio dal menu */
}
.follow-us-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--don-text-meta);
}
.don-social-icons-container {
    display: flex;
    gap: 5rem; /* Spazio tra le icole */
}
.don-social-icon i {
    font-size: 1.2rem;
    transition: all 0.2s ease-in-out;
}
.don-social-icon:hover i {
    transform: scale(1.2);
}
.don-social-icon.icon-facebook i { color: #1877F2; }
.don-social-icon.icon-instagram i { color: #E4405F; }
.don-social-icon.icon-youtube i { color: #FF0000; }


/* ===================================
   OVERRIDE FOOTER 
=================================== */

/* Applica lo sfondo al contenitore corretto ("Below Footer") */
.site-below-footer-wrap {
    background-color: var(--don-footer-bg) !important;
}

/* Applica il colore del testo agli elementi di copyright */
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap .ast-footer-copyright p {
    color: var(--don-footer-text) !important;
}

/* Applica il colore ai link specifici nel copyright */
.site-below-footer-wrap .ast-footer-copyright a {
    color: var(--don-footer-text) !important;
    transition: color 0.2s;
}

.site-below-footer-wrap .ast-footer-copyright a:hover {
    color: #ffffff !important; /* Bianco al passaggio del mouse */
}

/* Stile per i pulsanti di navigazione multipli */
.don-navigation-links {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Spazio tra i pulsanti */
    margin-top: 2rem;
    flex-wrap: wrap; /* Manda a capo i pulsanti su schermi piccoli */
}

/* Stili per il Modulo Filtri */
.don-filters {
    max-width: 900px;
    margin: 0 auto 3rem auto;
    background-color: rgba(15, 23, 42, 0.5);
    border: 0.5px solid var(--don-border-color); /* <<<< BORDO "STRETTO" (da 1px a 0.5px) */
    padding: 1.5rem;
    border-radius: 8px;
}

.don-search-form {
    display: flex;
    align-items: flex-end; /* Allinea gli elementi alla base, FONDAMENTALE */
    gap: 1.5rem; /* Spazio tra campo di ricerca e blocco pulsanti */
    flex-wrap: wrap;
}

.don-filter-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Fa sì che il campo di ricerca occupi tutto lo spazio disponibile */
    min-width: 220px;
}

.don-filter-item label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--don-text-meta);
}

/* Stile per l'input di ricerca */
/* Stile UNIFICATO per tutti i campi di testo nel filtro */
.don-filter-item input[type="search"],
.don-filter-item input[type="text"] {
    height: 48px;
    padding: 0.75rem;
    border-radius: 4px;
    border: 1px solid var(--don-border-color);
    background-color: #020617; /* Sfondo scuro */
    color: var(--don-text-primary); /* Testo chiaro */
    width: 100%;
    box-sizing: border-box;
}

/* Contenitore per i pulsanti */
.don-filter-actions {
    display: flex;
    gap: 1rem;
}

/* Stile UNIFICATO per i pulsanti per garantire la stessa altezza e centrare il testo */
.don-filter-actions .don-button,
.don-filter-actions .don-link {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.2rem; /* <<<< RIDOTTO IL PADDING PER PULSANTI PIÙ STRETTI */
    min-width: 90px; /* <<<< NUOVO: Forziamo una larghezza minima uguale per entrambi */
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

/* Stile specifico del pulsante "Filtra" */
.don-filter-actions .don-button {
    background-color: #4f46e5;
    color: #fff;
    border: none;
     position: relative;
    top: -14px; /* Modifica questo valore per spostare su o giù */

}

/* Stile specifico del link "Resetta" */
.don-filter-actions .don-link {
    color: var(--don-text-meta);
    font-size: 0.9rem;
    background-color: transparent;
    border: 1px solid var(--don-border-color); /* Aggiunto un bordo per coerenza */
}
.don-filter-actions .don-link:hover {
    background-color: var(--don-border-color);
    color: #fff;
}

/*
 * Stili per il box di suggerimenti (Autocomplete)
 */

.autocomplete-wrapper {
    position: relative; /* Necessario per posizionare i suggerimenti */
}

.suggestions-box {
    display: none; /* Nascosto di default */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #0f172a; /* Colore scuro, come le card */
    border: 1px solid var(--don-border-color);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10; /* Per stare sopra agli altri contenuti */
}

.suggestion-item {
    padding: 0.75rem;
    color: var(--don-text-secondary);
    cursor: pointer;
}

.suggestion-item:hover {
    background-color: rgba(51, 65, 85, 0.7); /* Colore al passaggio del mouse */
}

/* =================================== */
/* STILI PERSONALIZZATI PER WPFORMS    */
/* =================================== */

/* Colore per le etichette principali E quelle delle checkbox/scelte multiple */
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-checkbox label,
.wpforms-container .wpforms-field-radio label {
    color: var(--don-text-secondary) !important;
}

/* Colore per la descrizione sotto i campi (es. per la newsletter) */
.wpforms-container .wpforms-field-description {
    color: var(--don-text-meta) !important;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Colore per le sotto-etichette (meno comuni) */
.wpforms-container .wpforms-field-sublabel {
    color: var(--don-text-meta) !important;
}

/* Stile per i campi di testo, email, textarea E I MENU A TENDINA */
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field textarea,
.wpforms-container .wpforms-field select { /* <-- AGGIUNTO QUESTO */
    background-color: #020617 !important;
    color: var(--don-text-primary) !important;
    border: 1px solid var(--don-border-color) !important;
    border-radius: 4px !important;
    width: 100%; /* Aggiunto per coerenza larghezza */
}

/* =================================== */
/* REGOLE RESPONSIVE (MEDIA QUERIES)   */
/* =================================== */

/* --- Per Tablet Verticali e Schermi Medi (fino a 992px) --- */
@media (max-width: 992px) {
    /* Riduciamo lo spazio nell'header per dare più respiro */
    .main-navigation ul {
        gap: 1rem;
    }
    .don-social-icons-container {
        gap: 1rem;
    }
    .site-branding .site-title a {
        font-size: 1.1rem;
    }
}


/* --- Per Tablet e Dispositivi Mobili (fino a 768px) --- */
@media (max-width: 768px) {
    
    /* Riorganizziamo l'header: logo sopra, menu e icone sotto */
    .main-header-bar-container {
        flex-direction: column; /* Mette i blocchi uno sotto l'altro */
        gap: 1rem; /* Spazio tra i blocchi */
    }

    /* Riduciamo la dimensione dei titoli di pagina */
    .don-archive-title {
        font-size: 4rem;
    }

    /* Riduciamo il titolo gigante in home page */
    .don-hero-overlay h1 {
        font-size: 8rem;
    }

    /* Mettiamo i filtri in colonna per non stringerli troppo */
    .don-search-form {
        flex-direction: column;
        align-items: stretch; /* Allunga i campi a tutta larghezza */
    }
    .don-filter-actions {
        justify-content: center; /* Centra i pulsanti */
    }
}


/* --- Solo per Telefoni (fino a 576px) --- */
@media (max-width: 576px) {

    /* Riduciamo ancora i titoli per schermi piccoli */
    .don-archive-title {
        font-size: 3.2rem;
    }

    /* Riduciamo ancora di più il titolo in home page */
    .don-hero-overlay h1 {
        font-size: 6rem;
    }

    /* Riduciamo la dimensione del logo nell'header */
    .site-branding .custom-logo img {
        width: 100px !important; /* Un po' più piccolo sui telefoni */
    }
}

/* =================================== */
/* REGOLE RESPONSIVE (MEDIA QUERIES)   */
/* =================================== */

/* --- Tablet verticali e schermi medi (≤992px) --- */
@media (max-width: 992px) {
  .main-navigation ul { gap: 1rem; }
  .don-social-icons-container { gap: 1rem; }
  .site-branding .site-title a { font-size: 1.1rem; }
}

/* --- Tablet e Mobile (≤768px) --- */
@media (max-width: 768px) {
  /* Header: lascia la gestione del layout al blocco mobile a 900px (vedi sotto)
     qui teniamo solo tipografie e form */
  .don-archive-title { font-size: 4rem; }
  .don-hero-overlay h1 { font-size: 8rem; }

  .don-search-form {
    flex-direction: column;
    align-items: stretch;
  }
  .don-filter-actions { justify-content: center; }
}

/* --- Telefoni (≤576px) --- */
@media (max-width: 576px) {
  .don-archive-title { font-size: 3.2rem; }
  .don-hero-overlay h1 { font-size: 6rem; }
  .site-branding .custom-logo img { width: 100px !important; }
}

/* ========================= */
/* HEADER: BURGER + STICKY   */
/* ========================= */

/* Sticky SEMPRE (desktop + mobile) */
header.site-header,
#masthead.site-header,
.main-header-bar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Burger (base) */
.nav-toggle { 
  display: none; 
  background: none; 
  border: 0; 
  width: 44px; 
  height: 44px; 
  position: relative; 
  cursor: pointer;
}
.nav-toggle .bar,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--don-header-text, #e2e8f0);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle .bar { top: 50%; transform: translateY(-50%); }
.nav-toggle::before { top: 16px; }
.nav-toggle::after  { bottom: 16px; }
.nav-toggle.is-open .bar { opacity: 0; }
.nav-toggle.is-open::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open::after  { transform: translateY(-8px) rotate(-45deg); }

/* --- Mobile nav (≤900px): burger visibile, menu chiuso di default --- */
@media (max-width: 900px) {
  /* Mostra burger SOLO quando il JS ha attivato il ready (vedi classe da script) */
  body.don-nav-ready .nav-toggle { 
    display: inline-flex; 
    align-self: flex-end;
  }

  /* Menu chiuso di default, aperto con .is-open */
  body.don-nav-ready .main-navigation {
    display: none !important;
    background: var(--don-header-bg, #0f172a);
    border: 1px solid var(--don-border-color, #334155);
    border-radius: 8px;
    padding: 0.75rem 1rem;
  }
  body.don-nav-ready .main-navigation.is-open {
    display: block !important;
  }
  body.don-nav-ready .main-navigation ul {
    flex-direction: column;
    gap: 0.9rem;
  }

  /* Layout header in colonna (pulito) */
  .main-header-bar-container { 
    flex-direction: column; 
    gap: .75rem; 
    align-items: stretch; 
  }
  .header-right-block { margin-top: 0; align-items: stretch; }

  /* Social sotto al menu */
  .social-follow-wrapper { margin-top: .75rem; justify-content: flex-end; }

  /* Se il tema aggiunge padding al body quando sticky, neutralizza su mobile */
  body.ast-header-sticked,
  body.ast-sticky-active,
  body.has-sticky-header { padding-top: 0 !important; }

  /* Logo un filo più piccolo */
  .site-branding .custom-logo img { width: 110px !important; }
}

/* ======================================================= */
/* FIX RESPONSIVE PER CARD DIVER SU MOBILE (PAGINA DIVERS) */
/* ======================================================= */
@media (max-width: 768px) {

    /* Selettore specifico per le card SOLO nel carosello della pagina Divers */
    .don-divers-page-carousel .don-diver-card {
        padding: 1rem; /* Riduciamo lo spazio interno per dare più respiro al testo */
    }

    /* Regola per il nome del diver */
    .don-divers-page-carousel .don-diver-card-name {
        font-size: 1rem; /* Riduciamo la dimensione del carattere, come suggerivi */
        line-height: 1.3; /* Migliora la leggibilità se il testo va a capo */
        margin-bottom: 0.5rem; /* Aggiunge un po' di spazio sotto il nome */

        /* Questa è la soluzione migliore per i nomi lunghi:
           Limita il testo a un massimo di 2 righe, poi aggiunge "..." */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Adattiamo anche la città e il contatore per coerenza */
    .don-divers-page-carousel .don-diver-card-city {
        font-size: 0.8rem; /* Un po' più piccolo */
    }
    .don-divers-page-carousel .don-diver-card-count {
        padding-top: 1rem; /* Meno spazio sopra il contatore */
        font-size: 0.8rem;
    }
}

/* ======================================================= */
/* FIX RESPONSIVE MOBILE PER GRIGLIE (Home, Galleria, Territorio) */
/* ======================================================= */
@media (max-width: 768px) {

    /* --- IMPOSTAZIONE GRIGLIE --- */

    /* Griglia a 3 colonne per Home Page e Galleria */
    body.home .don-grid,
    .galleria-archive-page .don-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    /* Griglia a 2 colonne per Territorio */
    .territorio-archive-page .don-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* --- FORMATTAZIONE TESTO NELLE CARD --- */

    /* Testo per le card di Home e Galleria (.don-card) */
    body.home .don-card-title,
    .galleria-archive-page .don-card-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.home .don-card-date,
    .galleria-archive-page .don-card-date {
        font-size: 0.75rem !important;
    }

    /* Testo per le card del Territorio (.don-spot-card) */
    .territorio-archive-page .don-spot-card-overlay {
        padding: 1.5rem 1rem !important;
    }

    .territorio-archive-page .don-spot-card-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ======================================================= */
/* LINK "VEDI TUTTO" ACCANTO AI TITOLI DI SEZIONE          */
/* ======================================================= */

/* Contenitore per allineare titolo e link */
.don-section-header {
    display: flex;
    justify-content: center; /* Mantiene il titolo centrato */
    align-items: baseline;   /* Allinea la base del titolo con il link, molto elegante! */
    gap: 1.5rem;             /* Spazio tra titolo e link */
    flex-wrap: wrap;         /* Manda a capo su schermi stretti se necessario */
}

/* Rimuove il margine inferiore dal titolo, ora gestito dal contenitore */
.don-section-header .don-gallery-title {
    margin-bottom: 0;
}

/* Stile del link "Vedi tutto" */
.don-view-all-link {
    font-size: 1rem;
    color: var(--don-text-meta);
    text-decoration: none;
    font-family: var(--don-font-primary);
    font-weight: 500;
    transition: color 0.2s ease-in-out;
    white-space: nowrap; /* Evita che il link vada a capo */
}

.don-view-all-link:hover {
    color: var(--don-text-primary); /* Si illumina al passaggio del mouse */
}

/* --- Adattamento per il MOBILE --- */
@media (max-width: 768px) {
    .don-section-header {
        flex-direction: column; /* Mette il link SOTTO al titolo */
        align-items: center;    /* Centra tutto */
        gap: 0.5rem;            /* Riduce lo spazio tra i due */
    }

    /* Rimuove il margine dal titolo e ne aggiunge un po' sotto per la nuova disposizione */
    .don-gallery-title {
        margin-bottom: 0.5rem !important;
    }
}

/* =================================== */
/* STILI PAGINA SINGOLA IMMERSIONE     */
/* =================================== */

/* Rende trasparente il box bianco del contenuto */
.single-dive_spot .site-main article {
    background: transparent !important;
    border: none;
    box-shadow: none;
}

body.single-dive_spot .don-spot-header {
    margin-top: -9em !important;
}

body.single-dive_spot h1.don-spot-title {
    font-weight: normal !important;
}

/* =================================== */
/* STILI CARD PUNTO IMMERSIONE         */
/* =================================== */

.territorio-carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 80%; /* Su mobile, le card sono larghe */
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
}

@media (min-width: 768px) {
    .territorio-carousel {
        grid-auto-columns: 30%; /* Su desktop, mostriamo più card */
    }
}

.territorio-card {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4; /* Proporzioni verticali per la card */
    border-radius: 16px;
    overflow: hidden; /* Nasconde ciò che esce dai bordi arrotondati */
    text-decoration: none;
    scroll-snap-align: start;
}

.territorio-card-img {
    width: 100%;
    height: 100%;
    background-size: cover; /* L'immagine copre tutto lo spazio */
    background-position: center;
    transition: transform 0.4s ease-in-out;
}

.territorio-card:hover .territorio-card-img {
    transform: scale(1.05); /* Effetto zoom al passaggio del mouse */
}

/* Gradiente scuro in basso per rendere il testo leggibile */
.territorio-card::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
}

.territorio-card-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: #FFFFFF !important; /* Testo bianco */
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0;
    z-index: 2; /* Sta sopra il gradiente */
}

/* ========================================================== */
/* STILI HEADER ARCHIVIO (FIX DEFINITIVO PER PLUGIN)        */
/* ========================================================== */

/* Stili generici per l'header (questi non cambiano) */
.don-archive-head {
    text-align: center;
    padding: 3rem 1rem;
}
.don-archive-head-main {
    margin-bottom: 3rem;
}
.don-archive-subtitle {
    font-size: 1.1rem;
    color: #e2e8f0;
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Comfortaa', sans-serif;
}

/* --- Titolo 1: "Esplora il Territorio..." (Colore Unico e Dimensione Facile) --- */
.don-archive-title-fancy {
	font-family: 'Square Peg', cursive;
	font-weight: 500;
	margin: 0 0 0.5rem 0;

	/* === OPZIONE COLORE === */
	/* Qui puoi cambiare il colore. Usa un codice HEX come #FFFFFF per il bianco. */
	color: #FFFFFF;

	/* === OPZIONE GRANDEZZA CARATTERE === */
	/* Modifica il valore in pixel (px) per ingrandire o rimpicciolire il testo. */
	font-size: 100px;
}

/* ===================================
   STILE SINGOLO PUNTO IMMERSIONE
=================================== */

.don-single-spot .don-spot-header {
    text-align: center;
    padding: 2rem 1rem;
}

.don-single-spot .don-spot-title {
    font-size: 2.5rem;
}

.don-single-spot .don-spot-description {
    max-width: 800px;
    margin: 0 auto 3rem auto;
    font-size: 1.1rem;
    line-height: 1.8;
}

.don-spot-gallery {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #334155; /* Una linea di separazione */
}

.don-spot-gallery-title {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.don-no-photos-message {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #1e293b;
    border-radius: 8px;
    margin: 2rem 0;
}

.don-back-button {
    display: block;
    width: fit-content;
    margin: 3rem auto 2rem auto;
    padding: 0.8rem 1.5rem;
    background-color: #334155;
    color: #f1f5f9;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}
.don-back-button:hover {
    background-color: #475569;
}

/* ===================================
   STILE PER IMMAGINE CARD TERRITORIO (metodo <img>)
=================================== */
.don-spot-card-thumb {
    overflow: hidden; /* Nasconde le parti dell'immagine che escono */
}

.don-spot-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Adatta l'immagine senza distorcerla */
    object-position: center; /* Centra l'immagine */
    transition: transform 0.4s ease-in-out;
}

.don-spot-card:hover .don-spot-card-img {
    transform: scale(1.05); /* Aggiunge un leggero zoom in hover */
}

/* Stili per il div segnaposto quando l'immagine è assente */
.don-spot-card-thumb .placeholder-territorio {
    width: 100%;
    height: 100%;
}



.don-filters button { transform: translateY(14px); } /* micro-aggiustamento */


/* ===================================
   BOX MESSAGGIO DI SUCCESSO
=================================== */

.don-success-box {
    background-color: var(--don-card-bg);
    border: 1px solid var(--don-border-color);
    border-left: 5px solid #22c55e; /* Bordo verde per indicare successo */
    padding: 2rem 2.5rem;
    border-radius: 8px;
    text-align: center;
    max-width: 650px;
    margin: 3rem auto;
}

.don-success-box h2 {
    font-family: var(--don-font-headings);
    font-size: 2rem;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 1rem;
}

.don-success-box p {
    font-family: var(--don-font-headings); /* <-- AGGIUNGI QUESTA RIGA */
    font-size: 1.1rem; /* <-- AUMENTA LEGGERMENTE LA DIMENSIONE */
    color: var(--don-text-primary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.don-success-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap; /* Manda a capo i pulsanti su schermi piccoli */
}

/* Stile per il pulsante secondario (es. "Carica un'altra Opera") */
.don-button.secondary {
    background-color: transparent;
    border: 1px solid var(--don-border-color);
    color: var(--don-text-primary);
}

.don-button.secondary:hover {
    background-color: var(--don-border-color);
    color: #ffffff;
}

.don-notice {
    /* Colore di sfondo verde leggero */
    background-color: #1a3f72; /* Un verde pastello */
    /* Colore del bordo sinistro verde più scuro */
    border-left-color: #28a745 !important; /* Verde vivido */
    /* Colore del testo (se vuoi cambiarlo, altrimenti ometti) */
    color: #ffffff; /* Verde scuro per contrasto */
}

/* Titolo centrato + link a sinistra nello stesso blocco */
.don-gallery-container{ 
  position: relative;            /* crea il contesto per il posizionamento */
}

.don-gallery-title{
  text-align: center;            /* resta perfettamente centrato */
  margin: 0 0 50px;              /* come preferisci */
}

.don-view-all-link{
  position: absolute;
  left: 12px;                    /* sposta più a sinistra (aggiusta a gusto) */
  top: 25%;
  transform: translateY(-50%);   /* allinea verticalmente al titolo */
  z-index: 2;                    /* sopra eventuali decorazioni */
}

/* Mobile: se vuoi evitare sovrapposizioni, rimetti il link “normale” */
@media (max-width: 640px){
  .don-view-all-link{
    position: static;
    transform: none;
    display: inline-block;
    margin-bottom: 8px;          /* un filo di respiro sopra al titolo */
  }
}

/* ===================================
   STILE PER LA PAGINAZIONE
   =================================== */
.don-pagination {
    margin-top: 3rem;
    text-align: center;
}

.don-pagination .page-numbers {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 4px;
    border: 1px solid var(--don-border-color);
    background-color: var(--don-card-bg);
    color: var(--don-text-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.don-pagination .page-numbers:hover {
    background-color: var(--don-primary-color);
    border-color: var(--don-primary-color);
    color: #ffffff;
}

.don-pagination .page-numbers.current {
    background-color: var(--don-primary-color);
    border-color: var(--don-primary-color);
    color: #ffffff;
    cursor: default;
}

.don-pagination .page-numbers.dots {
    border: none;
    background: none;
}

/* Imposta la larghezza delle card nei caroselli della home page */
.home .swiper-slide {
    flex: 0 0 auto; 
}

/* Aggiunge spazio tra l'header di sezione e il carosello sottostante nella home */
.home .don-section-header {
    margin-bottom: 2.5rem;
}

/* Stile per l'immagine di fallback dell'hero in home page */
.don-hero-fallback {
    position: relative;
    width: 100%;
    height: 55vh; /* La stessa altezza del contenitore video */
    overflow: hidden;
}

.don-hero-fallback img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fa sì che l'immagine copra l'area senza deformarsi */
    object-position: center; /* Centra l'immagine */
}

.don-legal { margin-top: 8px; }
.don-legal-list { display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; margin:0; font-size:.9rem; opacity:.9; }
.don-legal-list a { text-decoration:none; border-bottom:1px solid transparent; }
.don-legal-list a:hover { border-bottom:1px solid currentColor; }

/* H1 solo nella pagina FAQ (id 50): colore + centrato + font (Square Peg) */
body.page-id-50 .entry-content h1.wp-block-heading,
body.page-id-50 .entry-content h1.wp-block-heading.has-text-align-left,
body.page-id-50 .entry-content h1.wp-block-heading.has-text-align-right {
  color: #ffffff;              /* tuo colore */
  text-align: center;           /* centrato */
  font-family: "Square Peg",
               "Inter",
               system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;             /* Square Peg è 400 */
  line-height: 1.1;             /* opzionale, rende meglio sui font script */
  font-size: clamp(52px, 8vw, 92px);  
}

/* H2 + H3 solo nella pagina FAQ (id 50) — Poiret One */
body.page-id-50 .entry-content h2.wp-block-heading,
body.page-id-50 .entry-content h2.wp-block-heading.has-text-align-left,
body.page-id-50 .entry-content h2.wp-block-heading.has-text-align-right,
body.page-id-50 .entry-content h3.wp-block-heading,
body.page-id-50 .entry-content h3.wp-block-heading.has-text-align-left,
body.page-id-50 .entry-content h3.wp-block-heading.has-text-align-right {
  color: #5493b8;
  text-align: center;
  font-family: "Poiret One",
               "Inter",
               system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.15;
}

/* opzionale: dimensioni responsive */
body.page-id-50 .entry-content h2.wp-block-heading { font-size: clamp(28px, 4.5vw, 56px); }
body.page-id-50 .entry-content h3.wp-block-heading { font-size: clamp(22px, 3.6vw, 40px); }

/* H1 nel contenuto della pagina Contatti (Gutenberg) */
body.page-id-26 .entry-content h1.wp-block-heading,
body.page-id-26 .entry-content h1.wp-block-heading.has-text-align-left,
body.page-id-26 .entry-content h1.wp-block-heading.has-text-align-right {
  color: #ffffff;  /* cambia qui il colore */
  text-align: center;
  font-family: "Square Peg", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400; /* Poiret One */
}

/* Titolo di pagina di Astra (se usi il title “di pagina” sopra al contenuto) */
body.page-id-26 .entry-title {
  color: #ffffff;
  font-family: "Square Peg", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  text-align: center;
  font-size: clamp(52px, 8vw, 92px);  
}

/* H1 nel contenuto della pagina Contatti (Gutenberg) */
body.page-id-262 .entry-content h1.wp-block-heading,
body.page-id-262 .entry-content h1.wp-block-heading.has-text-align-left,
body.page-id-262 .entry-content h1.wp-block-heading.has-text-align-right {
  color: #ffffff !important;  /* cambia qui il colore */
  text-align: center;
  font-family: "Square Peg", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400; /* Poiret One */
  font-size: clamp(32px, 8vw, 72px) !important; 
}

/* ==========================================================================
   Riduci lo spazio sopra il titolo nella pagina archivio "Territorio"
   ========================================================================== */

/* 1. Azzera completamente il padding del contenitore principale */
body.post-type-archive-dive_spot .site-main {
    padding-top: 0 !important;
}

/* 2. Tira su l'intestazione con un margine negativo per recuperare altro spazio */
body.post-type-archive-dive_spot .don-archive-head {
    margin-top: -8em !important; /* Puoi modificare questo valore (es. -3em) per alzarlo di più */
}

/* ==========================================================================
   Stili Responsive per i Titoli di Pagina su Mobile
   ========================================================================== */

@media (max-width: 768px) {

    /* --- Reset per la pagina archivio "Territorio" su mobile --- */
    body.post-type-archive-dive_spot .site-main {
        padding-top: 2em !important; /* Reimposta uno spazio minimo sopra */
    }
    body.post-type-archive-dive_spot .don-archive-head {
        margin-top: 0 !important; /* Annulla il margine negativo */
    }

    /* --- Reset per la pagina del singolo Punto Immersione su mobile --- */
    body.single-dive_spot .site-main {
        padding-top: -8em !important; /* Reimposta uno spazio minimo sopra */
    }
    body.single-dive_spot .don-spot-header {
        margin-top: 0 !important; /* Annulla il margine negativo */
    }

}

/* ==========================================================================
   Sistema la griglia delle Opere Recenti in Home Page (4 colonne)
   ========================================================================== */

.don-recent-works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Crea 4 colonne di uguale larghezza */
    gap: 20px; /* Spazio tra le card */
}

/* Stile per Tablet (mostra 2 colonne) */
@media (max-width: 992px) {
    .don-recent-works-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Stile per Smartphone (mostra 1 colonna) */
@media (max-width: 768px) {
    .don-recent-works-grid {
        grid-template-columns: 1fr;
    }
}

.contenitore-feed-facebook {
    width: 100%;
    max-width: 500px; /* Imposta una larghezza massima per non sgranare su schermi molto grandi */
    margin: 0 auto; /* Centra il contenitore se ha una max-width */
}