/* =============================================================================
   CV PAGE STYLES - Ean Walston Portfolio Website
   =============================================================================
   
   Styles specific to the CV page (cv.html). This page requires a professional,
   scannable layout that works well both on screen and in print. Clean
   typography and clear hierarchy are essential for CV readability.
   
   Key design principles:
   - Professional, academic formatting
   - Clear section hierarchy and organization
   - Optimized for both screen reading and printing
   - Consistent spacing and alignment
   - Easy scanning for important information
   ============================================================================= */

/* =============================================================================
   PAGE HEADER SECTION
   =============================================================================
   
   Professional header that establishes the CV context. Clean and minimal
   to match academic and professional standards.
   ============================================================================= */

.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 */
}

/* =============================================================================
   CV CONTENT SECTION
   =============================================================================
   
   Main CV document styling. Designed to be professional, scannable, and
   print-friendly while maintaining visual hierarchy and readability.
   ============================================================================= */

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

/* CV document container - optimal width for professional documents */
.cv-document {
  max-width: 800px; /* Professional document width */
  margin: 0 auto; /* Center the document */
  padding: 0 1rem; /* Side padding for mobile */
  background-color: #ffffff; /* Ensure white background for printing */
}

/* CV header with artist contact information */
.cv-header {
  text-align: center; /* Center align header information */
  margin-bottom: 3rem; /* Space below header */
  padding-bottom: 2rem; /* Padding below header */
  border-bottom: 2px solid #d4d4d4; /* Separator line */
  position: relative; /* Establish positioning context */
  z-index: 1; /* Keep below sticky navigation */
}

/* Artist name in CV header */
.cv-artist-name {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 2.5rem; /* Large, prominent name */
  font-weight: 400; /* Normal weight for Tanker */
  color: #000000; /* Black text */
  margin-bottom: 0.5rem; /* Space below name */
  line-height: 1.1; /* Tight line height */
}

/* Artist title/discipline */
.cv-title {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.25rem; /* Prominent subtitle */
  font-weight: 500; /* Medium weight for better readability while keeping color */
  color: #c6a98d; /* Sandstone accent - artistic spark preserved */
  margin-bottom: 1.5rem; /* Space before contact info */
  text-transform: uppercase; /* Uppercase for emphasis */
  letter-spacing: 0.05em; /* Slight letter spacing */
}

/* Contact information container */
.cv-contact {
  display: flex; /* Flexbox layout */
  flex-wrap: wrap; /* Wrap on small screens */
  justify-content: center; /* Center align contact items */
  gap: 2rem; /* Space between contact items */
}

/* Individual contact items */
.cv-contact-item {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.9rem; /* Slightly smaller text */
  color: #000000; /* Black text */
  margin: 0; /* Remove default margin */
}

/* Contact labels */
.contact-label {
  font-weight: 500; /* Medium weight for labels */
  color: #666666; /* Grey for labels */
}

/* Links in contact information */
.cv-contact a {
  color: #000000; /* Black links to match aesthetic */
  text-decoration: underline; /* Underline for accessibility */
}

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

/* =============================================================================
   CV SECTIONS
   =============================================================================
   
   Individual CV sections (Education, Exhibitions, etc.). Consistent formatting
   with clear hierarchy and professional appearance.
   ============================================================================= */

/* CV section containers */
.cv-section {
  margin-bottom: 3rem; /* Space between major sections */
  page-break-inside: avoid; /* Avoid breaking sections across pages when printing */
}

/* Section titles */
.cv-section-title {
  font-family: 'Tanker', Impact, sans-serif; /* Display font */
  font-size: 1.5rem; /* Prominent section headings */
  font-weight: 400; /* Normal weight */
  color: #000000; /* Black text */
  margin-bottom: 1.5rem; /* Space below section title */
  padding-bottom: 0.5rem; /* Padding below title */
  border-bottom: 1px solid #d4d4d4; /* Underline for section separation */
  text-transform: uppercase; /* Uppercase for emphasis */
  letter-spacing: 0.05em; /* Slight letter spacing */
}

/* Section content containers */
.cv-section-content {
  margin-left: 0; /* No indentation by default */
}

