/*
Theme Name: Consulta Civica di Siracusa
Theme URI: https://consultacivicasiracusa.it/
Author: Alessandro Calabrò
Author URI: https://www.alessandrocalabro.it/
Description: Tema custom per il sito ufficiale della Consulta Civica di Siracusa. Stile basato su Tailwind + Lora + Titillium Web.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: consulta-civica
Tags: custom-theme, civic, non-profit
*/

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Titillium Web', -apple-system, system-ui, sans-serif;
  color: #1B1B1B;
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.font-serif { font-family: 'Lora', Georgia, serif; }

.label-eyebrow {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.crest {
  background: #003366;
  color: #C9A84A;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 2px;
}

.top-strip { background: #003366; color: rgba(255,255,255,0.92); }
.header-link { color: #1B1B1B; font-weight: 600; }
.header-link:hover, .header-link.active { color: #003366; border-bottom: 3px solid #C9A84A; }

/* Skip link a11y */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #003366;
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Article page styles */
.article-eyebrow {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A8862A;
  margin-bottom: 16px;
  display: block;
}
.article-title {
  font-family: 'Lora', serif;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  color: #003366;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
@media (min-width: 768px) {
  .article-title { font-size: 52px; }
}
.article-subtitle {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: #444;
  margin-bottom: 28px;
}
.article-meta {
  font-family: 'Titillium Web', sans-serif;
  font-size: 13px;
  color: #777;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  letter-spacing: 0.04em;
}
.article-body {
  font-size: 18px;
  line-height: 1.75;
  color: #2a2a2a;
}
.article-body p { margin-bottom: 22px; }
.article-body p strong { color: #003366; font-weight: 700; }
.article-body h2 {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 700;
  color: #003366;
  margin-top: 44px;
  margin-bottom: 18px;
  line-height: 1.25;
}
.article-body blockquote {
  border-left: 4px solid #C9A84A;
  background: #F5F2ED;
  padding: 22px 28px;
  margin: 32px 0;
  font-family: 'Lora', serif;
  font-size: 19px;
  font-style: italic;
  line-height: 1.55;
}
.article-body blockquote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #003366;
}
.article-body figure { margin: 32px 0; }
.article-body figure img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.article-body figcaption {
  font-size: 13px;
  color: #777;
  font-style: italic;
  text-align: center;
  margin-top: 12px;
}

.info-box {
  background: #F5F2ED;
  border-left: 3px solid #003366;
  padding: 22px 26px;
  margin-top: 48px;
  font-size: 15px;
  line-height: 1.6;
}
.info-box h3 {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A8862A;
  margin: 0 0 12px;
}
.info-box ul { list-style: none; padding: 0; margin: 8px 0 0; }
.info-box ul li { padding: 3px 0; }
.info-box a { color: #0066CC; text-decoration: none; font-weight: 600; }
.info-box a:hover { text-decoration: underline; }

/* News card (archive) */
.news-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
@media (min-width: 768px) {
  .news-card { grid-template-columns: 240px 1fr; gap: 32px; }
}
.news-card:hover { transform: translateX(4px); }
.news-card .img {
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}
.news-card .cat {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0066CC;
}
.news-card .date {
  font-family: 'Titillium Web', sans-serif;
  font-size: 13px;
  color: #777;
  margin-left: 12px;
}
.news-card h2 {
  font-family: 'Lora', serif;
  font-size: 26px;
  line-height: 1.25;
  color: #003366;
  margin: 12px 0 10px;
  font-weight: 700;
  transition: color 0.2s;
}
.news-card a { text-decoration: none; color: inherit; }
.news-card:hover h2 { color: #0066CC; }
.news-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 8px;
}
.news-card a.read { font-size: 14px; color: #0066CC; font-weight: 600; }

/* Home news grid card */
.home-news-card { display: block; }
.home-news-card .news-img {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.4s;
}
.home-news-card:hover .news-img { transform: scale(1.03); }

/* Hero */
.hero-bg {
  background-image:
    linear-gradient(180deg, rgba(0,51,102,0.78) 0%, rgba(0,51,102,0.85) 60%, rgba(0,51,102,0.95) 100%),
    url('https://images.unsplash.com/photo-1597256195875-83cdc4d6f5d6?auto=format&fit=crop&w=2200&q=80');
  background-size: cover;
  background-position: center 40%;
}

.hero-title {
  font-family: 'Lora', serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hero-title em {
  font-style: italic;
  color: #C9A84A;
}

/* WordPress core block styles */
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: none; margin-left: calc(-50vw + 50%); }

/* Pagination */
.wp-pagenavi, .pagination { padding: 32px 0; text-align: center; }
.wp-pagenavi a, .pagination a {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  border: 1px solid #003366;
  color: #003366;
  text-decoration: none;
}
.wp-pagenavi a:hover, .pagination a:hover { background: #003366; color: #fff; }

/* Member card (giunta archive) */
.member-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 32px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.member-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.member-card h3 {
  font-family: 'Lora', serif;
  font-size: 24px;
  color: #003366;
  margin: 12px 0 6px;
}
.member-card .role {
  font-family: 'Titillium Web', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A8862A;
}
.member-card .bio { font-size: 15px; color: #555; line-height: 1.55; margin-top: 12px; }

.avatar-circle {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, #003366 0%, #1A4577 100%);
  color: #C9A84A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(0, 51, 102, 0.18);
}

/* ===========================================
   Stili rimanenti dal sito statico originale
   =========================================== */

/* Hero sections */
.hero-soft {
  background: linear-gradient(180deg, #F5F2ED 0%, #FFFFFF 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.page-hero {
  background: #003366;
  color: #fff;
}
.page-hero .label-eyebrow { color: #C9A84A; }
.page-hero h1 { color: #fff; }

/* Pull quote (citazione del profilo) */
.pull-quote {
  border-left: 4px solid #C9A84A;
  padding: 4px 0 4px 24px;
  margin: 28px 0;
}
.pull-quote p {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  color: #003366;
  font-size: 22px;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .pull-quote p { font-size: 26px; }
}

/* Crest header marker */
.crest-mark {
  font-size: 1.1rem;
  display: block;
  line-height: 1;
}
.crest-text {
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  display: block;
  margin-top: 2px;
}

/* Lift card hover */
.lift {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 51, 102, 0.1);
}

/* Link with golden underline on hover */
.link-under {
  position: relative;
  display: inline-block;
}
.link-under::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #C9A84A;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.link-under:hover::after { transform: scaleX(1); }

/* Avatar large (profilo singolo) */
.avatar {
  background: linear-gradient(135deg, #003366 0%, #1A4577 100%);
  color: #C9A84A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-weight: 700;
}
.avatar-blu {
  background: linear-gradient(135deg, #003366 0%, #1A4577 100%);
}

/* Timeline events su Storia */
.timeline-year {
  position: sticky;
  top: 110px;
  align-self: flex-start;
  font-family: 'Lora', serif;
  font-size: 56px;
  font-weight: 700;
  color: #003366;
  letter-spacing: -0.02em;
  line-height: 1;
}
.timeline-event {
  border-left: 2px solid rgba(0, 51, 102, 0.15);
  padding-left: 24px;
  margin-bottom: 32px;
  position: relative;
}
.timeline-event::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 8px;
  width: 12px; height: 12px;
  background: #C9A84A;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 51, 102, 0.3);
}
.timeline-event:hover { border-left-color: #C9A84A; }
.timeline-event h3 {
  font-family: 'Lora', serif;
  font-size: 19px;
  color: #003366;
  margin-bottom: 6px;
  line-height: 1.3;
}
.timeline-event .date {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #A8862A;
  margin-bottom: 8px;
  display: block;
}
.timeline-event p {
  color: #444;
  font-size: 15px;
  line-height: 1.55;
}
.timeline-event a.source {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #0066CC;
  text-decoration: none;
  font-weight: 600;
}
.timeline-event a.source:hover { text-decoration: underline; }

/* Header stuck (sticky header style del statico) */
.header-stuck {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* Quote on partecipa */
.pres-card {
  background: #F5F2ED;
  border-left: 3px solid #C9A84A;
  padding: 24px;
  margin-bottom: 16px;
}
.pres-card .pres-name {
  font-family: 'Lora', serif;
  font-size: 22px;
  color: #003366;
}

/* Form / interactive */
button, .btn {
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  cursor: pointer;
  border: none;
  padding: 12px 24px;
  background: #003366;
  color: #fff;
  border-radius: 2px;
}
button:hover, .btn:hover { background: #0066CC; }


/* =========================================================================
   PROFILO MEMBRO DELLA GIUNTA — single-membro_giunta.php
   Aggiungere in coda a style.css del tema "consulta-civica".
   Tutto e' scoped su .giunta-* per non collidere con classi esistenti.
   Token REALI del tema (verificati dal backup live, NON inventati):
     blu-900 #003366 · blu-700 #0066CC · oro #C9A84A · oroDark #A88A35
     ink #1B1B1B · stone #F5F2ED · stoneDark #EAE4DA · serif "Lora" · sans "Titillium Web"
   ========================================================================= */

/* ---- RITRATTO TONDO + anello oro + ombra (grande e nitido) ---- */
.giunta-avatar {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  background-color: #EAE4DA; /* stoneDark: evita lampo bianco prima del load */
  /* passe-partout bianco + filo oro sottile + ombra morbida blu istituzionale */
  box-shadow:
    0 0 0 1px rgba(0, 51, 102, 0.10),
    0 0 0 6px #ffffff,
    0 0 0 7px rgba(201, 168, 74, 0.60),
    0 22px 48px -20px rgba(0, 51, 102, 0.40);
}
@media (min-width: 1024px) {
  .giunta-avatar { width: 260px; height: 260px; }
}

/* Fallback iniziali: disco blu->#002852, testo oro (coerente con .avatar-blu del tema).
   Oro #C9A84A su blu #003366 ~ 5.5:1 (AA). */
.giunta-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #003366 0%, #002852 100%);
  color: #C9A84A;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 4.6rem;
  line-height: 1;
  letter-spacing: -0.01em;
  user-select: none;
}
@media (min-width: 1024px) {
  .giunta-avatar--fallback { font-size: 5.4rem; }
}

/* ---- HERO ---- */
/* L'occhiello-ruolo riusa .label-eyebrow .text-oroDark del tema (look di tutte le
   altre pagine). Il dato semantico e' sempre l'h1/h2 blu adiacente, mai il colore. */
.giunta-eyebrow { color: #A88A35; }

.giunta-name {
  font-size: clamp(40px, 5.5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.giunta-delega {
  font-size: clamp(18px, 2vw, 22px);
  max-width: 34rem;
}
@media (max-width: 1023px) {
  .giunta-delega { margin-left: auto; margin-right: auto; }
}

/* Fatti chiave: coppie etichetta/valore, lette in coppia da VoiceOver (dl/dt/dd) */
.giunta-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(0, 51, 102, 0.14);
}
@media (min-width: 640px) {
  .giunta-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 34rem; }
}
@media (min-width: 1024px) {
  .giunta-facts { margin-left: 0; }
}
.giunta-fact dt { display: block; }

/* ====== RITMO DELLE SEZIONI BODY (the_content) ======
   .article-body fornisce gia' la tipografia di base. Qui imponiamo il pattern
   "occhiello — Titolo + h2 serif + contenuto" e l'aria delle sezioni, cosi'
   tutti i profili sono simili nella struttura anche con contenuti diversi. */
.giunta-body > *:first-child { margin-top: 0; }

.giunta-body .giunta-section { margin-top: 4rem; }
.giunta-body .giunta-section:first-child { margin-top: 0; }

/* Occhiello di sezione nel corpo (decorativo, NON un heading) */
.giunta-body .label-eyebrow { color: #A88A35; display: block; margin-bottom: 0.85rem; }

/* Il titolo di sezione e' sempre un h2 serif blu */
.giunta-body h2 {
  font-family: 'Lora', Georgia, serif;
  color: #003366;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.giunta-body h3 {
  font-family: 'Lora', Georgia, serif;
  color: #003366;
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 1.6rem 0 0.5rem;
}
.giunta-body p {
  color: rgba(27, 27, 27, 0.85);
  font-size: 1.075rem;
  line-height: 1.75;
  text-wrap: pretty;
}
/* Link nel corpo: blu-700 reale del tema, sottolineato per non affidarsi al colore */
.giunta-body a:not(.btn) {
  color: #0066CC;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.giunta-body a:not(.btn):hover { color: #003366; }

/* Filetto dorato divisorio (riusa l'estetica di .hr-soft) */
.giunta-body .giunta-rule {
  height: 1px;
  border: 0;
  margin: 2.5rem 0;
  background: linear-gradient(90deg, transparent, rgba(0, 51, 102, 0.18), transparent);
}

/* ---- LISTA INCARICHI numerati ("Le voci accanto") ---- */
.giunta-roles { list-style: none; margin: 0; padding: 0; }
.giunta-roles > li {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(27, 27, 27, 0.10);
}
.giunta-roles > li:first-child { border-top: 0; padding-top: 0; }
.giunta-roles .giunta-roles__num {
  font-family: 'Lora', Georgia, serif;
  color: #A88A35;
  font-size: 1.25rem;
  line-height: 1.2;
  width: 2.4rem;
  flex: 0 0 auto;
}
.giunta-roles .role-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: #003366;
  line-height: 1.3;
  margin: 0;
}
.giunta-roles .role-org {
  font-size: 0.95rem;
  color: rgba(27, 27, 27, 0.65);
  margin-top: 0.25rem;
}

/* ---- GRIGLIA CARD (libri / social): riusa .lift del tema sulle singole card ---- */
.giunta-cards { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .giunta-cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .giunta-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.giunta-book-title {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: 1.45rem;
  color: #003366;
  line-height: 1.3;
  margin: 0;
}
.giunta-book-meta {
  font-size: 0.9rem;
  color: rgba(27, 27, 27, 0.6);
  margin-top: 0.35rem;
}
.giunta-store-links {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.giunta-store-links a {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0066CC;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.giunta-store-links a:hover { color: #003366; }

/* ---- CTA FINALE (blocco blu con filo oro) ---- */
.giunta-cta {
  margin-top: 4rem;
  background: linear-gradient(180deg, #003366 0%, #002852 100%);
  border-top: 3px solid #C9A84A;
  color: #fff;
  padding: 2.25rem 1.75rem;
  border-radius: 2px;
}
@media (min-width: 640px) { .giunta-cta { padding: 2.75rem 2.5rem; } }
.giunta-cta .label-eyebrow { color: #C9A84A; }
.giunta-cta h2 { color: #fff; margin-top: 0; }
.giunta-cta p { color: rgba(255, 255, 255, 0.85); }

/* Riduzione movimento: rispetta le preferenze utente */
@media (prefers-reduced-motion: reduce) {
  .giunta-avatar, .lift { transition: none !important; }
}