/* =============================================================================
   GLOBAL STYLES - Ean Walston Portfolio Website
   =============================================================================
   
   This stylesheet contains all global styles that apply across the entire site.
   It establishes the foundational design system based on Ean's artistic vision:
   - Clean, minimal aesthetic reflecting printmaking precision
   - Professional yet laid-back tone
   - High contrast for accessibility
   - Typography hierarchy using Tanker and Space Grotesk
   
   Color Palette:
   - Background: #ffffff (white) - Clean canvas like printmaking paper
   - Text: #000000 (black) - High contrast for readability
   - Primary Accent: #d4d4d4 (light grey) - Subtle emphasis
   - Secondary Accent: #c6a98d (desaturated sandstone) - Warm artistic touch
   ============================================================================= */

/* Import Google Fonts - Tanker for headings, Space Grotesk for body text */
@import url('https://fonts.googleapis.com/css2?family=Tanker&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* =============================================================================
   CSS RESET & BASE STYLES
   =============================================================================
   
   Reset default browser styles to ensure consistency across different browsers.
   This creates a clean foundation for our custom styling.
   ============================================================================= */

/* Universal box-sizing for predictable layout behavior */
*, *::before, *::after {
  box-sizing: border-box; /* Includes padding and border in element width/height */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
}

/* Root font size for rem calculations - 16px base for accessibility */
html {
  font-size: 16px; /* Base font size - users can adjust in browser settings */
  scroll-behavior: smooth; /* Smooth scrolling for anchor links */
}

/* Body styles - foundation for the entire site */
body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Space Grotesk for body text with system font fallbacks for performance */
  font-weight: 400; /* Normal weight for optimal readability */
  line-height: 1.6; /* Comfortable line spacing - 1.6 is accessibility standard */
  color: #000000; /* Pure black text for maximum contrast */
  background-color: #ffffff; /* Clean white background like printmaking paper */
  font-size: 1rem; /* 16px base size */
  min-height: 100vh; /* Ensure body covers full viewport height */
  display: flex; /* Flexbox for sticky footer layout */
  flex-direction: column; /* Stack header, main, footer vertically */
}

/* =============================================================================
   TYPOGRAPHY HIERARCHY
   =============================================================================
   
   Typography system using Tanker for headings (artistic impact) and 
   Space Grotesk for body text (clean readability). This hierarchy supports
   both accessibility and Ean's artistic brand.
   ============================================================================= */

/* Main heading styles using Tanker font for artistic impact */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Tanker', Impact, 'Arial Black', sans-serif;
  /* Tanker for headings with bold fallbacks */
  font-weight: 400; /* Tanker is already bold by design */
  line-height: 1.2; /* Tighter line height for headings */
  margin-bottom: 0.5em; /* Consistent spacing below headings */
  color: #000000; /* Black text for high contrast */
}

/* Specific heading sizes following typographic scale */
h1 {
  font-size: 2.5rem; /* 40px - Main page titles */
  margin-bottom: 1rem; /* Extra space for primary headings */
}

h2 {
  font-size: 2rem; /* 32px - Section headings */
  margin-bottom: 0.75rem;
}

h3 {
  font-size: 1.5rem; /* 24px - Subsection headings */
  margin-bottom: 0.5rem;
}

h4 {
  font-size: 1.25rem; /* 20px - Minor headings */
}

h5 {
  font-size: 1.125rem; /* 18px - Small headings */
}

h6 {
  font-size: 1rem; /* 16px - Smallest headings */
}

/* Paragraph and text styles */
p {
  margin-bottom: 1rem; /* Consistent paragraph spacing */
  max-width: 65ch; /* Optimal reading line length (65 characters) */
}

/* Link styles - maintaining accessibility while fitting brand */
a {
  color: #000000; /* Black links to maintain minimal aesthetic */
  text-decoration: underline; /* Underline for accessibility - indicates links */
  transition: color 0.3s ease; /* Smooth color transition on hover */
}

a:hover, a:focus {
  color: #c6a98d; /* Sandstone accent on hover/focus for feedback */
  outline: 2px solid #c6a98d; /* Focus outline for keyboard navigation */
  outline-offset: 2px; /* Space between element and outline */
}

/* Remove outline on mouse interaction but keep for keyboard */
a:hover {
  outline: none;
}

/* List styles */
ul, ol {
  margin-bottom: 1rem;
  padding-left: 2rem; /* Indent for list hierarchy */
}

