/**
 * Design system: breakpoint strategy + accessibility
 * Load before styles.css. Additive only.
 *
 * BREAKPOINT STRATEGY (mobile-first)
 * - Base: 320px+ (single column, touch-friendly)
 * - sm:  640px+  (slightly wider content, same layout)
 * - md:  768px+  (two-column where applicable, larger hero)
 * - lg:  1024px+ (max content width, full layout)
 *
 * Use these for layout and component behavior, not one-off fixes.
 */

/* All :root tokens and dinner-mode overrides live in css/styles.css.
   design-system.css is accessibility rules + responsive helpers only. */

/* ========== ACCESSIBILITY: Focus ========== */
/* Global fallback so any focusable element gets a visible ring when used with keyboard */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Search input: keep border/box-shadow from parent but add visible focus for keyboard */
.search-bar input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Skip link stays high-contrast (white on green) */
.skip-link:focus,
.skip-link:focus-visible {
  outline: 2px solid var(--focus-ring-color-inverse);
  outline-offset: var(--focus-ring-offset);
}

/* ========== ACCESSIBILITY: Reduced motion ========== */
/* Shorten animations; keep very short transitions for focus/feedback */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Keep focus/transition feedback under 100ms */
  button, a, input, .item-card, .sub-pill, .modal-close {
    transition-duration: 0.05s !important;
  }
}

/* ========== RESPONSIVE: Breakpoint-based spacing (optional overrides) ========== */
/* Main content padding: already set in styles.css; these vars document intent */
@media (min-width: 640px) {
  /* sm: slightly more breathing room */
  main {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 768px) {
  /* md: align with existing 769px behavior in styles.css */
  main {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1024px) {
  /* lg: max content width for readability */
  main {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ========== ENHANCEMENTS: Interactive feedback & Focus overrides ========== */
/* Moving these from styles.css to keep design system consolidated */

.item-card:focus-visible,
.cocktail-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.wine-detail-card:focus-visible {
  outline-offset: 3px;
}
.sub-pill:focus-visible,
.standards-subnav-pill:focus-visible,
.allergy-chip:focus-visible,
.modal-close:focus-visible,
.allergy-modal-close:focus-visible,
.offline-preload-btn:focus-visible,
.quiz-game-opt:focus-visible,
.quiz-done-btn:focus-visible,
.quiz-play-again:focus-visible,
.item-card-voice-btn:focus-visible,
.read-aloud-btn:focus-visible,
.pwa-install-dismiss:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body.dinner-mode .sub-pill:focus-visible,
body.dinner-mode .standards-subnav-pill:focus-visible { outline-color: var(--accent); }

.food-category,
.wine-category,
.item-card,
.cocktail-card,
.wine-detail-card,
[id^="cat-"],
[id^="food-cat-"],
[id^="wine-cat-"],
#hero-section,
#main-content {
  scroll-margin-top: 100px;
}

.pwa-install-btn:active,
.allergy-apply-btn:active,
.filter-btn:active,
.sub-pill:active,
.standards-subnav-pill:active,
.allergy-chip:active,
.modal-close:active,
.allergy-modal-close:active,
.offline-preload-btn:active,
.quiz-game-opt:active,
.quiz-lvl:active,
.quiz-done-btn:active,
.quiz-play-again:active,
.pwa-install-dismiss:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .item-card:focus-visible,
  .cocktail-card:focus-visible { transition: none; }
  .sub-pill:active,
  .standards-subnav-pill:active,
  .allergy-chip:active,
  .pwa-install-btn:active,
  .allergy-apply-btn:active,
  .filter-btn:active { transform: none; }
}