/* ==========================================================================
   Responsive Styles - Unified Design System
   
   Mobile-first responsive styles with breakpoints at:
   - sm: 640px (small tablets, large phones landscape)
   - md: 768px (tablets)
   - lg: 1024px (desktops)
   
   Requirements:
   - 10.1: All interactive elements meet 44px minimum touch target
   - 10.2: Hover states for interactive elements (mouse users)
   - 10.3: Active states for immediate feedback (touch users)
   - 10.4: Minimum 8px spacing between interactive elements
   ========================================================================== */

/* ==========================================================================
   Breakpoint Reference (CSS custom properties can't be used in media queries)
   
   --breakpoint-sm: 640px
   --breakpoint-md: 768px
   --breakpoint-lg: 1024px
   --breakpoint-xl: 1280px
   ========================================================================== */

/* ==========================================================================
   Base Mobile Styles (Mobile-First)
   
   These styles apply to all screen sizes and establish touch-friendly defaults.
   ========================================================================== */

/* Ensure all interactive elements have proper touch targets - Requirement 10.1 */
/* Touch target minimum is handled by component styles in components.css */
/* This file provides responsive overrides and touch-specific enhancements */

/* Touch-specific: On touch devices, hover states from components.css still apply */
/* but active states provide the primary feedback (see below) */

/* Touch-specific: Enhanced active states for immediate feedback - Requirement 10.3 */
@media (hover: none) {
  .btn:active {
    transform: scale(0.98);
  }
  
  .card-interactive:active {
    transform: scale(0.99);
  }
  
  .nav-link:active {
    background-color: var(--color-surface-active);
  }
}

/* ==========================================================================
   Responsive Display Utilities
   
   Show/hide elements at different breakpoints
   ========================================================================== */

/* Hidden on mobile, visible on larger screens */
.hidden-mobile {
  display: none;
}

/* Visible on mobile, hidden on larger screens */
.visible-mobile {
  display: block;
}

.visible-mobile-flex {
  display: flex;
}

.visible-mobile-inline {
  display: inline;
}

/* ==========================================================================
   Responsive Spacing
   
   Adjust spacing for mobile screens
   ========================================================================== */

/* Container padding - tighter on mobile */
.container {
  width: 100%;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  margin-left: auto;
  margin-right: auto;
}

/* Section spacing - reduced on mobile */
.section {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

/* ==========================================================================
   Responsive Typography
   
   Slightly smaller text on mobile for better fit
   ========================================================================== */

/* Headings scale down on mobile */
.heading-1 {
  font-size: var(--font-size-2xl);
}

.heading-2 {
  font-size: var(--font-size-xl);
}

.heading-3 {
  font-size: var(--font-size-lg);
}

/* ==========================================================================
   Responsive Navigation
   
   Mobile menu with slide-in animation - Requirement 7.2
   ========================================================================== */

/* Mobile: Stack navigation vertically */
.navbar {
  flex-wrap: wrap;
}

/* Mobile menu is hidden by default (handled in components.css) */
/* Toggle button is visible on mobile (handled in components.css) */

/* ==========================================================================
   Responsive Cards - Requirement 6.3
   
   Card padding: 16px on mobile, 24px on desktop
   ========================================================================== */

/* Mobile card padding is default (16px) - set in components.css */

/* Card grid: single column on mobile */
.card-grid {
  grid-template-columns: 1fr;
}

/* ==========================================================================
   Responsive Forms
   
   Full-width inputs on mobile, stacked labels
   ========================================================================== */

/* Form actions stack on mobile */
.form-actions {
  flex-direction: column;
}

.form-actions .btn {
  width: 100%;
}

/* Inline forms stack on mobile */
.form-inline {
  flex-direction: column;
}

.form-inline .form-group {
  width: 100%;
  min-width: 0;
}

/* ==========================================================================
   Responsive Tables
   
   Horizontal scroll on mobile
   ========================================================================== */

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Touch Target Spacing - Requirement 10.4
   
   Ensure minimum 8px spacing between interactive elements
   ========================================================================== */

/* Button groups have proper spacing */
.btn-group {
  gap: 0; /* Buttons touch in groups, but group itself has margin */
}

.btn-group + .btn-group,
.btn + .btn {
  margin-left: var(--space-sm); /* 8px minimum spacing */
}

/* Navigation items have proper spacing */
.nav-list {
  gap: var(--space-xs); /* 4px gap, but items have padding */
}

/* Form elements have proper spacing */
.form-group + .form-group {
  margin-top: var(--space-md);
}

/* Interactive elements in a row */
.interactive-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm); /* 8px minimum spacing - Requirement 10.4 */
}