li {
  margin-bottom: 0.25rem; /* Small spacing between list items */
}

/* =============================================================================
   LAYOUT COMPONENTS
   =============================================================================
   
   Global layout components used across all pages. These establish the
   fundamental structure and ensure consistent spacing and alignment.
   ============================================================================= */

/* Container for centering content with max-width */
.container {
  max-width: 1200px; /* Maximum content width for readability */
  margin: 0 auto; /* Center horizontally */
  padding: 0 1rem; /* Side padding for mobile */
}

/* Responsive padding adjustments */
@media (min-width: 768px) {
  .container {
    padding: 0 2rem; /* More padding on larger screens */
  }
}

/* Main content area - grows to fill available space */
main {
  flex: 1; /* Grow to fill space between header and footer */
  padding: 2rem 0; /* Vertical padding for content breathing room */
}

/* =============================================================================
   NAVIGATION STYLES
   =============================================================================
   
   Global navigation component. Clean, minimal design that doesn't compete
   with the artwork. Accessible keyboard navigation included.
   ============================================================================= */

/* Header container */
header {
  background-color: #ffffff; /* White background */
  border-bottom: 1px solid #d4d4d4; /* Subtle grey border */
  position: sticky; /* Stick to top when scrolling */
  top: 0; /* Stick to very top */
  z-index: 1000; /* Above other content - increased to ensure it stays on top */
}

/* Main navigation container */
nav {
  display: flex; /* Flexbox for layout control */
  justify-content: space-between; /* Logo left, menu right */
  align-items: center; /* Vertically center items */
  padding: 1rem 0; /* Vertical padding */
}

/* Logo/site title styling */
.logo {
  font-family: 'Tanker', Impact, sans-serif; /* Tanker for logo impact */
  font-size: 1.5rem; /* Prominent but not overwhelming */
  font-weight: 400; /* Normal weight for Tanker */
  color: #000000; /* Black text */
  text-decoration: none; /* Remove underline from logo link */
}

.logo:hover, .logo:focus {
  color: #c6a98d; /* Sandstone on hover/focus */
}

/* Navigation menu list */
.nav-menu {
  display: flex; /* Horizontal layout */
  list-style: none; /* Remove bullet points */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  gap: 2rem; /* Space between menu items */
}

/* Individual navigation items */
.nav-item {
  margin: 0; /* Override global li margin */
}

/* Navigation links */
.nav-link {
  font-family: 'Space Grotesk', sans-serif; /* Body font for menu */
  font-weight: 500; /* Medium weight for emphasis */
  text-decoration: none; /* Remove underline */
  color: #000000; /* Black text */
  padding: 0.5rem 0; /* Vertical padding for touch targets */
  border-bottom: 2px solid transparent; /* Invisible border for hover effect */
  transition: border-color 0.3s ease; /* Smooth border transition */
}

.nav-link:hover, .nav-link:focus {
  border-bottom-color: #c6a98d; /* Sandstone underline on hover/focus */
  outline: none; /* Remove default focus outline (we have border) */
}

/* Active page indicator */
.nav-link.active {
  border-bottom-color: #d4d4d4; /* Light grey for current page */
}

/* =============================================================================
   BREADCRUMB NAVIGATION STYLES
   =============================================================================
   
   Breadcrumb navigation for hierarchical page structure. Provides context
   and easy navigation back to parent pages.
   ============================================================================= */

.breadcrumb {
  margin-bottom: 2rem; /* Space below breadcrumb */
}

.breadcrumb-list {
  display: flex; /* Horizontal layout */
  align-items: center; /* Vertically center items */
  list-style: none; /* Remove bullet points */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  gap: 0.5rem; /* Small gap between items */
}

.breadcrumb-item {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.9rem; /* Slightly smaller than body text */
  color: #666666; /* Medium grey for hierarchy */
}

.breadcrumb-item a {
  color: #666666; /* Medium grey for links */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition */
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  color: #c6a98d; /* Sandstone on hover/focus */
}

.breadcrumb-item:not(:last-child)::after {
  content: '/'; /* Forward slash separator */
  margin-left: 0.5rem; /* Space before separator */
  color: #d4d4d4; /* Light grey separator */
}

.breadcrumb-item[aria-current="page"] {
  color: #000000; /* Black for current page */
  font-weight: 500; /* Medium weight for emphasis */
}

