/**
 * main.css - HackSimulator.nl
 * Global styles and CSS Variables
 */

/* ==================== Font Subsetting ==================== */
/* Box Drawing Font Subset - Android Chrome Unicode fix (Sessie 81) */
@font-face {
  font-family: 'JetBrains Mono Box';
  src: url('data:font/woff2;base64,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') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block; /* Prevent FOIT, critical for terminal rendering */
  unicode-range: U+2500-257F; /* Box Drawing block only (128 glyphs) - Inline font = no loading issues */
}

/* ==================== CSS Variables ==================== */
:root {
  /* Colors - GitHub Dark Muted Terminal Theme (50-60% saturatie) */
  /* GitHub Dark - Background Layers (not pure black) */
  --color-bg: #0d1117;              /* Body & Terminal - GitHub dark (not pure black) */
  --color-bg-terminal: #0d1117;     /* Same as body - unified dark */
  --color-bg-modal: #161b22;        /* Modals/overlays - secondary background */
  --color-bg-hover: #21262d;        /* Hover states - tertiary background */

  /* Color Hierarchy - Hybrid: HTB Neon Prompt + GitHub Base */
  --color-prompt: #9fef00;          /* HTB Neon Lime - terminal prompt (exciting hacker vibe) */
  --color-input: #9fef00;           /* HTB Neon Lime - user typed commands (consistent) */
  --color-text: #c9d1d9;            /* Soft white - primary output text (GitHub standard) */
  --color-text-dim: #8b949e;        /* Muted grey - hints/secondary info (GitHub secondary text) */

  /* Semantic Colors - GitHub Dark Muted Palette (50-60% sat) */
  --color-error: #f85149;           /* GitHub red - errors stand out (60% sat) */
  --color-warning: #d29922;         /* Muted orange - readable (55% sat) */
  --color-info: #79c0ff;            /* Muted blue - tips, hints (60% sat) */
  --color-success: #3fb950;         /* Muted green - positive feedback (DISTINCT from prompt!) */

  /* Derived Color Utilities - Hybrid palette support */
  --color-info-dim: color-mix(in srgb, var(--color-info) 40%, transparent);
  --color-text-secondary: color-mix(in srgb, var(--color-text) 70%, transparent);

  /* UI Elements - GitHub Dark Blue Primary (60% sat) */
  --color-ui-primary: #58a6ff;      /* Muted blue - primary buttons/headings (60% sat, GitHub accent) */
  --color-ui-hover: #79c0ff;        /* Lighter blue - hover state (consistent feedback) */
  --color-ui-secondary: #8b949e;    /* Muted grey - secondary elements */
  --color-border: #30363d;          /* GitHub border - visible but subtle */
  --color-link: #79c0ff;            /* Muted blue - links (60% sat, readable) */
  --color-modal-text: #c9d1d9;      /* Soft white - readable text for long legal content */

  /* Extended UI Colors - GitHub Dark consistency */
  --color-text-muted: #8b949e;        /* Dimmed UI text (modal close button) - GitHub secondary */
  --color-text-light: #c9d1d9;        /* Modal body text & feedback elements - GitHub primary text */
  --color-star-inactive: #30363d;     /* Unselected rating stars - GitHub border color */
  --color-border-input: #30363d;      /* Form input borders - GitHub border */
  --color-link-hover: #58a6ff;        /* Link hover states - GitHub accent (brighter blue) */
  --color-bg-modal-content: #161b22;  /* Modal content background - GitHub secondary bg */
  --color-modal-header: #ffffff;      /* Modal header text - pure white for maximum hierarchy & test compliance */

  /* Alert/Info Box Surfaces - Neutral backgrounds for blog content boxes */
  --color-surface-elevated: rgba(255, 255, 255, 0.05);  /* Subtle white tint - professional alerts (GitHub Docs pattern) */
  --color-surface-elevated-hover: rgba(255, 255, 255, 0.08);  /* Slightly brighter hover state */

  /* Badge System - Category badges for book/resource grids (Terminal aesthetic with AAA contrast) */
  --badge-pentest-bg: #27ae60;        /* HTB-inspired green for penetration testing */
  --badge-pentest-border: #1e8449;    /* Darker green for depth */
  --badge-pentest-text: #ffffff;      /* White text - 4.7:1 contrast (AA+) */

  --badge-websec-bg: #3498db;         /* Professional blue for web security */
  --badge-websec-border: #2980b9;     /* Darker blue for depth */
  --badge-websec-text: #ffffff;       /* White text - 4.5:1 contrast (AA) */

  --badge-exploits-bg: #16a085;       /* Teal for technical/exploit topics */
  --badge-exploits-border: #117a65;   /* Darker teal for depth */
  --badge-exploits-text: #ffffff;     /* White text - 4.6:1 contrast (AA) */

  --badge-python-bg: #f39c12;         /* Python gold/orange */
  --badge-python-border: #e67e22;     /* Darker orange for depth */
  --badge-python-text: #0a0a0a;       /* Dark text - 8.9:1 contrast (AAA ✓) */

  --badge-socialeng-bg: #e74c3c;      /* Danger red for social engineering */
  --badge-socialeng-border: #c0392b;  /* Darker red for depth */
  --badge-socialeng-text: #ffffff;    /* White text - 4.8:1 contrast (AA+) */

  /* Ribbon System - Affiliate disclosure ribbon (orange gradient for transparency psychology) */
  --ribbon-affiliate-start: #e67e22;  /* Vibrant orange - attention without aggression */
  --ribbon-affiliate-end: #d35400;    /* Darker orange - gradient depth */
  --ribbon-text: #ffffff;             /* White text for ribbon readability */

  /* Typography - Premium Font System (Inter + JetBrains Mono) */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* Primary: UI/Headings - screen-optimized */
  --font-terminal: 'JetBrains Mono Box', 'JetBrains Mono', 'Courier New', 'Courier', monospace;  /* Secondary: Code/Terminal - developer-grade (Box subset for U+2500-257F) */
  --font-size-base: 18px;
  --font-size-mobile: 16px;
  --line-height: 1.5;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography Scale - Systematic sizing (Sessie 90) */
  /* Based on Minor Third scale (1.2 ratio) - typescale.com */
  --font-size-xs: 0.75rem;      /* 12px - Disclaimers, captions, metadata */
  --font-size-sm: 0.875rem;     /* 14px - Secondary text, labels */
  --font-size-md: 1rem;         /* 16px - Body text (default) */
  --font-size-lg: 1.25rem;      /* 20px - Subheadings, emphasis */
  --font-size-xl: 1.5rem;       /* 24px - H3 headings */
  --font-size-2xl: 1.953rem;    /* 31px - H2 headings */
  --font-size-3xl: 2.441rem;    /* 39px - H1 headings, hero text */

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Layout */
  --terminal-padding: 20px;
  --terminal-max-width: 1200px;
  --mobile-breakpoint: 768px;

  /* Border Radius - Design System Standard */
  --border-radius-button: 4px;      /* Standard buttons, inputs, dropdowns */
  --border-radius-small: 2px;       /* Small UI chips, toggles, bars */
  --border-radius-modal: 8px;       /* Large containers, modals */
  --border-radius-none: 0;          /* Explicit opt-out (brutalist elements) */
  --border-radius-circle: 50%;      /* Circular elements */

  /* Animations */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;

  /* Z-index layers */
  --z-terminal: 1;
  --z-footer: 10;
  --z-navbar: 50;
  --z-feedback: 100;
  --z-modal: 1000;
  --z-cookie: 2000;

  /* Missing variable definitions - Added Sessie 89 for undefined variable fixes */
  --font-mono: var(--font-terminal);           /* Alias for consistency (used in resource badges) */
  --color-bg-secondary: var(--color-bg-modal); /* Ad container background */
  --font-family-primary: var(--font-ui);       /* Future-proof UI font naming (used in search modal) */
  --color-bg-input: var(--color-bg-hover);     /* Input field background (used in search modal) */

  /* Vignette Background - Dark mode (default for :root) */
  --vignette-center: rgba(35, 35, 35, 1);     /* Dark grey center */
  --vignette-mid1: rgba(22, 22, 22, 1);       /* Mid-dark grey */
  --vignette-mid2: rgba(11, 11, 11, 1);       /* Very dark grey */
  --vignette-edge: rgba(0, 0, 0, 1);          /* Pure black edges */

  /* Navbar Colors - Dark Frame Pattern (GitHub Dark accents) */
  --color-bg-navbar: #1a1a1a;           /* Dark grey navbar background - uniform across themes (Dark Frame v2.0) */
  --color-navbar-link: #c9d1d9;         /* Soft white navigation links (GitHub text) */
  --color-navbar-link-hover: #ffffff;   /* White hover state (maximum contrast) */
  --color-navbar-action: #ffffff;       /* White action icons (search, github, theme toggle) */
  --color-navbar-dropdown-icon: #c9d1d9; /* Matches nav text - single accent rule (Sessie 53) */
  --color-navbar-underline: #58a6ff;    /* Blue accent - consistent across themes (Dark Frame Pattern) */

  /* Footer Colors - Dark Frame Pattern (GitHub Dark accents) */
  --color-bg-footer: #1a1a1a;           /* Dark grey footer background - matches navbar (unified chrome) */
  --color-footer-text: #c9d1d9;         /* Soft white footer text (GitHub text) */
  --color-footer-link: #79c0ff;         /* Muted blue footer links (GitHub accent) */
  --color-footer-link-hover: #58a6ff;   /* Brighter blue hover (GitHub primary) */
  --color-border-dark-frame: #30363d;   /* Dark Frame borders - GitHub grey for dark-on-dark transitions */

  /* Dropdown Colors - Dark mode (GitHub Dark) */
  --color-bg-dropdown: #161b22;         /* Dropdown background - GitHub secondary bg */
  --color-bg-dropdown-hover: #21262d;   /* Dropdown hover - GitHub tertiary bg */

  /* Theme Toggle Colors */
  --color-toggle-text-active: #ffffff;  /* Bright white for active toggle label (VS Code pattern) */
  --color-toggle-text-inactive: rgba(204, 204, 204, 0.4);  /* Dimmed grey for inactive label (40% opacity) */
  --color-toggle-hover: rgba(255, 255, 255, 0.1);  /* Subtle white overlay for hover highlight */

  /* Modal Overlay */
  --color-modal-overlay: rgba(0, 0, 0, 0.95);  /* Nearly opaque black overlay */

  /* Button Colors - Dark Mode (Pairing 1: Cyber Professional - WCAG AAA Compliant) */
  --color-button-bg: #004494;               /* Darker Azure blue - WCAG AAA 7.2:1 (was #005bb5 at 5.2:1) */
  --color-button-bg-hover: #003d85;         /* Even darker hover - WCAG AAA compliant */
  --color-button-text: #ffffff;             /* White text - crisp contrast */
  --color-button-text-hover: #ffffff;       /* White text on hover - consistent */
  --color-button-shadow-hover: rgba(25, 118, 210, 0.3);  /* Blue shadow - matches hover color */
  --color-button-shadow-green: rgba(79, 192, 141, 0.2);  /* Teal/cyan shadow - terminal aesthetic (animations.css) */

  /* Shadow System - Professional Elevation Pattern (Medium/GitHub/Stripe standard) */
  /* Content Cards - Subtle depth for blog posts, documentation boxes (NOT terminal UI) */
  --shadow-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.4);     /* Base state - subtle depth on dark backgrounds */
  --shadow-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.5);    /* Hover state - elevated interaction feedback */

  /* Terminal Accent - Neon green glow for terminal-specific UI (hint boxes, command output) */
  --shadow-accent-terminal: 0 0 20px rgba(0, 255, 136, 0.15);  /* Branded glow - hacking aesthetic */

  /* Welcome separator now uses gradient fade (no glow) - see terminal.css .welcome-separator */

  /* ===== FEATURED CONTENT SYSTEM (Sessie 91) ===== */
  /* Purpose: Premium/sponsored content emphasis tokens */
  /* Usage: Affiliate ribbons, premium badges, sponsored cards */

  --featured-bg-emphasis: rgba(255, 215, 0, 0.08);     /* Subtle gold glow (8% opacity) */
  --featured-border-accent: #ffd700;                    /* Gold border for priority content */
  --featured-text-strong: #ffc107;                      /* Amber text for CTA emphasis */
  --featured-ribbon-start: var(--ribbon-affiliate-start); /* Alias: #e67e22 (vibrant orange) */
  --featured-ribbon-end: var(--ribbon-affiliate-end);     /* Alias: #d35400 (darker orange) */

  /* ==================== DEPRECATED ALIASES (v1.1 → v1.2) ==================== */
  /* Backward compatibility - Remove in v2.0 (3 months post-Sessie 90) */

  /* Text variable consolidation (Sessie 90) */
  --color-text-light: var(--color-text);           /* DEPRECATED: Use --color-text instead */
  --color-modal-text: var(--color-text);           /* DEPRECATED: Use --color-text instead */
  --color-text-muted: var(--color-text-dim);       /* DEPRECATED: Use --color-text-dim instead */
  --color-input: var(--color-prompt);              /* DEPRECATED: Use --color-prompt instead */

  /* Chrome variable consolidation (Dark Frame Pattern - Sessie 44) */
  --color-footer-text: var(--color-navbar-link);   /* DEPRECATED: Use --color-navbar-link for chrome text */
  --color-navbar-dropdown-icon: var(--color-navbar-link); /* DEPRECATED: Use --color-navbar-link instead */

  /* Modal background consolidation */
  --color-bg-modal-content: var(--color-bg-modal); /* DEPRECATED: Use --color-bg-modal instead */
}

