/*
 * SSG Gorduno – Stile principale
 * Famiglia, neve, divertimento – caldo e umano, non da agenzia!
 */

/* ── Variabili ────────────────────────────────────────────────────────────── */
:root {
  --ssg-navy:   #1e3a5f;
  --ssg-red:    #d63031;
  --ssg-gold:   #e17055;   /* arancione caldo invece del giallo freddo */
  --ssg-warm:   #fdcb6e;   /* giallo sole per accenti */
  --ssg-snow:   #f8f9fa;
  --font-main:  'Nunito', 'Nunito Sans', system-ui, sans-serif;
  --radius-sm:  .6rem;
  --radius-md:  1rem;
  --radius-lg:  1.5rem;
}

/* ── Font di base ─────────────────────────────────────────────────────────── */
body { font-family: var(--font-main); }
.font-nunito  { font-family: var(--font-main); }
.font-inter   { font-family: var(--font-main); } /* fallback alias */

/* ── Colori custom (usati via classe nei template) ────────────────────────── */
.bg-ssg-navy      { background-color: var(--ssg-navy); }
.bg-ssg-red       { background-color: var(--ssg-red); }
.bg-ssg-gold      { background-color: var(--ssg-gold); }
.bg-ssg-warm      { background-color: var(--ssg-warm); }
.text-ssg-navy    { color: var(--ssg-navy); }
.text-ssg-red     { color: var(--ssg-red); }
.text-ssg-gold    { color: var(--ssg-gold); }
.text-ssg-warm    { color: var(--ssg-warm); }
.border-ssg-navy  { border-color: var(--ssg-navy); }
.border-ssg-red   { border-color: var(--ssg-red); }

/* ── Spaziatura sezioni ───────────────────────────────────────────────────── */
.section-padding  { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* ── Troncatura testo ─────────────────────────────────────────────────────── */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Animazioni ───────────────────────────────────────────────────────────── */
.animate-spin-slow { animation: spin 5s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   INTESTAZIONI – titoli in grassetto corsivo per una sensazione più calda
═══════════════════════════════════════════════════════════════════════════ */
.section-header   { text-align: center; }
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--ssg-navy);
  margin-bottom: .4rem;
  line-height: 1.1;
}
.section-subtitle { color: #6b7280; font-size: 1.05rem; font-weight: 500; }

/* Decorazione a trattino sotto i titoli di sezione */
.section-title::after {
  content: '';
  display: block;
  width: 3rem;
  height: 4px;
  background: var(--ssg-red);
  border-radius: 2px;
  margin: .6rem auto 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD – meno "corporate", più calde
═══════════════════════════════════════════════════════════════════════════ */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(30,58,95,.08), 0 0 0 1px rgba(30,58,95,.04);
  transition: box-shadow .2s, transform .15s;
}
.card:hover {
  box-shadow: 0 6px 20px rgba(30,58,95,.14);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTONI – arrotondati e amichevoli
═══════════════════════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ssg-red);
  color: #fff;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: .9rem;
  padding: .6rem 1.4rem;
  border-radius: 2rem;        /* pill shape – amichevole */
  transition: background-color .2s, transform .1s, box-shadow .2s;
  cursor: pointer;
  border: none;
  text-decoration: none;
  letter-spacing: .01em;
  box-shadow: 0 2px 8px rgba(214,48,49,.25);
}
.btn-primary:hover  { background-color: #c0392b; box-shadow: 0 4px 14px rgba(214,48,49,.35); }
.btn-primary:active { transform: scale(.97); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ssg-navy);
  color: var(--ssg-navy);
  font-family: var(--font-main);
  font-weight: 800;
  font-size: .9rem;
  padding: .55rem 1.35rem;
  border-radius: 2rem;
  transition: background-color .2s, color .2s;
  text-decoration: none;
  background: transparent;
}
.btn-outline:hover { background-color: var(--ssg-navy); color: #fff; }

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.6);
  color: #fff;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: .9rem;
  padding: .6rem 1.4rem;
  border-radius: 2rem;
  transition: background-color .2s, border-color .2s;
  text-decoration: none;
}
.btn-outline-white:hover { background-color: rgba(255,255,255,.15); border-color: #fff; }

.btn-sm-primary {
  display: inline-flex;
  align-items: center;
  background-color: var(--ssg-red);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  padding: .3rem .85rem;
  border-radius: 2rem;
  transition: background-color .15s;
  text-decoration: none;
}
.btn-sm-primary:hover { background-color: #c0392b; }

/* ── Icon button (admin) ──────────────────────────────────────────────────── */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  color: #6b7280;
  transition: background-color .15s, color .15s;
  cursor: pointer;
  background: transparent;
  border: none;
}
.icon-btn:hover { background-color: #f3f4f6; color: var(--ssg-navy); }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM – più caldi e leggibili
═══════════════════════════════════════════════════════════════════════════ */
.form-label {
  display: block;
  font-size: .83rem;
  font-weight: 700;
  color: #374151;
  margin-bottom: .3rem;
}
.form-input {
  display: block;
  width: 100%;
  padding: .55rem .85rem;
  border: 2px solid #e5e7eb;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: var(--font-main);
  color: #111827;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.form-input:focus { border-color: var(--ssg-navy); box-shadow: 0 0 0 3px rgba(30,58,95,.12); }
.form-input:hover:not(:focus) { border-color: #d1d5db; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROSE (dettaglio articoli/news)
═══════════════════════════════════════════════════════════════════════════ */
.prose { max-width: none; color: #374151; font-family: var(--font-main); }
.prose h2 { color: var(--ssg-navy); font-weight: 900; }
.prose h3 { color: var(--ssg-navy); font-weight: 800; }
.prose a  { color: var(--ssg-red); }
.prose strong { color: var(--ssg-navy); }
.prose table td, .prose table th { padding: .5rem .75rem; border: 1px solid #e5e7eb; }
.prose table thead tr { background: #f3f4f6; }

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÀ – skip link
═══════════════════════════════════════════════════════════════════════════ */
.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;
}
.sr-only:focus, .focus\:not-sr-only:focus {
  width: auto; height: auto; padding: .5rem 1rem;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN – sidebar e layout
═══════════════════════════════════════════════════════════════════════════ */
[x-cloak] { display: none !important; }

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
  header, footer, nav, aside, .no-print { display: none !important; }
  body { font-size: 12pt; color: #000; }
}