@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Yesteryear&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Lobster&family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@300..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');

/* ===== Mobile Tap Highlight Reset (rimuove flash blu su iOS/Android) ===== */
html, body, a, button, input, textarea {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none; /* evita popup lungo tap su immagini/link */
}
/* Regola globale di fallback per qualunque elemento ancora evidenziato */
* { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }
/* Elementi interattivi aggiuntivi (icone, link navbar, slider dots, hamburger) */
a, button, .hamburger, .nav-links a, .hero-cta, .hs-dots button, .hs-nav, .btn-aggiungi-categoria, .btn-modifica, .btn-elimina {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    outline: none;
}
/* Mantiene accessibilità tastiera: rimuove outline solo quando non è focus visibile */
:focus:not(:focus-visible){ outline: none; }
/* Evita selezione accidentale su elementi interattivi */
a, button { -webkit-user-select: none; user-select: none; }
/* Stato attivo più morbido senza flash di colore */
a:active, button:active { filter: brightness(.92); }
/* (Opzionale) personalizza focus visibile coerente */
:focus-visible { outline: 3px solid rgba(0,93,164,.55); outline-offset: 3px; border-radius: 6px; }

body
{
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: rgb(247, 247, 247);
    overflow-x: hidden; /* Previene lo scroll orizzontale */
    /* Rimuovi padding-top: 13.5vh; dal body */
}

main {
    margin-top: 0; 
    padding-top: calc(13.5vh + 20px); /* Rimetti il padding sul main per compensare navbar + spacing */
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    /* Due sfondi: sfondo1 (angolo alto-sinistra) e sfondo2 (angolo basso-destra) */
    background-image: url('img/sfondi/sfondo1.png'), url('img/sfondi/sfondo2.png');
    background-repeat: no-repeat, no-repeat;
    /* L'immagine in alto la abbassiamo sotto la navbar, quella in basso resta ancorata */
    /* Alzata leggermente l'immagine in alto a sinistra (ridotto offset) */
    background-position: left calc(13.5vh + 2px), right bottom;
    /* Larghezza fluida che si adatta alle dimensioni dello schermo mantenendo il ratio naturale (altezza auto) */
    /* Più grandi */
    background-size: clamp(240px, 40vw, 820px) auto, clamp(240px, 40vw, 820px) auto;
    /* Restano fisse durante lo scroll (parallasse semplice) */
    background-attachment: fixed, fixed;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    min-height: calc(100vh - 13.5vh); /* Assicura che main copra tutto lo spazio disponibile */
    background-color: rgb(230, 243, 247)
}

/* Riduci le dimensioni delle immagini decorative su schermi molto piccoli per evitare sovrapposizioni */
/* Tablet: ingrandisci ancora un po' (tra mobile e desktop) */
@media (min-width: 801px) and (max-width: 1124px) {
    main {
        background-size: clamp(280px, 46vw, 900px) auto, clamp(280px, 46vw, 900px) auto;
        /* Alzata anche per tablet */
        background-position: left calc(13.5vh + 4px), right bottom;
    }
}

@media (max-width: 800px) {
    main {
    /* Leggermente più grandi solo su mobile */
    background-size: clamp(170px, 62vw, 440px) auto, clamp(170px, 62vw, 440px) auto;
        background-position: left calc(13.5vh + 4px), right bottom;
    }
}

/* Extra-small: ancora più grandi sotto i 550px */
@media (max-width: 550px) {
    main {
    background-size: clamp(210px, 78vw, 560px) auto, clamp(210px, 78vw, 560px) auto;
    background-position: left calc(13.5vh + 0px), right bottom;
    }
}

/* Navbar styles */
.navbar
{
    display: flex;
    background-color: rgba(247, 247, 247, 0.98); /* Leggera trasparenza per eleganza */
    backdrop-filter: blur(10px); /* Effetto blur per eleganza */
    justify-content: space-between;
    border-bottom: 3px solid rgb(71, 15, 140);
    border-radius: 0 0 10px 10px;
    position: fixed;
    top: 0;
    left: 0; /* Assicura che sia allineata a sinistra */
    z-index: 1000;
    height: 13.5vh;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombra per separare visivamente */
}

/* Ripristino layout desktop originale per il logo (prima dell'introduzione di nav-header) */
.nav-header { /* solo desktop (>768px), wrapper comportato come ex logo-container */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    height: 100%;
}

