/**
 * Background Images
 * Theme-aware responsive background images with fixed attachment
 */

/* ========================================
   Base Background Setup
   ======================================== */

body {
  /* Fallback solid color (matches theme) */
  background-color: var(--color-bg-base);

  /* Background image - default (mobile) */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  /* Smooth theme transition */
  transition: background-image 0.3s ease;

  /* Ensure minimum height for fixed background */
  min-height: 100vh;
}

/* ========================================
   Theme-Specific Backgrounds
   ======================================== */

/* Background images are loaded dynamically from config.js via theme-manager.js */
/* Using CSS custom property --background-image set by JavaScript */

body {
  background-image: var(--background-image);
}

/* ========================================
   Content Readability Enhancement
   ======================================== */

/* Add semi-transparent overlay to cards for better readability */
.card {
  /* Enhanced opacity for card backgrounds */
  background-color: var(--color-bg-card);

  /* Optional: Add backdrop blur for modern browsers */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Increase opacity slightly for better contrast */
  box-shadow: var(--shadow-md),
              inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Dark theme card enhancement */
[data-theme="dark"] .card {
  background-color: rgba(31, 31, 31, 0.85);
}

/* Light theme card enhancement */
[data-theme="light"] .card {
  background-color: rgba(255, 255, 255, 0.85);
}

/* Header and footer backdrop */
.app-header,
.app-footer {
  background-color: var(--color-bg-secondary);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="dark"] .app-header,
[data-theme="dark"] .app-footer {
  background-color: rgba(26, 26, 26, 0.9);
}

[data-theme="light"] .app-header,
[data-theme="light"] .app-footer {
  background-color: rgba(245, 245, 245, 0.9);
}

/* ========================================
   Responsive Background Adjustments
   ======================================== */

/* Mobile Portrait (default) - Already set above */
/* 320px - 767px: background-size: cover */

/* Mobile Landscape */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    /* Ensure background covers in landscape */
    background-size: cover;
    background-position: center center;
  }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) {
  body {
    /* Better positioning for tablet screens */
    background-size: cover;
    background-position: center center;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  body {
    /* Optimal display for large screens */
    background-size: cover;
    background-position: center center;
  }

  /* Optional: Slightly reduce card opacity on desktop for more background visibility */
  .card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  [data-theme="dark"] .card {
    background-color: rgba(31, 31, 31, 0.8);
  }

  [data-theme="light"] .card {
    background-color: rgba(255, 255, 255, 0.8);
  }
}

/* Extra Large Desktop (1280px+) */
@media (min-width: 1280px) {
  body {
    /* Full quality display for XL screens */
    background-size: cover;
    background-position: center center;
  }
}

/* ========================================
   Performance Optimizations
   ======================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  body {
    background-attachment: scroll; /* Fixed can cause motion sickness */
    transition: none;
  }

  .card,
  .app-header,
  .app-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Print - Remove backgrounds */
@media print {
  body {
    background-image: none !important;
    background-color: white !important;
  }

  .card,
  .app-header,
  .app-footer {
    background-color: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}