/* ═══════════════════════════════════════
   KPICKLAY ACADEMY — Complete Brand Override
   academy.kpicklay.com
═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: #fafaf7 !important;
  color: #0a0a0a !important;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
  letter-spacing: -0.02em !important;
  color: #0a0a0a !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem) !important; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem) !important; }
h3 { font-size: clamp(1.2rem, 2vw, 1.75rem) !important; }

p, li, td, th, label, input, textarea, select, span {
  font-family: 'Inter', ui-sans-serif, sans-serif !important;
}

/* ── Kill ALL Kpicklay Academy green everywhere ── */
[style*="#4CAF50"], [style*="#4caf50"],
[style*="#3e8e41"], [style*="#3E8E41"],
[style*="#282A35"], [style*="#282a35"],
[style*="background-color:green"],
[style*="background-color: green"],
.w3-green, .w3-btn-green, .w3-border-green,
.w3-text-green, .w3-hover-green,
.w3-bar.w3-green, .topnav,
#main_navbar, .w3-sidebar.w3-bar-block {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* ── Navbar complete replacement ── */
.w3-bar, #topnav, .ws-bar, nav,
header, .navbar, .top-nav,
.w3-top, [class*="topnav"],
.w3-bar-block.w3-sidebar {
  background-color: #0a0a0a !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

.w3-bar a, .w3-bar-item, #topnav a,
nav a, header a, .navbar a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}

.w3-bar a:hover, .w3-bar-item:hover,
nav a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
  opacity: 1 !important;
}

/* ── Logo area ── */
.w3-bar-brand, .logo, #logo,
a.w3-bar-item[href="/"],
.w3-bar > a:first-child {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── Buttons ── */
.w3-btn, .w3-button,
button, [type="submit"], [type="button"],
[class*="w3-btn"], [class*="w3-button"],
input[type="submit"], input[type="button"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border: 1px solid #0a0a0a !important;
  border-radius: 6px !important;
  padding: 0.5rem 1.25rem !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

button:hover, .w3-btn:hover,
.w3-button:hover {
  opacity: 0.8 !important;
}

.w3-btn.w3-border, button.w3-border {
  background-color: transparent !important;
  color: #0a0a0a !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
}

/* ── Links ── */
a {
  color: #0a0a0a !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

a:hover { opacity: 0.6 !important; }

/* ── Code blocks & examples ── */
pre, code, .w3-code, .w3-codespan,
[class*="language-"], .example,
.w3-example {
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
  background: #f4f4f0 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  color: #0a0a0a !important;
}

.w3-example {
  border-left: 3px solid #0a0a0a !important;
  padding: 1.25rem !important;
  margin: 1.5rem 0 !important;
}

/* ── Tables ── */
table { border-collapse: collapse !important; width: 100% !important; }
th {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.75rem 1rem !important;
}
td {
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.9rem !important;
}
tr:hover td { background: rgba(0,0,0,0.02) !important; }

/* ── Sidebar ── */
.w3-sidebar, #mySidenav,
[class*="sidebar"] {
  background: #fafaf7 !important;
  border-right: 1px solid rgba(0,0,0,0.08) !important;
}

.w3-sidebar a, #mySidenav a {
  color: #0a0a0a !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  border-radius: 4px !important;
  padding: 0.4rem 0.75rem !important;
}

.w3-sidebar a:hover, #mySidenav a:hover,
.w3-sidebar a.active {
  background: rgba(0,0,0,0.06) !important;
  color: #0a0a0a !important;
}

/* ── Cards / panels ── */
.w3-card, .w3-card-4, .w3-panel,
[class*="w3-card"] {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* ── Notes / info boxes ── */
.w3-pale-green, .w3-pale-yellow,
.w3-pale-blue, .w3-pale-red,
.w3-light-grey, .w3-pale-grey {
  background: #f4f4f0 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 6px !important;
  color: #0a0a0a !important;
}

/* ── Footer complete replacement ── */
footer, .w3-footer, #footer,
[class*="footer"], .bottom-nav {
  background-color: #0a0a0a !important;
  color: rgba(255,255,255,0.7) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 3rem 1.5rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.875rem !important;
}

footer a, .w3-footer a, #footer a {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
}

footer a:hover { color: #ffffff !important; opacity: 1 !important; }

/* ── Remove Kpicklay Academy-specific UI junk ── */
.w3-btn-group > .w3-btn:not(:last-child),
.ws-grey, .kpicklay-academy-ads,
[class*="w3-animate-"],
.w3-ul { list-style: none !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #fafaf7; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }

/* ── Selection ── */
::selection { background: #0a0a0a; color: #ffffff; }