/* =============================================================================
   CAPPELLANIE — Chrome del sito (header, footer, banner, single, shell guida)
   Dipende da design-tokens.css e app.css.
   ============================================================================= */

html, body { min-height: 100%; }
body.cap-page {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
/* I link normali sono mariani; i bottoni (.btn, anche se <a>) mantengono i loro
   colori — altrimenti il testo del bottone primario sparirebbe sul fondo scuro. */
body.cap-page a:not(.btn) { color: var(--marian-bright); text-decoration: none; }
body.cap-page a:not(.btn):hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }

/* --- Banner globale "Dati in revisione" ----------------------------------- */
.site-banner {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--banner-review-tint); color: var(--banner-review-ink);
  border-bottom: 1px solid oklch(0.760 0.090 84 / 0.4);
  padding: 8px 16px; font-size: var(--fs-sm); text-align: center;
}
.site-banner svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* --- Header del sito (riusa .app-header di app.css) ------------------------ */
.app-header__link { cursor: pointer; }
.app-header__actions { display: flex; align-items: center; gap: var(--space-4); }

/* Selettore lingua dell'interfaccia (nell'header scuro). */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-on-dark-soft); }
.lang-switch__ico { width: 16px; height: 16px; flex: 0 0 auto; }
.lang-switch select {
  appearance: none; -webkit-appearance: none;
  background-color: oklch(1 0 0 / 0.08); color: var(--ink-on-dark);
  border: 1px solid oklch(1 0 0 / 0.22); border-radius: var(--radius-pill);
  padding: 7px 30px 7px 12px; font-family: var(--font-body); font-size: var(--fs-sm); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23e8e2d6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  transition: background-color var(--dur-fast);
}
.lang-switch select:hover { background-color: oklch(1 0 0 / 0.16); }
.lang-switch select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gold); }
.lang-switch option { color: var(--ink); background: var(--surface); }

/* Su mobile la navigazione si nasconde (come nel design); il selettore lingua resta. */
@media (max-width: 700px) {
  .app-header__nav { display: none; }
  .app-header__sub { display: none; }
}

/* --- Guida: shell a tutta altezza ----------------------------------------- */
.cap-guida { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--paper); }
.cap-app-region { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cap-loading-full {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); color: var(--ink-mute);
}
.cap-loading-full .state-orn { width: 56px; height: 56px; opacity: 0.8; }
.cap-noscript { padding: var(--space-7); text-align: center; color: var(--ink-soft); }

/* --- Pagine singole (scheda comunità / luogo) ----------------------------- */
.single-main { padding: var(--space-8) var(--space-5) var(--space-10); }
.single-inner {
  max-width: 760px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.single-back {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 760px; margin: 0 auto var(--space-4); padding: 0 var(--space-1);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--marian);
}
.single-back svg { width: 14px; height: 14px; }
.single-hero-img { width: 100%; height: 240px; object-fit: cover; display: block; }

/* mini-mappa nella scheda */
.scheda-map { height: 260px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); margin-top: var(--space-2); background: var(--paper-sunk); z-index: 0; }

/* elenco comunità ospitate (single-luogo) */
.luogo-comunita { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.luogo-comunita__item {
  display: flex; flex-direction: column; gap: 5px; padding: var(--space-4);
  border: 1px solid var(--border); border-left: 4px solid var(--card-accent, var(--gold)); border-radius: var(--radius-md);
  background: var(--paper-raised);
}
.luogo-comunita__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--ink); }
.luogo-comunita__name a { color: inherit; }
.luogo-comunita__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border); background: var(--paper-raised);
  padding: var(--space-7) var(--space-5);
}
.site-footer__inner {
  max-width: var(--content-max); margin: 0 auto;
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--ink-mute);
}
.site-footer a { color: var(--marian); }

/* La guida non mostra header/footer del documento standard: header proprio. */
.cap-guida + .site-footer { display: none; }

/* --- Drawer scheda (sidebar a scorrimento, desktop + mobile) --------------- */
/* Con il drawer la griglia desktop torna a 2 colonne: elenco | mappa. */
.d-main--drawer { grid-template-columns: var(--list-w) minmax(0, 1fr); }

/* NB: z-index molto alti per stare SOPRA i pane interni di Leaflet
   (marker ~600, popup ~700, controlli ~1000) e la legenda (600). */
.cap-drawer-scrim {
  position: fixed; inset: 0; background: oklch(0.25 0.02 60 / 0.38);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
  z-index: 2000;
}
.cap-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

.cap-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: 100%; max-width: 100%;
  background: var(--surface); border-top: 2px solid var(--gold-deep);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
  z-index: 2001; display: flex; flex-direction: column;
  will-change: transform;
}
.cap-drawer.is-open { transform: translateX(0); }
.cap-drawer__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cap-drawer__close {
  position: absolute; right: var(--space-4); top: var(--space-4); z-index: 2;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--paper-raised); border: 1px solid var(--border); border-radius: 50%;
  color: var(--ink-soft); cursor: pointer;
}
.cap-drawer__close:hover { background: var(--paper-sunk); color: var(--ink); }
.cap-drawer__close svg { width: 17px; height: 17px; }

/* Desktop: la scheda copre l'intera mappa; l'elenco a sinistra resta visibile e
   cliccabile (si può passare da una comunità all'altra senza chiudere). */
@media (min-width: 980px) {
  .cap-drawer { width: calc(100% - var(--list-w)); border-top: none; border-left: 2px solid var(--gold-deep); }
  .cap-drawer-scrim { display: none; }
}

@media (max-width: 640px) {
  .single-main { padding: var(--space-5) var(--space-3) var(--space-9); }
  .single-hero-img { height: 180px; }
}

/* --- Skip link (accessibilità da tastiera) --------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 3000;
  background: var(--marian); color: var(--ink-on-dark);
  padding: 10px 16px; border-radius: 0 0 var(--radius-md) 0; font-weight: var(--fw-semibold);
}
.skip-link:focus { left: 0; outline: none; box-shadow: var(--ring-focus); }
[id="cap-content"]:focus { outline: none; }

/* --- Credit (Ufficio Migrantes) ------------------------------------------- */
.site-footer__credit { font-weight: var(--fw-semibold); color: var(--ink-soft); }
.site-footer__edition {
  max-width: var(--content-max); margin: var(--space-3) auto 0;
  font-size: var(--fs-xs); color: var(--ink-faint); letter-spacing: 0.02em;
}
/* Pillola credit sulla mappa della guida (in basso a destra). */
.d-map__credit {
  position: absolute; right: var(--space-5); bottom: var(--space-7); z-index: 500;
  max-width: 46ch; font-size: var(--fs-xs); color: var(--ink-soft);
  background: oklch(0.978 0.012 86 / 0.86); backdrop-filter: blur(3px);
  padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); text-align: right; line-height: var(--lh-snug);
}
@media (max-width: 979px) {
  .d-map__credit { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: none; text-align: center; }
}

/* --- Legenda "Comunità": collapse reale (il porting vanilla tiene la lista nel
   DOM; nel design React veniva rimossa). Nascondiamo l'elenco quando chiusa. --- */
.legend:not(.is-open) .legend__list { display: none; }
.legend__toggle { cursor: pointer; }