/* ========================================================================== 
   style-header-footer-unificato.css — Letture.eu
   --------------------------------------------------------------------------
   VERSIONE CENTRALIZZATA — PRODUZIONE

   Scopo
   - Gestire esclusivamente Header e Footer su tutte le pagine che adottano:
       • nav#access
       • header.home-topbar
       • footer.home-footer
       • footer.normativo-editoriale / .footer-normativo

   Principi
   - Un solo nero e un solo bianco per coerenza visiva.
   - Metrica unica: stesso “spessore” percepito per header e footer.
   - WCAG: focus visibile, contrasto elevato.
   - Nessuna regola di colonna, box, immagini, pulsanti libro o consenso.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) VARIABILI HEADER / FOOTER
   -------------------------------------------------------------------------- */
:root{
  --letture-white: #ffffff;
  --letture-black: #000000;

  --letture-hf-min-height: 56px;
  --letture-hf-padding-y: 1rem;
  --letture-hf-padding-x: 16px;

  --letture-focus-bg: var(--letture-white);
  --letture-focus-fg: var(--letture-black);
  --letture-focus-outline: var(--letture-black);
}


/* --------------------------------------------------------------------------
   2) ROBUSTEZZA DI BASE
   -------------------------------------------------------------------------- */
nav#access,
header.home-topbar,
footer,
footer.home-footer,
footer.normativo-editoriale,
.footer-normativo{
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   3) HEADER — Variante nav#access
   -------------------------------------------------------------------------- */
nav#access{
  width: 100%;
  max-width: 100%;
  min-height: var(--letture-hf-min-height);
  margin: 0;
  padding: var(--letture-hf-padding-y) var(--letture-hf-padding-x);

  background: var(--letture-black);
  color: var(--letture-white);
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
}

nav#access a,
nav#access .letture-home-disabled{
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-block;
}

nav#access a:hover{
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

nav#access .letture-home-disabled{
  cursor: default;
}

nav#access a:focus,
nav#access a:focus-visible{
  outline: 2px solid var(--letture-focus-outline);
  outline-offset: 3px;
  background: var(--letture-focus-bg);
  color: var(--letture-focus-fg);
}


/* --------------------------------------------------------------------------
   4) HEADER — Variante Home
   -------------------------------------------------------------------------- */
header.home-topbar{
  width: 100%;
  max-width: 100%;
  min-height: var(--letture-hf-min-height);
  margin: 0;
  padding: var(--letture-hf-padding-y) var(--letture-hf-padding-x);

  background: var(--letture-black);
  color: var(--letture-white);

  display: flex;
  align-items: center;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   5) FOOTER — Variante Home
   -------------------------------------------------------------------------- */
footer.home-footer{
  width: 100%;
  max-width: 100%;
  min-height: var(--letture-hf-min-height);
  margin: 0;
  padding: var(--letture-hf-padding-y) var(--letture-hf-padding-x);

  background: var(--letture-black);
  color: var(--letture-white);

  display: flex;
  align-items: center;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   6) FOOTER — Variante Normativo / Editoriale
   -------------------------------------------------------------------------- */
footer.normativo-editoriale,
.footer-normativo,
footer.footer-normativo{
  width: 100%;
  max-width: 100%;
  min-height: var(--letture-hf-min-height);
  margin: 0;
  padding: var(--letture-hf-padding-y) var(--letture-hf-padding-x);

  background: var(--letture-black);
  color: var(--letture-white);
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
}

footer.normativo-editoriale p,
.footer-normativo p{
  margin: 0;
  line-height: 1;
}

footer a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

footer a:focus,
footer a:focus-visible{
  outline: 2px solid var(--letture-focus-outline);
  outline-offset: 3px;
  background: var(--letture-focus-bg);
  color: var(--letture-focus-fg);
}


/* --------------------------------------------------------------------------
   7) MOBILE 320–480 PX
   -------------------------------------------------------------------------- */
@media (max-width: 480px){
  nav#access,
  header.home-topbar,
  footer.home-footer,
  footer.normativo-editoriale,
  .footer-normativo,
  footer.footer-normativo{
    padding: var(--letture-hf-padding-y) var(--letture-hf-padding-x);
  }
}