/* ============================================================
   theme-autumn.css
   Palette autunnale per il sito matrimonio Brenda & Alessio
   Collega DOPO il blocco <style> inline nell'HTML:
   <link rel="stylesheet" href="theme-autumn.css" />
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — modifica qui per aggiornare tutto il sito
   ════════════════════════════════════════════════════════════ */
:root {

  /* ── Palette primaria autunnale ── */
  --autumn-sienna:       #c4622d;   /* arancio bruciato (azione principale) */
  --autumn-sienna-dark:  #8b3a1a;   /* sienna scuro (hover, bordi) */
  --autumn-sienna-light: #e8a87c;   /* pesca (sfondo badge, accenti chiari) */
  --autumn-amber:        #c8860a;   /* ambra dorata (dettagli, icone) */
  --autumn-amber-light:  #f0d49a;   /* ambra chiara (tag, highlight) */

  /* ── Palette secondaria ── */
  --autumn-burgundy:     #6b2d3e;   /* borgogna (timeline dot, bordo top card) */
  --autumn-rust:         #9e3d1f;   /* ruggine (variante scura sienna) */
  --autumn-forest:       #3a4a2a;   /* verde foresta (contrasto) */
  --autumn-mustard:      #b5890d;   /* senape (variante amber scura) */

  /* ── Neutrali caldi ── */
  --autumn-cream:        #faf0e6;   /* sfondo principale — lino */
  --autumn-ivory:        #f5e6d3;   /* sfondo alternato — avorio caldo */
  --autumn-parchment:    #ede0cc;   /* pergamena (input background) */
  --autumn-sand:         #d9c4a8;   /* bordi input, divisori */

  /* ── Testo ── */
  --autumn-text:         #2e1f14;   /* testo principale — marrone notte */
  --autumn-text-muted:   #7a5c44;   /* testo secondario — marrone medio */
  --autumn-text-faint:   #a88b72;   /* testo terziario — nocciola */

  /* ── Hero / sfondi scuri ── */
  --autumn-dark-1:       #1a0907;   /* quasi nero caldo */
  --autumn-dark-2:       #2e1505;   /* marrone notte */
  --autumn-dark-3:       #4a2010;   /* marrone scuro */
  --autumn-dark-4:       #3a1a08;   /* marrone medio-scuro */

  /* ── Feedback ── */
  --autumn-success-bg:   #f0f4e8;
  --autumn-success-text: #3a5a1a;
  --autumn-success-border:#b8d49a;
  --autumn-error-bg:     #fdf0ec;
  --autumn-error-text:   #7a2010;
  --autumn-error-border: #e8b49a;

  /* ── Effetti ── */
  --autumn-shadow:       0 4px 30px rgba(46, 31, 20, .12);
  --autumn-shadow-lg:    0 10px 60px rgba(46, 31, 20, .18);
  --autumn-shadow-gold:  0 6px 24px rgba(196, 98, 45, .36);

  /* ════════════════════════════════════════════
     Mappatura semantica — alias verso il codice
     esistente. Non modificare i nomi a sinistra.
     ════════════════════════════════════════════ */
  --gold:        var(--autumn-sienna);
  --gold-dark:   var(--autumn-sienna-dark);
  --gold-light:  var(--autumn-amber-light);
  --cream:       var(--autumn-cream);
  --ivory:       var(--autumn-ivory);
  --text:        var(--autumn-text);
  --text-light:  var(--autumn-text-muted);
  --white:       #ffffff;
  --shadow:      var(--autumn-shadow);
  --shadow-lg:   var(--autumn-shadow-lg);
}


/* ════════════════════════════════════════════════════════════
   2. HERO — gradiente autunnale
   ════════════════════════════════════════════════════════════ */
#hero {
  background: linear-gradient(
    150deg,
    var(--autumn-dark-1)  0%,
    var(--autumn-dark-4) 25%,
    var(--autumn-dark-3) 55%,
    var(--autumn-dark-2) 80%,
    var(--autumn-dark-1) 100%
  );
}

#hero::before {
  background: radial-gradient(
    ellipse at 60% 40%,
    rgba(196, 98, 45, .18) 0%,
    rgba(200, 134, 10, .08) 40%,
    transparent 70%
  );
}

/* Foglie decorative al posto di ❧ */
.hero-ornament {
  color: var(--autumn-sienna);
  opacity: .18;
}


/* ════════════════════════════════════════════════════════════
   3. NAVBAR
   ════════════════════════════════════════════════════════════ */
nav.scrolled {
  background: rgba(250, 240, 230, .97);
  border-bottom: 1px solid var(--autumn-sand);
}

nav.scrolled .nav-logo { color: var(--autumn-text); }
nav.scrolled .nav-links a { color: var(--autumn-text-muted); }
nav.scrolled .nav-links a:hover { color: var(--autumn-sienna); }
nav.scrolled .nav-hamburger span { background: var(--autumn-text); }


/* ════════════════════════════════════════════════════════════
   5. COUNTDOWN
   ════════════════════════════════════════════════════════════ */
#countdown {
  background: var(--autumn-ivory);
}

.cd-num {
  color: var(--autumn-sienna-dark);
}

.cd-sep {
  color: var(--autumn-sienna);
  opacity: .4;
}


/* ════════════════════════════════════════════════════════════
   6. DETAIL CARDS
   ════════════════════════════════════════════════════════════ */
.detail-card {
  border-top-color: var(--autumn-burgundy);
}

