/* =========================================================================
   Wedding Est — gestionale per location di matrimonio
   v1
   Palette: i tre verdi di TheFork, letti dal sito e usati come superfici.
   Tipografia: Archivo in larghezza espansa (display) contro Public Sans (testo).
   ========================================================================= */

:root {
  /* colore */
  --bosco:       oklch(45.8% 0.082 181.1);  /* #00665a */
  --bosco-cupo:  oklch(35.3% 0.064 180.7);  /* #00463d */
  --foglia:      oklch(51.4% 0.136 151.4);  /* #047c3c */
  --menta:       oklch(94.0% 0.118 139.5);  /* #c2ffb3 */
  --inchiostro:  oklch(20.4% 0.027 182.6);  /* #071b18 */
  --nebbia:      oklch(96.8% 0.007 151.9);  /* #f1f6f2 */
  --bianco:      oklch(100% 0 90);
  --bordo:       oklch(90.0% 0.024 155.1);  /* #d2e3d7 */
  --grigio:      oklch(42.6% 0.029 183.0);  /* #3d5450 */
  --bordo-scuro: oklch(30.0% 0.030 182.0);

  /* tipografia */
  --display: "Archivo", "Arial Black", system-ui, sans-serif;
  --testo: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* misure */
  --larghezza: 74rem;
  --margine: 1.25rem;
  --raggio: 4px;
  --raggio-schermo: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nebbia);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; max-width: 62ch; }

:focus-visible {
  outline: 3px solid var(--foglia);
  outline-offset: 3px;
  border-radius: 2px;
}

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--margine);
}

.visivamente-nascosto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: -9999px; top: 0;
  background: var(--inchiostro); color: var(--bianco);
  padding: .75rem 1.25rem; z-index: 100; text-decoration: none;
}
.salta:focus { left: 0; }

/* ---------------------------------------------------------------- testata */

.testata {
  position: sticky; top: 0; z-index: 40;
  background: var(--nebbia);
  border-bottom: 1px solid var(--bordo);
}

.testata__interno {
  max-width: var(--larghezza);
  margin-inline: auto;
  padding: .7rem var(--margine);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}

.marchio {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--bosco);
  min-height: 44px;
}

.marchio__segno { flex: none; }

.marchio__nome {
  font-family: var(--display);
  font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: 1.1rem; letter-spacing: -0.01em;
  color: var(--inchiostro);
}

.apri-menu {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; min-width: 44px;
  padding: .4rem .7rem;
  background: transparent;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  color: var(--inchiostro);
  font: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer;
}
.apri-menu:hover { border-color: var(--bosco); }

.apri-menu__barre { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.apri-menu__barre span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.apri-menu[aria-expanded="true"] .apri-menu__barre span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.apri-menu[aria-expanded="true"] .apri-menu__barre span:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] .apri-menu__barre span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  background: var(--inchiostro);
  padding: 5.5rem var(--margine) 2.5rem;
  transform: translateY(-105%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 30;
}
.menu.aperto { transform: translateY(0); }

.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }

.menu a {
  display: flex; align-items: center;
  min-height: 56px;
  color: var(--nebbia);
  font-family: var(--display);
  font-weight: 700; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: 1.6rem;
  text-decoration: none;
  border-bottom: 1px solid var(--bordo-scuro);
}
.menu a:hover { color: var(--menta); }

/* ---------------------------------------------------------------- apertura */

.apertura { padding-block: 3.5rem 3rem; }

/* la parola più lunga, "appuntamenti", detta il massimo:
   in Archivo espanso oltre 9.8vw esce dal margine a 375px */
.apertura__titolo {
  font-size: clamp(2.1rem, 9.8vw, 7rem);
  line-height: 0.92;
  margin-bottom: 1.5rem;
}

.apertura__titolo .riga { display: block; }
.apertura__titolo .riga--coda { color: var(--bosco); }

.apertura__testo {
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  color: var(--grigio);
  max-width: 46ch;
  margin-bottom: 2rem;
}

