/* ============================================================
   KOJ System Overlay · Legacy pages visual unifier
   Loaded AFTER each page's internal <style> block.
   Uses !important selectively to override established rules.
   Does NOT change layout — only typography, colors, accents.
   ============================================================ */

/* ── 1. Import fresh KOJ typography stack ── */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;1,400&display=swap");

/* ── 2. Force KOJ color palette across ALL legacy vars ── */
:root {
  /* Canonical KOJ */
  --primary-yellow: #FEB503 !important;
  --primary-black:  #0A0A0A !important;

  /* Kill secondary brand accents from legacy pages */
  --bi-blue:            #FEB503 !important;
  --bi-green:           #FEB503 !important;
  --accent-blue:        #FEB503 !important;
  --primary-blue:       #FEB503 !important;
  --hubspot-orange:     #FEB503 !important;
  --hubspot-dark:       #0A0A0A !important;
  --aws-orange:         #FEB503 !important;
  --aws-dark:           #0A0A0A !important;
  --aws-light:          #F7F5F0 !important;
  --odoo-purple:        #FEB503 !important;
  --odoo-teal:          #FEB503 !important;
  --navy:               #0A0A0A !important;
  --gold:               #FEB503 !important;
  --monday-blue:        #FEB503 !important;
  --clickup-purple:     #FEB503 !important;
  --primary-accent:     #FEB503 !important;
  --revenue-green:      #FEB503 !important;
  --inventify-orange:   #FEB503 !important;
  --data-purple:        #0A0A0A !important;

  /* Editorial grays (from KOJ new system) */
  --dark-gray:   #2D2D2D;
  --medium-gray: #6B6B6B;
  --light-gray:  #F7F5F0;

  /* Motion */
  --koj-ease: cubic-bezier(.2,.7,.3,1);
}

