/*
Theme Name: La Pampna
Description: Tema su misura per La Pampna, il giornalino digitale di Teora. Home con l'ultimo numero e archivio di tutti i numeri.
Version: 1.9.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: la-pampna
*/

/* Stile ripreso dalla home originale: foto di foglie in duotone blu/oliva,
   testi e bordi bianchi, Open Sans maiuscolo, angoli vivi. */
:root {
  --bianco: #fff;
  --bianco-tenue: rgb(255 255 255 / 0.75);
  --blu-notte: #2a2f67;
  --oliva: #d6c22a;
  --verde-velo: #234805;
  --font: 'Open Sans', system-ui, sans-serif;
  --larghezza: 1100px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--blu-notte);
  color: var(--bianco);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
}

main { flex: 1; position: relative; z-index: 1; }

h1, h2, h3 { line-height: 1.2; font-weight: 700; margin: 0 0 0.5em; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.contenitore { width: min(100% - 2rem, var(--larghezza)); margin-inline: auto; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Il pulsante della home originale: bordo bianco, sfondo trasparente, maiuscolo */
.bottone {
  display: inline-block;
  font-family: inherit;
  line-height: 1.6;
  cursor: pointer;
  padding: 1em 2.5em;
  border: 2px solid var(--bianco);
  color: var(--bianco);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s;
}
.bottone:hover { background: var(--bianco); color: var(--blu-notte); }
.bottone.pieno { background: var(--bianco); color: var(--blu-notte); }
.bottone.pieno:hover { background: transparent; color: var(--bianco); }

.etichetta {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bianco-tenue);
}

.titolo-pagina { font-size: clamp(2rem, 6vw, 3rem); text-transform: uppercase; margin: 0; }

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

/* ---------- Sfondo ---------- */
/* Lo sfondo è alto quanto lo schermo più grande possibile (100lvh): sui telefoni, quando
   la barra del browser si nasconde scorrendo, non resta una fascia scoperta in fondo. */
.sfondo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  background: var(--blu-notte);
  transform: translateZ(0);
}
.sfondo img { width: 100%; height: 100%; object-fit: cover; filter: url(#duotone); }
.sfondo::after { content: ''; position: absolute; inset: 0; background: var(--verde-velo); opacity: 0.3; }

/* ---------- Intestazione (tutte le pagine tranne la home) ---------- */
.intestazione {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
}
.intestazione .logo img { width: 160px; }
.intestazione nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.intestazione nav a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.intestazione nav a:hover, .intestazione nav a[aria-current="page"] { border-bottom-color: currentColor; }
@media (max-width: 600px) {
  .intestazione { flex-direction: column; gap: 10px; padding-block: 20px 4px; }
  .intestazione .logo img { width: 150px; }
  .intestazione nav { justify-content: center; gap: 0 24px; }
  .intestazione nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; padding-bottom: 0; }
}

/* ---------- Copertina ---------- */
.copertina img, .copertina-vuota {
  width: 100%;
  aspect-ratio: 1190 / 1684;
  object-fit: cover;
  object-position: top;
  box-shadow: 0 12px 36px rgb(0 0 0 / 0.45);
  transition: transform 0.2s;
}
.copertina-vuota { display: grid; place-items: center; background: #fff; color: var(--blu-notte); font-weight: 700; }
a:hover > .copertina img, a.copertina:hover img { transform: translateY(-4px); }

/* ---------- Home ---------- */
/* Tutto è dimensionato sull'altezza visibile (dvh) così la home sta in una schermata
   senza scorrere; scorre solo se lo schermo è davvero troppo basso. */
.home-pagina main { display: flex; flex-direction: column; }
.apertura {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4dvh, 3rem);
  padding-block: clamp(16px, 4dvh, 48px);
  text-align: center;
}
/* Utenti collegati: WordPress sposta la pagina in basso per la sua barra */
body.admin-bar { min-height: calc(100dvh - 32px); }
@media (max-width: 782px) {
  body.admin-bar { min-height: calc(100dvh - 46px); }
}
.apertura .logo { margin: 0; width: min(100%, 640px, 42dvh); }
/* Schermi bassi (telefoni piccoli, telefono in orizzontale): tutto un po' più compatto */
@media (max-height: 700px) {
  .apertura { gap: clamp(0.75rem, 3dvh, 1.5rem); padding-block: 12px; }
  .apertura .logo { width: min(100%, 640px, 36dvh); }
  .ultima .copertina { height: clamp(96px, 22dvh, 200px); margin-bottom: 0.75rem; }
  .ultima h2 { margin-bottom: 0.75rem; }
  .apertura .bottone { padding-block: 0.7em; }
  .avviso { margin-top: 0; min-height: 40px; font-size: 14px; }
}
.apertura .logo img { width: 100%; }
.ultima { display: flex; flex-direction: column; align-items: center; }
.ultima .copertina { position: relative; display: block; height: clamp(104px, 27dvh, 290px); aspect-ratio: 1190 / 1684; margin-bottom: clamp(0.75rem, 2.5dvh, 1.5rem); }
.badge-nuovo {
  position: absolute;
  top: -10px;
  right: -12px;
  padding: 5px 9px;
  background: var(--oliva);
  color: #1f2347;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.ultima .copertina img { height: 100%; width: auto; }
.ultima .etichetta { margin: 0 0 0.2rem; font-size: clamp(12px, 1.8dvh, 14px); }
.ultima h2 { font-size: clamp(1.25rem, min(3.5vw, 4dvh), 2rem); text-transform: uppercase; margin-bottom: clamp(0.75rem, 2.5dvh, 1.5rem); }
.azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
/* Link al canale WhatsApp (si imposta da Aspetto → Personalizza → La Pampna) */
.avviso {
  margin-top: clamp(0.25rem, 1.5dvh, 1rem);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  text-underline-offset: 4px;
}
.avviso svg { flex-shrink: 0; }
@media (max-width: 500px) {
  .avviso { max-width: 290px; text-align: left; font-size: 14px; }
}
.avviso:hover { color: var(--oliva); }
@media (max-width: 500px) {
  .apertura .azioni { flex-direction: column; width: 100%; gap: 0.75rem; }
  .apertura .bottone { padding: 0.85em 1.5em; }
}

/* ---------- Archivio ---------- */
.pagina { padding-block: 2rem 5rem; }
.anno { margin-top: 2.5rem; }
.anno h2 {
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: var(--oliva);
  border-bottom: 2px solid rgb(255 255 255 / 0.3);
  padding-bottom: 0.5rem;
  margin-bottom: 1.75rem;
}
.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2.5rem 2rem;
}
@media (max-width: 480px) {
  .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
}
.scheda { display: flex; flex-direction: column; text-decoration: none; }
.scheda .copertina { position: relative; display: block; margin-bottom: 0.9rem; }
.scheda .badge-nuovo { top: -8px; right: -8px; font-size: 11px; padding: 4px 8px; }
.scheda .mese { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; }

/* ---------- Pagine generiche e 404 ---------- */
.contenuto { max-width: 760px; }
.contenuto a { color: var(--oliva); }
.centrato { text-align: center; }
.centrato .azioni { margin-top: 2rem; }

/* ---------- Singolo numero: giornale da sfogliare ---------- */
.lettore-pieno {
  --barra-admin: 0px;
  background: #212121;
  display: block;
  overflow: hidden;
  /* niente selezione, niente menu "salva immagine" su iPhone/Android */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.admin-bar.lettore-pieno { --barra-admin: 32px; }
@media (max-width: 782px) { .admin-bar.lettore-pieno { --barra-admin: 46px; } }
.sfogliatore {
  position: fixed;
  top: var(--barra-admin);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  touch-action: none; /* i gesti di zoom li gestisce il lettore */
}
/* La zona contiene il giornale e viene ingrandita/spostata con lo zoom */
.zona {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px 16px 80px;
  transform-origin: 0 0;
}
@media (min-width: 900px) { .zona { padding: 24px 48px 88px; } }
/* Pagine nitide mostrate sopra il giornale quando è ingrandito (vedi lettore.js) */
.strato-zoom { position: absolute; inset: 0; pointer-events: none; }
.strato-zoom[hidden] { display: none; }
.strato-zoom img {
  position: absolute;
  max-width: none;
  background: #fff;
  -webkit-touch-callout: none;
  user-select: none;
}
.ingrandito .sfogliatore { cursor: grab; }
.ingrandito.trascina .sfogliatore { cursor: grabbing; }
.foglio { background: #fff; overflow: hidden; }
.foglio img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-touch-callout: none;
}
.comandi {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.75);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}
.contatore { min-width: 4.5em; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; }
.separatore { width: 1px; height: 24px; margin: 0 4px; background: rgb(255 255 255 / 0.25); }
.comando:disabled { opacity: 0.35; cursor: default; }
.comando:disabled:hover { background: transparent; }

.comando {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.comando:hover { background: rgb(255 255 255 / 0.15); }
.senza-pagine { padding: 4rem 1rem; text-align: center; }
.senza-pagine a { color: var(--oliva); }
@media print {
  .lettore-pieno * { display: none !important; }
}

/* ---------- Piè di pagina ---------- */
.piede {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(20 24 52 / 0.45);
  font-size: 14px;
}
.piede-interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 64px;
  padding-block: clamp(8px, 1.6dvh, 16px);
}
/* Su computer il piè di pagina usa tutta la larghezza: più aria tra frase, menu ed email */
@media (min-width: 1280px) {
  .piede-interno { width: auto; margin-inline: 0; padding-inline: clamp(32px, 4vw, 64px); }
}
.piede-testo { color: var(--bianco-tenue); justify-self: start; }
.piede-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 32px; }
.piede-menu a, .piede-contatti a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
}
.piede-menu a { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.piede-menu a:hover, .piede-contatti a:hover { color: var(--oliva); }
.piede-contatti { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
@media (max-width: 1279px) {
  .piede-interno { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .piede-testo { order: 3; justify-self: auto; font-size: 13px; }
  .piede-contatti { order: 2; justify-content: center; }
}
@media (max-width: 760px) {
  .piede-testo { font-size: 12px; }
  .piede-contatti { display: none; }
  .piede-menu { justify-content: center; gap: 0 18px; }
  .piede-menu a { font-size: 12px; min-height: 36px; }
  .piede-menu a:first-child { display: none; } /* in home c'è già il pulsante «Tutti i numeri» */
}
.home-pagina .piede { position: relative; }
/* Credits del sito: riga piccola e discreta sotto il piè di pagina */
.piede-crediti {
  margin: 0;
  padding: 0 1rem clamp(6px, 1.2dvh, 12px);
  text-align: center;
  font-size: 12px;
  color: rgb(255 255 255 / 0.65);
}
.piede-crediti a { text-decoration: none; }
.crediti-breve { display: none; }
/* Sul telefono: più piccola, più attenuata, testo breve e vicina alla frase sopra */
@media (max-width: 760px) {
  .piede-crediti { margin-top: -6px; padding-bottom: 8px; font-size: 10px; color: rgb(255 255 255 / 0.45); }
  .crediti-lungo { display: none; }
  .crediti-breve { display: inline; }
}
.piede-crediti a:hover { color: var(--oliva); text-decoration: underline; }

/* ---------- La redazione ---------- */
.redazione { padding-block: clamp(2rem, 6vw, 4.5rem) 5rem; }
.redazione-apertura { margin-bottom: 3rem; }
.redazione-apertura .etichetta { margin: 0 0 6px; }
.titolo-grande { font-size: clamp(2.4rem, 7vw, 3.5rem); line-height: 1.1; text-transform: uppercase; margin: 0 0 20px; }
.redazione-intro { max-width: 640px; font-size: 19px; }
.redazione-intro p { margin: 0 0 1em; }
.riquadro {
  background: rgb(20 24 52 / 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 48px;
  padding: clamp(24px, 4vw, 40px);
}
.colophon-gruppo { flex: 1 1 260px; min-width: 0; }
.colophon-gruppo h2 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgb(255 255 255 / 0.3);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oliva);
}
.colophon-gruppo p { margin: 0; }
.redazione-inviti { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
.invito {
  flex: 1 1 400px;
  min-width: 0;
  border: 2px solid var(--bianco);
  padding: clamp(24px, 4vw, 36px);
  scroll-margin-top: 24px;
}
.invito-etichetta {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oliva);
}
.invito h2 { font-size: 28px; text-transform: uppercase; margin: 0 0 14px; }
.invito p { margin: 0 0 24px; }
.invito .bottone { overflow-wrap: anywhere; }
.contenuto a, .redazione a:not(.bottone) { color: var(--oliva); }

/* ---------- Lettore: suggerimento sui gesti alla prima apertura ---------- */
.suggerimento {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(15 17 38 / 0.82);
}
.suggerimento[hidden] { display: none; }
.suggerimento-box { width: min(100%, 380px); display: flex; flex-direction: column; gap: 26px; }
.suggerimento-box h2 { margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.suggerimento-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.suggerimento-lista li { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--bianco-tenue); }
.suggerimento-lista strong { display: block; font-size: 16px; color: var(--bianco); }
.suggerimento-icona {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 2px solid var(--bianco);
  border-radius: 50%;
  color: var(--bianco);
}
.solo-tocco { display: none; }
@media (pointer: coarse) {
  .solo-tocco { display: flex; }
  .solo-mouse { display: none; }
}