/*
 * style-zh.css — GCompass & Partners | Versione 中文
 * Caricato SOLO nelle pagine zh/ in aggiunta a ../style.css
 *
 * PALETTE: identica Accademia Tecnica Pratese (stesso progetto, stessa mano)
 * Filosofia: "Tipografia serif protagonista, sfondo avorio,
 *              numeri bordeaux grandi, niente card bianche."
 *
 * --ivory:        #F5EFE0  sfondo crema caldo
 * --ivory-darker: #EDE5D2  sezioni alternate
 * --text:         #2A2A28  testo quasi-nero caldo
 * --bordeaux:     #8C2D3C  accento principale (numeri, titoli chiave, eyebrow)
 * --bordeaux-dark:#6E222E  bordeaux scuro per hover e dettagli
 * --gold:         #B8962D  oro sottile (dettagli, separatori, badge logo)
 * --navy:         #0F2341  conservato solo per badge logo e sezioni scure
 *
 * Versione: 0.6 — 23 giugno 2026
 */

/* ── Font CJK ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/* ── Override variabili ──────────────────────────────────────────────────── */
:root {
  --gold:      #B8962D;   /* oro caldo — dettagli, separatori */
  --gold-soft: #F5EFE0;   /* crema avorio — testi su scuro */
  --gold-ink:  #8C2D3C;   /* bordeaux — testi accento su chiaro */
  --ivory:     #F5EFE0;   /* sfondo principale */
  --card:      #EDE5D2;   /* card e sezioni alternate */
  --ink:       #2A2A28;   /* testo corpo quasi-nero caldo */
  --muted:     #6A6860;   /* testi secondari */
}

/* ── Body ────────────────────────────────────────────────────────────────── */
body {
  font-family: 'Noto Sans SC', 'Inter', sans-serif;
  background: #F5EFE0;
  color: #2A2A28;
  line-height: 1.75;
}

/* ── Titoli — serif protagonista ─────────────────────────────────────────── */
h1, h2, h3, h4,
.sec-title, .page-hero h1, .about-block h2, .about-intro,
.mission .sec-title {
  font-family: 'Noto Serif SC', 'Cormorant Garamond', serif;
  letter-spacing: 0.03em;
  color: #2A2A28;
}

/* ── Eyebrow — bordeaux su avorio ───────────────────────────────────────── */
.eyebrow {
  font-family: 'Noto Sans SC', 'Montserrat', sans-serif;
  color: #8C2D3C;
  letter-spacing: 0.15em;
}
.pillars .head .eyebrow,
.diagnosi .eyebrow,
.articles .head .eyebrow {
  color: #8C2D3C;
}

