/**
 * Main Stylesheet
 * Professional Portfolio - Stefan M. Gulbrandsen
 *
 * This file imports all CSS modules in the correct order and provides
 * global utilities and overrides.
 *
 * Import order is important:
 * 1. Reset - Normalize browser defaults
 * 2. Variables - Design system tokens
 * 3. Layout - Base layout utilities
 * 4. Components - UI components
 */

/* ============================================================================
   IMPORTS
   ============================================================================ */

/* Foundation */
@import './reset.css';
@import './variables.css';
@import './layout.css';

/* Components */
@import './components/navigation.css';
@import './components/hero.css';
@import './components/about.css';
@import './components/projects.css';
@import './components/contact.css';
@import './components/footer.css';

/* ============================================================================
   GLOBAL UTILITIES
   ============================================================================ */

/**
 * Smooth scroll behavior for anchor links
 * - Already defined in reset.css but reinforced here
 */
html {
  scroll-behavior: smooth;
}

/**
 * Selection colors
 * - Custom text selection colors for brand consistency
 */
::selection {
  background-color: var(--color-primary-500);
  color: var(--color-text-inverse);
}

::-moz-selection {
  background-color: var(--color-primary-500);
  color: var(--color-text-inverse);
}

/* ============================================================================
   GLOBAL LINK STYLES
   ============================================================================ */

/**
 * Default link styles
 * - Underline on hover for accessibility
 */
a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-primary-700);
}

/**
 * Focus visible for all interactive elements
 * - Ensures keyboard navigation is always visible
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================================================
   GLOBAL TYPOGRAPHY
   ============================================================================ */

/**
 * Body text defaults
 * - Set in reset.css but can be customized here
 */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-background);
}

/**
 * Strong and bold text
 */
strong,
b {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-900);
}

/**
 * Emphasis
 */
em,
i {
  font-style: italic;
}

/* ============================================================================
   LOADING STATE (OPTIONAL)
   ============================================================================ */

/**
 * Loading class for lazy-loaded images
 * - Prevents layout shift
 * - Shows placeholder while loading
 */
img[loading="lazy"] {
  background-color: var(--color-neutral-100);
}

/**
 * Skeleton loading animation (can be applied to placeholders)
 */
@keyframes skeleton-loading {
  0% {
    background-color: var(--color-neutral-100);
  }
  50% {
    background-color: var(--color-neutral-200);
  }
  100% {
    background-color: var(--color-neutral-100);
  }
}

.skeleton {
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/**
 * Container utilities (max-width containers)
 */
.container {
  width: 100%;
  max-width: var(--width-content-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

/**
 * Narrow container for text content
 */
.container--narrow {
  max-width: var(--width-content-md);
}

/**
 * Wide container
 */
.container--wide {
  max-width: var(--width-content-2xl);
}

/**
 * Section divider
 */
.section-divider {
  height: 1px;
  background-color: var(--color-divider);
  border: none;
  margin: var(--spacing-12) auto;
}

@media (min-width: 768px) {
  .section-divider {
    margin: var(--spacing-16) auto;
  }
}

/* ============================================================================
   ACCESSIBILITY UTILITIES
   ============================================================================ */

/**
 * Focus trap for modals (if implemented)
 */
.focus-trap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
}

/**
 * No scroll (for modal open states)
 */
.no-scroll {
  overflow: hidden;
}

/* ============================================================================
   PRINT STYLES ENHANCEMENTS
   ============================================================================ */

@media print {
  /**
   * Hide non-essential elements when printing
   */
  .site-header,
  .site-footer,
  .skip-to-content,
  .nav-toggle,
  .hero__cta,
  .project-card__badge,
  .footer-nav {
    display: none !important;
  }

  /**
   * Optimize layout for print
   */
  .hero,
  section {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }

  .hero {
    min-height: auto;
  }

  /**
   * Ensure good contrast for print
   */
  body {
    background-color: white;
    color: black;
  }

  .project-card,
  .contact-method,
  .cta-card,
  .transparency-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #333;
  }
}

/* ============================================================================
   DARK MODE GLOBAL OVERRIDES
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  /**
   * Dark mode scrollbar (Webkit browsers)
   */
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--color-neutral-900);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-600);
    border-radius: var(--radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-neutral-500);
  }

  /**
   * Selection color in dark mode
   */
  ::selection {
    background-color: var(--color-primary-600);
    color: var(--color-text-inverse);
  }

  ::-moz-selection {
    background-color: var(--color-primary-600);
    color: var(--color-text-inverse);
  }
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/**
 * GPU acceleration for transformed elements
 * - Improves performance for animations
 */
.hero__image,
.project-card,
.btn,
.nav-menu__link {
  will-change: transform;
}

/**
 * Contain layout/paint for better performance
 */
.project-card,
.contact-method,
.cta-card {
  contain: layout paint;
}

/* ============================================================================
   REDUCED MOTION GLOBAL
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  /**
   * Disable smooth scroll for users who prefer reduced motion
   */
  html {
    scroll-behavior: auto;
  }

  /**
   * Disable GPU acceleration hints
   */
  * {
    will-change: auto !important;
  }
}