/* ============================================================================
   COMMON STYLES - Shared across all pages
   ============================================================================

   This stylesheet contains:
   - CSS custom properties (variables) for consistent theming
   - Global layout and typography
   - Navigation bar (desktop and mobile)
   - Footer
   - Responsive breakpoints

   Last updated: 2025-11-10
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES (Variables)
   ----------------------------------------------------------------------------

   Centralized theme values for easy maintenance. To change the site's color
   scheme, spacing, or other design tokens, modify these variables.
   ---------------------------------------------------------------------------- */

:root {
    /* Colors - Primary Palette */
    --color-primary: #007acc;           /* Links, buttons, interactive elements */
    --color-primary-hover: #005a99;     /* Darker shade for hover states */
    --color-primary-active: #004578;    /* Even darker for active/pressed states */

    /* Colors - Navigation */
    --color-nav-bg: #2c3e50;            /* Main navigation background */
    --color-nav-bg-secondary: #34495e;  /* Mobile menu dropdown background */
    --color-nav-text: #ffffff;          /* Navigation text color */

    /* Colors - Neutrals */
    --color-bg-body: #f4f4f4;           /* Page background */
    --color-text-primary: #333333;      /* Main text color */
    --color-text-secondary: #555555;    /* Secondary/muted text */
    --color-border: #dddddd;            /* Borders and dividers */

    /* Spacing */
    --spacing-xs: 0.5rem;    /* 8px - Extra small spacing */
    --spacing-sm: 0.75rem;   /* 12px - Small spacing */
    --spacing-md: 1rem;      /* 16px - Medium spacing (base) */
    --spacing-lg: 1.5rem;    /* 24px - Large spacing */
    --spacing-xl: 2rem;      /* 32px - Extra large spacing */

    /* Border Radius */
    --radius-sm: 4px;        /* Small radius for buttons, links */
    --radius-md: 8px;        /* Medium radius for cards, panels */

    /* Typography */
    --font-family-base: monospace;      /* Body text */
    --font-family-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;  /* UI elements */
    --font-size-base: 16px;             /* Base font size */
    --font-size-sm: 14px;               /* Small text (footer, etc) */
    --font-size-lg: 18px;               /* Large text (site title) */

    /* Layout */
    --max-width-content: 1400px;        /* Maximum width for nav container */

    /* Transitions */
    --transition-fast: 0.2s ease;       /* Quick transitions (hover effects) */
    --transition-medium: 0.3s ease;     /* Medium transitions (menus, animations) */

    /* Z-index Layers */
    --z-index-hamburger: 1000;          /* Hamburger button */

    /* Mobile Breakpoint */
    --breakpoint-mobile: 768px;         /* Screen width where mobile styles activate */

    /* Touch Targets */
    --min-touch-target: 44px;           /* Minimum touch target size (accessibility) */
}

/* ----------------------------------------------------------------------------
   GLOBAL STYLES
   ----------------------------------------------------------------------------

   Base styles that apply to the entire document. Sets up the page layout
   using flexbox to ensure footer stays at bottom even on short pages.
   ---------------------------------------------------------------------------- */

body {
    background-color: var(--color-bg-body);
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    padding: 0;
    margin: 0;

    /* Flexbox layout to push footer to bottom */
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* Prevent horizontal overflow on mobile */
    overflow-x: hidden;
    max-width: 100vw;
}

/* Main content area - grows to fill available space */
main {
    flex: 1;
}

/* Default link styles (overridden in nav) */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   NAVIGATION - Desktop Styles
   ----------------------------------------------------------------------------

   Horizontal navigation bar for desktop screens. Contains:
   - Site title/branding on left
   - Navigation links on right
   - Hamburger menu (hidden on desktop, shown on mobile)
   ---------------------------------------------------------------------------- */

nav {
    background-color: var(--color-nav-bg);
    padding: var(--spacing-md);
    font-family: var(--font-family-ui);
}

.nav-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Site branding/title */
nav .site-title {
    color: var(--color-nav-text);
    font-weight: bold;
    font-size: var(--font-size-lg);
}

/* Desktop navigation links container */
nav .nav-links {
    display: flex;
    gap: var(--spacing-md);
}

/* Navigation link styles */
nav a {
    color: var(--color-nav-text);
    text-decoration: none;
    font-size: var(--font-size-base);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

/* Hover state - subtle background highlight */
nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Active page indicator - slightly brighter background */
nav a.active {
    background-color: rgba(255, 255, 255, 0.15);
}

/* ----------------------------------------------------------------------------
   HAMBURGER MENU - Mobile Toggle Button
   ----------------------------------------------------------------------------

   Three-line menu icon that animates into an X when clicked.
   Hidden on desktop, shown on mobile via media query.
   ---------------------------------------------------------------------------- */

.hamburger {
    display: none;  /* Hidden by default (desktop) */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    z-index: var(--z-index-hamburger);
}

/* Individual hamburger lines */
.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-nav-text);
    margin: 5px 0;
    transition: all var(--transition-medium);
}

/* Hamburger animation when menu is open (forms an X) */
/* Top line: move down and rotate 45° */
.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

/* Middle line: fade out */
.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

/* Bottom line: move up and rotate -45° */
.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ----------------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------------

   Site footer with copyright/contact info. Matches navigation styling.
   ---------------------------------------------------------------------------- */

footer {
    background-color: var(--color-nav-bg);
    color: var(--color-nav-text);
    padding: var(--spacing-lg);
    text-align: center;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-ui);
}

/* ----------------------------------------------------------------------------
   RESPONSIVE STYLES - Mobile Navigation
   ----------------------------------------------------------------------------

   Below 768px width, navigation switches to hamburger menu:
   - Site title and hamburger on top row
   - Links collapse into vertical dropdown menu
   - Menu slides down when hamburger is clicked
   - Touch-friendly tap targets (min 44x44px)
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Allow nav items to wrap to new row */
    .nav-container {
        flex-wrap: wrap;
        position: relative;
    }

    /* Show hamburger button on mobile */
    .hamburger {
        display: block;
        order: 2;  /* Position after site title */
    }

    /* Site title stays on left */
    .site-title {
        order: 1;
    }

    /* Mobile navigation dropdown */
    nav .nav-links {
        order: 3;              /* Third in order (below title and hamburger) */
        width: 100%;           /* Full width dropdown */
        flex-direction: column; /* Stack links vertically */
        gap: 0;  /* Override desktop gap with matching specificity */

        /* Collapsed state - hidden */
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-medium);

        /* Styling */
        background-color: var(--color-nav-bg-secondary);
        margin-top: var(--spacing-xs);
        border-radius: var(--radius-sm);
    }

    /* Expanded state - visible when hamburger is clicked */
    .nav-links.active {
        max-height: 600px;  /* Large enough for all current + future links */
    }

    /* Mobile link styling - minimal and modern */
    .nav-links a {
        display: block;
        padding: 0.375rem var(--spacing-md);  /* 6px vertical, 16px horizontal */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: var(--font-size-sm);
        line-height: 1.4;  /* Tighter line height for compact appearance */
    }

    /* Remove border from last link */
    .nav-links a:last-child {
        border-bottom: none;
    }

    /* Mobile hover and active states */
    .nav-links a:hover,
    .nav-links a.active {
        background-color: rgba(255, 255, 255, 0.15);
    }
}