/* ============================================================================
   SITE — Ideal Bar, Lequile
   ----------------------------------------------------------------------------
   Impianto manifesto (tipografia enorme, molta aria), apertura oggetto-in-
   evidenza, movimento parallasse misurato (in site.js), respiro alternato
   (.sezione--alt alterna --fondo/--fondo-alt), forma morbida (raggi generosi,
   niente bordi, superfici piene, la separazione la fa il colore).
   ========================================================================= */

:root {
  --superficie-carta: #fff9ee;
}

body {
  background: var(--fondo);
}

.sezione--alt {
  background: var(--fondo-alt);
}

/* ——— Header ———————————————————————————————————————————————————————————— */

header[data-sito-header] {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px);
}

.intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}

.intestazione__logo img {
  width: 140px;
  height: 40px;
}

.intestazione nav[aria-label='Navigazione principale'] {
  display: none;
}

.intestazione [data-menu-desktop] {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  font-size: var(--t-piccolo);
}

.intestazione [data-menu-desktop] a {
  text-decoration: none;
  color: var(--testo-tenue);
  transition: color var(--durata-breve) var(--curva);
}

.intestazione [data-menu-desktop] a:hover {
  color: var(--accento);
}

.intestazione__cta {
  display: none;
  white-space: nowrap;
  font-size: var(--t-piccolo);
  text-decoration: none;
  padding: 0.6rem 1.25rem;
  border-radius: var(--raggio-interattivo);
  background: var(--accento);
  color: var(--su-accento);
  transition: background var(--durata-breve) var(--curva), transform var(--durata-breve) var(--curva);
}

.intestazione__cta:hover {
  background: var(--accento-scuro);
  transform: translateY(-1px);
}

[data-menu-toggle] {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
}

.icona-menu,
.icona-menu::before,
.icona-menu::after {
  width: 22px;
  height: 2px;
  background: var(--testo);
  border-radius: 2px;
  transition: transform var(--durata-breve) var(--curva), opacity var(--durata-breve) var(--curva);
}

.icona-menu {
  position: relative;
}

.icona-menu::before,
.icona-menu::after {
  content: '';
  position: absolute;
  left: 0;
}

.icona-menu::before { top: -7px; }
.icona-menu::after { top: 7px; }

.menu-aperto .icona-menu { background: transparent; }
.menu-aperto .icona-menu::before { transform: translateY(7px) rotate(45deg); }
.menu-aperto .icona-menu::after { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 860px) {
  .intestazione nav[aria-label='Navigazione principale'] { display: block; }
  .intestazione__cta { display: inline-block; }
  [data-menu-toggle] { display: none; }
}

/* ——— Menu mobile —————————————————————————————————————————————————————————
   #menu-mobile resta fuori da <header> (vedi GUIDA-TEMPLATE §8): può quindi
   essere posizionato fixed rispetto al viewport senza che il vetro
   dell'header (backdrop-filter) lo trasformi in containing block sbagliato. */

#menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  padding: var(--gronda);
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--durata) var(--curva);
}

.menu-aperto #menu-mobile {
  opacity: 1;
  visibility: visible;
}

#menu-mobile nav {
  width: 100%;
}

#menu-mobile ul {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}

#menu-mobile a {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  text-decoration: none;
  color: inherit;
}

.menu-mobile__cta {
  display: inline-block;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border-radius: var(--raggio-interattivo);
  background: var(--accento);
  color: var(--su-accento);
}

@media (min-width: 860px) {
  #menu-mobile { display: none; }
}

/* ——— Bottoni ——————————————————————————————————————————————————————————— */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--raggio-interattivo);
  font-size: var(--t-piccolo);
  text-decoration: none;
  min-height: 44px;
  transition: background var(--durata-breve) var(--curva), transform var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva);
}

.bottone--pieno {
  background: var(--accento);
  color: var(--su-accento);
}

.bottone--pieno:hover {
  background: var(--accento-scuro);
  transform: translateY(-2px);
}

.bottone--fantasma {
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--accento);
}

.bottone--fantasma:hover {
  background: color-mix(in srgb, currentColor 18%, transparent);
  transform: translateY(-2px);
}

.bottone--grande {
  padding: 1.1rem 2.25rem;
  font-size: var(--t-corpo);
}

/* ——— Hero — oggetto in evidenza + parallasse ——————————————————————————— */

.sezione-hero {
  padding-block: clamp(3rem, 4vw, 6rem) var(--spazio-sezione);
  overflow: clip;
}

