/* ============================================
   ENHANCED ACCESSIBILITY & MOBILE STYLES
   Autoresearch Loop #6 - Advanced Optimizations
   ============================================ */

/* ============================================
   A. ENHANCED FOCUS MANAGEMENT
   ============================================ */

/* Stronger focus indicators for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid var(--color-brand-light);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(132, 148, 123, 0.15);
  border-radius: 2px;
}

/* Skip link enhancements */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-modal) + 10);
  background-color: var(--color-brand-darkest);
  color: #ffffff;
  padding: var(--space-4) var(--space-6);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transition: top 0.2s ease;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* Skip link target styling */
#main-content:focus {
  outline: none;
}

#main-content:target {
  scroll-margin-top: 100px;
}

/* ============================================
   B. TOUCH TARGET OPTIMIZATIONS (44x44px minimum)
   ============================================ */

/* Ensure all buttons meet minimum touch target */
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.menu-btn,
.search-btn,
.pagination-btn,
.card-link,
.social-link,
.category-card .card-link {
  min-width: 44px;
  min-height: 44px;
}

/* Larger touch targets for navigation items */
.header-nav-list a,
.mobile-nav-list a,
.footer-links a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
}

/* Mobile menu items */
.mobile-nav-list a {
  min-height: 48px;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
}

@media (min-width: 1024px) {
  .header-social-links .social-link {
    min-width: 0;
    min-height: 0;
  }

  .header-nav-list a {
    min-height: 0;
    padding: var(--space-2) 0;
  }
}

/* Category pills and dropdown items */
.archive-category-pill,
.archive-category-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
}

/* Form controls */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base); /* Prevents iOS zoom on focus */
}

/* Checkbox and radio touch targets */
input[type="checkbox"],
input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
  margin-right: var(--space-3);
}

/* Ingredient checkboxes (recipe cards) */
.ingredient-checkbox {
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
}

/* ============================================
   C. MOBILE-SPECIFIC OPTIMIZATIONS
   ============================================ */

/* Mobile viewport handling */
@supports (height: 100dvh) {
  .mobile-nav {
    max-height: 100dvh;
    height: 100dvh;
  }
}

/* Prevent text zoom on mobile Safari */
@media screen and (max-width: 1023px) {
  body {
    font-size: var(--text-base);
  }

  /* Ensure inputs don't cause zoom */
  input,
  select,
  textarea {
    font-size: var(--text-base);
  }

  /* Touch-optimized spacing */
  .card-content {
    padding: var(--space-5);
  }

  .recipe-meta-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Search form mobile optimization */
  .header-search-form input[type="search"] {
    min-height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .header-search-form button {
    min-height: 48px;
    min-width: 48px;
  }

  /* Mobile category select */
  .archive-category-select {
    min-height: 48px;
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-5);
  }
}

/* ============================================
   D. SCREEN READER ENHANCEMENTS
   ============================================ */

/* Enhanced sr-only utility */
.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;
}

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

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Announcement region for live regions */
[aria-live] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* ============================================
   E. KEYBOARD NAVIGATION IMPROVEMENTS
   ============================================ */

/* Ensure all interactive elements are keyboard accessible */
[role="button"],
[tabindex="0"] {
  cursor: pointer;
}

/* Focus trap for mobile menu */
.mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
}

.mobile-nav:not(.is-open) {
  visibility: hidden;
  opacity: 0;
}

/* Dropdown keyboard handling */
.archive-category-item:focus-within .archive-category-dropdown,
.archive-category-item:hover .archive-category-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Ensure focus is visible on card links */
.card-link:focus-visible::after {
  outline: 3px solid var(--color-brand-light);
  outline-offset: -4px;
  border-radius: var(--radius-sm);
}

/* ============================================
   F. COLOR CONTRAST VALIDATION
   ============================================ */

/* Ensure text meets WCAG AA contrast ratios */
/* Brand light on dark backgrounds */
.badge-category {
  background-color: var(--color-brand-darkest);
  color: #ffffff;
}

/* Footer links - enhanced contrast */
.site-footer a {
  color: rgba(255, 255, 255, 0.95);
}

.site-footer a:hover,
.site-footer a:focus {
  color: #ffffff;
}

/* Meta text - ensure contrast */
.card-meta,
.recipe-meta-label,
.hero-meta {
  color: var(--color-text-meta);
}

/* Error and warning states */
.error-code {
  color: var(--color-brand-darkest);
}

/* Form validation */
input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

input:valid:not(:placeholder-shown) {
  border-color: var(--color-brand-light);
}

/* ============================================
   G. REDUCED MOTION & ACCESSIBILITY
   ============================================ */

@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;
  }

  /* Disable parallax */
  .parallax {
    transform: none !important;
  }

  /* Disable smooth scroll */
  html {
    scroll-behavior: auto;
  }

  /* Keep essential transitions for focus states */
  :focus-visible {
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  :focus-visible {
    outline: 4px solid currentColor;
    outline-offset: 2px;
  }

  .card,
  .btn,
  .recipe-card {
    border: 2px solid currentColor;
  }
}

