/* ==========================================================================
   Fiori e Colori — Lanciano (CH)

   TESI
   Da un fioraio non si entra per comprare fiori: si entra con un'occasione.
   Ci si sposa, e' morto qualcuno, si e' dimenticato un compleanno. L'occasione
   decide quanto si spende, quanto prima si prenota, dove va consegnato.
   Quindi la pagina fa una domanda sola, in grande, e cambia colore con la
   risposta: il verde dello stelo resta sempre, il resto prende la tinta
   dell'occasione scelta. E' una pagina corta apposta: lunga una decisione.

   PALETTE (ruoli, non nomi di colore)
   --carta        #FBF8F3  fondo pagina
   --carta-ombra  #EFE9DF  superficie di schede e righe
   --seppia       #2B2721  testo primario
   --seppia-tenue #5F584E  testo secondario ed etichette
   --stelo        #3F5B3A  il verde che c'e' sempre
   --occasione    #7A5F17  tinta dell'occasione scelta: CAMBIA A RUNTIME

   Le cinque tinte, tutte misurate su --carta:
     matrimonio  #7A5F17  5.70:1   commiato    #40514C  7.93:1
     compleanno  #A5382C  6.19:1   cerimonia   #3B5C86  6.48:1
     casa        #5C6B22  5.54:1

   CONTRASTI misurati con agenti/contrasto.py (non stimati)
   --seppia       su --carta        14.01:1  AAA
   --seppia-tenue su --carta         6.62:1  AA
   --stelo        su --carta         7.16:1  AAA
   --seppia       su --carta-ombra  12.29:1  AAA
   --carta        su --occasione     5.70:1  AA  (la peggiore delle cinque)

   SCALA TIPOGRAFICA — due livelli soli
   domanda  clamp(2.6rem, 9vw, 5rem)  Palatino Linotype, interlinea 1.05
   tutto il resto  1.0625rem  Segoe UI, interlinea 1.6
   (le etichette sono lo stesso corpo: cambiano maiuscoletto e tracking)

   Vincolante: .design/style-lock.md
   ========================================================================== */

:root {
  --carta: #FBF8F3;
  --carta-ombra: #EFE9DF;
  --seppia: #2B2721;
  --seppia-tenue: #5F584E;
  --stelo: #3F5B3A;
  --occasione: #7A5F17;

  --serif: "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --sans: "Segoe UI", Corbel, system-ui, sans-serif;

  --passo: 8px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--seppia);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.salta {
  position: absolute;
  inset-inline-start: calc(var(--passo) * 2);
  inset-block-start: calc(var(--passo) * 2);
  z-index: 10;
  padding: calc(var(--passo) * 1.5) calc(var(--passo) * 2);
  border-radius: 10px;
  background: var(--seppia);
  color: var(--carta);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}

.salta:focus-visible { transform: translateY(0); }

/* --- bottega (testata) -------------------------------------------------- */

.bottega {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 3);
  align-items: baseline;
  padding: calc(var(--passo) * 3) clamp(16px, 5vw, 56px);
  border-block-end: 1px solid var(--carta-ombra);
}

.bottega__nome {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
}

.bottega__luogo {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seppia-tenue);
}

.bottega__tel {
  color: var(--occasione);
  font-variant-numeric: tabular-nums;
  text-underline-offset: 3px;
  transition: color 240ms ease;
}

/* --- la domanda --------------------------------------------------------- */

.domanda {
  padding: clamp(32px, 7vw, 72px) clamp(16px, 5vw, 56px) clamp(32px, 6vw, 64px);
  max-inline-size: 68ch;
}

.gambo {
  margin: 0 0 calc(var(--passo) * 2);
  line-height: 0;
}

.titolone {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 9vw, 5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sottodomanda {
  margin: calc(var(--passo) * 3) 0 0;
  max-inline-size: 60ch;
  color: var(--seppia-tenue);
  text-wrap: pretty;
}

/* --- le occasioni ------------------------------------------------------- */

.occasioni {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--passo) * 1.5);
  margin-block-start: calc(var(--passo) * 4);
}

.occasione {
  display: inline-flex;
  align-items: center;
  gap: var(--passo);
  padding: calc(var(--passo) * 1.5);
  padding-inline-end: calc(var(--passo) * 2);
  min-block-size: 44px;
  border: 1px solid var(--carta-ombra);
  border-radius: 10px;
  background: var(--carta);
  color: var(--seppia);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), border-color 240ms ease;
}