/* ==========================================================================
   Small Breakpoint (640px) - Small tablets, large phones landscape
   ========================================================================== */

@media (min-width: 640px) {
  /* Container max-width */
  .container {
    max-width: 640px;
  }
  
  /* Card grid: 2 columns */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Form actions can be inline */
  .form-actions:not(.form-actions-stack) {
    flex-direction: row;
  }
  
  .form-actions:not(.form-actions-stack) .btn {
    width: auto;
  }
  
  /* Responsive display utilities */
  .hidden-sm {
    display: none;
  }
  
  .visible-sm {
    display: block;
  }
  
  .visible-sm-flex {
    display: flex;
  }
  
  .visible-sm-inline {
    display: inline;
  }
}

/* ==========================================================================
   Medium Breakpoint (768px) - Tablets
   ========================================================================== */

@media (min-width: 768px) {
  /* Container max-width */
  .container {
    max-width: 768px;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
  
  /* Section spacing - more room on tablets */
  .section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  
  /* Typography scales up */
  .heading-1 {
    font-size: var(--font-size-3xl);
  }
  
  .heading-2 {
    font-size: var(--font-size-2xl);
  }
  
  .heading-3 {
    font-size: var(--font-size-xl);
  }
  
  /* ==========================================================================
     Navigation - Desktop Layout
     ========================================================================== */
  
  /* Navbar toggle hidden on desktop (handled in components.css) */
  
  /* Navbar menu visible inline on desktop (handled in components.css) */
  
  /* Nav list horizontal on desktop (handled in components.css) */
  
  /* ==========================================================================
     Cards - Desktop Padding (Requirement 6.3)
     ========================================================================== */
  
  /* Card padding increases to 24px (handled in components.css) */
  
  /* ==========================================================================
     Forms - Desktop Layout
     ========================================================================== */
  
  /* Inline forms can be horizontal */
  .form-inline {
    flex-direction: row;
    align-items: flex-end;
  }
  
  .form-inline .form-group {
    width: auto;
    min-width: 200px;
  }
  
  /* ==========================================================================
     Responsive Display Utilities
     ========================================================================== */
  
  .hidden-mobile {
    display: block;
  }
  
  .hidden-mobile-flex {
    display: flex;
  }
  
  .hidden-mobile-inline {
    display: inline;
  }
  
  .visible-mobile,
  .visible-mobile-flex,
  .visible-mobile-inline {
    display: none;
  }
  
  .hidden-md {
    display: none;
  }
  
  .visible-md {
    display: block;
  }
  
  .visible-md-flex {
    display: flex;
  }
  
  .visible-md-inline {
    display: inline;
  }
}

/* ==========================================================================
   Large Breakpoint (1024px) - Desktops
   ========================================================================== */

@media (min-width: 1024px) {
  /* Container max-width */
  .container {
    max-width: 1024px;
  }
  
  /* Card grid: 3 columns on desktop */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Typography at full size */
  .heading-1 {
    font-size: var(--font-size-4xl);
  }
  
  .heading-2 {
    font-size: var(--font-size-3xl);
  }
  
  .heading-3 {
    font-size: var(--font-size-2xl);
  }
  
  /* ==========================================================================
     Responsive Display Utilities
     ========================================================================== */
  
  .hidden-lg {
    display: none;
  }
  
  .visible-lg {
    display: block;
  }
  
  .visible-lg-flex {
    display: flex;
  }
  
  .visible-lg-inline {
    display: inline;
  }
}

/* ==========================================================================
   Extra Large Breakpoint (1280px) - Large desktops
   ========================================================================== */

@media (min-width: 1280px) {
  /* Container max-width */
  .container {
    max-width: 1280px;
  }
  
  /* Card grid: 4 columns on large screens */
  .card-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* ==========================================================================
     Responsive Display Utilities
     ========================================================================== */
  
  .hidden-xl {
    display: none;
  }
  
  .visible-xl {
    display: block;
  }
  
  .visible-xl-flex {
    display: flex;
  }
  
  .visible-xl-inline {
    display: inline;
  }
}

/* ==========================================================================
   Hover States - Requirement 10.2
   
   Only apply hover effects on devices that support hover (mouse users)
   ========================================================================== */

@media (hover: hover) {
  /* Button hover states are defined in components.css */
  
  /* Card interactive hover */
  .card-interactive:hover {
    border-color: var(--color-border-hover);
    background-color: var(--color-surface-hover);
  }
  
  .card-interactive.card-raised:hover {
    box-shadow: var(--shadow-md);
  }
  
  .card-interactive.card-elevated:hover {
    box-shadow: var(--shadow-lg);
  }
  
  /* Navigation hover */
  .nav-link:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
  }
  
  /* Form input hover */
  .form-input:hover:not(:focus):not(:disabled),
  .form-select:hover:not(:focus):not(:disabled),
  .form-textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--color-border-hover);
    background-color: var(--color-surface-hover);
  }
  
  /* Link hover */
  a:hover {
    color: var(--color-accent-hover);
  }
  
  /* Icon interactive hover */
  .icon-interactive:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
  }
}

