/*
Theme Name: Dev Academy
Theme URI: https://devacademy.tech
Author: Dev Academy Team
Author URI: https://devacademy.tech
Description: State-of-the-art WordPress Full Site Editing (FSE) theme for technical blogs, software architecture, and interview prep. Minimalist light IDE aesthetic with Coding Yellow highlights, Obsidian Black frames, and JetBrains Mono typography.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dev-academy
Tags: block-theme, full-site-editing, one-column, grid-layout, custom-colors, custom-menu, featured-images, sticky-post, theme-options, translation-ready

------------------------------------------------------------------
DESIGN SYSTEM & VARIABLE DEFINITIONS
------------------------------------------------------------------
*/

:root {
  /* Color Palette - Light Minimalist Coding System */
  --dev-yellow-primary: #EAB308;
  --dev-yellow-accent: #FACC15;
  --dev-yellow-glow: rgba(234, 179, 8, 0.25);
  --dev-yellow-light: #FEF9C3;
  
  --dev-obsidian: #0F172A;
  --dev-obsidian-dark: #18181B;
  --dev-obsidian-light: #334155;
  
  --dev-canvas: #FAFAFA;
  --dev-canvas-alt: #F8FAFC;
  --dev-surface: #FFFFFF;
  --dev-surface-shade: #F1F5F9;
  
  --dev-border-slate: #E2E8F0;
  --dev-border-dark: #CBD5E1;
  
  /* Text Colors */
  --dev-text-heading: #0F172A;
  --dev-text-body: #334155;
  --dev-text-muted: #64748B;
  --dev-text-light: #94A3B8;
  
  /* Syntax Highlighting */
  --dev-syntax-blue: #0284C7;
  --dev-syntax-green: #16A34A;
  --dev-syntax-amber: #D97706;
  --dev-syntax-purple: #7C3AED;
  --dev-syntax-red: #EF4444;
  
  /* Typography */
  --dev-font-mono: 'JetBrains Mono', monospace;
  --dev-font-ui: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Shadows & Radius */
  --dev-radius: 8px;
  --dev-radius-sm: 4px;
  --dev-radius-lg: 12px;
  --dev-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --dev-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --dev-shadow-glow: 0 10px 25px -5px rgba(234, 179, 8, 0.25);
  --dev-shadow-hover: 0 12px 28px -6px rgba(15, 23, 42, 0.12);
}

