/* ============================================================
   KAMA SHARED HEADER  —  single source of truth for every page.
   Edit this file (and site-header.js) once; it updates everywhere.
   Loaded on all pages alongside site-header.js.
   ============================================================ */

/* Clearface (used by the proof-bar numerals) — load via absolute path so it
   works on root pages AND /blog/ articles alike. */
@font-face {
  font-family: 'Clearface';
  src: url('/public/fonts/ltd_clearface_std.woff2') format('woff2'),
       url('/public/fonts/ltd_clearface_std.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* Hide each page's old inline nav/proof-bar so only the shared one shows */
nav.nav,
.proof-bar { display: none !important; }

/* ── NAV ── */
.kh-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
  padding: 1.25rem 2.5rem;
  background: #FFF8F2;
  border-bottom: 1px solid rgba(9,8,34,0.06);
  font-family: 'Karla', sans-serif;
}
.kh-nav-left { flex: 1; display: flex; align-items: center; gap: 1.5rem; }
.kh-nav-center { flex: 1; display: flex; justify-content: center; }
.kh-logo { width: 96px; height: auto; filter: brightness(0); }
.kh-nav-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; }
.kh-link { font-size: 0.9375rem; color: #8887A3; font-weight: 500; text-decoration: none; transition: color 0.18s; }
.kh-link:hover { color: #090822; }
.kh-link.active { color: #090822; font-weight: 600; }
.kh-pill { font-size: 0.9375rem; font-weight: 600; background: #090822; color: #FFF8F2; padding: 0.5rem 1.25rem; border-radius: 24rem; text-decoration: none; transition: background 0.2s; }
.kh-pill:hover { background: #4A43F3; }
.kh-ask-btn { font-family: 'Karla', sans-serif; font-size: 0.9rem; font-weight: 600; background: transparent; color: #090822; border: 1.5px solid rgba(9,8,34,0.2); border-radius: 24rem; padding: 0.4rem 1rem; cursor: pointer; transition: all 0.18s; }
.kh-ask-btn:hover { background: #090822; color: #FFF8F2; border-color: #090822; }
@media (max-width: 768px) { .kh-nav-left .kh-link { display: none; } .kh-nav { padding: 1rem 1.25rem; } }

/* ── PROOF BAR ── */
.kh-proof-bar { background: #FFF8F2; border-bottom: 1px solid rgba(9,8,34,0.08); padding: 0 2.5rem; font-family: 'Karla', sans-serif; }
.kh-proof-inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 3rem; padding: 1.125rem 0; flex-wrap: wrap; }
.kh-proof-item { display: flex; align-items: center; gap: 0.875rem; }
.kh-proof-stat { font-family: 'Clearface', Georgia, serif; font-size: 2rem; color: #090822; letter-spacing: -0.03em; line-height: 1; }
.kh-proof-icon { font-size: 1.75rem; line-height: 1; }
.kh-proof-detail { display: flex; flex-direction: column; gap: 2px; }
.kh-proof-stars { color: #FF7A2A; font-size: 0.875rem; letter-spacing: 2px; }
.kh-proof-name { font-size: 1rem; font-weight: 700; color: #090822; line-height: 1.2; }
.kh-proof-label { font-size: 0.875rem; color: #8887A3; font-weight: 500; }
.kh-proof-divider { width: 1px; height: 2.5rem; background: rgba(9,8,34,0.1); }

/* ── ASK KAMA MODAL ── */
.kh-ask-overlay { display: none; position: fixed; inset: 0; background: rgba(9,8,34,0.6); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; padding: 1.5rem; }
.kh-ask-overlay.open { display: flex; }
.kh-ask-modal { background: #FFF8F2; border-radius: 24px; padding: 2.5rem; max-width: 480px; width: 100%; position: relative; font-family: 'Karla', sans-serif; }
.kh-ask-close { position: absolute; top: 1.25rem; right: 1.25rem; background: none; border: none; font-size: 1.5rem; color: #8887A3; cursor: pointer; line-height: 1; padding: 0.25rem; }
.kh-ask-close:hover { color: #090822; }
.kh-ask-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #FF7A2A; margin-bottom: 0.5rem; }
.kh-ask-headline { font-family: 'Clearface', Georgia, serif; font-size: 1.75rem; line-height: 1.15; color: #090822; margin-bottom: 0.625rem; }
.kh-ask-sub { font-size: 0.9375rem; color: #6B6A89; line-height: 1.6; margin-bottom: 1.75rem; }
.kh-ask-label { font-size: 0.8rem; font-weight: 700; color: #090822; letter-spacing: 0.04em; margin-bottom: 0.5rem; display: block; }
.kh-ask-textarea { width: 100%; box-sizing: border-box; font-family: 'Karla', sans-serif; font-size: 0.9375rem; color: #090822; background: #fff; border: 1.5px solid rgba(9,8,34,0.15); border-radius: 12px; padding: 0.875rem 1rem; resize: vertical; min-height: 100px; outline: none; transition: border-color 0.2s; margin-bottom: 1rem; }
.kh-ask-textarea:focus { border-color: #090822; }
.kh-ask-email { width: 100%; box-sizing: border-box; font-family: 'Karla', sans-serif; font-size: 0.9375rem; color: #090822; background: #fff; border: 1.5px solid rgba(9,8,34,0.15); border-radius: 12px; padding: 0.875rem 1rem; outline: none; transition: border-color 0.2s; margin-bottom: 1.5rem; }
.kh-ask-email:focus { border-color: #090822; }
.kh-ask-submit { width: 100%; font-family: 'Karla', sans-serif; font-size: 1rem; font-weight: 700; background: #090822; color: #FFF8F2; border: none; border-radius: 24rem; padding: 0.9375rem; cursor: pointer; transition: background 0.2s; }
.kh-ask-submit:hover { background: #4A43F3; }
.kh-ask-success { display: none; text-align: center; padding: 2rem 0 1rem; }
.kh-ask-success.show { display: block; }
.kh-ask-mark { font-size: 2.25rem; margin-bottom: 1rem; color: #090822; line-height: 1; }

/* ── Shared footer — matches live kama.co ───────────────────── */
.kh-footer { background: #090822; color: rgba(255,248,242,0.6); text-align: center; padding: 1.5rem; font-family: 'Karla', sans-serif; font-size: 0.875rem; }
.kh-footer-copy { margin: 0; }
.kh-footer-links { margin: 0.5rem 0 0; display: flex; justify-content: center; gap: 1.25rem; }
.kh-footer-links a { color: rgba(255,248,242,0.6); text-decoration: none; transition: color 0.18s; }
.kh-footer-links a:hover { color: #FFF8F2; }