/* =========================================
   1. TYPOGRAPHY & GLOBAL OVERRIDES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&family=Silkscreen&display=swap');

:root {
  --md-text-font-family: 'Inter', sans-serif;
  --md-code-font-family: 'JetBrains Mono', monospace;
}

body, .md-typeset { font-family: var(--md-text-font-family) !important; }
code, kbd, pre, .md-typeset code, .md-typeset pre { font-family: var(--md-code-font-family) !important; }

/* Silkscreen for headers to keep that technical/digital aesthetic */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
  font-family: 'Silkscreen', cursive !important;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
  transition: color 0.3s ease;
}

/* =========================================
   2. GLOBAL TRANSITIONS (for dynamic switching)
   ========================================= */
/* All elements transition smoothly when toggling modes */
* {
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
}

/* =========================================
   3. LIGHT & DARK THEMES (Pastels & Neons for 3d-ulpin)
   ========================================= */
[data-md-color-scheme="default"] {
  /* LIGHT: Pure White & Pastel Green */
  --md-primary-fg-color: #a8e6cf; 
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #111827;
  --md-admonition-bg-color: #f8fcf8;
  --md-code-bg-color: #f8fcf8;
  
  --ulpin-accent: #a8e6cf;
  --ulpin-btn-text: #111827; /* Dark text for contrast on pastel */
  --ulpin-grid-glow: rgba(168, 230, 207, 0.4);
}

[data-md-color-scheme="slate"] {
  /* DARK: Pure Black & Neon Green */
  --md-primary-fg-color: #39ff14; 
  --md-default-bg-color: #000000;
  --md-default-fg-color: #f3f4f6;
  --md-admonition-bg-color: #0a0a0a;
  --md-code-bg-color: #0a0a0a;
  
  --ulpin-accent: #39ff14;
  --ulpin-btn-text: #000000;
  --ulpin-grid-glow: rgba(57, 255, 20, 0.4);
}

/* =========================================
   4. FLASHY BUTTONS & LINKS
   ========================================= */
.md-button { 
  font-family: var(--md-code-font-family) !important; 
  font-weight: 700; 
  border-radius: 8px !important; 
  transition: all 0.3s cubic-bezier(0.2, 1, 0.2, 1) !important;
}

.md-button--primary { 
  color: var(--ulpin-btn-text) !important; 
  background-color: var(--md-primary-fg-color); 
  border-color: var(--md-primary-fg-color); 
}

/* Neon Glow Effect strictly for Dark Mode (Slate) */
[data-md-color-scheme="slate"] .md-button--primary:hover {
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.6), 0 0 30px rgba(57, 255, 20, 0.2);
  transform: translateY(-2px);
}

/* Glowing text links in Dark Mode */
[data-md-color-scheme="slate"] .md-typeset a:not(.md-button) {
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

/* =========================================
   5. LAYOUT & CODE FIXES
   ========================================= */
.md-typeset pre > code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.md-typeset__table { width: 100% !important; min-width: 100% !important; }

/* =========================================
   6. SIMPLIFIED TECHNICAL NAVIGATION DOCK
   ========================================= */
/* Simple technical nav dock without complex dynamic islands or transitions */
.md-header { 
  background: transparent !important; 
  border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important; 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.md-tabs { 
  display: none !important; 
}
.md-sidebar--secondary { display: none !important; }
.md-main__inner {
  display: flex !important;
  justify-content: center !important;
  margin-top: 3rem;
}
.md-content { max-width: 1400px !important; width: 95% !important; }

/* =========================================
   7. ENHANCED HERO CLASS (Canvas Container)
   ========================================= */
.hero-3d {
  position: relative; 
  padding: 6rem 2rem; 
  margin-top: 0; 
  margin-bottom: 2rem;
  border-radius: 12px; 
  overflow: hidden; 
  border: 1px solid rgba(128, 128, 128, 0.2);
  background: var(--md-default-bg-color);
  text-align: center;
  transition: background-color 0.4s ease;
}

/* The content is elevated above the canvas */
.hero-3d > * { position: relative; z-index: 2; }

/* Hero title using Silkscreen typography */
.hero-title {
  font-size: 3.8rem !important; 
  line-height: 1.1; 
  color: var(--md-default-fg-color) !important; 
  font-family: 'Silkscreen', cursive;
  margin-bottom: 1.5rem;
  transition: color 0.4s ease;
}

/* Accent color text inside the title */
.hero-title .text-accent { color: var(--ulpin-accent) !important; }