/* Nasconde l'hamburger su desktop */
.hamburger { display: none; }

/* Il contenitore del logo occupa tutta la larghezza disponibile dentro nav-header */
.nav-header .logo-container { width: 100%; height: calc(100% - 20px); }

.nav-links
{
    list-style: none;
    display: flex;
    justify-content: flex-end; 
    gap: 20px;
    /* background-color: blueviolet;*/
    flex: 1 1 auto; /* occupa lo spazio rimanente rispetto al logo */
    align-items: center;
    margin: 10px;
    flex-wrap: nowrap; /* impedisce nuova riga che causa il salto */
    min-width: 0; /* consente shrink flessibile */
}

.nav-links a
{
    text-decoration: none;
    color: rgb(0, 93, 164); 
    font-size: clamp(1.6rem, 2vw + .4rem, 2.2rem); /* riduce gradualmente prima del breakpoint */
    font-family: "Lobster",  sans-serif;
    position: relative;
    overflow: hidden;
    margin-right: 40px;
    white-space: nowrap; /* evita spezzamento singolo link */
    line-height: 1;
}



.nav-links a.active {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
    text-decoration-color: rgb(93, 200, 118);
}

.nav-links a.active:hover::after
{
    width: 0;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2.5px; 
    width: 0;
    height: 1.6px; 
    background-color: rgb(93, 200, 118);
    transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
}

.nav-links a:hover::after {

    width: 100%;
}

.logo-container
{
    /* background-color: rgb(83, 83, 101); */
    height: calc(100% - 20px); /* Altezza dinamica in base alla navbar */
    margin: 10px;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Nasconde overflow */
}
.logo-container a
{
    display: flex;
    width: 100%; 
    height: 100%;
    justify-content: center;
    align-items: center;
    /*  background-color: blueviolet; */ 
}
.logo-container img
{
    max-width: 500px;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Scala l'immagine per non uscire dal container */
    display: block;
}

/* Breakpoint intermedio per comprimere spazi prima della versione mobile */
@media (max-width: 1200px) and (min-width: 769px) {
    .nav-links { gap: 14px; }
    .nav-links a { margin-right: 26px; }
}
@media (max-width: 1000px) and (min-width: 769px) {
    .nav-links { gap: 10px; }
    .nav-links a { margin-right: 18px; }
}


