/* ==================================================
   AETERNUM — THEME CORE (NECROLOGI)
   4 BLOCCHI: Reset/Vars → Base/Layout → Componenti → Fix
================================================== */

/* ==================================================
   [1/4] RESET SAFE + VARIABILI
================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

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

ul { list-style: none; padding: 0; margin: 0; }

/* ---- Theme tokens ---- */
:root {
  --bg-main: #fafaf7;
  --bg-card: #ffffff;
  --bg-soft: #f3f1ec;

  --text-main: #1f2a36;
  --text-muted: #6b7280;

  --accent: #7a1e2b;        /* rosso vinaccia */
  --gold: #c9a24d;          /* oro */
  --gold-dark: #8b6b2e;     /* oro scuro */

  --border: rgba(0,0,0,.12);

  --radius: 12px;
  --shadow: 0 12px 30px rgba(0,0,0,.12);
  --shadow-hover: 0 18px 40px rgba(0,0,0,.18);

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;

  --container: 1180px;
}

/* ==================================================
   [2/4] BASE + LAYOUT (NON DISTRUTTIVO)
================================================== */

/* Footer “incollato” in fondo pagina senza spaccare layout */
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.65;

  min-height: 100%;
  display: flex;
  flex-direction: column;
}
main{ flex: 1 0 auto; }
footer{ margin-top: auto; }

h1, h2, h3{
  font-family: "Playfair Display", serif;
  letter-spacing: .04em;
  margin: 0;
}

p{ margin: 0 0 var(--space-sm); }
small, .text-muted{
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--text-muted);
}

/* SOLO h1 capolettera (non h2, così i nomi in card non diventano “vinaccia”) */
h1{
  text-shadow: 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.14);
}
h1::first-letter{
  color: var(--accent);
  font-size: 1.15em;
  font-weight: 700;
}

/* Layout container */
.layout, .container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* HOME */
.home{ padding-bottom: var(--space-lg); }
.home .hero{
  text-align: center;
  margin: var(--space-lg) auto var(--space-md);
}
.home .hero h1{ margin-bottom: .5rem; }
.subtitle{
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: 0 1px 0 #fff;
}

/* Pagine interne (mantieni centrature/layout) */
.page{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}
.page-title{ margin: 0 0 .5rem; }
.page-subtitle{ margin: 0; color: var(--text-muted); }

/* ==================================================
   [3/4] COMPONENTI (FORM / BUTTON / CARD / GRID)
================================================== */

/* ---------- Links base (NON invasivo) ---------- */
a{ color: var(--accent); }
a:hover{ color: var(--gold-dark); }

/* ---------- BUTTON SYSTEM (vale anche per button “nudi”) ---------- */
.btn,
button,
input[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  height: 46px;
  padding: 0 1.1rem;

  border-radius: 10px;
  border: 1px solid transparent;

  font-weight: 700;
  font-size: .95rem;

  cursor: pointer;
  text-decoration: none;
  user-select: none;

  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}

