/* Performance and Accessibility Enhancements */

/* Improve focus management */
*:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Enhance button accessibility */
button {
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

/* Improve link accessibility */
a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Add loading states for images */
img {
  transition: opacity var(--transition-fast);
}

img[loading="lazy"] {
  opacity: 0;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Enhance skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-color);
  color: var(--background-alt);
  padding: 8px;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 1001;
  font-weight: var(--font-weight-bold);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 6px;
}

/* Performance optimizations */
.wrapper {
  contain: layout style;
}

.sidebar-wrapper {
  contain: layout style;
}

.main-wrapper {
  contain: layout style;
}

/* Smooth scroll for in-page navigation */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Legacy print optimizations - now handled by print.css */
/*
@media print {
    body * {
        visibility: hidden;
    }

    .wrapper,
    .wrapper * {
        visibility: visible !important;
        max-width: 100% !important; /* Take full width */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .wrapper {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        padding: 0 !important; /* Reset padding */
        margin: 0 !important; /* Reset margin */
        box-shadow: none !important;
         -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .sidebar-wrapper {
        position: static !important;
        width: 100% !important;
        float: none !important;
        order: 1;  /* Ensure sidebar is above main content in print */
         -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .main-wrapper {
        margin-right: 0 !important;
        padding: 10px !important;
        order: 2; /* Ensure main content is below sidebar in print */
         -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .progress-bar {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

     /* Force single page print */
     html,
     body {
         height: auto !important; /* Overwrite body height */
         overflow: visible !important;
          -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
     }
     
    @page {
      size: auto;   /* auto is the initial value */
      margin: 0mm;  /* this affects the margin in the printer settings */
      -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
*/

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .theme-toggle {
    border-width: 1px;
  }
}

/* Container queries for modern layout */
@supports (container-type: inline-size) {
  .skillset {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .skillset .level-title {
      display: inline-block;
      width: 30%;
      float: left;
    }
    
    .skillset .progress {
      display: inline-block;
      width: 68%;
      float: right;
    }
  }
}