/* ─────────────────────────────────────────────────────────────
   OL-IA — tema chiaro (03/10/2026): le pagine del sito prendono i colori
   della home bianca (anteprima-aziende/bianca). Va collegato per ultimo,
   dopo olia-leggibilita.css.
   NON va collegato a: siti-aziendali/ (resta scura, deciso da Stefano),
   creatore/, video/, demo/.
   Come funziona: il sito è scritto con le variabili qui sotto, quindi
   si ridefiniscono quelle e poi si correggono i punti con colori fissi.
   I blocchi in evidenza restano scuri («isole»), come le card scure della
   home bianca: dentro di loro le variabili tornano quelle del tema scuro.
   ───────────────────────────────────────────────────────────── */

/* html:root batte i :root scritti dentro le pagine (privacy, diagnosi, blog) */
html:root {
  /* pagine con app-*.css */
  --bg: #fff;
  --white: #1c1a1f;            /* era il testo su fondo scuro: ora è l'inchiostro */
  --platinum: #4a4a55;
  --platinum-dim: #6b6b76;
  --accent: #1e50d4;
  --accent-rgb: 30, 80, 212;
  --gold: #9a7608;
  --line: rgba(28, 26, 31, .12);
  /* blog, privacy e cookie (article.css e stili interni) */
  --bg1: #fafafa;
  --bg2: #f4f4f4;
  --bg3: #ececef;
  --text: #1c1a1f;
  --text2: #4a4a55;
  --muted: #6b6b76;
  --accent-soft: rgba(30, 80, 212, .08);
  --accent-line: rgba(30, 80, 212, .28);
  --border: rgba(28, 26, 31, .12);
  --border-md: rgba(28, 26, 31, .2);
  /* diagnosi */
  --bg-sec: #fafafa;
  --bg-card: #f4f4f4;
  --gold-hover: #7d6412;
  --gold-glow: rgba(154, 118, 8, .12);
  --gold-border: rgba(154, 118, 8, .35);
  --border-focus: rgba(154, 118, 8, .6);
  --shadow-sm: 0 1px 4px rgba(28, 26, 31, .08);
  --shadow-md: 0 4px 16px rgba(28, 26, 31, .10);
  --shadow-lg: 0 8px 32px rgba(28, 26, 31, .14);
  color-scheme: light;
}
html, body { background: #fff; }

/* ── isole scure: dentro tornano i colori del tema scuro ── */
.footer, .olia-foot,
.strategie__featured, .svc2-card, .chisono2-banner, .svc-proof, .sm-box {
  --bg: #1c1a1f;
  --white: #f3f5f7;
  --platinum: #c7cdd4;
  --platinum-dim: #9a9fa8;
  --gold: #e8c65a;
  --line: rgba(199, 205, 212, .16);
  --accent: #9db4ff;
  --accent-rgb: 124, 152, 255;
}

/* ── logo: nel menu su fondo bianco serve la versione scura (stesse proporzioni, 390×120) ── */
.homebar__logoimg, .olia-nav__logo {
  aspect-ratio: 390 / 120;
  object-fit: none;
  object-position: -9999px 0;
  background: url(/logo/olia-logo-chiaro.svg) no-repeat center / contain;
  max-width: none;             /* con il menu più grande il logo si schiacciava fino a sparire intorno ai 1000 px */
}

/* ── menu delle pagine React ── */
.homebar--solid { background: rgba(255, 255, 255, .88); border-bottom-color: var(--line); }
.homebar__nav { background: #f4f4f4; border-color: #e7e7ea; }
.homebar__link--gold, .homebar__link--gold:hover { color: #9a7608; }
.homebar__link:hover, .homebar__link--white:hover { color: #1e50d4; }
.homebar__risorse, .olia-nav__risorse {
  color: #17803f; background: rgba(23, 128, 63, .06); border-color: rgba(23, 128, 63, .55);
}
.homebar__risorse:hover, .olia-nav__risorse:hover { color: #17803f; background: rgba(23, 128, 63, .14); }

/* ── menu delle pagine statiche (blog, diagnosi, privacy, cookie) ── */
.olia-nav.is-solid { background: rgba(255, 255, 255, .88); border-bottom-color: rgba(28, 26, 31, .12); }
.olia-nav__links, .navbar .nav-links, #navbar .nav-links { background: #f4f4f4; border-color: #e7e7ea; }
.olia-nav__link, .navbar .nav-links a, #navbar .nav-links a { color: #1c1a1f !important; }
.olia-nav__link:hover, .navbar .nav-links a:hover, #navbar .nav-links a:hover { color: #1e50d4 !important; }
.olia-nav__link--gold, .olia-nav__link--gold:hover { color: #9a7608 !important; }
.olia-nav__cta { color: #fff; background: #1c1a1f; border-color: #1c1a1f; box-shadow: none; }
.olia-nav__cta:hover { background: #1e50d4; border-color: #1e50d4; box-shadow: none; }
.nav-inner { background: rgba(255, 255, 255, .88); box-shadow: 0 2px 24px rgba(28, 26, 31, .08); }
#navbar.scrolled .nav-inner { box-shadow: 0 4px 32px rgba(28, 26, 31, .12); }

/* ── menu a tutto schermo del telefono ── */
.olia-mm-btn { background: #fff; border-color: rgba(28, 26, 31, .14); }
.olia-mm-btn span { background: #1c1a1f; }
.olia-mm-overlay { background: #fff; background-image: none; }
.olia-mm-link, .olia-mm-link--white, .mobile-menu a { color: #1c1a1f !important; }
.olia-mm-link--gold { color: #9a7608 !important; }
.olia-mm-nav .olia-mm-link--verde, .olia-mm-link--verde {
  color: #17803f !important; border-color: rgba(23, 128, 63, .55); background: rgba(23, 128, 63, .06);
}
.olia-mm-cta { color: #fff !important; background: #1c1a1f; box-shadow: none; }
.mobile-menu { background: rgba(255, 255, 255, .98); box-shadow: 0 8px 32px rgba(28, 26, 31, .12); }
.mobile-menu a.btn-gold { color: #fff !important; }

/* ── pulsanti: pieni scuri come in home, blu al passaggio ── */
.btn { color: #fff; background: #1c1a1f; border-color: #1c1a1f; box-shadow: 0 6px 22px rgba(28, 26, 31, .12); }
.btn:hover { background: #1e50d4; border-color: #1e50d4; box-shadow: 0 12px 32px rgba(30, 80, 212, .28); }
.btn--ghost { color: #4a4a55; background: transparent; border-color: rgba(28, 26, 31, .18); box-shadow: none; }
.btn--ghost:hover { color: #1c1a1f; background: #f4f4f4; border-color: rgba(30, 80, 212, .55); box-shadow: none; }
/* dentro le isole scure il pulsante si inverte */
.strategie__featured .btn, .svc2-card .btn, .chisono2-banner .btn, .svc-proof .btn, .sm-box .btn {
  color: #1c1a1f; background: #f3f5f7; border-color: #f3f5f7; box-shadow: none;
}

/* ── card e riquadri chiari ── */
.strategie__card, .svc-card, .sm-card, .sm-passo { background: #fafafa; }
.strategie__card:hover { background: #f4f4f4; }
.strategie__card-arrow { background: #ececef; }
.strategie__card:hover .strategie__card-arrow { color: #fff; }
.svc2-banner { background: linear-gradient(100deg, #f4f4f4 40%, rgba(30, 80, 212, .12)); }
.hero-badge { background: rgba(154, 118, 8, .08); border-color: rgba(154, 118, 8, .35); }
.section--cover.chiamami { background: #f4f4f4; }
.chiamami__photo { background: #e4e4ea; }

/* ── isole scure: fondo e bordo ── */
.strategie__featured, .svc2-card, .chisono2-banner, .svc-proof, .sm-box { background-color: #1c1a1f; }

/* ── moduli ── */
.form-field input, .form-field select, .form-field textarea,
.campo input, .campo textarea { background: #fff; }

/* ── footer scuro, come quello della home ── */
.footer { background: #1c1a1f; }
.olia-foot { background: #1c1a1f; }
.olia-foot__col h4, .olia-foot__col .mono { color: #9db4ff; }
.olia-foot__legal a:hover { color: #9db4ff; }
.olia-foot__col p, .olia-foot__col p.olia-foot__tagline, .olia-foot__bottom, .olia-foot__legal a { color: #9a9fa8; }

/* ── pagina /start/ ── */
.start__sfondo::after {
  background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .82) 40%, rgba(255, 255, 255, .94));
}
.start__link a { background: rgba(255, 255, 255, .86); }
.start__link a:hover, .start__link a:focus-visible { background: #f4f4f4; }
.start__link--oro .start__s { color: #9a7608; }
.start__link--oro:hover, .start__link--oro:focus-visible { background: rgba(154, 118, 8, .08); }
.start__link--verde { border-color: rgba(23, 128, 63, .55); }
.start__link--verde .start__t, .start__link--verde .start__freccia,
.start__link--verde:hover .start__t, .start__link--verde:hover .start__freccia { color: #17803f; }
.start__link--verde:hover, .start__link--verde:focus-visible { border-color: #17803f; background: rgba(23, 128, 63, .08); }

/* ── risorse gratuite ── */
.ris-card { background: #fafafa; }
.ris-riga:hover { background: #f4f4f4; }
dialog { background: #fff; box-shadow: 0 30px 80px rgba(28, 26, 31, .25); }
dialog::backdrop { background: rgba(28, 26, 31, .5); }
.dlg__azioni { background: #fff; }
.dlg__testo mark { background: rgba(201, 162, 39, .28); color: inherit; }
.esito.ko, .error-msg { color: #b3261e; }
.error-msg { border-color: rgba(179, 38, 30, .45); }

/* ── blog ── */
.article-cta-box { background: linear-gradient(135deg, rgba(30, 80, 212, .10), rgba(30, 80, 212, .03)); }

/* ── diagnosi: l'oro resta il colore dei pulsanti, con il testo scuro sopra ── */
.btn-open, .btn-primary, .sel-btn.active, .popup-brand-icon { background: #e8c65a; color: #1a1a18; }
.sel-btn.active { border-color: #c9a227; }
.dg__card { background: #fafafa; }
.lead-gate-card { background: #fff; box-shadow: 0 24px 64px rgba(28, 26, 31, .18); }
.lead-overlay-card { box-shadow: 0 20px 60px rgba(28, 26, 31, .18); }
.input-field, .note-area, .select-field, .select-field option,
.kpi-card, .costo-row, .proc-item, .stat-card, .cta-card { background-color: #fff; }
.dg__glow { background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, .14), transparent 62%); }
.sel-btn:hover, .check-btn:hover:not(:disabled) { border-color: rgba(154, 118, 8, .55); }