/* Default: se non metti classi, rimane “primary” coerente */
button,
input[type="submit"]{
  background: linear-gradient(#8a2633, #6d1f24);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
button:hover,
input[type="submit"]:hover{
  filter: brightness(1.03);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}
button:active,
input[type="submit"]:active,
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: linear-gradient(#8a2633, #6d1f24);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-secondary,
.btn-ghost{
  background: rgba(201,162,77,.10);
  color: var(--accent);
  border-color: rgba(201,162,77,.22);
  box-shadow: none;
}
.btn-secondary:hover,
.btn-ghost:hover{
  background: rgba(201,162,77,.16);
  border-color: rgba(201,162,77,.34);
}

/* Focus premium (accessibile) */
:where(.btn, button, input[type="submit"], input, select, textarea):focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(201,162,77,.25);
}

/* ---------- BOX / CARD GENERICHE ---------- */
.box, .card{
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.box-soft{
  background: var(--bg-soft);
  box-shadow: none;
}

/* ---------- FORM BASE (usata in HOME + dashboard + publisher) ---------- */
label{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Campi: style coerente */
input, select, textarea{
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-main);
  font-size: .95rem;
}

input, select{ height: 46px; padding: 0 .9rem; }
textarea{ min-height: 120px; padding: .75rem .9rem; resize: vertical; }

/* Hover/focus campi */
input:hover, select:hover, textarea:hover{ border-color: rgba(122,30,43,.35); }
input:focus, select:focus, textarea:focus{
  border-color: var(--gold);
}

/* Search wrapper (home) */
.search-wrapper{
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: var(--space-md);
  max-width: 900px;
  margin: 0 auto var(--space-lg);
}

/* Search grid (HOME) */
.search-main{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "q q q"
    "nome cognome comune"
    "periodo periodo periodo"
    "submit submit submit";
  gap: var(--space-sm);
  row-gap: 1.25rem;
}

.search-main > input[name="q"]{ grid-area: q; font-size: 1rem; padding: 0 .95rem; }
.search-main > input[name="nome"]{ grid-area: nome; }
.search-main > input[name="cognome"]{ grid-area: cognome; }

.search-main > .comune-autocomplete{ grid-area: comune; position: relative; }
.search-main > select[name="periodo"]{ grid-area: periodo; width: 260px; justify-self: start; max-width: 100%; }
.search-main > button{ grid-area: submit; width: 100%; }

@media (max-width: 640px){
  .search-main{
    grid-template-columns: 1fr;
    grid-template-areas:
      "q" "nome" "cognome" "comune" "periodo" "submit";
  }
  .search-main > select[name="periodo"]{ width: 100%; }
}

/* Autocomplete */
.autocomplete-box{
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0; padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  z-index: 99999;
  max-height: 260px;
  overflow-y: auto;
  display: none;
}
.autocomplete-box:not(:empty){ display: block; }
.autocomplete-box li{
  padding: 10px 14px;
  color: var(--text-main) !important;
  font-size: .95rem;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.autocomplete-box li:hover{ background: var(--bg-soft); }

/* ---------- GRID NECROLOGI + CARD ---------- */
.necrologi-list{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

.necrologio-card{
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;

  transition: transform .35s ease, box-shadow .35s ease;
}
.necrologio-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* Thumb */
.necrologio-thumb{
  height: 180px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumb-placeholder{
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
}

/* Body */
.necrologio-body{ padding: var(--space-sm); }

/* NOME DEFUNTO: oro scuro, senza capolettera colorato */
.necrologio-body h2{
  font-size: 1.1rem;
  margin: 0 0 .4rem;
  color: var(--gold-dark);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 -1px 0 rgba(0,0,0,.12);
}
.necrologio-body h2::first-letter{
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.necrologio-body .place{
  font-size: .75rem;
  color: var(--accent);
  margin: 0 0 .4rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.necrologio-body .snippet{
  font-size: .85rem;
  color: var(--text-muted);
  margin: 0;
}
.necrologio-body .date{
  font-size: .7rem;
  margin-top: .5rem;
  color: var(--text-muted);
}

/* ---------- FOOTER ---------- */
footer{
  background: var(--bg-soft);
}
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-md);
  text-align: center;
  font-size: .75rem;
  color: var(--text-muted);
}
.footer-links{ margin-top: .5rem; }
.footer-links a{
  margin: 0 .4rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.footer-links a:hover{ color: var(--gold-dark); }

/* ==================================================
   [4/4] FIX “ANTI-ROTTURA” (LINK CARD + PUBLISHER + DASH)
================================================== */

/* --------------------------------------------------
   FIX #1: NIENTE LINK BLU/VIOLA NELLE CARD NECROLOGI
   (vale su HOME, publisher, pubbliche varie)
-------------------------------------------------- */
.necrologio-card > a,
.necrologio-card > a:link,
.necrologio-card > a:visited,
.necrologio-card > a:hover,
.necrologio-card > a:active{
  color: inherit !important;
  text-decoration: none !important;
  display: block;
}

/* Se dentro al testo finiscono tag/link (sanitize incompleto, future-proof) */
.necrologio-card > a *{
  color: inherit !important;
  text-decoration: none !important;
}

/* Hover “oro” sul nome */
.necrologio-card:hover .necrologio-body h2{
  color: var(--gold) !important;
}

/* --------------------------------------------------
   FIX #2: Publisher page (la tua CSS era su .publisher-necrologi,
           ma in HTML hai <main class="page publisher-public">)
-------------------------------------------------- */
.publisher-public .publisher-meta a,
.publisher-public .publisher-meta a:visited{
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.publisher-public .publisher-meta a:hover{
  color: var(--gold-dark);
  text-decoration: underline;
}

/* --------------------------------------------------
   FIX #3: Dashboard/table base (non invasivo)
-------------------------------------------------- */
.table{
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
}
.table th{
  background: var(--bg-soft);
  color: var(--text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  padding: .75rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.table td{
  padding: .85rem .75rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: .92rem;
}
.table tr:hover{ background: rgba(201,162,77,.05); }
.table tr:last-child td{ border-bottom: none; }

/* --------------------------------------------------
   FIX #4: Checkbox “giganti” — qui NON le ingrandiamo globalmente.
   Se una pagina usa un wrapper tipo .publish-toggle, lo gestisci lì.
-------------------------------------------------- */
input[type="checkbox"], input[type="radio"]{
  transform: none;
}

/* Fine */