/* ── 3. Typography: Georgia italic headlines + Arial body ── */
body {
  font-family: Arial, 'Helvetica Neue', sans-serif !important;
  color: #2D2D2D;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

/* Big h1 typographic bump */
h1 { font-size: clamp(40px, 6vw, 72px) !important; }
h2 { font-size: clamp(30px, 4.5vw, 52px) !important; }
h3 { font-size: clamp(22px, 3vw, 34px) !important; }

/* Italic emphasis in headlines → yellow accent */
h1 em, h1 i, h1 span.accent, h1 .highlight,
h2 em, h2 i, h2 span.accent, h2 .highlight,
h3 em, h3 i, h3 span.accent, h3 .highlight {
  font-style: italic !important;
  color: #FEB503 !important;
  font-weight: 400 !important;
}

/* ── 4. Section eyebrows and tags ── */
.eyebrow, .badge, .tag, .subtitle, .section-eyebrow,
[class*="eyebrow"], [class*="Eyebrow"] {
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: #FEB503 !important;
  font-weight: 700 !important;
}

/* ── 5. Nav: consistent black with yellow accent stripe ── */
nav {
  background: rgba(10, 10, 10, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}
nav a, nav .nav-link, nav li a {
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #C4C4C4 !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}
nav a:hover, nav .nav-link:hover, nav li a:hover {
  color: #FEB503 !important;
}
nav .logo, nav .brand {
  font-family: Arial, sans-serif !important;
  color: #FFF !important;
}

/* Nav CTA button */
nav .nav-cta, nav .cta-button, nav .btn-primary {
  background: #FEB503 !important;
  color: #0A0A0A !important;
  border-radius: 3px !important;
  padding: 10px 18px !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: none !important;
}
nav .nav-cta:hover { transform: translateY(-1px); }

/* ── 6. Hero: force black bg + yellow accent + Georgia italic ── */
.hero, section.hero, [class*="hero-section"] {
  background: #0A0A0A !important;
  color: #FFF !important;
  position: relative;
}
.hero::before, section.hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 30%; height: 6px;
  background: #FEB503;
  z-index: 5;
  pointer-events: none;
}
.hero h1, section.hero h1,
.hero .title, section.hero .title {
  color: #FFF !important;
}
.hero p, section.hero p, .hero .subtitle {
  color: #C4C4C4 !important;
  font-family: 'Newsreader', Georgia, serif !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* Kill any legacy hero gradient backgrounds */
.hero[style*="gradient"], .hero-gradient, [class*="hero-bg"] {
  background: #0A0A0A !important;
}

/* ── 7. Buttons: yellow block, black text ── */
.cta, .btn, button.btn, a.btn,
.btn-primary, .btn-cta, [class*="button-primary"],
button[class*="cta"], a[class*="cta"] {
  background: #FEB503 !important;
  color: #0A0A0A !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
  border: none !important;
  padding: 14px 26px !important;
  transition: transform 0.2s var(--koj-ease) !important;
}
.cta:hover, .btn:hover, .btn-primary:hover { transform: translateY(-2px); }

.btn-secondary, [class*="button-secondary"], [class*="btn-outline"] {
  background: transparent !important;
  color: #0A0A0A !important;
  border: 2px solid #FEB503 !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
}

/* ── 8. Colored gradients and accents → yellow monochrome ── */
[style*="linear-gradient"], [style*="radial-gradient"] {
  /* leave inline gradients alone — they may be layout-critical */
}
.gradient-text, [class*="gradient-text"] {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #FEB503 !important;
  -webkit-text-fill-color: #FEB503 !important;
}

/* ── 9. Cards and features: unified soft-paper style ── */
.card, .feature, .service-card, .use-case-card,
[class*="feature-card"], [class*="service"] {
  border-radius: 8px;
  transition: transform 0.3s var(--koj-ease), box-shadow 0.3s;
}
.card h3, .feature h3, .service-card h3 {
  font-family: 'Newsreader', Georgia, serif !important;
  font-style: italic;
  font-size: 22px !important;
  line-height: 1.2 !important;
  color: #0A0A0A !important;
}

/* Kill colored card icon backgrounds (blue, orange, purple) */
.card .icon, .feature .icon, [class*="feature-icon"] {
  color: #FEB503 !important;
}
.card .icon[style*="background"], [class*="icon-wrap"] {
  background: rgba(254, 181, 3, 0.1) !important;
  color: #FEB503 !important;
}

/* ── 10. Links and inline accents ── */
a { color: inherit; }
a.text-link, a.link-accent, .link-primary {
  color: #FEB503 !important;
  border-bottom: 1.5px solid rgba(254, 181, 3, 0.4) !important;
}

/* Any element with color set to legacy accent → yellow */
[style*="color: #0078D4"], [style*="color:#0078D4"],
[style*="color: #FF7A59"], [style*="color:#FF7A59"],
[style*="color: #FF9900"], [style*="color:#FF9900"],
[style*="color: #714B67"], [style*="color:#714B67"],
[style*="color: #6161FF"], [style*="color:#6161FF"],
[style*="color: #7B68EE"], [style*="color:#7B68EE"],
[style*="color: #0066cc"], [style*="color:#0066cc"] {
  color: #FEB503 !important;
}

/* ── 11. Footer: unified black + yellow mark ── */
footer, .footer {
  background: #0A0A0A !important;
  color: #C4C4C4 !important;
}
footer a, .footer a { color: #C4C4C4 !important; transition: color 0.2s; }
footer a:hover, .footer a:hover { color: #FEB503 !important; }
footer h4, footer h5, .footer h4, .footer h5 {
  color: #FFF !important;
  font-family: Arial, sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ── 12. Testimonials / stats sections: yellow accents ── */
.stat-number, .stat-value, [class*="stat-num"], .metric-number {
  font-family: 'Newsreader', Georgia, serif !important;
  font-style: italic !important;
  color: #FEB503 !important;
  font-weight: 400 !important;
}
.stat-label, [class*="stat-lbl"], .metric-label {
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: #6B6B6B !important;
  font-weight: 700 !important;
}

/* ── 13. Section separators ── */
section {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
section.hero, section:first-of-type {
  border-top: none !important;
}

/* ── 14. Common icons and pills ── */
i.fas, i.far, i.fab {
  color: inherit;
}
.pill, .chip, [class*="pill-"] {
  background: rgba(254, 181, 3, 0.1) !important;
  color: #FEB503 !important;
  border: 1px solid rgba(254, 181, 3, 0.3) !important;
  border-radius: 3px !important;
  padding: 4px 10px !important;
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ── 15. Sub-brand marks (BI, HubSpot, AWS logos rendered inline) ── */
.brand-logo, .service-logo, [class*="logo-icon"] {
  filter: grayscale(1) contrast(0.9);
  opacity: 0.6;
}

/* ── 16. Bottom KOJ mark strip (signal these are part of new system) ── */
body::after {
  content: "◼  KOJ CONSULTING  ·  DATA-DRIVEN DECISIONS";
  display: block;
  padding: 16px 40px;
  background: #0A0A0A;
  color: #FEB503;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  border-top: 6px solid #FEB503;
}

@media (max-width: 720px) {
  body::after { padding: 14px 20px; font-size: 9px; letter-spacing: 0.22em; }
  h1 { font-size: 38px !important; }
  h2 { font-size: 28px !important; }
  .hero, section.hero { padding: 60px 24px !important; }
}