/* PS_ECOSISTEMA_UNIFORME_V1
   Vestito comune per:
   - Home ecosistema
   - Segnalazioni sicurezza
   - Segnalazioni civiche
*/

:root{
  --eco-bg-1:#f8fbff;
  --eco-bg-2:#edf6f4;
  --eco-ink:#07142b;
  --eco-muted:#5d6b82;
  --eco-line:#d9e5ef;
  --eco-card:#ffffff;
  --eco-green:#16c76a;
  --eco-blue:#2563eb;
  --eco-shadow:0 20px 55px rgba(15,23,42,.10);
  --eco-soft:0 12px 34px rgba(15,23,42,.07);
  --eco-radius:30px;
  --eco-width:1120px;
}

html,
body{
  background:
    radial-gradient(circle at top left, rgba(22,199,106,.18), transparent 32%),
    radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 34%),
    linear-gradient(180deg,var(--eco-bg-1) 0%,var(--eco-bg-2) 100%) !important;
  color:var(--eco-ink) !important;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* larghezza comune */
.ps-civic-shell,
.eco-shell,
.eco-wrap,
.wrapper,
.wrap,
.container,
main,
.ps-seg-page,
.ps-seg-wrap{
  width:min(var(--eco-width), calc(100% - 28px)) !important;
  max-width:min(var(--eco-width), calc(100% - 28px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* topbar coerente */
.ps-civic-topbar,
.eco-topbar,
.topbar,
.ps-seg-topbar{
  width:min(var(--eco-width), calc(100% - 28px)) !important;
  max-width:min(var(--eco-width), calc(100% - 28px)) !important;
  margin:26px auto 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}

/* chip alto */
.ps-civic-chip,
.eco-chip,
.eyebrow,
.badge,
.pill,
.ps-seg-badge,
.ps-choice-kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:38px !important;
  width:max-content !important;
  max-width:100% !important;
  padding:0 16px !important;
  border-radius:999px !important;
  background:#ffffff !important;
  border:1px solid var(--eco-line) !important;
  box-shadow:var(--eco-soft) !important;
  color:#047857 !important;
  font-size:14px !important;
  font-weight:950 !important;
  letter-spacing:0.01em !important;
}

/* hero comune: stessa forma visiva */
.eco-hero,
.ps-civic-hero,
.ps-seg-hero-logo-wrap,
.hero-main,
.hero{
  width:min(var(--eco-width), calc(100% - 28px)) !important;
  max-width:min(var(--eco-width), calc(100% - 28px)) !important;
  margin:0 auto 28px !important;
  padding:34px !important;
  border-radius:var(--eco-radius) !important;
  background:
    radial-gradient(circle at top right, rgba(22,199,106,.18), transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#f8fbff 64%,#e9f8f1 100%) !important;
  border:1px solid var(--eco-line) !important;
  box-shadow:var(--eco-shadow) !important;
  color:var(--eco-ink) !important;
  overflow:hidden !important;
}

/* tutte le hero in due colonne quando hanno logo */
.eco-hero,
.ps-civic-hero,
.ps-seg-hero-logo-wrap{
  display:grid !important;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr) !important;
  gap:22px !important;
  align-items:center !important;
}

/* titoli principali uguali */
h1,
.eco-hero h1,
.ps-civic-hero h1,
.ps-seg-hero-logo-wrap h1,
.hero h1{
  color:var(--eco-ink) !important;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:clamp(52px, 6vw, 76px) !important;
  font-weight:950 !important;
  line-height:.92 !important;
  letter-spacing:-.070em !important;
  text-shadow:none !important;
  max-width:760px !important;
  margin:18px 0 12px !important;
}

/* sottotitoli principali uguali */
.eco-hero p,
.ps-civic-hero p,
.ps-seg-hero-logo-wrap p,
.hero p,
.subtitle,
.eco-subtitle{
  color:var(--eco-muted) !important;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size:20px !important;
  line-height:1.45 !important;
  font-weight:650 !important;
  letter-spacing:-.015em !important;
  text-shadow:none !important;
  max-width:760px !important;
}

/* logo card comune */
.ps-eco-logo-card,
.ps-seg-hero-logo,
.eco-logo-card,
.logo-card{
  display:grid !important;
  place-items:center !important;
  min-height:250px !important;
  padding:26px !important;
  border-radius:28px !important;
  background:#ffffff !important;
  border:1px solid var(--eco-line) !important;
  box-shadow:var(--eco-soft) !important;
  text-align:center !important;
  color:var(--eco-ink) !important;
}

/* logo grafico: dimensioni uguali */
.ps-eco-logo-mark,
.ps-seg-hero-logo-mark,
.eco-logo-mark,
.logo-mark{
  width:104px !important;
  height:104px !important;
  border-radius:28px !important;
  margin:0 auto 16px !important;
}

/* testo logo */
.ps-eco-logo-card h2,
.ps-seg-hero-logo strong,
.eco-logo-card h2,
.logo-title{
  margin:0 !important;
  color:var(--eco-ink) !important;
  font-size:26px !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
  font-weight:950 !important;
  text-align:center !important;
}

.ps-eco-logo-card p,
.ps-seg-hero-logo span,
.eco-logo-card p,
.logo-sub,
.logo-text{
  margin:9px 0 0 !important;
  color:#607089 !important;
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:850 !important;
  text-align:center !important;
}

/* note dentro hero */
.ps-civic-note,
.ps-civic-active,
.note,
.notice,
.alert,
.warning{
  border-radius:18px !important;
  box-shadow:none !important;
  line-height:1.45 !important;
  font-size:15px !important;
  font-weight:650 !important;
}

.ps-civic-note,
.note{
  background:#ffffff !important;
  border:1px solid var(--eco-line) !important;
  color:#334155 !important;
}

.ps-civic-active,
.note.real{
  background:#ecfdf5 !important;
  border:1px solid #bbf7d0 !important;
  color:#065f46 !important;
}

.warning,
.alert{
  background:#fff7ed !important;
  border:1px solid #fed7aa !important;
  color:#9a3412 !important;
}

/* sezioni sotto hero: stesse card */
section,
.card,
.side,
aside,
form,
.ps-choice-card{
  border-radius:26px !important;
  border:1px solid var(--eco-line) !important;
  background:#ffffff !important;
  box-shadow:var(--eco-soft) !important;
  color:var(--eco-ink) !important;
}

/* titoli secondari */
h2,
.card h2,
.side h2,
aside h2,
form h2,
.ps-choice-title,
.ps-three-choice-head h2{
  color:var(--eco-ink) !important;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight:950 !important;
  letter-spacing:-.050em !important;
  line-height:1.02 !important;
  text-shadow:none !important;
}

/* testi card */
p,
li,
.card p,
.side p,
aside p,
.card li,
.side li,
aside li,
.ps-choice-text{
  color:#526174 !important;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight:650 !important;
  line-height:1.48 !important;
}

/* bottoni coerenti */
a.btn,
.btn,
button,
input[type="submit"]{
  border-radius:16px !important;
  font-weight:950 !important;
  min-height:48px !important;
}

/* mobile */
@media(max-width:860px){
  .ps-civic-topbar,
  .eco-topbar,
  .topbar,
  .ps-seg-topbar{
    align-items:flex-start !important;
    flex-direction:column !important;
    margin-top:16px !important;
  }

  .eco-hero,
  .ps-civic-hero,
  .ps-seg-hero-logo-wrap{
    grid-template-columns:1fr !important;
    padding:24px !important;
    border-radius:26px !important;
  }

  h1,
  .eco-hero h1,
  .ps-civic-hero h1,
  .ps-seg-hero-logo-wrap h1,
  .hero h1{
    font-size:clamp(42px, 13vw, 58px) !important;
    line-height:.93 !important;
    letter-spacing:-.065em !important;
  }

  .eco-hero p,
  .ps-civic-hero p,
  .ps-seg-hero-logo-wrap p,
  .hero p,
  .subtitle,
  .eco-subtitle{
    font-size:17px !important;
  }

  .ps-eco-logo-card,
  .ps-seg-hero-logo,
  .eco-logo-card,
  .logo-card{
    min-height:auto !important;
  }
}


/* PS_TITOLI_COMPATTI_UNIFORMI_V1_START */

/*
 * Titoli più compatti su Home / Sicurezza / Civiche.
 * La home ha titolo più lungo, quindi viene ridotta un po' di più.
 */

/* Titoli principali sicurezza e civiche */
.ps-seg-hero-logo-wrap h1,
.ps-civic-hero h1,
.hero h1 {
  font-size: clamp(42px, 5vw, 62px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.060em !important;
  max-width: 680px !important;
}

/* Titolo home ecosistema: più lungo, quindi più compatto */
.eco-hero h1,
.eco-main-title,
body:has(.ps-three-choice-wrap) h1 {
  font-size: clamp(38px, 4.6vw, 58px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  max-width: 720px !important;
}

/* Sottotitoli leggermente più ordinati */
.eco-hero p,
.ps-civic-hero p,
.ps-seg-hero-logo-wrap p,
.hero p,
.subtitle,
.eco-subtitle {
  font-size: 18px !important;
  line-height: 1.45 !important;
}

/* Titoli sezioni sotto hero */
.ps-three-choice-head h2,
.card h2,
.side h2,
aside h2,
form h2,
.ps-choice-title {
  letter-spacing: -0.040em !important;
}

/* Mobile: evitiamo titoli enormi */
@media(max-width:860px){
  .ps-seg-hero-logo-wrap h1,
  .ps-civic-hero h1,
  .hero h1 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.050em !important;
  }

  .eco-hero h1,
  .eco-main-title,
  body:has(.ps-three-choice-wrap) h1 {
    font-size: clamp(32px, 10vw, 46px) !important;
    line-height: 0.97 !important;
    letter-spacing: -0.045em !important;
  }

  .eco-hero p,
  .ps-civic-hero p,
  .ps-seg-hero-logo-wrap p,
  .hero p,
  .subtitle,
  .eco-subtitle {
    font-size: 16px !important;
  }
}

/* PS_TITOLI_COMPATTI_UNIFORMI_V1_END */



/* ==================================================
   PS_LOGO_WOW_NUCLEARE_V1
   Logo ecosistema più riconoscibile, responsive.
   Solo estetica: nessuna logica modificata.
   ================================================== */

.logo-card,
.pi-logo,
.eco-shared-logo{
  width:min(100%, 760px) !important;
  margin:0 auto 28px !important;
  padding:22px 26px !important;
  border-radius:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  text-align:left !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(96,165,250,.26), transparent 32%),
    radial-gradient(circle at 82% 22%, rgba(74,222,128,.22), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.88), rgba(30,41,59,.72)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 24px 70px rgba(15,23,42,.30),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.logo-card::before,
.pi-logo::before,
.eco-shared-logo::before{
  content:"";
  width:72px !important;
  height:72px !important;
  flex:0 0 72px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 30% 28%, #ffffff 0 7px, transparent 8px),
    radial-gradient(circle at 70% 28%, #60a5fa 0 8px, transparent 9px),
    radial-gradient(circle at 30% 72%, #4ade80 0 8px, transparent 9px),
    radial-gradient(circle at 70% 72%, #facc15 0 7px, transparent 8px),
    linear-gradient(135deg, #0f172a, #1d4ed8) !important;
  box-shadow:
    0 16px 32px rgba(37,99,235,.34),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  position:relative !important;
}

.logo-card::after,
.pi-logo::after,
.eco-shared-logo::after{
  content:"";
  position:absolute;
  width:0;
  height:0;
}

.logo-card strong,
.pi-logo strong,
.eco-shared-logo strong{
  display:block !important;
  font-size:clamp(1.35rem, 2.3vw, 2.25rem) !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
  color:#ffffff !important;
  font-weight:950 !important;
  text-shadow:0 3px 18px rgba(0,0,0,.25) !important;
}

.logo-card span,
.pi-logo span,
.eco-shared-logo span,
.logo-card small,
.pi-logo small,
.eco-shared-logo small{
  display:block !important;
  margin-top:6px !important;
  font-size:clamp(.92rem, 1.25vw, 1.08rem) !important;
  line-height:1.35 !important;
  color:rgba(226,232,240,.92) !important;
  font-weight:650 !important;
}

/* Se il logo è stato scritto come testo diretto senza strong/span */
.eco-shared-logo{
  font-size:1rem !important;
  color:rgba(226,232,240,.92) !important;
  font-weight:700 !important;
}

@media(max-width:720px){
  .logo-card,
  .pi-logo,
  .eco-shared-logo{
    width:100% !important;
    margin-bottom:20px !important;
    padding:18px 16px !important;
    border-radius:24px !important;
    gap:13px !important;
  }

  .logo-card::before,
  .pi-logo::before,
  .eco-shared-logo::before{
    width:58px !important;
    height:58px !important;
    flex-basis:58px !important;
    border-radius:20px !important;
  }

  .logo-card strong,
  .pi-logo strong,
  .eco-shared-logo strong{
    font-size:1.28rem !important;
  }

  .logo-card span,
  .pi-logo span,
  .eco-shared-logo span,
  .logo-card small,
  .pi-logo small,
  .eco-shared-logo small{
    font-size:.88rem !important;
  }
}

@media(max-width:440px){
  .logo-card,
  .pi-logo,
  .eco-shared-logo{
    align-items:flex-start !important;
  }

  .logo-card::before,
  .pi-logo::before,
  .eco-shared-logo::before{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
  }
}


/* ==================================================
   PS_LOGO_WOW_CONTRASTO_V2
   Correzione: logo più nitido, testo leggibile, meno effetto fantasma.
   ================================================== */

.logo-card,
.pi-logo,
.eco-shared-logo{
  background:
    radial-gradient(circle at 15% 20%, rgba(37,99,235,.10), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(16,185,129,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92)) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:
    0 26px 70px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  color:#071225 !important;
  text-shadow:none !important;
}

.logo-card::before,
.pi-logo::before,
.eco-shared-logo::before{
  width:86px !important;
  height:86px !important;
  flex:0 0 86px !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0 7px, transparent 8px),
    radial-gradient(circle at 70% 30%, #3b82f6 0 9px, transparent 10px),
    radial-gradient(circle at 30% 70%, #22c55e 0 9px, transparent 10px),
    radial-gradient(circle at 70% 70%, #facc15 0 8px, transparent 9px),
    linear-gradient(135deg, #0f172a, #2563eb 55%, #14b8a6) !important;
  box-shadow:
    0 18px 38px rgba(37,99,235,.28),
    0 4px 12px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.logo-card strong,
.pi-logo strong,
.eco-shared-logo strong{
  color:#071225 !important;
  text-shadow:none !important;
  font-size:clamp(1.55rem, 2.65vw, 2.55rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
}

.logo-card span,
.pi-logo span,
.eco-shared-logo span,
.logo-card small,
.pi-logo small,
.eco-shared-logo small{
  color:#475569 !important;
  text-shadow:none !important;
  font-weight:750 !important;
  font-size:clamp(.98rem, 1.25vw, 1.13rem) !important;
}

@media(max-width:720px){
  .logo-card,
  .pi-logo,
  .eco-shared-logo{
    padding:18px 16px !important;
  }

  .logo-card::before,
  .pi-logo::before,
  .eco-shared-logo::before{
    width:64px !important;
    height:64px !important;
    flex-basis:64px !important;
    border-radius:22px !important;
  }

  .logo-card strong,
  .pi-logo strong,
  .eco-shared-logo strong{
    font-size:1.35rem !important;
  }
}


/* ==================================================
   PS_LOGO_SPAZIO_CIVICO_IMG_V1
   Logo ufficiale nuovo: Ponderano Spazio Civico Digitale
   ================================================== */

.ps-logo-spazio-civico-card{
  width:min(100%, 620px);
  margin:0 auto;
  padding:0;
  border-radius:30px;
  background:rgba(255,255,255,.76);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 24px 70px rgba(15,23,42,.14);
  overflow:hidden;
}

.ps-logo-spazio-civico-card img{
  display:block;
  width:100%;
  height:auto;
}

#ps-logo-spazio-civico-hero + .ps-eco-logo-card,
#ps-logo-spazio-civico-hero + .eco-logo-card,
#ps-logo-spazio-civico-hero + .logo-card{
  display:none !important;
}

@media(max-width:780px){
  .ps-logo-spazio-civico-card{
    margin-top:22px;
    border-radius:24px;
  }
}


/* ==================================================
   PS_LOGO_ORIGINALE_REALE_PNG_V2
   Usa il logo originale reale caricato da Roby.
   ================================================== */

.ps-logo-spazio-civico-card{
  width:min(100%, 620px) !important;
  margin:0 auto !important;
  padding:0 !important;
  border-radius:30px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:0 24px 70px rgba(15,23,42,.14) !important;
  overflow:hidden !important;
}

.ps-logo-spazio-civico-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

#ps-logo-spazio-civico-hero ~ .ps-eco-logo-card,
#ps-logo-spazio-civico-hero ~ .eco-logo-card,
#ps-logo-spazio-civico-hero ~ .logo-card,
#ps-logo-spazio-civico-hero + .ps-eco-logo-card,
#ps-logo-spazio-civico-hero + .eco-logo-card,
#ps-logo-spazio-civico-hero + .logo-card{
  display:none !important;
}

@media(max-width:780px){
  .ps-logo-spazio-civico-card{
    width:100% !important;
    border-radius:24px !important;
    margin-top:22px !important;
  }
}



/* ==================================================
   PS_LOGO_SOLO_4_PAGINE_V1
   Logo originale solo sulle 4 pagine lanciate dalla home.
   ================================================== */

.ps-logo-spazio-civico-card{
  width:min(100%, 700px) !important;
  margin:0 auto 22px auto !important;
  padding:0 !important;
  border-radius:32px !important;
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:0 28px 76px rgba(15,23,42,.15) !important;
  overflow:hidden !important;
}

.ps-logo-spazio-civico-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

/* quando il nuovo logo è presente, nasconde il vecchio logo/card subito dopo */
#ps-logo-spazio-civico-hero ~ .ps-eco-logo-card,
#ps-logo-spazio-civico-hero ~ .eco-logo-card,
#ps-logo-spazio-civico-hero ~ .logo-card,
#ps-logo-spazio-civico-hero ~ .ps-seg-hero-logo,
#ps-logo-spazio-civico-hero + .ps-eco-logo-card,
#ps-logo-spazio-civico-hero + .eco-logo-card,
#ps-logo-spazio-civico-hero + .logo-card,
#ps-logo-spazio-civico-hero + .ps-seg-hero-logo{
  display:none !important;
}

@media(max-width:900px){
  .ps-logo-spazio-civico-card{
    width:100% !important;
    border-radius:26px !important;
    margin-top:20px !important;
  }
}

@media(max-width:520px){
  .ps-logo-spazio-civico-card{
    border-radius:22px !important;
    box-shadow:0 18px 48px rgba(15,23,42,.13) !important;
  }
}