/* quintaedizione.online — Accessibility & Responsive Styles */

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

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: var(--space-3) var(--space-4);
  background: var(--color-text);
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.skip-to-content:focus {
  position: fixed;
  left: var(--space-4);
  top: var(--space-4);
  width: auto;
  height: auto;
  overflow: visible;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ========================================================================
   MOBILE RESPONSIVE
   ======================================================================== */

@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .field, .form-input, .form-select { min-height: 44px; font-size: 16px; }
  .collection-grid { grid-template-columns: 1fr; }
  .breadcrumb { flex-wrap: wrap; gap: var(--space-1); font-size: var(--text-xs); }
  .site-nav { position: relative; }
  .site-nav-container { padding: var(--space-2) var(--space-3); }
  .container { padding: 0 var(--space-3); }
  .search-dropdown { max-height: 60vh; }
  .radio-group { flex-direction: column; }
  .monster-content { grid-template-columns: 1fr; }
  .monster-filters { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .monster-filter-group { flex: 1 1 45%; min-width: 120px; }
  .monster-ability-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .patreon-banner { font-size: var(--text-xs); padding: var(--space-2) var(--space-10) var(--space-2) var(--space-3); }
}

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

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