/*
Theme Name:   The7 Child — Sentinelbytes
Theme URI:    https://www.sentinelbytes.it
Description:  Tema figlio di The7. Contiene il sistema di design del redesign 2026:
              impianto chiaro, schede bianche su fondo grigio chiarissimo, ombre
              leggere, angoli morbidi e molta aria. L'arancione del marchio resta
              l'unico accento, usato con parsimonia.
Author:       Sentinelbytes
Template:     dt-the7
Version:      2.0.0
Text Domain:  the7-child-sentinelbytes
*/

/* ===================================================================
   1. TOKEN — l'unico punto in cui si cambiano colori e misure.
   =================================================================== */
:root{
  /* superfici — il fondo non è bianco puro: un grigio chiarissimo
     fa staccare le schede bianche senza bisogno di bordi pesanti */
  --sb-bg:         #F4F6F7;
  --sb-card:       #FFFFFF;
  --sb-card-alt:   #FAFBFB;
  --sb-deep:       #16202A;   /* l'unico blocco scuro della pagina */

  /* testo — neutri con una punta di freddo, scelti non ereditati */
  --sb-ink:        #1A2228;
  --sb-mut:        #5B686E;
  --sb-mut-soft:   #7C888D;

  /* marchio — i colori sono presi dal logo vero, che non è arancione
     piatto ma un gradiente da oro a rosso scuro */
  --sb-acc:        #C05A0C;   /* arancione leggibile su chiaro: testi e pulsanti */
  --sb-acc-warm:   #E2690F;   /* più vivo: icone, bordi, dettagli */
  --sb-acc-soft:   #FDF1E7;   /* velo arancione per le evidenziazioni */
  --sb-gold:       #F7B321;   /* estremo chiaro del gradiente del marchio */
  --sb-rust:       #A32A0C;   /* estremo scuro del gradiente del marchio */
  --sb-grad:       linear-gradient(135deg, var(--sb-gold) 0%, var(--sb-acc-warm) 45%, var(--sb-rust) 100%);

  /* stati */
  --sb-ok:         #2F7D4F;
  --sb-warn:       #9A6B12;
  --sb-crit:       #B03A28;

  /* linee e profondità */
  --sb-line:       #E3E8EA;
  --sb-line-soft:  #EEF2F3;
  --sb-shadow:     0 1px 2px rgba(22,34,42,.04), 0 6px 18px rgba(22,34,42,.05);
  --sb-shadow-lift:0 2px 4px rgba(22,34,42,.05), 0 14px 34px rgba(22,34,42,.09);

  /* tipografia */
  --sb-font:       "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sb-mono:       Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;

  /* ritmo verticale — generoso, come nei riferimenti */
  --sb-s1: 8px;  --sb-s2: 18px; --sb-s3: 30px;
  --sb-s4: 52px; --sb-s5: 92px;

  --sb-radius:     10px;
  --sb-radius-sm:  8px;
}

/* ===================================================================
   2. BLOCCHI
   =================================================================== */
.sb-page{
  background: var(--sb-bg);
  color: var(--sb-ink);
  font-family: var(--sb-font);
}
.sb-num{ font-family: var(--sb-mono); font-variant-numeric: tabular-nums; }

/* occhiello */
.sb-eyebrow{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sb-acc);
  display: block;
  margin-bottom: var(--sb-s2);
}

/* titoli */
.sb-h1{
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.028em;
  font-weight: 700;
  text-wrap: balance;
  max-width: 16ch;
  margin: 0 0 var(--sb-s2);
}
.sb-h2{
  font-size: clamp(23px, 2.8vw, 32px);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
.sb-lede{
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--sb-mut);
  max-width: 54ch;
  margin: 0 0 var(--sb-s3);
}

/* intestazione di sezione, centrata come nei riferimenti */
.sb-sect-head{ margin-bottom: var(--sb-s4); max-width: 62ch; }
.sb-sect-head .sb-h2{ margin-bottom: 12px; }
.sb-sect-head p{ font-size: 16px; color: var(--sb-mut); margin: 0; line-height: 1.6; }

