/* ============================================================================
   PORTFOLIO CSS ORGANIZATION GUIDE
   ============================================================================
   This stylesheet is organized into logical sections for easy maintenance:
   
   1. GLOBAL RESET & BASE STYLES
   2. COLOR & TYPOGRAPHY (HTML Tags)
   3. LAYOUT STRUCTURE (HTML Tags)
   4. COMPONENT CLASSES
   5. ID-SPECIFIC STYLES
   6. INTERACTIVE STATES (Hover, Focus)
   7. RESPONSIVE DESIGN (Mobile & Tablet)
   
   Each section includes visual examples showing what each property affects.
   ========================================================================== */

/* ============================================================================
   1. GLOBAL RESET & BASE STYLES
   ============================================================================
   WHY: Removes all default browser margins/padding for consistent styling
   VISUAL EXAMPLE:
   ┌─ Without reset: Various elements have different default spacing
   └─ With reset: All elements start with 0 margin/padding, clean slate
*/

* {
    margin: 0;           /* Removes all default margins */
    padding: 0;          /* Removes all default padding */
    box-sizing: border-box;  /* Makes width/height calculations simpler */
}

/* ============================================================================
   2. COLOR & TYPOGRAPHY (HTML Tags)
   ============================================================================
   WHY: Define global font, color, and text properties for readability
*/

/* BODY TAG - Sets default font family, line height, colors for entire page */
body {
    font-family: Roboto, Helvetica, sans-serif;  /* Font used everywhere (unless overridden) */
    font: Arial, Helvetica, sans-serif;          /* Alternative font stack */
    line-height: 1.6;                /* Space between lines (1.6 = 60% of font size) */
    background-color: #f4f4f4;       /* Light gray background */
    color: #333;                     /* Dark gray text color */
}

/* VISUAL EXAMPLE for line-height:
   line-height: 1.0:  Text lines touch each other - hard to read
   line-height: 1.6:  Good spacing between lines - comfortable reading ✓
   line-height: 2.0:  Large gaps - looks sparse
*/

/* HEADING TAGS (h1, h2, h3, etc.) - Large text for page titles & sections */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;  /* Space below heading before next content */
}

/* VISUAL EXAMPLE:
   ┌─────────────────────────┐
   │ Heading Text            │
   │ (margin-bottom: 1rem)   │
   ├─ 1rem of space below  ──┤
   │ Paragraph starts here   │
   └─────────────────────────┘
*/

/* PARAGRAPH TAG - Body text for content */
p {
    margin-bottom: 1rem;  /* Space below each paragraph before next element */
}

/* ============================================================================
   3. LAYOUT STRUCTURE (HTML Tags)
   ============================================================================
   WHY: Controls positioning and spacing of major page sections
*/

/* HEADER TAG - Top section containing logo/title and navigation */
header {
    background: #333;        /* Dark background color */
    color: #fff;             /* White text color */
    padding: 1rem 0;         /* 1rem top/bottom, 0 left/right */
    text-align: center;      /* Center all content inside header */
}

/* VISUAL EXAMPLE:
   ┌────────────────────────────────────────┐
   │  padding-top: 1rem                     │
   │ ┌──────────────────────────────────┐  │
   │ │  Header Content                  │  │ height controlled by content + padding
   │ ┌──────────────────────────────────┐  │
   │  padding-bottom: 1rem                  │
   └────────────────────────────────────────┘
   Full width: 100% of screen
*/

/* NAVIGATION TAG - Container for navigation links */
nav {
    margin-top: 1rem;        /* Space above nav (below header title) */
}

/* NAVIGATION ANCHOR TAGS - Individual navigation links */
nav a {
    color: #fff;             /* White link text */
    margin: 0 1rem;          /* 0 top/bottom, 1rem left/right (horizontal spacing) */
    text-decoration: none;   /* Removes underline from links */
    transition: color 0.3s ease;  /* Smooth color transition on hover */
    animation: dropdown 0.3s ease;         /* Prevents any default link animations */
}

/* VISUAL EXAMPLE for nav spacing:
   [Home]  1rem  [About]  1rem  [Contact]  1rem  [Resume]  1rem  [Projects]
           ↑ 1rem margin creates space between links
*/

/* MAIN TAG - Primary content area of page */
main {
    padding: 2rem;           /* 2rem space on all sides of content */
}

/* VISUAL EXAMPLE:
   ┌─ 2rem padding ──────────────┐
   │  ┌─────────────────────────┐ │
   │  │  Main Content Area      │ │ Width: 100% - (2rem × 2)
   │  │                         │ │
   │  └─────────────────────────┘ │
   └────────────────────────────────┘
*/

