/* ============================================================
   MATRIMONIO — Custom Styles
   Palette: ivory #FAF6F0 | gold #C9A961 | sage #9CAF88 | graphite #2C2C2C
   ============================================================ */

/* --- BASE --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body { background-color: #FAF6F0; color: #2C2C2C; }

/* --- HERO BACKGROUND --- */
.hero-bg {
    background-image: url('/assets/img/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Gradient fallback quando non c'è immagine */
    background-color: #2C2C2C;
}

/* Fallback gradient elegante se hero.jpg non esiste */
.hero-bg:not([style*="url"]) {
    background: linear-gradient(135deg, #2C2C2C 0%, #4a3728 40%, #2C2C2C 100%);
}

/* --- NAVIGAZIONE BOTTOM --- */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #2C2C2C;
    opacity: 0.45;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.03em;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 12px;
    transition: opacity 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

/* L'etichetta resta su una sola riga (utile per voci con spazio, es. "Un pensiero") */
.nav-item span { white-space: nowrap; }

/* Su schermi molto stretti riduco il padding per far stare tutte le voci in riga */
@media (max-width: 360px) {
    .nav-item { padding: 6px 6px; }
}

.nav-item:hover,
.nav-item.active {
    opacity: 1;
    color: #C9A961;
}


/* --- SECTION DIVIDER --- */
.section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #C9A961 30%, #C9A961 70%, transparent);
    opacity: 0.25;
    margin: 0 24px;
}

/* --- SECTION TITLE --- */
.section-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    color: #2C2C2C;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* --- BUTTON OUTLINE --- */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #C9A961;
    color: #C9A961;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    border-radius: 12px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    background: transparent;
    cursor: pointer;
}

.btn-outline:hover {
    background-color: #C9A961;
    color: white;
}

/* --- ORNAMENT --- */
.ornament {
    font-family: Georgia, serif;
    user-select: none;
}

/* --- SMOOTH IMAGES --- */
img {
    display: block;
    max-width: 100%;
}

/* --- TABULAR NUMBERS --- */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* --- LIGHTBOX OVERRIDES --- */
.glightbox-clean .gclose {
    background-color: rgba(44, 44, 44, 0.8);
}

/* --- SPINNER --- */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 0.8s linear infinite;
}

/* --- SCROLL NASCOSTO --- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- HERO ASSETS (cartella da creare) ---
   Inserisci una foto del matrimonio o di una location elegante
   come /assets/img/hero.jpg (proporzioni 16:9 o panoramica)
   Dimensione consigliata: 1920x1080px, qualità 80%
*/