@import './kn-responsive.css';

/* ═══════════════════════════════════════════════════════════════
   KN-THEME.CSS — Kronvex · Kronos / Greek Mythology Design System
   v2 — proper redesign, applied to all secondary pages
   ═══════════════════════════════════════════════════════════════ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* ── CSS VARIABLES (dark default — all pages) ── */
:root {
  --kn-cinzel:   'Cinzel', serif;
  --kn-garamond: 'EB Garamond', serif;

  /* Backgrounds — deeper, richer darks */
  --bg:  #0b0f18;
  --bg2: #111827;
  --bg3: #182030;
  --bg4: #1e2a40;

  /* Text */
  --text:   #e8edf8;
  --text2:  #c4d0e8;
  --muted:  #7a8fa8;
  --muted2: #4a5a6e;

  /* Saphir */
  --saphir:       #4a7ef5;
  --saphir2:      #5a8ff8;
  --saphir-g:     rgba(74,126,245,0.07);
  --saphir-l:     rgba(74,126,245,0.10);
  --saphir-glow:  rgba(74,126,245,0.28);
  --saphir-m:     rgba(74,126,245,0.25);

  /* Gold */
  --gold:      #e09030;
  --gold2:     #f0a840;
  --gold-l:    rgba(224,144,48,0.08);
  --gold-m:    rgba(224,144,48,0.18);
  --gold-glow: rgba(224,144,48,0.28);

  /* Borders */
  --border:        rgba(255,255,255,0.06);
  --border2:       rgba(255,255,255,0.10);
  --border3:       rgba(255,255,255,0.18);
  --border-gold:   rgba(224,144,48,0.20);
  --border-saphir: rgba(74,126,245,0.20);

  /* Status */
  --green: #22c55e;
  --red:   #f87171;
  --orange: #f59e0b;

  /* Fonts */
  --ff-display: 'Sora', sans-serif;
  --ff-body:    'Sora', system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', monospace;
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --bg:  #f0f4ff;
  --bg2: #e8eefa;
  --bg3: #dde5f7;
  --bg4: #d2dcf2;

  --text:   #0d1117;
  --text2:  #1e2a3a;
  --muted:  #4a5a6e;
  --muted2: #8898aa;

  --saphir:       #2a5cd4;
  --saphir2:      #3a6de4;
  --saphir-g:     rgba(42,92,212,0.06);
  --saphir-l:     rgba(42,92,212,0.08);
  --saphir-glow:  rgba(42,92,212,0.20);
  --saphir-m:     rgba(42,92,212,0.22);

  --gold:      #a06010;
  --gold2:     #b07020;
  --gold-l:    rgba(160,96,16,0.07);
  --gold-m:    rgba(160,96,16,0.15);
  --gold-glow: rgba(160,96,16,0.25);

  --border:        rgba(13,17,23,0.08);
  --border2:       rgba(13,17,23,0.13);
  --border3:       rgba(13,17,23,0.22);
  --border-gold:   rgba(160,96,16,0.18);
  --border-saphir: rgba(42,92,212,0.18);

  --green:  #16a34a;
  --red:    #dc2626;
  --orange: #d97706;
}

/* ══════════════════════════════════════════════════════════════
   UNIVERSAL BODY ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */

body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Grain overlay on every page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.038'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.5;
}

[data-theme="light"] body::after { opacity: 0.3; }

/* ══════════════════════════════════════════════════════════════
   NAV OVERRIDES — same visual weight everywhere
   ══════════════════════════════════════════════════════════════ */

/* Nav bottom border uses gold accent instead of plain white */
#kn-nav {
  border-bottom: 1px solid var(--border-gold) !important;
  background: rgba(11,15,24,0.94) !important;
}

[data-theme="light"] #kn-nav {
  background: rgba(240,244,255,0.96) !important;
  border-bottom: 1px solid var(--border-gold) !important;
}

/* Active link uses gold instead of saphir */
.kn-links a.kn-links a.kn-active::after {
  background: var(--gold) !important;
}
.kn-links a:hover::after {
  background: var(--gold) !important;
}

[data-theme="light"] .kn-logo { color: var(--text) !important; }
[data-theme="light"] .kn-links a { color: var(--muted) !important; }
[data-theme="light"] .kn-links a:hover { color: var(--text) !important; }
[data-theme="light"] .kn-links a[data-theme="light"] .kn-hamburger span { background: var(--text) !important; }
[data-theme="light"] .kn-mobile-menu { background: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ══════════════════════════════════════════════════════════════ */

#kn-progress-wrap {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1100;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
}

#kn-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--saphir), var(--gold));
  transition: width 0.08s linear;
;border-radius:0 1px 1px 0}

/* ══════════════════════════════════════════════════════════════
   CANVAS BACKGROUND
   ══════════════════════════════════════════════════════════════ */

#kn-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   GRID BACKGROUND
   ══════════════════════════════════════════════════════════════ */

#kn-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 0%, transparent 100%);
  opacity: 0.7;
}