@media (max-width: 900px) {
    /* Navbar mobile: diventa colonna ed espande in altezza animando */
    .navbar {
        flex-direction: column;
        align-items: stretch;
        height: auto; /* l'altezza reale è controllata da max-height animata */
        max-height: 13.5vh; /* stato chiuso (solo fascia superiore) */
        overflow: hidden; /* nasconde le voci finché non si apre */
        transition: max-height .5s ease;
    }
    .navbar.open { /* stato aperto: spazio per le voci */
        max-height: 480px; /* valore sufficiente per contenere il menu; regola se necessario */
        box-shadow: 0 4px 26px -6px rgba(0,0,0,.25);
    }
    .nav-header { /* barra superiore con logo + hamburger */
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 4px 10px;
        box-sizing: border-box;
        min-height: 13.5vh;
    }
    .nav-links {
       display: flex;
       flex-direction: column;
       width: 100%;
       padding: 0;
       gap: 8px;
       margin: 0;
       margin-bottom: 20px;
       list-style: none;
       opacity: 0;
       transform: translateY(-6px);
       transition: opacity .35s ease .05s, transform .35s ease .05s; /* leggera attesa dopo espansione */
    align-items: center; /* centra i li */
    }
    .navbar.open .nav-links {
        opacity: 1;
        transform: translateY(0);
    }
    .nav-links li { width: 100%; }
    .nav-links a {
        margin: 0 !important;
        font-size: 1.7rem;
        display: block;
        padding: 6px 4px;
    text-align: center; /* centrato */
    }
    /* Animazione progressiva voci (stagger) */
    .nav-links li { opacity: 0; transform: translateY(-4px); }
    .navbar.open .nav-links li { animation: fadeSlide .45s forwards; }
    .navbar.open .nav-links li:nth-child(1){ animation-delay: .05s; }
    .navbar.open .nav-links li:nth-child(2){ animation-delay: .10s; }
    .navbar.open .nav-links li:nth-child(3){ animation-delay: .15s; }
    .navbar.open .nav-links li:nth-child(4){ animation-delay: .20s; }
    .navbar.open .nav-links li:nth-child(5){ animation-delay: .25s; }
    @keyframes fadeSlide { from { opacity:0; transform: translateY(-4px);} to { opacity:1; transform: translateY(0);} }
    .hamburger { 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        gap: 5px; 
        width: 46px; 
        height: 46px; 
        margin: 0 14px 0 0; 
        cursor: pointer; 
        position: relative; 
        border-radius: 10px; 
        /* Rimosso contorno viola */
        border: none;
        background: linear-gradient(145deg,#ffffff,#f4f4f7);
        box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 2px 6px -2px rgba(0,0,0,.18) inset;
        transition: background .3s;
        align-self: center; /* Centro verticale nella navbar */
    }
    .hamburger:hover { background: linear-gradient(145deg,#ffffff,#f1f1f6); }
    .hamburger span { 
        display: block; 
        height: 3px; 
        width: 60%; 
        background: rgb(0, 93, 164); 
        border-radius: 3px; 
        margin-left: auto; 
        margin-right: auto; 
        transition: transform .4s cubic-bezier(.68,-0.55,.27,1.55), opacity .3s; 
    }
    .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .logo-container { width: auto; flex: 1; justify-content: flex-start; padding-top: 0; max-width: 400px;}
}

/* Migliore gestione overflow per il menu quando molto alto */
@media (max-width: 768px) and (max-height: 560px) {
    .nav-links { max-height: calc(100vh - 110px); overflow-y: auto; }
}


/* Footer styles*/
.footer {
    background-color: rgb(46, 46, 68);
    color: white;
    padding: 40px 0 0 0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap; /* Permette alle sezioni di andare a capo */
    gap: 40px; /* Spaziatura uniforme tra le card */
    justify-content: center; /* Centra le colonne quando sono meno di 3 */
    align-items: flex-start; /* Allinea in alto i contenuti */
    text-align: center; /* Testo centrato di default */
    flex-direction: row-reverse;
}

/* Ogni sezione del footer si comporta come una card fluida */
.footer-section {
    flex: 1 1 280px; /* Cresce, si restringe, base desiderata */
    max-width: 360px; /* Evita card troppo larghe su monitor grandi */
    box-sizing: border-box;
}

.footer-section h3 {
    color:  rgb(191, 254, 191);
    font-family: sans-serif;
    font-size: 1.5em;
    margin-bottom: 15px;
}

.footer-section img {
    max-width: 250px;
    height: auto;
}


.footer-section p {
    margin: 8px 0;
    line-height: 1.5;
    font-size: 1em;
}

.footer-bottom {
    background-color: rgb(30, 30, 45);
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid rgb(80, 80, 100);
}

.footer-bottom p {
    margin: 0;
    font-size: 0.85em;
    color: rgb(180, 180, 180);
}

.footer-bottom strong {
    color: rgb(93, 200, 118);
    text-decoration: none;
}

/* Effetti hover minimal per i link di contatto nel footer */
.contact-link {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.4s ease;
    position: relative;
    display: inline-block;
}
.contact-link:hover {
    color: #2196F3 !important;
}

/* ========================= */
/*  Footer Responsive Design */
/* ========================= */

@media (max-width: 1200px) {
    .footer-container { gap: 36px; }
}

@media (max-width: 992px) { /* Tablet orizzontale */
    .footer { padding-top: 35px; }
    .footer-container { gap: 32px; }
    .footer-section h3 { font-size: 1.35em; }
    .footer-section img { max-width: 200px; }
    .footer-container {
        flex-direction: row;
    }
}

@media (max-width: 820px) { /* Tablet verticale (es. iPad / Surface portrait) */
    .footer-section { flex: 1 1 45%; }
}



@media (max-width: 680px) { /* Forza quasi sempre 2 colonne */
    .footer-section { flex: 1 1 48%; }
    .footer-container { gap: 28px; }
}

@media (max-width: 560px) { /* Mobile: 1 colonna */
    .footer-container {
        gap: 22px;
        padding: 0 25px;
        text-align: center;
    }
    .footer-section { flex: 1 1 100%; max-width: 100%; }
    .footer-section img { max-width: 170px; }
    .footer-section p { margin: 6px 0; line-height: 1.4; }
    .footer-bottom p { font-size: 0.75em; line-height: 1.4; padding: 0 12px; }
}

@media (max-width: 400px) { /* Schermi molto piccoli */
    .footer-section img { max-width: 150px; }
    .footer-container { padding: 0 18px; }
}