@import url("/piede.css");
/* Home e richiesta demo: stesso mondo della landing (landing.css + landing-extra.css),
   qui solo i pezzi che la landing non ha. Colori dai token della landing. */
:root {
  --ink: #181526; --muted: #686573; --line: #e7e5ec; --violet: #7153b5; --lilac: #eee9fc;
  --accent: #f4c300; --neg: #ac3542; --neg-soft: #fbeef0; --pos: #167047; --pos-soft: #ecf6ef;
  --night: #141126; --night-card: #211d35; --on-night: #cbc5dd; --soft: #f8f8fa;
  --ombra: 0 14px 45px -18px #2118432e; --esce: cubic-bezier(.16, 1, .3, 1);
}
::selection { background: var(--accent); color: var(--ink); }

/* pulsanti: classi della landing (.bottone in landing-extra.css) con misure da pagina */
.bottone { min-height: 52px; padding: 12px 24px; cursor: pointer; }
.bottone svg { flex: none; }
.bottone.piccolo { min-height: 44px; padding: 8px 18px; }
.bottone.chiaro { background: transparent; border-color: rgb(255 255 255 / .28); color: #fff; }
.bottone.chiaro:hover { background: rgb(255 255 255 / .06); }

/* ---------- testata ---------- */
.testata { display: flex; align-items: center; gap: 32px; height: 88px; }
.testata .voci { display: flex; gap: 28px; font-size: 14px; color: var(--muted); }
.testata .voci a:hover { color: var(--ink); }
.testata .azioni { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.testata .accedi { font-size: 14px; font-weight: 600; padding: 10px 14px; }
@media (max-width: 860px) {
  .testata { height: 72px; gap: 12px; }
  .testata .voci, .testata .accedi, .testata .azioni > .secondario { display: none; }
  .testata .bottone.principale { padding-inline: 14px; white-space: nowrap; font-size: 14px; }
}

/* ---------- piede (come la landing) ---------- */

/* ---------- menu a tendina (schermi stretti): togliere questo blocco e TestataSito.astro ne azzera ogni traccia ---------- */
.testata { position: relative; }
.apri-menu { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.apri-menu .i-chiudi, .testata.aperta .apri-menu .i-apri { display: none; }
.testata.aperta .apri-menu .i-chiudi { display: block; }
.menu { display: none; }
@media (max-width: 860px) {
  .apri-menu { display: grid; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; flex-direction: column; padding: 8px 20px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--ombra); }
  .testata.aperta .menu { display: flex; }
  .menu a { padding: 14px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line); }
  .menu a:last-child { border-bottom: 0; color: var(--violet); font-weight: 600; }
}