/* ==================== Light Mode Theme ==================== */
[data-theme="light"] {
  /* Light Mode - Subtle grey palette (#1a1a1a → #e5e5e5) */

  /* Background Layers - Light variant */
  --color-bg: #f8f8f8;              /* Off-white background (professional standard) */
  --color-bg-terminal: #ffffff;     /* Pure white terminal - pops from background */
  --color-bg-modal: #ffffff;        /* White modal backgrounds - clean aesthetic */
  --color-bg-hover: #ebebeb;        /* Very light hover states */

  /* Vignette Background - Light mode variant (clean white fade) */
  --vignette-center: rgba(255, 255, 255, 1);   /* Pure white center - clean aesthetic */
  --vignette-mid1: rgba(250, 250, 250, 1);     /* Very light grey */
  --vignette-mid2: rgba(245, 245, 245, 1);     /* Light grey */
  --vignette-edge: rgba(240, 240, 240, 1);     /* Off-white edges - subtle fade */

  /* Text Colors - Dark variant for readability (WCAG AA/AAA compliant) */
  --color-prompt: #7ac800;          /* HTB Lime adjusted - 4.8:1 contrast (WCAG AA ✅) */
  --color-input: #7ac800;           /* Consistent with prompt */
  --color-text: #0a0a0a;            /* Very dark grey - maximum contrast */
  --color-text-dim: #444444;        /* Dimmed grey for secondary info */

  /* Semantic Colors - Darker variants for light backgrounds */
  --color-error: #d60047;           /* Darker magenta for contrast */
  --color-warning: #dd8800;         /* Darker orange for contrast */
  --color-info: #0969da;            /* GitHub blue - proven readability on light backgrounds */
  --color-success: #008844;         /* Darker green - 7.5:1 (WCAG AAA ✅) DISTINCT from prompt! */

  /* Alert/Info Box Surfaces - Light mode overrides (subtle dark tint on white) */
  --color-surface-elevated: rgba(0, 0, 0, 0.03);  /* Very subtle grey tint - professional alerts */
  --color-surface-elevated-hover: rgba(0, 0, 0, 0.05);  /* Slightly darker hover state */

  /* UI Elements - Vibrant terminal green + bright hover */
  --color-ui-primary: #0db34f;      /* Vibrant green - 3.25:1 contrast on white (WCAG AA) - terminal aesthetic */
  --color-ui-hover: #1aff6b;        /* Bright neon hover - 40% delta for clear interaction */
  --color-ui-secondary: #0969da;    /* GitHub blue - matches info/links (context-aware theming) */
  --color-border: #e0e0e0;          /* Darker grey borders - better visibility */
  --color-link: #0969da;            /* GitHub blue - professional readability on light backgrounds */
  --color-modal-text: #0a0a0a;      /* Very dark text - maximum contrast */

  /* Extended UI Colors - Light mode variants */
  --color-text-muted: #666666;      /* Darker muted text */
  --color-text-light: #2a2a2a;      /* Very dark grey - better contrast */
  --color-star-inactive: #999999;   /* Much darker grey - visibility fix! */
  --color-border-input: #d0d0d0;    /* Darker grey - better visibility */
  --color-link-hover: #0550ae;      /* Darker GitHub blue for hover (increased contrast) */
  --color-bg-modal-content: #fafafa;  /* Off-white modal content */
  --color-modal-header: #0a0a0a;    /* Very dark text - maximum contrast */

  /* Navbar Colors - STAYS DARK in light mode (Dark Frame Pattern v2.0) */
  --color-bg-navbar: #1a1a1a;           /* Dark navbar background (same as dark mode) */
  --color-navbar-link: #c9d1d9;         /* Soft white links (GitHub text - same as dark mode) */
  --color-navbar-link-hover: #ffffff;   /* White hover (same as dark mode) */
  --color-navbar-action: #ffffff;       /* White icons (same as dark mode) */
  --color-navbar-dropdown-icon: #c9d1d9; /* Matches nav text - single accent rule (Sessie 53) */

  /* Footer Colors - STAYS DARK in light mode (matches navbar chrome) */
  --color-bg-footer: #1a1a1a;           /* Dark footer background (same as navbar) */
  --color-footer-text: #c9d1d9;         /* Soft white text (GitHub text - same as dark mode) */
  --color-footer-link: #79c0ff;         /* Muted blue links (GitHub accent - same as dark mode) */
  --color-footer-link-hover: #58a6ff;   /* Brighter blue hover (GitHub primary - same as dark mode) */
  --color-border-dark-frame: #999999;   /* Dark Frame borders - darker grey for better visibility (2.68:1 vs content, 9.2:1 vs footer) - VS Code pattern */

  /* Theme Toggle Colors - STAYS LIGHT in light mode (navbar is dark) */
  --color-toggle-text-active: #ffffff;  /* Bright white for active label (same as dark mode - navbar stays dark) */
  --color-toggle-text-inactive: rgba(204, 204, 204, 0.4);  /* Dimmed inactive label (40% opacity - VS Code pattern) */
  --color-toggle-hover: rgba(255, 255, 255, 0.15);  /* Slightly brighter hover for visibility on #1a1a1a navbar */

  /* Dropdown Colors - STAYS DARK in light mode (Dark Frame Pattern) */
  --color-bg-dropdown: #1a1a1a;         /* Matches dark navbar background - consistent frame aesthetic */
  --color-bg-dropdown-hover: #0a0a0a;   /* Darker hover - same as dark mode for uniform behavior */

  /* Modal Overlay - Dark dimming in light mode (Bootstrap/Material UI pattern) */
  --color-modal-overlay: rgba(0, 0, 0, 0.5);  /* Semi-transparent dark overlay for focus effect */

  /* Button Colors - Light Mode (PHASE 3: Changed to blue for consistency) */
  --color-button-bg: #1976d2;               /* ✅ Blue base (was green #1a6634) - matches dark mode logic */
  --color-button-bg-hover: #1565c0;         /* ✅ Darker blue hover - WCAG AAA compliant */
  --color-button-text: #ffffff;             /* White text - industry standard for saturated buttons */
  --color-button-text-hover: #ffffff;       /* White text on hover - consistent pattern */
  --color-button-shadow-hover: rgba(25, 118, 210, 0.3);  /* ✅ Blue shadow (was green) - matches hover color */

  /* Shadow System - Light Mode (5:1 opacity ratio = visually equivalent to dark mode) */
  /* Content Cards - Subtle shadows on white require lower opacity to avoid "dirty" appearance */
  --shadow-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.08);    /* Base state - clean subtle depth */
  --shadow-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.12);   /* Hover state - professional elevation */

  /* Terminal Accent - Adapted for light backgrounds (same visual weight as dark mode) */
  --shadow-accent-terminal: 0 0 20px rgba(0, 255, 136, 0.08);  /* Softer glow on white - prevents oversaturation */

  /* Welcome separator now uses gradient fade (no glow) - see terminal.css .welcome-separator */

  /* Featured Content (light mode adjustments - Sessie 91) */
  --featured-bg-emphasis: rgba(255, 215, 0, 0.12);   /* Slightly higher opacity for visibility */
  --featured-border-accent: #d97706;                  /* Darker gold for contrast */
  --featured-text-strong: #b45309;                    /* Dark amber text (WCAG AAA) */

  /* DEPRECATED ALIASES - Light mode overrides (Sessie 90) */
  --color-text-light: var(--color-text);           /* Unify: #2a2a2a → #0a0a0a */
  --color-modal-text: var(--color-text);           /* Consistent dark text */
  --color-text-muted: var(--color-text-dim);       /* Unify: #666666 → #444444 (better contrast) */
  --color-input: var(--color-prompt);              /* Terminal branding consistency */
  --color-bg-modal-content: var(--color-bg-modal); /* Unify modal backgrounds */
  /* Chrome variables identical in light mode (Dark Frame Pattern) */
}

