/*
Theme Name:   Astra Child - DiDiAdAstra
Theme URI:    https://didiadastra.it
Description:  Child theme di Astra per DiDiAdAstra APS
Author:       DiDiAdAstra APS
Template:     astra
Version:      1.0.0
Text Domain:  astra-child-didiadastra
*/

/* ============================================================
   VARIABILI CSS - Brand DiDiAdAstra
   ============================================================ */
:root {
  --color-verde:       #3a8c6e;
  --color-verde-dark:  #2c6e55;
  --color-verde-light: #e8f5f0;
  --color-azzurro:     #4a7fa5;
  --color-azzurro-dark:#385f7d;
  --color-azzurro-light:#e6f0f7;
  --color-testo:       #2d2d2d;
  --color-testo-light: #555555;
  --color-sfondo:      #ffffff;
  --color-sfondo-alt:  #f7f9fb;
  --color-bordo:       #e0e8ee;
  --font-heading:      'Lora', Georgia, serif;
  --font-body:         'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --radius:            8px;
  --radius-lg:         16px;
  --shadow-sm:         0 2px 8px rgba(0,0,0,.08);
  --shadow-md:         0 4px 20px rgba(0,0,0,.12);
  --transition:        .3s ease;
  --container-max:     1200px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-testo);
  background-color: var(--color-sfondo);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-testo);
  margin-bottom: .6em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }

p { margin-bottom: 1.2em; }

a {
  color: var(--color-verde);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-verde-dark); }

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

/* ============================================================
   HEADER / NAVIGAZIONE
   ============================================================ */
.site-header,
#masthead {
  background-color: var(--color-sfondo) !important;
  border-bottom: 2px solid var(--color-verde-light);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo testo */
.site-title a,
.ast-site-title-wrap .ast-header-logo-anchor {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  color: var(--color-verde) !important;
}

/* Menù desktop */
.main-navigation a,
.ast-main-header-bar-alignment a,
#site-navigation a {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  color: var(--color-testo) !important;
  transition: color var(--transition) !important;
  padding: .5rem .75rem !important;
}
.main-navigation a:hover,
#site-navigation a:hover {
  color: var(--color-verde) !important;
}

/* Voce attiva */
.main-navigation .current-menu-item > a,
#site-navigation .current-menu-item > a {
  color: var(--color-verde) !important;
  font-weight: 700 !important;
}

/* CTA nel menù (es. "Sostienici") */
.main-navigation .menu-item-sostienici > a,
#site-navigation .menu-sostienici > a {
  background-color: var(--color-verde);
  color: #fff !important;
  border-radius: var(--radius);
  padding: .4rem 1rem !important;
}
.main-navigation .menu-item-sostienici > a:hover {
  background-color: var(--color-verde-dark);
}

/* ============================================================
   PULSANTI GLOBALI
   ============================================================ */
.btn,
.wp-block-button__link,
.button,
input[type="submit"],
button[type="submit"] {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.4;
}