/* pulsanti — pieni e arrotondati */
.sb-btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--sb-radius-sm);
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .16s, box-shadow .16s, border-color .16s;
}
.sb-btn-primary{
  background: var(--sb-acc);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(192,90,12,.24);
}
.sb-btn-primary:hover{ background: #A94D08; color: #FFFFFF; }
.sb-btn-ghost{
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  color: var(--sb-ink);
  box-shadow: var(--sb-shadow);
}
.sb-btn-ghost:hover{ border-color: var(--sb-mut-soft); color: var(--sb-ink); }
.sb-btn:focus-visible{ outline: 2px solid var(--sb-acc); outline-offset: 3px; }

/* scheda base — il mattone di tutta la pagina */
.sb-card{
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  padding: 28px 26px;
  transition: box-shadow .18s, transform .18s;
}
.sb-card h3{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.012em;
  margin: 0 0 9px;
  color: var(--sb-ink);
}
.sb-card p{ font-size: 15px; line-height: 1.6; color: var(--sb-mut); margin: 0; }

/* icona in cerchio chiaro */
.sb-icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--sb-acc-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sb-s2);
}
.sb-icon svg{ width: 22px; height: 22px; stroke: var(--sb-acc-warm); fill: none; stroke-width: 1.7; }

/* le tre colonne dell'apertura */
.sb-pillars{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sb-pillars li{
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  padding: 20px 22px;
}
.sb-pillars .k{
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sb-acc); display: block; margin-bottom: 8px;
}
.sb-pillars .h{
  font-size: 16px; font-weight: 700; display: block; margin-bottom: 6px;
  letter-spacing: -.012em; color: var(--sb-ink);
}
.sb-pillars .d{ font-size: 14.5px; line-height: 1.55; color: var(--sb-mut); display: block; }
.sb-pillars .d b{ color: var(--sb-ink); font-weight: 600; }

/* fascia dei numeri */
.sb-band{ background: var(--sb-card); border-top: 1px solid var(--sb-line); border-bottom: 1px solid var(--sb-line); }
.sb-band ul{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.sb-band li{ padding: 34px 26px; border-right: 1px solid var(--sb-line-soft); text-align: center; }
.sb-band li:last-child{ border-right: 0; }
.sb-band .n{
  font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  display: block; line-height: 1.1; color: var(--sb-ink);
}
.sb-band .l{ font-size: 13.5px; color: var(--sb-mut); margin-top: 7px; display: block; }

/* scala dei livelli */
.sb-ladder{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sb-ladder li{
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  padding: 20px 22px;
}
.sb-ladder li.is-rec{ border-color: var(--sb-acc-warm); box-shadow: var(--sb-shadow-lift); }
.sb-ladder .lv{ display: flex; align-items: center; gap: 11px; margin-bottom: 8px; flex-wrap: wrap; }
.sb-ladder .nm{ font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--sb-ink); }
.sb-ladder .ad{ font-size: 14.5px; color: var(--sb-mut); display: block; margin-bottom: 8px; }
.sb-ladder .ad em{ font-style: normal; color: var(--sb-acc); font-weight: 600; }
.sb-ladder .who{
  font-size: 13.5px; color: var(--sb-mut-soft); display: block;
  padding-top: 10px; border-top: 1px solid var(--sb-line-soft); line-height: 1.5;
}
.sb-tag-rec{
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #FFFFFF; background: var(--sb-grad);
  padding: 4px 11px; border-radius: 20px;
}

/* le tre colonne, quando stanno in fascia sotto l'apertura */
.sb-pillar-card .k{
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sb-acc); display: block; margin-bottom: 10px;
}
.sb-pillar-card .n{
  font-family: var(--sb-mono);
  font-size: 30px; font-weight: 700; color: var(--sb-line);
  line-height: 1; display: block; margin-bottom: 14px;
}

