/* 
   Kenneth Reitz Developer Website - Tailwind-based Design
   Elegant typography and thoughtful design using Tailwind CSS
   with a darker Heroku purple theme.
*/

/* =====================================================
   GLOBAL RESET & IMPROVEMENTS
   ===================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =====================================================
   CUSTOM FOCUS STYLES
   ===================================================== */

*:focus {
  outline: 2px solid #4e3979;
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================
   TYPOGRAPHY IMPROVEMENTS
   ===================================================== */

/* Better text rendering */
body {
  text-rendering: optimizeLegibility;
}

/* Custom selection colors */
::selection {
  background-color: #e3e0f4;
  color: #4e3979;
}

/* =====================================================
   ACCESSIBILITY IMPROVEMENTS
   ===================================================== */

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode improvements */
@media (prefers-contrast: high) {
  .border-gray-200 {
    border-color: #000 !important;
  }
  
  .text-gray-600 {
    color: #000 !important;
  }
}

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

@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  header,
  footer {
    display: none;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }
}