/* =============================================================================
   FOOTER STYLES
   =============================================================================
   
   Minimal footer with essential information and social links.
   Maintains brand consistency while providing necessary site information.
   ============================================================================= */

footer {
  background-color: #ffffff; /* White background */
  border-top: 1px solid #d4d4d4; /* Subtle top border */
  padding: 2rem 0; /* Comfortable padding */
  margin-top: auto; /* Push to bottom with flexbox */
}

/* Footer content container */
.footer-content {
  display: flex; /* Flexbox layout */
  justify-content: space-between; /* Spread content apart */
  align-items: center; /* Vertically center */
  flex-wrap: wrap; /* Wrap on small screens */
  gap: 1rem; /* Gap between footer elements */
}

/* Footer text styling */
.footer-text {
  font-size: 0.875rem; /* Smaller text - 14px */
  color: #000000; /* Black text */
}

/* Social links in footer */
.social-links {
  display: flex;
  gap: 1rem; /* Space between social links */
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-link {
  font-size: 0.875rem; /* Small text */
  text-decoration: none;
  color: #000000;
  font-weight: 500; /* Medium weight for emphasis */
}

.social-link:hover, .social-link:focus {
  color: #c6a98d; /* Sandstone on hover */
}

/* =============================================================================
   UTILITY CLASSES
   =============================================================================
   
   Reusable utility classes for common styling needs. These follow the
   single responsibility principle and can be combined as needed.
   ============================================================================= */

/* Screen reader only content - for 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: 0;
}

/* Button reset for custom styled buttons */
.btn-reset {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

/* Primary button styling */
.btn-primary {
  background-color: #000000; /* Black background */
  color: #ffffff; /* White text */
  border: 2px solid #000000; /* Black border */
  padding: 0.75rem 1.5rem; /* Comfortable padding */
  font-family: 'Space Grotesk', sans-serif; /* Consistent font */
  font-weight: 500; /* Medium weight */
  font-size: 1rem; /* Standard size */
  text-decoration: none; /* Remove underline if used as link */
  display: inline-block; /* Allow padding on inline element */
  transition: all 0.3s ease; /* Smooth transitions */
  cursor: pointer; /* Pointer cursor */
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #c6a98d; /* Sandstone background on hover */
  border-color: #c6a98d; /* Sandstone border */
  color: #ffffff; /* Keep white text */
  outline: 2px solid #c6a98d; /* Focus outline */
  outline-offset: 2px;
}

/* Secondary button styling */
.btn-secondary {
  background-color: transparent; /* Transparent background */
  color: #000000; /* Black text */
  border: 2px solid #d4d4d4; /* Light grey border */
  padding: 0.75rem 1.5rem; /* Same padding as primary */
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: #d4d4d4; /* Light grey background */
  border-color: #d4d4d4;
  color: #000000; /* Keep black text */
}

/* =============================================================================
   RESPONSIVE DESIGN
   =============================================================================
   
   Mobile-first responsive design approach. Base styles work on mobile,
   then enhanced for larger screens. Breakpoints chosen based on content
   needs rather than specific devices.
   ============================================================================= */

/* Mobile navigation adjustments */
@media (max-width: 767px) {
  .nav-menu {
    gap: 1rem; /* Reduce gap on mobile */
  }
  
  .footer-content {
    flex-direction: column; /* Stack footer items vertically */
    text-align: center; /* Center align on mobile */
  }
  
  /* Adjust heading sizes for mobile */
  h1 {
    font-size: 2rem; /* Smaller on mobile */
  }
  
  h2 {
    font-size: 1.75rem;
  }
}

/* Tablet and up adjustments */
@media (min-width: 768px) {
  .nav-menu {
    gap: 2.5rem; /* More space on larger screens */
  }
}

/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   =============================================================================
   
   Additional styles to ensure the site is accessible to all users,
   including those using screen readers, keyboard navigation, or other
   assistive technologies.
   ============================================================================= */

/* Focus styles for better keyboard navigation */
*:focus {
  outline: 2px solid #c6a98d; /* Sandstone focus outline */
  outline-offset: 2px; /* Space between element and outline */
}

/* Ensure sufficient color contrast for accessibility */
::selection {
  background-color: #c6a98d; /* Sandstone selection background */
  color: #ffffff; /* White selected text */
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto; /* Disable smooth scrolling */
  }
}