/* ============================================================
   RaeeScuola.it — stile custom sopra Bootstrap 5.3
   Palette: verde "circuito" + rame + oro su fondo chiaro freddo
   Display: Space Grotesk · Testo: Public Sans · Dati: JetBrains Mono
   ============================================================ */

:root {
  --rs-bg:      #F4F7F3;
  --rs-ink:     #14211B;
  --rs-green:   #1A5C43;
  --rs-green-d: #0F3D2C;
  --rs-copper:  #C2602E;
  --rs-gold:    #C9A227;
  --rs-line:    #D8E0D8;
  --rs-card:    #FFFFFF;
  /* Colori raggruppamenti: codifica visiva usata in tutto il sito */
  --r1: #2D7DD2;  /* freddo e clima */
  --r2: #5C6B73;  /* grandi bianchi */
  --r3: #7B5EA7;  /* tv e monitor */
  --r4: #2E8B57;  /* piccoli elettrodomestici */
  --r5: #D9A404;  /* sorgenti luminose */
}

body {
  background: var(--rs-bg);
  color: var(--rs-ink);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.7;
}

h1, h2, h3, h4, .navbar-brand, .display-num {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.01em;
  color: var(--rs-green-d);
}

.mono, .table-data td.num, .stat-value {
  font-family: "JetBrains Mono", monospace;
}

a { color: var(--rs-green); }
a:hover { color: var(--rs-copper); }

/* ---------- Navbar ---------- */
.navbar-rs {
  background: var(--rs-green-d);
  border-bottom: 3px solid var(--rs-copper);
}
.navbar-rs .navbar-brand { color: #fff; font-weight: 700; }
.navbar-rs .navbar-brand .dot { color: var(--rs-gold); }
.navbar-rs .nav-link { color: #D7E4DC; font-weight: 500; }
.navbar-rs .nav-link:hover, .navbar-rs .nav-link.active { color: #fff; }
.navbar-rs .dropdown-menu { border: 1px solid var(--rs-line); border-radius: .6rem; }
.navbar-rs .dropdown-item.active { background: var(--rs-green); }

/* ---------- Hero con tracce di circuito ---------- */
.hero {
  background: var(--rs-green-d);
  color: #EAF3ED;
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 4rem;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); }
.hero .lead { color: #BCD3C5; max-width: 46rem; }
.hero .circuit {
  position: absolute; inset: 0; opacity: .18; pointer-events: none;
}
.hero-page { padding: 3rem 0 2.5rem; }
.hero .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--rs-gold);
}

.btn-rs {
  background: var(--rs-copper); border: none; color: #fff; font-weight: 600;
}
.btn-rs:hover { background: #A84E22; color: #fff; }
.btn-rs-outline {
  border: 1.5px solid #ffffff66; color: #fff;
}
.btn-rs-outline:hover { background: #ffffff14; color: #fff; }

/* ---------- Badge raggruppamenti ---------- */
.badge-r {
  display: inline-block; min-width: 2.6rem; text-align: center;
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: .85rem;
  color: #fff; border-radius: .35rem; padding: .15rem .45rem;
}
.badge-r.r1 { background: var(--r1); }
.badge-r.r2 { background: var(--r2); }
.badge-r.r3 { background: var(--r3); }
.badge-r.r4 { background: var(--r4); }
.badge-r.r5 { background: var(--r5); color: #2c2406; }

/* ---------- Card e sezioni ---------- */
.card-rs {
  background: var(--rs-card);
  border: 1px solid var(--rs-line);
  border-radius: .8rem;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-rs:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.4rem rgba(20,33,27,.08); }
.card-rs .card-title { font-family: "Space Grotesk", sans-serif; }
.card-rs a.stretched-link { text-decoration: none; }

.section-title {
  border-left: 5px solid var(--rs-copper);
  padding-left: .8rem;
  margin: 2.5rem 0 1.2rem;
}

article.guide { max-width: 1260px; }
article.guide h2 { margin-top: 2.4rem; }
article.guide h3 { margin-top: 1.8rem; font-size: 1.25rem; }

/* ---------- Tabelle dati ---------- */
.table-data thead { background: var(--rs-green-d); color: #fff; }
.table-data thead th { font-family: "Space Grotesk", sans-serif; font-weight: 600; }
.table-data td.num { text-align: right; white-space: nowrap; }
.table-data tbody tr:hover { background: #ECF2EC; }

/* ---------- Statistiche ---------- */
.stat-box {
  background: var(--rs-card); border: 1px solid var(--rs-line);
  border-top: 4px solid var(--rs-gold);
  border-radius: .7rem; padding: 1.2rem 1.4rem; height: 100%;
}
.stat-value { font-size: 1.9rem; font-weight: 700; color: var(--rs-green-d); }
.stat-label { font-size: .9rem; color: #5A6B61; }

/* ---------- Box informativi ---------- */
.box-note {
  background: #FFF8E6; border: 1px solid #EAD9A0; border-radius: .6rem;
  padding: 1rem 1.2rem;
}
.box-ok {
  background: #EAF5EE; border: 1px solid #BFDCC9; border-radius: .6rem;
  padding: 1rem 1.2rem;
}
.box-alert {
  background: #FBEFE8; border: 1px solid #E7C3AE; border-radius: .6rem;
  padding: 1rem 1.2rem;
}

/* ---------- Strumenti ---------- */
.tool-panel {
  background: var(--rs-card); border: 1px solid var(--rs-line);
  border-radius: .9rem; padding: 1.6rem;
}
.result-card {
  border-radius: .7rem; border: 1px solid var(--rs-line);
  background: #fff; padding: 1rem 1.2rem;
}
.result-card .big {
  font-family: "JetBrains Mono", monospace; font-size: 1.6rem;
  font-weight: 700; color: var(--rs-green);
}

/* ---------- Footer ---------- */
footer.footer-rs {
  background: var(--rs-green-d); color: #BCD3C5; margin-top: 4rem;
  border-top: 3px solid var(--rs-copper);
}
footer.footer-rs a { color: #E4EFE8; text-decoration: none; }
footer.footer-rs a:hover { color: var(--rs-gold); }
footer.footer-rs h6 { color: #fff; font-family: "Space Grotesk", sans-serif; }
.footer-bottom { border-top: 1px solid #ffffff22; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  .card-rs, .card-rs:hover { transition: none; transform: none; }
}