/* ============================================================
   theme-client.css — Stella del Lago
   ------------------------------------------------------------
   Identità dalla bozza grafica: verde bosco, terracotta, crema,
   Georgia per i titoli e font di sistema per il testo.
   Palette primaria/secondaria/accento arrivano dal DB (theme_settings)
   tramite --primary, --secondary, --accent; qui si definiscono solo
   i token che il pannello Tema non gestisce e i componenti d'autore.
   ============================================================ */

:root {
  /* --- Palette di supporto (le tre principali sono nel DB) ----------- */
  --cream: #F6F1E7;
  --secondary-strong: #963F27;  /* hover bottoni e testo terracotta piccolo su crema (contrasto > 4.5) */

  /* --- Toni testo e superfici (sovrascrivono i default di main.css) -- */
  --text: var(--primary);
  --text-light: #5D675F;
  --text-muted: #5D675F;
  --background: var(--cream);
  --background-alt: var(--cream);
  --border: #D8D0C3;
  --border-light: #E6DFD2;
  --text-on-header: var(--primary);
  --text-on-pageheader: var(--primary);
  --text-on-footer: var(--primary);

  /* --- Tipografia: Georgia non passa da Google Fonts ------------------ */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Forma ---------------------------------------------------------- */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 12px;
  --shadow: 0 12px 36px rgba(var(--primary-rgb), 0.08);
  --shadow-lg: 0 12px 36px rgba(var(--primary-rgb), 0.12);

  /* --- Ritmo ---------------------------------------------------------- */
  --container-max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-space: clamp(48px, 7vw, 96px);
  --header-height: 80px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body { font-family: var(--font-body); line-height: 1.6; }
h1, h2, h3, h4,
.section-title, .page-title, .hero-split__title, .pillar__title, .cta-content h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.06;
}

.container { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Link testuali: terracotta scuro, leggibile anche a corpo piccolo */
a { color: var(--secondary-strong); }
a:hover { color: var(--primary); }

/* Focus sempre visibile: contorno 2px, distanza 4px */
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 4px; }
.section-cta :focus-visible, .top-bar :focus-visible { outline-color: var(--cream); }

/* ============================================================
   Bottoni: 8px, altezza minima 48px, padding 24px, peso 600
   ============================================================ */
.btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}
.btn-primary { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.btn-primary:hover {
  background: var(--secondary-strong);
  border-color: var(--secondary-strong);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.btn-outline { background: transparent; border-color: var(--secondary-strong); color: var(--secondary-strong); }
.btn-outline:hover { background: var(--secondary-strong); border-color: var(--secondary-strong); color: #fff; }
.btn-lg { padding: 0 28px; font-size: 1rem; }

/* ============================================================
   Header, navigazione, footer
   ============================================================ */
.main-header { box-shadow: none; border-bottom: 1px solid var(--border); }
.logo img { height: 60px; width: auto; }
.nav-link { border-radius: 0; padding: 0.5rem 0.9rem; color: var(--primary); position: relative; }
.nav-link:hover, .nav-link.active { background: none; color: var(--secondary-strong); }
/* main.css forza display:inline-flex su ogni .btn sotto i 768px: sotto i 992px il CTA vive nel menu mobile */
@media (max-width: 991px) { .main-header .header-cta { display: none; } }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0;
  height: 2px;
  background: var(--secondary);
}
.mobile-nav { background: var(--cream); border-bottom: 1px solid var(--border); box-shadow: none; }
.mobile-nav-link { color: var(--primary); min-height: 48px; }
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--secondary-strong); }
.mobile-nav-link.btn { color: #fff; }
.mobile-nav-link.btn:hover { color: #fff; }

.main-footer { border-top: 1px solid var(--border); }
.footer-logo img { height: 60px; }
.footer-tagline { color: var(--text-light); }
.footer-social a { background: rgba(var(--primary-rgb), 0.08); color: var(--primary); }
.footer-social a:hover { background: var(--secondary); color: #fff; }
.footer-title { color: var(--primary); font-family: var(--font-heading); }
.footer-nav a, .footer-contact a, .footer-links a { color: var(--primary); }
.footer-nav a:hover, .footer-contact a:hover, .footer-links a:hover { color: var(--secondary-strong); }
.footer-hours .day, .footer-hours li.closed .time { color: var(--text-light); }
.footer-hours .time { color: var(--primary); }
.footer-bottom { border-top-color: var(--border); }
.footer-bottom-content { color: var(--text-light); }

/* ============================================================
   Intestazioni di pagina interna
   ============================================================ */
.page-header { padding: clamp(40px, 6vw, 72px) 0; margin-bottom: 0; border-bottom: 1px solid var(--border); }
.page-title { font-size: clamp(2.25rem, 5vw, 4rem); color: var(--primary); }
.page-subtitle { color: var(--text-light); max-width: 52ch; margin: 1rem auto 0; font-size: 1.125rem; }
.section-label { color: var(--secondary-strong); }
.section-title { color: var(--primary); font-size: clamp(2rem, 3vw, 3.5rem); }
.section-description { color: var(--text-light); }

/* ============================================================
   Home — hero diviso
   ============================================================ */
.hero-split { display: grid; grid-template-columns: 1fr; background: var(--cream); }
.hero-split__text {
  display: flex;
  align-items: center;
  padding: var(--section-space) var(--gutter);
}
.hero-split__inner { max-width: 38rem; }
.hero-split__title {
  font-size: clamp(2.5rem, 4.4vw, 5rem);
  color: var(--primary);
  margin-bottom: 1.5rem;
}
.hero-split__lead { font-size: 1.25rem; color: var(--primary); max-width: 28ch; margin-bottom: 2rem; }
.hero-split__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-split__media { aspect-ratio: 4 / 3; overflow: hidden; }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(640px, calc(100vh - var(--header-height))); }
  /* il testo parte dal margine del container, non dal bordo della finestra */
  .hero-split__text { padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter))); padding-right: clamp(24px, 3vw, 48px); }
  .hero-split__media { aspect-ratio: auto; }
}

