/* =============================================================================
   BIO PAGE STYLES - Ean Walston Portfolio Website
   =============================================================================
   
   Styles specific to the biography page (bio.html). This page focuses on
   typography and readability, creating an optimal reading experience for
   longer-form content about the artist's background and philosophy.
   
   Key design principles:
   - Typography-first approach for extended reading
   - Generous line spacing and comfortable measure
   - Clear content hierarchy with headings
   - Minimal visual distractions from text content
   - Comfortable margins and padding for reading flow
   ============================================================================= */

/* =============================================================================
   PAGE HEADER SECTION
   =============================================================================
   
   Clean, minimal header that establishes the page purpose without competing
   with the main content. Uses consistent typography hierarchy with other pages.
   ============================================================================= */

.page-header {
  padding: 4rem 0 3rem; /* Generous top padding, moderate bottom */
  background-color: #ffffff; /* Clean white background */
  border-bottom: 1px solid #d4d4d4; /* Subtle section separator */
  text-align: center; /* Center align header content */
}

/* Main page title */
.page-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font for impact */
  font-size: 3rem; /* Large, prominent heading */
  font-weight: 400; /* Normal weight for Tanker */
  color: #000000; /* Black text for high contrast */
  margin-bottom: 0.75rem; /* Space below title */
  line-height: 1.1; /* Tight line height for display text */
}

/* Page subtitle */
.page-subtitle {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.25rem; /* Larger than body text but smaller than title */
  font-weight: 500; /* Medium weight for better readability while keeping color */
  color: #c6a98d; /* Original sandstone accent color - artistic spark preserved */
  text-transform: uppercase; /* Uppercase for distinction */
  letter-spacing: 0.1em; /* Spaced tracking for readability */
}

/* =============================================================================
   BIO CONTENT SECTION
   =============================================================================
   
   Main content area optimized for extended reading. Typography choices
   prioritize comfort and comprehension over visual impact.
   ============================================================================= */

.bio-content {
  padding: 4rem 0; /* Comfortable section padding */
  background-color: #ffffff; /* Clean white background */
}

/* Bio text container - optimal width for reading */
.bio-text {
  max-width: 700px; /* Optimal line length for reading (45-75 characters) */
  margin: 0 auto; /* Center the text column */
  padding: 0 1rem; /* Side padding for mobile */
}

/* Content headings within bio sections */
.content-heading {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 2rem; /* Prominent but not overwhelming */
  font-weight: 400; /* Normal weight for Tanker */
  color: #000000; /* Black text */
  margin-top: 3rem; /* Space above section headings */
  margin-bottom: 1.5rem; /* Space below headings */
  line-height: 1.2; /* Tight line height for headings */
}

/* First content heading doesn't need top margin */
.content-heading:first-child {
  margin-top: 0; /* Remove top margin for first heading */
}

/* Bio paragraph styling for optimal readability */
.bio-paragraph {
  font-family: 'Space Grotesk', sans-serif; /* Clean, readable body font */
  font-size: 1.125rem; /* Slightly larger than standard body text for comfort */
  font-weight: 400; /* Normal weight */
  line-height: 1.8; /* Generous line height for comfortable reading */
  color: #000000; /* Black text for high contrast */
  margin-bottom: 1.5rem; /* Consistent paragraph spacing */
  text-align: left; /* Left align for optimal reading */
}

/* Last paragraph in a section doesn't need bottom margin */
.bio-paragraph:last-child {
  margin-bottom: 0; /* Remove bottom margin from last paragraph */
}

/* Emphasis within bio text */
.bio-text em {
  font-style: italic; /* Italic emphasis */
  font-weight: 500; /* Medium weight for better readability while keeping color */
  color: #c6a98d; /* Sandstone color - artistic spark preserved */
}

/* Strong emphasis within bio text */
.bio-text strong {
  font-weight: 600; /* Semi-bold weight */
  color: #000000; /* Keep black for strong emphasis */
}

/* =============================================================================
   CALL-TO-ACTION SECTION
   =============================================================================
   
   Encourages engagement after reading the bio. Clean design that doesn't
   compete with the main content but provides clear next steps.
   ============================================================================= */

.bio-cta {
  padding: 4rem 0; /* Comfortable section padding */
  background-color: #fafafa; /* Very light grey background for subtle contrast */
  border-top: 1px solid #d4d4d4; /* Subtle top border */
}

/* CTA content container */
.cta-content {
  max-width: 600px; /* Comfortable content width */
  margin: 0 auto; /* Center content */
  text-align: center; /* Center align CTA content */
  padding: 0 1rem; /* Side padding for mobile */
}

/* CTA heading */
.cta-heading {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 2rem; /* Prominent heading */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  margin-bottom: 1rem; /* Space below heading */
}