.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .8rem 1.8rem;
  background: var(--bosco); color: var(--bianco);
  font-weight: 600; font-size: 1.05rem;
  text-decoration: none;
  border-radius: var(--raggio);
  transition: background .16s ease;
}
.bottone:hover { background: var(--bosco-cupo); }

/* --------------------------------------------------------------- confronto */

.confronto { background: var(--bianco); padding-block: 3rem; border-block: 1px solid var(--bordo); }

.titolo-sezione {
  font-size: clamp(1.75rem, 6vw, 2.9rem);
  margin-bottom: 1.75rem;
}
.titolo-sezione--chiaro { color: var(--nebbia); }

.tabella { width: 100%; border-collapse: collapse; font-size: 1rem; }

.tabella thead { display: none; }

.tabella tbody tr {
  display: block;
  padding-block: 1.1rem;
  border-top: 1px solid var(--bordo);
}
.tabella tbody tr:last-child { border-bottom: 1px solid var(--bordo); }

.tabella th[scope="row"] {
  display: block; text-align: left;
  font-family: var(--display);
  font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: 1.3rem;
  margin-bottom: .5rem;
}

.tabella td { display: block; padding: 0; }

.tabella td::before {
  content: attr(data-etichetta);
  display: block;
  font-size: .82rem; font-weight: 600;
  color: var(--grigio);
  margin-top: .5rem;
}

.tabella td[data-etichetta="Oggi"] { color: var(--grigio); text-decoration: line-through 1px; text-decoration-color: var(--bordo); }
.tabella td[data-etichetta="Con Wedding Est"] { color: var(--bosco); font-weight: 500; }

/* ---------------------------------------------------------------- funzioni */

.funzioni {
  background: var(--inchiostro);
  color: var(--nebbia);
  padding-block: 3.5rem;
}

.funzioni__premessa {
  color: var(--bordo);
  font-size: 1.1rem;
  max-width: 44ch;
  margin-bottom: 2.5rem;
}

.funzioni__elenco { display: grid; gap: 2.75rem; }

.funzione__testo h3 {
  font-size: 1.7rem;
  margin-bottom: .6rem;
  color: var(--colore-funzione, var(--menta));
}
.funzione__testo p { color: var(--bordo); margin-bottom: 1.25rem; }

.funzione--preventivi { --colore-funzione: var(--menta); }
.funzione--calendario { --colore-funzione: oklch(84% 0.14 148); }
.funzione--menu       { --colore-funzione: oklch(88% 0.06 178); }

/* finta interfaccia: illustrazione del prodotto, nessun dato reale */
.finta-ui {
  background: var(--bianco);
  color: var(--inchiostro);
  border-radius: var(--raggio-schermo);
  padding: .9rem 1rem 1.1rem;
  font-size: .92rem;
  box-shadow: 0 18px 40px oklch(0% 0 0 / .35);
}

.finta-ui__barra {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: .6rem; margin-bottom: .4rem;
  border-bottom: 2px solid var(--colore-barra, var(--bosco));
  font-weight: 600;
}
.funzione--preventivi .finta-ui { --colore-barra: var(--bosco); }
.funzione--calendario .finta-ui { --colore-barra: var(--foglia); }
.funzione--menu .finta-ui       { --colore-barra: var(--bosco-cupo); }

.finta-ui__stato {
  font-size: .8rem; font-weight: 500; color: var(--grigio);
  font-variant-numeric: tabular-nums;
}

.finta-ui__riga {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding-block: .45rem;
  border-bottom: 1px solid var(--nebbia);
}
.finta-ui__riga--totale { border-bottom: 0; font-weight: 600; padding-top: .7rem; }
.finta-ui__riga--nota { border-bottom: 0; color: var(--grigio); font-size: .85rem; }

.finta-ui__num { font-variant-numeric: tabular-nums; font-weight: 600; }

.misura { display: block; height: 9px; border-radius: 2px; background: var(--bordo); }
.misura--s { width: 34px; }
.misura--m { width: 48px; }
.misura--l { width: 62px; }
.misura--xl { width: 78px; background: var(--bosco); }

