/* ============================================================================ */
/* CSS CUSTOM PROPERTIES (VARIABLES) - COLOR SYSTEM */
/* ============================================================================ */
/* This section defines all the colors used throughout the website */
/* Using CSS variables makes it easy to change colors globally */
/* Just change the value here and it updates everywhere! */
/* 
LAST UPDATED: January 2026
MAJOR CHANGES MADE:
1. Added liquid glass effect to navigation bar with backdrop-filter
2. Enhanced mobile navigation with bold fonts and white click effects
3. Fixed alternating background colors (Contact and Resume now different from Projects)
4. Added secondary button styles for "View my Resume" button
5. Simplified resume section styles (removed timer and animation styles)
6. Improved mobile responsiveness with better breakpoints

FUTURE MODIFICATIONS:
- To change color scheme: Modify variables in :root section
- To add new button styles: Create new .btn--[name] classes
- To modify mobile breakpoints: Update @media queries
- To add new animations: Use CSS keyframes and transitions
- To change fonts: Update --font-* variables and Google Fonts links
*/

:root {
  /* ============================================================================ */
  /* PRIMITIVE COLOR TOKENS - BASE COLORS */
  /* ============================================================================ */
  /* These are the fundamental colors that other colors are built from */
  /* Think of these as your "paint palette" - the basic colors you have to work with */
  
  /* BASIC COLORS */
  --color-white: rgba(255, 255, 255, 1);        /* Pure white */
  --color-black: rgba(0, 0, 0, 1);              /* Pure black */
  
  /* CREAM TONES - WARM, ELEGANT BACKGROUNDS */
  --color-cream-50: rgba(252, 252, 249, 1);     /* Very light cream - main background */
  --color-cream-100: rgba(255, 255, 253, 1);    /* Slightly darker cream - cards/surfaces */
  
  /* GRAY TONES - NEUTRAL COLORS */
  --color-gray-200: rgba(245, 245, 245, 1);     /* Light gray - subtle backgrounds */
  --color-gray-300: rgba(167, 169, 169, 1);     /* Medium gray - secondary text */
  --color-gray-400: rgba(119, 124, 124, 1);     /* Darker gray - muted text */
  
  /* SLATE TONES - COOL, PROFESSIONAL COLORS */
  --color-slate-500: rgba(98, 108, 113, 1);     /* Medium slate - secondary text */
  --color-slate-900: rgba(19, 52, 59, 1);       /* Dark slate - main text */
  
  /* BROWN TONES - WARM, EARTHY COLORS (YOUR BRAND COLORS) */
  --color-brown-600: rgba(94, 82, 64, 1);       /* Main brown - primary color */
  
  /* CHARCOAL TONES - DARK BACKGROUNDS */
  --color-charcoal-700: rgba(31, 33, 33, 1);    /* Dark charcoal - dark mode background */
  --color-charcoal-800: rgba(38, 40, 40, 1);    /* Darker charcoal - dark mode surfaces */
  
  /* TEAL TONES - ACCENT COLORS */
  --color-teal-300: rgba(50, 184, 198, 1);      /* Light teal - bright accent */
  --color-teal-400: rgba(45, 166, 178, 1);      /* Medium teal - hover states */
  --color-teal-500: rgba(33, 128, 141, 1);      /* Main teal - primary accent */
  --color-teal-600: rgba(29, 116, 128, 1);      /* Dark teal - active states */
  --color-teal-700: rgba(26, 104, 115, 1);      /* Darker teal - pressed states */
  --color-teal-800: rgba(41, 150, 161, 1);      /* Darkest teal - deep accent */
  
  /* RED TONES - ERROR AND WARNING COLORS */
  --color-red-400: rgba(255, 84, 89, 1);        /* Light red - error messages */
  --color-red-500: rgba(192, 21, 47, 1);        /* Main red - error states */
  
  /* ORANGE TONES - WARNING COLORS */
  --color-orange-400: rgba(230, 129, 97, 1);    /* Light orange - warning messages */
  --color-orange-500: rgba(168, 75, 47, 1);     /* Main orange - warning states */

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */

    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */

  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

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

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}
.hidden {
  display: none;
}

/* Accessibility */
.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;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
    format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* PERSONAL PORTFOLIO WEBSITE - CUSTOM CSS (FIXED VERSION) */
/* This file contains all the styling for Ayush Bhattacharya's personal portfolio */
/* Every section is clearly commented for easy modification and understanding */
/* BUG FIXES APPLIED: Mobile menu breakpoint and hover effects */

/* ============================================================================ */
/* CUSTOM COLOR PALETTE - ELEGANT CREAM THEME */
/* ============================================================================ */
/* These are the main colors used throughout the website */
/* You can easily change the entire color scheme by modifying these variables */
:root {
  /* Background Colors - Light and elegant cream tones */
  --color-background: #FFFBF0;        /* Very light cream background */
  --color-surface: #FFF8E7;           /* Slightly darker cream for cards */
  --color-card-bg: #FFFEF9;           /* Card backgrounds */
  --color-light-cream: #F5F0E8;       /* Light cream accents */
  
  /* Text Colors - Brown tones for warmth and elegance */
  --color-text-primary: #2D1B14;      /* Dark brown for main text */
  --color-text-secondary: #8B4513;    /* Medium brown for secondary text */
  --color-text-muted: #A0826D;        /* Muted brown for subtle text */
  
  /* Brand Colors */
  --color-primary: #8B4513;           /* Medium brown primary color */
  --color-primary-hover: #6B3410;     /* Darker brown on hover */
  --color-primary-light: #D2B48C;     /* Light brown accent */
  
  /* Border and Shadow Colors */
  --color-border: #E6D7C3;            /* Light brown borders */
  --color-border-light: #F0E6D2;      /* Very light borders */
  --color-shadow: rgba(139, 69, 19, 0.1); /* Subtle brown shadows */
  
  /* Status Colors */
  --color-success: #228B22;           /* Success green */
  --color-warning: #DAA520;           /* Warning gold */
  --color-error: #B22222;             /* Error red */
  
  /* Typography - Custom font families as requested */
  --font-headings: 'Zalando Sans Expanded', Verdana, sans-serif;
  --font-body: 'Scope One', Georgia, 'Times New Roman', serif;
  --font-subsections: 'Trocchi', 'Times New Roman', Georgia, serif;
  --font-monospace: 'Anonymous Pro', 'Courier New', Consolas, 'Liberation Mono', monospace;
  
  /* Spacing - Consistent spacing throughout the site */
  --space-xs: 4px;     /* Extra small spacing */
  --space-sm: 8px;     /* Small spacing */
  --space-md: 16px;    /* Medium spacing */
  --space-lg: 24px;    /* Large spacing */
  --space-xl: 32px;    /* Extra large spacing */
  --space-2xl: 48px;   /* Double extra large spacing */
  --space-3xl: 64px;   /* Triple extra large spacing */
  
  /* Border Radius - Rounded corners */
  --radius-sm: 6px;    /* Small radius */
  --radius-md: 12px;   /* Medium radius */
  --radius-lg: 18px;   /* Large radius */
  --radius-full: 50%;  /* Full circle radius */
  
  /* Shadows - Elegant depth */
  --shadow-light: 0 2px 4px rgba(139, 69, 19, 0.05);
  --shadow-medium: 0 4px 8px rgba(139, 69, 19, 0.1);
  --shadow-heavy: 0 8px 24px rgba(139, 69, 19, 0.15);
  
  /* Transitions - Smooth animations */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ============================================================================ */
/* BASE STYLES - FOUNDATION FOR THE ENTIRE WEBSITE */
/* ============================================================================ */

/* Reset default browser styles and set up the foundation */
* {
  /* This makes all elements calculate size including padding and borders */
  box-sizing: border-box;
  /* Remove default margins and paddings */
  margin: 0;
  padding: 0;
}

/* HTML and Body setup - the foundation of our website */
html {
  /* Smooth scrolling when clicking navigation links */
  scroll-behavior: smooth;
  /* Set the base font size - all other sizes will be relative to this */
  font-size: 16px;
  /* Set the main font family for the entire website */
  font-family: var(--font-body);
}

body {
  /* Main background color */
  background-color: var(--color-background);
  /* Main text color */
  color: var(--color-text-primary);
  /* Line height for better readability */
  line-height: 1.6;
  /* Use the body font family */
  font-family: var(--font-body);
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
}

/* ============================================================================ */
/* CONTAINER AND LAYOUT SYSTEM */
/* ============================================================================ */

/* Container class - centers content and provides consistent margins */
.container {
  /* Maximum width to prevent content from being too wide on large screens */
  max-width: 1200px;
  /* Center the container */
  margin: 0 auto;
  /* Add padding on left and right */
  padding: 0 var(--space-lg);
}

/* Make container responsive - smaller padding on mobile */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
}

/* ============================================================================ */
/* NAVIGATION BAR - FIXED HEADER AT TOP OF PAGE (FIXED VERSION) */
/* ============================================================================ */

/* Main navigation bar - stays at the top when scrolling with liquid glass effect */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* LIQUID GLASS EFFECT - translucent, blurred, slightly refractive look */
  background: rgba(255, 248, 231, 0.48); /* slightly more transparent */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(139, 69, 19, 0.22);
  transition: background 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
/* Subtle depth-aware glow at edges */
.navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.35), rgba(139,69,19,0.25), rgba(255,255,255,0.35));
  pointer-events: none;
}
/* On scroll, slightly increase opacity and shadow to enhance separation */
.navbar.scrolled {
  background: rgba(255, 248, 231, 0.62);
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  border-bottom-color: rgba(139, 69, 19, 0.28);
}

/* Navigation container - holds all nav elements */
.nav-container {
  /* Maximum width */
  max-width: 1200px;
  /* Center the nav container */
  margin: 0 auto;
  /* Padding on sides */
  padding: 0 var(--space-lg);
  /* Flexbox for layout */
  display: flex;
  /* Space between brand and menu */
  justify-content: space-between;
  /* Center items vertically */
  align-items: center;
  /* Minimum height for the navbar */
  min-height: 70px;
}

/* Brand/Name section on the left side */
.nav-brand {
  /* Flexbox for icon and text alignment */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.nav-brand h2 {
  /* Remove default margin */
  margin: 0;
  /* Use heading font */
  font-family: var(--font-headings);
  /* Make it italic and bold as requested */
  font-style: italic;
  font-weight: bold;
  /* Text color */
  color: var(--color-text-primary);
  /* Font size */
  font-size: 1.5rem;
}

/* Icon styling within nav-brand h2 */
.nav-brand h2 i {
  /* Icon color - use primary brown/cream color */
  color: var(--color-primary);
}

.nav-brand-icon {
  /* Icon color */
  color: var(--color-primary);
  /* Icon size */
  font-size: 1.2rem;
}

/* ============================================================================ */
/* NAVIGATION MENU - HIDDEN (REPLACED BY FLOWING MENU) */
/* ============================================================================ */
/* The old horizontal navigation menu is now completely hidden */
/* We use the Flowing Menu overlay for both mobile AND desktop for a modern look */

.nav-menu {
  /* ALWAYS HIDDEN - We use the hamburger menu for all screen sizes now */
 display: none !important;
  /* Keep these for reference but they won't apply */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-md);
}

/* Nav list items - kept for structure but hidden */
.nav-menu li {
  display: inline-block;
}

/* Navigation links styling - kept for reference */
.nav-link {
  /* Font family */
  font-family: var(--font-subsections);
  /* Font size */
  font-size: 1rem;
  /* Font weight */
  font-weight: 500;
  /* Text color */
  color: var(--color-text-primary);
  /* Remove underline */
  text-decoration: none;
  /* Padding for clickable area */
  padding: var(--space-sm) var(--space-md);
  /* Smooth transition */
  transition: all var(--transition-fast);
  /* Flex for icon alignment */
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  /* Position for underline effect */
  position: relative;
}

/* Icon in navigation links */
.nav-link i {
  /* Icon size */
  font-size: 0.9rem;
  /* Icon color */
  color: var(--color-primary);
}

/* Hover effect for navigation links */
.nav-link:hover {
  /* Primary color on hover */
  color: var(--color-primary);
}

/* Active link styling (current section) */
.nav-link.active {
  /* Primary color for active link */
  color: var(--color-primary);
}
/* ============================================================================ */
/* OLD NAVIGATION - COMPLETELY REMOVED FOR CLEAN HAMBURGER-ONLY DESIGN */
/* ============================================================================ */
/* All previous navigation styles are disabled to create a modern, minimalist navbar */
/* The hamburger menu is now the ONLY navigation method on all screen sizes */

/* Force hide old menu in ALL cases - no exceptions */
.nav-menu,
.nav-menu.active,
.nav-link,
.nav-link i,
.nav-link::after,
.nav-link:hover,
.nav-link.active {
  /* Completely hide from view */
  display: none !important;
  /* Make unclickable */
  pointer-events: none !important;
  /* Remove from layout */
  visibility: hidden !important;
  /* Zero opacity as backup */
  opacity: 0 !important;
}