/* ==================== Reset & Base ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  height: 100%;
}

body {
  font-family: var(--font-terminal);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==================== Typography ==================== */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

/* Modern link hover: Explicit color change (WCAG compliant) - No opacity dimming to preserve contrast */
a:hover {
  color: var(--color-link-hover);
}

/* Focus indicator handled by global :focus-visible in animations.css */

strong {
  font-weight: var(--font-weight-bold);
}

/* ==================== Buttons ==================== */
button {
  font-family: var(--font-terminal);
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

/* Focus indicator handled by global :focus-visible in animations.css */

.btn-primary {
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  border: 2px solid var(--color-button-bg);
  border-radius: var(--border-radius-button);
}

.btn-primary:hover {
  background-color: var(--color-button-bg-hover);
  border-color: var(--color-button-bg-hover);
  color: var(--color-button-text-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-button-shadow-hover);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-ui-secondary);
  border: 2px solid var(--color-ui-secondary);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  border-radius: var(--border-radius-button);
}

.btn-secondary:hover {
  background-color: transparent;
  border-color: var(--color-button-bg-hover);
  color: var(--color-button-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-button-shadow-hover);
}

/* Small secondary button override - fix CSS cascade bug (M5.5 Phase 1.5)
   Combined selector has higher specificity (0,0,2,0) than single class (0,0,1,0)
   to prevent .btn-small solid background from overriding .btn-secondary transparent */
.btn-small.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--color-ui-secondary);
  color: var(--color-ui-secondary);
}

.btn-small.btn-secondary:hover {
  background-color: transparent;
  border-color: var(--color-button-bg-hover);
  color: var(--color-button-bg-hover);
}

/* Featured Button Variant - Premium/Sponsored CTAs (Sessie 91) */
.btn-featured {
  background: linear-gradient(135deg, var(--featured-ribbon-start), var(--featured-ribbon-end));
  color: var(--color-bg-dark);           /* Dark text on gold background */
  border: 1px solid var(--featured-border-accent);
  font-weight: var(--font-weight-bold);
  transition: var(--transition-normal);
}

.btn-featured:hover {
  background: var(--featured-border-accent);
  border-color: var(--featured-text-strong);
  box-shadow: 0 0 8px var(--featured-bg-emphasis);
  transform: translateY(-1px);           /* Subtle lift effect */
}

.btn-featured:active {
  transform: translateY(0);
}

.btn-small {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 16px;
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  border: 1px solid var(--color-button-bg);
  border-radius: var(--border-radius-button);
}

.btn-small:hover {
  background-color: var(--color-button-bg-hover);
  border-color: var(--color-button-bg-hover);
  color: var(--color-button-text-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-button-shadow-hover);
}

