/* ==========================================================================
   FRANCESCA MANNINI — stili dei componenti condivisi fra le pagine
   (cookie banner Bizionist Consent, stati del form, focus da tastiera).
   Il resto del CSS resta inline nelle pagine: e' critical CSS, e spostarlo
   qui costerebbe una richiesta bloccante in piu' sul primo render.
   Palette: Polvere & Oliva (client.json, scelta 2026-07-20).
   ========================================================================== */

:root{
  /* Altezza della nav fissa: le sub-page la usano per non farsi coprire il titolo. */
  --header-h:78px;
  --cs-fondo:#F4ECE6;
  --cs-fondo2:#E8E2DA;
  --cs-ink:#3f4536;
  --cs-accento:#4f6086;
  --cs-accento-hover:#3f4d6d;
  --cs-ease:cubic-bezier(.32,.72,0,1);
}
@media (max-width:1024px){ :root{ --header-h:66px } }

/* ==========================================================================
   FOCUS DA TASTIERA
   Chi naviga con Tab deve vedere dove si trova. Il contorno usa il blu del
   brand e non tocca chi naviga col mouse (:focus-visible).
   ========================================================================== */
:focus-visible{
  outline:2px solid var(--cs-accento);
  outline-offset:3px;
  border-radius:4px;
}
.hero :focus-visible,
.prenota :focus-visible,
.footer :focus-visible{
  outline-color:#CEDCF2;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--cs-accento);color:#F4ECE6;
  padding:12px 20px;border-radius:0 0 10px 0;
  font:500 .9rem/1 'DM Sans',system-ui,sans-serif;
}
.skip-link:focus{left:0}

/* ==========================================================================
   STATI DEL FORM
   ========================================================================== */
.form-status{
  margin-top:14px;
  font:400 .88rem/1.5 'DM Sans',system-ui,sans-serif;
  color:rgba(244,236,230,.8);
}
.form-status--errore{ color:#f0b6a4 }
.form .cf-turnstile{ margin:4px 0 18px }

/* ==========================================================================
   BIZIONIST CONSENT — banner cookie conforme Garante Italia 2024
   Tre azioni con lo stesso peso visivo, X = rifiuto totale, modale granulare.
   ========================================================================== */
[data-cookie-banner]{
  position:fixed;left:clamp(16px,3vw,28px);top: 7.5rem; bottom: auto;z-index:120;
  width:min(430px,calc(100vw - 32px));
  background:var(--cs-fondo);border:1px solid rgba(59,65,47,.12);border-radius:20px;
  padding:22px 24px 20px;box-shadow:0 18px 50px rgba(59,65,47,.16);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:var(--cs-ink);
  animation:cbIn .55s var(--cs-ease) both;
}
@keyframes cbIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ [data-cookie-banner]{animation:none} }

[data-cookie-banner] h3{
  font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:1.35rem;
  line-height:1.15;margin:0 0 8px;padding-right:24px;
}
[data-cookie-banner] p{ font-size:.85rem;line-height:1.55;color:rgba(63,69,54,.78);margin:0 0 16px }
[data-cookie-banner] a{ text-decoration:underline;color:var(--cs-accento) }
[data-cookie-banner] .cb-close{
  position:absolute;top:14px;right:16px;width:28px;height:28px;
  background:none;border:0;cursor:pointer;font-size:1.35rem;line-height:1;
  color:rgba(63,69,54,.8);border-radius:50%;
}
[data-cookie-banner] .cb-close:hover{ color:var(--cs-ink);background:rgba(59,65,47,.06) }

.cb-actions{ display:flex;gap:9px;flex-wrap:wrap }
.cb-btn{
  flex:1 1 auto;min-width:104px;cursor:pointer;
  border:1px solid var(--cs-accento);border-radius:999px;padding:11px 14px;
  font:500 .83rem/1 'DM Sans',system-ui,sans-serif;
  transition:background .35s var(--cs-ease),color .35s var(--cs-ease);
}
/* Rifiuta, Personalizza e Accetta hanno lo stesso trattamento: nessuna
   scorciatoia visiva verso il consenso (requisito Garante 2024). */
.cb-btn-reject,.cb-btn-customize,.cb-btn-accept{ background:transparent;color:var(--cs-accento) }
.cb-btn-reject:hover,.cb-btn-customize:hover,.cb-btn-accept:hover{
  background:var(--cs-accento);color:var(--cs-fondo);
}

[data-cookie-modal]{
  position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  background:rgba(59,65,47,.5);padding:20px;
  font-family:'DM Sans',system-ui,sans-serif;
}
.cbm-box{
  background:var(--cs-fondo);border-radius:22px;padding:30px;
  width:min(520px,100%);max-height:86vh;overflow:auto;color:var(--cs-ink);
}
.cbm-box h2{ font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:1.7rem;margin:0 0 6px }
.cbm-sub{ font-size:.85rem;color:rgba(63,69,54,.7);margin:0 0 20px }
.cbm-row{ display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-top:1px solid rgba(59,65,47,.1) }
.cbm-row input{ width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--cs-accento) }
.cbm-row strong{ font-weight:500;font-size:.95rem }
.cbm-row em{ font-style:normal;font-size:.8rem;color:rgba(63,69,54,.55) }
.cbm-row small{ display:block;font-size:.8rem;line-height:1.5;color:rgba(63,69,54,.68);margin-top:4px }
.cbm-actions{ display:flex;gap:10px;margin-top:22px }
.cbm-actions .cb-btn{ flex:1 }

@media (max-width:480px){
  [data-cookie-banner]{ left:12px;right:12px;top: 7.5rem;width:auto;padding:20px }
  .cb-actions{ flex-direction:column }
  .cb-btn{ width:100% }
}