/* Subsection styling (for Solo vs Group exhibitions, etc.) */
.cv-subsection {
  margin-bottom: 2rem; /* Space between subsections */
}

/* Subsection titles */
.cv-subsection-title {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1.125rem; /* Slightly larger than body */
  font-weight: 600; /* Semi-bold weight */
  color: #000000; /* Black text */
  margin-bottom: 1rem; /* Space below subsection title */
  margin-top: 1.5rem; /* Space above subsection title */
}

/* =============================================================================
   CV ENTRIES
   =============================================================================
   
   Individual CV entries (jobs, exhibitions, awards, etc.). Consistent
   formatting with date alignment and clear hierarchy.
   ============================================================================= */

/* CV entry containers */
.cv-entry {
  margin-bottom: 1.5rem; /* Space between entries */
  page-break-inside: avoid; /* Avoid breaking entries across pages */
}

/* CV entry headers with title and date */
.cv-entry-header {
  display: flex; /* Flexbox for title/date alignment */
  justify-content: space-between; /* Title left, date right */
  align-items: baseline; /* Align baselines */
  margin-bottom: 0.25rem; /* Small space before institution */
  flex-wrap: wrap; /* Wrap on very small screens */
  gap: 1rem; /* Gap between title and date when wrapped */
}

/* Entry titles */
.cv-entry-title {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 1rem; /* Standard body size */
  font-weight: 600; /* Semi-bold for prominence */
  color: #000000; /* Black text */
  margin: 0; /* Remove default margin */
  flex: 1; /* Take available space */
}

/* Entry dates */
.cv-entry-date {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.875rem; /* Slightly smaller text */
  font-weight: 400; /* Normal weight */
  color: #666666; /* Grey for dates */
  margin: 0; /* Remove default margin */
  white-space: nowrap; /* Prevent date wrapping */
}

/* Institution/location information */
.cv-entry-institution {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.9rem; /* Slightly smaller than title */
  font-weight: 400; /* Normal weight */
  color: #666666; /* Grey for secondary information */
  margin: 0 0 0.25rem 0; /* Small bottom margin */
  font-style: italic; /* Italic for distinction */
}

/* Additional details for entries */
.cv-entry-details {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.875rem; /* Small text for details */
  font-weight: 300; /* Light weight */
  color: #666666; /* Grey for details */
  margin: 0; /* Remove default margin */
  line-height: 1.5; /* Comfortable line height */
}

/* =============================================================================
   CV DOWNLOAD SECTION
   =============================================================================
   
   Section for PDF download and print options. Professional styling that
   matches the overall CV aesthetic.
   ============================================================================= */

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

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

/* Download section heading */
.download-title {
  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 */
}

/* Download description text */
.download-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 */
}

/* Download action buttons container */
.download-actions {
  display: flex; /* Flexbox layout */
  gap: 1rem; /* Space between buttons */
  justify-content: center; /* Center align buttons */
  flex-wrap: wrap; /* Wrap on small screens */
  margin-bottom: 1rem; /* Space before note */
}

/* Download note styling */
.download-note {
  font-family: 'Space Grotesk', sans-serif; /* Body font */
  font-size: 0.875rem; /* Smaller text for note */
  color: #666666; /* Grey for note */
  margin: 0; /* Remove default margin */
}

/* =============================================================================
   RESPONSIVE DESIGN
   =============================================================================
   
   Responsive adjustments for CV layout. Maintains professional appearance
   across different screen sizes while ensuring readability.
   ============================================================================= */

/* Tablet adjustments */
@media (min-width: 768px) {
  /* Page header adjustments */
  .page-header {
    padding: 5rem 0 4rem; /* More generous padding */
  }
  
  .page-title {
    font-size: 3.5rem; /* Larger title */
  }
  
  /* CV content adjustments */
  .cv-content {
    padding: 5rem 0; /* More section padding */
  }
  
  .cv-document {
    padding: 0 2rem; /* More side padding */
  }
  
  /* Contact information layout */
  .cv-contact {
    gap: 3rem; /* More space between contact items */
  }
  
  /* Section content indentation on larger screens */
  .cv-section-content {
    margin-left: 1rem; /* Slight indentation for hierarchy */
  }
  
  /* Download section adjustments */
  .cv-download {
    padding: 5rem 0; /* More padding */
  }
}