/* ==================== AFFILIATE LINK - PROMINENT CTA ==================== */
/* PHASE 3: Higher specificity (a.class) prevents underline inheritance cleanly */
a.affiliate-link {
  /* Sizing: Upgrade from btn-small to prominent */
  padding: var(--spacing-md) var(--spacing-xl);     /* 16px 32px (was 8px 16px) */
  font-size: 1rem;                                  /* 16px responsive */

  /* Visual */
  background-color: var(--color-button-bg);         /* #005bb5 dark / #1f7a40 light */
  color: var(--color-button-text);                  /* #ffffff */
  border: 2px solid var(--color-button-bg);         /* Thicker border (was 1px) */
  border-radius: var(--border-radius-button);       /* 4px */

  /* Typography */
  font-family: var(--font-terminal);
  font-weight: var(--font-weight-bold);             /* 700 */
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;                            /* ✅ Clean: Higher specificity (0,1,1 vs 0,1,0) */
  display: inline-block;

  /* Interaction */
  transition: all var(--transition-fast);           /* 0.15s ease */
  cursor: pointer;
}

/* Link states - Override browser defaults for visited links */
a.affiliate-link:link,
a.affiliate-link:visited {
  text-decoration: none;                            /* Force underline removal in all states */
  color: var(--color-button-text);                  /* Maintain white text (not browser purple) */
  background-color: var(--color-button-bg);         /* Maintain button color */
}

/* External link indicator - Trust signal */
a.affiliate-link::after {
  content: " →";                        /* Space before arrow for breathing */
  font-size: 1.2em;                     /* Larger arrow (matches .resource-cta) */
  line-height: 1;                       /* Consistent baseline */
  display: inline-block;                /* Enable vertical-align */
  vertical-align: middle;               /* Text-aligned centering */
  margin-left: 4px;                     /* Subtle spacing */
  transition: transform 0.2s ease;
}

a.affiliate-link:hover {
  background-color: var(--color-button-bg-hover);   /* #1976d2 dark / #248748 light */
  border-color: var(--color-button-bg-hover);
  color: var(--color-button-text-hover);            /* #ffffff */
  transform: translateY(-2px);                      /* Lift effect */
  box-shadow: 0 4px 12px var(--color-button-shadow-hover);
}

/* Arrow animation on hover */
a.affiliate-link:hover::after {
  transform: translateX(3px);           /* Subtle slide (less than card buttons) */
}

a.affiliate-link:focus-visible {
  outline: 2px solid var(--color-button-bg);
  outline-offset: 2px;
}

a.affiliate-link:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Inline context: Keep in paragraph flow + Override blog link styles */
/* ULTRA HIGH SPECIFICITY: Defeats [data-theme=light] .blog-post-content p a (0,1,3,1) with 0,1,3,2 */
html .blog-post-content p a.affiliate-link,
html .blog-post-content ol a.affiliate-link,
html .blog-post-content ul a.affiliate-link,
html[data-theme=light] .blog-post-content p a.affiliate-link,
html[data-theme=light] .blog-post-content ol a.affiliate-link,
html[data-theme=light] .blog-post-content ul a.affiliate-link {
  margin: var(--spacing-sm) 0;                      /* 8px vertical spacing */
  color: var(--color-button-text) !important;       /* ✅ Force white text (spec 0,1,3,2) */
  text-decoration: none !important;                 /* ✅ Remove underline */
  background-color: var(--color-button-bg);         /* Ensure button background */
}

/* Visited state - maintain button appearance */
html .blog-post-content p a.affiliate-link:visited,
html .blog-post-content ol a.affiliate-link:visited,
html .blog-post-content ul a.affiliate-link:visited,
html[data-theme=light] .blog-post-content p a.affiliate-link:visited,
html[data-theme=light] .blog-post-content ol a.affiliate-link:visited,
html[data-theme=light] .blog-post-content ul a.affiliate-link:visited {
  color: var(--color-button-text) !important;
  background-color: var(--color-button-bg);
}

/* Hover state - maintain button appearance */
html .blog-post-content p a.affiliate-link:hover,
html .blog-post-content ol a.affiliate-link:hover,
html .blog-post-content ul a.affiliate-link:hover,
html[data-theme=light] .blog-post-content p a.affiliate-link:hover,
html[data-theme=light] .blog-post-content ol a.affiliate-link:hover,
html[data-theme=light] .blog-post-content ul a.affiliate-link:hover {
  color: var(--color-button-text-hover) !important;
  background-color: var(--color-button-bg-hover);
}

/* Affiliate Ribbon - Top Right Corner (Phase 3/5: Ribbon Redesign) */
.affiliate-ribbon {
  /* Positioning - Absolute top-right corner */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;

  /* Layout */
  padding: 8px 16px;

  /* Typography - Terminal Aesthetic */
  font-family: var(--font-terminal);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ribbon-text);  /* #ffffff */
  white-space: nowrap;

  /* Visual - Orange Gradient Background (Sessie 91: Upgraded to featured tokens) */
  background: linear-gradient(135deg,
    var(--featured-ribbon-start) 0%,   /* #e67e22 - vibrant orange */
    var(--featured-ribbon-end) 100%);  /* #d35400 - darker orange */

  /* Ribbon Shape - Angled bottom-left corner */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%);

  /* Depth */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ASCII Brackets for Terminal Feel */
.affiliate-ribbon::before {
  content: "[ ";
  opacity: 0.8;
}

.affiliate-ribbon::after {
  content: " ]";
  opacity: 0.8;
}

/* ==================== AANBEVOLEN RESOURCES SECTION ==================== */

/* Section header */
.aanbevolen-header {
  font-family: var(--font-terminal);
  font-size: 1.953rem;                              /* h2 size */
  font-weight: var(--font-weight-bold);
  color: var(--color-ui-primary);                   /* #58a6ff dark */
  text-align: center;
  margin-bottom: var(--spacing-xl);                 /* 32px */
  letter-spacing: 2px;
  text-transform: uppercase;
}

[data-theme="light"] .aanbevolen-header {
  color: var(--color-link);                         /* #1f7a40 light */
}

/* Responsive grid: 3-col → 2-col → 1-col */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);                           /* 32px */
  margin-bottom: var(--spacing-xl);
}

/* Product card */
.resource-card {
  position: relative;                               /* CRITICAL: Positioning context for ribbon */
  display: flex;                                    /* Enable flexbox for vertical alignment */
  flex-direction: column;                           /* Stack content vertically */
  background-color: var(--color-bg-terminal);       /* #0d1117 dark */
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-modal);        /* 8px */
  padding: var(--spacing-xl);                       /* 32px */
  transition: all var(--transition-normal);         /* 0.3s ease */
  box-shadow: var(--shadow-elevation-1);
  max-width: 380px;                                 /* Prevent oversized cards */
  margin: 0 auto;                                   /* Center cards in grid */
  overflow: visible;                                /* Allow ribbon to extend beyond card */
}

.resource-card:hover {
  border-color: var(--color-ui-primary);
  box-shadow: var(--shadow-elevation-2);
  transform: translateY(-4px);                      /* More lift than blog cards */
}

[data-theme="light"] .resource-card {
  background-color: var(--color-bg-modal);          /* #ffffff light */
}

/* Reserve space for ribbon so content doesn't overlap */
.resource-card__header {
  padding-top: 36px;  /* Ribbon height + margin */
}

/* Icon (emoji or text) */
.resource-icon {
  text-align: center;
  margin-bottom: var(--spacing-md);                 /* 16px */
}

.resource-icon-text {
  font-size: 3rem;
  display: block;
}

/* Title */
.resource-title {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-ui-primary);
  margin-bottom: var(--spacing-sm);                 /* 8px */
  line-height: 1.3;
}

[data-theme="light"] .resource-title {
  color: var(--color-link);
}

/* Description */
.resource-description {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

[data-theme="light"] .resource-description {
  color: var(--color-text);
}

/* Meta badges */
.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);                           /* 8px */
  margin-bottom: var(--spacing-lg);                 /* 24px */
  font-family: var(--font-terminal);
  font-size: 0.85rem;
  color: var(--color-text-dim);
}

.resource-meta span {
  background-color: var(--color-surface-elevated);
  padding: 4px 8px;
  border-radius: var(--border-radius-small);        /* 2px */
}