/* Monolith — l'unico blocco scuro, così diventa il punto focale */
.sb-mono{
  background: var(--sb-deep);
  border-radius: var(--sb-radius);
  padding: 38px 36px;
  box-shadow: var(--sb-shadow-lift);
}
.sb-mono-inner{ display: grid; grid-template-columns: 1fr auto; gap: var(--sb-s3); align-items: center; }
.sb-mono h3{ font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; color: #FFFFFF; }
.sb-mono p{ font-size: 15.5px; line-height: 1.62; margin: 0; max-width: 62ch; color: #A9B6BD; }
.sb-mono p b{ color: #FFFFFF; font-weight: 600; }
.sb-mono .sb-btn-primary{ background: var(--sb-acc-warm); box-shadow: none; }
.sb-mono .sb-btn-primary:hover{ background: #F0741A; }

/* griglia di schede */
.sb-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sb-grid .sb-card:hover{ box-shadow: var(--sb-shadow-lift); transform: translateY(-2px); }
.sb-grid .tag{
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sb-acc); display: block; margin-bottom: 10px;
}

/* nota a margine */
.sb-note{
  font-size: 14.5px; color: var(--sb-mut); line-height: 1.6;
  margin: var(--sb-s3) 0 0; padding: 16px 20px;
  background: var(--sb-card-alt);
  border: 1px solid var(--sb-line-soft);
  border-radius: var(--sb-radius-sm);
}
.sb-intro{ font-size: 16px; line-height: 1.6; color: var(--sb-mut); max-width: 64ch; margin: 0 0 var(--sb-s3); }
.sb-intro b{ color: var(--sb-ink); font-weight: 600; }

/* chiusura contatti */
.sb-contact{
  background: var(--sb-card);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
  padding: 34px 32px;
  display: flex; gap: var(--sb-s3); flex-wrap: wrap; align-items: center;
}
.sb-contact .who{ font-size: 16px; font-weight: 600; color: var(--sb-ink); }
.sb-contact .how{ font-size: 15px; color: var(--sb-mut); margin-left: auto; line-height: 1.7; }
.sb-contact a{ color: var(--sb-acc); font-weight: 600; text-decoration: none; }
.sb-contact a:hover{ text-decoration: underline; }

/* ===================================================================
   2b. IMPAGINAZIONE
   =================================================================== */
.sb-wrap{ max-width: 1140px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }
.sb-sect{ padding: var(--sb-s5) 0; }
.sb-sect-tight{ padding: var(--sb-s4) 0; }

.sb-hero{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
  padding: var(--sb-s5) 0;
}

/* il marchio come elemento grafico dell'apertura.
   È l'anello del logo ritagliato dalla scritta, che sta già
   nell'intestazione: ripeterla qui sarebbe una ridondanza. */
.sb-hero-visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.sb-hero-visual img{
  position: relative;
  width: min(78%, 380px);
  height: auto;
  display: block;
}
/* alone morbido: senza, l'anello sembra incollato sul fondo */
.sb-hero-visual::before{
  content: "";
  position: absolute;
  inset: 4% 4% 4% 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
              rgba(247,179,33,.20) 0%,
              rgba(226,105,15,.10) 42%,
              rgba(226,105,15,0) 70%);
}

/* filetto col gradiente del marchio, per i blocchi da segnalare */
.sb-topline{ position: relative; overflow: hidden; }
.sb-topline::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--sb-grad);
}
.sb-btns{ display: flex; gap: 12px; flex-wrap: wrap; }
.sb-lines{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sb-s3); }
.sb-line-head{
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sb-mut-soft); margin: 0 0 14px;
}

/* ===================================================================
   2c. SCAVALCAMENTI DI THE7 — solo sulle pagine col template 2026.
       Tutto agganciato a .sb-page-2026: le pagine attuali non si toccano.
   =================================================================== */
body.sb-page-2026,
body.sb-page-2026 #main,
body.sb-page-2026 .main-gradient,
body.sb-page-2026 .wf-container-main{ background: var(--sb-bg) !important; }

