/* ============================================================
   La Bislunga — Custom Styles
   Template: Maccheroni Republic style
   Palette: Red #CC1A1A · Red light #E23B3B · Red dark #9E1414 · Cream #F8F5EF · Beige #e8e4db
   (Solo Bianco + Rosso del logo e relative sfumature — nessun giallo/oro, nessun verde:
    le bande scure usano il rosso brand #CC1A1A)
   Fonts: Archivo (titoli) + Montserrat (corpo)
   ============================================================ */

/* --- Font titoli: HORIZON (file locale) --- */
@font-face {
  font-family: 'Horizon';
  src: url('../fonts/Horizon.woff2') format('woff2'),
       url('../fonts/Horizon.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body { font-family: 'Montserrat', sans-serif; background-color: #e8e4db; }
.font-serif { font-family: 'Archivo', sans-serif !important; }

/* --- Titoli display (HORIZON) --- */
.t-display {
  font-family: 'Horizon', 'Archivo', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.01em !important;
  line-height: 1.2;
  overflow-wrap: break-word;
}
/* Horizon è molto più largo di Archivo: su schermi stretti uso dimensioni
   fluide (vw) così i titoli non sforano mai oltre la larghezza dello schermo. */
@media (max-width: 639px) {
  .t-display { letter-spacing: 0 !important; }
  .t-display.text-5xl { font-size: clamp(1.6rem, 8.5vw, 2.25rem) !important; }
  .t-display.text-4xl { font-size: clamp(1.4rem, 7vw, 1.875rem) !important; }
  .t-display.text-3xl { font-size: clamp(1.25rem, 6vw, 1.5rem) !important; }
  .t-display.text-2xl { font-size: clamp(1.15rem, 5.5vw, 1.375rem) !important; }
}
/* Titoli con una parola molto lunga in colonna stretta su desktop (es.
   "dall'Idroscalo"): dimensione fluida che resta dentro la colonna a 2 col. */
@media (min-width: 1024px) {
  .t-display.t-fit-lg { font-size: clamp(2rem, 3vw, 2.7rem) !important; }
}
/* parola accento in rosso: <em> dentro un titolo .t-display */
.t-display em { font-style: normal; color: #CC1A1A; }
/* hero su sfondo scuro (foto): accento rosso più luminoso */
.t-display.on-dark em { color: #E23B3B; }
/* sezioni su banda rossa: il rosso sparirebbe, accento in rosa chiaro leggibile */
.t-display.on-red em { color: #FFCFC7; }

/* --- Titolo hero homepage: serif (Fraunces) + parola RUGBY in Horizon --- */
.hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero-title .rugby {
  font-family: 'Horizon', 'Archivo', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: #E23B3B;
  /* Horizon è enormemente più largo/alto di un serif: compenso la scala */
  font-size: 0.78em;
  letter-spacing: 0.01em;
  vertical-align: baseline;
}
@media (max-width: 639px) {
  /* su mobile il serif può stare più grande dei titoli Horizon */
  .hero-title.text-5xl { font-size: clamp(2rem, 9.5vw, 2.8rem); }
}

::-webkit-scrollbar { width: 0; background: transparent; }
::selection { background: rgba(204,26,26,0.2); color: #1A1A1A; }
:focus-visible { outline: 2px solid #CC1A1A; outline-offset: 2px; }
html { scroll-behavior: smooth; }

/* Date/time picker */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; }

/* --- Hero slideshow (crossfade + Ken Burns) --- */
.hero-slideshow { position: absolute; inset: 0; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation: heroCrossfade 32s linear infinite;
  will-change: opacity, transform;
}
/* 4 slide → ogni slide visibile ~8s, dissolvenza morbida */
.hero-slide:nth-child(1) { animation-delay:  0s; }
.hero-slide:nth-child(2) { animation-delay:  8s; }
.hero-slide:nth-child(3) { animation-delay: 16s; }
.hero-slide:nth-child(4) { animation-delay: 24s; }
@keyframes heroCrossfade {
  0%    { opacity: 0; transform: scale(1.0); }
  3%    { opacity: 1; }
  22%   { opacity: 1; }
  28%   { opacity: 0; }
  100%  { opacity: 0; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:nth-child(1) { opacity: 1; }
}

/* --- Hero entrance animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-enter { opacity: 0; animation: fadeInUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* --- Scroll reveal --- */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }

/* --- Marquee --- */
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-track { animation: marquee 35s linear infinite; display: flex; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }

/* --- Nav scroll transition --- */
#header { transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease; }
#header.scrolled { background: rgba(204,26,26,0.95) !important; backdrop-filter: blur(14px); box-shadow: 0 2px 24px rgba(0,0,0,0.18); }

/* --- Nav dropdown --- */
.nav-dropdown { visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: none; }
.nav-drop-group:hover .nav-dropdown { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }

/* --- Mobile overlay --- */
#mobileOverlay { display: none; }
#mobileOverlay.open { display: flex; }

/* --- WhatsApp Float --- */
.whatsapp-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  width: 56px; height: 56px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(37,211,102,0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: wa-pulse 3s infinite;
}
.whatsapp-float:hover { transform: scale(1.12) translateY(-3px); box-shadow: 0 10px 35px rgba(37,211,102,0.55); animation: none; }
@keyframes wa-pulse {
  0%   { box-shadow: 0 4px 24px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,.3); }
  70%  { box-shadow: 0 4px 24px rgba(37,211,102,.4), 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 24px rgba(37,211,102,.4), 0 0 0 0 rgba(37,211,102,0); }
}

/* --- Back to Top --- */
#back-to-top {
  position: fixed; bottom: 28px; right: 96px; z-index: 9998;
  width: 44px; height: 44px; background: rgba(248,245,239,0.9);
  border: 1px solid rgba(0,0,0,0.12); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(8px);
}
#back-to-top.visible { opacity: 1; pointer-events: auto; }
#back-to-top:hover { border-color: #CC1A1A; transform: translateY(-2px); }

/* --- Cookie Banner --- */
#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9997; transform: translateY(100%); transition: transform 0.5s ease; }
#cookie-banner.show { transform: translateY(0); }

/* --- Form inputs (underline style) --- */
.form-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(26,26,26,0.22);
  padding: 10px 0;
  color: #1A1A1A;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  transition: border-color 0.2s;
}
.form-input::placeholder { color: rgba(26,26,26,0.3); }
.form-input:hover { border-color: rgba(26,26,26,0.4); }
.form-input:focus { outline: none; border-color: #CC1A1A; }
select.form-input { appearance: none; -webkit-appearance: none; cursor: pointer; }
select.form-input option { background-color: #F8F5EF; color: #1A1A1A; }

/* --- Alert --- */
.alert { padding: 1rem 1.25rem; border-radius: 1rem; font-size: 0.875rem; font-family: 'Montserrat', sans-serif; }
.alert-success { background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.3); color: #15803d; }
.alert-error   { background: rgba(204,26,26,0.08); border: 1px solid rgba(204,26,26,0.25); color: #b91c1c; }

/* --- Map --- */
.map-embed { width: 100%; height: 100%; border: 0; border-radius: 1.5rem; filter: grayscale(15%); }

/* --- Menu tabs --- */
.menu-category { display: none; }
.menu-category.active { display: block; }
.menu-tab { cursor: pointer; transition: all 0.2s; }