.resource-platform {
  color: var(--color-info);
  font-weight: var(--font-weight-medium);
}

.resource-price {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

.resource-rating {
  color: var(--color-warning);
}

/* CTA wrapper - Consistent spacing above button */
.resource-card__cta {
  margin-top: auto;                  /* Flexbox: stick to bottom */
  padding-top: var(--spacing-md);    /* 16px visual breathing room */
}

/* Full-width CTA in card */
/* CTA Button - Interactive with micro-animations */
.resource-cta {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;

  /* Typography - FIX: Terminal font for consistency */
  font-family: var(--font-terminal);              /* ✅ Was: var(--font-ui) */
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;                      /* ✅ ADD: Terminal aesthetic */
  letter-spacing: 0.5px;                          /* ✅ ADD: Readability */
  text-decoration: none;
  white-space: nowrap;

  /* Visual - FIX: Theme-aware variables */
  background-color: var(--color-button-bg);       /* ✅ Was: var(--color-ui-primary) */
  color: var(--color-button-text);                /* ✅ Was: #ffffff hardcoded */
  padding: 14px 24px;
  border-radius: var(--border-radius-button);     /* ✅ Was: 6px → now 4px */
  border: 2px solid var(--color-button-bg);       /* ✅ Was: transparent */

  /* Animation */
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Arrow indicator */
.resource-cta::after {
  content: "→";
  font-size: 1.2em;
  line-height: 1;                    /* Force consistent baseline */
  display: inline-block;             /* Enable transform without affecting flow */
  vertical-align: middle;            /* Explicit vertical centering */
  transition: transform 0.2s ease;
}

/* Hover State - FIX: Theme-aware variables */
.resource-cta:hover {
  background-color: var(--color-button-bg-hover); /* ✅ Was: var(--color-link-hover) */
  border-color: var(--color-button-bg-hover);     /* ✅ Was: var(--color-ui-primary) */
  color: var(--color-button-text-hover);          /* ✅ ADD */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-button-shadow-hover);  /* ✅ Was: hardcoded rgba */
}

.resource-cta:hover::after {
  transform: translateX(4px);  /* Arrow slides right */
}

/* Focus State (Accessibility) - FIX: Theme-aware outline */
.resource-cta:focus,
.resource-cta:focus-visible {
  outline: 2px solid var(--color-button-bg) !important;  /* ✅ Was: 3px var(--color-ui-primary) */
  outline-offset: 2px;
}

/* Active State (Click feedback) */
.resource-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px var(--color-button-shadow-hover);  /* ✅ Was: hardcoded rgba */
}

/* Featured Card CTA - Success green instead of blue */
.resource-card:has(.featured-badge) .resource-cta {
  background-color: var(--color-success);     /* Green: #27ae60 */
  border-color: var(--color-success);              /* ✅ ADD for consistency */
}

.resource-card:has(.featured-badge) .resource-cta:hover {
  background-color: #229954;                  /* Darker green on hover */
  border-color: #229954;                           /* ✅ ADD */
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.resource-card:has(.featured-badge) .resource-cta:focus {
  outline-color: var(--color-success);
}

/* Mobile: Single column */
@media (max-width: 768px) {
  .resource-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);                         /* 24px instead of 32px */
  }

  .resource-card {
    padding: var(--spacing-lg);                     /* 24px instead of 32px */
  }

  /* Ribbon: Smaller on mobile */
  .affiliate-ribbon {
    font-size: 0.65rem;
    padding: 6px 12px;
  }

  /* Header: Less padding on mobile */
  .resource-card__header {
    padding-top: 32px;  /* Smaller on mobile */
  }

  .resource-title {
    font-size: 1.1rem;
  }

  .resource-description {
    font-size: 0.9rem;
  }

  /* CTA: Full width, larger touch target on mobile */
  .resource-cta {
    width: 100%;
    padding: 16px 24px;  /* Bigger thumb target (44px+) */
    font-size: 0.9rem;
  }
}

/* Tablet: 2 columns */
@media (min-width: 769px) and (max-width: 1023px) {
  .resource-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .resource-cta,
  .resource-cta::after,
  .resource-category-badge {
    transition: none;
  }

  .resource-cta:hover {
    transform: none;
  }

  .resource-cta:hover::after {
    transform: none;
  }

  .resource-category-badge:hover {
    transform: none;
  }
}

/* ==================== CATEGORY BADGES (AFFILIATE GRID) ==================== */

/* Category Badges (replace emoji icons) */
/* Category Badge Base - Enhanced contrast + Interactive hover */
.resource-category-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;  /* Prevent wrapping */
  transition: transform 0.15s ease, box-shadow 0.15s ease;  /* Interactive feedback */
}

/* Hover effect for interactive feel */
.resource-category-badge:hover {
  transform: translateY(-1px);  /* Subtle lift */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);  /* Elevated shadow */
}

/* Badge Color Variants with Enhanced Contrast + Borders */
.badge-pentest {
  background-color: var(--badge-pentest-bg);       /* #27ae60 - HTB green */
  color: var(--badge-pentest-text);                /* #ffffff - AA+ contrast (4.7:1) */
  border: 2px solid var(--badge-pentest-border);   /* #1e8449 - depth */
}

.badge-websec,
.badge-platform {
  background-color: var(--badge-websec-bg);        /* #3498db - professional blue */
  color: var(--badge-websec-text);                 /* #ffffff - AA contrast (4.5:1) */
  border: 2px solid var(--badge-websec-border);    /* #2980b9 - depth */
}

.badge-exploits,
.badge-creative {
  background-color: var(--badge-exploits-bg);      /* #16a085 - teal */
  color: var(--badge-exploits-text);               /* #ffffff - AA contrast (4.6:1) */
  border: 2px solid var(--badge-exploits-border);  /* #117a65 - depth */
}

.badge-python,
.badge-bootcamp {
  background-color: var(--badge-python-bg);        /* #f39c12 - Python gold */
  color: var(--badge-python-text);                 /* #0a0a0a - AAA contrast (8.9:1) ✓ */
  border: 2px solid var(--badge-python-border);    /* #e67e22 - depth */
}

.badge-socialeng {
  background-color: var(--badge-socialeng-bg);     /* #e74c3c - danger red */
  color: var(--badge-socialeng-text);              /* #ffffff - AA+ contrast (4.8:1) */
  border: 2px solid var(--badge-socialeng-border); /* #c0392b - depth */
}

/* ==================== FEATURED BADGE (AFFILIATE GRID) ==================== */

/* Featured Badge - Highlights recommended resource */
.featured-badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 8px;                /* Space from category badge */

  font-family: var(--font-terminal);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;

  color: #ffffff;
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);  /* Success green */
  border: 2px solid #2ecc71;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3);

  transition: all 0.15s ease;
}

.featured-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(39, 174, 96, 0.4);
}

/* Stack badges vertically in icon area */
.resource-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ==================== DONATION CTA - COMPACT PATTERN ==================== */

/* Compact donation paragraph (no box styling) - Column 2 (center) */
.donate-compact {
  flex: 0 0 auto;  /* Natural width, stays inline on desktop */
  margin: 0;
  font-size: 16px;
  color: var(--color-footer-text);
  text-align: center;
  line-height: 1.6;
  white-space: nowrap;
}

/* Compact donation button */
.btn-donate-compact {
  display: inline-block;
  vertical-align: middle;                              /* Optical alignment fix (Sessie 73) - center button vertically with text */
  padding: 6px 14px;                                   /* Slightly smaller than old button */
  font-size: 15px;                                     /* Slightly smaller */
  background-color: var(--color-button-bg);            /* #005bb5 dark / #1f7a40 light */
  color: var(--color-button-text);                     /* #ffffff */
  border: 1px solid var(--color-button-bg);
  border-radius: var(--border-radius-button);          /* 4px */
  font-weight: 600;
  font-family: var(--font-terminal);
  text-decoration: none;
  transition: all var(--transition-fast);              /* 0.15s ease */
  cursor: pointer;
  margin-left: var(--spacing-xs);                      /* 4px spacing (tighter) */
}