/* Primario - Verde */
.wp-block-button.is-style-fill .wp-block-button__link,
.btn-primary {
  background-color: var(--color-verde) !important;
  color: #fff !important;
  border-color: var(--color-verde) !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.btn-primary:hover {
  background-color: var(--color-verde-dark) !important;
  border-color: var(--color-verde-dark) !important;
}

/* Outline - Verde */
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-outline {
  background-color: transparent !important;
  color: var(--color-verde) !important;
  border-color: var(--color-verde) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.btn-outline:hover {
  background-color: var(--color-verde) !important;
  color: #fff !important;
}

/* Azzurro */
.btn-azzurro {
  background-color: var(--color-azzurro) !important;
  color: #fff !important;
  border-color: var(--color-azzurro) !important;
}
.btn-azzurro:hover {
  background-color: var(--color-azzurro-dark) !important;
}

/* ============================================================
   LAYOUT & CONTAINER
   ============================================================ */
.container,
.wp-block-group.alignwide,
.wp-block-group.alignfull > .wp-block-group__inner-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

section,
.wp-block-group {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* ============================================================
   HERO / HOME
   ============================================================ */
.hero-section,
.page-home .wp-block-cover:first-of-type {
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-verde) 0%, var(--color-azzurro) 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,.05)" d="M0,160L48,144C96,128,192,96,288,106.7C384,117,480,171,576,176C672,181,768,139,864,122.7C960,107,1056,117,1152,133.3C1248,149,1344,171,1392,181.3L1440,192V320H0Z"/></svg>') no-repeat bottom;
  background-size: cover;
}

.hero-section h1,
.hero-content h1 {
  color: #fff;
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

.hero-section p,
.hero-content p {
  color: rgba(255,255,255,.92);
  font-size: 1.2rem;
}

/* Contatore statistiche nella home */
.stats-bar {
  background-color: var(--color-verde);
  color: #fff;
  padding: 2.5rem 0;
  text-align: center;
}
.stats-bar .stat-item { padding: 1rem 2rem; }
.stats-bar .stat-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  display: block;
}
.stats-bar .stat-label {
  font-size: .9rem;
  opacity: .85;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ============================================================
   CHI SIAMO
   ============================================================ */
.chi-siamo-section {
  background-color: var(--color-sfondo);
}
.chi-siamo-section .accent-line {
  width: 60px;
  height: 4px;
  background-color: var(--color-verde);
  border-radius: 2px;
  margin: 0 0 1.5rem 0;
}

/* ============================================================
   COSA FACCIAMO
   ============================================================ */
.cosa-facciamo-section {
  background-color: var(--color-sfondo-alt);
}

/* Card attività */
.activity-card,
.wp-block-kadence-column.activity-card {
  background: var(--color-sfondo);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-verde);
  transition: transform var(--transition), box-shadow var(--transition);
}
.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.activity-card .card-icon {
  width: 56px;
  height: 56px;
  background-color: var(--color-verde-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  font-size: 1.6rem;
}
.activity-card h3 {
  color: var(--color-verde);
  margin-bottom: .5rem;
}

/* ============================================================
   PROGETTI
   ============================================================ */
.progetti-section {
  background-color: var(--color-sfondo);
}

/* Card progetto */
.project-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  background: var(--color-sfondo);
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.project-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.project-card-body {
  padding: 1.5rem;
}
.project-card-body .tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  background-color: var(--color-verde-light);
  color: var(--color-verde);
  border-radius: 20px;
  padding: .2rem .8rem;
  margin-bottom: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================
   NEWS & EVENTI
   ============================================================ */
.news-section {
  background-color: var(--color-sfondo-alt);
}

/* Card news */
.news-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-sfondo);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}
.news-card:hover { transform: translateY(-3px); }
.news-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.news-card-body { padding: 1.5rem; }
.news-card .date {
  font-size: .82rem;
  color: var(--color-testo-light);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.news-card .date::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: var(--color-azzurro);
  border-radius: 50%;
  display: inline-block;
}

/* Evento badge */
.evento-badge {
  display: inline-block;
  background-color: var(--color-azzurro);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ============================================================
   TRASPARENZA
   ============================================================ */
.trasparenza-section {
  background-color: var(--color-sfondo);
}

/* Tabella documenti */
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.doc-table th {
  background-color: var(--color-verde);
  color: #fff;
  padding: .9rem 1.2rem;
  text-align: left;
  font-weight: 600;
}
.doc-table td {
  padding: .8rem 1.2rem;
  border-bottom: 1px solid var(--color-bordo);
}
.doc-table tr:nth-child(even) td {
  background-color: var(--color-verde-light);
}
.doc-table a {
  color: var(--color-azzurro);
  font-weight: 500;
}
.doc-table a:hover { text-decoration: underline; }

/* Card organo */
.organo-card {
  background: var(--color-sfondo-alt);
  border-radius: var(--radius);
  padding: 1.5rem;
  border-left: 4px solid var(--color-azzurro);
}
.organo-card h4 { color: var(--color-azzurro); margin-bottom: .4rem; }

/* ============================================================
   SOSTIENICI
   ============================================================ */
.sostienici-section {
  background: linear-gradient(135deg, var(--color-verde-light) 0%, var(--color-azzurro-light) 100%);
}

/* Card modalità supporto */
.support-card {
  background: var(--color-sfondo);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
  border-bottom: 4px solid var(--color-verde);
  transition: transform var(--transition);
}
.support-card:hover { transform: translateY(-4px); }
.support-card .support-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.support-card h3 { color: var(--color-verde); }

/* Box IBAN */
.iban-box {
  background: var(--color-sfondo);
  border: 2px solid var(--color-verde);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: .05em;
}
.iban-box .iban-code {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-verde);
  display: block;
  margin-top: .3rem;
}

