/* Stili custom che affiancano Tailwind: overlay, navbar, parallax, animazioni,
   e gli input "editoriali" a sola riga inferiore. */

:root { color-scheme: light; }
html { scroll-padding-top: 4.5rem; }       /* compensa la navbar fissa sugli anchor */
body { -webkit-font-smoothing: antialiased; }

/* --- Navbar: nascosta sull'hero, compare scorrendo (classe .show via JS) --- */
#navbar {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s ease, opacity .45s ease, background .3s ease;
}
#navbar.show {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  background: rgba(247, 244, 238, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 18px rgba(0, 0, 0, .06);
}
#navbar .nav-link,
#navbar .nav-brand { color: #3f4d37; }
.nav-link:hover { color: #7c9460 !important; }

/* Testo dell'hero: leggera ombra per leggibilità sul Castello */
.hero-text { text-shadow: 0 2px 22px rgba(20, 28, 18, .45); }

/* --- Overlay verde morbido sulle immagini full-bleed --- */
/* Overlay forte: la foto diventa un fondale scurito, il testo sopra resta nitido
   e l'eventuale ritaglio dei volti non disturba. */
.overlay-forest {
  background: linear-gradient(to bottom,
    rgba(52, 66, 47, .74), rgba(52, 66, 47, .60), rgba(52, 66, 47, .82));
}
.overlay-soft { background: rgba(52, 66, 47, .38); }

/* --- Bande parallax (disattivate su mobile per fluidità) --- */
.bg-parallax { background-size: cover; background-position: center; background-attachment: fixed; }
@media (max-width: 768px) { .bg-parallax { background-attachment: scroll; } }

/* --- Freccia "scorri" --- */
.scroll-cue { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* --- Reveal allo scroll (scoped .js: senza JS resta tutto visibile) --- */
.reveal { transition: opacity 1s ease, transform 1s ease; }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* --- Riga sottile d'accento --- */
.rule { width: 56px; height: 2px; background: #8B4513; }

/* --- Input "editoriali": niente box, solo riga inferiore --- */
.field {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(247, 244, 238, .4);
  color: #f7f4ee;
  border-radius: 0;
}
.field::placeholder { color: rgba(247, 244, 238, .5); }
.field:focus { outline: none; border-color: #a3b785; }
.field option { color: #34422f; }   /* leggibilità del menu a tendina */

/* Variante dei campi per fondo chiaro (RSVP su avorio) */
.field-l {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(60, 90, 60, .35);
  color: #33482c;
  border-radius: 0;
}
.field-l::placeholder { color: rgba(60, 90, 60, .5); }
.field-l:focus { outline: none; border-color: #7c9460; }

/* --- Didot (locale, TTF/OTF in /static/fonts/didot) = font dei titoli --- */
@font-face {
  font-family: 'Didot'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/didot/Didot%20Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Didot'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/didot/Didot%20Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Didot'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/didot/Didot%20LT%20Std%20Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Didot'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/static/fonts/didot/Didot%20LT%20Std%20Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Didot'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('/static/fonts/didot/Didot%20Bold%20Italic.woff2') format('woff2');
}