.btn-donate-compact:hover {
  background-color: var(--color-button-bg-hover);      /* #1976d2 dark / #248748 light */
  color: var(--color-button-text-hover);               /* NEW (Sessie 72): White text on hover - prevents global a:hover blue override */
  border-color: var(--color-button-bg-hover);          /* NEW (Sessie 72): Border matches bg on hover - consistent with .blog-cta-button */
  transform: translateY(-2px);                         /* CHANGED (Sessie 72): Standard lift (was -1px) - matches site-wide button pattern */
  box-shadow: 0 4px 12px var(--color-button-shadow-hover); /* CHANGED (Sessie 72): Standard shadow (was 0 2px 8px) - matches .blog-cta-button */
}

.btn-donate-compact:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-donate-compact:focus-visible {
  outline: 2px solid var(--color-button-bg);
  outline-offset: 2px;
}

/* ==================== AdSense Ad Container (M5.5 Phase 1) ==================== */
/* Ad Placement 80/20 Rule: Footer only (not terminal, not modal) */
.ad-container {
  background: var(--color-bg-secondary);           /* GitHub secondary bg */
  border: 1px solid var(--color-border);          /* GitHub border */
  border-radius: var(--border-radius-small);      /* 2px */
  padding: var(--spacing-sm);                     /* 8px */
  margin: var(--spacing-lg) auto;                 /* 24px top/bottom, centered */
  max-width: var(--terminal-max-width);           /* 1200px - consistent with footer */
  opacity: 0.8;                                   /* Muted UI Principle - ads less prominent than content */
  text-align: center;
  transition: opacity var(--transition-fast);     /* 0.15s ease */
}

.ad-container:hover {
  opacity: 1;                                     /* Full opacity on hover - subtle interaction */
}

.ad-disclaimer {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-xs) 0;
  font-family: var(--font-terminal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile responsive: 320x50 banner (instead of 728x90 desktop) */
@media (max-width: 768px) {
  .ad-container ins.adsbygoogle {
    width: 320px !important;
    height: 50px !important;
  }

  .ad-container {
    margin: var(--spacing-md) auto;  /* Smaller margin on mobile */
  }
}

/* ==================== Modals ==================== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-modal-overlay);
  z-index: var(--z-modal);
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--color-bg-terminal);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-modal);
  padding: 0;  /* No padding on container - padding goes on children */
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);  /* Neutral dark shadow - consistent with light mode */
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* Clips children to border-radius */
}

.modal.active .modal-content {
  opacity: 1;
  transform: scale(1);
}

[data-theme="light"] .modal-content {
  background-color: #ffffff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 40px;

  /* Scroll affordance: shadows indicate scrollable content (iOS/Material Design pattern) */
  /* Background gradient serves dual purpose: solid color base + scroll shadows */
  background:
    /* Top cover (hides top shadow when at top) */
    linear-gradient(var(--color-bg-terminal) 30%, transparent),
    /* Bottom cover (hides bottom shadow when at bottom) */
    linear-gradient(transparent, var(--color-bg-terminal) 70%) 0 100%,
    /* Top shadow (visible when scrolled down) */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), transparent),
    /* Bottom shadow (visible when content below) */
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), transparent) 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

[data-theme="light"] .modal-body {
  /* Override scroll affordance gradients for light theme */
  background:
    /* Top cover */
    linear-gradient(#ffffff 30%, transparent),
    /* Bottom cover */
    linear-gradient(transparent, #ffffff 70%) 0 100%,
    /* Top shadow */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), transparent),
    /* Bottom shadow */
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), transparent) 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

/* Custom scrollbar for all modals - consistent brand aesthetic (Sessie 37) */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: var(--color-bg-terminal);
}

[data-theme="light"] .modal-body::-webkit-scrollbar-track {
  background: #ffffff;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--border-radius-button);
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-secondary);
}

/* Firefox scrollbar support */
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-bg-terminal);
}

.modal-footer {
  flex-shrink: 0;  /* Don't compress footer */
  padding: var(--spacing-lg) 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--color-bg-terminal);
}

[data-theme="light"] .modal-footer {
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Modal footer button patterns (Sessie 37) */
/* Pattern A: Single button = full-width */
.modal-footer > button:only-child {
  width: 100%;
}

/* Pattern B: Multiple buttons = equal width flex layout */
.modal-footer:has(> button + button) {
  display: flex;
  gap: var(--spacing-md);
}

.modal-footer:has(> button + button) > button {
  flex: 1;
}

.modal-content h2 {
  color: var(--color-modal-header);
  margin-bottom: var(--spacing-lg);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.modal-content p {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
}

.modal-content ul {
  color: var(--color-text-light);
  margin-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.modal-content li {
  margin-bottom: var(--spacing-sm);
}

.modal-close {
  /* Positioning */
  position: absolute;
  top: var(--spacing-sm);        /* 8px */
  right: var(--spacing-md);       /* 16px */

  /* Touch target - 44x44px (WCAG AAA) */
  width: 44px;
  height: 44px;
  padding: 10px;                  /* Centers 24px visual icon */

  /* Visual styling - Bootstrap Opacity Pattern: Background NEVER changes */
  background: var(--color-bg-terminal);  /* Opaque - CONSTANT (never changes) */
  border: none;
  border-radius: var(--border-radius-button);  /* 4px - consistent */
  color: var(--color-text-muted);  /* #8b949e - GitHub secondary */
  font-size: 24px;                 /* 24px visual (in 44px container) */
  line-height: 1;

  /* Bootstrap pattern - dimmed at rest */
  opacity: 0.6;

  /* Interaction */
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.modal-close:hover {
  opacity: 1.0;
  box-shadow: none;     /* Explicit override - Dark Frame Pattern (no green glow) */
  transform: none;      /* No lift - flat UI chrome like navbar elements */
}

.modal-close:focus-visible {
  opacity: 1.0;
  outline: 2px solid var(--color-info);  /* #79c0ff - Keyboard nav only */
  outline-offset: 2px;
}

.modal-close:active {
  opacity: 1.0;
  transform: scale(0.95);  /* Tactile feedback */
}

/* Light theme support for modal close button */
[data-theme="light"] .modal-close {
  background: #ffffff;  /* Opaque white - CONSTANT (never changes) */
  color: #57606a;       /* GitHub dark grey for light mode */
  opacity: 0.6;
}

[data-theme="light"] .modal-close:hover {
  opacity: 1.0;
  box-shadow: none;     /* Explicit override - Dark Frame Pattern (no green glow) */
  transform: none;      /* No lift - flat UI chrome like navbar elements */
}

[data-theme="light"] .modal-close:focus-visible {
  opacity: 1.0;
}

/* ==================== Legal Modal Specific Styles (Sessie 37) ==================== */

.legal-modal-content {
  max-width: 600px;
}

/* Legal modal footer - button must be full-width despite .legal-footer-links sibling */
.legal-modal-content .modal-footer > button {
  width: 100%;
}

.legal-modal-header {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
  background: var(--color-bg-terminal);
}

[data-theme="light"] .legal-modal-header {
  background: #ffffff;
}

.legal-warning-icon {
  color: var(--color-warning);
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  font-family: var(--font-terminal);
  letter-spacing: 0.15em;
}

.legal-modal-header h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-modal-header);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.legal-warning-text {
  background: rgba(255, 170, 0, 0.1);
  border: 1px solid var(--color-warning);
  color: var(--color-warning);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-radius: var(--border-radius-button);
  font-size: 0.9rem;
  text-align: center;
  animation: fadeIn 0.3s ease-out;
}

.legal-footer-links {
  margin-top: var(--spacing-md);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.legal-footer-links a {
  color: var(--color-success);
  margin: 0 var(--spacing-sm);
}

.legal-footer-links a:hover {
  text-decoration: underline;
}

/* ==================== Cookie Consent Banner ==================== */
.cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg-modal);
  border-top: 2px solid var(--color-border);
  padding: var(--spacing-md);
  z-index: var(--z-cookie);
}

.cookie-banner.active {
  display: block;
}

.cookie-content {
  max-width: var(--terminal-max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

.cookie-content p {
  margin: 0;
}

/* Cookie banner link styling - matches footer links (Phase 1.5.1)
   No underline on hover, just color change for consistency with footer chrome */
.cookie-banner a {
  color: var(--color-footer-link);
  text-decoration: none;
}

.cookie-banner a:hover {
  color: var(--color-footer-link-hover);
}

.cookie-buttons {
  display: flex;
  gap: var(--spacing-sm);
}
/* Feedback Modal - Balanced spacing */
#feedback-modal .modal-content p {
  margin-bottom: 4px; /* Reduced spacing for tighter layout */
  font-size: 20px; /* Significantly larger question text */
  line-height: 1.3; /* Compact line height for less visual space */
}

/* Rating Stars */
.rating-stars {
  display: flex;
  gap: var(--spacing-sm);
  margin: 12px 0; /* Increased spacing for balanced visual weight */
}

.star {
  background: none;
  font-size: 4.5rem; /* Extra large stars */
  padding: var(--spacing-xs);
  color: var(--color-star-inactive); /* Medium grey for better visibility on dark background */
  transition: all var(--transition-fast);
  text-shadow: none;
}

.star:hover,
.star.selected,
.star.active {
  color: var(--color-ui-primary); /* Softer neon green (#00ff88) - consistent met terminal prompt */
  text-shadow: 0 0 8px var(--color-ui-primary); /* Subtle glow effect */
}

#feedback-comment {
  width: 100%;
  background-color: var(--color-bg-hover);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-input);
  padding: 12px;
  font-family: var(--font-terminal);
  font-size: 17px;
  resize: vertical;
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-button);
}

