/*********************************************************************
 * 1. Bootstrap Overrides & Custom Palette
 *
 */
:root {
    --bs-primary: #0081A7; /* Il tuo blu notte personalizzato */
    --bs-primary-rgb: 0, 129, 167; /* La versione RGB per le ombre e i gradienti */
    
    /* Le tonalità più scure per gli effetti di interazione */
    --bs-primary-hover: #00607d; 
    --bs-primary-active: #004c5a;

    /* Sovrascriviamo i font nativi di Bootstrap */
    --bs-body-font-family: 'Inter', sans-serif;
    --bs-font-sans-serif: 'Inter', sans-serif;
    
    /* Colori principali del brand */
    --color-primary-turchese: #0081A7;
    --color-navy-egadi: #1B365D;
}

/* Applichiamo Montserrat a tutti i titoli e alla navigazione */
/* Applichiamo Montserrat a tutti i titoli della pagina */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--color-navy-egadi);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Gestione corretta dei font e dei colori della Navbar */
.navbar-brand, 
.nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Forziamo i colori chiari dentro la barra blu scuro */
.navbar-dark .navbar-brand {
    color: #ffffff !important;
}
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.7) !important; /* Bianco leggermente opaco per i link normali */
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
    color: #ffffff !important; /* Bianco acceso quando ci passi sopra o sei attivo */
}

/* ==========================================================================
   GESTIONE LOGO IN TESTATA
   ========================================================================== */

.navbar-logo {
    height: 45px;       /* Altezza perfetta per non allargare troppo la navbar */
    width: auto;        /* Mantiene le proporzioni originali del rettangolo */
    display: block;
    transition: transform 0.3s ease; /* Prepara un effetto fluido al passaggio del mouse */
}

/* Un tocco di dinamismo: il logo si ingrandisce impercettibilmente quando ci passi sopra */
.navbar-brand:hover .navbar-logo {
    transform: scale(1.03);
}

/* Ottimizzazione mobile: se su smartphone lo vuoi leggermente più compatto */
@media (max-width: 576px) {
    .navbar-logo {
        height: 38px;   /* Un pelo più piccolo sugli schermi minuscoli */
    }
}

/* Ottimizzazione per il testo del corpo (Inter) */
body {
    color: #333333;
    font-weight: 400; /* Regolare */
    line-height: 1.6; /* Rende i blocchi di testo più ariosi e leggibili */
}

/* Sottotitoli o testi leggermente più leggeri */
.text-muted-custom {
    font-weight: 300; /* Leggero */
}

/* Evidenziati o link importanti */
.fw-medium {
    font-weight: 500;
}

/* Correzione per i bottoni (Bootstrap calcola gli stati hover/active via Sass, 
   quindi dobbiamo forzarli un minimo per coerenza) */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Correzione per il bottone Outline Primary usando le variabili globali */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

/* 1. Rimuovi l'anello di focus quando NON è 'visibile' (tipicamente al click del mouse) */
*:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none; /* Rimuove l'ombra di focus di Bootstrap */
}

/* 2. Definisci uno stile di focus personalizzato per quando è 'visibile' (da tastiera) */
.btn:focus-visible,
button:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(17, 91, 104, 0.25); 
}

html {
    font-size: 15px;
}


/*********************************************************************
 * 2. ProcessWire WYSIWYG (CKEditor) Image Alignments
 * Serve a gestire le immagini formattate dall'admin del CMS
 */
.align_left {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 50%;
}

.align_right {
    float: right;
    margin: 0 0 1rem 1.5rem;
    max-width: 50%;
}

.align_center {
    display: block;
    margin: 1.5rem auto;
    max-width: 100%;
}

/* Ottimizzazione mobile per le immagini allineate nei testi */
@media (max-width: 576px) {
    .align_left, .align_right {
        float: none;
        max-width: 100%;
        margin: 1rem auto;
        display: block;
    }
}