/* ==========================================================================
   Active States - Requirement 10.3
   
   Provide immediate feedback for touch and click interactions
   ========================================================================== */

/* Button active states are defined in components.css */

/* Card interactive active */
.card-interactive:active {
  background-color: var(--color-surface-active);
}

/* Navigation active */
.nav-link:active {
  background-color: var(--color-surface-active);
}

/* Form input active/focus styles are handled in components.css */

/* Icon interactive active */
.icon-interactive:active {
  background-color: var(--color-surface-active);
}

/* ==========================================================================
   Touch-Specific Enhancements
   
   Optimizations for touch devices
   ========================================================================== */

/* Prevent text selection on interactive elements during touch */
@media (hover: none) {
  .btn,
  .nav-link,
  .card-interactive,
  .form-check,
  .form-toggle {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Slightly larger touch targets on pure touch devices */
  .btn-sm {
    min-height: 2.5rem; /* 40px instead of 32px */
  }
  
  /* Ensure adequate spacing for touch */
  .nav-list {
    gap: var(--space-sm);
  }
}

/* ==========================================================================
   Pointer Coarse (Touch) vs Fine (Mouse) Adjustments
   ========================================================================== */

@media (pointer: coarse) {
  /* Touch devices: ensure minimum touch targets */
  .btn,
  .nav-link,
  .form-input,
  .form-select,
  .form-check,
  .icon-interactive {
    min-height: var(--touch-target); /* 44px */
  }
  
  /* Increase spacing between interactive elements */
  .btn + .btn,
  .nav-item + .nav-item {
    margin-left: var(--space-sm);
  }
}

@media (pointer: fine) {
  /* Mouse devices: can have slightly smaller targets */
  /* But we keep 44px for accessibility compliance */
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  /* Hide navigation and interactive elements */
  .navbar,
  .navbar-toggle,
  .btn,
  .form-actions {
    display: none;
  }
  
  /* Remove backgrounds and shadows */
  .card {
    box-shadow: none;
    border: 1px solid #ccc;
    background-color: white;
  }
  
  /* Ensure text is black for printing */
  body,
  .card,
  .alert {
    color: black;
    background-color: white;
  }
  
  /* Show URLs for links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* Don't show URLs for internal links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

/* ==========================================================================
   Reduced Motion Preference
   
   Respect user's motion preferences for accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Keep essential state changes instant */
  .navbar-menu {
    transition: none;
  }
  
  .btn:active,
  .card-interactive:active {
    transform: none;
  }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
  /* Increase border visibility */
  .card,
  .form-input,
  .form-select,
  .form-textarea,
  .btn-outline {
    border-width: 2px;
  }
  
  /* Ensure focus rings are very visible */
  :focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
  }
}

/* ==========================================================================
   Dark Mode Adjustments (if system preference)
   
   The design system is already dark-themed, but this ensures
   consistency if the user has dark mode preference
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  /* Already using dark theme - no changes needed */
  /* This block exists for future light theme support */
}