/* --- RESET & GLOBAL STYLES --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: #1f2937; /* gray-800 */
    background-color: #ffffff;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

/* --- UTILITIES --- */
.container {
    width: 100%;
    max-width: 1200px; /* mx-auto approx */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
}

.hidden {
    display: none !important;
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-6 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }

.section-padded {
    padding-top: 6rem; /* py-24 */
    padding-bottom: 6rem;
}

.font-semibold { font-weight: 600; }

/* Colors Utility Classes (used in HTML) */
/* --- NUOVA PALETTE VERDE SALVIA --- */

/* Colore chiaro (icone divisori, linee) - Ex text-rose-300 */
.text-rose-300 { color: #A3B18A; }

/* Colore medio (icona regali, hover link) - Ex text-rose-600 */
.text-rose-600 { color: #588157; }

/* Colore scuro (Titoli principali) - Ex text-rose-800 */
.text-rose-800 { color: #344E41; }

/* Sfondo chiarissimo (Sfondo Foto e IBAN) - Ex bg-rose-50 */
.bg-rose-50 { background-color: #F3F6F3; }

/* Link colorati nel testo */
.link-rose {
    color: #588157; /* Verde medio */
    font-weight: 600;
    text-decoration: underline;
}
.link-rose:hover { color: #344E41; /* Verde scuro al passaggio mouse */ }


/* --- HEADER / NAVBAR --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease-in-out;
    height: 5rem; /* h-20 */
}

.navbar-hidden {
    transform: translateY(-100%); /* Sposta la barra fuori dallo schermo in alto */
}

.navbar-container {
    height: 100%;
}

.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #f43f5e; /* rose-500 */
    fill: #f43f5e;
}

.logo-text {
    letter-spacing: 0.05em;
    color: #881337; /* rose-900 */
    font-weight: 600;
}

/* Desktop Nav */
.nav-desktop {
    display: none; /* Hidden on mobile */
    align-items: center;
    gap: 2rem;
}

.navlink {
    color: #44403c; /* stone-700 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 500;
}

.navlink:hover {
    color: #e11d48; /* rose-600 */
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: block;
    padding: 0.5rem;
    color: #44403c; /* stone-700 */
    background: none;
    border: none;
    cursor: pointer;
}

.icon {
    width: 1.75rem; /* w-7 */
    height: 1.75rem; /* h-7 */
}

/* Mobile Nav Dropdown */
.mobile-nav {
    display: flex; /* overridden by .hidden via JS */
    flex-direction: column;
    padding-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e7e5e4; /* stone-200 */
    text-align: center;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
}

.mobilelink {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    color: #44403c; /* stone-700 */
    font-size: 1.125rem;
    font-weight: 500;
}

.mobilelink:hover {
    color: #e11d48;
}

/* --- HERO SECTION --- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5rem;
    color: white;
    overflow: hidden;
}

.hero-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.3), rgba(0,0,0,0.5));
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.hero-inner {
    max-width: 56rem; /* max-w-4xl */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hero-subtitle {
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #fecdd3; /* rose-200 */
}

.hero-title-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.main-title {
    font-size: 3.75rem; /* text-6xl */
    line-height: 1;
}

.ampersand-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.ampersand {
    font-size: 1.875rem; /* text-3xl */
}

.line {
    height: 1px;
    width: 4rem;
    background-color: rgba(255,255,255,0.5);
}

.line.white { background-color: rgba(255,255,255,0.6); }
.line.black { background-color: rgba(0,0,0,0.6); }

.hero-details {
    padding-top: 2rem;
}

.details-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}

.detail-icon {
    width: 1.25rem;
    height: 1.25rem;
    /* Cambia questo codice con il colore che preferisci */
    color: #A3B18A; /* Verde Salvia Chiaro */
}

.hero-footer-text {
    color: #ffe4e6; /* rose-100 */
    letter-spacing: 0.025em;
}

/* --- PARALLAX WRAPPER --- */
.content-wrapper {
    position: relative;
}

.parallax-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0.7) contrast(1.1);
    z-index: 0;
}

.parallax-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.05);
    z-index: 1;
}

.relative-container {
    position: relative;
    z-index: 2;
}

/* --- INTRO SECTION --- */
.intro-section {
    position: relative;
    min-height: 70vh; /* h-[70vh] */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.intro-container {
    max-width: 48rem; /* max-w-3xl */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0 1.5rem;
}

.divider-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.icon-lg {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

.intro-text {
    font-size: 1.125rem; /* text-lg */
    line-height: 1.625;
}

/* --- MAP & LOCATION SECTION --- */
.bg-white-transparent {
    /* Questo assicura che il testo sia leggibile sopra il parallasse se necessario, 
       anche se nel design originale era trasparente/su sfondo immagine */
    background: transparent; 
    color: white;
}

/* Per la sezione "Come Arrivare", nel design originale il testo era scuro o chiaro?
   Dall'HTML originale, il titolo non aveva colore specifico ma i link erano scuri.
   Tuttavia, essendo sopra un'immagine parallasse, il testo dovrebbe essere bianco.
   Ho corretto qui per rendere il testo leggibile su sfondo scuro (img), 
   oppure aggiungiamo un background bianco alla sezione. 
   
   Nell'originale: la sezione "come-arrivare" NON aveva sfondo bianco, quindi testo bianco sopra img.
   MA: i link avevano classi 'text-black' e hover 'text-rose-700'. 
   Sistemo qui per coerenza: */

#come-arrivare {
    background-color: transparent; /* Aggiungo sfondo leggero per leggibilità mappa/testo */
    color: white; /* testo scuro */
    margin-top: 2rem;
    border-radius: 8px;
}

.link-dark {
    font-weight: 600;
    color: #A3B18A; 
    text-decoration: none;
}
.link-dark:hover { color:#344E41; }

.parking-list-container {
    max-width: 48rem;
    margin: 0 auto;
    text-align: left;
    font-size: 1.125rem;
    margin-bottom: 3rem;
}

.parking-list {
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}


.map-container {
    margin-top: 3rem;
}

/* --- PHOTO GRID SECTION --- */
.section-title {
    font-size: 3rem; /* text-5xl */
    line-height: 1;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.photo-item {
    background-color: white;
    padding: 0.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
    display: block;
}

.photo-img.contain {
    object-fit: contain;
}

.span-2-col { grid-column: span 2; }
.span-2-row { grid-row: span 2; }

/* --- GIFTS SECTION --- */
.intro-text-dark {
    color: #4b5563;
    max-width: 36rem;
    margin: 0 auto 2.5rem auto;
}

.icon-xl {
    width: 3rem; /* w-12 */
    height: 3rem;
    display: block;
}

.iban-card {
    max-width: 28rem;
    margin: 0 auto;
    padding: 2rem;
    background-color: #fff1f2; /* rose-50 */
    border: 1px solid #ffe4e6; /* rose-100 */
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: left;
}

.iban-label {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.iban-code {
    font-family: monospace;
    font-size: 1rem;
}

/* --- MEDIA QUERIES (DESKTOP) --- */
@media (min-width: 768px) {
    /* Navbar */
    .mobile-menu-btn { display: none; }
    .nav-desktop { display: flex; }
    
    /* Hero */
    .main-title { font-size: 6rem; /* md:text-8xl */ }
    .details-row { flex-direction: row; gap: 3rem; }
    
    /* Photo Grid */
    .photo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    /* AGGIUNGI QUESTO PER IL DESKTOP: */
    .hero-bg-img {
        object-position: center center;
    }
}