/* ===================================
   ACT Metaphors - Responsive Styles
   Mobile-First Responsive Design
   =================================== */

/* ===================================
   Mobile Base Styles (< 768px)
   Already defined in main.css
   =================================== */

/* ===================================
   Small Mobile (< 480px)
   =================================== */

@media (max-width: 479px) {
  /* Typography adjustments */
  :root {
    --font-size-4xl: 1.875rem;  /* 30px */
    --font-size-3xl: 1.5rem;    /* 24px */
    --font-size-2xl: 1.25rem;   /* 20px */
  }
  
  /* Header */
  .header-container {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-wrap: wrap;
  }
  
  .app-title {
    font-size: var(--font-size-xl);
  }
  
  .app-subtitle {
    font-size: var(--font-size-xs);
  }
  
  /* Navigation */
  .nav-toggle {
    display: block;
  }
  
  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: white;
    flex-direction: column;
    padding: var(--spacing-2xl) var(--spacing-lg);
    box-shadow: var(--shadow-xl);
    transition: left var(--transition-base);
    z-index: var(--z-modal);
    overflow-y: auto;
  }
  
  .nav-menu.active {
    left: 0;
  }
  
  .nav-link {
    width: 100%;
    text-align: left;
    padding: var(--spacing-md);
  }
  
  /* Header actions */
  .header-actions {
    gap: var(--spacing-sm);
  }
  
  .crisis-button {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  /* Main content */
  .app-main {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  /* Hero section */
  .hero-section {
    padding: var(--spacing-xl) var(--spacing-md);
  }
  
  .hero-title {
    font-size: var(--font-size-2xl);
  }
  
  .hero-description {
    font-size: var(--font-size-base);
  }
  
  .quick-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .quick-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Core processes grid */
  .core-processes-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  /* Metaphors grid */
  .metaphors-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  /* Tools grid */
  .tools-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  /* Modal */
  .modal {
    padding: var(--spacing-sm);
  }
  
  .modal-content {
    max-height: 95vh;
  }
  
  .modal-header,
  .modal-body {
    padding: var(--spacing-md);
  }
  
  .modal-title {
    font-size: var(--font-size-xl);
  }
  
  /* Pagination */
  .pagination-controls {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .btn-pagination {
    width: 100%;
  }
  
  /* Filter controls */
  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-select {
    width: 100%;
  }
  
  /* Search */
  .search-container {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  /* Daily metaphor */
  .daily-metaphor-header {
    padding: var(--spacing-lg);
  }
  
  .daily-metaphor-title {
    font-size: var(--font-size-xl);
  }
  
  .daily-metaphor-body {
    padding: var(--spacing-lg);
  }
  
  .daily-metaphor-text {
    font-size: var(--font-size-base);
  }
  
  .daily-metaphor-actions {
    flex-direction: column;
  }
  
  .daily-metaphor-actions .btn {
    width: 100%;
  }
}

/* ===================================
   Mobile Landscape / Small Tablet (480px - 767px)
   =================================== */

@media (min-width: 480px) and (max-width: 767px) {
  /* Navigation */
  .nav-toggle {
    display: block;
  }
  
  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 70%;
    max-width: 350px;
    height: 100vh;
    background: white;
    flex-direction: column;
    padding: var(--spacing-2xl) var(--spacing-lg);
    box-shadow: var(--shadow-xl);
    transition: left var(--transition-base);
    z-index: var(--z-modal);
    overflow-y: auto;
  }
  
  .nav-menu.active {
    left: 0;
  }
  
  .nav-link {
    width: 100%;
    text-align: left;
  }
  
  /* Grids */
  .metaphors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .core-processes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================
   Tablet (768px - 1023px)
   =================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Header */
  .header-container {
    padding: var(--spacing-md) var(--spacing-xl);
  }
  
  /* Navigation - show hamburger on tablet */
  .nav-toggle {
    display: block;
  }
  
  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 60%;
    max-width: 400px;
    height: 100vh;
    background: white;
    flex-direction: column;
    padding: var(--spacing-2xl) var(--spacing-xl);
    box-shadow: var(--shadow-xl);
    transition: left var(--transition-base);
    z-index: var(--z-modal);
    overflow-y: auto;
  }
  
  .nav-menu.active {
    left: 0;
  }
  
  .nav-link {
    width: 100%;
    text-align: left;
  }
  
  /* Main content */
  .app-main {
    padding: var(--spacing-2xl) var(--spacing-xl);
  }
  
  /* Grids */
  .metaphors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .core-processes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Modal */
  .modal-content {
    max-width: 700px;
  }
}

/* ===================================
   Desktop (1024px - 1279px)
   =================================== */

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Grids */
  .metaphors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .core-processes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================
   Large Desktop (1280px+)
   =================================== */

@media (min-width: 1280px) {
  /* Container max-width already set in main.css */
  
  /* Grids */
  .metaphors-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .core-processes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Hero section */
  .hero-section {
    padding: var(--spacing-3xl) var(--spacing-2xl);
  }
  
  /* Modal */
  .modal-content {
    max-width: 900px;
  }
}

/* ===================================
   Mobile Menu Overlay
   =================================== */

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-modal) - 1);
  display: none;
}

