/* Additional optimizations for videos.css */

/* Accessibility Improvements */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--wheat);
  color: var(--charcoal);
  padding: 8px;
  z-index: 100;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}

/* Focus styles for better keyboard navigation */
a:focus,
button:focus {
  outline: 2px dashed var(--wheat);
  outline-offset: 2px;
}

/* Higher contrast for text on dark backgrounds */
.hero h1,
.hero p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

footer a {
  color: rgba(255,255,255,0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Improved mobile drawer accessibility */
.mobile-drawer[hidden] {
  display: none;
}

/* Responsive image handling */
.video-placeholder img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Modal accessibility */
.video-modal[hidden] {
  display: none;
}

.modal-video:focus {
  outline: 2px solid var(--wheat);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .video-placeholder:hover .play-button {
    transform: translate(-50%, -50%) !important;
  }
  
  .modal-close:hover {
    transform: none !important;
  }
}

.reduce-motion * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Content markers for AI/GEO optimization */
.content-markers {
  display: none;
}

/* Print styles */
@media print {
  .header,
  .menu-toggle,
  .mobile-drawer,
  .play-button,
  .video-modal,
  .social-links {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .hero {
    background: white !important;
    color: black !important;
    padding: 1cm 0 !important;
  }
  
  .video-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  a {
    text-decoration: none;
    color: black;
  }
  
  .container {
    max-width: 100%;
  }
  
  footer {
    background: white !important;
    color: black !important;
  }
}

/* Loading indicator improvement */
.loading-message[hidden] {
  display: none;
}

.loading-message {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Further performance optimizations */
@media (min-width: 768px) {
  .video-container {
    grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 0 2rem;
  }
}

/* Fix for Safari video playback */
.modal-video {
  background-color: black;
}

/* Better placeholder for when images fail to load */
.video-placeholder {
  background-color: #e5e5e5;
}

/* Additional utility classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center {
  text-align: center;
}

.no-scroll {
  overflow: hidden;
}

/* WebP background image fallbacks */
@supports (background-image: -webkit-image-set(url("img.webp") 1x, url("img.webp") 2x)) {
  .hero {
    background-image: -webkit-image-set(
      url("../images/header-bg.webp") 1x,
      url("../images/header-bg@2x.webp") 2x
    );
  }
}

/* Responsive font sizing */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  html {
    font-size: 15px;
  }
}