/* ========================================
   UNIFIED BASE CSS - FOUNDATION STYLES
   Reset, variables, and base styling
   ======================================== */

/* ========================================
   CSS RESET
   ======================================== */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100vh; /* Use viewport height instead of percentage */
    height: 100%;
}

body {
    min-height: 100vh; /* Use viewport height instead of percentage */
    height: auto;
}

/* ========================================
   FONT FACE DECLARATIONS
   ======================================== */
@font-face {
    font-family: 'Fira Mono';
    src: url('../fonts/FiraMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Mono';
    src: url('../fonts/FiraMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Mono';
    src: url('../fonts/FiraMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ========================================
   CSS CUSTOM PROPERTIES - DESIGN TOKENS
   ======================================== */
:root {
    /* ========================================
       TERMINAL MODE COLORS - PRIMARY COLORS
       ======================================== */
    --bg: #000000;                   /* Primary background */
    --bg-secondary: rgba(0, 255, 65, 0.05);  /* Secondary background */
    --fg: #00ff41;                   /* Primary text */
    --fg-dim: rgba(0, 255, 65, 0.7); /* Dimmed text */
    --fg-secondary: rgba(0, 255, 65, 0.7);
    --border: #00ff41;               /* Borders */
    --accent: #00ff41;               /* Accents */

    /* ========================================
       TERMINAL MODE COLORS - SPECIALIZED BACKGROUNDS
       ======================================== */
    --bg-solid: #000d04;             /* Solid backgrounds */
    --bg-button: #090e00;            /* Button backgrounds */
    --bg-matrix: #000008;            /* Matrix theme */
    --bg-matrix-gradient: #000800;
    --bg-mobile-menu: rgba(0, 0, 0, 0.95);  /* Mobile menu */

    /* ========================================
       TERMINAL MODE COLORS - ALPHA VARIATIONS (GREEN)
       ======================================== */
    --fg-alpha-05: rgba(0, 255, 65, 0.05);  /* 5% opacity */
    --fg-alpha-10: rgba(0, 255, 65, 0.1);   /* 10% opacity */
    --fg-alpha-14: rgba(0, 255, 65, 0.14);  /* 14% opacity */
    --fg-alpha-30: rgba(0, 255, 65, 0.3);   /* 30% opacity */
    --fg-alpha-38: rgba(0, 255, 65, 0.38);  /* 38% opacity */
    --fg-alpha-60: rgba(0, 255, 65, 0.6);   /* 60% opacity */
    --fg-alpha-80: rgba(0, 255, 65, 0.8);   /* 80% opacity */
    --fg-alpha-90: rgba(0, 255, 65, 0.9);   /* 90% opacity */

    /* Dark Green Transparency Variations */
    --bg-solid-alpha-20: rgba(0, 13, 4, 0.2);
    --bg-solid-alpha-70: rgba(0, 13, 4, 0.7);

    /* ========================================
       CLEAN MODE COLORS - PRIMARY COLORS
       ======================================== */
    --clean-bg: #fff9ed;             /* Clean background */
    --clean-bg-secondary: rgba(0, 0, 0, 0.05);  /* Clean secondary BG */
    --clean-fg: #000000;             /* Clean text */
    --clean-border: #000000;         /* Clean borders */
    --clean-fg-secondary: rgba(0, 0, 0, 0.6);  /* Clean secondary text */
    --clean-accent: #000000;         /* Clean accent */

    /* ========================================
       CLEAN MODE COLORS - BACKGROUND VARIANTS
       ======================================== */
    --white-old-lace: #fff9ed;       /* Light background variant */
    --white-old-lace-hover: #F7F2E3; /* Hover background */
    --white-old-lace-dark: #F3EBD3;  /* Dark variant */
    --dark-text-light: #000000;

    /* ========================================
       CLEAN MODE COLORS - ALPHA VARIATIONS (BLACK)
       ======================================== */
    --clean-fg-alpha-05: rgba(0, 0, 0, 0.05); /* 5% black transparency */
    --clean-fg-alpha-10: rgba(0, 0, 0, 0.1);  /* 10% black transparency */
    --clean-fg-alpha-14: rgba(0, 0, 0, 0.14); /* 14% black transparency */
    --clean-fg-alpha-30: rgba(0, 0, 0, 0.3);  /* 30% black transparency */
    --clean-fg-alpha-38: rgba(0, 0, 0, 0.38); /* 38% black transparency */
    --clean-fg-alpha-60: rgba(0, 0, 0, 0.6);  /* 60% black transparency */
    --clean-fg-alpha-80: rgba(0, 0, 0, 0.8);  /* 80% black transparency */
    --clean-fg-alpha-90: rgba(0, 0, 0, 0.9);  /* 90% black transparency */

    /* Clean Theme Background Alpha Variations - Cream transparency */
    --clean-bg-alpha-20: rgba(255, 249, 237, 0.2);
    --clean-bg-alpha-70: rgba(255, 249, 237, 0.7);
    --clean-bg-alpha-90: rgba(255, 249, 237, 0.9);

    /* ========================================
       WARNING & STATUS COLORS
       ======================================== */
    --warning: #ff0040;              /* Warning color */
    --warning-bg: rgba(255, 0, 64, 0.1);      /* Warning background */
    --warning-glow-30: rgba(255, 0, 64, 0.3); /* Warning glow 30% */
    --warning-glow-60: rgba(255, 0, 64, 0.6); /* Warning glow 60% */
    
    /* ========================================
       TYPOGRAPHY SYSTEM
       ======================================== */

    /* Font Configuration */
    --font: 'Fira Mono', 'Courier New', Courier, monospace;  /* Primary font family */
    --line: 1.4;                         /* Default line height */

    /* ========================================
       TYPOGRAPHY SYSTEM - HEADING SIZES
       ======================================== */
    --fs-h1: 2.5rem;         /* 40px - Main page titles */
    --fs-h2: 2rem;           /* 32px - Section headers */
    --fs-h3: 1.5rem;         /* 24px - Subsection headers */
    --fs-h4: 1.25rem;        /* 20px - Component titles */
    --fs-h5: 1.125rem;       /* 18px - Small headers */
    --fs-h6: 1rem;           /* 16px - Smallest headers */

    /* ========================================
       TYPOGRAPHY SYSTEM - BODY TEXT SIZES
       ======================================== */
    --fs-body: 0.9rem;       /* 14.4px - Default body text */
    --fs-body-large: 1rem;   /* 16px - Large body text */
    --fs-body-small: 0.8rem; /* 12.8px - Small body text */
    --fs-caption: 0.75rem;   /* 12px - Captions, labels */
    --fs-tiny: 0.7rem;       /* 11.2px - Very small text */
    --fs-micro: 0.625rem;    /* 10px - Micro text */

    /* ========================================
       TYPOGRAPHY SYSTEM - DISPLAY SIZES
       ======================================== */
    --fs-hero: 2.5rem;       /* 40px - Hero sections */
    --fs-display: 1.75rem;      /* 28px - Large display text */

    /* ========================================
       TYPOGRAPHY SYSTEM - LINE HEIGHT VARIABLES
       ======================================== */
    --lh-tight: 1.2;         /* Tight line height */
    --lh-normal: 1.4;        /* Normal line height */
    --lh-relaxed: 1.6;       /* Relaxed line height */
    --lh-loose: 1.8;         /* Loose line height */

    /* ========================================
       TYPOGRAPHY SYSTEM - FONT WEIGHT VARIABLES
       ======================================== */
    --fw-light: 300;         /* Light weight */
    --fw-normal: 400;        /* Normal weight */
    --fw-medium: 500;        /* Medium weight */
    --fw-semibold: 600;      /* Semibold weight */
    --fw-bold: 700;          /* Bold weight */
    --fw-extrabold: 800;     /* Extra bold weight */

    /* ========================================
       TYPOGRAPHY SYSTEM - LETTER SPACING
       ======================================== */
    --letter-spacing-tight: 0.5px;   /* Tight letter spacing */
    --letter-spacing-normal: 1px;     /* Normal letter spacing */
    --letter-spacing-wide: 2px;       /* Wide letter spacing */
    --letter-spacing-wide-2: 2.5px;   /* Wide-2 letter spacing */
    --letter-spacing-wider: 3px;      /* Wider letter spacing */

    /* ========================================
       TYPOGRAPHY SYSTEM - MOBILE TYPOGRAPHY
       ======================================== */
    --fs-mobile-h1: 2rem;            /* Mobile H1 */
    --fs-mobile-h2: 1.75rem;         /* Mobile H2 */
    --fs-mobile-h3: 1.375rem;        /* Mobile H3 */
    --fs-mobile-h4: 1.125rem;        /* Mobile H4 */
    --fs-mobile-h5: 1rem;            /* Mobile H5 */
    --fs-mobile-h6: 0.9rem;          /* Mobile H6 */
    --fs-mobile-body: 0.875rem;      /* Mobile body text */
    --fs-mobile-hero: 2rem;          /* Mobile hero text */
    --fs-mobile-display: 1.25rem;    /* Mobile display text - smaller for mobile */

    /* ========================================
       TYPOGRAPHY SYSTEM - RESPONSIVE TYPOGRAPHY (clamp)
       ======================================== */
    --fs-responsive-h1: clamp(var(--fs-mobile-h1), 4vw, var(--fs-h1));
    --fs-responsive-h2: clamp(var(--fs-mobile-h2), 3.5vw, var(--fs-h2));
    --fs-responsive-h3: clamp(var(--fs-mobile-h3), 3vw, var(--fs-h3));
    --fs-responsive-hero: clamp(var(--fs-mobile-hero), 5vw, var(--fs-hero));
    --fs-responsive-display: clamp(var(--fs-mobile-display), 6vw, var(--fs-display));

    /* ========================================
       LEGACY VARIABLES (for backward compatibility)
       ======================================== */
    --fs-title: var(--fs-h2);
    --fs-subtitle: var(--fs-h4);
    --fs-subtitle-toggle: var(--fs-h6);
    --fs-title-cards: var(--fs-h5);
    --fs-title-toggle: var(--fs-h6);
    --fs-small: var(--fs-body-small);
    
    /* ========================================
       SPACING SYSTEM
       ======================================== */

    /* Base Spacing Scale */
    --space-xs: 0.5rem;      /* 8px - Extra small */
    --space-s: 0.75rem;      /* 12px - Small variant */
    --space-sm: 1rem;        /* 16px - Small */
    --space-md: 1.2rem;      /* 19.2px - Medium */
    --space-lg: 1.5rem;      /* 24px - Large */
    --space-xl: 2rem;        /* 32px - Extra large */
    --space-xxl: 3rem;       /* 48px - XX large */
    --space-3xl: 4rem;       /* 64px - 3X large */

    /* Micro Spacing */
    --space-micro: 0.125rem; /* 2px - Fine details */
    --space-tiny: 0.25rem;   /* 4px - Minimal spacing */

    /* Mobile Spacing */
    --space-mobile-xs: 0.25rem;      /* Mobile extra small */
    --space-mobile-sm: 0.75rem;      /* Mobile small */
    --space-mobile-md: 1rem;         /* Mobile medium */
    --space-mobile-lg: 1.25rem;      /* Mobile large */
    
    /* ========================================
       LAYOUT SYSTEM
       ======================================== */

    /* Layout Dimensions */
    --header-height: 130px;          /* Header height */
    --sidebar-width: 250px;          /* Sidebar width */
    --container-max: 1600px;         /* Maximum container width - increased for wider desktop content */
    --radius: 0;                     /* Border radius (none) */

    /* ========================================
       BORDER VARIABLES
       ======================================== */
    --border-width-thin: 1px;        /* Thin border */
    --border-width-medium: 2px;      /* Medium border */
    --border-width-thick: 3px;       /* Thick border */
    --border-radius-small: 2px;      /* Small border radius */
    --border-radius-none: 0;         /* No border radius */

    /* ========================================
       SPACING TOKENS FOR SECTION HEADERS
       ======================================== */
    --section-header-padding-y: 24px; /* Desktop vertical padding for section headers */
    --first-section-offset: calc(var(--header-height) + 1.5rem);
}

/* ========================================
   NEW PAGE DEVELOPMENT CHECKLIST
   ======================================== */
/*
   When adding new pages, follow these guidelines to maintain consistency:
   
   1. SECTION HEADERS:
      - Use .hero, .search-header, or .glossary-header classes for main page headers
      - These automatically use: padding: var(--section-header-padding-y) 0;
      - And: margin-top: var(--first-section-offset);
   
   2. SPACING TOKENS:
      - Use --space-* tokens for margins/padding (xs, sm, md, lg, xl, xxl)
      - Use --header-height for sticky positioning calculations
      - Use --first-section-offset for content below fixed headers
   
   3. RESPONSIVE DESIGN:
      - Tokens automatically adjust across breakpoints (320px, 375px, 480px, 1024px+)
      - Test both clean and terminal themes
      - Verify mobile menu functionality
   
   4. CSS LOAD ORDER:
      - Keep themes.css last for proper theme overrides
      - Add page-specific styles to components.css or create new CSS file
   
   5. AVOID:
      - Hard-coded pixel values for spacing
      - !important declarations (except for theme overrides)
      - Duplicate header definitions
*/

/* ========================================
   RESPONSIVE TOKEN OVERRIDES
   Mobile-first approach with granular breakpoints
   ======================================== */

/* Small mobile devices (320px and up) */
@media (max-width: 320px) {
    :root {
        --header-height: 70px; /* Extra small mobile header */
        --section-header-padding-y: 12px; /* Tighter padding for very small screens */
        --first-section-offset: calc(var(--header-height) + 1.5rem);
    }
}

/* Mobile devices (375px and up) */
@media (min-width: 321px) and (max-width: 375px) {
    :root {
        --header-height: 75px; /* Small mobile header */
        --section-header-padding-y: 14px; /* Slightly more padding */
        --first-section-offset: calc(var(--header-height) + 1.5rem);
    }
}

/* Larger mobile devices (414px and up) */
@media (min-width: 376px) and (max-width: 480px) {
    :root {
        --header-height: 80px; /* Standard mobile header */
        --section-header-padding-y: 16px; /* Standard mobile padding */
        --first-section-offset: calc(var(--header-height) + 1.5rem);
    }
}

/* Tablets and small laptops (768px and below) */
@media (max-width: 768px) {
    :root {
        /* Mobile header height and spacing */
        --header-height: 80px; /* Mobile fixed header height */
        --section-header-padding-y: 16px; /* Mobile vertical padding for section headers */
        --first-section-offset: calc(var(--header-height) + 1.5rem);
    }
}

/* Large tablets and small desktops (1024px and up) */
@media (min-width: 1025px) {
    :root {
        --header-height: 130px; /* Full desktop header height */
        --section-header-padding-y: 24px; /* Full desktop padding */
        --first-section-offset: calc(var(--header-height) + 1.5rem);
    }
}

/* Mobile display text spacing - tighter line height for smaller screens */
@media (max-width: 768px) {
    .display-text,
    [class*="display"],
    .hero h1:not(.search-main-title),
    .hero h2,
    .hero .title,
    .hero .subtitle {
        line-height: 1rem !important; /* Tighter line height for mobile */
    }

    /* Additional tighter spacing for paragraphs with display font size */
    p[class*="display"],
    .display-text p {
        line-height: 1rem !important; /* Tighter for paragraph text */
        margin-bottom: var(--space-sm) !important; /* Reduce bottom margin */
    }
}

/* ========================================
   PARAGRAPH SPACING STANDARDS
   ======================================== */
/* Standard paragraph spacing for content areas */
.chapter-body p,
.content-area p:not([class*="display"]):not(.display-text p) {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.chapter-body p:last-child,
.content-area p:last-child {
    margin-bottom: 0;
}

/* ========================================
   BASE ELEMENT STYLES
   ======================================== */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    line-height: var(--line);
    overflow-x: hidden;
    /* min-height: 100vh; */ /* Removed to allow natural content expansion */
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.clean-view {
    background: var(--clean-bg);
    color: var(--clean-fg);
}

a {
    color: var(--fg);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    text-decoration: underline;
}

body.clean-view a {
    color: var(--clean-fg);
}

ul {
    list-style: none;
}

button {
    font-family: var(--font);
    cursor: pointer;
}

input, textarea, select {
    font-family: var(--font);
}

/* ========================================
   RESPONSIVE CONTAINER SYSTEM
   ======================================== */

/* Clean responsive container that stretches with 1600px max */
.container {
    max-width: var(--container-max); /* 1600px maximum */
    width: 100%; /* Stretch to fill available width */
    margin: 0 auto; /* Center when max-width is reached */
    padding: 0 clamp(var(--space-sm), 3vw, var(--space-xl)); /* Responsive side padding */
    box-sizing: border-box;
}

/* Ensure consistent behavior across all pages */
body .container {
    max-width: var(--container-max);
    width: 100%;
    margin: 0 auto;
}

/* Homepage maintains full width capability */
body.homepage .container {
    max-width: var(--container-max);
}

body.homepage .main-menu {
    max-width: 100%;
    width: 100%;
}

/* ========================================
   HEADER COMPONENT
   ======================================== */
header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--space-sm) 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

body.clean-view header {
    background: var(--clean-bg);
    border-bottom-color: var(--clean-border);
}

.terminal-line {
    color: var(--fg);
    font-size: var(--fs-small);
    margin-bottom: var(--space-xs);
    opacity: 0.7;
}

body.clean-view .terminal-line {
    color: var(--clean-fg);
}

/* ========================================
   NAVIGATION COMPONENT
   ======================================== */
nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}

.nav-left {
    display: flex;
    align-items: center;
}

.logo {
    /* Reduce font size - scales from 12px to 20px instead of 20px to 40px */
    font-size: var(--fs-responsive-h3);
    
    /* Keep your existing spacing but reduce it proportionally */
    padding: clamp(0.25rem, 0.5vw, 0.5rem) clamp(0.5rem, 1vw, 1rem);
    margin: clamp(0.125rem, 0.25vw, 0.5rem);
    
    /* Reduce letter spacing */
    letter-spacing: clamp(0.5px, 0.2vw, 2px);
    
    /* Rest of your existing styles */
    font-weight: bold;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
    transition: all 0.3s ease;
    white-space: pre;
    font-family: 'Courier New', monospace;
    text-transform: none;
}

body.clean-view .logo {
    color: var(--clean-fg);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
    justify-self: center;
}

/* Nav button visuals handled by buttons.css */

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-self: end;
}

/* ========================================
   VIEW TOGGLE COMPONENT
   ======================================== */
.view-toggle {
    display: flex;
    gap: 0;
    background: transparent;
    border: none;
    padding: 0;
    align-items: flex-start;
    margin: 0;
}

/* Button visuals removed for clean styling */

.toggle-text {
    display: block;
}

/* ========================================
   MOBILE MENU COMPONENT
   ======================================== */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--fg);
    border-radius: var(--border-radius-none);
    transition: all 0.3s ease;
}