/* ============================================================================ */
/* HERO SECTION - FIRST SECTION VISITORS SEE */
/* ============================================================================ */

/* Main hero section */
.hero {
  /* Add top padding to account for fixed navbar */
  padding-top: 120px;
  /* Bottom padding */
  padding-bottom: var(--space-3xl);
  /* Gradient background for visual interest */
  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-surface) 100%);
  /* Minimum height */
  min-height: 70vh;
  /* Center content vertically */
  display: flex;
  align-items: center;
}

/* Hero content wrapper - Centered layout with image above text */
.hero-content {
  /* Center text */
  text-align: center;
  /* Maximum width */
  /* Increased only for this section to keep the full greeting on one line */
  max-width: 1400px;
  /* Center horizontally */
  margin: 0 auto;
}

/* Main hero title */
.hero-title {
  /* Use heading font */
  font-family: var(--font-headings);
  /* Italic and bold as requested */
  font-style: italic;
  font-weight: bold;
  /* Large font size for DESKTOP */
  font-size: 3.5rem;
  /* Margin below */
  margin-bottom: var(--space-lg);
  /* Tighter line height for better appearance */
  line-height: 1.2;
  /* Text color */
  color: var(--color-text-primary);
  /* Keep title on single line on DESKTOP */
  white-space: nowrap;
  /* Prevent accidental width constraints from causing wrapping */
  max-width: none;
}

/* ============================================================================ */
/* MOBILE RESPONSIVE - HERO TITLE FIX */
/* ============================================================================ */
/* CRITICAL FIX for mobile visibility */
/* On mobile, the large font and nowrap cause content to overflow off-screen */

@media (max-width: 768px) {
  .hero-title {
    /* ALLOW TEXT WRAPPING on mobile */
    white-space: normal !important;
    
    /* REDUCE FONT SIZE for mobile screens */
    font-size: 2rem !important;
    
    /* Allow wrapping and proper width */
    max-width: 100% !important;
    
   /* Add word break for long names */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .hero {
    /* Reduce top padding on mobile */
    padding-top: 100px !important;
  }
  
  .hero-subtitle {
    /* Smaller subtitle on mobile */
    font-size: 1.1rem !important;
  }
  
  .hero-description {
    /* Smaller description on mobile */
    font-size: 1rem !important;
  }
}

/* Highlighted name in hero title */
.hero-title .highlight {
  /* Primary color for name */
  color: var(--color-primary);
}

/* Blinking cursor for the typing effect. Color uses existing primary color to match theme. */
.typing-cursor {
  /* Visible caret that blinks next to the typed name */
  display: inline-block;
  width: 0;                    /* classic caret (no width, only the border shows) */
  height: 1em;                 /* match text line height */
  margin-left: 4px;            /* small gap from the last character */
  border-right: 2px solid var(--color-primary);
  /* Faster blink for a more responsive feel */
  animation: typing-caret-blink 0.75s steps(1, end) infinite;
  vertical-align: baseline;    /* align with text baseline */
}

@keyframes typing-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Hero icon */
.hero-icon {
  /* Margin right of icon */
  margin-right: var(--space-sm);
  /* Primary color */
  color: var(--color-primary);
}

/* Hero subtitle */
.hero-subtitle {
  /* Use subsection font */
  font-family: var(--font-subsections);
  /* Font size */
  font-size: 1.3rem;
  /* Italic style */
  font-style: italic;
  /* Secondary text color */
  color: var(--color-text-secondary);
  /* Margin below */
  margin-bottom: var(--space-md);
  /* Max width for better readability */
  max-width: 700px;
  /* Center horizontally */
  margin-left: auto;
  margin-right: auto;
}

/* Hero description */
.hero-description {
  /* Font size */
  font-size: 1.1rem;
  /* Secondary text color */
  color: var(--color-text-secondary);
  /* Margin below */
  margin-bottom: var(--space-xl);
  /* Max width */
  max-width: 600px;
  /* Center horizontally */
  margin-left: auto;
  margin-right: auto;
}

/* Hero action buttons */
.hero-buttons {
  /* Flexbox layout */
  display: flex;
  /* Gap between buttons */
  gap: var(--space-lg);
  /* Center buttons */
  justify-content: center;
  /* Allow wrapping on small screens */
  flex-wrap: wrap;
}

/* Mobile responsive hero */
@media (max-width: 768px) {
  .hero {
    /* Reduce top padding on mobile */
    padding-top: 100px;
    /* Reduce bottom padding */
    padding-bottom: var(--space-2xl);
  }
  
  .hero-title {
    /* Smaller font size on mobile to guard against overflow */
    font-size: 2.2rem;
  }
  
  .hero-subtitle {
    /* Smaller subtitle on mobile */
    font-size: 1.1rem;
  }
  
  .hero-buttons {
    /* Stack buttons vertically on mobile */
    flex-direction: column;
    /* Center align buttons */
    align-items: center;
  }
}

/* -------------------------------------------------------------------------- */
/* MOBILE-TUNED WRAPPING FOR TYPED NAME                                       */
/* On small screens, allow wrapping and adjust font size so the typing stays  */
/* within the viewport. Desktop remains single-line as-is.                    */
/* -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero-title {
    /* Allow wrapping only on small screens to prevent off-screen overflow */
    white-space: normal;
    /* Help the browser wrap anywhere if needed (names in different scripts) */
    overflow-wrap: anywhere;
    word-break: normal;
    /* Slightly smaller for narrow devices */
    font-size: 2rem;
    line-height: 1.25;
  }
  .hero-content {
    /* Ensure container doesn't constrain the title width on small screens */
    max-width: 100%;
  }
  .typing-cursor {
    /* Keep caret visually aligned with the slightly smaller line height */
    height: 0.9em;
  }
}

@media (max-width: 380px) {
  .hero-title {
    /* Extra safeguard for very narrow devices */
    font-size: 1.8rem;
  }
}

/* ============================================================================ */
/* HERO SECTION - PHOTO LAYOUT STYLES */
/* ============================================================================ */
/* This section contains all the styles for the hero section */
/* The hero section is the first thing visitors see - your photo, name, and introduction */
/* The layout is: Photo above, then name, then description, then buttons */


/* ============================================================================ */
/* HERO PHOTO CONTAINER - POSITIONING AND LAYOUT */
/* ============================================================================ */
/* This styles the container that holds your profile photo */
/* It centers the photo above the text content */

.hero-photo-container {
    /* FLEXBOX LAYOUT */
    /* display: flex makes this container a flexbox */
    /* justify-content: center centers the photo horizontally */
    display: flex;
    justify-content: center;
    
    /* SPACING */
    /* margin-bottom adds space between the photo and the text below */
    margin-bottom: var(--space-xl);
}

/* ============================================================================ */
/* HERO PHOTO - CIRCULAR IMAGE STYLING */
/* ============================================================================ */
/* This styles your actual profile photo */
/* It creates a perfect circle with a brown border */

.hero-photo {
    /* SIZE - MEDIUM SIZE, NOT TOO SMALL, NOT TOO BIG */
    width: 200px;              /* Width of the photo */
    height: 200px;             /* Height of the photo (same as width for perfect circle) */
    
    /* CIRCULAR SHAPE */
    border-radius: 50%;        /* Makes it a perfect circle (50% of width/height) */
    
    /* BROWN BORDER */
    border: 4px solid var(--color-primary);  /* 4px solid brown border using your primary color */
    
    /* VISUAL EFFECTS */
    box-shadow: var(--shadow-medium);        /* Adds a subtle shadow for depth */
    
    /* IMAGE FITTING */
    object-fit: cover;         /* Ensures the image fills the circle properly without distortion */
    object-position: center;   /* Centers the image within the circle if it needs to be cropped */
}


/* Mobile responsive adjustments for the hero section */
@media (max-width: 768px) {
    .hero-photo {
        width: 180px;            /* Slightly smaller on mobile */
        height: 180px;
    }
    
    .hero-title {
        font-size: 2.8rem;       /* Adjust title size for mobile */
    }
}

/* ============================================================================ */
/* SCROLL TO TOP BUTTON - GLASS EFFECT STYLING */
/* ============================================================================ */
/* This button appears in the bottom-left corner when you scroll down */
/* It has a beautiful glass effect with brown styling */
/* When clicked, it smoothly scrolls back to the top of the page */

/* ============================================================================ */
/* SCROLL TO TOP BUTTON - BASE STYLES */
/* ============================================================================ */
/* These are the basic styles that define how the button looks and behaves */

.scroll-to-top {
    /* POSITIONING - FIXED IN BOTTOM LEFT CORNER */
    position: fixed;           /* Fixed position means it stays in the same place when scrolling */
    bottom: 30px;             /* 30px from the bottom of the screen */
    left: 30px;               /* 30px from the left side of the screen */
    
    /* SIZE AND SHAPE - CIRCULAR BUTTON */
    width: 50px;              /* Width of the button */
    height: 50px;             /* Height of the button (same as width for perfect circle) */
    border-radius: 50%;       /* Makes it a perfect circle */
    
    /* GLASS EFFECT BACKGROUND */
    /* This creates the beautiful glass effect you requested */
    background: rgba(255, 248, 231, 0.4); /* Light cream color with 40% opacity (transparency) */
    backdrop-filter: blur(15px) saturate(150%);          /* Blurs the background behind the button (glass effect) */
    -webkit-backdrop-filter: blur(15px) saturate(150%);  /* Same effect for Safari browsers */
    
    /* BROWN BORDER AND ICON COLOR */
    border: 1px solid rgba(255, 255, 255, 0.4);  /* 2px solid brown border */
    color: var(--color-primary);             /* Brown color for the arrow icon */
    
    /* TYPOGRAPHY - ICON SIZE */
    font-size: 18px;          /* Size of the arrow icon */
    
    /* INTERACTION - HOVER AND CLICK EFFECTS */
    cursor: pointer;          /* Shows a hand cursor when hovering over the button */
    transition: all 0.3s ease;  /* Smooth animation for all changes */
    
    /* VISIBILITY - HIDDEN BY DEFAULT */
    display: none;            /* Hidden by default, shown when scrolling down */
    
    /* LAYERING - STAYS ABOVE OTHER CONTENT */
    z-index: 1000;           /* High z-index ensures it appears above other elements */
    
    /* VISUAL EFFECTS - DEPTH AND SHADOW */
    box-shadow: var(--shadow-medium);  /* Adds a subtle shadow for depth */
    
    /* REMOVE DEFAULT BUTTON STYLES */
    outline: none;           /* Removes the default browser outline */
    /* border: none;            /* Removes default border */
    border: 1px solid rgba(255, 255, 255, 0.4);  /* Adds our custom brown border */
}

/* Show button when scrolled down */
.scroll-to-top.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover effect */
.scroll-to-top:hover {
    /* Darker background on hover */
    background: rgba(255, 248, 231, 0.6);
    /* Scale up slightly */
    transform: scale(1.1);
    /* Stronger shadow */
    box-shadow: var(--shadow-heavy);
    /* Darker border */
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

/* Active state */
.scroll-to-top:active {
    transform: scale(0.95);
}

/* Focus state for accessibility */
.scroll-to-top:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        left: 20px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}

/* ============================================================================ */
/* SECTIONS - COMMON STYLES FOR ALL CONTENT SECTIONS */
/* ============================================================================ */

/* All main sections */
section {
  /* Padding top and bottom */
  padding: var(--space-3xl) 0;
}

/* Section titles */
.section-title {
  /* Use heading font */
  font-family: var(--font-headings);
  /* Italic and bold as requested */
  font-style: italic;
  font-weight: bold;
  /* Font size */
  font-size: 2.5rem;
  /* Center text */
  text-align: center;
  /* Margin below */
  margin-bottom: var(--space-2xl);
  /* Text color */
  color: var(--color-text-primary);
  /* Relative position for the underline */
  position: relative;
}

/* Section title icons */
.section-icon {
  /* Margin right */
  margin-right: var(--space-sm);
  /* Primary color */
  color: var(--color-primary);
}

/* Decorative underline for section titles */
.section-title::after {
  /* Empty content */
  content: '';
  /* Block element */
  display: block;
  /* Width of the underline */
  width: 80px;
  /* Height */
  height: 3px;
  /* Color */
  background-color: var(--color-primary);
  /* Center it */
  margin: var(--space-md) auto 0;
  /* Rounded ends */
  border-radius: 2px;
}

/* Alternating section backgrounds - UPDATED: Includes Articles section
   CHANGES MADE:
   1. Added Articles section to alternating pattern
   2. Now follows proper alternating pattern:
      - Hero: Default background (--color-background) - Light
      - About: --color-surface (alternating) - Dark
      - Journey: Default background (--color-background) - Light
      - Experience: --color-surface (alternating) - Dark
      - Skills: Default background (--color-background) - Light
      - Projects: --color-surface (alternating) - Dark
      - Articles: Default background (--color-background) - Light ← NEW
      - Contact: --color-surface (alternating) - Dark ← UPDATED
      - Resume: Default background (--color-background) - Light ← UPDATED */