/* Logo per la home page con animazione */
	.logo-animated-container {
  width: 100%;
  max-width: 550px; /* Regola questo valore per decidere la grandezza su PC */
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Forziamo l'SVG a seguire le regole del contenitore mantenendo le proporzioni */
.logo-animated-container svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Opzionale: Se su mobile (schermi piccoli) lo vuoi ancora più compatto */
@media (max-width: 576px) {
  .logo-animated-container {
    max-width: 85%; /* Occupa l'85% della larghezza dello smartphone */
  }
}


/* ==========================================================================
   ELEMENTI GRAFICI ED EFFETTI
   ========================================================================== */

   /* Badge per la scritta sopra il titolo dell'Hero */
.badge-hero {
    background-color: #0081A7;
    padding: 0.5rem 1.2rem;
    border-radius: 50px; /* Crea l'effetto capsula arrotondata */
    font-size: 0.8rem;   /* Leggermente più piccolo per massima eleganza */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Gestione delle distanze nei testi */
.tracking-wider { letter-spacing: 2px; }
.tracking-widest { letter-spacing: 4px; }
.uppercase-flat { text-transform: uppercase; }
.text-body-font { font-family: 'Inter', sans-serif !important; }

/* Il colore Turchese del brand */
.text-turchese {
    color: #0081A7 !important;
}

.turchese-light {
    color: #54E3FF !important;
}

/* Bottone Personalizzato Turchese */
.btn-turchese {
    background-color: #0081A7;
    border-color: #0081A7;
    transition: all 0.3s ease;
}
.btn-turchese:hover {
    background-color: #00607d;
    border-color: #00607d;
    transform: translateY(-2px);
}

/* Bottone WhatsApp */
.btn-whatsapp {
    background-color: #25D366;
    color: white !important;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* Struttura della Hero Section con Immagine di Sfondo */
.hero-section {
    min-height: 80vh; /* Copre l'80% dell'altezza dello schermo */
    background-image: url('/site/templates/img/DSC07935.jpg'); /* Inserisci qui il percorso corretto alla foto della tonnara */
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* Cambia in 'fixed' se desideri l'effetto parallax su computer */
}

@keyframes fadeInContent {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* ==========================================================================
   SEZIONE GOMMONE
   ========================================================================== */

.text-navy {
    color: #1B365D !important;
}

/* Scatola delle icone dei comfort */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    flex-shrink: 0; /* Impedisce all'icona di rimpicciolire su schermi piccoli */
    border: 1px solid rgba(0, 129, 167, 0.1);
}

.border-turchese {
    border-color: #0081A7 !important;
}

/* Colore Navy personalizzato per i testi e sfondi scuri */
.bg-navy {
    background-color: #1B365D !important;
}

/* ==========================================================================
   SEZIONE VIDEO VERTICALE (SNORKELING)
   ========================================================================== */

.video-vertical-container {
    max-width: 320px; /* Limita la larghezza massima per non farlo diventare gigantesco su PC */
    aspect-ratio: 9 / 16; /* Mantiene la proporzione esatta dei Reels/TikTok */
    border-radius: 1rem;
    background-color: #0d1e36; /* Colore di fondo scuro mentre carica il video */
}

.video-vertical-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   PERSONALIZZAZIONE ACCORDION (FAQ)
   ========================================================================== */
.accordion-custom .accordion-item {
    background-color: transparent;
}

/* Bottone dell'accordion quando è chiuso */
.accordion-custom .accordion-button {
    background-color: #ffffff;
    color: #1B365D !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    padding: 1.2rem;
    border: 1px solid rgba(27, 54, 93, 0.05);
    box-shadow: none !important;
}

/* Bottone dell'accordion quando è APERTO */
.accordion-custom .accordion-button:not(.collapsed) {
    background-color: #1B365D;
    color: #ffffff !important;
    border-bottom: 2px solid #0081A7;
}

/* Icona della freccia dell'accordion (la ruotiamo e la coloriamo) */
.accordion-custom .accordion-button::after {
    filter: sepia(100%) hue-rotate(150deg) saturate(300%); /* Trasforma la freccia in turchese */
}
.accordion-custom .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1); /* Diventa bianca quando lo sfondo è blu notte */
}


/* ==========================================================================
   SEZIONE GALLERIA ANIMATA
   ========================================================================== */

.gallery-item {
    cursor: pointer;
}

/* Gestione dell'immagine dentro la card */
.gallery-img {
    transition: transform 0.5s ease;
}

/* L'overlay turchese parte invisibile (opacity: 0) */
.gallery-overlay {
    background-color: rgba(0, 129, 167, 0.85); /* Il tuo turchese con opacità */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Icona zoom che fa un piccolo scatto verso l'alto all'inizio */
.gallery-overlay i {
    transform: scale(0.7);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================================================
   EFFETTI HOVER (QUANDO CI PASSI SOPRA CON IL MOUSE)
   ========================================================================== */
.gallery-item:hover .gallery-img {
    transform: scale(1.08); /* Zoom leggero ed elegante dell'immagine */
}

.gallery-item:hover .gallery-overlay {
    opacity: 1; /* Il velo turchese diventa visibile */
}

.gallery-item:hover .gallery-overlay i {
    transform: scale(1); /* L'icona zoom si ingrandisce con effetto molla */
}

/* ==========================================================================
   STILI PER IL FOOTER
   ========================================================================== */
.hover-white {
    transition: color 0.2s ease;
}
.hover-white:hover {
    color: #ffffff !important;
}
.text-white-50 {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ==========================================================================
   SEZIONE CONTATTI E MAPPA
   ========================================================================== */
   
/* Su mobile (sotto i 992px) la card è un normale blocco statico senza margini strani */
.contact-sidebar {
    margin-bottom: 2rem; /* Un po' di respiro sotto la card quando su mobile va in alto */
}

/* Si attiva l'effetto "calamita" (sticky) SOLO sugli schermi grandi (PC/Tablet) */
@media (min-width: 992px) {
    .contact-sidebar {
        position: -webkit-sticky; /* Supporto per Safari storico */
        position: sticky;
        top: 110px;        /* Distanza perfetta dal top della pagina durante lo scroll */
        z-index: 10;       /* Evita che passi sotto ad altri elementi grafici */
        margin-bottom: 0;  /* Resetta il margine del mobile perché qui si affianca */
    }
}