body.sb-page-2026 .page-title,
body.sb-page-2026 .page-title-breadcrumbs{ display: none !important; }

body.sb-page-2026 #main{ padding: 0 !important; }
body.sb-page-2026 #main > .wf-wrap,
body.sb-page-2026 .wf-container-main{
  max-width: none !important; width: 100% !important;
  padding: 0 !important; margin: 0 !important; float: none !important;
}
body.sb-page-2026 .sidebar,
body.sb-page-2026 .sidebar-content{ display: none !important; }

/* The7 impone colori propri a h1–h3 e ai link: qui li riprendiamo,
   solo dentro le nostre sezioni */
body.sb-page-2026 .sb-h1,
body.sb-page-2026 .sb-h2,
body.sb-page-2026 .sb-card h3,
body.sb-page-2026 .sb-ladder .nm,
body.sb-page-2026 .sb-pillars .h,
body.sb-page-2026 .sb-band .n,
body.sb-page-2026 .sb-contact .who{ color: var(--sb-ink) !important; }

body.sb-page-2026 .sb-mono h3{ color: #FFFFFF !important; }
body.sb-page-2026 .sb-mono p{ color: #A9B6BD !important; }
body.sb-page-2026 .sb-mono p b{ color: #FFFFFF !important; }

body.sb-page-2026 .sb-eyebrow,
body.sb-page-2026 .sb-pillars .k,
body.sb-page-2026 .sb-grid .tag,
body.sb-page-2026 .sb-ladder .ad em,
body.sb-page-2026 .sb-contact a,
body.sb-page-2026 .sb-tag-rec{ color: var(--sb-acc) !important; }

body.sb-page-2026 .sb-lede,
body.sb-page-2026 .sb-intro,
body.sb-page-2026 .sb-note,
body.sb-page-2026 .sb-card p,
body.sb-page-2026 .sb-sect-head p,
body.sb-page-2026 .sb-pillars .d,
body.sb-page-2026 .sb-ladder .ad,
body.sb-page-2026 .sb-band .l,
body.sb-page-2026 .sb-contact .how{ color: var(--sb-mut) !important; }

body.sb-page-2026 .sb-ladder .who{ color: var(--sb-mut-soft) !important; }

body.sb-page-2026 .sb-lede strong,
body.sb-page-2026 .sb-intro b,
body.sb-page-2026 .sb-pillars .d b{ color: var(--sb-ink) !important; }

body.sb-page-2026 .sb-btn-primary,
body.sb-page-2026 .sb-btn-primary:hover{ color: #FFFFFF !important; }
body.sb-page-2026 .sb-btn-ghost{ color: var(--sb-ink) !important; }

/* fasce a tutta larghezza */
body.sb-page-2026 .sb-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ===================================================================
   3. SCHERMI PICCOLI
   =================================================================== */
@media (max-width: 980px){
  .sb-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px){
  .sb-hero{ grid-template-columns: 1fr; gap: var(--sb-s3); padding: var(--sb-s4) 0; }
  .sb-hero-visual{ min-height: 0; order: -1; margin-bottom: var(--sb-s2); }
  .sb-hero-visual img{ width: min(52%, 200px); }
  .sb-lines{ grid-template-columns: 1fr; }
  .sb-grid{ grid-template-columns: 1fr; }
  .sb-band ul{ grid-template-columns: repeat(2, 1fr); }
  .sb-band li{ padding: 26px 18px; }
  .sb-band li:nth-child(2){ border-right: 0; }
  .sb-band li:nth-child(1),
  .sb-band li:nth-child(2){ border-bottom: 1px solid var(--sb-line-soft); }
  .sb-mono-inner{ grid-template-columns: 1fr; }
  .sb-mono{ padding: 28px 24px; }
  .sb-sect{ padding: var(--sb-s4) 0; }
  .sb-contact .how{ margin-left: 0; }
}

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