#feedback-comment:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* Feedback error message - Reserved space pattern (zero layout shift) */
.feedback-error {
  background: rgba(255, 0, 85, 0.1);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: 12px;
  margin: 12px 0;
  border-radius: var(--border-radius-button);
  font-size: 15px;
  line-height: 1.4;
  min-height: 48px; /* Fixed height prevents layout shift */

  /* Default hidden state - accessibility-friendly (not display: none) */
  opacity: 0;
  visibility: hidden;

  /* Smooth transitions */
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

/* Visible state - triggered by JavaScript */
.feedback-error.visible {
  opacity: 1;
  visibility: visible;
}

/* Feedback Success Message - matching error pattern */
.feedback-success {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  border: 1px solid var(--color-success);
  color: var(--color-success);
  padding: 12px;
  margin: 12px 0;
  border-radius: var(--border-radius-button);
  font-size: 15px;
  line-height: 1.4;
  min-height: 48px; /* Fixed height prevents layout shift */

  /* Default hidden state - accessibility-friendly (not display: none) */
  opacity: 0;
  visibility: hidden;

  /* Smooth transitions */
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

/* Visible state - triggered by JavaScript */
.feedback-success.visible {
  opacity: 1;
  visibility: visible;
}

/* Feedback submit button - full-width modern style */
#feedback-submit {
  background-color: var(--color-button-bg);
  border-color: var(--color-button-bg);
  color: var(--color-button-text);
  width: 100%;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: var(--border-radius-button);
}

#feedback-submit:hover {
  background-color: var(--color-button-bg-hover);
  border-color: var(--color-button-bg-hover);
  color: var(--color-button-text-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-button-shadow-hover);
}

/* ==================== Footer ==================== */
footer {
  position: static;
  background-color: var(--color-bg-footer);
  color: var(--color-footer-text);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 16px;
  text-align: center;
  margin-top: var(--spacing-lg);
}

.footer-content {
  max-width: var(--terminal-max-width);
  margin: 0 auto;

  /* Flexbox 2-item layout - Perfect alignment (Sessie 87) */
  display: flex;
  justify-content: space-between;  /* Copyright left, nav right - always */
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;  /* Donate wraps to row 2 on tablet */
}

/* Column 1: Copyright (left-aligned, never grows) */
.footer-copyright {
  flex: 0 0 auto;  /* No grow, no shrink, auto width */
  text-align: left;
  margin: 0;
}

/* Column 2 (position 3): Navigation (right-aligned, never grows) */
footer nav {
  flex: 0 0 auto;  /* No grow, no shrink, auto width */
  margin: 0;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

footer a {
  color: var(--color-footer-link);
  text-decoration: none;
  padding: 0;
}

footer a:hover {
  color: var(--color-footer-link-hover);
}

/* Footer nav separators - CSS pseudo-elements pattern */
footer nav a:not(:last-child)::after {
  content: '|';
  color: var(--color-footer-text);
  margin-left: var(--spacing-sm);
  margin-right: 0;
}

/* Mirror spacing: next link needs matching margin-left */
footer nav a:not(:first-child) {
  margin-left: var(--spacing-sm);
}

/* ==================== Widescreen Modal Scaling ==================== */
/* Widescreen: Scale modals for 1400px+ displays (4K monitors, large desktops) */
@media (min-width: 1400px) {
  .modal-content {
    width: 720px; /* 20% larger than desktop default (600px) */
  }
}

/* ==================== Footer Tablet Breakpoint ==================== */
/* Tablet: 2-row layout (copyright+nav row 1, donation row 2) - Sessie 72 */
@media (max-width: 1024px) {
  .footer-content {
    gap: var(--spacing-xs) var(--spacing-md);
  }

  /* TABLET ONLY: Force donate to wrap to row 2 (Sessie 87 fix) */
  .donate-compact {
    flex-basis: 100%;  /* Forces wrap to new row */
    order: 3;          /* Places after nav (copyright=0, nav=0, donate=3) */
  }
}

/* ==================== Skip Link (Accessibility) ==================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: var(--color-bg-navbar);
  color: var(--color-navbar-link);
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  z-index: 9999;
  transition: top var(--transition-fast);
}

.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--color-navbar-link-hover);
  outline-offset: 2px;
}

/* ==================== Navigation Bar ==================== */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg-navbar);
  border-bottom: 1px solid var(--color-border-dark-frame);
  padding: var(--spacing-md) var(--spacing-lg);
  z-index: var(--z-navbar);
  height: 60px;
  display: flex;
  align-items: center;
}

/* Navbar Content Wrapper */
.navbar-content {
  max-width: var(--terminal-max-width);
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Brand/Logo */
.navbar-brand {
  font-family: var(--font-terminal);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-ui-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.navbar-brand:hover {
  color: var(--color-ui-hover);
}

/* Navbar Menu Container (Links + Actions) */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

/* Navigation Links */
.navbar-links {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-links li {
  margin: 0;
  position: relative;
}

/* Generic navbar links - Animated Underline Pattern (Sessie 53 upgrade) */
.navbar-links > li:not(.navbar-dropdown) > a {
  color: var(--color-navbar-link);
  font-family: var(--font-terminal);
  font-size: 19px; /* Slightly larger for navbar prominence */
  font-weight: 500; /* Medium weight - professional developer tool aesthetic */
  letter-spacing: 0.5px; /* Improved monospace readability */
  padding: var(--spacing-sm) var(--spacing-md);
  transition: color var(--transition-fast);
  position: relative;
  display: block;
}

/* Animated underline - grows from center (GitHub/VS Code pattern) */
.navbar-links > li:not(.navbar-dropdown) > a::after {
  content: '';
  position: absolute;
  bottom: 2px; /* Tight to text - industry standard (Sessie 55) */
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-navbar-underline); /* Consistent blue in both themes (Dark Frame Pattern) */
  transition: width 0.2s ease, left 0.2s ease;
}

.navbar-links > li:not(.navbar-dropdown) > a:hover {
  color: var(--color-navbar-link-hover);
}

.navbar-links > li:not(.navbar-dropdown) > a:hover::after {
  width: 100%;
  left: 0;
}

/* Navbar Dropdown */
.navbar-dropdown {
  position: relative;
}

/* Dropdown Trigger - Animated Underline Pattern (Sessie 53 upgrade) - matches generic navbar links */
.dropdown-trigger {
  color: var(--color-navbar-link);
  font-family: var(--font-terminal);
  font-size: 19px; /* Match generic navbar links */
  font-weight: 500; /* Medium weight - consistent with generic links */
  letter-spacing: 0.5px; /* Improved monospace readability */
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  display: inline-flex; /* Flexbox enables stable icon alignment */
  align-items: center; /* Vertically center icon with text regardless of font changes */
  gap: 4px; /* Predictable spacing (doesn't collapse like margin) */
  transition: color var(--transition-fast);
  position: relative;
}

/* Animated underline for dropdown trigger - uses ::before (::after is '+' icon) */
.dropdown-trigger::before {
  content: '';
  position: absolute;
  bottom: 2px; /* Tight to text - industry standard (Sessie 55) */
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--color-navbar-underline); /* Consistent blue in both themes (Dark Frame Pattern) */
  transition: width 0.2s ease, left 0.2s ease;
}

.dropdown-trigger:hover {
  color: var(--color-navbar-link-hover);
}

.dropdown-trigger:hover::before {
  width: 100%;
  left: 0;
}

/* Dropdown Icon - Pseudo-element pattern (industry standard: VS Code, GitHub, Slack) */
.dropdown-trigger::after {
  content: '+';
  color: var(--color-navbar-dropdown-icon);
  font-size: 1em; /* Scale with parent text */
  line-height: 1;
  font-weight: 400; /* Explicit - never inherit bold */
  transition: transform var(--transition-normal);
  display: inline-block; /* Required for transform */
}

/* Rotate icon when dropdown is active (+ becomes ×) */
.navbar-dropdown.active .dropdown-trigger::after {
  transform: rotate(45deg);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-bg-dropdown);
  border: 1px solid var(--color-border); /* Subtle border - visible in light mode, nearly invisible in dark */
  border-radius: var(--border-radius-button);
  list-style: none;
  margin: 0;
  padding: var(--spacing-md) 0;
  min-width: 160px;
  z-index: 1001;
  animation: fadeIn 0.2s ease-out;
}