.griglia-giorni {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 3px; margin-block: .6rem .3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.griglia-giorni span { font-size: .68rem; color: var(--grigio); padding-block: 2px; }
.griglia-giorni b {
  font-weight: 400; font-size: .78rem;
  padding-block: 5px; border-radius: 3px;
}
.griglia-giorni b.pieno { background: var(--foglia); color: var(--bianco); font-weight: 600; }
.griglia-giorni b.segnato { box-shadow: inset 0 0 0 2px var(--foglia); font-weight: 600; }

/* -------------------------------------------------------------------- sala */

.sala { margin: 0; position: relative; }

.sala img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.sala figcaption {
  background: var(--menta);
  color: var(--inchiostro);
  font-family: var(--display);
  font-weight: 700; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: clamp(1.2rem, 4.6vw, 2rem);
  line-height: 1.15;
  padding: 1.5rem var(--margine);
}

/* ----------------------------------------------------------------- per chi */

.per-chi { padding-block: 3.5rem; }

.per-chi__principale {
  font-family: var(--display);
  font-weight: 700; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.per-chi__nota p { color: var(--grigio); }
.per-chi__nota p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- iscrizione */

.iscrizione {
  background: var(--bosco);
  color: var(--bianco);
  padding-block: 3.5rem;
}

.iscrizione__testo {
  color: var(--menta);
  font-size: 1.1rem;
  max-width: 44ch;
  margin-bottom: 2rem;
}

/* --------------------------------------------- barriera del piano gratuito */

.plus-lock {
  position: relative;
  overflow: hidden;
  border-radius: var(--raggio-schermo);
  background: var(--bianco);
  padding: 1.5rem 1.25rem;
  max-width: 30rem;
}

.plus-lock__fake {
  filter: blur(6px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  color: var(--inchiostro);
}
.plus-lock__fake p { margin: 0 0 .7rem; }
.plus-lock__fake p:last-child { margin-bottom: 0; }

.campo { margin-bottom: .9rem; }
.campo__nome { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.campo__casella {
  display: block; height: 42px;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--nebbia);
}
.campo__bottone {
  display: block; text-align: center;
  padding: .8rem 1.5rem; margin-top: 1.1rem;
  background: var(--bosco); color: var(--bianco);
  border-radius: var(--raggio); font-weight: 600;
}

.plus-badge {
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5em 1.2em;
  border-radius: 999px;
  background: var(--inchiostro); color: var(--nebbia);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: background .16s ease;
}
.plus-badge:hover { background: var(--bosco-cupo); }

.iscrizione .plus-badge { background: var(--inchiostro); }

/* ---------------------------------------------------------------- chiusura */

.chiusura {
  background: var(--inchiostro);
  color: var(--bordo);
  padding-block: 3rem 2rem;
}

.chiusura__interno { display: grid; gap: 2.5rem; }

.chiusura .marchio__nome { color: var(--nebbia); }
.chiusura .marchio { color: var(--menta); }

.chiusura__riga { margin: .6rem 0 0; font-size: .95rem; }

.chiusura__titolo {
  font-size: 1.15rem;
  color: var(--nebbia);
  margin-bottom: .9rem;
}

.chiusura .plus-lock { background: oklch(26% 0.028 182); max-width: 24rem; }
.chiusura .plus-lock__fake { color: var(--nebbia); opacity: .6; }
.chiusura .plus-badge { background: var(--menta); color: var(--inchiostro); }
.chiusura .plus-badge:hover { background: var(--bianco); }

.chiusura__coda {
  border-top: 1px solid var(--bordo-scuro);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .8125rem;
}
.chiusura__coda p { margin: 0; }

.chiusura__copyright { color: var(--grigio); }

.footer-credit { color: var(--bordo); }
.footer-credit a { color: var(--menta); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--bianco); }

/* ================================================================ 480px + */

@media (min-width: 480px) {
  .plus-lock { padding: 1.75rem 1.5rem; }
}

/* ================================================================ 768px + */

@media (min-width: 768px) {
  :root { --margine: 2rem; }

  .apri-menu { display: none; }

  .menu {
    position: static;
    transform: none;
    background: transparent;
    padding: 0;
  }
  .menu ul { display: flex; gap: 1.75rem; }
  .menu a {
    min-height: 44px;
    font-family: var(--testo);
    font-size: 1rem; font-weight: 600;
    font-stretch: normal;
    font-variation-settings: normal;
    color: var(--inchiostro);
    border-bottom: 0;
  }
  .menu a:hover { color: var(--bosco); }

  .apertura { padding-block: 5.5rem 4.5rem; }
  .confronto, .funzioni, .per-chi, .iscrizione { padding-block: 5rem; }

  /* la tabella torna una tabella vera */
  .tabella thead { display: table-header-group; }
  .tabella tbody tr { display: table-row; padding: 0; }
  .tabella tbody tr:last-child { border-bottom: 0; }
  .tabella th, .tabella td {
    display: table-cell;
    padding: 1.15rem 1.5rem 1.15rem 0;
    vertical-align: top;
    border-top: 1px solid var(--bordo);
  }
  .tabella thead th {
    border-top: 0;
    border-bottom: 2px solid var(--inchiostro);
    font-family: var(--testo);
    font-size: .9rem; font-weight: 600;
    color: var(--grigio);
    padding-bottom: .75rem;
    text-align: left;
  }
  .tabella th[scope="row"] { font-size: 1.35rem; margin: 0; width: 22%; }
  .tabella td { width: 39%; }
  .tabella td::before { display: none; }

  .funzioni__elenco { gap: 3.5rem; }

  .funzione {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem; align-items: center;
  }
  .funzione--calendario .funzione__testo { order: 2; }

  .sala img { aspect-ratio: 21 / 8; }
  .sala figcaption { padding: 2rem var(--margine); }

  .per-chi__colonne { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; }
  .per-chi__principale { margin-bottom: 0; }

  .chiusura__interno { grid-template-columns: 1fr 1fr; }
  .chiusura__coda { grid-column: 1 / -1; }
}

/* =============================================================== 1024px + */

@media (min-width: 1024px) {
  body { font-size: 1.125rem; }

  .apertura { padding-block: 7rem 5.5rem; }
  .apertura__testo { font-size: 1.35rem; }

  .funzioni__elenco {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2.5rem;
  }
  /* i preventivi sono il cuore del gestionale: occupano la riga intera */
  .funzione--preventivi { grid-column: 1 / -1; grid-template-columns: 5fr 6fr; gap: 3.5rem; }
  .funzione--calendario, .funzione--menu {
    display: block;
  }
  .funzione--calendario .funzione__testo,
  .funzione--menu .funzione__testo { order: unset; margin-bottom: 1.5rem; }

  /* la didascalia entra nell'immagine, allineata al contenitore come il resto */
  .sala { display: grid; }
  .sala img { grid-area: 1 / 1; }
  .sala figcaption {
    grid-area: 1 / 1;
    align-self: end; justify-self: start;
    width: min(34rem, 100%);
    margin-inline-start: max(var(--margine), (100vw - var(--larghezza)) / 2);
    padding: 1.75rem 2rem;
  }
}

/* =============================================================== 1440px + */

@media (min-width: 1440px) {
  :root { --margine: 3rem; }
  .apertura__titolo { font-size: 7rem; }
}

/* ------------------------------------------------------- entrata in scena */

@media (prefers-reduced-motion: no-preference) {
  .apertura__titolo .riga {
    animation: sale .6s cubic-bezier(.2,.7,.3,1) backwards;
  }
  .apertura__titolo .riga:nth-child(1) { animation-delay: .04s; }
  .apertura__titolo .riga:nth-child(2) { animation-delay: .10s; }
  .apertura__titolo .riga:nth-child(3) { animation-delay: .16s; }
  .apertura__titolo .riga:nth-child(4) { animation-delay: .22s; }
}

@keyframes sale {
  from { opacity: 0; transform: translateY(0.45em); }
  to   { opacity: 1; transform: translateY(0); }
}

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