/* ============================================================
   Home — fascia panoramica
   ============================================================ */
.panorama-band { background: var(--primary); }
.panorama-band img {
  width: 100%;
  height: clamp(220px, 32vw, 460px);
  object-fit: cover;
  object-position: center 55%;
}

/* ============================================================
   Home — tre specialità
   ============================================================ */
.section-pillars { background: var(--cream); padding: var(--section-space) 0; }
.section-pillars .section-header { display: block; margin-bottom: clamp(28px, 4vw, 48px); }
.pillars-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 34rem; margin: 0 auto; }
.pillar { text-align: left; }
.pillar__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; background: var(--border); }
.pillar__media img { width: 100%; height: 100%; object-fit: cover; }
.pillar__media-placeholder { display: grid; place-items: center; height: 100%; font-family: var(--font-heading); font-size: 2rem; color: var(--text-light); }
.pillar__title { font-size: 1.75rem; color: var(--primary); margin-bottom: 0.4rem; }
.pillar__text { color: var(--text-light); }

@media (min-width: 900px) {
  .pillars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: none; }
}

/* ============================================================
   Banda di chiusura (CTA)
   ============================================================ */
.section-cta { background: var(--primary); color: var(--cream); padding: var(--section-space) 0; }
.cta-content h2 { color: var(--cream); font-size: clamp(2rem, 3vw, 3.5rem); }
.cta-content p { opacity: 1; max-width: 46ch; margin: 0 auto 2rem; }
.section-cta .btn-primary:hover { background: var(--cream); border-color: var(--cream); color: var(--primary); }

/* ============================================================
   Pagine interne: card bianche con filo sottile al posto delle ombre.
   Gli stili base sono inline nei template: "main" alza la specificità.
   ============================================================ */
.page-title, .hero-split__title, .section-title, .cta-content h2 { text-wrap: balance; }