.nav-overlay.active {
  display: block;
}

/* ===================================
   Landscape Orientation
   =================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .hero-section {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .app-main {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .modal-content {
    max-height: 95vh;
  }
  
  .page-header {
    margin-bottom: var(--spacing-lg);
  }
}

/* ===================================
   Touch Device Optimizations
   =================================== */

@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn,
  .nav-link,
  .process-card,
  .tool-card,
  .metaphor-card {
    min-height: 44px;
  }
  
  /* Remove hover effects on touch devices */
  .metaphor-card:hover,
  .process-card:hover,
  .tool-card:hover {
    transform: none;
  }
  
  /* Increase tap area for buttons */
  .favorite-btn,
  .favorite-toggle,
  .search-toggle,
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}

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

@media print {
  /* Hide non-essential elements */
  .app-header,
  .app-footer,
  .nav-menu,
  .search-container,
  .crisis-button,
  .favorite-btn,
  .favorite-toggle,
  .modal-close,
  .btn,
  .pagination-controls {
    display: none !important;
  }
  
  /* Optimize for print */
  body {
    background: white;
    color: black;
  }
  
  .app-main {
    max-width: 100%;
    padding: 0;
  }
  
  .page {
    display: block !important;
    page-break-after: always;
  }
  
  .metaphor-card,
  .content-section {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  /* Show URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* Optimize colors for print */
  .metaphor-card-header,
  .hero-section {
    background: #f0f0f0 !important;
    color: black !important;
  }
}

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

@media (prefers-contrast: high) {
  /* Increase contrast for better visibility */
  :root {
    --color-primary: #2D5F6F;
    --color-secondary: #5A8F4F;
    --color-neutral-700: #000000;
    --color-neutral-800: #000000;
  }
  
  .metaphor-card,
  .process-card,
  .tool-card {
    border: 2px solid var(--color-neutral-700);
  }
  
  .btn {
    border: 2px solid currentColor;
  }
  
  a {
    text-decoration: underline;
  }
}

/* ===================================
   Dark Mode Support (Future Enhancement)
   =================================== */

@media (prefers-color-scheme: dark) {
  /* Note: Full dark mode implementation would go here */
  /* Currently maintaining light theme for therapeutic consistency */
  /* Dark mode can be added in future iterations if clinically appropriate */
}

/* ===================================
   Reduced Data Mode
   =================================== */

@media (prefers-reduced-data: reduce) {
  /* Disable background images and heavy graphics */
  .hero-section {
    background: var(--color-primary);
  }
  
  .metaphor-card-header {
    background: var(--color-primary);
  }
  
  /* Simplify animations */
  .metaphor-animation-container {
    background: var(--color-neutral-100);
  }
}

/* ===================================
   Screen Reader Optimizations
   =================================== */

@media speech {
  /* Optimize for screen readers */
  .sr-only {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
  
  /* Provide context for icons */
  .btn svg::after,
  .nav-link svg::after {
    content: attr(aria-label);
  }
}

/* ===================================
   Specific Device Breakpoints
   =================================== */

/* iPhone SE, 5, 5S */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) {
  .hero-title {
    font-size: var(--font-size-2xl);
  }
  
  .metaphors-grid {
    grid-template-columns: 1fr;
  }
}

/* iPhone 6, 7, 8, X, 11, 12, 13 */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 428px) {
  .metaphors-grid {
    grid-template-columns: 1fr;
  }
}

/* iPad, iPad Mini */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
  .metaphors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* iPad Pro */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) {
  .metaphors-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===================================
   Utility Classes for Responsive
   =================================== */

/* Hide on mobile */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* Hide on desktop */
.hide-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none;
  }
}

/* Show only on mobile */
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
}

/* Show only on desktop */
.show-desktop {
  display: none;
}

@media (min-width: 768px) {
  .show-desktop {
    display: block;
  }
}

/* ===================================
   Flexible Images and Media
   =================================== */

img,
video,
canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===================================
   Responsive Typography
   =================================== */

@media (min-width: 768px) {
  html {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1440px) {
  html {
    font-size: 19px;
  }
}

/* ===================================
   Safe Area Insets (for notched devices)
   =================================== */

@supports (padding: max(0px)) {
  .app-header,
  .app-main,
  .app-footer {
    padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
    padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
  }
  
  .app-header {
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
  }
  
  .app-footer {
    padding-bottom: max(var(--spacing-xl), env(safe-area-inset-bottom));
  }
}