/* =============================================
   WOW RANGE – styles.css  (versione pulita)
   ============================================= */

/* ---- VARIABILI ---- */
:root {
  --bg:           #050505;
  --gold:         #d4af37;
  --gold-soft:    #f3deb0;
  --ink:          #f5efe0;
  --muted:        #c8b98a;
  --text:         #e4d9bb;
  --card-bg:      rgba(255,255,255,0.04);
  --card-border:  rgba(212,175,55,0.2);
  /* Schede vino: sfondo crema */
  --wc-bg:        #f5f0e8;
  --wc-border:    #d9cfb8;
  --wc-text:      #1a1208;
  --wc-sub:       #5a4e35;
  --wc-muted:     #7a6e55;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ---- BASE ---- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

/* ---- GLOW SFONDO ---- */
.ambient-glow {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 14% 10%, rgba(212,175,55,0.15), transparent 30%),
    radial-gradient(circle at 85% 88%, rgba(212,175,55,0.1), transparent 35%);
  pointer-events: none;
  z-index: -1;
}

/* ---- CONTENITORE PRINCIPALE ---- */
/* max 680px = larghezza form Google, centrato con padding laterali */
.form-flow-container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- BANNER HEADER ---- */
.form-header-image {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  line-height: 0;
}
.form-header-image img {
  width: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* ---- CARD GENERICA ---- */
.form-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
}

/* ---- CARD TITOLO ---- */
.title-card { text-align: center; }
.title-card h1 {
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1.15;
  margin-bottom: 0.4rem;
}
.hero__claim {
  font-size: 1rem;
  color: var(--gold-soft);
  letter-spacing: 0.05em;
}

/* ---- CARD TESTO ---- */
.text-card h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.8rem;
  letter-spacing: 0.04em;
}
.hero__subtitle {
  color: var(--text);
  font-size: 0.97rem;
  margin-bottom: 0.3rem;
}

/* ---- CARD IMMAGINE ---- */
.image-card {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}
.image-card img {
  width: 100%;
  border-radius: 14px;
}

/* ---- LISTA ENOTECHE ---- */
.form-card ul {
  list-style: none;
}
.form-card ul li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(212,175,55,0.1);
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}
.form-card ul li:last-child { border-bottom: none; }
.form-card ul li strong { color: var(--gold-soft); }

/* ---- TITOLO SEZIONE VINI ---- */
.form-card > h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
  text-align: center;
}

/* ---- GRIGLIA VINI ---- */
/* Mobile: 1 col | Tablet (≥500px): 2 col | Desktop (≥760px): 3 col */
.wine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  align-items: start;
}
@media (min-width: 500px) {
  .wine-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) {
  .wine-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---- SCHEDA VINO (sfondo crema) ---- */
.wine-card {
  background: var(--wc-bg);
  border: 1px solid var(--wc-border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-self: start;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.wine-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 0 8px rgba(212,175,55,0.2);
  border-color: var(--gold);
}

.wine-card__top { margin-bottom: 0.35rem; }
.wine-card__top strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wc-text);
  line-height: 1.3;
}

.wine-meta {
  font-size: 0.82rem;
  color: var(--wc-sub);
  margin-top: 0.25rem;
}
.wine-meta strong { color: var(--wc-text); }

/* ---- BADGE ---- */
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  margin-top: 0.55rem;
}
.badge--in-gara {
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(180,140,20,0.4);
  color: #7a5c00;
}

/* ---- BOTTONI ---- */
.btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.btn--gold {
  background: var(--gold);
  color: #000;
  width: 100%;
  margin-top: 0.8rem;
  min-height: 44px;
}
.btn--gold:hover { background: var(--gold-soft); transform: translateY(-1px); }
.btn--gold.active { background: var(--gold-soft); }

/* ---- STORE PICKER ---- */
.store-picker {
  margin-top: 0.6rem;
  padding: 0.7rem;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(180,140,20,0.25);
  border-radius: 8px;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.store-picker p {
  font-size: 0.72rem;
  color: var(--wc-sub); /* wc-muted gave 3.88:1 on panel bg — wc-sub gives 6.31:1 */
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.45rem;
}
.store-buttons { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.store-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  background: #1a1208;
  border: 1px solid rgba(212,175,55,0.45);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.12s;
}
.store-btn:hover { background: var(--gold); color: #000; transform: translateY(-1px); }

/* ---- CTA FINALE ---- */
.section--cta { text-align: center; }
.section--cta h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.section--cta p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.25rem; }
.section--cta .btn { margin-top: 1.2rem; padding: 0.75rem 2.5rem; font-size: 0.95rem; width: auto; }

/* ---- FOOTER ---- */
.footer {
  text-align: center;
  padding: 0.8rem 1rem 2.5rem;
  color: var(--muted);
  font-size: 0.85rem;
}
/* ---- DISCLAIMER CTA ---- */
.cta-disclaimer {
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.75;
  margin-top: 0.6rem;
  margin-bottom: 0;
  font-style: italic;
}

/* ---- PRIVACY NOTE FOOTER ---- */
.privacy-note {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.65;
  line-height: 1.5;
}

/* ======================================================
   ACCESSIBILITÀ — WCAG 2.2 AA
   ====================================================== */

/* Skip link — WCAG 2.4.1 Bypass Blocks */
.skip-link {
  position: absolute;
  top: -4rem;
  left: 0.5rem;
  background: var(--gold);
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus-visible {
  top: 0;
}

/* Focus-visible — WCAG 2.4.7 Focus Visible / 2.4.11 Focus Appearance */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* btn--gold has gold background: use dark outline for 3:1 contrast */
.btn--gold:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}
/* store-btn has dark bg: soft-gold outline is clearly visible */
.store-btn:focus-visible {
  outline: 3px solid var(--gold-soft);
  outline-offset: 2px;
}

/* Reduced motion — disables transitions/animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .wine-card:hover {
    transform: none;
  }
}