/* Dark mode support (for future) */
@media (prefers-color-scheme: dark) {
  /* Ready for dark mode implementation */
  /* Currently respects system preference without breaking existing styles */
}

/* ============================================
   H. ARIA AND SEMANTIC ENHANCEMENTS
   ============================================ */

/* Hide decorative elements from AT */
[aria-hidden="true"] {
  pointer-events: none;
}

/* Ensure landmarks are properly announced */
[role="banner"],
[role="navigation"],
[role="main"],
[role="contentinfo"],
[role="complementary"] {
  /* Visual styles preserved, semantic roles enhanced in HTML */
}

/* Button states for ARIA */
[aria-pressed="true"] {
  background-color: var(--color-brand-primary);
  color: #ffffff;
}

[aria-expanded="true"] {
  /* Handled by .is-open class */
}

/* Disabled state */
[aria-disabled="true"],
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Current page indication */
[aria-current="page"] {
  font-weight: var(--font-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ============================================
   I. MOBILE MENU ACCESSIBILITY
   ============================================ */

/* Menu button states */
.menu-btn[aria-expanded="true"] {
  background-color: var(--color-brand-light);
  color: #ffffff;
}

/* Mobile nav backdrop */
.mobile-nav::before {
  content: none;
}

.mobile-nav.is-open::before {
  content: none;
}

/* Focus trap indicator */
.mobile-nav.is-open .mobile-nav-header {
  border-bottom: 2px solid var(--color-brand-light);
}

/* ============================================
   J. FORM ACCESSIBILITY
   ============================================ */

/* Proper label association */
label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-medium);
  color: var(--color-text-heading);
}

/* Required field indicator */
[required] + label::after,
label:has(+ [required])::after {
  content: ' *';
  color: #dc2626;
}

/* Search input clear button */
input[type="search"]::-webkit-search-cancel-button {
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
}

/* Placeholder contrast */
::placeholder {
  color: var(--color-text-meta);
  opacity: 0.7;
}

/* ============================================
   K. IMAGE ACCESSIBILITY
   ============================================ */

/* Alt text fallback styling */
img:not([alt]) {
  outline: 3px dashed #dc2626;
  outline-offset: -3px;
}

/* Decorative image handling */
img[alt=""],
img[role="presentation"] {
  outline: none;
}

/* Figure and figcaption */
figure {
  margin: 0;
}

figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-meta);
  text-align: center;
  margin-top: var(--space-2);
}

/* ============================================
   L. TABLE ACCESSIBILITY (if used)
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

th {
  font-weight: var(--font-bold);
  background-color: var(--color-bg-card);
}

/* Responsive tables */
@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ============================================
   M. LANDMARK AND STRUCTURE
   ============================================ */

/* Ensure content is accessible if CSS fails */
.no-css body::before {
  content: 'Styles not loaded. Content should still be accessible.';
  display: block;
  padding: 1em;
  background: #ffffcc;
  border: 2px solid #000;
}

/* Document structure visibility */
[role="main"]:empty::before {
  content: 'Main content area is empty';
  display: block;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-meta);
  font-style: italic;
}

/* ============================================
   N. LOADING AND ERROR STATES
   ============================================ */

/* Skeleton loading state */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-card) 25%,
    var(--color-border-light) 50%,
    var(--color-bg-card) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--color-bg-card);
  }
}

/* Error state */
.error-state {
  border: 2px solid #dc2626;
  background-color: rgba(220, 38, 38, 0.05);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}

/* Success state */
.success-state {
  border: 2px solid var(--color-brand-light);
  background-color: rgba(132, 148, 123, 0.05);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}

/* ============================================
   O. ENHANCED EMPTY STATES
   ============================================ */

.ftf-empty-state {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.ftf-empty-state__icon {
  margin-bottom: var(--space-6);
  color: var(--color-brand-light);
}

.ftf-empty-state__icon svg {
  width: 120px;
  height: 120px;
}

.ftf-empty-state__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-4);
}

.ftf-empty-state__message {
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.ftf-empty-state__search {
  max-width: 500px;
  margin: 0 auto var(--space-8);
}

.ftf-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-10);
}

.ftf-empty-state__suggestions {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-light);
}

.ftf-empty-state__suggestions-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  margin-bottom: var(--space-5);
}

.ftf-empty-state__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.ftf-empty-state__category-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-heading);
  text-decoration: none;
  transition: all var(--transition-fast);
  min-height: 44px;
}

.ftf-empty-state__category-link:hover {
  border-color: var(--color-brand-light);
  background-color: #ffffff;
  color: var(--color-brand-primary);
}

.ftf-empty-state__count {
  color: var(--color-brand-light);
  font-size: var(--text-xs);
}

/* Mobile empty state adjustments */
@media screen and (max-width: 600px) {
  .ftf-empty-state {
    padding: var(--space-8) var(--space-4);
  }

  .ftf-empty-state__icon svg {
    width: 80px;
    height: 80px;
  }

  .ftf-empty-state__title {
    font-size: var(--text-xl);
  }

  .ftf-empty-state__actions {
    flex-direction: column;
  }

  .ftf-empty-state__actions .btn {
    width: 100%;
    justify-content: center;
  }
}