/* Nathan Wardy Resume Website - Main CSS File */

/* Base Styles - Load First */
@import 'base/variables.css';
@import 'base/reset.css';
@import 'base/typography.css';

/* Component Styles */
@import 'components/header.css';
@import 'components/hero.css';
@import 'components/about.css';
@import 'components/skills.css';
@import 'components/projects.css';
@import 'components/experience.css';
@import 'components/education.css';

@import 'components/footer.css';

/* Global Layout Utilities - Edge to edge modern design */
.container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.content-wrapper {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

@media (max-width: 768px) {
  .content-wrapper {
    padding: 0 var(--spacing-base);
  }
}

@media (max-width: 480px) {
  .content-wrapper {
    padding: 0 var(--spacing-sm);
  }
}

/* Section Spacing - Black outline design */
section {
  position: relative;
  padding: var(--spacing-4xl) 0;
  border-bottom: 2px solid var(--color-black);
}

section:last-of-type {
  border-bottom: none;
}

/* Internal section dividers */
.section-divider {
  width: 100vw;
  height: 2px;
  background-color: var(--color-black);
  margin: var(--spacing-2xl) 0;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.section-box {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 2px solid var(--color-black);
  margin: 0 var(--spacing-lg);
  padding: var(--spacing-4xl) var(--spacing-xl);
}

/* Remove borders for specific sections */
.about .section-box,
.technical .section-box,
.experience .section-box {
  border: none;
}

/* Shrink experience section box */
.experience .section-box {
  padding: var(--spacing-2xl) var(--spacing-lg);
  margin: 0 var(--spacing-2xl);
}



/* Smooth scroll offset for fixed header */
section[id] {
  scroll-margin-top: 100px;
}

@media (max-width: 768px) {
  section {
    padding: var(--spacing-5xl) 0; /* Increased from 4xl to 5xl */
  }
  
  section[id] {
    scroll-margin-top: 80px;
  }
  
  .section-box {
    margin: 0 var(--spacing-base);
    background-color: var(--color-white);
    padding: var(--spacing-3xl) var(--spacing-lg); /* Increased vertical padding */
  }
  
  body, section {
    background-color: var(--color-white);
  }

}

@media (max-width: 480px) {
  section {
    padding: var(--spacing-6xl) 0; /* Increased from 4xl to 6xl for more breathing room */
  }
  
  section[id] {
    scroll-margin-top: 70px;
  }
  
  .section-box {
    margin: 0 var(--spacing-xs);
    background-color: var(--color-white);
    padding: var(--spacing-4xl) var(--spacing-base); /* Increased vertical padding significantly */
  }
  
  body, section {
    background-color: var(--color-white);
  }

}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* Focus styles for better accessibility */
.nav-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Performance optimization for modern design */
* {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Text scrambling animation support - prevent layout shifts */
.scrambling {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
}

/* Ensure consistent character spacing during scrambling */
.scrambling,
.section-title,
.hero-title,
.hero-subtitle,
.about-text,
.skill-level,
.skill-list,
.project-title,
.project-description,
.company-label,
.role-title,
.role-duration,
.role-duties li,
.school,
.degree-title,
.gpa,
.coursework,
.achievements-title,
.awards-list li,
.volunteering-title,
.volunteer-list li {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .nav-links a,
  .project,
  .job,
  .skill-category,
  .degree,
  .achievements,
  .volunteering,
  .contact-details {
    /* Ensure touch targets are at least 44px */
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  
  .nav-links a {
    justify-content: center;
    min-width: 44px;
  }
}

/* Print styles */
@media print {
  .header,
  .footer {
    display: none;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: black;
    background: white;
  }
  
  .hero {
    margin-top: 0;
    padding-top: 0;
  }
  
  section {
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }
  
  .project,
  .job {
    page-break-inside: avoid;
  }
}