.sezione-hero__griglia {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.sezione-hero__testo h1 {
  margin-top: var(--spazio-blocco);
}

.sezione-hero__sottotitolo {
  color: var(--testo-tenue);
}

.sezione-hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--spazio-blocco);
}

.sezione-hero__scena {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  border-radius: var(--raggio);
  background: radial-gradient(circle at 50% 35%, var(--fondo-alt), transparent 70%);
}

.sezione-hero__guglia {
  position: absolute;
  inset: 8% 20%;
  width: 60%;
  height: auto;
  color: color-mix(in srgb, var(--accento) 30%, transparent);
  will-change: transform;
}

.sezione-hero__oggetto {
  position: relative;
  width: 72%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: var(--ombra);
  will-change: transform;
}

@media (min-width: 880px) {
  .sezione-hero__griglia {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* ——— Storia / Occasioni / Feste — sezioni lettura centrata ————————————— */

.sezione-storia,
.sezione-feste,
.sezione-occasioni {
  max-width: 48rem;
}

/* ——— Piazza ———————————————————————————————————————————————————————————— */

.sezione-piazza {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.sezione-piazza__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raggio);
}

@media (min-width: 880px) {
  .sezione-piazza {
    grid-template-columns: 1fr 1fr;
  }
}

/* ——— Bancone — sezione densa, la parte "piena" del respiro alternato ——— */

.sezione-bancone__intro {
  max-width: 42rem;
  margin-bottom: var(--spazio-blocco);
}

.sezione-bancone__lista {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.carta {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--superficie-carta);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.carta h3 {
  font-size: var(--t-h4);
  margin-bottom: 0.5rem;
}

.carta p {
  color: var(--testo-tenue);
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .sezione-bancone__lista { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .sezione-bancone__lista { grid-template-columns: repeat(4, 1fr); }
}

/* ——— Gelateria — dettaglio pistacchio, usato solo qui ———————————————— */

.sezione-gelato {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.sezione-gelato .u-nota::before {
  background: var(--pistacchio);
}

.sezione-gelato__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raggio);
}

@media (min-width: 880px) {
  .sezione-gelato {
    grid-template-columns: 1fr 1fr;
  }
  .sezione-gelato__foto { order: 1; }
  .sezione-gelato__testo { order: 2; }
}

/* ——— Sala — respiro quasi vuoto, tipografia enorme ————————————————————— */

.sezione-sala {
  text-align: center;
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
}

.sezione-sala__claim {
  font-size: var(--t-h1);
  max-width: 20ch;
  margin-inline: auto;
}

.sezione-sala__testo {
  margin-inline: auto;
  color: var(--testo-tenue-su-scuro);
}

/* ——— Domande frequenti — <details> nativo, niente JS ——————————————————— */

.sezione-domande__lista {
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.domanda {
  background: var(--superficie-carta);
  border-radius: var(--raggio);
  padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem);
}

.domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  list-style: none;
}

.domanda summary::-webkit-details-marker {
  display: none;
}

.domanda summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--accento);
  transition: transform var(--durata-breve) var(--curva);
  flex-shrink: 0;
}

.domanda[open] summary::after {
  transform: rotate(45deg);
}

.domanda p {
  margin-top: 0.75rem;
  color: var(--testo-tenue);
}

/* ——— Dove siamo ———————————————————————————————————————————————————————— */

.sezione-dove__indirizzo {
  font-style: normal;
  font-size: var(--t-h4);
  font-family: var(--font-titoli);
  margin-block: var(--spazio-blocco) 0.5rem;
}

.sezione-dove__orari {
  color: var(--testo-tenue);
  margin-bottom: var(--spazio-blocco);
}

/* ——— Contatti — CTA finale ——————————————————————————————————————————— */

.sezione-contatti {
  background: var(--fondo-scuro);
  color: var(--testo-su-scuro);
  text-align: center;
}

.sezione-contatti__blocco h2 {
  max-width: 20ch;
  margin-inline: auto;
}

.sezione-contatti__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--spazio-blocco);
}

.sezione-contatti .bottone--fantasma {
  color: var(--testo-su-scuro);
}

.sezione-contatti__social {
  display: inline-block;
  margin-top: var(--spazio-blocco);
  color: var(--testo-tenue-su-scuro);
}

/* ——— Footer ———————————————————————————————————————————————————————————— */

footer {
  background: var(--fondo-scuro);
  color: var(--testo-tenue-su-scuro);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.piede {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
}

.piede a {
  color: inherit;
  text-decoration: none;
}

.piede__link {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.piede__disclaimer {
  width: 100%;
  opacity: 0.7;
}