body.clean-view .mobile-menu-toggle span {
    background: var(--clean-fg);
}

/* ========================================
   SCAN LINE EFFECT
   ======================================== */
.scan-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--fg), transparent);
    animation: scan 15s linear infinite;
    opacity: 0.3;
    z-index: 1000;
    pointer-events: none;
    display: none;
}

body:not(.clean-view) .scan-line {
    display: block;
}

@keyframes scan {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

/* ========================================
   FOOTER COMPONENT
   ======================================== */
.footer {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: var(--space-lg) 0;
    text-align: center;
    font-size: var(--fs-small);
    margin-top: var(--space-xl);
    color: var(--fg);
}

body.clean-view .footer {
    background: var(--clean-bg);
    border-top-color: var(--clean-border);
    color: var(--clean-fg);
}

/* ========================================
   BROWSER COMPATIBILITY FIXES
   ======================================== */

/* Prevent horizontal overflow on all pages */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure no element exceeds viewport width */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Exception for elements that need to break out */
.hero,
.master-header,
.footer,
.scan-line {
    max-width: none;
}

/* Chrome-specific touch scrolling fix */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    html {
        -webkit-overflow-scrolling: touch;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Color Utilities */
.white-lace {
    color: #F7F2E3 !important;
}

.bg-white-lace {
    background-color: #F7F2E3 !important;
}

.border-white-lace {
    border-color: #F7F2E3 !important;
}

.white-old-lace {
    color: var(--white-old-lace-hover) !important;
}

.bg-white-old-lace {
    background-color: var(--white-old-lace-hover) !important;
}

.border-white-old-lace {
    border-color: var(--white-old-lace-hover) !important;
}

/* CSS Custom Property Utilities */
.bg-clean {
    background-color: var(--clean-bg) !important;
}

.color-clean {
    color: var(--clean-fg) !important;
}

.border-clean {
    border-color: var(--clean-border) !important;
}