/* =====================================================================
   AnnunciCartomanzia.com — foglio di stile principale
   Palette ripresa e modernizzata da quella del sito storico (verde CTA,
   tortora/marrone neutri, blu per i link).
   ===================================================================== */

:root {
  --verde-800: #4f7a1f;
  --verde-700: #6eb728;
  --verde-600: #8dcb34;
  --verde-500: #98d23d;
  --verde-100: #eaf6d9;
  --marrone-950: #2b2318;
  --marrone-900: #3f342a;
  --marrone-700: #5e4e3e;
  --marrone-300: #a8967f;
  --tortora-100: #f4ede0;
  --tortora-050: #f8f4ec;
  --crema: #eee7d8;
  --bianco: #ffffff;
  --testo: #3f342a;
  --testo-chiaro: #7a6c5a;
  --blu-link: #033a66;
  --sfondo: #f8f4ec;
  --rosa: #c95a90;
  --rosa-bg: #fbeaf2;
  --arancio: #d85c00;
  --arancio-bg: #fdecdc;
  --rosso: #b93b3b;
  --rosso-bg: #fbeaea;
  --verde-msg: #2e7d4f;
  --verde-msg-bg: #e7f6ed;
  --ombra: 0 4px 20px rgba(63, 52, 42, 0.10);
  --raggio: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
  line-height: 1.55;
}

