/* Shell condivisa: base, bottone Menu, cassetto menu, footer, banner cookie.
   Misure da docs/doom-reference.md. Solo nero/bianco (oro solo hover voce menu e puntino voce attiva). */
:root {
  --nero: #000;
  --bianco: #fff;
  --oro: rgb(223, 209, 167);
  --titoli: 'Abril Fatface', 'Gloock', Georgia, serif;
  --corpo: 'Roboto', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bianco); color: #222; font: 400 16px/24px var(--corpo); }
img { max-width: 100%; }

/* Spostamento contenuto all'apertura del menu */
main, .site-footer { transition: transform .5s ease-in-out; }
body.menu-open main, body.menu-open .site-footer { transform: translateY(-380px); }

/* Bottone Menu */
#menu-circolare {
  position: fixed; bottom: 20px; left: calc(50vw - 32.5px);
  width: 65px; height: 65px; border-radius: 50%;
  background: var(--bianco); color: var(--nero); border: 1px solid var(--nero);
  font: 400 13px/1 var(--titoli); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 1200;
  transition: background-color .3s, color .3s, transform .5s, bottom .5s;
}
#menu-circolare:hover, #menu-circolare:focus-visible {
  background: var(--nero); color: var(--bianco); border-color: var(--bianco); transform: rotate(360deg);
}
#menu-circolare:focus-visible { outline: 2px solid var(--bianco); outline-offset: 2px; box-shadow: 0 0 0 4px var(--nero); }

/* Cassetto menu */
#menu-doom {
  position: fixed; left: 0; right: 0; bottom: 0; height: 368px;
  background: var(--nero); z-index: 1000;
  transform: translateY(100%);
  /* In chiusura la visibilita cambia solo a fine animazione (0.5s), cosi lo scorrimento in giu si vede. */
  transition: transform .5s ease-in-out, visibility 0s linear .5s;
  visibility: hidden;
}
body.menu-open #menu-doom { transform: translateY(0); visibility: visible; transition: transform .5s ease-in-out, visibility 0s; }
.nav-list {
  list-style: none; margin: 0; padding: 0 32px 17px; height: 100%;
  display: flex; gap: 16px; align-items: flex-start; /* voci in alto nel cassetto, come su DOOM */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-list li { flex: 0 0 auto; }
.nav-item {
  /* 270 di larghezza totale come su DOOM: l'anteprima da 260 sborda nel padding destro (stesso effetto). */
  display: block; width: 270px; min-width: 270px; padding: 10px; text-align: center;
  color: var(--bianco); text-decoration: none; background: transparent;
  transition: background-color .3s, color .3s;
}
.nav-title { display: block; margin-bottom: 5px; font: 400 18px/27px var(--titoli); }
.nav-thumb { display: block; width: 260px; height: 180px; margin: 0 auto; border: .5px solid var(--bianco); overflow: hidden; }
.nav-thumb img { display: block; width: 100%; height: auto; transition: transform 2s ease-out; }
.nav-item:hover, .nav-item:focus-visible, .nav-item.is-active { background: rgba(29, 29, 29, .78); }
.nav-item:hover, .nav-item:focus-visible { color: var(--oro); }
.nav-item:hover .nav-thumb img, .nav-item:focus-visible .nav-thumb img { transform: translateY(calc(-100% + 180px)); }
.nav-item:focus-visible { outline: 2px solid var(--bianco); outline-offset: -2px; }
.nav-item.is-active .nav-title::before {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--oro); margin-right: 8px; vertical-align: middle;
}

