/* ============================================================
   soci-ui.css — Design system unificato di soci.ccir.it
   Ispirato a ccir.it. Nessun Tailwind. Un solo linguaggio visivo.
   Le variabili colore arrivano da /theme.css + ccir.css (:root).
   ============================================================ */

/* ---- Reset leggero ---- */
*, *::before, *::after { box-sizing: border-box; }
.su-scope { }

/* ---- Token locali (fallback se le var globali mancano) ---- */
:root {
  --su-green:      var(--ccir-green, #9FAC3F);
  --su-green-light: var(--ccir-green-light, #B8C455);
  --su-green-text: var(--ccir-green-text, #4A6B22);
  --su-green-dark: var(--ccir-green-dark, #1F2E1C);
  --su-gold:       var(--ccir-gold, #C4A052);
  --su-gold-text:  var(--ccir-gold-text, #8A6D2A);
  --su-ink:        #1F2E1C;
  --su-ink-mid:    #4A5043;
  --su-ink-soft:   #676C66;
  --su-bg:         #FFFFFF;
  --su-bg-alt:     #FAFAF7;
  --su-border:     #E8E6DD;
  --su-border-soft:#F0EFE8;
  --su-radius:     10px;
  --su-radius-sm:  6px;
  --su-radius-lg:  16px;
  --su-shadow:     0 4px 16px rgba(31,46,28,.06);
  --su-shadow-md:  0 8px 32px rgba(31,46,28,.10);
  --su-shadow-lg:  0 20px 60px rgba(31,46,28,.15);
  --su-transition: .18s ease;
  --su-font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --su-serif:      'Playfair Display', Georgia, serif;
}

/* ============================================================
   BASE
   ============================================================ */
body.su-page {
  margin: 0;
  font-family: var(--su-font);
  color: var(--su-ink);
  background: var(--su-bg-alt);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.su-page h1, .su-page h2, .su-page h3 { font-family: var(--su-serif); color: var(--su-green-dark); line-height: 1.2; margin: 0 0 .5em; }
/* I link NON hanno un colore globale forzato: ogni componente (btn, nav, tile,
   footer) definisce il proprio. Solo i link dentro testo/contenuto (.su-prose,
   .su-content) ricevono il verde leggibile. Cosi non serve piu escludere classi. */
.su-page a { text-decoration: none; }
.su-prose a, .su-content a { color: var(--su-green-text); transition: color var(--su-transition); }
.su-prose a:hover, .su-content a:hover { color: var(--su-green-dark); }

/* ============================================================
   HEADER pubblico condiviso
   ============================================================ */
.su-header {
  background: var(--su-bg);
  border-bottom: 1px solid var(--su-border);
  position: sticky; top: 0; z-index: 100;
}
.su-header-inner {
  max-width: 1160px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.su-logo img { height: 40px; width: auto; display: block; }
.su-header-right { display: flex; align-items: center; gap: 20px; }

/* Language switch UNICO (sostituisce lang-switch / lang-toggle / niente) */
.su-lang { display: inline-flex; gap: 2px; background: var(--su-bg-alt); border: 1px solid var(--su-border); border-radius: 999px; padding: 3px; }
.su-lang a { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--su-ink-soft); line-height: 1; }
.su-lang a:hover { color: var(--su-green-text); }
.su-lang a.active { background: var(--su-green); color: #fff; }

.su-nav { display: flex; align-items: center; gap: 22px; }
.su-nav a { font-size: 14px; font-weight: 500; color: var(--su-ink-mid); }
.su-nav a:hover { color: var(--su-green-text); }

/* ============================================================
   LAYOUT
   ============================================================ */
.su-main { max-width: 1160px; margin: 0 auto; padding: 40px 24px 64px; }
.su-main-narrow { max-width: 560px; }
.su-main-mid { max-width: 820px; }

.su-page-head { margin-bottom: 32px; }
.su-page-head h1 { font-size: clamp(26px, 4vw, 38px); }
.su-page-head p { color: var(--su-ink-mid); font-size: 16px; margin: 0; }

/* Auth: sfondo scuro elegante, card centrata (come il login attuale, che piace) */
.su-auth {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--su-green-dark) 0%, #16211a 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative;
}
.su-auth .su-lang { position: absolute; top: 22px; right: 22px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.su-auth .su-lang a { color: rgba(255,255,255,.9); }
.su-auth .su-lang a.active { background: rgba(255,255,255,.9); color: var(--su-green-dark); }
.su-auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: var(--su-radius-lg); padding: 40px 36px; box-shadow: var(--su-shadow-lg); }
.su-auth-logo { text-align: center; margin-bottom: 24px; }
.su-auth-logo img { height: 46px; }
.su-auth-head { text-align: center; margin-bottom: 28px; }
.su-auth-head h1 { font-size: 26px; margin-bottom: 6px; }
.su-auth-head p { color: var(--su-ink-soft); font-size: 14px; margin: 0; }

/* ============================================================
   CARD
   ============================================================ */
.su-card {
  background: var(--su-bg); border: 1px solid var(--su-border);
  border-radius: var(--su-radius); padding: 24px;
  box-shadow: var(--su-shadow); transition: box-shadow var(--su-transition), border-color var(--su-transition);
}
.su-card:hover { box-shadow: var(--su-shadow-md); }
.su-card-link { display: block; color: inherit; }
.su-card-link:hover { border-color: var(--su-green); }
.su-card h3 { font-size: 18px; margin-bottom: 6px; }
.su-card-icon { font-size: 28px; margin-bottom: 12px; display: block; }
.su-card-meta { font-size: 13px; color: var(--su-ink-soft); }

.su-grid { display: grid; gap: 20px; }
.su-grid-2 { grid-template-columns: repeat(2, 1fr); }
.su-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   FORM
   ============================================================ */
.su-field { margin-bottom: 18px; }
.su-label { display: block; font-size: 13px; font-weight: 600; color: var(--su-ink-mid); margin-bottom: 6px; }
.su-input, .su-select, .su-textarea {
  width: 100%; padding: 11px 14px; font-size: 15px; font-family: inherit;
  color: var(--su-ink); background: #fff;
  border: 1px solid var(--su-border); border-radius: var(--su-radius-sm);
  transition: border-color var(--su-transition), box-shadow var(--su-transition);
}
.su-input:focus, .su-select:focus, .su-textarea:focus {
  outline: none; border-color: var(--su-green);
  box-shadow: 0 0 0 3px rgba(159,172,63,.15);
}
.su-textarea { min-height: 120px; resize: vertical; }
.su-form-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.su-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--su-ink-mid); cursor: pointer; }

/* ============================================================
   BUTTON — copiati concettualmente da ccir.it
   ============================================================ */
.su-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--su-radius-sm);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: all var(--su-transition);
  border: 2px solid transparent; line-height: 1; text-decoration: none; white-space: nowrap;
}
.su-btn-primary { background: var(--su-green); color: var(--su-green-dark); border-color: var(--su-green); }
.su-btn-primary:hover { background: var(--su-green-dark); color: #fff; border-color: var(--su-green-dark); }
.su-btn-gold { background: var(--su-gold); color: var(--su-green-dark); border-color: var(--su-gold); }
.su-btn-gold:hover { filter: brightness(.94); color: #fff; }
.su-btn-outline { background: transparent; color: var(--su-green-text); border-color: var(--su-border); }
.su-btn-outline:hover { border-color: var(--su-green); color: var(--su-green-dark); }
.su-btn-block { width: 100%; }
.su-btn-lg { padding: 14px 28px; font-size: 15px; }

/* ============================================================
   BADGE / ALERT
   ============================================================ */
.su-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.su-badge-green { background: var(--su-green); color: #fff; }
.su-badge-soft { background: #F0F2DC; color: var(--su-green-text); }
.su-badge-gold { background: #FBF3E0; color: var(--su-gold-text); }
.su-badge-gray { background: #F0F1F0; color: var(--su-ink-mid); }

.su-alert { padding: 12px 16px; border-radius: var(--su-radius-sm); font-size: 14px; margin-bottom: 18px; border: 1px solid transparent; }
.su-alert-error { background: #FEECEC; border-color: #F5C2C2; color: #A02020; }
.su-alert-success { background: #ECF7EC; border-color: #BEE3BE; color: #256B25; }
.su-alert-info { background: #EDF2FB; border-color: #C2D4F0; color: #24528A; }

/* ============================================================
   FOOTER
   ============================================================ */
.su-footer { background: var(--su-green-dark); color: rgba(255,255,255,.7); margin-top: 64px; }
.su-footer-inner { max-width: 1160px; margin: 0 auto; padding: 40px 24px; font-size: 13px; }
.su-footer a { color: #C4D89A; }
.su-footer a:hover { color: #fff; }

/* ============================================================
   UTILITY minime (per non riscrivere tutto con inline)
   ============================================================ */
.su-mt { margin-top: 16px; } .su-mt-lg { margin-top: 28px; }
.su-center { text-align: center; }
.su-muted { color: var(--su-ink-soft); }
.su-divider { height: 1px; background: var(--su-border); border: 0; margin: 24px 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .su-header-inner { padding: 12px 16px; }
  .su-nav { display: none; }
  .su-main { padding: 28px 16px 48px; }
  .su-grid-2, .su-grid-3 { grid-template-columns: 1fr; }
  .su-auth-card { padding: 32px 24px; }
  .su-form-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 480px) {
  .su-logo img { height: 34px; }
  .su-auth-card { padding: 28px 20px; }
}

/* ============================================================
   ccx-* : componenti che replicano ccir.it (header bianco + hero scuro)
   Valori presi dal main.css reale di ccir.it.
   ============================================================ */
.ccx-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header bianco sobrio, come ccir.it */
.ccx-header { background: #fff; border-bottom: 1px solid var(--su-border); position: sticky; top: 0; z-index: 100; }
.ccx-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 24px; }
.ccx-logo img { height: 38px; width: auto; display: block; }
.ccx-header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.ccx-nav { display: flex; align-items: center; gap: 2px; }
.ccx-nav-link { padding: 8px 14px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--su-ink-mid); text-decoration: none; transition: all .18s; }
.ccx-nav-link:hover { color: var(--su-green-dark); background: var(--ccir-green-pale, #F0F2DC); }
.ccx-lang { display: inline-flex; gap: 2px; }
.ccx-lang a { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--su-ink-soft); text-decoration: none; transition: all .18s; }
.ccx-lang a:hover { color: var(--su-green-dark); }
.ccx-lang a.on { background: var(--su-green-dark); color: #fff; }

/* Hero scuro antracite, come ccir.it (gray-900 -> gray-700) */
.ccx-hero { background: linear-gradient(135deg, #1C1F1C 0%, #2A2D2A 50%, #404340 100%); color: #fff; padding: 72px 0 80px; }
.ccx-hero-badge { display: inline-block; background: rgba(159,172,63,.25); color: #D4E0A8; border: 1px solid rgba(159,172,63,.35);
    padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 20px; }
body.su-page .ccx-hero-title { font-family: var(--su-serif); font-size: clamp(30px, 5vw, 46px); line-height: 1.15; margin: 0 0 16px; color: #fff; }
.ccx-hero-title span { color: var(--ccir-green-light, #B8C455); }
.ccx-hero-lead { font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.7; max-width: 560px; margin: 0 0 32px; }

/* Griglia di accesso sotto l'hero, su fondo chiaro */
.ccx-access { background: var(--su-bg-alt); padding: 56px 0 72px; }
.ccx-access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 720px; margin: 0 auto; }
.ccx-tile { color: var(--su-ink); background: #fff; border: 1px solid var(--su-border); border-radius: var(--su-radius); padding: 28px 24px; text-decoration: none;
    display: block; transition: all .18s; box-shadow: var(--su-shadow); }
.ccx-tile:hover { border-color: var(--su-green); box-shadow: var(--su-shadow-md); transform: translateY(-2px); }
.ccx-tile-ico { font-size: 30px; display: block; margin-bottom: 14px; }
body.su-page .ccx-tile h3 { font-family: var(--su-serif); color: var(--su-green-dark); font-size: 19px; margin: 0 0 6px; }
.ccx-tile p { color: var(--su-ink-soft); font-size: 14px; margin: 0; line-height: 1.5; }

/* Bottoni come ccir.it */
.ccx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 6px; font-size: 15px; font-weight: 600;
    text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: all .18s; }
body.su-page .ccx-btn-primary { background: var(--su-green); color: var(--su-green-dark); border-color: var(--su-green); }
.ccx-btn-primary:hover { background: var(--su-green-dark); color: #fff; border-color: var(--su-green-dark); }
.ccx-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.ccx-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }

.ccx-foot { background: var(--su-green-dark); color: rgba(255,255,255,.7); text-align: center; padding: 28px 0; font-size: 13px; }
.ccx-foot a { color: rgba(255,255,255,.9); }

@media (max-width: 768px) {
  .ccx-nav { display: none; }
  .ccx-access-grid { grid-template-columns: 1fr; }
  .ccx-hero { padding: 48px 0 56px; }
}

/* Footer unico: link + info, stile ccir.it */
.ccx-foot-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.ccx-foot-links a { color: #C4D89A; text-decoration: none; }
.ccx-foot-links a:hover { color: #fff; }
.ccx-foot-links span { color: rgba(255,255,255,.4); }
.ccx-foot-info { text-align: center; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.65); }
.ccx-foot-info a { color: rgba(255,255,255,.85); }
.ccx-foot-fiscal { color: rgba(255,255,255,.45); }

/* ============================================================
   Mapping classi LEGACY -> stile nuovo (per form esistenti non riscritti)
   Cosi reg-*, job-*, richieste-* ereditano il look ccx senza riscrittura.
   ============================================================ */
/* Registrazione form */
.reg-page { background: var(--su-bg-alt); min-height: 70vh; padding: 40px 20px 64px; }
.reg-container, .reg-card { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--su-border);
    border-radius: var(--su-radius); box-shadow: var(--su-shadow); overflow: hidden; }
.reg-header { padding: 28px 32px; border-bottom: 1px solid var(--su-border); }
.reg-header h1 { font-family: var(--su-serif); color: var(--su-green-dark); font-size: 24px; margin: 0 0 6px; }
.reg-header p { color: var(--su-ink-mid); margin: 0; font-size: 15px; }
.reg-body { padding: 28px 32px; }
.reg-footer { padding: 20px 32px; border-top: 1px solid var(--su-border); text-align: center; color: var(--su-ink-soft); font-size: 14px; }
.reg-footer a { color: var(--su-green-text); font-weight: 600; }
.reg-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.reg-card.socio, .reg-card.amico { display: block; text-decoration: none; padding: 28px 24px; text-align: center; transition: all .18s; }
.reg-card.socio:hover, .reg-card.amico:hover { border-color: var(--su-green); transform: translateY(-2px); }
.reg-card-icon { font-size: 32px; margin-bottom: 12px; }
.reg-card h2 { font-family: var(--su-serif); color: var(--su-green-dark); font-size: 19px; margin: 0 0 6px; }
.reg-card p { color: var(--su-ink-soft); font-size: 14px; margin: 0 0 16px; }
.reg-card-btn { display: inline-block; background: var(--su-green); color: var(--su-green-dark); padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 14px; }

/* Form generici (label, group, radio) */
.form-group { margin-bottom: 18px; }
.form-label, .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--su-ink-mid); margin-bottom: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-section-title { font-family: var(--su-serif); color: var(--su-green-dark); font-size: 17px; margin: 24px 0 12px; }
.radio-card, .radio-option { border: 1px solid var(--su-border); border-radius: 8px; padding: 14px; cursor: pointer; transition: all .18s; }
.radio-card:hover { border-color: var(--su-green); }

/* Job board legacy */
.job-header { background: #fff; border-bottom: 1px solid var(--su-border); padding: 16px 0; }
.job-main { max-width: 1000px; margin: 0 auto; padding: 40px 24px; }
.job-card { background: #fff; border: 1px solid var(--su-border); border-radius: var(--su-radius); padding: 24px; margin-bottom: 16px; box-shadow: var(--su-shadow); transition: all .18s; }
.job-card:hover { border-color: var(--su-green); box-shadow: var(--su-shadow-md); }
.job-title { font-family: var(--su-serif); color: var(--su-green-dark); font-size: 20px; margin: 0 0 8px; }
.job-company { color: var(--su-ink-mid); font-size: 14px; }
.job-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Badge legacy */
.badge, .badge-gray { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #F0F1F0; color: var(--su-ink-mid); }
.badge-green { background: var(--su-green); color: var(--su-green-dark); }

/* Fix contrasto: TUTTI i link nel footer scuro devono essere chiari */
.ccx-foot a, .ccx-foot-links a, .ccx-foot-info a { color: #C4D89A !important; }
.ccx-foot a:hover, .ccx-foot-links a:hover, .ccx-foot-info a:hover { color: #fff !important; }

/* Fix badge verdi: testo scuro su verde chiaro (contrasto 5.76) */
.badge-green, .tag-green, span.badge[style*='9FAC3F'], .off-cat { color: var(--su-green-dark) !important; }
.job-title, .job-title a, .off-card h3, .off-title { color: var(--su-green-dark) !important; }

/* Fix contrasto legacy header/footer/badge */
.legal-footer a, .footer-legal a, footer.legal a, .site-footer a { color: #C4D89A !important; }
.job-header a, .job-header span, .job-header .job-title { color: var(--su-green-dark) !important; }
.legal-header a, .legal-header span { color: #C4D89A !important; }
.header-btn, .header-cta, a.btn-primary.btn-sm { color: var(--su-green-dark) !important; }
.badge, .job-badge, .tag { color: var(--su-green-dark); }

/* Fix cookie banner link (sfondo scuro) */
#cookie-banner a, .cookie-banner a, .cookie-banner-actions a { color: #C4D89A !important; }
#cookie-banner a:hover, .cookie-banner a:hover { color: #fff !important; }

/* Fix nomi verdi card offerte/job (verde chiaro su bianco -> scuro) */
.off-card .off-company, .off-company, .off-card strong, .card-company { color: var(--su-green-dark) !important; }
.off-card *[style*='9FAC3F'], .job-card *[style*='9FAC3F'] { color: var(--su-green-dark) !important; }

/* Fix legal-footer legacy testo (sfondo scuro) */
.legal-footer, .legal-footer * { color: rgba(255,255,255,.75) !important; }
.legal-footer a { color: #C4D89A !important; }
.legal-footer-copyright { color: rgba(255,255,255,.55) !important; }

/* Fix reg-header contrasto */
.reg-header, .reg-header p, .reg-header h1, .reg-header .subtitle { color: var(--su-green-dark) !important; }
.reg-body a, .reg-footer a, .form-group a, label a { color: var(--su-green-text) !important; }
.radio-desc, .form-hint, .field-hint { color: #565B54 !important; }

/* Fix finale contrasti residui */
.legal-footer-contacts a, .legal-footer-contacts span, .legal-footer-info a { color: #C4D89A !important; }
.btn-submit { color: var(--su-green-dark) !important; }
.btn-submit:hover { background: var(--su-green-dark) !important; color: #fff !important; }

/* Fix 4.39 - testo su sfondo grigio chiaro */
.radio-card p, .radio-option p, .radio-card .desc, .plan-desc, .categoria-desc { color: #4A5043 !important; }