h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; margin: 0 0 .5em; color: var(--marrone-950); }
a { color: var(--blu-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container-stretto { max-width: 760px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 480px) {
  .container, .container-stretto { padding: 0 10px; }
}

/* --- Banner modalità demo --- */
.banner-demo {
  background: var(--arancio-bg);
  color: var(--arancio);
  text-align: center;
  padding: 8px 16px;
  font-size: .9rem;
  border-bottom: 1px solid #f0d3b3;
}

/* --- Banner di avviso in cima al sito (es. rilancio del sito) --- */
.banner-avviso-sito {
  background: var(--arancio-bg);
  color: var(--arancio);
  text-align: center;
  padding: 10px 40px;
  font-size: .92rem;
  font-weight: 600;
  border-bottom: 1px solid #f0d3b3;
  position: relative;
}
.banner-avviso-link { color: inherit; text-decoration: underline; }
.banner-avviso-chiudi {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  padding: 4px 10px;
}
.banner-avviso-chiudi:hover { opacity: .7; }
@media (max-width: 480px) {
  .banner-avviso-sito { font-size: .82rem; padding: 10px 34px; }
}

/* --- Header / navigazione --- */
.sito-header {
  background: linear-gradient(135deg, var(--marrone-950), var(--marrone-700));
  color: var(--crema);
  padding: 18px 0;
}
.sito-header .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.logo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo-immagine { display: flex; line-height: 0; flex-shrink: 0; }
.logo-immagine img { display: block; height: 72px; width: auto; }
@media (min-width: 761px) {
  .logo-immagine img { height: 92px; }
}
.nav-riga.nav-riga-mobile { display: none; }
@media (max-width: 760px) {
  .sito-header .container { flex-direction: column; align-items: flex-start; }
  .nav-riga.nav-riga-pubblica { display: none; }
  .nav-riga.nav-riga-desktop { display: none; }
  .nav-riga.nav-riga-mobile { display: flex; }
}
@media (max-width: 340px) {
  .logo-immagine img { height: 56px; }
}
.nav-principale { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.nav-riga { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
@media (max-width: 760px) {
  .nav-principale { align-items: flex-start; width: 100%; }
  .nav-riga { justify-content: flex-start; }
}
.nav-riga.nav-riga-mobile {
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.nav-riga.nav-riga-mobile::-webkit-scrollbar { display: none; }
.nav-riga.nav-riga-mobile a,
.nav-riga.nav-riga-mobile .btn,
.nav-riga.nav-riga-mobile span { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 480px) {
  .nav-riga.nav-riga-mobile { gap: 10px; font-size: .88rem; }
  .nav-riga.nav-riga-mobile .btn { padding: 5px 12px; font-size: .82rem; }
}
@media (max-width: 480px) {
  .nav-riga { gap: 12px; }
}
.nav-principale a, .nav-principale span { color: var(--crema); opacity: .9; font-size: .95rem; }
.nav-principale a:hover { opacity: 1; text-decoration: none; color: var(--verde-500); }
.nav-principale .btn { margin-left: 4px; }

/* --- Bottoni --- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .95rem;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn-verde { background: linear-gradient(135deg, var(--verde-500), var(--verde-700)); color: #1e3305; font-weight: 600; }
.btn-verde:hover { background: linear-gradient(135deg, var(--verde-600), var(--verde-800)); }
.btn-marrone { background: var(--marrone-900); color: #fff; }
.btn-marrone:hover { background: var(--marrone-700); color: #fff; }
.btn-contorno { background: transparent; border-color: currentColor; color: var(--marrone-700); }
.btn-contorno:hover { background: var(--tortora-100); }
.btn-contorno-header { background: transparent; border-color: rgba(238, 231, 216, .55); color: var(--crema); }
.btn-contorno-header:hover { background: rgba(238, 231, 216, .12); text-decoration: none; }
.btn-piccolo { padding: 6px 14px; font-size: .85rem; }
.btn-pericolo { background: var(--rosso); color: #fff; }
.btn-successo { background: var(--verde-msg); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Barra di ricerca (sempre visibile, home ed elenco annunci) --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.blocco-ricerca { padding: 30px 0 8px; }
.blocco-ricerca .container-stretto { text-align: center; }
.ricerca-visibile { max-width: 560px; margin: 0 auto 18px; }
.ricerca-visibile-input {
  display: flex; align-items: center; gap: 10px;
  background: var(--bianco); border: 1px solid var(--tortora-100);
  border-radius: 12px; box-shadow: var(--ombra);
  padding: 14px 18px; margin-bottom: 12px;
}
.ricerca-icona { font-size: 1.1rem; color: var(--marrone-700); flex-shrink: 0; }
.ricerca-visibile-input input[type="search"] {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 1rem; padding: 2px 0; color: var(--testo);
}
.btn-cerca-full { display: block; width: 100%; padding: 13px 20px; font-size: 1.02rem; }
.blocco-ricerca h1 { text-align: left; margin-top: 22px; }

/* --- Filtri categoria a pillole (compatibili anche su /annunci) --- */
.pillole-categoria { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0; }
@media (max-width: 600px) {
  .pillole-categoria { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .pillola-categoria { flex-shrink: 0; }
}

/* --- Categorie rapide --- */
.griglia-categorie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 26px; }
.card-categoria {
  background: var(--bianco); border-radius: var(--raggio); box-shadow: var(--ombra);
  padding: 20px; text-align: center; font-weight: 600; color: var(--marrone-950);
}
.card-categoria:hover { text-decoration: none; background: var(--verde-100); }

/* --- Sezioni home --- */
.sezione { padding: 48px 0; }
.sezione-titolo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 8px; }
.sezione-titolo h2 { margin: 0; font-size: 1.5rem; }
.sezione-titolo .link-tutti { font-size: .9rem; }
.sezione-alt { background: var(--tortora-100); }

/* --- Elenco annunci: card singole con miniatura e badge (home ed /annunci) --- */
.griglia-annunci { display: flex; flex-direction: column; gap: 14px; }
.card-annuncio {
  display: flex;
  gap: 14px;
  background: var(--bianco);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 14px;
  color: inherit;
  height: 190px; /* altezza fissa: tutte le card della stessa dimensione, anche con foto più "alte" del normale */
}
.card-annuncio:hover { text-decoration: none; box-shadow: 0 6px 24px rgba(63, 52, 42, .16); }
.card-annuncio-foto {
  width: 104px; height: 100%; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  background: var(--verde-100); display: flex; align-items: center; justify-content: center;
}
.card-annuncio-foto img { width: 100%; height: 100%; object-fit: cover; }
.card-annuncio-foto .segnaposto { font-size: 1.8rem; color: var(--verde-800); }
.card-annuncio-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
/* niente "flex-wrap: wrap" qui: la riga badge/autore resta sempre su una sola
   riga (l'autore si accorcia con i puntini se non c'entra) così l'altezza
   della card non varia da un annuncio all'altro */
.card-annuncio-meta-top { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden; }
.card-annuncio-meta-top .badge { flex-shrink: 0; }
.card-annuncio-autore {
  font-size: .82rem; color: var(--testo-chiaro); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.card-annuncio-titolo {
  margin: 0; font-size: 1.1rem; line-height: 1.3; font-family: Georgia, serif; font-weight: 700; color: var(--blu-link);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-annuncio-estratto {
  font-size: .9rem; color: var(--testo-chiaro); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-annuncio-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 2px; }
.card-annuncio-data { font-size: .78rem; color: var(--testo-chiaro); }
.card-annuncio-freccia {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid #ded2bd;
  display: flex; align-items: center; justify-content: center; color: var(--marrone-700);
  flex-shrink: 0; font-size: 1.1rem; line-height: 1;
}
@media (max-width: 420px) {
  .card-annuncio { padding: 10px; gap: 10px; height: 178px; }
  .card-annuncio-foto { width: 72px; border-radius: 8px; }
  .card-annuncio-titolo { font-size: 1rem; }
  .card-annuncio-estratto { font-size: .86rem; }
}

.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--verde-100); color: var(--verde-800);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: bold; font-family: Georgia, serif;
  flex-shrink: 0;
}
img.avatar { object-fit: cover; }

/* --- Badge --- */
.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge-categoria { background: var(--tortora-100); color: var(--marrone-700); }
.badge-evidenza { background: var(--arancio-bg); color: var(--arancio); }
.stato-pubblicato { background: var(--verde-msg-bg); color: var(--verde-msg); }
.stato-nascosto { background: var(--rosso-bg); color: var(--rosso); }
.stato-attivo { background: var(--verde-msg-bg); color: var(--verde-msg); }
.stato-attesa { background: var(--arancio-bg); color: var(--arancio); }

/* --- Card generiche / form --- */
.card {
  background: var(--bianco);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 28px;
}
.form-riga { margin-bottom: 18px; }
.form-riga label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
.form-riga .aiuto { color: var(--testo-chiaro); font-size: .82rem; margin-top: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="tel"], textarea, select {
  width: 100%; padding: 10px 14px; border: 1px solid #ded2bd; border-radius: 8px; font-size: .97rem; font-family: inherit; background: #fff; color: var(--testo);
}
textarea { resize: vertical; min-height: 110px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--verde-700); outline-offset: 1px; }

.avviso { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: .95rem; }
.avviso-successo { background: var(--verde-msg-bg); color: var(--verde-msg); }
.avviso-errore { background: var(--rosso-bg); color: var(--rosso); }
.avviso-info { background: var(--tortora-100); color: var(--marrone-700); }

/* --- Tabelle (aree riservate) --- */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #ede4d3; font-size: .92rem; vertical-align: top; }
th { background: var(--tortora-100); color: var(--marrone-950); font-weight: 600; }
tr:last-child td { border-bottom: none; }
.tabella-wrap { overflow-x: auto; background: #fff; border-radius: var(--raggio); box-shadow: var(--ombra); }

/* --- Layout area riservata --- */
.area-riservata { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.area-menu { background: var(--marrone-950); color: var(--crema); border-radius: var(--raggio); padding: 18px; position: sticky; top: 20px; }
.area-menu a { display: block; color: var(--crema); opacity: .85; padding: 9px 10px; border-radius: 8px; font-size: .93rem; }
.area-menu a:hover, .area-menu a.attivo { background: var(--marrone-700); opacity: 1; text-decoration: none; }
.area-menu .titolo-menu { color: var(--verde-500); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: 0 10px; margin-bottom: 6px; }
@media (max-width: 760px) {
  .area-riservata { grid-template-columns: 1fr; }
  .area-menu { position: static; }
}

/* --- Statistiche piccole --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat-box { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: var(--ombra); }
.stat-box .num { font-size: 1.7rem; font-weight: 700; color: var(--marrone-900); }
.stat-box .lbl { color: var(--testo-chiaro); font-size: .85rem; }

/* --- Pillole categoria (layout base: dimensione/colore riprendono le regole
   già definite più sopra in "Barra di ricerca") --- */
.pillola-categoria { background: var(--bianco); box-shadow: var(--ombra); border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 600; color: var(--marrone-900); }
.pillola-categoria.attiva { background: var(--verde-700); color: #1e3305; }
.pillola-categoria:hover { text-decoration: none; }

/* --- Paginazione --- */
.paginazione { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 30px; }
.paginazione-link {
  background: var(--bianco); box-shadow: var(--ombra); border-radius: 8px;
  padding: 8px 14px; font-size: .9rem; font-weight: 600; color: var(--marrone-900);
}
.paginazione-link:hover { text-decoration: none; background: var(--verde-100); }
.paginazione-link.attiva { background: var(--verde-700); color: #1e3305; }
.paginazione-puntini { padding: 8px 4px; color: var(--testo-chiaro); }

/* --- Footer --- */
.sito-footer { background: var(--marrone-950); color: var(--tortora-100); padding: 30px 0; margin-top: 50px; font-size: .88rem; text-align: center; }
.sito-footer a { color: var(--verde-500); }

/* --- Varie --- */
.testo-chiaro { color: var(--testo-chiaro); }
.mt-0 { margin-top: 0; }
.flex-tra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pillola-prezzo { display: inline-block; background: var(--verde-100); color: var(--verde-800); padding: 4px 14px; border-radius: 999px; font-weight: 600; font-size: .9rem; }