/* ============================================================
   CONTATTI
   ============================================================ */
.contatti-section {
  background-color: var(--color-sfondo-alt);
}

/* Contact Form 7 custom styles */
.wpcf7 .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wpcf7 .form-group { display: flex; flex-direction: column; gap: .4rem; }
.wpcf7 label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-testo);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid var(--color-bordo);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--color-testo);
  background: var(--color-sfondo);
  transition: border-color var(--transition);
  outline: none;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--color-verde);
  box-shadow: 0 0 0 3px rgba(58,140,110,.15);
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input[type="submit"] {
  background-color: var(--color-verde);
  color: #fff;
  border: none;
  padding: .85rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition);
  align-self: flex-start;
}
.wpcf7 input[type="submit"]:hover {
  background-color: var(--color-verde-dark);
}

/* Info contatto */
.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}
.contact-info-item .info-icon {
  width: 42px;
  height: 42px;
  background-color: var(--color-verde-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-verde);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ============================================================
   MAPPA (Google Maps embed)
   ============================================================ */
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.map-embed iframe {
  width: 100%;
  height: 360px;
  border: none;
  display: block;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
  background-color: #1a2d24 !important;
  color: rgba(255,255,255,.8) !important;
  padding-top: 3.5rem;
  padding-bottom: 1.5rem;
}
.site-footer h4,
.widget-title {
  color: #fff !important;
  font-family: var(--font-heading) !important;
  font-size: 1rem !important;
  margin-bottom: 1rem;
}
.site-footer a { color: rgba(255,255,255,.7) !important; }
.site-footer a:hover { color: var(--color-verde-light) !important; }
.site-footer p { color: rgba(255,255,255,.7); font-size: .9rem; }

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 2rem 0 1.5rem;
}

.footer-bottom {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ============================================================
   SEZIONI INTESTAZIONE (titolo + sottotitolo)
   ============================================================ */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem;
}
.section-header h2 {
  position: relative;
  display: inline-block;
  padding-bottom: .8rem;
}
.section-header h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--color-verde);
  border-radius: 2px;
}
.section-header p {
  color: var(--color-testo-light);
  font-size: 1.05rem;
  margin-top: .8rem;
}

/* ============================================================
   BADGE / PILL COLORI
   ============================================================ */
.badge-verde {
  background-color: var(--color-verde-light);
  color: var(--color-verde);
  border-radius: 20px;
  padding: .25rem .9rem;
  font-size: .82rem;
  font-weight: 600;
}
.badge-azzurro {
  background-color: var(--color-azzurro-light);
  color: var(--color-azzurro);
  border-radius: 20px;
  padding: .25rem .9rem;
  font-size: .82rem;
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  section,
  .wp-block-group { padding-top: 3rem; padding-bottom: 3rem; }
  .hero-section { min-height: 70vh; }
  .stats-bar .stat-item { padding: .75rem 1rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .doc-table { font-size: .85rem; }
  .doc-table th, .doc-table td { padding: .6rem .8rem; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  .iban-box .iban-code { font-size: 1.1rem; }
}