[data-theme="light"] #kn-grid {
  background-image:
    linear-gradient(rgba(42,92,212,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,92,212,0.05) 1px, transparent 1px);
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   PILLAR DECORATORS
   ══════════════════════════════════════════════════════════════ */

.kn-pillar {
  position: fixed;
  top: 60px;
  bottom: 0;
  width: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--border-gold) 8%, var(--border-gold) 92%, transparent 100%);
  opacity: 0.35;
}
.kn-pillar-l { left: max(20px, calc(50vw - 660px)); }
.kn-pillar-r { right: max(20px, calc(50vw - 660px)); }
@media(max-width:1800px) { .kn-pillar { display:none; } }

/* ══════════════════════════════════════════════════════════════
   GREEK KEY DIVIDER
   ══════════════════════════════════════════════════════════════ */

.kn-greek-key {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
  opacity: 0.4;
}
.kn-greek-key::before,
.kn-greek-key::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}
.kn-greek-key-symbol {
  font-family: var(--kn-cinzel);
  font-size: 0.55rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY — CINZEL ON SECTION TITLES
   ══════════════════════════════════════════════════════════════ */

/* All h1 and h2 get Cinzel */
h1 { font-family: var(--kn-cinzel) !important; }
h2 { font-family: var(--kn-cinzel) !important; }

/* Eyebrows and section labels */
.eyebrow, .section-eyebrow, .hero-eyebrow,
.doc-eyebrow, .feat-label, .articles-label,
.section-label, .int-section-label, .sdk-section-label,
.sb-group-title, .doc-section-title {
  font-family: var(--kn-cinzel) !important;
  letter-spacing: 0.25em !important;
}

/* Gold em/span inside titles */
h1 em, h1 span:not([class]),
h2 em, h2 span:not([class]) {
  color: var(--gold) !important;
  font-style: normal;
  -webkit-text-fill-color: var(--gold) !important;
  background: none !important;
}

/* ══════════════════════════════════════════════════════════════
   CARD HOVER LIFT (universal)
   ══════════════════════════════════════════════════════════════ */

.ep-card, .ep-box, .qs-step, .mem-type-card,
.problem-card, .reason-card, .int-card, .sdk-card,
.plan-card, .pricing-col, .feat-card,
.spec-card, .use-card, .timeline-item {
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.problem-card:hover, .reason-card:hover, .int-card:hover,
.sdk-card:hover, .plan-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — FULL SURFACE OVERRIDES
   ══════════════════════════════════════════════════════════════ */

[data-theme="light"] body { background: var(--bg) !important; }

/* Sections */
[data-theme="light"] section:not(#kn-nav),
[data-theme="light"] .section,
[data-theme="light"] .hero,
[data-theme="light"] .problems,
[data-theme="light"] .compare-section,
[data-theme="light"] .reasons,
[data-theme="light"] .migration,
[data-theme="light"] .faq,
[data-theme="light"] .pricing-compare {
  background: var(--bg2) !important;
}

[data-theme="light"] section:nth-child(even):not(#kn-nav),
[data-theme="light"] .section:nth-child(even) {
  background: var(--bg) !important;
}

/* Cards */
[data-theme="light"] .card,
[data-theme="light"] .problem-card,
[data-theme="light"] .reason-card,
[data-theme="light"] .int-card,
[data-theme="light"] .sdk-card,
[data-theme="light"] .ep-card,
[data-theme="light"] .ep-box,
[data-theme="light"] .qs-step,
[data-theme="light"] .mem-type-card,
[data-theme="light"] .feat-card,
[data-theme="light"] .art-row,
[data-theme="light"] .pricing-col {
  background: #ffffff !important;
  border-color: var(--border2) !important;
  box-shadow: 0 2px 12px rgba(13,17,23,0.06) !important;
}

[data-theme="light"] .doc-sidebar {
  background: var(--bg2) !important;
  border-right-color: var(--border2) !important;
}

[data-theme="light"] .sb-link { color: var(--muted) !important; }
[data-theme="light"] .sb-link:hover { background: var(--bg3) !important; color: var(--text) !important; }
[data-theme="light"] .sb-link.active { background: var(--saphir-l) !important; color: var(--saphir) !important; }

/* Text colours */
[data-theme="light"] h1, [data-theme="light"] h2,
[data-theme="light"] h3, [data-theme="light"] h4 { color: var(--text) !important; }
[data-theme="light"] p { color: var(--text2) !important; }
[data-theme="light"] .muted, [data-theme="light"] [style*="color:#4a5568"],
[data-theme="light"] [style*="color:#7a8fa8"], [data-theme="light"] [style*="color:#6b7a99"] {
  color: var(--muted) !important;
}

/* Code blocks stay dark */
[data-theme="light"] pre,
[data-theme="light"] .code-block,
[data-theme="light"] .sdk-code,
[data-theme="light"] .code-body { background: #0d1117 !important; }

/* Inline dark bg boxes → light equivalent */
[data-theme="light"] [style*="background:#080d14"],
[data-theme="light"] [style*="background:#0d1117"],
[data-theme="light"] [style*="background:#141b26"],
[data-theme="light"] [style*="background:#1a2235"],
[data-theme="light"] [style*="background:#0a1628"] { background: var(--bg3) !important; }

[data-theme="light"] [style*="background:rgba(13,17,23"],
[data-theme="light"] [style*="background:rgba(20,27,38"],
[data-theme="light"] [style*="background:rgba(26,34,53"] { background: rgba(220,228,245,0.7) !important; }

/* Inline text overrides */
[data-theme="light"] [style*="color:#e8edf8"],
[data-theme="light"] [style*="color:#c8d4e8"],
[data-theme="light"] [style*="color:#d0d8e8"] { color: var(--text) !important; }

[data-theme="light"] [style*="color:#4a5568"],
[data-theme="light"] [style*="color:#7a8fa8"],
[data-theme="light"] [style*="color:#6b7a99"] { color: var(--muted) !important; }

/* Borders */
[data-theme="light"] [style*="border:1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-color:rgba(255,255,255"] { border-color: var(--border2) !important; }

/* Tables */
[data-theme="light"] table th { background: var(--bg3) !important; color: var(--text) !important; border-color: var(--border2) !important; }
[data-theme="light"] table td { background: #ffffff !important; color: var(--text2) !important; border-color: var(--border) !important; }
[data-theme="light"] .col-kronvex { background: var(--saphir-l) !important; }

/* Inputs */
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select {
  background: #ffffff !important; color: var(--text) !important; border-color: var(--border2) !important;
}

/* Footer */
[data-theme="light"] footer {
  background: var(--bg3) !important;
  border-top: 1px solid var(--border2) !important;
}
[data-theme="light"] footer * { color: var(--muted) !important; }
[data-theme="light"] footer a { color: var(--saphir) !important; }
[data-theme="light"] footer a:hover { color: var(--text) !important; }

/* Keep white text on blue buttons */
[data-theme="light"] .btn-primary,
[data-theme="light"] .kn-dash,
[data-theme="light"] .kn-mob-dash { color: #fff !important; }
[data-theme="light"] .kn-login { color: var(--saphir) !important; }

/* Article rows — blog */
[data-theme="light"] .art-row { border-bottom-color: var(--border2) !important; }
[data-theme="light"] .art-row:hover { background: var(--bg2) !important; }
[data-theme="light"] .art-title { color: var(--text) !important; }
[data-theme="light"] .art-desc { color: var(--muted) !important; }

/* Endpoint bodies */
[data-theme="light"] .ep-head, [data-theme="light"] .ep-header { background: var(--bg2) !important; }
[data-theme="light"] .ep-head:hover, [data-theme="light"] .ep-header:hover { background: var(--bg3) !important; }
[data-theme="light"] .ep-body, [data-theme="light"] .ep-param { background: var(--bg3) !important; }

/* Modal */
[data-theme="light"] .modal-box { background: #ffffff !important; border-color: var(--border2) !important; }
[data-theme="light"] .modal-input { background: var(--bg2) !important; border-color: var(--border2) !important; color: var(--text) !important; }

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted2); }

/* ══════════════════════════════════════════════════════════════
   SELECTION
   ══════════════════════════════════════════════════════════════ */

::selection { background: var(--gold-m); color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

@keyframes kn-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kn-pulse {
  0%,100% { opacity:1; } 50% { opacity:0.35; }
}
@keyframes kn-spin { to { transform: rotate(360deg); } }

.kn-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(.23,1,.32,1), transform 0.55s cubic-bezier(.23,1,.32,1);
}
.kn-reveal.kn-in { opacity: 1; transform: none; }

/* ── Nav responsive (secondary pages) ── */
@media(max-width:1280px){
  #kn-nav { padding: 0 24px !important; }
  .kn-links { gap: 12px !important; }
  .kn-links a { font-size: 10px !important; letter-spacing: 0.3px !important; }
  .kn-dash, .kn-login { font-size: 10px !important; padding: 6px 12px !important; }
}
@media(max-width:1024px){
  #kn-nav { padding: 0 16px !important; }
  .kn-links { gap: 8px !important; }
  .kn-links a { font-size: 9.5px !important; }
}
@media(max-width:860px){
  .kn-links { display: none !important; }
  .kn-hamburger { display: flex !important; }
  .kn-dash, .kn-login, .kn-lang { display: none !important; }
}

/* ── Text justify ── */
.doc-p, .doc-sub,
article p, .blog-content p, .article-body p,
.section-sub, .hero-sub, .plan-desc,
.card p, .reason-desc, .problem-desc,
.ep-desc, .feat-desc, .art-desc,
.use-case-desc, .case-desc,
p:not([class*="eyebrow"]):not([class*="mono"]):not([class*="badge"]):not([class*="tag"]):not([class*="label"]) {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}