/* ARTICLE TAG - Container for individual content blocks */
article {
    margin-bottom: 2rem;     /* Space below each article (before next) */
}

/* SECTION TAG - Groups related content together */
section {
    margin-bottom: 2rem;     /* Space below each section */
}

/* VISUAL EXAMPLE for article/section spacing:
   ┌─────────────────────┐
   │ Article 1           │
   └─────────────────────┘
   [2rem margin-bottom creates gap]
   ┌─────────────────────┐
   │ Article 2           │
   └─────────────────────┘
*/

/* FOOTER TAG - Bottom section with copyright/info */
footer {
    background: #333;        /* Dark background (matches header) */
    color: #fff;             /* White text */
    text-align: center;      /* Center the footer text */
    padding: 1rem 0;         /* 1rem top/bottom padding */
    position: relative;      /* Allows normal document flow (doesn't overlap content) */
    width: 100%;             /* Full width of screen */
}

/* VISUAL EXAMPLE:
   ┌─────────────────────────────────────────┐
   │  Page Content                           │
   │                                         │
   ├─────────────────────────────────────────┤ ← Footer starts here
   │  © 2026 Joshua Kays. All rights...      │
   │  (position: relative - sits below page) │
   └─────────────────────────────────────────┘
*/

/* ============================================================================
   4. COMPONENT CLASSES
   ============================================================================
   WHY: Reusable styling for repeated elements across pages
*/

/* PROJECT CARD CLASS - Styling for project showcase boxes */
.project-card {
    background: #fff;           /* White background */
    border: 1px solid #ddd;     /* Light gray border around card */
    border-radius: 5px;         /* Rounded corners (5px = subtle, 15px = more rounded) */
    padding: 1rem;              /* 1rem space inside card */
    margin-bottom: 1rem;        /* 1rem space below card (before next) */
}

/* VISUAL EXAMPLE:
   ┌─ border-radius: 5px  ──────────┐
   │  ╱ slightly rounded corner     │
   │ border: 1px solid #ddd         │
   │ ┌──────────────────────────┐   │
   │ │  padding: 1rem           │   │  Inside padding
   │ │  ┌────────────────────┐  │   │
   │ │  │ Card Content       │  │   │
   │ │  └────────────────────┘  │   │
   │ └──────────────────────────┘   │
   └────────────────────────────────┘
   
   Color variation affects visual hierarchy:
   - White bg (#fff) = stands out
   - Light gray border (#ddd) = subtle frame
*/

/* BUTTON CLASS - Styling for clickable link buttons */
.button {
    display: inline-block;      /* Allows padding/width on element (makes it "button-like") */
    background: #333;           /* Dark background color */
    color: #fff;                /* White text */
    padding: 0.5rem 1rem;       /* 0.5rem top/bottom, 1rem left/right (vertical, horizontal) */
    text-decoration: none;      /* Removes underline from link */
    border-radius: 5px;         /* Rounded corners */
}

/* VISUAL EXAMPLE for display: inline-block:
   ├─ display: inline (default for <a>)
   │  └─ Ignores padding/width properties
   │     [Link text] - cannot be styled as button
   │
   └─ display: inline-block (for button-like link)
      └─ Respects padding/width
         ┌─────────────────┐
         │  View Project   │  ← Can have padding, looks like button
         └─────────────────┘
*/

/* VISUAL EXAMPLE for padding breakdown:
   padding: 0.5rem 1rem means:
   
   ┌──────────────────────────────┐
   │  0.5rem (top)                │
   │  ┌────────────────────────┐  │
   │  │ 1rem │  Button Text  │ 1rem │
   │  └────────────────────────┘  │
   │  0.5rem (bottom)             │
   └──────────────────────────────┘
*/

/* ============================================================================
   5. ID-SPECIFIC STYLES
   ============================================================================
   WHY: Special styling for unique elements (used only once per page)
   Note: IDs should be used sparingly; classes are better for reusability
*/

/* HERO SECTION ID - Large intro section at top of page */
#hero {
    /* Add custom styles for hero section here when needed */
    /* Example: background gradient, large text, etc. */
    background: linear-gradient(to vertical, #baebb6, #daeeb8);  /* Dark gradient background */
    color: #000000;                                        /* White text for contrast */

}