/* ── Logo: "C" bordeaux, tagline bordeaux, "ompass" navy ─────────────────── */
/* DECISIONE 23/06/2026: Variante A confermata da Giorgio */
.wm-c       { color: #8C2D3C !important; }  /* bordeaux */
.wm-compass { color: var(--navy); }          /* navy */
.wm-tagline {
  color: #8C2D3C;                             /* bordeaux — stesso della C */
  font-family: 'Noto Sans SC', 'Montserrat', sans-serif;
  letter-spacing: 0.08em;
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav a, .mob-menu a, .btn, .btn-gold, .btn-outline,
.submit-btn, .ck-btn, .ham-btn, .oss-all, .art-link, .prefoot h4 {
  font-family: 'Noto Sans SC', 'Montserrat', sans-serif;
}

/* ── Page hero — avorio invece di navy ──────────────────────────────────── */
.page-hero {
  background: linear-gradient(160deg, #EDE5D2, #E4D9C2);
  color: #2A2A28;
  position: relative;
}
.page-hero::before {
  background: radial-gradient(ellipse at 50% -10%,
    rgba(140, 45, 60, 0.06), transparent 62%);
}
/* linea sottile bordeaux in fondo al page-hero */
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: clamp(20px,5vw,56px); right: clamp(20px,5vw,56px);
  height: 1px;
  background: rgba(140,45,60,0.35);
}
.page-hero .eyebrow { color: #8C2D3C; }
.page-hero h1       { color: #2A2A28; text-shadow: none; }
.page-hero h1 .gold { color: #8C2D3C; }
.page-hero .lead    {
  color: #55534E;
  font-family: 'Noto Serif SC', serif;
  font-style: normal;
}

/* ── Hero home — linea sottile bordeaux in fondo ────────────────────────── */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(140,45,60,0.5);
  z-index: 10;
}

/* ── Sezioni chiare — avorio ─────────────────────────────────────────────── */
.sec, .about-sec, .contact-sec, .diagnosi, .articles, .legal-doc {
  background: #F5EFE0;
}

/* ── Sezioni alternate — avorio scuro ───────────────────────────────────── */
.pillars, .distinct { background: #EDE5D2; }

/* ── Distinct (era navy scuro) — diventa avorio scuro con testi navy ─────── */
.distinct {
  color: #2A2A28;
}
.distinct::before { display: none; } /* rimuovi gradiente navy */
.distinct h2 { color: #2A2A28; }
.distinct h2 .gold {
  color: #8C2D3C;
  background: none;
  -webkit-text-fill-color: #8C2D3C;
}
.distinct p { color: #55534E; }
.distinct p.distinct-claim { color: #2A2A28; }
.distinct p.distinct-intro { color: #55534E; }
.distinct-points .dp { border-top-color: rgba(140,45,60,0.3); }
.distinct-points .dp-lbl { color: #8C2D3C; }
.distinct-points .dp p { color: #55534E; }
.distinct p.distinct-close { color: #55534E; }
.btn-ghost {
  border-color: rgba(140,45,60,0.4);
  color: #8C2D3C;
}
.btn-ghost:hover {
  border-color: #8C2D3C;
  background: rgba(140,45,60,0.05);
}

/* ── Mission — rimane scura, bordeaux al posto dell'oro ─────────────────── */
.mission .wrap {
  background: linear-gradient(160deg, #1a2b4a, #0f1e35);
  border-color: rgba(140,45,60,0.2);
}
.mission .eyebrow  { color: #B8962D; }
.mission .sec-title { color: #F5EFE0; }
.mission .lead-p   { color: rgba(245,239,224,0.86); }

/* ── Pill ────────────────────────────────────────────────────────────────── */
.pill         { background: #EDE5D2; border-color: rgba(42,42,40,0.12); }
.pill h3      { color: #2A2A28; }
.pill p       { color: #6A6860; }
.pill .tag    { color: #8C2D3C; }
.pill.featured {
  background: linear-gradient(160deg, #1a2b4a, #0f1e35);
  border-color: rgba(140,45,60,0.35);
}
.pill.featured h3  { color: #F5EFE0; }
.pill.featured p   { color: rgba(245,239,224,0.8); }
.pill.featured .tag { color: #B8962D; }

/* ── NUMERI GRANDI — bordeaux, serif, protagonisti ───────────────────────── */
/* Diagnosi amount */
.diag-amount {
  background: none !important;
  -webkit-text-fill-color: #8C2D3C !important;
  color: #8C2D3C;
  font-family: 'Noto Serif SC', serif;
}
/* Entry2 amount (pagine dark) */
.entry2 .amount {
  color: #B8962D;
  font-family: 'Noto Serif SC', serif;
}

/* ── Bottoni ─────────────────────────────────────────────────────────────── */
.btn-gold, .news button, .ck-all, .partner-cta, .svc-card .cta {
  background: #8C2D3C;
  color: #F5EFE0;
  box-shadow: none;
}
.btn-gold:hover, .news button:hover, .ck-all:hover {
  background: #6E222E;
  transform: translateY(-1px);
}
.btn-navy {
  border-color: rgba(42,42,40,0.25);
  color: #2A2A28;
}
.btn-navy:hover { background: rgba(42,42,40,0.05); }

/* ── Art card ────────────────────────────────────────────────────────────── */
.art-card    { background: #EDE5D2; border-color: rgba(42,42,40,0.1); }
.art-cat     { color: #8C2D3C; }
.art-card h3 { color: #2A2A28; }
.art-link    { color: #8C2D3C; }

/* ── Separatori ──────────────────────────────────────────────────────────── */
.legal-wrap .note-box,
.post-body blockquote,
.about-block.compliance { border-left-color: #8C2D3C; }

/* ── Form ────────────────────────────────────────────────────────────────── */
.field input, .field select, .field textarea {
  background: #fff;
  border-color: rgba(42,42,40,0.18);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #8C2D3C;
  box-shadow: 0 0 0 3px rgba(140,45,60,0.1);
}
.submit-btn { background: #2A2A28; }
.submit-btn:hover { background: #0F2341; }

/* ── Prefoot — scuro con bordeaux ────────────────────────────────────────── */
.prefoot { border-top-color: rgba(140,45,60,0.2); }
.prefoot h4 { color: #F5EFE0; }
.oss-item a { color: rgba(245,239,224,0.85); }
.oss-item a:hover { color: #F5EFE0; }
.oss-date { color: rgba(245,239,224,0.45); }
.oss-all  { color: #F5EFE0; }
.prefoot .explore a { color: rgba(245,239,224,0.7); }
.prefoot .explore a:hover,
.prefoot .explore a.explore-sep { color: #F5EFE0; }

/* ── Pagine dark (consulenza-prospetto, ai-advisory-prospetto) ───────────── */
.lvl2-hero .eyebrow  { color: #B8962D; }
.lvl2-hero .subtitle { color: #F5EFE0; }
.acc-row .lbl        { color: #B8962D; }
.phase .ph-n         { color: #B8962D; }
.svc-card .price     { color: #B8962D; }
.svc-card .tag       {
  color: #B8962D;
  background: rgba(184,150,45,0.1);
  border-color: rgba(184,150,45,0.3);
}
.acc.featured {
  border-color: rgba(140,45,60,0.5);
  box-shadow: 0 0 0 1px rgba(140,45,60,0.18),
              0 18px 50px -30px rgba(140,45,60,0.28);
}
.acc-toggle::before,
.acc-toggle::after { background: #B8962D; }

/* ── Cookie wall ─────────────────────────────────────────────────────────── */
.cookie-card h3 .accent { color: #B8962D; }
.ck-ess {
  border-color: rgba(245,239,224,0.4);
  color: #F5EFE0;
}

/* ── Header su sfondo chiaro — logo e nav in navy ───────────────────────── */
/*
 * Il site-header è position:absolute con gradiente scuro pensato per hero con
 * immagine fotografica. Sulle pagine interne ZH (page-hero crema) il gradiente
 * sparisce e i testi bianchi diventano invisibili.
 * Soluzione: su .page-hero, forziamo l'header a testi scuri.
 */

/* Pagine interne: header sticky navy su crema */
.page-hero ~ * .site-header,   /* fallback */
body:not(.has-hero) .site-header {
  background: rgba(245,239,224,0.97);
  backdrop-filter: blur(6px);
}

/* Approccio più diretto: quando il body è crema, l'header diventa navy */
/* Usiamo un override esplicito sull'header nelle pagine senza hero fotografico */
.site-header {
  /* su hero con immagine: gradiente scuro già presente nel style.css */
  /* qui aggiungiamo fallback per quando il gradiente è su sfondo chiaro */
}

/* Logo testi: navy invece di bianco */
.wm-row { color: var(--navy); }
.wm-compass { color: var(--navy); }
.wm-c { color: #8C2D3C !important; }  /* bordeaux — invariato */
.g-letter { color: var(--navy); }

/* Badge G: navy con bordeaux */
.g-badge {
  background: var(--navy) !important;
}
/* Dopo dissolved: sfondo trasparente ma G diventa navy (non bianca su crema) */
.g-badge.dissolved {
  background: transparent !important;
}
.g-badge.dissolved .g-letter {
  color: var(--navy);
  transition: color 0.8s ease;
}
/* Anche prima della dissoluzione: G rimane leggibile */
.g-letter { color: #fff; } /* bianca sul badge navy — ok */

/* Nav links: navy */
.nav a {
  color: var(--navy);
  text-shadow: none;
}
.nav a:hover { color: #8C2D3C; }
.lang a { color: rgba(15,35,65,0.7); text-shadow: none; }
.lang a.on { color: #8C2D3C; }
.lang span { color: rgba(15,35,65,0.25); }

/* Hamburger su sfondo chiaro: navy */
.ham-btn {
  background: rgba(15,35,65,0.08);
  border-color: rgba(15,35,65,0.2);
}
.ham-btn span { background: var(--navy); }

/* Header sul hero home (ha sfondo immagine scura) — ripristina bianco */
/* Il hero ha .hero::after che aggiunge la linea bordeaux,
   ma il gradiente scuro dell'header è nello stesso style.css.
   Non sovrascriviamo nulla qui: su .hero l'header funziona già. */

/* ── Lead e corpo ────────────────────────────────────────────────────────── */
.lead, .lead-p, .hero .lead, .page-hero .lead {
  font-family: 'Noto Serif SC', serif;
  font-style: normal;
  font-size: clamp(16px, 1.9vw, 20px);
  color: #55534E;
}
.hero .lead { color: rgba(255,255,255,0.94); } /* hero ha sfondo immagine scura */

/* ── Font size CJK ───────────────────────────────────────────────────────── */
.page-hero h1 { font-size: clamp(24px, 3.8vw, 42px); }


/* === Welcome-card ZH: palette calda (Opzione A, 24/06) invece del bianco freddo === */
.welcome-card h1   { color: #F4ECD8; }
.welcome-card .lead{ color: rgba(244,236,216,0.72); }
.welcome-card .eyebrow{ color: #E8C97A; }