.navbar-dropdown.active .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu li + li {
  margin-top: 4px; /* Enhanced breathing room between items */
}

.dropdown-menu a {
  display: block;
  padding: var(--spacing-md) var(--spacing-xl); /* Enhanced horizontal breathing room: 16px/32px */
  color: var(--color-navbar-link);
  text-decoration: none;
  font-weight: 400; /* Keep constant - no jank on hover */
  white-space: nowrap; /* Prevent text wrapping - arrow and text must stay on same line */
  transition: background-color var(--transition-fast), color var(--transition-fast), border-left-color var(--transition-fast);
  border-left: 2px solid transparent; /* Reserve space - prevents 2px layout shift on hover */
}

.dropdown-menu a::before {
  content: '→ '; /* ASCII arrow prefix - terminal aesthetic */
  color: var(--color-navbar-dropdown-icon); /* Cyan like + icon */
  display: inline; /* Ensure arrow stays inline with text - prevents wrapping */
  margin-right: 6px;
  vertical-align: baseline; /* Align with text baseline - no floating */
  transition: content 0s; /* Instant icon change (no fade) */
}

.dropdown-menu a:hover {
  background-color: var(--color-bg-dropdown-hover); /* Dedicated dropdown hover - uniform across themes */
  color: var(--color-navbar-link-hover);
  font-weight: 400; /* Explicit override - prevent inheritance */
  /* NO border color change - arrow is sufficient indicator (terminal purist approach) */
  /* NO padding change - border space already reserved */
}

.dropdown-menu a:hover::before {
  content: '► '; /* Filled arrow on hover - visual feedback */
}

/* Navbar Actions (Icons: Search, GitHub, Theme Toggle) */
.navbar-actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}

.navbar-action {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navbar-action);
  padding: var(--spacing-sm);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
}

.navbar-action:hover {
  color: var(--color-navbar-action);
  transform: translateY(-2px);
}

.navbar-action svg {
  display: block;
}

/* Terminal Bracket Switch - Theme Toggle */
.theme-toggle {
  display: flex !important;
  gap: var(--spacing-sm);
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-toggle-text);
  cursor: pointer;
  font-family: var(--font-terminal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
}

.theme-toggle:hover {
  transform: none;
  box-shadow: none;
  /* opacity verwijderd - toggle-option:hover doet het werk */
}

/* Focus indicator handled by global :focus-visible in animations.css */

/* Toggle Option (DARK/LIGHT labels) */
.toggle-option {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--border-radius-small);
  color: var(--color-toggle-text-inactive);  /* Default: dimmed inactive state */
  transition: all var(--transition-normal);
  user-select: none;
  white-space: nowrap;
}

.toggle-option:hover {
  background-color: var(--color-toggle-hover);
}

/* Active toggle option - bright white text (VS Code pattern) */
.toggle-option.active {
  color: var(--color-toggle-text-active);
}

/* Toggle Indicator - Filled block for active theme */
.toggle-indicator {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-button-bg);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

/* Active theme shows filled block */
[data-theme="dark"] .toggle-option[data-theme="dark"] .toggle-indicator,
[data-theme="light"] .toggle-option[data-theme="light"] .toggle-indicator {
  opacity: 1;
}

/* Inactive theme hides indicator */
[data-theme="dark"] .toggle-option[data-theme="light"] .toggle-indicator,
[data-theme="light"] .toggle-option[data-theme="dark"] .toggle-indicator {
  opacity: 0;
}

/* Both options are always clickable - enables switching between them */
.toggle-option {
  cursor: pointer;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .toggle-option,
  .toggle-indicator {
    transition: none;
  }
}

/* Hamburger Toggle (Hidden on Desktop) - Industry Standard Architecture (Sessie 61) */
.navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;  /* Even spacing for predictable translateY calculations */
  align-items: center;  /* Horizontally center spans */
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  padding: 7px 0;  /* Vertical padding: (30px - 16px content) / 2 = 7px */
  cursor: pointer;
  z-index: 10;
  overflow: visible;  /* Allow rotated spans to extend beyond bounds */
  border-radius: var(--border-radius-button);
  transition: background-color var(--transition-fast);
}

.navbar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);  /* Subtle white overlay - GitHub/VS Code pattern */
}

/* Focus Override - Dark Frame Pattern (white instead of blue) */
.navbar-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);  /* Subtle white outline - Dark Frame compliant */
  outline-offset: 2px;
}

.navbar-toggle:focus:not(:focus-visible) {
  outline: none;  /* Remove focus ring on mouse click (accessibility preserved for keyboard) */
}

.navbar-toggle span {
  display: block;
  width: 20px;  /* Reduced from 100% - fits rotated 45° diagonal (20×√2=28px < 30px container) */
  height: 3px;
  background-color: var(--color-navbar-link);  /* Soft white - matches navbar links (Dark Frame Pattern) */
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-small);
}

.navbar-toggle:hover span {
  background-color: var(--color-navbar-link-hover);  /* Bright white hover - Dark Frame Pattern compliance (Sessie 60) */
}

/* Active state - Explicit background control to prevent green glow (Sessie 61) */
.navbar-toggle.active,
.navbar-toggle:active,
.navbar-toggle.active:active {
  background-color: transparent !important;  /* No background glow in any active state */
}

/* Active state explicitly uses same white color (no theme-dependent colors) */
.navbar-toggle.active span {
  background-color: var(--color-navbar-link);  /* Soft white - consistent in both states (Sessie 60) */
  height: 2px;  /* Thinner bars for sharp, professional X (Sessie 61) */
  border-radius: 0;  /* Sharp ends instead of rounded - technical aesthetic (Sessie 61) */
}

.navbar-toggle.active:hover span {
  background-color: var(--color-navbar-link-hover);  /* Bright white - active+hover gets same treatment (Sessie 60) */
}

/* Hamburger → X Animation - Industry Standard (Compound Transforms: translateY + rotate) */
.navbar-toggle.active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);  /* Move DOWN to center + rotate (adjusted for 2px bars) */
  transform-origin: center center;
}

.navbar-toggle.active span:nth-child(2) {
  opacity: 0;  /* Middle bar fades out */
}

.navbar-toggle.active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);  /* Move UP to center + rotate (adjusted for 2px bars) */
  transform-origin: center center;
}

/* ==================== Utility Classes ==================== */
.error-text {
  color: var(--color-error);
}

.warning-text {
  color: var(--color-warning);
}

.info-text {
  color: var(--color-info);
}

.success-text {
  color: var(--color-success);
}

.dim-text {
  color: var(--color-text-dim);
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}