/**
 * ShadowReader - Responsive Design Styles
 * Media queries for mobile, tablet, and desktop layouts
 */

/* ===== Breakpoint Definitions ===== */
/* Mobile: < 768px */
/* Tablet: 768px - 1024px */
/* Desktop: > 1024px */

/* ===== Base Responsive Utilities ===== */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

/* ===== Tablet Layout (768px - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 768px) {
  /* General layout adjustments */
  :root {
    --header-height: 70px;
    --sidebar-width: 300px;
  }
  
  /* Reduce spacing slightly */
  body {
    font-size: 15px;
  }
  
  /* Adjust main content padding */
  main {
    padding: var(--spacing-md);
  }
}

/* ===== Mobile Layout (< 768px) ===== */
@media (max-width: 768px) {
  /* Update CSS variables for mobile */
  :root {
    --header-height: 60px;
    --sidebar-width: 100%;
    --spacing-xl: calc(var(--spacing-unit) * 3);
    --spacing-xxl: calc(var(--spacing-unit) * 4);
  }
  
  /* Show/hide utilities */
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
  
  /* Body adjustments */
  body {
    font-size: 16px; /* Minimum 16px to prevent zoom on iOS */
  }
  
  /* Main content area */
  main {
    padding: var(--spacing-sm);
    min-height: calc(100vh - 60px);
  }
  
  /* Ensure smooth transitions on orientation change */
  * {
    transition-duration: var(--duration-slow);
  }
}

/* ===== Small Mobile (< 480px) ===== */
@media (max-width: 480px) {
  :root {
    --header-height: 56px;
    --spacing-lg: calc(var(--spacing-unit) * 2);
    --spacing-xl: calc(var(--spacing-unit) * 2.5);
  }
  
  body {
    font-size: 16px;
  }
  
  main {
    padding: var(--spacing-xs);
  }
}

/* ===== Touch Device Optimizations ===== */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  button,
  a,
  input,
  select,
  textarea {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Remove hover effects on touch devices */
  *:hover {
    transition-duration: 0s;
  }
  
  /* Disable cursor trail on touch devices */
  .cursor-trail-canvas {
    display: none !important;
  }
}

/* ===== Landscape Mobile Adjustments ===== */
@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --header-height: 50px;
  }
  
  /* Reduce vertical spacing in landscape */
  .reading-area {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .book-container {
    height: calc(100vh - 100px);
    max-height: 500px;
  }
}

/* ===== High DPI Displays ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper text rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ===== Reduced Motion Support ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Disable atmospheric effects animations */
  .atmospheric-effects * {
    animation: none !important;
  }
  
  /* Keep essential transitions for usability */
  .notes-sidebar,
  .settings-modal,
  .ghost-assistant {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }
}

/* ===== Print Styles ===== */
@media print {
  /* Hide UI elements */
  .header-bar,
  .notes-sidebar,
  .ghost-assistant,
  .ghost-assistant-minimized,
  .settings-modal,
  .atmospheric-effects,
  .nav-arrow {
    display: none !important;
  }
  
  /* Optimize for printing */
  .reading-area {
    padding: 0;
  }
  
  .book-container {
    box-shadow: none;
    max-width: 100%;
    height: auto;
  }
  
  .book-page {
    page-break-inside: avoid;
    box-shadow: none;
  }
  
  .page-content {
    overflow: visible;
  }
}

/* ===== Accessibility - High Contrast Mode ===== */
@media (prefers-contrast: high) {
  :root {
    --color-text-primary: #FFFFFF;
    --color-background: #000000;
  }
  
  /* Increase border visibility */
  button,
  input,
  select,
  textarea {
    border-width: 2px;
  }
  
  /* Enhance focus indicators */
  *:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* ===== Dark Mode Support (if system preference) ===== */
@media (prefers-color-scheme: dark) {
  /* ShadowReader is already dark-themed, but ensure consistency */
  :root {
    color-scheme: dark;
  }
}

/* ===== Responsive Typography ===== */
@media (max-width: 768px) {
  /* Adjust font sizes for mobile readability */
  h1 {
    font-size: var(--font-size-xl);
  }
  
  h2 {
    font-size: var(--font-size-lg);
  }
  
  h3 {
    font-size: var(--font-size-md);
  }
  
  p,
  .page-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }
}

/* ===== Responsive Images and Media ===== */
@media (max-width: 768px) {
  img,
  svg {
    max-width: 100%;
    height: auto;
  }
}

/* ===== Smooth Resize Transitions ===== */
@media (min-width: 769px) {
  /* Apply smooth transitions only on larger screens */
  .header-bar,
  .notes-sidebar,
  .reading-area,
  .ghost-assistant {
    transition: all var(--duration-slow) var(--easing-smooth);
  }
}

/* ===== Viewport Height Adjustments for Mobile Browsers ===== */
@media (max-width: 768px) {
  /* Account for mobile browser chrome */
  .reading-area {
    min-height: calc(100vh - var(--header-height) - 20px);
    min-height: calc(100dvh - var(--header-height) - 20px); /* Dynamic viewport height */
  }
  
  .notes-sidebar {
    max-height: 60vh;
    max-height: 60dvh;
  }
}