main .contact-card, main .hours-card, main .event-card-full, main .newsletter-box {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: var(--radius);
}
main .contact-card:hover { box-shadow: none; }
main .contact-card-icon { background: rgba(var(--secondary-rgb), 0.1); }
main .contact-card-link { color: var(--secondary-strong) !important; }
main .hours-list-full li.today { background: rgba(var(--secondary-rgb), 0.06); }
main .hours-list-full li.today .day-name,
main .hours-list-full li.today .day-hours { color: var(--secondary-strong); }
main .filter-btn { background: transparent; border-color: var(--border); color: var(--primary); border-radius: var(--radius-sm); min-height: 48px; display: inline-flex; align-items: center; }
main .filter-btn:hover { border-color: var(--secondary-strong); color: var(--secondary-strong); }
main .filter-btn.active { background: var(--secondary); border-color: var(--secondary); color: #fff; }
main .contact-info { align-items: start; }

/* ============================================================
   Contatti — come arrivare
   Ordine pensato per lo smartphone: navigatore, parcheggio, foto.
   ============================================================ */
.section-arrive { padding: var(--section-space) 0; border-bottom: 1px solid var(--border); }
/* l'ancora #come-arrivare non deve finire sotto l'header sticky */
#come-arrivare { scroll-margin-top: var(--header-height); }
.arrive { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.arrive__title { margin-bottom: 1.25rem; }
.arrive__lead { font-size: 1.125rem; color: var(--text-light); max-width: 46ch; margin-bottom: 1rem; text-wrap: pretty; }
.arrive__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 2rem 0; }
.arrive__go { gap: 0.6rem; }
.arrive__go svg { width: 22px; height: 22px; flex-shrink: 0; }
/* su smartphone è l'azione principale: tutta la larghezza, a portata di pollice */
@media (max-width: 599px) {
  .arrive__actions { flex-direction: column; align-items: stretch; text-align: center; }
  .arrive__go, .arrive__alt { justify-content: center; }
}
.arrive__alt {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.arrive__parking {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 30rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* il segnale stradale del parcheggio: il simbolo che chi guida riconosce subito */
.arrive__parking-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: #1F5AA6;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.arrive__parking-title { font-size: 1.25rem; color: var(--primary); margin: 0 0 0.25rem; }
.arrive__parking-text { color: var(--text-light); margin: 0; }
.arrive__photo { margin: 0; }
.arrive__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--border);
}
.arrive__photo figcaption { margin-top: 0.75rem; color: var(--text-light); font-size: 0.95rem; }
.arrive__photo figcaption strong { display: block; color: var(--primary); font-family: var(--font-heading); font-size: 1.125rem; }

@media (min-width: 900px) {
  .arrive { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .arrive__photo img { max-height: 640px; }
}

/* ============================================================
   Eventi — feste private (sotto il calendario)
   ============================================================ */
.section-parties { padding: var(--section-space) 0; border-top: 1px solid var(--border); }
.parties { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.parties__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--border);
}
.parties__title { margin-bottom: 1.25rem; }
.parties__lead { font-size: 1.125rem; color: var(--text-light); max-width: 46ch; margin-bottom: 1.5rem; text-wrap: pretty; }
.parties__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.75rem; }
.parties__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--primary);
}
/* la stella del logo come punto elenco */
.parties__list li::before { content: '✶'; color: var(--secondary); font-size: 1rem; }

@media (min-width: 900px) {
  .parties { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .parties__photo img { max-height: 620px; }
}

/* ============================================================
   Home — introduzione e domande frequenti
   ============================================================ */
.section-intro { padding: var(--section-space) 0; background: var(--cream); }
.intro { max-width: 46rem; margin: 0 auto; text-align: center; }
.intro__title { margin-bottom: 1.25rem; }
.intro__text { font-size: 1.2rem; line-height: 1.7; color: var(--text-light); text-wrap: pretty; }
/* su smartphone un paragrafo lungo centrato si legge male */
@media (max-width: 599px) { .intro__text { text-align: left; font-size: 1.1rem; } }

.section-faq { padding: var(--section-space) 0; border-top: 1px solid var(--border); }
.faq { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); }
.faq__list { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  padding: 1.1rem 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--secondary-strong);
}
.faq__item[open] .faq__question::after { content: '−'; }
.faq__question:hover { color: var(--secondary-strong); }
.faq__answer { margin: 0 0 1.25rem; max-width: 60ch; color: var(--text-light); font-size: 1.05rem; }

@media (min-width: 900px) {
  .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}

/* Footer senza colonna orari (non ancora inseriti): tre colonne piene */
@media (min-width: 992px) { .footer-grid--no-hours { grid-template-columns: 2fr 1fr 1.5fr; } }