/* il quadratino: raggio 4px dentro un'opzione da 10px con 12px di padding */
.occasione__segno {
  inline-size: 14px;
  block-size: 14px;
  flex: 0 0 auto;
  border: 1px solid var(--seppia-tenue);
  border-radius: 4px;
  background: transparent;
  transition: background-color 240ms ease, border-color 240ms ease;
}

/* l'occasione scelta non e' segnata dal solo colore: prende il bordo, il
   quadratino pieno e il grassetto, e la frase sotto la nomina per esteso */
.occasione[aria-checked="true"] {
  border-color: var(--occasione);
  font-weight: 700;
}

.occasione[aria-checked="true"] .occasione__segno {
  background: var(--occasione);
  border-color: var(--occasione);
}

.occasione:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .occasione:hover { border-color: var(--seppia-tenue); }
}

/* --- la risposta -------------------------------------------------------- */

.risposta { margin-block-start: calc(var(--passo) * 4); }

.mazzo {
  padding: calc(var(--passo) * 3);
  border: 1px solid var(--carta-ombra);
  border-inline-start: 3px solid var(--occasione);
  border-radius: 16px;
  background: var(--carta-ombra);
  transition: border-color 240ms ease;
}

.mazzo[hidden] { display: none; }

.mazzo__frase {
  margin: 0 0 calc(var(--passo) * 3);
  max-inline-size: 60ch;
  text-wrap: pretty;
}

/* --- righe (steli) ------------------------------------------------------ */

.steli {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stelo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--passo) calc(var(--passo) * 2);
  justify-content: space-between;
  padding-block: calc(var(--passo) * 1.5);
  border-block-start: 1px solid rgba(95, 88, 78, 0.22);
}

.stelo:first-child { border-block-start: 0; }

.stelo__v { font-size: 1rem; }

.stelo__d {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--seppia-tenue);
}

.stelo__d--vero {
  font-size: 1rem;
  letter-spacing: normal;
  color: var(--seppia);
}

/* --- azioni ------------------------------------------------------------- */

.azioni {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--passo) * 1.5);
  margin-block-start: calc(var(--passo) * 4);
}

.bottone {
  display: inline-block;
  padding: calc(var(--passo) * 1.5) calc(var(--passo) * 2.5);
  min-block-size: 44px;
  border: 1px solid var(--occasione);
  border-radius: 10px;
  background: transparent;
  color: var(--occasione);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: transform 140ms var(--ease-out), background-color 240ms ease,
              border-color 240ms ease, color 240ms ease;
}

.bottone--pieno {
  background: var(--occasione);
  color: var(--carta);
}

.bottone:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: var(--carta-ombra); }
  .bottone--pieno:hover { background: var(--seppia); border-color: var(--seppia); color: var(--carta); }
}

/* --- consegna e dove ---------------------------------------------------- */

.consegna,
.dove {
  padding: clamp(24px, 5vw, 48px) clamp(16px, 5vw, 56px);
  border-block-start: 1px solid var(--carta-ombra);
  max-inline-size: 68ch;
}

.titolo-sezione {
  margin: 0 0 calc(var(--passo) * 3);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seppia-tenue);
}

.consegna__testo {
  margin: 0 0 calc(var(--passo) * 3);
  max-inline-size: 60ch;
  text-wrap: pretty;
}

.collegamento {
  color: var(--occasione);
  font-variant-numeric: tabular-nums;
  text-underline-offset: 3px;
  transition: color 240ms ease;
}

/* --- piede -------------------------------------------------------------- */

.pie {
  padding: clamp(24px, 5vw, 48px) clamp(16px, 5vw, 56px);
  border-block-start: 1px solid var(--carta-ombra);
  background: var(--carta-ombra);
}

.pie__riga {
  margin: 0 0 var(--passo);
  font-family: var(--serif);
  font-size: 1.0625rem;
}

.pie__nota {
  margin: 0;
  max-inline-size: 60ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--seppia-tenue);
  text-wrap: pretty;
}

/* --- messa a fuoco ------------------------------------------------------ */

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

/* --- movimento ----------------------------------------------------------
   Unico movimento della pagina: la frase di risposta che entra. Il cambio di
   tinta e' una transizione di colore, non uno spostamento. */

@media (prefers-reduced-motion: no-preference) {
  .js .mazzo {
    animation: entra 200ms var(--ease-out) 1;
  }

  @keyframes entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottega__tel,
  .occasione,
  .occasione__segno,
  .mazzo,
  .bottone,
  .collegamento { transition: none; }
}