/* ============================================================================
   6. INTERACTIVE STATES (Hover, Focus)
   ============================================================================
   WHY: Provides visual feedback when user interacts with elements
   
   - :hover = when mouse hovers over element (desktop)
   - :focus = when element has keyboard focus (keyboard navigation)
   - :focus-visible = shows focus ring only for keyboard, not mouse
*/

/* Navigation links - Color change on hover/focus */
nav a:hover {
    color: #007bff;             /* Change text color to blue on hover */
}

/* VISUAL EXAMPLE:
   Normal:  Home  About  Contact  (white text)
   Hover:   Home  About  Contact  (blue text - shows it's clickable)
*/

/* Button - Color change on hover */
.button:hover {
    background: #555;           /* Slightly lighter gray on hover */
}

/* VISUAL EXAMPLE:
   Normal Click State:  ┌─────────────────┐
                        │  View Project   │ (dark gray #333)
                        └─────────────────┘
   
   Hover/Focus State:   ┌─────────────────┐
                        │  View Project   │ (lighter gray #555)
                        └─────────────────┘
*/

/* Focus states for keyboard accessibility */
nav a:focus {
    outline: 2px solid #007bff;  /* Blue outline around link when focused */
    outline-offset: 2px;          /* Space between outline and element */
}

.button:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* VISUAL EXAMPLE for focus outline:
   ┌─────────────────────────────┐
   │  ┏━━━━━━━━━━━━━━━━━━━━━━┓  │ ← 2px outline (visible focus ring)
   │  ┃  View Project        ┃  │
   │  ┗━━━━━━━━━━━━━━━━━━━━━━┛  │
   │ ← outline-offset: 2px gives space
   └─────────────────────────────┘
   
   WHY IMPORTANT: Keyboard users cannot see mouse cursor, need visible focus
*/

/* ============================================================================
   7. RESPONSIVE DESIGN (Mobile & Tablet)
   ============================================================================
   WHY: Adjusts styling for different screen sizes
   
   @media queries apply styles ONLY when screen width is below specified pixel width
   
   Common breakpoints:
   - 480px = Mobile phones
   - 768px = Tablets
   - 1024px = Large tablets/small desktops
*/

/* TABLET BREAKPOINT - Adjust for tablets (screens 768px or smaller) */
@media (max-width: 768px) {
    /* Reduce padding on smaller screens */
    main {
        padding: 1rem;  /* Reduced from 2rem to 1rem */
    }
    
    /* Stack navigation vertically on tablets */
    nav {
        flex-direction: column;  /* Stack items vertically (default is row) */
        gap: 0.5rem;             /* Smaller gap between nav items */
    }
}

/* MOBILE BREAKPOINT - Adjust for phones (screens 480px or smaller) */
@media (max-width: 480px) {
    /* Even tighter spacing on phones */
    main {
        padding: 0.75rem;  /* Further reduced from 1rem */
    }
    
    /* Larger text is harder to read on small screens, reduce size slightly */
    body {
        font-size: 14px;  /* Reduced from 16px default */
    }
    
    /* Make buttons full width on mobile */
    .button {
        width: 100%;      /* Take up full width */
        text-align: center;  /* Center text inside button */
    }
    
    /* Reduce header padding on mobile */
    header {
        padding: 0.75rem 0;  /* Reduced from 1rem */
    }
}

/* VISUAL EXAMPLE of responsive design:
   
   DESKTOP (1024px+):
   ┌─────────────────────────────────────────┐
   │ Logo          [Home][About][Contact]    │
   │ padding: 2rem                           │
   │ ┌─────────────────────────────────────┐ │
   │ │ Main Content Area                   │ │
   │ └─────────────────────────────────────┘ │
   └─────────────────────────────────────────┘
   
   TABLET (768px):
   ┌──────────────────────────┐
   │ Logo                     │
   │ [Home] [About] [Contact] │ ← Nav stacked horizontally still
   │ padding: 1rem            │
   │ ┌──────────────────────┐ │
   │ │ Main Content Area    │ │
   │ └──────────────────────┘ │
   └──────────────────────────┘
   
   MOBILE (480px):
   ┌────────────────┐
   │ Logo           │
   │ [Home]         │
   │ [About]        │ ← Nav stacks vertically
   │ [Contact]      │
   │ padding: 0.75rem
   │ ┌────────────┐ │
   │ │ Content    │ │
   │ │ font: 14px │ │
   │ └────────────┘ │
   │ ┌────────────┐ │
   │ │   Button   │ ← Full width (100%)
   │ └────────────┘ │
   └────────────────┘
*/