/* CTA descriptive text */
.cta-text {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger than body */
  line-height: 1.6; /* Comfortable line height */
  color: #000000; /* Black text */
  margin-bottom: 2rem; /* Space before action buttons */
}

/* CTA action buttons container */
.cta-actions {
  display: flex; /* Flexbox layout */
  gap: 1rem; /* Space between buttons */
  justify-content: center; /* Center align buttons */
  flex-wrap: wrap; /* Wrap on small screens */
}

/* =============================================================================
   RESPONSIVE DESIGN
   =============================================================================
   
   Adjustments for different screen sizes while maintaining optimal readability.
   Focus on typography scaling and comfortable reading experience.
   ============================================================================= */

/* Tablet adjustments */
@media (min-width: 768px) {
  /* Page header adjustments */
  .page-header {
    padding: 5rem 0 4rem; /* More generous padding on larger screens */
  }
  
  .page-title {
    font-size: 3.5rem; /* Larger title on larger screens */
  }
  
  /* Bio content adjustments */
  .bio-content {
    padding: 5rem 0; /* More section padding */
  }
  
  .bio-text {
    padding: 0 2rem; /* More side padding */
  }
  
  /* Content headings can be larger */
  .content-heading {
    font-size: 2.25rem; /* Slightly larger headings */
    margin-top: 4rem; /* More space above sections */
  }
  
  /* CTA section adjustments */
  .bio-cta {
    padding: 5rem 0; /* More padding */
  }
  
  .cta-heading {
    font-size: 2.25rem; /* Larger CTA heading */
  }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
  /* Even more generous spacing on large screens */
  .page-header {
    padding: 6rem 0 5rem;
  }
  
  .bio-content, .bio-cta {
    padding: 6rem 0;
  }
  
  /* Larger bio text container for better use of space */
  .bio-text {
    max-width: 800px; /* Slightly wider on very large screens */
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  /* Smaller page header on mobile */
  .page-header {
    padding: 3rem 0 2rem; /* Less padding on mobile */
  }
  
  .page-title {
    font-size: 2.5rem; /* Smaller title on mobile */
  }
  
  .page-subtitle {
    font-size: 1.125rem; /* Smaller subtitle */
  }
  
  /* Bio content adjustments for mobile */
  .bio-content {
    padding: 3rem 0; /* Less section padding */
  }
  
  .content-heading {
    font-size: 1.75rem; /* Smaller headings on mobile */
    margin-top: 2.5rem; /* Less space above sections */
  }
  
  .bio-paragraph {
    font-size: 1rem; /* Standard body size on mobile */
    line-height: 1.7; /* Slightly tighter line height */
  }
  
  /* CTA section mobile adjustments */
  .bio-cta {
    padding: 3rem 0; /* Less padding */
  }
  
  .cta-heading {
    font-size: 1.75rem; /* Smaller CTA heading */
  }
  
  .cta-text {
    font-size: 1rem; /* Standard size on mobile */
  }
  
  /* Stack CTA buttons vertically on mobile */
  .cta-actions {
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center align stacked buttons */
  }
  
  .cta-actions .btn-primary,
  .cta-actions .btn-secondary {
    width: 100%; /* Full width buttons on mobile */
    max-width: 280px; /* But not too wide */
  }
}

/* =============================================================================
   ACCESSIBILITY ENHANCEMENTS
   =============================================================================
   
   Ensure the biography page is accessible to all users, particularly
   important for longer-form content that requires sustained reading.
   ============================================================================= */

/* Enhanced focus states for better keyboard navigation */
.bio-text:focus-within {
  outline: 2px solid #c6a98d; /* Sandstone focus outline */
  outline-offset: 4px; /* More space for text content */
}

/* Improve readability for users with dyslexia or reading difficulties */
@media (prefers-contrast: high) {
  .bio-paragraph {
    line-height: 2; /* Even more generous line height in high contrast mode */
  }
  
  .content-heading {
    border-bottom: 2px solid #000000; /* Underline headings for clarity */
    padding-bottom: 0.5rem; /* Space above underline */
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  /* Remove any subtle animations if added later */
  * {
    transition: none !important; /* Disable transitions */
  }
}

/* Print styles for when users want to print the bio */
@media print {
  .page-header {
    padding: 2rem 0 1rem; /* Less padding for print */
  }
  
  .bio-content {
    padding: 1rem 0; /* Minimal padding for print */
  }
  
  .bio-cta {
    display: none; /* Hide CTA section in print */
  }
  
  .bio-paragraph {
    font-size: 12pt; /* Standard print size */
    line-height: 1.6; /* Comfortable print line height */
    margin-bottom: 12pt; /* Standard paragraph spacing */
  }
  
  .content-heading {
    page-break-after: avoid; /* Avoid page breaks after headings */
    margin-top: 24pt; /* Standard print spacing */
  }
}