.about,
.experience,
.projects,
.contact {
  /* Slightly different background for visual separation */
  background-color: var(--color-surface);
}

/* Articles and Resume sections have default background (light) */
.articles,
.resume {
  /* Default background to differentiate from previous sections */
  background-color: var(--color-background);
}

/* ============================================================================ */
/* ABOUT SECTION - PERSONAL STORY */
/* ============================================================================ */

/* About content wrapper */
.about-content p {
  /* Font size */
  font-size: 1.1rem;
  /* Line height for readability */
  line-height: 1.7;
  /* Margin below each paragraph */
  margin-bottom: var(--space-lg);
  /* Max width for readability */
  max-width: 800px;
  /* Center horizontally */
  margin-left: auto;
  margin-right: auto;
  /* Justify text for clean appearance */
  text-align: justify;
}

/* Quote icons in paragraphs */
.quote-icon {
  /* Margin right */
  margin-right: var(--space-sm);
  /* Primary color */
  color: var(--color-primary);
  /* Slightly smaller than text */
  font-size: 0.9em;
}

/* ============================================================================ */
/* JOURNEY SECTION - PROFESSIONAL STORY */
/* ============================================================================ */

/* Journey content styling */
.journey-content p {
  /* Font size */
  font-size: 1.1rem;
  /* Line height */
  line-height: 1.7;
  /* Margin below */
  margin-bottom: var(--space-lg);
  /* Max width */
  max-width: 800px;
  /* Center horizontally */
  margin-left: auto;
  margin-right: auto;
  /* Justify text */
  text-align: justify;
}

/* ============================================================================ */
/* EXPERIENCE SECTION - PROFESSIONAL EXPERIENCE */
/* ============================================================================ */

/* Experience item container */
.experience-item {
  /* Max width */
  max-width: 900px;
  /* Center horizontally */
  margin: 0 auto;
  /* Background color */
  background-color: var(--color-card-bg);
  /* Padding */
  padding: var(--space-xl);
  /* Rounded corners */
  border-radius: var(--radius-lg);
  /* Border */
  border: 2px solid var(--color-border);
  /* Shadow */
  box-shadow: var(--shadow-light);
  /* Smooth hover transition */
  transition: all var(--transition-normal);
}

/* Hover effect for experience item */
.experience-item:hover {
  /* Lift up slightly */
  transform: translateY(-3px);
  /* Increase shadow */
  box-shadow: var(--shadow-medium);
  /* Slightly stronger border */
  border-color: var(--color-primary-light);
}

/* Experience header */
.experience-header {
  /* Margin below */
  margin-bottom: var(--space-lg);
}