.btn-map {
  background: var(--autumn-sienna);
}

.btn-map:hover {
  background: var(--autumn-sienna-dark);
}


/* ════════════════════════════════════════════════════════════
   7. TIMELINE
   ════════════════════════════════════════════════════════════ */
#itinerary {
  background: var(--autumn-ivory);
}

.timeline::before {
  background: linear-gradient(
    to bottom,
    transparent,
    var(--autumn-sienna) 15%,
    var(--autumn-amber)  50%,
    var(--autumn-sienna) 85%,
    transparent
  );
}

.tl-dot {
  background: var(--autumn-sienna);
  box-shadow: 0 0 0 2px var(--autumn-sienna);
  border-color: var(--autumn-ivory);
}

.tl-time {
  color: var(--autumn-sienna-dark);
}


/* ════════════════════════════════════════════════════════════
   8. RSVP FORM
   ════════════════════════════════════════════════════════════ */
#rsvp {
  background: linear-gradient(135deg, var(--autumn-cream), var(--autumn-ivory));
}

.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group select,
.form-group textarea {
  border-color: var(--autumn-sand);
  /*background: var(--autumn-parchment);*/
}

.form-group input:not([type="radio"]):not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--autumn-sienna);
  background: var(--autumn-cream);
  box-shadow: 0 0 0 3px rgba(196, 98, 45, .14);
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b3a1a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.btn-submit {
  background: linear-gradient(135deg, var(--autumn-sienna), var(--autumn-sienna-dark));
}

.btn-submit:hover:not(:disabled) {
  box-shadow: var(--autumn-shadow-gold);
}

.form-msg.success {
  background: var(--autumn-success-bg);
  color:       var(--autumn-success-text);
  border-color:var(--autumn-success-border);
}

.form-msg.error {
  background: var(--autumn-error-bg);
  color:       var(--autumn-error-text);
  border-color:var(--autumn-error-border);
}

.radio-opt input[type="radio"] {
  accent-color: var(--autumn-sienna);
}


/* ════════════════════════════════════════════════════════════
   9. DIVIDER
   ════════════════════════════════════════════════════════════ */
.divider::before,
.divider::after {
  background: var(--autumn-sienna);
  opacity: .4;
}

.divider-icon {
  color: var(--autumn-sienna);
}


/* ════════════════════════════════════════════════════════════
   10. FOOTER
   ════════════════════════════════════════════════════════════ */
footer {
  background: var(--autumn-dark-1);
}

.footer-names {
  color: var(--autumn-sienna-light);
}

.footer-credits {
  color: rgba(255, 255, 255, .25);
}


/* ════════════════════════════════════════════════════════════
   11. ADMIN PANEL
   ════════════════════════════════════════════════════════════ */
.adm-box {
  background: var(--autumn-cream);
}

.adm-header {
  border-bottom-color: var(--autumn-amber-light);
}

th {
  background: var(--autumn-ivory);
  border-bottom-color: var(--autumn-amber-light);
}

td { border-bottom-color: var(--autumn-parchment); }
tr:hover td { background: var(--autumn-cream); }

.stat.total {
  background: var(--autumn-amber-light);
  color:      var(--autumn-mustard);
}

.btn-export {
  background: var(--autumn-sienna);
}

.btn-export:hover {
  background: var(--autumn-sienna-dark);
}


/* ════════════════════════════════════════════════════════════
   12. HERO CTA & OUTLINE BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn-outline {
  border-color: var(--autumn-sienna-light);
  color:        var(--autumn-sienna-light);
}

.btn-outline:hover {
  background: var(--autumn-sienna-light);
  color:      var(--autumn-text);
}

.hero-amp       { color: var(--autumn-amber); opacity: .75; }
.hero-eyebrow   { color: var(--autumn-sienna-light); }
.hero-names em  { color: var(--autumn-sienna-light); }
.hero-scroll    { color: rgba(255,255,255,.3); }

/* ════════════════════════════════════════════════════════════
   13. MOBILE MENU OVERLAY — elemento esterno al nav
       Risolve il bug backdrop-filter containing block
   ════════════════════════════════════════════════════════════ */
   .mob-overlay {
	visibility: hidden; 
	display: none;
   }
@media (max-width: 768px) {

  /* Nascondi la nav-links originale: su mobile usiamo l'overlay separato */
  .nav-links { display: none !important; }

  /* Hamburger sempre visibile, sopra l'overlay */
  .nav-hamburger {
    display: flex;
    z-index: 1100;
    position: relative;
  }

  /* ── Overlay ── */
  .mob-overlay {
    display: flex;               /* flex per centrare il contenuto */
    visibility: hidden;          /* nascosto senza rimuovere dal DOM */
    opacity: 0;
    position: fixed;
    inset: 0;
    z-index: 1050;               /* sopra nav (1000) e admin panel escluso */
    background: rgba(26, 9, 7, .98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity .3s ease, visibility .3s ease;
    pointer-events: none;
  }

  .mob-overlay.open {
    visibility: visible;
	display: flex;
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Link dentro l'overlay ── */
  .mob-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.8rem;
    padding: 0;
    margin: 0;
  }

  .mob-links a {
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    transition: color .25s ease;
  }

  .mob-links a:hover {
    color: var(--autumn-sienna-light, #e8a87c);
  }

  /* ── Hamburger → X quando menu è aperto ── */
  .nav-hamburger span {
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
  }

  .nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}