/*
 * terminal.css — joshuasopuru.com global terminal dark theme
 * Applied to every page via <link> injection.
 * JetBrains Mono for headings/UI • Inter for body copy
 */

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

/* ──────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  --t-bg:        #0b0b0b;
  --t-bg2:       #111111;
  --t-bg3:       #181818;
  --t-bg4:       #1e1e1e;
  --t-text:      #e0e0e0;
  --t-muted:     #666666;
  --t-muted2:    #444444;
  --t-border:    #242424;
  --t-border2:   #1a1a1a;
  --t-red:       #dc2626;
  --t-red-dim:   rgba(220,38,38,0.15);
  --t-green:     #4ade80;
  --t-green-dim: rgba(74,222,128,0.12);
  --t-amber:     #f59e0b;
  --t-white:     #ffffff;
  --t-mono:      'JetBrains Mono', 'Courier New', monospace;
  --t-sans:      'Inter', sans-serif;
}

/* ──────────────────────────────────────────────────────────────
   BASE
   ────────────────────────────────────────────────────────────── */
html {
  background: var(--t-bg) !important;
}

body {
  background: var(--t-bg) !important;
  color: var(--t-text) !important;
  font-family: var(--t-sans) !important;
  line-height: 1.7 !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--t-bg2); }
::-webkit-scrollbar-thumb { background: var(--t-border); }
::-webkit-scrollbar-thumb:hover { background: #333; }

/* Selection */
::selection { background: rgba(220,38,38,0.35); color: #fff; }

/* ──────────────────────────────────────────────────────────────
   TYPOGRAPHY — JetBrains Mono for all headings + UI
   ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--t-mono) !important;
  font-weight: 700 !important;
  color: var(--t-white) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.15 !important;
}

/* Gradient text override — just solid red */
.gradient-text,
[class*="gradient-text"] {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--t-red) !important;
  color: var(--t-red) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION LABELS — terminal left-bar style
   ────────────────────────────────────────────────────────────── */
.label {
  font-family: var(--t-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--t-muted) !important;
  background: transparent !important;
  border: none !important;
  border-left: 2px solid var(--t-red) !important;
  border-radius: 0 !important;
  padding: 0 10px !important;
  display: inline-block !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

/* ──────────────────────────────────────────────────────────────
   NAVIGATION
   ────────────────────────────────────────────────────────────── */
nav,
.topbar,
.portal-header .site-name {
  font-family: var(--t-mono) !important;
}

nav {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
}

nav.scrolled {
  background: rgba(11,11,11,0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--t-border) !important;
}

.nav-logo,
.logo {
  font-family: var(--t-mono) !important;
  font-weight: 800 !important;
  color: var(--t-white) !important;
  letter-spacing: -1px !important;
}

.nav-logo span,
.logo span {
  color: var(--t-red) !important;
}

.nav-links a {
  font-family: var(--t-mono) !important;
  font-size: 13px !important;
  color: var(--t-muted) !important;
}

.nav-links a:hover {
  color: var(--t-white) !important;
}

.hamburger span {
  background: var(--t-text) !important;
}

/* ──────────────────────────────────────────────────────────────
   BUTTONS — solid, rectangular, monospace
   ────────────────────────────────────────────────────────────── */
.btn,
.btn-cyan,
.btn-gold,
.btn-outline,
.submit-btn,
.submit-btn.gold,
button[type="submit"],
.prog-cta,
a.btn,
input[type="submit"] {
  font-family: var(--t-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-transform: none !important;
}

.btn-gold,
.submit-btn.gold {
  background: var(--t-red) !important;
  color: #fff !important;
}

.btn-gold:hover,
.submit-btn.gold:hover {
  background: #b91c1c !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-outline {
  background: transparent !important;
  border: 1px solid var(--t-border) !important;
  color: var(--t-text) !important;
}

.btn-outline:hover {
  border-color: var(--t-red) !important;
  color: var(--t-white) !important;
  background: var(--t-red-dim) !important;
  transform: none !important;
}

.btn-cyan {
  background: var(--t-red) !important;
  color: #fff !important;
}

.btn-cyan:hover {
  background: #b91c1c !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ──────────────────────────────────────────────────────────────
   HERO
   ────────────────────────────────────────────────────────────── */
.hero,
.hero-bg {
  background: var(--t-bg) !important;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

/* Kill all floating badges / status cards — pure AI tells */
.tech-badge,
.tb-react, .tb-python, .tb-ai, .tb-sec,
.hero-badge,
.floating-card,
.corner-cut {
  display: none !important;
}

.hero-image-frame {
  transform: none !important;
}

.hero-image-frame:hover {
  transform: none !important;
}

.hero-image-frame::before {
  background: var(--t-red) !important;
  filter: none !important;
  opacity: 0.7 !important;
}

.hero h1 em,
.hero h1 span.red {
  color: var(--t-red) !important;
}

.hero-tag {
  font-family: var(--t-mono) !important;
  color: var(--t-red) !important;
}

.hero-tag::before {
  background: var(--t-red) !important;
}

.stat-num {
  font-family: var(--t-mono) !important;
  color: var(--t-white) !important;
}

.hero-stats {
  border-color: var(--t-border) !important;
}

/* ──────────────────────────────────────────────────────────────
   TRUST BAR
   ────────────────────────────────────────────────────────────── */
.trust-bar {
  background: var(--t-bg) !important;
  border-color: var(--t-border) !important;
}

/* ──────────────────────────────────────────────────────────────
   CARDS — flat, hard-bordered, no glow
   ────────────────────────────────────────────────────────────── */
.cred-item,
.metric-card,
.step-card,
.g-item,
.research-card,
.program-card,
.impact-card,
.mentor-card,
.auth-box,
.card,
.course-card,
[class*="-card"],
[class*="card-"] {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.cred-item:hover,
.metric-card:hover,
.step-card:hover,
.g-item:hover,
.research-card:hover,
.program-card:hover,
.impact-card:hover,
.mentor-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--t-red) !important;
}

.metric-card.featured {
  background: var(--t-bg2) !important;
  border-color: var(--t-red) !important;
}

/* Metric numbers — white, monospace */
.metric-num {
  font-family: var(--t-mono) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--t-white) !important;
  color: var(--t-white) !important;
}

/* ──────────────────────────────────────────────────────────────
   SECTION BACKGROUNDS — flat black, no gradients
   ────────────────────────────────────────────────────────────── */
.book-section,
.guarantee-bg,
.mentors-section,
.students-bg,
.programs-bg,
.blog-teaser-section {
  background: var(--t-bg2) !important;
}

/* Override ALL inline gradient backgrounds */
[style*="linear-gradient"] {
  /* We can't blanket override inline styles without JS,
     so key sections get explicit class overrides above */
}

.book-cover {
  background: var(--t-bg3) !important;
  border: 1px solid var(--t-border) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

.lifetime-card {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
}

.lifetime-card h3 {
  background: none !important;
  -webkit-text-fill-color: var(--t-white) !important;
  color: var(--t-white) !important;
}

/* ──────────────────────────────────────────────────────────────
   PROCESS
   ────────────────────────────────────────────────────────────── */
.step-num {
  font-family: var(--t-mono) !important;
  background: var(--t-red) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

.process-steps::before {
  background: var(--t-border) !important;
}

/* ──────────────────────────────────────────────────────────────
   CRED ICONS / ABOUT
   ────────────────────────────────────────────────────────────── */
.cred-icon {
  background: var(--t-red-dim) !important;
  border-radius: 4px !important;
}

/* ──────────────────────────────────────────────────────────────
   PROGRAMS
   ────────────────────────────────────────────────────────────── */
.program-card.featured {
  background: var(--t-bg2) !important;
  border-color: var(--t-red) !important;
}

.featured-badge {
  font-family: var(--t-mono) !important;
  background: var(--t-red) !important;
  color: #fff !important;
  border-radius: 4px !important;
}

.prog-duration {
  font-family: var(--t-mono) !important;
  background: var(--t-red-dim) !important;
  color: #ef4444 !important;
  border-radius: 4px !important;
}

.syllabus-list li::before { background: var(--t-red) !important; }

/* ──────────────────────────────────────────────────────────────
   RESEARCH / TAGS
   ────────────────────────────────────────────────────────────── */
.research-tag,
.tag-ai, .tag-sec, .tag-ml, .tag-net,
.course-badge,
[class*="tag-"],
[class*="-tag"] {
  font-family: var(--t-mono) !important;
  background: var(--t-bg3) !important;
  color: var(--t-muted) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
}

/* ──────────────────────────────────────────────────────────────
   MENTOR CARDS
   ────────────────────────────────────────────────────────────── */
.mentor-photo { border-color: var(--t-border) !important; }
.mentor-initials {
  background: var(--t-bg3) !important;
  border-color: var(--t-border) !important;
  color: var(--t-text) !important;
  font-family: var(--t-mono) !important;
}

/* ──────────────────────────────────────────────────────────────
   DIVIDER
   ────────────────────────────────────────────────────────────── */
.divider {
  background: var(--t-red) !important;
  border-radius: 0 !important;
  width: 24px !important;
  height: 2px !important;
}

/* ──────────────────────────────────────────────────────────────
   FORMS — terminal input style
   ────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea,
.fg input,
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--t-mono) !important;
  font-size: 13px !important;
  background: var(--t-bg3) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 4px !important;
  color: var(--t-text) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.fg input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--t-red) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.12) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--t-muted2) !important;
  font-family: var(--t-mono) !important;
}

label,
.fg label,
.form-group label {
  font-family: var(--t-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  color: var(--t-muted) !important;
}

/* ──────────────────────────────────────────────────────────────
   MODAL
   ────────────────────────────────────────────────────────────── */
.modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0,0,0,0.92) !important;
}

.modal {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.modal-title,
.auth-title {
  font-family: var(--t-mono) !important;
}

.modal-close {
  font-family: var(--t-mono) !important;
  background: var(--t-bg3) !important;
  border-color: var(--t-border) !important;
  border-radius: 4px !important;
}

/* ──────────────────────────────────────────────────────────────
   STUDENT PORTAL / AUTH PAGES
   ────────────────────────────────────────────────────────────── */
.portal-header h1,
.auth-title {
  font-family: var(--t-mono) !important;
}

.auth-box,
.card {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 6px !important;
}

/* Tab rows */
.tab-row,
.tabs {
  background: var(--t-bg3) !important;
  border-radius: 4px !important;
}

.tab-btn {
  font-family: var(--t-mono) !important;
  font-size: 12px !important;
  border-radius: 3px !important;
}

.tab-btn.active {
  background: var(--t-red-dim) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(220,38,38,0.3) !important;
}

/* Error / success alerts */
.error-box,
.alert-error {
  background: rgba(220,38,38,0.08) !important;
  border: 1px solid rgba(220,38,38,0.25) !important;
  color: #f87171 !important;
  border-radius: 4px !important;
  font-family: var(--t-mono) !important;
  font-size: 12px !important;
}

.alert-ok {
  background: var(--t-green-dim) !important;
  border: 1px solid rgba(74,222,128,0.25) !important;
  color: var(--t-green) !important;
  border-radius: 4px !important;
  font-family: var(--t-mono) !important;
}

/* ──────────────────────────────────────────────────────────────
   ENROLLMENT / QUICK-ENROLL PAGES
   ────────────────────────────────────────────────────────────── */
.course-card {
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 6px !important;
}

.course-header {
  background: var(--t-bg3) !important;
  border-color: var(--t-border) !important;
}

.price-usd {
  font-family: var(--t-mono) !important;
  color: var(--t-white) !important;
}

.price-box {
  background: var(--t-bg3) !important;
  border-color: var(--t-border) !important;
  border-radius: 4px !important;
}

/* ──────────────────────────────────────────────────────────────
   PROGRESS STEPS
   ────────────────────────────────────────────────────────────── */
.step-num,
.step.active .step-num {
  font-family: var(--t-mono) !important;
}

.step.active .step-num {
  background: var(--t-red) !important;
  color: #fff !important;
}

.step.done .step-num {
  background: var(--t-green) !important;
  color: #000 !important;
}

/* ──────────────────────────────────────────────────────────────
   ASSESSMENT PAGE
   ────────────────────────────────────────────────────────────── */
.opt-btn {
  font-family: var(--t-mono) !important;
  font-size: 13px !important;
  background: var(--t-bg2) !important;
  border: 1px solid var(--t-border) !important;
  border-radius: 4px !important;
  color: var(--t-text) !important;
}

.opt-btn:hover {
  border-color: var(--t-red) !important;
  background: var(--t-red-dim) !important;
}

.opt-btn.correct {
  border-color: var(--t-green) !important;
  background: var(--t-green-dim) !important;
  color: var(--t-green) !important;
}

.opt-btn.wrong {
  border-color: var(--t-red) !important;
  background: var(--t-red-dim) !important;
  color: #ef4444 !important;
}

/* ──────────────────────────────────────────────────────────────
   COURSES / BLOG PAGES
   ────────────────────────────────────────────────────────────── */
.course-title,
.post-title,
.blog-title {
  font-family: var(--t-mono) !important;
}

/* ──────────────────────────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────────────────────────── */
footer,
.footer,
[class*="footer"] {
  background: var(--t-bg2) !important;
  border-top: 1px solid var(--t-border) !important;
  font-family: var(--t-mono) !important;
  font-size: 12px !important;
}

footer a,
.footer a {
  font-family: var(--t-mono) !important;
}

/* ──────────────────────────────────────────────────────────────
   TERMINAL CURSOR BLINK — for main CTAs
   ────────────────────────────────────────────────────────────── */
@keyframes t-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.btn-gold::after,
.btn-cyan::after,
.submit-btn.gold::after {
  content: '_';
  display: inline-block;
  margin-left: 4px;
  animation: t-blink 1.1s step-end infinite;
  font-family: var(--t-mono);
}

/* ──────────────────────────────────────────────────────────────
   TERMINAL PROMPT LABELS for section headings
   ────────────────────────────────────────────────────────────── */
.t-prompt {
  font-family: var(--t-mono);
  font-size: 11px;
  color: var(--t-red);
  letter-spacing: 2px;
  display: block;
  margin-bottom: 8px;
}

.t-prompt::before {
  content: '$ ';
  color: var(--t-green);
}

/* ──────────────────────────────────────────────────────────────
   INLINE GRADIENT SECTION OVERRIDES
   ────────────────────────────────────────────────────────────── */
.assessment-cta-section {
  background: var(--t-bg2) !important;
  border-top: 1px solid var(--t-border) !important;
  border-bottom: 1px solid var(--t-border) !important;
}

section#subscribe {
  background: var(--t-bg) !important;
  border-top: 2px solid var(--t-red) !important;
  border-bottom: none !important;
}

/* ──────────────────────────────────────────────────────────────
   MOBILE RESPONSIVENESS — every breakpoint
   ────────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .hero-image-wrap { display: none !important; }
  .hero {
    min-height: auto !important;
    padding-top: 96px !important;
    padding-bottom: 60px !important;
  }
  .hero h1 { font-size: clamp(24px, 6vw, 48px) !important; }
  .hero p  { font-size: 15px !important; max-width: 100% !important; }
}

@media (max-width: 768px) {
  .about-grid          { grid-template-columns: 1fr !important; gap: 36px !important; }
  .about-visual        { display: none !important; }
  .guarantee-inner     { grid-template-columns: 1fr !important; gap: 36px !important; }
  .programs-grid       { grid-template-columns: 1fr !important; }
  .mentors-grid        { grid-template-columns: 1fr !important; }
  .impact-banner       { grid-template-columns: 1fr 1fr !important; }
  .process-steps       { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .process-steps::before { display: none !important; }
  .book-inner          { flex-direction: column !important; gap: 28px !important; }
  .book-cover          { width: 100% !important; max-width: 260px !important; }
  .research-grid       { grid-template-columns: 1fr !important; }
  .hero-stats          { flex-wrap: wrap !important; gap: 20px !important; }
  .trust-inner         { gap: 18px !important; }
  .form-row            { grid-template-columns: 1fr !important; gap: 0 !important; }
  .modal-top,
  .modal-body          { padding-left: 20px !important; padding-right: 20px !important; }
  .section             { padding: 60px 0 !important; }
  .page                { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .nav-links           { display: none; }
  .hamburger           { display: flex !important; }
  .section             { padding: 48px 0 !important; }
  .container           { padding: 0 16px !important; }
  .process-steps       { grid-template-columns: 1fr !important; }
  .impact-banner       { grid-template-columns: 1fr !important; }
  .hero h1             { font-size: 22px !important; line-height: 1.3 !important; }
  .hero p              { font-size: 14px !important; }
  .hero-buttons        { flex-direction: column !important; gap: 10px !important; }
  .btn                 { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; font-size: 12px !important; }
  .trust-inner         { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .hero-stats          { flex-direction: column !important; gap: 12px !important; }
  .stat-num            { font-size: 28px !important; }
  .course-header       { padding: 24px 20px !important; }
  .course-body         { padding: 20px !important; }
  .auth-box            { padding: 24px 20px !important; }
  .steps               { flex-wrap: wrap !important; gap: 8px !important; }
}