/* Experience title */
.experience-title {
  /* Font family */
  font-family: var(--font-subsections);
  /* Font size */
  font-size: 1.8rem;
  /* Font weight */
  font-weight: 600;
  /* Text color */
  color: var(--color-text-primary);
  /* Margin below */
  margin-bottom: var(--space-sm);
  /* Flex for icon alignment */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Experience icon */
.experience-icon {
  /* Primary color */
  color: var(--color-primary);
}

/* Company information */
.experience-company {
  /* Flex layout */
  display: flex;
  /* Space between company and duration */
  justify-content: space-between;
  /* Center align */
  align-items: center;
  /* Allow wrapping on mobile */
  flex-wrap: wrap;
  /* Gap between items */
  gap: var(--space-md);
}

/* Company link - FIXED hover effect */
.company-link {
  /* Remove underline */
  text-decoration: none !important;
  /* Primary color */
  color: var(--color-primary) !important;
  /* Font weight */
  font-weight: 600;
  /* Font size */
  font-size: 1.2rem;
  /* Smooth transition */
  transition: color var(--transition-fast);
  /* Flex for icon alignment */
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

/* FIXED: Company link hover effect - text stays visible */
.company-link:hover {
  /* Darker color on hover */
  color: var(--color-primary-hover) !important;
  /* Ensure text stays visible */
  opacity: 1 !important;
  /* Ensure background stays transparent */
  background-color: transparent !important;
  /* Ensure no text decoration */
  text-decoration: none !important;
}

/* Experience duration */
.experience-duration {
  /* Secondary text color */
  color: var(--color-text-secondary);
  /* Font style */
  font-style: italic;
  /* Flex for icon alignment */
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Company description */
.company-description {
  /* Background color */
  background-color: var(--color-light-cream);
  /* Padding */
  padding: var(--space-md);
  /* Rounded corners */
  border-radius: var(--radius-md);
  /* Margin below */
  margin-bottom: var(--space-lg);
  /* Line height */
  line-height: 1.6;
  /* Border */
  border-left: 4px solid var(--color-primary);
}

/* Experience description */
.experience-description {
  /* Margin below */
  margin-bottom: var(--space-lg);
}

.experience-description p {
  /* Font size */
  font-size: 1.1rem;
  /* Line height */
  line-height: 1.6;
  /* No margin (handled by parent) */
  margin: 0;
}

/* Responsibilities section */
.responsibilities {
  /* Margin below */
  margin-bottom: var(--space-lg);
}

.responsibilities h4 {
  /* Font family */
  font-family: var(--font-subsections);
  /* Font size */
  font-size: 1.3rem;
  /* Font weight */
  font-weight: 600;
  /* Margin below */
  margin-bottom: var(--space-md);
  /* Text color */
  color: var(--color-text-primary);
}

/* Responsibility list */
.responsibility-list {
  /* Remove default list styling */
  list-style: none;
  /* Remove padding */
  padding: 0;
}

.responsibility-list li {
  /* Flex for icon alignment */
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  /* Margin below */
  margin-bottom: var(--space-sm);
  /* Padding */
  padding: var(--space-sm);
  /* Background */
  background-color: var(--color-background);
  /* Rounded corners */
  border-radius: var(--radius-sm);
  /* Line height */
  line-height: 1.5;
}

.responsibility-list li i {
  /* Icon color */
  color: var(--color-primary);
  /* Margin top for alignment */
  margin-top: 2px;
  /* Prevent shrinking */
  flex-shrink: 0;
}

/* Key takeaways section */
.key-takeaways {
  margin-top: 1.5rem;
  padding: 1rem 0;
}

.takeaways-heading {
  font-family: var(--font-subsections);
  color: #2D1B14;  /* Direct brown color instead of variable */
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.takeaways-heading i {
  color: #8B4513;  /* Direct brown color instead of variable */
  font-size: 1.25em;
  margin-right: 0.3em;
}

.takeaway-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem 1rem;
  margin-bottom: 1rem;
}

.takeaway-item {
  color: #8B4513;  /* Direct brown color */
  position: relative;
  padding-left: 1.2rem;
  padding-right: 0.5rem;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  transition: all 0.3s ease;
  opacity: 1;
}

.takeaway-item:before {
  content: "→";
  color: #8B4513;  /* Direct brown color */
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.expand-btn {
  background: none;
  border: 1px solid #8B4513;  /* Direct brown color */
  color: #8B4513;  /* Direct brown color */
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.expand-btn:hover {
  background: #8B4513;  /* Direct brown color */
  color: #FFFBF0;  /* Direct cream color */
  transform: translateY(-1px);
}

.expandable-item {
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.expandable-item.show {
  display: list-item;
  opacity: 1;
  max-height: 100px;
  padding-top: inherit;
  padding-bottom: inherit;
  margin: inherit;
}

.expand-btn i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.expand-btn.expanded i {
  transform: rotate(180deg);
}

.expand-btn.hidden {
  display: none;
}

/* Mobile responsive experience section */
@media (max-width: 768px) {
  .experience-item {
    /* Less padding on mobile */
    padding: var(--space-lg);
  }
  
  .experience-title {
    /* Smaller font on mobile */
    font-size: 1.5rem;
  }
  
  .experience-company {
    /* Stack vertically on mobile */
    flex-direction: column;
    align-items: flex-start;
  }
  
  .takeaway-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  
  .takeaway-item {
    padding-right: 0;
  }
}

/* ============================================================================ */
/* SKILLS SECTION - TECHNICAL SKILLS DISPLAY (ENHANCED WITH ICONS) */
/* ============================================================================ */

/* Skills grid container */
.skills-grid {
  /* CSS Grid layout */
  display: grid;
  /* Auto-fit columns with minimum width */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* Gap between grid items */
  gap: var(--space-lg);
  /* Maximum width */
  max-width: 1000px;
  /* Center horizontally */
  margin: 0 auto;
}

/* Individual skill category cards */
.skill-category {
  /* Background color */
  background-color: var(--color-card-bg);
  /* Padding */
  padding: var(--space-lg);
  /* Rounded corners */
  border-radius: var(--radius-lg);
  /* Border */
  border: 2px solid var(--color-border);
  /* Smooth transition for hover effects */
  transition: all var(--transition-normal);
  /* Position for hover effect */
  position: relative;
  /* Overflow hidden for clean borders */
  overflow: hidden;
}

/* Hover effect for skill categories */
.skill-category:hover {
  /* Lift up */
  transform: translateY(-5px);
  /* Increase shadow */
  box-shadow: var(--shadow-medium);
  /* Primary border color */
  border-color: var(--color-primary-light);
}

/* Special skill category (honorable mention) */
.skill-category.special {
  /* Gradient background */
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-light-cream) 100%);
  /* Center text */
  text-align: center;
  /* Primary border */
  border-color: var(--color-primary);
}

/* Skill category titles */
.skill-title {
  /* Font family */
  font-family: var(--font-subsections);
  /* Font size */
  font-size: 1.3rem;
  /* Font weight */
  font-weight: 600;
  /* Margin below */
  margin-bottom: var(--space-md);
  /* Text color */
  color: var(--color-text-primary);
  /* Flex for icon alignment */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Skill icons */
.skill-icon {
  /* Primary color */
  color: var(--color-primary);
  /* Font size - increased for better visibility */
  font-size: 1.5rem;
}

/* Skill lists */
.skill-list {
  /* Remove default list styling */
  list-style: none;
  /* Remove padding */
  padding: 0;
  /* Remove margin */
  margin: 0;
}

/* Individual skill items - ENHANCED with better icons */
.skill-list li {
  /* Flex for icon alignment */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* Padding */
  padding: var(--space-sm) 0;
  /* Border bottom */
  border-bottom: 1px solid var(--color-border-light);
  /* Font family for code/technical items */
  font-family: var(--font-monospace);
  /* Font size */
  font-size: 1rem;
  /* Text color */
  color: var(--color-text-secondary);
  /* Smooth transition */
  transition: all var(--transition-fast);
}

/* Remove border from last item */
.skill-list li:last-child {
  border-bottom: none;
}

/* Hover effect for skill items */
.skill-list li:hover {
  /* Primary text color on hover */
  color: var(--color-text-primary);
  /* Light background on hover */
  background-color: var(--color-light-cream);
  /* Rounded corners */
  border-radius: var(--radius-sm);
  /* Add padding for hover effect */
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

/* Skill list icons */
.skill-list li i {
  /* Primary color */
  color: var(--color-primary);
  /* Fixed width for alignment */
  width: 20px;
  /* Center the icon */
  text-align: center;
  /* Slightly larger font */
  font-size: 1.1em;
}

/* Honorable mention text */
.honorable-mention {
  /* Font size */
  font-size: 1.2rem;
  /* Font weight */
  font-weight: 600;
  /* No margin */
  margin: 0;
  /* Primary text color */
  color: var(--color-text-primary);
  /* Flex for icon alignment */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

/* Mobile responsive skills */
@media (max-width: 768px) {
  .skills-grid {
    /* Single column on mobile */
    grid-template-columns: 1fr;
    /* Minimum width for mobile */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .skill-category {
    /* Less padding on mobile */
    padding: var(--space-md);
  }
}

/* ============================================================================ */
/* PROJECTS SECTION - PROJECT SHOWCASE */
/* ============================================================================ */

/* Projects content wrapper */
.projects-content {
  /* Center text */
  text-align: center;
  /* Maximum width */
  max-width: 600px;
  /* Center horizontally */
  margin: 0 auto;
}

/* Projects description */
.projects-description {
  /* Font size */
  font-size: 1.2rem;
  /* Margin below */
  margin-bottom: var(--space-lg);
  /* Secondary text color */
  color: var(--color-text-secondary);
}

/* Projects link button */
.projects-link {
  /* Inline flex for icon and text */
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  /* Font size */
  font-size: 1.1rem;
}

/* ============================================================================ */
/* ARTICLES SECTION - BLOG ARTICLES SHOWCASE */
/* ============================================================================ */
/* This section displays blog articles and technical writings */
/* Uses a grid layout for article cards */

/* Articles content wrapper */
.articles-content {
  /* Maximum width */
  max-width: 1000px;
  /* Center horizontally */
  margin: 0 auto;
}

/* Articles description */
.articles-description {
  /* Center text */
  text-align: center;
  /* Font size */
  font-size: 1.2rem;
  /* Margin below */
  margin-bottom: var(--space-xl);
  /* Secondary text color */
  color: var(--color-text-secondary);
}

/* Articles grid - CSS Grid layout for article cards */
.articles-grid {
  /* CSS Grid layout */
  display: grid;
  /* Auto-fit columns with minimum width of 300px */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* Gap between cards */
  gap: var(--space-xl);
  /* Maximum width */
  max-width: 1000px;
  /* Center horizontally */
  margin: 0 auto;
}

/* Article card - Individual article display */
.article-card {
  /* Background color */
  background-color: var(--color-card-bg);
  /* Padding */
  padding: var(--space-xl);
  /* Rounded corners */
  border-radius: var(--radius-lg);
  /* Border */
  border: 2px solid var(--color-border);
  /* Shadow */
  box-shadow: var(--shadow-light);
  /* Smooth transition for hover effects */
  transition: all var(--transition-normal);
  /* Display as flex column */
  display: flex;
  flex-direction: column;
  /* Height to match tallest card */
  height: 100%;
}

/* Hover effect for article card */
.article-card:hover {
  /* Lift up slightly */
  transform: translateY(-5px);
  /* Increase shadow */
  box-shadow: var(--shadow-medium);
  /* Primary border color */
  border-color: var(--color-primary-light);
}

/* Article card header - Contains title and date */
.article-card-header {
  /* Margin below */
  margin-bottom: var(--space-md);
  /* Border bottom */
  border-bottom: 2px solid var(--color-border-light);
  /* Padding bottom */
  padding-bottom: var(--space-md);
}

/* Article card title */
.article-card-title {
  /* Font family */
  font-family: var(--font-subsections);
  /* Font size */
  font-size: 1.5rem;
  /* Font weight */
  font-weight: 600;
  /* Text color */
  color: var(--color-text-primary);
  /* Margin below */
  margin-bottom: var(--space-sm);
  /* Flex for icon alignment */
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Article card icon */
.article-card-icon {
  /* Primary color */
  color: var(--color-primary);
  /* Font size */
  font-size: 1.3rem;
}

/* Article card date */
.article-card-date {
  /* Font family */
  font-family: var(--font-body);
  /* Font size */
  font-size: 0.9rem;
  /* Secondary text color */
  color: var(--color-text-secondary);
  /* Italic style */
  font-style: italic;
  /* Display as block */
  display: block;
  /* Margin top */
  margin-top: var(--space-xs);
}

/* Article card description */
.article-card-description {
  /* Font size */
  font-size: 1rem;
  /* Line height */
  line-height: 1.6;
  /* Text color */
  color: var(--color-text-secondary);
  /* Margin below */
  margin-bottom: var(--space-lg);
  /* Flex grow to push button down */
  flex-grow: 1;
}

/* Article card link button */
.article-card-link {
  /* Inline flex for icon and text */
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  /* Font size */
  font-size: 1rem;
  /* Align to start */
  align-self: flex-start;
  /* Margin top auto to push to bottom */
  margin-top: auto;
}

/* Mobile responsive articles section */
@media (max-width: 768px) {
  .articles-grid {
    /* Single column on mobile */
    grid-template-columns: 1fr;
    /* Smaller gap */
    gap: var(--space-lg);
  }
  
  .article-card {
    /* Less padding on mobile */
    padding: var(--space-lg);
  }
  
  .article-card-title {
    /* Smaller font on mobile */
    font-size: 1.3rem;
  }
}

/* ============================================================================ */
/* CONTACT SECTION - SOCIAL LINKS AND CONTACT INFO (FIXED HOVER EFFECTS) */
/* ============================================================================ */

/* Contact description */
.contact-description {
  /* Center text */
  text-align: center;
  /* Font size */
  font-size: 1.2rem;
  /* Margin below */
  margin-bottom: var(--space-xl);
  /* Maximum width */
  max-width: 600px;
  /* Center horizontally */
  margin-left: auto;
  margin-right: auto;
  /* Secondary text color */
  color: var(--color-text-secondary);
}

/* Contact links grid */
.contact-links {
  /* CSS Grid layout */
  display: grid;
  /* Auto-fit columns */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* Gap between items */
  gap: var(--space-lg);
  /* Maximum width */
  max-width: 800px;
  /* Center horizontally */
  margin: 0 auto;
}

/* Individual contact links - FIXED hover effects */
.contact-link {
  /* Flex layout */
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* Padding */
  padding: var(--space-lg);
  /* Background color */
  background-color: var(--color-card-bg);
  /* Rounded corners */
  border-radius: var(--radius-lg);
  /* Border */
  border: 2px solid var(--color-border);
  /* Remove underline */
  text-decoration: none !important;
  /* Text color */
  color: var(--color-text-primary) !important;
  /* Smooth transition */
  transition: all var(--transition-normal);
  /* Font family */
  font-family: var(--font-subsections);
  /* Font size */
  font-size: 1rem;
  /* Font weight */
  font-weight: 500;
}

/* FIXED: Contact link hover effect - text stays visible and readable */
.contact-link:hover {
  /* Lift up */
  transform: translateY(-3px);
  /* Increase shadow */
  box-shadow: var(--shadow-medium);
  /* Primary border */
  border-color: var(--color-primary);
  /* FIXED: Ensure text stays visible and readable */
  color: var(--color-text-primary) !important;
  /* FIXED: Ensure background stays correct */
  background-color: var(--color-card-bg) !important;
  /* FIXED: Ensure no text decoration */
  text-decoration: none !important;
  /* FIXED: Ensure full opacity */
  opacity: 1 !important;
}

/* Coming soon link style */
.contact-link.coming-soon {
  /* Reduced opacity */
  opacity: 0.7;
  /* Muted text color */
  color: var(--color-text-muted) !important;
  /* Not clickable */
  cursor: default;
  /* Pointer events disabled */
  pointer-events: none;
}

/* Contact icons */
.contact-icon {
  /* Size */
  font-size: 1.5rem;
  /* Fixed width and height */
  width: 50px;
  height: 50px;
  /* Flex centering */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Background color */
  background-color: var(--color-primary-light);
  /* Circular shape */
  border-radius: var(--radius-full);
  /* Icon color */
  color: var(--color-primary);
  /* Prevent shrinking */
  flex-shrink: 0;
  /* Smooth transition */
  transition: all var(--transition-fast);
}

/* Contact icon hover effect */
.contact-link:hover .contact-icon {
  /* Primary background */
  background-color: var(--color-primary);
  /* Light text */
  color: var(--color-background);
  /* Scale up slightly */
  transform: scale(1.05);
}

/* Contact text */
.contact-text {
  /* Allow text to grow */
  flex-grow: 1;
  /* Font weight */
  font-weight: 500;
  /* FIXED: Ensure text stays visible */
  color: inherit !important;
}

/* Mobile responsive contact */
@media (max-width: 768px) {
  .contact-links {
    /* Single column on mobile */
    grid-template-columns: 1fr;
  }
  
  .contact-link {
    /* Less padding on mobile */
    padding: var(--space-md);
  }
}

/* ============================================================================ */
/* RESUME SECTION - RESUME DOWNLOAD */
/* ============================================================================ */

/* Resume content wrapper */
.resume-content {
  /* Center text */
  text-align: center;
  /* Maximum width */
  max-width: 600px;
  /* Center horizontally */
  margin: 0 auto;
}

/* Resume description */
.resume-description {
  /* Font size */
  font-size: 1.2rem;
  /* Margin below */
  margin-bottom: var(--space-lg);
  /* Secondary text color */
  color: var(--color-text-secondary);
}

/* Resume download section - NEW: Simplified for Codeberg Pages hosting with 60s timer
   CHANGES MADE:
   1. Replaced old placeholder styles with functional download section styles
   2. Replaced liquid wave animation with smooth morphing and slide/fade effects
   3. Created large, visible circular timer with 60-second animated border countdown
   4. Added smooth transitions and cubic-bezier easing for professional feel
   5. Implemented realistic single button merging with slide and fade animations
   6. Created responsive layout for both desktop and mobile
   7. Styled single view button with primary styling (download button appearance)
   8. Added information section with scale-balanced icon
   9. Fixed alternating color scheme by adding Projects to alternating pattern
   10. Simplified for web hosting compatibility (no local PDF files)
   11. Maintained website's color scheme and design language */
.resume-download-section {
  /* Padding */
  padding: var(--space-xl);
  /* Background color */
  background-color: var(--color-card-bg);
  /* Rounded corners */
  border-radius: var(--radius-lg);
  /* Border */
  border: 2px solid var(--color-border);
  /* Shadow */
  box-shadow: var(--shadow-light);
  /* Text alignment */
  text-align: center;
  /* Smooth transition */
  transition: all var(--transition-normal);
}

/* Hover effect for resume section */
.resume-download-section:hover {
  /* Lift up slightly */
  transform: translateY(-3px);
  /* Increase shadow */
  box-shadow: var(--shadow-medium);
  /* Slightly stronger border */
  border-color: var(--color-primary-light);
}

/* Resume options container - UPDATED: Enhanced for liquid wave animation */
.resume-options {
  /* Flexbox layout */
  display: flex;
  /* Gap between buttons */
  gap: var(--space-lg);
  /* Center buttons */
  justify-content: center;
  /* Allow wrapping on small screens */
  flex-wrap: wrap;
  /* Margin below */
  margin-bottom: var(--space-lg);
  /* Position relative for animation effects */
  position: relative;
  /* Smooth transitions for all child elements */
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth morphing animation keyframes - NEW: Realistic button merging effect */
@keyframes smoothMerge {
  0% {
    transform: scale(1) translateX(0);
    opacity: 1;
    border-radius: var(--radius-md);
  }
  25% {
    transform: scale(1.02) translateX(-2px);
    opacity: 0.9;
    border-radius: calc(var(--radius-md) + 2px);
  }
  50% {
    transform: scale(1.05) translateX(0);
    opacity: 0.8;
    border-radius: calc(var(--radius-md) + 4px);
  }
  75% {
    transform: scale(1.02) translateX(2px);
    opacity: 0.9;
    border-radius: calc(var(--radius-md) + 2px);
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1;
    border-radius: var(--radius-md);
  }
}

@keyframes smoothDemerge {
  0% {
    transform: scale(1) translateX(0);
    opacity: 1;
    border-radius: var(--radius-md);
  }
  25% {
    transform: scale(0.98) translateX(2px);
    opacity: 0.9;
    border-radius: calc(var(--radius-md) - 2px);
  }
  50% {
    transform: scale(0.95) translateX(0);
    opacity: 0.8;
    border-radius: calc(var(--radius-md) - 4px);
  }
  75% {
    transform: scale(0.98) translateX(-2px);
    opacity: 0.9;
    border-radius: calc(var(--radius-md) - 2px);
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 1;
    border-radius: var(--radius-md);
  }
}

/* Button slide and fade animation for merge */
@keyframes slideAndFade {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-10px) scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-20px) scale(0.9);
    opacity: 0;
  }
}

/* Button slide and fade animation for demerge */
@keyframes slideAndFadeIn {
  0% {
    transform: translateX(-20px) scale(0.9);
    opacity: 0;
  }
  50% {
    transform: translateX(-10px) scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Button text wrapper for smooth text transitions */
.btn-text {
  transition: all 0.5s ease;
  display: inline-block;
}

/* Dedicated circular timer - NEW: Large, visible timer with animated border */
.timer-display {
  /* Position absolute for overlay effect */
  position: absolute;
  top: -15px;
  right: -15px;
  /* Background */
  background-color: var(--color-background);
  color: var(--color-primary);
  /* Size and shape - much larger for visibility */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* Typography */
  font-size: 1rem;
  font-weight: bold;
  /* Flexbox centering */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Border for animated effect */
  border: 3px solid var(--color-primary);
  /* Z-index to stay on top */
  z-index: 10;
  /* Smooth transitions */
  transition: all 0.3s ease;
}

/* Animated border for countdown effect */
.timer-display::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-primary);
  border-right-color: var(--color-primary);
  /* Animation for countdown - UPDATED: 60 seconds for longer timer */
  animation: countdownSpin 60s linear infinite;
  z-index: -1;
}

/* Countdown spin animation */
@keyframes countdownSpin {
  0% {
    transform: rotate(0deg);
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  25% {
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    border-left-color: transparent;
  }
  50% {
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    border-left-color: var(--color-primary);
  }
  75% {
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    border-left-color: var(--color-primary);
  }
  100% {
    transform: rotate(360deg);
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    border-left-color: var(--color-primary);
  }
}

/* Pulse animation for timer */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

/* Resume download button */
.resume-download {
  /* Inline flex for icon and text */
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  /* Font size */
  font-size: 1.1rem;
}

/* Resume view button */
.resume-view {
  /* Inline flex for icon and text */
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  /* Font size */
  font-size: 1.1rem;
}

/* Merged button styling - NEW: Single button that appears after merge */
.resume-merged {
  /* Inline flex for icon and text */
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  /* Font size */
  font-size: 1.1rem;
  /* Position relative for timer */
  position: relative;
  /* Smooth transitions */
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* Smooth morphing animation */
  animation: smoothMerge 0.8s ease-in-out;
}

/* Button merge animation states - UPDATED: Simplified for single button */
.resume-options.merging .resume-view {
  /* Smooth transition to merge */
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* Slide and fade effect during merge */
  animation: slideAndFade 0.8s ease-in-out forwards;
}

.resume-options.demerging .resume-view {
  /* Smooth transition to demerge */
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  /* Slide and fade in effect during demerge */
  animation: slideAndFadeIn 0.8s ease-in-out forwards;
}

/* Merged button demerge animation - UPDATED: Using new smooth animations */
.resume-merged.demerging {
  /* Smooth demerge effect */
  animation: smoothDemerge 0.8s ease-in-out;
}

/* Resume information section */
.resume-info {
  /* Margin top */
  margin-top: var(--space-md);
}

/* Resume note text */
.resume-note {
  /* Font size */
  font-size: 1rem;
  /* Secondary text color */
  color: var(--color-text-secondary);
  /* Italic style */
  font-style: italic;
  /* Margin */
  margin: 0;
  /* Flex for icon alignment */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

/* ============================================================================ */
/* MARQUEE INNER TEXT - CONTINUOUSLY SCROLLING */
/* ============================================================================ */
/* The actual scrolling text and icons inside the marquee */
/* ALWAYS ANIMATING for continuous scrolling effect */

.marquee__inner {
  /* Flex layout for horizontal arrangement */
  display: flex;
  
  /* Needed for transform animation */
  position: relative;
  
  /* Ensure items don't wrap */
  white-space: nowrap;
  
  /* CONTINUOUS SCROLLING ANIMATION - ALWAYS ACTIVE */
  /* This makes the marquee scroll continuously, not just on hover */
  /* 15s duration for smooth,readable scrolling */
  animation: marquee 15s linear infinite;
  
  /* Make sure animation continues */
  will-change: transform;
}

/* When marquee is visible (on hover), continue the animation */
.menu__item:hover .marquee__inner {
  /* Animation already running, just ensure it continues */
  animation-play-state: running;
}

/* Resume note icon */
.resume-note i {
  /* Primary color */
  color: var(--color-primary);
  /* Slightly bigger - increased from 0.9em */
  font-size: 1.8em;
}

/* Mobile responsive resume section */
@media (max-width: 768px) {
  .resume-download-section {
    /* Less padding on mobile */
    padding: var(--space-lg);
  }
  
  .resume-options {
    /* Stack buttons vertically on mobile */
    flex-direction: column;
    align-items: center;
  }
  
  .resume-note {
    /* Smaller text on mobile */
    font-size: 0.9rem;
  }
}

/* ============================================================================ */
/* BUTTONS - REUSABLE BUTTON STYLES (FIXED HOVER EFFECTS) */
/* ============================================================================ */

/* Base button styles */
.btn {
  /* Inline flex for icon and text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  /* Padding */
  padding: var(--space-md) var(--space-lg);
  /* Rounded corners */
  border-radius: var(--radius-md);
  /* Font size */
  font-size: 1rem;
  /* Font weight */
  font-weight: 600;
  /* Font family */
  font-family: var(--font-subsections);
  /* Clickable cursor */
  cursor: pointer;
  /* Smooth transition */
  transition: all var(--transition-normal);
  /* Remove underline */
  text-decoration: none !important;
  /* Transparent border by default */
  border: 2px solid transparent;
  /* Relative position */
  position: relative;
  /* Hide overflow for effects */
  overflow: hidden;
  /* Prevent text selection */
  user-select: none;
}

/* Primary button style */
.btn--primary {
  /* Primary background */
  background-color: var(--color-primary);
  /* Light text */
  color: var(--color-background) !important;
  /* Primary border */
  border-color: var(--color-primary);
}

/* FIXED: Primary button hover */
.btn--primary:hover {
  /* Darker background */
  background-color: var(--color-primary-hover) !important;
  /* Darker border */
  border-color: var(--color-primary-hover);
  /* FIXED: Ensure text stays visible */
  color: var(--color-background) !important;
  /* Lift up */
  transform: translateY(-2px);
  /* Add shadow */
  box-shadow: var(--shadow-medium);
  /* FIXED: Ensure no text decoration */
  text-decoration: none !important;
}

/* Secondary button style - for View my Resume button */
.btn--secondary {
  /* Light background with primary border */
  background-color: var(--color-light-cream);
  /* Primary text color */
  color: var(--color-text-primary) !important;
  /* Primary border */
  border-color: var(--color-primary);
}

/* FIXED: Secondary button hover */
.btn--secondary:hover {
  /* Primary background */
  background-color: var(--color-primary) !important;
  /* Light text */
  color: var(--color-background) !important;
  /* Primary border */
  border-color: var(--color-primary);
  /* Lift up */
  transform: translateY(-2px);
  /* Add shadow */
  box-shadow: var(--shadow-light);
  /* FIXED: Ensure no text decoration */
  text-decoration: none !important;
}

/* Outline button style */
.btn--outline {
  /* Transparent background */
  background-color: transparent;
  /* Primary text color */
  color: var(--color-text-primary) !important;
  /* Border color */
  border-color: var(--color-border);
}

/* FIXED: Outline button hover */
.btn--outline:hover {
  /* Primary background */
  background-color: var(--color-primary) !important;
  /* Light text */
  color: var(--color-background) !important;
  /* Primary border */
  border-color: var(--color-primary);
  /* Lift up */
  transform: translateY(-2px);
  /* Add shadow */
  box-shadow: var(--shadow-light);
  /* FIXED: Ensure no text decoration */
  text-decoration: none !important;
}

/* Focus states for accessibility */
.btn:focus {
  /* Outline for keyboard navigation */
  outline: 3px solid var(--color-primary-light);
  /* Outline offset */
  outline-offset: 2px;
}

/* Disabled button */
.btn:disabled {
  /* Reduced opacity */
  opacity: 0.5;
  /* Not clickable cursor */
  cursor: not-allowed;
  /* No hover effects */
  pointer-events: none;
}

/* ============================================================================ */
/* FOOTER - BOTTOM SECTION */
/* ============================================================================ */

/* Main footer */
.footer {
  /* Dark background */
  background-color: var(--color-text-primary);
  /* Light text */
  color: var(--color-background);
  /* Center text */
  text-align: center;
  /* Padding */
  padding: var(--space-xl) 0;
  /* Border top */
  border-top: 4px solid var(--color-primary);
}

/* Footer text */
.footer p {
  /* No margin */
  margin: 0;
  /* Font family */
  font-family: var(--font-subsections);
  /* Reduced opacity */
  opacity: 0.9;
  /* Font size */
  font-size: 1rem;
}

/* Footer icon */
.footer i {
  /* Primary color */
  color: var(--color-primary);
  /* Margin */
  margin: 0 var(--space-xs);
}

/* Year scrolling animation container */
.year-container {
  display: inline-block;
  position: relative;
}

.year-scroll {
  display: inline-block;
  position: relative;
  width: 0.6em;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 1;
}

.year-scroll .year-digit {
  display: block;
  transition: transform 2s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}

/* Animated state - scrolls from 5 to 6 */
.year-scroll.scrolling .year-digit {
  transform: translateY(-100%);
}

/* ============================================================================ */
/* RESPONSIVE DESIGN - MOBILE AND TABLET STYLES */
/* ============================================================================ */

/* Tablet styles */
@media (max-width: 1024px) {
  .container {
    /* Reduce padding on tablets */
    padding: 0 var(--space-lg);
  }
  
  .section-title {
    /* Smaller titles on tablet */
    font-size: 2.2rem;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  /* Reduce section padding on mobile */
  section {
    padding: var(--space-2xl) 0;
  }
  
  /* Smaller section titles */
  .section-title {
    font-size: 2rem;
  }
  
  /* Stack hero buttons vertically */
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  /* Full width buttons on mobile */
  .btn {
    min-width: 200px;
  }
}

/* Small mobile styles */
@media (max-width: 480px) {
  /* Even smaller hero */
  .hero {
    padding: 90px 0 var(--space-2xl);
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  /* Smaller container padding */
  .container {
    padding: 0 var(--space-md);
  }
}

/* ============================================================================ */
/* UTILITY CLASSES - HELPFUL REUSABLE CLASSES */
/* ============================================================================ */

/* Text alignment utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Margin utilities */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Display utilities */
.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }

/* Accessibility - Screen reader only text */
.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;
}

/* ============================================================================ */
/* ANIMATIONS AND TRANSITIONS */
/* ============================================================================ */

/* Smooth transitions for interactive elements */
a, button, .btn, .nav-link, .contact-link, .skill-category, .experience-item {
  transition: all var(--transition-normal);
}

/* Focus styles for accessibility */
a:focus-visible, 
button:focus-visible, 
.btn:focus-visible, 
.nav-link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Scroll margin for anchor links (accounts for fixed navbar) */
section[id] {
  scroll-margin-top: 90px;
}

/* ============================================================================ */
/* PRINT STYLES - FOR WHEN PAGE IS PRINTED */
/* ============================================================================ */

@media print {
  /* Hide unnecessary elements when printing */
  .navbar,
  .hero-buttons,
  .contact-links,
  .resume-placeholder,
  .hamburger {
    display: none;
  }
  
  /* Adjust body for printing */
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: black;
    background: white;
  }
  
  /* Adjust section titles for printing */
  .section-title {
    font-size: 18pt;
    color: black;
  }
  
  /* Remove shadows and borders for printing */
  .skill-category,
  .experience-item,
  .contact-link {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  /* Ensure proper page breaks */
  section {
    page-break-inside: avoid;
  }
}

/* ============================================================================ */
/* END OF STYLESHEET - BUG FIXES SUMMARY */
/* ============================================================================ */

/*

FUTURE CUSTOMIZATION INSTRUCTIONS:

1. TO CHANGE COLORS:
   - Modify the CSS custom properties at the top of the file
   - All colors are defined in the :root section

2. TO ADD NEW SECTIONS:
   - Copy an existing section's structure
   - Add corresponding navigation links

3. TO MODIFY FONTS:
   - Change the font variables in the :root section
   - Update Google Fonts links in HTML if needed

4. TO ADD ANIMATIONS:
   - Use CSS transitions or keyframe animations
   - Keep animations subtle and professional

5. TO IMPROVE MOBILE RESPONSIVENESS:
   - Add more @media queries for different screen sizes
   - Test on actual devices when possible

Remember: Test all changes across different browsers and devices!
All hover effects have been fixed to ensure text remains visible and readable.
Mobile menu now appears on screens 640px and smaller.
*/

/* ============================================================================ */
/* FLOWING MENU STYLES - ANIMATED MOBILE NAVIGATION */
/* ============================================================================ */
/* These styles control the full-screen overlay menu with marquee effects */

.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* ADDED: Enable vertical scrolling for small mobile screens */
  overflow-y: auto;
  overflow-x: hidden;
  /* Smooth scrolling behavior */
  -webkit-overflow-scrolling: touch;
  background-color: var(--color-background); /* Matches theme background */
  z-index: 998; /* Below hamburger (999) but above content */
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.5s step-end;
}

/* When active, show the menu */
.menu-wrap.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 0.5s step-start;
}

.menu {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 80px 0 0 0; /* Space for top navbar */
  list-style: none; /* Remove default list styles */
}

/* Ensure menu items share vertical space equally */
.menu__item {
  flex: 1;
  position: relative;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid var(--color-border); /* Subtle divider */
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu__item:first-child {
  border-top: 1px solid var(--color-border);
}

/* ============================================================================ */
/* MENU ITEM LINK STYLING - WITH DETAILED COMMENTS */
/* ============================================================================ */
/* This is the visible text link that users see before hovering */

.menu__item-link {
  /* Use flexbox for perfect centering of text */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Take up full space of parent menu item */
  width: 100%;
  height: 100%;
  
  /* Position relative so it can be layered above/below marquee */
  position: relative;
  
  /* Show pointer cursor to indicate it's clickable */
  cursor: pointer;
  
  /* Transform text to uppercase for bold, menu-like appearance */
  text-transform: uppercase;
  
  /* Remove default link underline */
  text-decoration: none;
  
  /* Prevent text from wrapping to multiple lines */
  white-space: nowrap;
  
  /* Bold font weight for menu items */
  font-weight: 600;
  
  /* CRITICAL: Use darker color for better contrast against cream background */
  /* Dark brown/slate color ensures text is always visible */
  color: #2d1b14;
  
  /* Responsive font size: minimum 2rem, preferred 5vh, maximum 4rem */
  /* This ensures text is readable on all screen sizes */
  font-size: clamp(2rem, 5vh, 4rem);
  
  /* Use website's heading font family to match design */
  font-family: 'Trocchi', serif;
  
  /* Smooth color transition when hovering */
  transition: color 0.3s ease;
  
  /* Z-index 2 ensures text is above marquee background (z-index 1) */
  /* But below marquee text which needs to be visible */
  z-index: 2;
  
  /* CRITICAL FIX: Ensure text is ALWAYS visible */
  opacity: 1 !important;
}

/* ============================================================================ */
/* HOVER STATE - HIDE TEXT WHEN MARQUEE APPEARS */
/* ============================================================================ */
/* When marquee slides in, the link text should fade out completely */
/* This prevents text overlap as shown in user's screenshot */

.menu__item-link:hover {
  /* Fade out text when marquee appears */
  /* Using transition for smooth fade */
  opacity: 0 !important;
  
  /* Smooth fade transition */
  transition: opacity 0.4s ease;
}

.menu__item-link:focus-visible {
  background-color: var(--color-secondary);
  outline: none;
}

/* ============================================================================ */
/* MARQUEE ANIMATION - TRULY INFINITE SEAMLESS SCROLLING */
/* ============================================================================ */
/* Fixed approach: Single container with duplicated content */
/* The key is to have exactly 2 copies of content and animate by exactly 50% */

.marquee {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: var(--color-primary); /* Teal background on hover */
  
  /* Initial state: Hidden (moved down or up) - controlled by JS */
  transform: translate3d(0, 101%, 0);
  
  /* Smoother slide-in transition */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* WRAPPER: Contains the scrolling content */
.marquee__inner-wrap {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* INNER: The actual scrolling strip */
/* CRITICAL: Must contain exactly 2 copies of content */
/* Animation moves by exactly -50% to create seamless loop */
.marquee__inner {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
  
  /* INFINITE SCROLL ANIMATION */
  /* Moves from 0% to -50% (exactly one copy's width) */
  /* Then loops back to 0% creating seamless effect */
  animation: marqueeScroll 15s linear infinite;
  
  /* Prevent any gaps */
  will-change: transform;
}

/* KEYFRAMES: Move by exactly 50% for seamless loop */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    /* Move by 50% - this moves exactly one copy out of view */
    /* The second copy takes its place seamlessly */
    transform: translateX(-50%);
  }
}

/* TEXT ELEMENTS inside marquee */
.marquee span {
  color: var(--color-white); /* White text on Teal background */
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(2rem, 5vh, 4rem); /* Match link size */
  line-height: 1.2;
  padding: 0 1.5vw; /* Spacing between text items */
  font-family: 'Scope One', serif; /* Match website body font */
  display: inline-block; /* Prevent text wrapping */
}

/* ICON ELEMENTS inside marquee */
.marquee__img {
  width: auto;
  min-width: 60px;
  height: clamp(2rem, 5vh, 4rem);
  margin: 0 2vw; /* Spacing around icons */
  display: inline-flex; /* Changed from flex to inline-flex */
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: clamp(1.5rem, 4vh, 3rem); /* Large icon with limits */
}

/* Dark mode adjustments */
[data-color-scheme="dark"] .menu-wrap {
  background-color: var(--color-charcoal-700);
}

/* ============================================================================ */
/* HAMBURGER MENU ICON - MODERN EMOJI DESIGN WITH CREATIVE ANIMATIONS */
/* ============================================================================ */
/* Using hamburger emoji (🍔) for fun, recognizable icon */
/* Spins and scales when menu opens/closes for delightful user experience */

.hamburger {
  /* ALWAYS VISIBLE - Show on both mobile AND desktop */
  /* Modern minimalist design pattern */
  display: flex !important;
  
  /* Center the emoji */
  align-items: center;
  justify-content: center;
  
  /* Size of the clickable area - DESKTOP */
  width: 48px;
  height: 48px;
  
  /* Show pointer cursor to indicate clickability */
  cursor: pointer;
  
  /* Z-index ABOVE menu overlay (998) */
  z-index: 1001 !important;
  
  /* Position relative for z-index and pseudo-element positioning */
  position: relative;
  
  /* Smooth transitions for all animations */
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Remove default button/link styling */
  background: none;
  border: none;
  padding: 0;
  
  /* Emoji font size */
  font-size: 28px;
  
  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
}

/* ============================================================================ */
/* HAMBURGER ICON CONTENT - USING EMOJI */
/* ============================================================================ */
/* Display the hamburger emoji using ::before pseudo-element */
/* FIXED: Added background and proper sizing to make emoji VISIBLE */

.hamburger::before {
  /* The hamburger emoji */
  content: '🍔';
  
  /* FIXED: Better centering for emoji */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* CRITICAL FIX: Add visible background circle */
  /* Using brown color #8B4513 (saddle brown) with transparency */
  background: rgba(139, 69, 19, 0.15);
  border: 2px solid rgba(139, 69, 19, 0.3);
  border-radius: 50%;
  
  /* FIXED: Centered sizing for emoji container */
  width: 44px;
  height: 44px;
  
  /* FIXED: Center emoji text */
  text-align: center;
  line-height: 44px;
  
  /* Font size for emoji */
  font-size: 22px;
  
  /* Smooth rotation and scale animations */
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              background 0.3s ease,
              border-color 0.3s ease;
}

/* ============================================================================ */
/* HAMBURGER HOVER STATE - SUBTLE PREVIEW ANIMATION */
/* ============================================================================ */
/* Small rotation hint when user hovers but hasn't clicked */
/* ADDED: Background highlight for better visibility */

.hamburger:hover::before {
  /* Subtle tilt to show it's interactive */
  transform: rotate(-10deg) scale(1.1);
  
  /* Darken background on hover for feedback */
  background: rgba(139, 69, 19, 0.25);
  border-color: rgba(139, 69, 19, 0.5);
}

/* ============================================================================ */
/* HAMBURGER ACTIVE STATE - CREATIVE SPIN & TRANSFORM ANIMATION */
/* ============================================================================ */
/* When menu is open, hamburger spins dramatically and changes to X emoji */

.hamburger.active::before {
  /* CREATIVE ANIMATION: 360° spin + scale up */
  /* This creates a delightful "transformation" effect */
  transform: rotate(360deg) scale(1.15);
  
  /* Change to X emoji to indicate "close" action */
  content: '❌';
}

/* ============================================================================ */
/* OPTIONAL: Add subtle pulse animation when menu is active */
/* ============================================================================ */
/* Creates attention-grabbing effect */

.hamburger.active {
  /* Subtle pulsing animation */
  animation: hamburgerPulse 2s ease-in-out infinite;
}

@keyframes hamburgerPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

/* ============================================================================ */
/* HIDE OLD HAMBURGER SPANS - NO LONGER NEEDED */
/* ============================================================================ */
/* We're using emoji now, so hide the old span-based lines */

.hamburger span {
  /* Completely hide the old line-based design */
  display: none !important;
}

/* ============================================================================ */
/* DARK MODE SUPPORT */
/* ============================================================================ */
/* Emoji works in all color schemes, but we can add background for visibility */

[data-color-scheme="dark"] .hamburger {
  /* Style adjustments for hamburger in dark mode (placeholder) */
  display: flex; /* Inherit flex display */
}

/* ============================================================================ */
/* ARTICLE PAGE STYLES - BLOG/ARTICLE LAYOUT */
/* ============================================================================ */
/* These styles are specifically for article/blog post pages */
/* Desktop: 70% content left, 30% index right */
/* Mobile: Stacked layout with dropdown index */
/* 
LAST UPDATED: January 2026
CHANGES MADE:
1. Created article page layout with timeline snapshot
2. Desktop split: 70% content, 30% index
3. Mobile: Stacked with collapsible index
4. Added copy buttons for headings and code
5. Proper font assignments as specified
6. Timeline snapshot navigation

FUTURE MODIFICATIONS:
- To add new articles: Use same structure, update content
- To modify fonts: Update font-family properties
- To change layout: Modify grid/flexbox in article-container
*/

/* ============================================================================ */
/* ARTICLE NAVBAR - SIMPLIFIED (NO HAMBURGER) */
/* ============================================================================ */
/* Article pages have simplified navigation - just name, no hamburger menu */

.article-navbar {
  /* Same styling as main navbar but no hamburger menu */
  display: flex; /* Inherits navbar flex styling */
}

/* LEFT-ALIGN NAVBAR CONTENT ON ARTICLE PAGES */
/* This ensures the brand/name is on the left like the main website */
.article-navbar .nav-container {
  justify-content: flex-start !important; /* Override centering */
}

.article-navbar .nav-brand {
  margin-right: auto; /* Push brand to the left */
}

/* Hide hamburger on article pages */
.article-navbar ~ * .hamburger,
body:has(.article-navbar) .hamburger {
  display: none !important;
}

/* ============================================================================ */
/* TIMELINE SNAPSHOT - NAVIGATION BREADCRUMB */
/* ============================================================================ */
/* Shows: [Home Icon] --- [Title Capsule] --- [Current Heading] */
/* Home: Villa/home icon in circle (primary color) */
/* Title: Capsule shape with article title (Anonymous Pro font) */
/* Current: Current heading text (Anonymous Pro font, no shape) */
/* Connected by light visible lines */

.timeline-snapshot {
  /* Flexbox layout for horizontal arrangement */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  
  /* Padding and spacing */
  padding: var(--space-lg) var(--space-xl);
  /* FIXED: Add top margin to account for fixed navbar (70px navbar + 20px spacing) */
  margin: calc(70px + var(--space-xl)) auto var(--space-xl) auto;
  
  /* Maximum width to prevent stretching too wide */
  max-width: 1200px;
  
  /* Background color matching website theme */
  background-color: var(--color-background);
  
  /* Smooth transitions */
  transition: all var(--transition-normal);
  
  /* Wrap on mobile if needed */
  flex-wrap: wrap;
  
  /* FIXED: Ensure it's above other content but below navbar */
  position: relative;
  z-index: 10;
}

/* HOME ICON - CIRCLE WITH VILLA/HOME ICON */
.timeline-home {
  /* Circular shape */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  
  /* Primary color background */
  background-color: var(--color-primary);
  color: var(--color-background);
  
  /* Flexbox centering */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Icon size */
  font-size: 1.2rem;
  
  /* Remove underline */
  text-decoration: none;
  
  /* Smooth transitions */
  transition: all var(--transition-normal);
  
  /* Hover effect */
  cursor: pointer;
}

.timeline-home:hover {
  /* Slightly darker background on hover */
  background-color: var(--color-primary-hover);
  /* Slight scale up */
  transform: scale(1.1);
}

/* CRITICAL: Ensure icon inside timeline-home is always visible */
.timeline-home i {
  color: var(--color-background); /* Light color for contrast */
  transition: color var(--transition-normal);
}

.timeline-home:hover i {
  color: var(--color-background); /* Keep icon visible on hover */
}

/* CONNECTING LINE */
.timeline-line {
  /* Light visible line connecting elements */
  width: 60px;
  height: 2px;
  background-color: rgba(139, 69, 19, 0.3);
  
  /* Smooth transitions */
  transition: all var(--transition-normal);
}

/* TITLE CAPSULE - CAPSULE SHAPE WITH ARTICLE TITLE */
.timeline-title-capsule {
  /* Capsule shape (rounded rectangle) */
  padding: var(--space-sm) var(--space-lg);
  border-radius: 25px;
  
  /* Primary color border */
  border: 2px solid var(--color-primary);
  background-color: var(--color-background);
  
  /* Anonymous Pro font as specified */
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-primary);
  
  /* Smooth transitions */
  transition: all var(--transition-normal);
  
  /* Prevent text wrapping */
  white-space: nowrap;
}

/* CURRENT HEADING - NO SHAPE, JUST TEXT */
.timeline-current {
  /* No special shape, just text */
  font-family: 'Anonymous Pro', monospace;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  
  /* Smooth transitions */
  transition: all var(--transition-normal);
  
  /* FIXED: Hide by default, only show when there's a current heading */
  display: none;
}

/* Show current heading when it has content */
.timeline-current:not(:empty),
.timeline-current span:not(:empty) {
  display: block;
}

/* Mobile responsive timeline */
@media (max-width: 768px) {
  .timeline-snapshot {
    /* Smaller padding on mobile */
    padding: var(--space-md) var(--space-lg);
    /* Allow wrapping */
    flex-wrap: wrap;
    /* Smaller gap */
    gap: var(--space-sm);
  }
  
  .timeline-home {
    /* Smaller icon on mobile */
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .timeline-line {
    /* Shorter lines on mobile */
    width: 30px;
  }
  
  .timeline-title-capsule {
    /* Smaller text on mobile */
    font-size: 0.8rem;
    padding: var(--space-xs) var(--space-md);
  }
  
  .timeline-current {
    /* Smaller text on mobile */
    font-size: 0.8rem;
  }
}

/* ============================================================================ */
/* ARTICLE CONTAINER - MAIN LAYOUT */
/* ============================================================================ */
/* Desktop: 70% content left, 30% index right */
/* Mobile: Stacked with dropdown index */

.article-container {
  /* Maximum width */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  
  /* Desktop: Grid layout with 70/30 split */
  display: grid;
  grid-template-columns: 70% 30%;
  gap: var(--space-2xl);
  
  /* Align items to start */
  align-items: start;
}

/* Mobile: Stack layout */
@media (max-width: 1024px) {
  .article-container {
    /* Single column on mobile/tablet */
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ============================================================================ */
/* ARTICLE CONTENT - LEFT SIDE (70% on desktop) - FIXED */
/* ============================================================================ */

.article-content {
  /* Main content area */
  /* Takes 70% on desktop, full width on mobile */
  /* FIXED: Ensure proper width and prevent overflow */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ARTICLE TITLE - Zalando Sans Expanded font */
.article-title {
  font-family: 'Zalando Sans Expanded', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

/* ARTICLE DATE - Scope One font */
.article-date {
  font-family: 'Scope One', serif;
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2xl);
  font-style: italic;
}

/* ARTICLE BODY - FIXED */
.article-body {
  /* Main content area */
  /* FIXED: Ensure proper width and prevent overflow */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* ARTICLE PARAGRAPH - Scope One font, justified, INCREASED font size */
.article-paragraph {
  font-family: 'Scope One', serif;
  font-size: 18px; /* INCREASED from 15px */
  line-height: 1.8; /* INCREASED from 1.15 for better readability */
  text-align: justify; /* Justified text as requested */
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  
  /* FLUSH LEFT - no indentation */
  padding-left: 0;
}

/* COPY PARAGRAPH BUTTON - REMOVED (only code blocks have copy buttons now) */

/* ARTICLE HEADING - Trocchi font - FIXED: Sticky positioning with smooth scroll */
.article-heading {
  font-family: 'Trocchi', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
  line-height: 1.3;
  
  /* FIXED: Left-aligned, no padding */
  text-align: left;
  padding-left: 0;
  
  /* FIXED: Sticky heading - sticks to top until next heading approaches */
  position: relative; /* Default position */
  background-color: var(--color-background);
  z-index: 5;
  transition: transform 0.3s ease, opacity 0.3s ease;
  
  /* FIXED: Ensure direct links don't get hidden behind navbar */
  scroll-margin-top: 150px;
}

/* FIXED: When heading is sticky and active */
.article-heading.sticky-active {
  position: sticky;
  top: 70px; /* Below navbar */
  padding-top: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-top: 0;
  margin-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border-light);
  background-color: var(--color-background);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ARTICLE SUBHEADING - Trocchi font - FLUSH LEFT (no indent) */
.article-subheading {
  font-family: 'Trocchi', serif;
  font-size: 1.5rem; /* INCREASED from 1.4rem */
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
  line-height: 1.3;
  
  /* FLUSH LEFT - no indentation */
  text-align: left;
  padding-left: 0; /* REMOVED: Was 40px - now flush left */
  position: relative;
  
  /* FIXED: Ensure direct links don't get hidden behind navbar */
  scroll-margin-top: 150px;
}

/* ============================================================================ */
/* ARTICLE LAYOUT - FLUSH LEFT (NO INDENTATION) */
/* ============================================================================ */
/* CLEAN DESIGN: All content aligns to the left edge */
/* This ensures headings and their body content are always aligned */
/* The visual hierarchy is maintained through font size and weight, not indentation */

/* Base: No indent for anything */
.article-body > * {
  padding-left: 0;
  text-align: justify; /* Justified text for professional look */
}

/* REMOVE ALL INDENT CLASSES - No tree-like structure */
/* These classes exist in HTML but should have no effect */
.indent-level-1,
.indent-level-2,
.article-subheading.indent-level-1,
.article-subheading.indent-level-2 {
  padding-left: 0 !important; /* Override any indentation */
}

/* Content following subheadings - NO INDENT */
.article-subheading + .article-paragraph,
.article-subheading + .code-block-wrapper,
.article-subheading + .table-wrapper,
.article-subheading + .article-list,
.article-subheading + ul,
.article-subheading + ol {
  padding-left: 0; /* Align with heading above */
}

/* Sub-subheadings - NO INDENT */
.article-subheading + .article-subheading {
  padding-left: 0;
}

.article-subheading + .article-subheading + .article-paragraph,
.article-subheading + .article-subheading + .code-block-wrapper,
.article-subheading + .article-subheading + .table-wrapper {
  padding-left: 0;
}

/* COPY HEADING BUTTON - REMOVED (only code blocks have copy buttons now) */

/* ARTICLE LIST - For bullet points - FIXED: Left-aligned */
.article-list {
  font-family: 'Scope One', serif;
  font-size: 15px;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
  text-align: left; /* FIXED: Left-aligned */
}

.article-list li {
  margin-bottom: var(--space-sm);
  text-align: left; /* FIXED: Left-aligned */
}

/* CODE BLOCK WRAPPER - Contains code and copy button */
.code-block-wrapper {
  position: relative;
  margin: var(--space-lg) 0;
}

/* COPY CODE BUTTON - Top right corner */
.copy-code-btn {
  /* Position absolute top right */
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 10;
  
  /* Button styling */
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary-hover);
  color: var(--color-background);
  
  /* Flexbox centering */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Cursor */
  cursor: pointer;
  
  /* Smooth transitions */
  transition: all var(--transition-fast);
  
  /* Icon size */
  font-size: 1rem;
}

/* Copy code button hover */
.copy-code-btn:hover {
  background-color: var(--color-primary-hover);
  transform: scale(1.1);
}

/* Copy code button active */
.copy-code-btn:active {
  transform: scale(0.95);
}

/* CODE BLOCK - Anonymous Pro font, left-aligned, font size 15px - FIXED */
.code-block {
  font-family: 'Anonymous Pro', monospace;
  font-size: 15px;
  line-height: 1.5;
  text-align: left; /* Code stays left-aligned */
  background-color: var(--color-light-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  overflow-x: auto;
  margin: 0;
  color: var(--color-text-primary);
  word-wrap: break-word;
  white-space: pre-wrap; /* Allow wrapping for long lines */
}

.code-block code {
  font-family: 'Anonymous Pro', monospace;
  font-size: 15px;
  background: none;
  padding: 0;
  color: inherit;
}

/* INLINE CODE - Anonymous Pro font */
.article-paragraph code,
.article-list code {
  font-family: 'Anonymous Pro', monospace;
  font-size: 14px;
  background-color: var(--color-light-cream);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-primary);
}

/* TABLE WRAPPER */
.table-wrapper {
  margin: var(--space-lg) 0;
  overflow-x: auto;
}

/* ARTICLE TABLE - Good looking table - FIXED: Left-aligned */
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Scope One', serif;
  font-size: 15px;
  line-height: 1.15;
  margin: var(--space-lg) 0;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  
  /* FIXED: Left-aligned table */
  text-align: left;
}

.article-table thead {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.article-table th {
  padding: var(--space-md);
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--color-primary-hover);
}

.article-table td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.article-table tbody tr:hover {
  background-color: var(--color-light-cream);
}

.article-table tbody tr:last-child td {
  border-bottom: none;
}

/* ARTICLE DIVIDER - Horizontal rule */
.article-divider {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: var(--space-2xl) 0;
}

/* ARTICLE NOTE - Special styling for note */
/* FIXED: Increased padding to prevent text touching borders */
.article-note {
  font-family: 'Scope One', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl); /* Increased horizontal padding */
  background-color: var(--color-light-cream);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

/* ============================================================================ */
/* SMART INDEX - SHOW/HIDE BASED ON SCROLL DIRECTION */
/* ============================================================================ */
/* Works with initSmartIndex() in article.js */

.article-index {
  transition: filter 0.5s ease, opacity 0.5s ease;
}

/* DESKTOP: Blurred state after 10 seconds of inactivity */
.article-index.index-blurred {
  filter: blur(2px);
  opacity: 0.5;
}

/* DESKTOP: Unblurred state (on hover, scroll up, or interaction) */
.article-index:hover,
.article-index:focus-within {
  filter: blur(0);
  opacity: 1;
}

/* Keep old classes for backward compatibility */
.article-index.index-hidden {
  transform: translateY(-20px);
  opacity: 0.3;
  pointer-events: none;
}

.article-index.index-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ARTICLE LINKS */
.article-paragraph a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.article-paragraph a:hover {
  color: var(--color-primary-hover);
}

/* ============================================================================ */
/* ARTICLE INDEX - RIGHT SIDE (30% on desktop, dropdown on mobile) */
/* ============================================================================ */

.article-index {
  /* Sticky positioning on desktop */
  position: sticky;
  top: 100px;
  
  /* Background and border */
  background-color: var(--color-card-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  
  /* Maximum height with scroll */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* INDEX HEADER */
.index-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border);
}

/* INDEX TITLE */
.index-title {
  font-family: 'Trocchi', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* INDEX TOGGLE BUTTON - Only visible on mobile */
.index-toggle {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: var(--space-xs);
  transition: transform var(--transition-fast);
}

.index-toggle.expanded {
  transform: rotate(180deg);
}

/* INDEX NAVIGATION - FIXED: Uniform formatting */
.index-nav {
  /* Navigation list */
  display: block !important; /* FIXED: Ensure index is visible */
  width: 100%;
}

.index-nav ul,
.index-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
}

.index-nav li {
  margin-bottom: var(--space-xs);
}

/* FIXED: Index title item */
.index-title-item {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-border);
}

.index-title-text {
  font-family: 'Trocchi', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-style: italic;
  line-height: 1.4;
}

/* FIXED: Uniform index link styling with tree structure */
.index-nav a {
  font-family: 'Scope One', serif;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  display: block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  line-height: 1.5;
}

/* FIXED: Level 1 (main headings) - uniform styling with numbering */
.index-item-level-1 > .index-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  padding-left: var(--space-sm);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

/* FIXED: Level 2 (subheadings) - uniform styling with indentation */
.index-item-level-2 > .index-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding-left: var(--space-lg); /* Indented for tree structure */
}

/* FIXED: Level 3 (sub-subheadings) - uniform styling with more indentation */
.index-item-level-3 > .index-link {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-muted);
  padding-left: var(--space-2xl); /* More indented for deeper nesting */
}

.index-nav a:hover,
.index-nav a.active {
  color: var(--color-primary);
  background-color: var(--color-light-cream);
}

.index-nav a.active {
  font-weight: 600;
  border-left: 3px solid var(--color-primary);
  padding-left: calc(var(--space-sm) + 3px);
}

/* FIXED: Nested index items - proper tree indentation */
.index-sublist {
  list-style: none;
  padding-left: var(--space-md);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.index-nav ul ul {
  margin-left: 0;
  margin-top: 0;
  padding-left: var(--space-md); /* Indent nested items */
}

.index-nav ul ul ul {
  margin-left: 0;
  padding-left: var(--space-lg); /* More indent for deeper nesting */
}

/* Mobile: Index as dropdown - COMPLETELY REWRITTEN */
@media (max-width: 1024px) {
  .article-index {
    /* Not sticky on mobile */
    position: static !important;
    max-height: none !important;
    width: 100% !important;
    margin-bottom: var(--space-xl);
    order: -1; /* Show first on mobile */
  }
  
  .index-header {
    background-color: var(--color-primary);
    color: var(--color-background);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin: -var(--space-lg) -var(--space-lg) var(--space-md) -var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .index-title {
    color: var(--color-background) !important;
    font-size: 1.2rem !important;
    margin: 0 !important;
  }
  
  .index-toggle {
    /* Show toggle on mobile */
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--color-background) !important;
    font-size: 1.2rem !important;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 36px;
    height: 36px;
  }
  
  .index-nav {
    /* Hidden by default on mobile */
    display: none;
    margin-top: 0;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    padding: var(--space-md);
    background-color: var(--color-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
  }
  
  .index-nav.expanded {
    /* Show when expanded */
    display: block !important;
  }
  
  /* FIXED: Ensure index links are clickable on mobile - uniform sizing */
  .index-link {
    padding: var(--space-sm) var(--space-md) !important;
    min-height: 44px; /* Touch target size */
    display: flex;
    align-items: center;
    font-size: 0.95rem !important;
    line-height: 1.5;
  }
  
  /* FIXED: Uniform index formatting on mobile */
  .index-item-level-1 > .index-link {
    font-size: 1rem !important;
    font-weight: 600;
    padding-left: var(--space-sm) !important;
  }
  
  .index-item-level-2 > .index-link {
    font-size: 0.9rem !important;
    font-weight: 500;
    padding-left: var(--space-md) !important;
  }
  
  .index-item-level-3 > .index-link {
    font-size: 0.85rem !important;
    font-weight: 400;
    padding-left: var(--space-xl) !important;
  }
}

/* Mobile responsive adjustments - COMPLETELY REWRITTEN FOR PROPER MOBILE VIEW */
@media (max-width: 768px) {
  /* FIXED: Proper mobile font sizes */
  .article-title {
    font-size: 1.8rem !important;
    line-height: 1.3;
    margin-bottom: var(--space-md);
  }
  
  .article-date {
    font-size: 0.9rem !important;
  }
  
  .article-heading {
    font-size: 1.4rem !important;
    padding-left: 0 !important;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
  }
  
  .article-subheading {
    font-size: 1.2rem !important;
    padding-left: 30px !important; /* One tab space on mobile */
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
  }
  
  /* FIXED: Tree-like indentation on mobile - same structure */
  .indent-level-1 {
    padding-left: 30px !important; /* One tab space on mobile */
  }
  
  .indent-level-2 {
    padding-left: 60px !important; /* Two tab spaces on mobile */
  }
  
  /* CSS Fallback for mobile */
  .article-subheading + .article-paragraph,
  .article-subheading + .code-block-wrapper,
  .article-subheading + .table-wrapper {
    padding-left: 30px !important;
  }
  
  .article-subheading + .article-subheading {
    padding-left: 60px !important;
  }
  
  .article-subheading + .article-subheading + .article-paragraph,
  .article-subheading + .article-subheading + .code-block-wrapper {
    padding-left: 60px !important;
  }
  
  /* FIXED: Sticky headings on mobile */
  .article-heading {
    font-size: 1.4rem !important;
  }
  
  .article-heading.sticky-active {
    position: sticky !important;
    top: 70px !important;
    padding-top: var(--space-sm) !important;
    padding-bottom: var(--space-xs) !important;
    font-size: 1.3rem !important; /* Slightly smaller when sticky on mobile */
  }
  
  /* FIXED: Proper paragraph sizing on mobile */
  .article-paragraph {
    font-size: 16px !important; /* Larger for mobile readability */
    line-height: 1.6 !important; /* Better line spacing */
    padding-left: 0 !important;
    text-align: justify;
    margin-bottom: var(--space-md);
  }
  
  .article-list {
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding-left: var(--space-lg);
  }
  
  /* FIXED: Code blocks - prevent overflow, proper sizing */
  .code-block-wrapper {
    margin: var(--space-md) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  
  .code-block-wrapper::-webkit-scrollbar {
    height: 8px;
  }
  
  .code-block-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
  }
  
  .code-block {
    font-size: 12px !important; /* Smaller but readable on mobile */
    line-height: 1.6 !important;
    padding: var(--space-md) !important;
    overflow-x: auto;
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap; /* Allow wrapping */
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    width: 100%;
  }
  
  .code-block code {
    font-size: 12px !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: block;
    width: 100%;
    overflow-wrap: break-word;
  }
  
  /* FIXED: Copy code button on mobile */
  .copy-code-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
    top: var(--space-xs) !important;
    right: var(--space-xs) !important;
  }
  
  /* FIXED: Tables - prevent overflow, proper sizing */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin: var(--space-md) 0;
    display: block;
    position: relative;
    scrollbar-width: thin;
  }
  
  .table-wrapper::-webkit-scrollbar {
    height: 8px;
  }
  
  .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
  }
  
  .article-table {
    font-size: 12px !important;
    line-height: 1.5 !important;
    min-width: 100%;
    display: table;
    width: max-content;
    max-width: none;
    border-collapse: collapse;
  }
  
  .article-table th,
  .article-table td {
    padding: var(--space-xs) var(--space-xs) !important;
    white-space: nowrap;
    min-width: 60px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Allow text wrapping in table cells on very small screens */
  @media (max-width: 480px) {
    .article-table th,
    .article-table td {
      white-space: normal;
      word-wrap: break-word;
      max-width: 150px;
    }
  }
  
  /* FIXED: Container padding */
  .article-container {
    padding: 0 var(--space-md) !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-lg) !important;
  }
  
  /* FIXED: Index - fully accessible on mobile */
  .article-index {
    position: static !important;
    max-height: none !important;
    width: 100% !important;
    margin-bottom: var(--space-lg);
    order: -1; /* Show index first on mobile */
  }
  
  .index-header {
    padding: var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-background);
    border-radius: var(--radius-md);
    margin: -var(--space-lg) -var(--space-lg) var(--space-md) -var(--space-lg);
  }
  
  .index-title {
    color: var(--color-background) !important;
    font-size: 1.2rem !important;
  }
  
  .index-toggle {
    display: flex !important;
    color: var(--color-background) !important;
    font-size: 1.2rem !important;
  }
  
  .index-nav {
    display: none;
    margin-top: 0;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md);
    background-color: var(--color-card-bg);
    border-radius: var(--radius-md);
  }
  
  .index-nav.expanded {
    display: block !important;
  }
  
  .index-link {
    font-size: 0.95rem !important;
    padding: var(--space-sm) var(--space-md) !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    line-height: 1.5;
  }
  
  .index-item-level-2 .index-link {
    font-weight: 600;
    font-size: 1rem !important;
  }
  
  .index-item-level-3 .index-link {
    font-size: 0.9rem !important;
    padding-left: var(--space-xl) !important;
  }
  
  /* FIXED: Timeline snapshot wraps properly on mobile */
  .timeline-snapshot {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md);
    margin-top: calc(70px + var(--space-md)) !important;
  }
  
  .timeline-line {
    display: none; /* Hide lines on very small screens */
  }
  
  .timeline-home {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .timeline-title-capsule {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
  }
  
  .timeline-current {
    font-size: 0.75rem;
  }
  
  /* FIXED: Article content width */
  .article-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* FIXED: Prevent horizontal scroll */
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }
  
  /* FIXED: Ensure all content containers respect viewport */
  .article-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .article-body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  /* FIXED: Inline code on mobile */
  .article-paragraph code,
  .article-list code {
    font-size: 13px !important;
    padding: 2px 4px !important;
    word-break: break-word;
  }
  
  /* FIXED: Article note on mobile */
  .article-note {
    font-size: 14px !important;
    padding: var(--space-sm) !important;
    margin-top: var(--space-lg) !important;
  }
  
  /* FIXED: Article divider */
  .article-divider {
    margin: var(--space-xl) 0 !important;
  }
  
  /* ============================================================================ */
  /* IMPROVED MOBILE BLOG LAYOUT - INDUSTRY STANDARD */
  /* ============================================================================ */
  /* Following best practices from Medium, Dev.to, and major tech blogs */
  /* Key principles: */
  /* 1. Full-width content for maximum readability */
  /* 2. Clear visual hierarchy with consistent alignment */
  /* 3. Headings in dark color for contrast */
  /* 4. Reduced spacing for tighter, cleaner layout */
  
  /* ------------------------------------------------------------------------ */
  /* HEADINGS: Pure black, NO INDENT on mobile */
  /* ------------------------------------------------------------------------ */
  /* CRITICAL: Remove ALL padding/margin from headings on mobile */
  
  .article-heading,
  h2.article-heading,
  h2.article-heading.indent-level-1 {
    color: #000 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    font-size: 1.5rem !important; /* INCREASED */
  }
  
  /* H3 Subheadings - e.g., "6.1 Slowly Changing Dimensions" */
  .article-subheading,
  h3.article-subheading,
  h3.article-subheading.indent-level-1 {
    color: #000 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: var(--space-lg) !important;
    margin-bottom: var(--space-xs) !important;
    font-size: 1.25rem !important; /* INCREASED */
    font-weight: 600 !important;
  }
  
  /* H4 Subheadings - e.g., "6.1.1 SCD Type 0" - CRITICAL FIX */
  h4.article-subheading,
  h4.article-subheading.indent-level-2 {
    color: #000 !important;
    padding-left: 0 !important; /* REMOVE the 80px padding from desktop */
    margin-left: 0 !important;
    font-size: 1.15rem !important; /* INCREASED */
    margin-top: var(--space-md) !important;
    font-weight: 600 !important;
  }
  
  /* ------------------------------------------------------------------------ */
  /* CONTENT: All content flush left, NO INDENT on mobile */
  /* ------------------------------------------------------------------------ */
  /* CRITICAL: Every element with indent classes must be reset to 0 */
  
  /* Reset ALL indent classes aggressively - ULTRA SPECIFIC for mobile */
  .indent-level-1,
  .indent-level-2,
  .article-body .indent-level-1,
  .article-body .indent-level-2,
  p.indent-level-1,
  p.indent-level-2,
  div.indent-level-1,
  div.indent-level-2,
  ul.indent-level-1,
  ul.indent-level-2,
  .article-paragraph.indent-level-1,
  .article-paragraph.indent-level-2,
  /* ULTRA SPECIFIC SELECTORS TO OVERRIDE ANY OTHER RULES */
  .article-content .article-body p,
  .article-content .article-body p.article-paragraph,
  .article-content .article-body p.indent-level-2,
  .article-content .article-body .article-paragraph.indent-level-2,
  .article-body > p,
  .article-body > .article-paragraph,
  h4 + p,
  h4.article-subheading + p.article-paragraph {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Paragraphs: Full width, 18px font for mobile readability */
  /* CRITICAL: This rule uses full specificity to override desktop styles */
  .article-paragraph,
  .article-content .article-body .article-paragraph,
  p.article-paragraph.indent-level-2 {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-sm) !important;
    text-align: justify !important; /* Justified for professional look */
    font-size: 18px !important; /* INCREASED to 18px for mobile readability */
    line-height: 1.75 !important;
  }
  
  /* Lists: Minimal left padding for bullets, 18px font */
  .article-list {
    padding-left: 24px !important; /* Just enough for bullets */
    margin-left: 0 !important;
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-sm) !important;
    font-size: 18px !important; /* INCREASED to 18px */
    line-height: 1.7 !important;
  }
  
  .article-list li {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  
  /* ------------------------------------------------------------------------ */
  /* CODE BLOCKS: Full width, readable font size */
  /* ------------------------------------------------------------------------ */
  
  .code-block-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-sm) !important;
  }
  
  .code-block {
    font-size: 14px !important; /* Good for code on mobile */
  }
  
  /* ------------------------------------------------------------------------ */
  /* TABLES: Horizontal scroll, NO TEXT TRUNCATION */
  /* ------------------------------------------------------------------------ */
  /* FIX: Remove ellipsis, allow full content with horizontal scroll */
  
  .table-wrapper {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-top: var(--space-sm) !important;
    margin-bottom: var(--space-sm) !important;
    overflow-x: auto !important; /* HORIZONTAL SCROLL */
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  
  .article-table {
    min-width: 500px !important; /* Force table to be wider than viewport */
    font-size: 14px !important;
  }
  
  .article-table th,
  .article-table td {
    white-space: normal !important; /* ALLOW WRAPPING - removes ellipsis */
    text-overflow: clip !important; /* NO ELLIPSIS */
    overflow: visible !important; /* SHOW ALL CONTENT */
    padding: 10px 12px !important;
    min-width: 100px !important;
  }
  
  /* ------------------------------------------------------------------------ */
  /* MOBILE TOC COLLAPSE */
  /* ------------------------------------------------------------------------ */
  /* TOC hidden by default, shown when expanded */
  
  .index-nav {
    display: none !important;
  }
  
  .index-nav.expanded {
    display: block !important;
    animation: slideDown 0.3s ease;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .index-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ============================================================================ */
/* NOTE: SCROLL TO TOP BUTTON */
/* ============================================================================ */
/* The scroll-to-top button with liquid glass effect is already defined at */
/* line 1380 in this file. It uses the .show class to toggle visibility. */
/* No additional styles needed here - the existing glass effect applies. */
/* ============================================================================ */

/* ============================================================================ */
/* FOOTER YEAR SCROLL ANIMATION */
/* ============================================================================ */
/* This creates the smooth scrolling effect in the footer where 5 scrolls to 6 */
/* Works with initYearScroll() in app.js which adds the .scrolling class */
/* Structure: 202 + [5|6] where the digits are stacked vertically */

/* Container for the year digits */
.year-container {
  display: inline-flex;
  align-items: center;
}

/* Container for the scrolling digits (holds 5 and 6 stacked) */
.year-scroll {
  display: inline-flex;
  flex-direction: column;
  height: 1.2em; /* Show one digit at a time */
  overflow: hidden;
  position: relative;
  line-height: 1.2;
}

/* Individual digit styling */
.year-digit {
  height: 1.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation: When .scrolling class is added, shift digits up */
.year-scroll.scrolling .year-digit {
  transform: translateY(-100%);
}