/* Large desktop adjustments */
@media (min-width: 1200px) {
  /* More generous spacing on large screens */
  .page-header {
    padding: 6rem 0 5rem;
  }
  
  .cv-content, .cv-download {
    padding: 6rem 0;
  }
  
  /* Larger CV document container */
  .cv-document {
    max-width: 900px; /* 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 */
  }
  
  .page-title {
    font-size: 2.5rem; /* Smaller title */
  }
  
  .page-subtitle {
    font-size: 1.125rem; /* Smaller subtitle */
  }
  
  /* CV content mobile adjustments */
  .cv-content {
    padding: 3rem 0; /* Less section padding */
  }
  
  .cv-artist-name {
    font-size: 2rem; /* Smaller name on mobile */
  }
  
  .cv-title {
    font-size: 1.125rem; /* Smaller title */
  }
  
  /* Contact information stack vertically */
  .cv-contact {
    flex-direction: column; /* Stack contact items */
    gap: 0.5rem; /* Smaller gaps */
  }
  
  /* Entry headers stack on mobile */
  .cv-entry-header {
    flex-direction: column; /* Stack title and date */
    align-items: flex-start; /* Left align */
    gap: 0.25rem; /* Small gap */
  }
  
  .cv-entry-date {
    white-space: normal; /* Allow date wrapping on mobile */
  }
  
  /* Section titles smaller on mobile */
  .cv-section-title {
    font-size: 1.25rem; /* Smaller section titles */
  }
  
  /* Download section mobile adjustments */
  .cv-download {
    padding: 3rem 0; /* Less padding */
  }
  
  .download-title {
    font-size: 1.75rem; /* Smaller download title */
  }
  
  .download-text {
    font-size: 1rem; /* Standard size on mobile */
  }
  
  /* Stack download buttons on mobile */
  .download-actions {
    flex-direction: column; /* Stack buttons */
    align-items: center; /* Center align */
  }
  
  .download-actions .btn-primary,
  .download-actions .btn-secondary {
    width: 100%; /* Full width buttons */
    max-width: 280px; /* But not too wide */
  }
}

/* =============================================================================
   PRINT STYLES
   =============================================================================
   
   Optimized styles for printing the CV. Ensures professional appearance
   when printed or saved as PDF.
   ============================================================================= */

@media print {
  /* Remove non-essential elements for print */
  header, footer, .cv-download {
    display: none; /* Hide navigation and download section */
  }
  
  /* Optimize page layout for print */
  .page-header {
    padding: 1rem 0 0.5rem; /* Minimal padding */
    border-bottom: none; /* Remove border */
  }
  
  .cv-content {
    padding: 0; /* Remove padding for print */
  }
  
  .cv-document {
    max-width: none; /* Use full page width */
    padding: 0; /* Remove padding */
  }
  
  /* Ensure black text for print */
  * {
    color: #000000 !important; /* Force black text */
    background: transparent !important; /* Remove backgrounds */
  }
  
  /* Optimize spacing for print */
  .cv-section {
    margin-bottom: 1.5rem; /* Less space between sections */
  }
  
  .cv-entry {
    margin-bottom: 1rem; /* Less space between entries */
  }
  
  /* Ensure section breaks work properly */
  .cv-section {
    page-break-inside: avoid; /* Avoid breaking sections */
  }
  
  .cv-entry {
    page-break-inside: avoid; /* Avoid breaking entries */
  }
  
  /* Font size adjustments for print */
  .cv-artist-name {
    font-size: 18pt; /* Standard print size */
  }
  
  .cv-title {
    font-size: 12pt; /* Standard print size */
  }
  
  .cv-section-title {
    font-size: 14pt; /* Standard print size */
  }
  
  .cv-entry-title {
    font-size: 11pt; /* Standard print size */
  }
  
  .cv-entry-institution, .cv-entry-details {
    font-size: 10pt; /* Standard print size */
  }
  
  /* Ensure proper line spacing for print */
  p, li {
    line-height: 1.4; /* Comfortable print line height */
  }
}