/* Footer */
/* Ritmo verticale DOOM a 1440: 30 sopra, logo 86, 22, testo 54, 14, social 29, 14, copyright 13 (totale ~263). */
.site-footer { background: var(--nero); color: var(--bianco); padding: 30px 4% 0; font: 300 15px/18px var(--corpo); }
.footer-main { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.footer-left { width: 653px; max-width: 100%; }
.footer-logo {
  display: flex; align-items: center; width: 190px; height: 86px;
  font: 400 26px/1 var(--titoli); color: var(--bianco); text-decoration: none;
}
.footer-info { margin: 22px 0 14px; }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.footer-social a { display: block; width: 29px; height: 29px; border-radius: 25px; background: var(--nero); }
.footer-social a:focus-visible, .footer-links a:focus-visible, .footer-logo:focus-visible { outline: 2px solid var(--bianco); outline-offset: 3px; }
.footer-links { list-style: none; margin: 0 11px 7px 0; padding: 0; display: flex; gap: 65px; font-size: 14px; line-height: 17px; }
.footer-links a { color: var(--bianco); text-decoration: none; }
.footer-links a:hover { opacity: .7; }
.footer-dev { margin: 10px 0 0; font-size: 12px; color: var(--bianco); border: 1px dashed var(--bianco); padding: 4px 8px; display: inline-block; }
/* Barra copyright a tutta larghezza come su DOOM: filetto bianco 0.5px, testo in colonna da 1200 centrata (+20). */
.footer-copy {
  margin: 10px -4.3478% 0; /* annulla il padding laterale 4% del footer */
  padding: 3px max(20px, calc((100% / .92 - 1200px) / 2 + 20px)) 1.5px; /* 100% = 92% della larghezza footer */
  border-top: .5px solid var(--bianco);
  font: 400 13px/13px var(--titoli); color: rgb(218, 218, 218);
}

/* Banner cookie */
.cookie-banner {
  position: fixed; z-index: 99999; bottom: 10px; right: 10px;
  width: 526px; max-width: 100%; max-height: calc(100vh - 20px); overflow-y: auto;
  background: var(--bianco); color: #222; border-radius: 12px; padding: 15px 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
}
.cookie-title { margin: 0; text-align: center; font: 400 15px/22.5px var(--corpo); }
.cookie-banner hr { border: 0; border-top: 1px solid #ddd; margin: 8px 0; }
.cookie-msg { max-width: 484px; margin: 0 auto 12px; font-size: 12px; line-height: 18px; } /* 484 anche nel foglio a 768, come su DOOM */
.cookie-cats { margin-bottom: 12px; }
.cookie-cats summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font: 400 13px/24px var(--corpo); }
.cookie-cats details p { margin: 2px 0 6px; font-size: 12px; line-height: 18px; }
.cookie-btns { display: flex; gap: 10px; }
.cookie-btn {
  height: 45px; padding: 10px; border-radius: 6px; font: 400 15px/1 var(--titoli); cursor: pointer;
  background: rgb(249, 249, 249); border: 1px solid rgb(242, 242, 242); color: #222;
}
.cookie-btn[hidden], .cookie-cats[hidden] { display: none; }
.cookie-accept { background: var(--nero); border-color: var(--nero); color: var(--bianco); width: 144px; }
.cookie-deny { width: 144px; }
.cookie-view { width: 179px; color: #333; }
.cookie-save { width: 179px; }
.cookie-btn:focus-visible { outline: 2px solid var(--nero); outline-offset: 2px; }
.cookie-links { margin: 10px 0 0; font-size: 11px; text-align: center; }
.cookie-links a { color: #222; text-decoration: underline; }

/* ---------- Componenti condivisi (Task 3) ---------- */
/* Rosone: immagine ritagliata in cerchio con il disegno /img/rosone.svg sopra. Uso: <div class="rosone"><img src="..." alt=""></div> */
.rosone { position: relative; width: 286px; height: 286px; border-radius: 50%; overflow: hidden; }
.rosone > img, .rosone > video { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 50%; }
.rosone::after { content: ''; position: absolute; inset: 0; z-index: 1; background: url("/img/rosone.svg") center / 100% 100% no-repeat; pointer-events: none; }

/* Bottone a pillola */
.pill {
  display: inline-block; padding: 10px; border: 1px solid rgb(3, 3, 3); border-radius: 10px;
  background: var(--bianco); color: var(--nero); text-decoration: none; white-space: nowrap;
  font: 400 15px/15px var(--titoli); transition: background-color .2s, color .2s;
}
.pill:hover, .pill:focus-visible { background: var(--nero); color: var(--bianco); }
.pill:focus-visible { outline: 2px solid var(--nero); outline-offset: 2px; }

@media (max-width: 1024px) {
  .footer-logo { width: 150px; height: 68px; font-size: 22px; }
}
@media (max-width: 768px) {
  .cookie-banner { bottom: 0; left: 0; right: 0; width: auto; }
  .cookie-btns { flex-direction: column; }
  .cookie-btn, .cookie-accept, .cookie-deny, .cookie-view, .cookie-save { width: 100%; }
}
@media (max-width: 767px) {
  .site-footer { padding: 20px 15px 0; text-align: center; }
  .footer-main { flex-direction: column; align-items: center; gap: 12px; }
  .footer-left { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .footer-social { justify-content: center; }
  .footer-copy { text-align: center; margin: 10px -15px 0; padding: 17px 15px; }
}
@media (max-width: 575px) {
  .cookie-title, .cookie-banner hr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  main, .site-footer, #menu-doom, #menu-circolare, .nav-item, .nav-thumb img { transition: none; }
  #menu-circolare:hover, #menu-circolare:focus-visible { transform: none; }
  .nav-item:hover .nav-thumb img, .nav-item:focus-visible .nav-thumb img { transform: none; }
  .pill { transition: none; }
}