/* Base Canvas & Background Overlay */
body {
  background-color: var(--dev-canvas);
  color: var(--dev-text-body);
  font-family: var(--dev-font-ui);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dot-Matrix Grid Canvas Class */
.dev-dot-grid {
  background-color: var(--dev-canvas);
  background-image: radial-gradient(var(--dev-border-slate) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Headings Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--dev-text-heading);
  font-family: var(--dev-font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0;
}

code, kbd, samp, pre {
  font-family: var(--dev-font-mono);
}

/* Zero-Comma Category Badges System */
.wp-block-post-terms,
.dev-post-terms {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 12px;
}

.wp-block-post-terms .wp-block-post-terms__separator {
  display: none !important;
}

.wp-block-post-terms a,
.dev-badge-yellow,
.dev-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dev-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: var(--dev-yellow-accent);
  color: var(--dev-obsidian-dark) !important;
  border: 1px solid var(--dev-yellow-primary);
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.wp-block-post-terms a:hover,
.dev-badge-yellow:hover,
.dev-badge:hover {
  background-color: var(--dev-yellow-primary);
  transform: translateY(-1px);
  box-shadow: var(--dev-shadow-sm);
}

.dev-badge-slate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dev-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
  background-color: var(--dev-surface-shade);
  color: var(--dev-obsidian-dark) !important;
  border: 1px solid var(--dev-border-slate);
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   IDE WINDOW CARD & TERMINAL AESTHETICS
------------------------------------------------------------------ */

.dev-ide-window {
  background: var(--dev-surface);
  border: 1px solid var(--dev-border-slate);
  border-radius: var(--dev-radius);
  overflow: hidden;
  box-shadow: var(--dev-shadow-sm);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.dev-shape-interactive {
  height: auto !important;
}

.dev-ide-window:hover {
  transform: translateY(-4px);
  border-color: var(--dev-yellow-primary);
  box-shadow: var(--dev-shadow-glow);
}

.dev-ide-titlebar {
  background: var(--dev-surface-shade);
  border-bottom: 1px solid var(--dev-border-slate);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  flex-shrink: 0;
}

.dev-ide-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dev-ide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dev-ide-dot.red { background-color: #FF5F56; border: 1px solid #E0443E; }
.dev-ide-dot.yellow { background-color: #FFBD2E; border: 1px solid #DEA123; }
.dev-ide-dot.green { background-color: #27C93F; border: 1px solid #1AAB29; }

.dev-ide-tab {
  font-family: var(--dev-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dev-obsidian-light);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--dev-surface);
  padding: 3px 10px;
  border-radius: 4px 4px 0 0;
  border: 1px solid var(--dev-border-slate);
  border-bottom: none;
}

.dev-ide-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Grid & Query Loop Equal-Height Card Enforcements */
.wp-block-post-template {
  display: grid !important;
  align-items: stretch !important;
}

.wp-block-post-template > li,
.wp-block-post-template > div {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.wp-block-post-template .dev-ide-window,
.dev-topic-grid .dev-ide-window {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

.dev-card-footer {
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid var(--dev-border-slate);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* IDE Line Numbers Margin */
.dev-ide-with-lines {
  display: flex;
  font-family: var(--dev-font-mono);
  font-size: 0.875rem;
}

.dev-ide-lines-margin {
  padding: 16px 12px 16px 16px;
  background: var(--dev-surface-shade);
  border-right: 1px solid var(--dev-border-slate);
  color: var(--dev-text-light);
  text-align: right;
  user-select: none;
}

.dev-ide-code-content {
  padding: 16px 20px;
  flex: 1;
  overflow-x: auto;
}

/* Interview Q&A Showcase Special Card (5px Yellow Left Border & 32px Inner Padding) */
.dev-qa-card {
  border-left: 5px solid var(--dev-yellow-primary) !important;
  padding-left: 32px !important;
  background: var(--dev-surface);
  border-radius: var(--dev-radius);
  border-top: 1px solid var(--dev-border-slate);
  border-right: 1px solid var(--dev-border-slate);
  border-bottom: 1px solid var(--dev-border-slate);
  box-shadow: var(--dev-shadow-sm);
  transition: all 0.25s ease;
}

.dev-qa-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dev-shadow-glow);
}

/* Buttons System */
.dev-btn-primary {
  background-color: var(--dev-obsidian-dark);
  color: #FFFFFF !important;
  font-family: var(--dev-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--dev-obsidian-dark);
  transition: all 0.2s ease;
  cursor: pointer;
}

.dev-btn-primary:hover {
  background-color: var(--dev-yellow-primary);
  border-color: var(--dev-yellow-primary);
  color: var(--dev-obsidian-dark) !important;
  box-shadow: var(--dev-shadow-glow);
}

.dev-btn-secondary {
  background-color: transparent;
  color: var(--dev-obsidian-dark) !important;
  font-family: var(--dev-font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--dev-obsidian-dark);
  transition: all 0.2s ease;
  cursor: pointer;
}

.dev-btn-secondary:hover {
  background-color: var(--dev-surface-shade);
  transform: translateY(-1px);
}

/* Reading Progress Bar (Top IDE Execution Bar) */
#dev-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: var(--dev-yellow-primary);
  z-index: 99999;
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px var(--dev-yellow-accent);
}

/* Command Palette Modal Mockup */
.dev-cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dev-cmd-palette-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.dev-cmd-palette-box {
  width: 100%;
  max-width: 640px;
  background: var(--dev-surface);
  border: 1px solid var(--dev-border-slate);
  border-radius: var(--dev-radius-lg);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}

/* Floating interactive parallax code tabs */
.dev-shape-interactive {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Responsive Container max-width */
.dev-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}