/* ============================================================================
   RESPONSIVE UTILITIES & SCREEN ADJUSTMENT
   ============================================================================ */

/* Root variables for consistent responsive design */
:root {
  /* Responsive breakpoints */
  --mobile-small: 320px;
  --mobile: 480px;
  --tablet: 768px;
  --desktop-small: 1024px;
  --desktop: 1200px;
  --desktop-large: 1440px;
  
  /* Responsive spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Responsive font sizes */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.875rem;
  
  /* Dynamic viewport units for better mobile support */
  --vh: 1vh;
  --vw: 1vw;
}

/* Enhanced viewport handling for mobile browsers */
html {
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
  /* Enable smooth scrolling */
  scroll-behavior: smooth;
  /* Improve text rendering */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Prevent zoom on orientation change */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  
  /* Enhanced mobile touch interactions */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
  
  /* Consistent line height across devices */
  line-height: 1.6;
}

/* ============================================================================
   RESPONSIVE CONTAINER SYSTEM
   ============================================================================ */

.container {
  width: 100%;
  max-width: var(--desktop);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  box-sizing: border-box;
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-md);
  box-sizing: border-box;
}

/* Responsive grid system */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--spacing-md) / 2);
}

.col {
  flex: 1;
  padding: 0 calc(var(--spacing-md) / 2);
  box-sizing: border-box;
}

/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

/* Visibility utilities */
.show-mobile { display: none !important; }
.hide-mobile { display: block !important; }
.show-tablet { display: none !important; }
.hide-tablet { display: block !important; }
.show-desktop { display: block !important; }
.hide-desktop { display: none !important; }

/* Responsive text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Responsive spacing utilities */
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }

/* ============================================================================
   ENHANCED MOBILE BREAKPOINTS
   ============================================================================ */

/* Extra small devices (320px and up) */
@media screen and (min-width: 320px) {
  :root {
    --font-base: 0.9rem;
  }
  
  .container {
    padding: 0 var(--spacing-sm);
  }
}

/* Small devices (480px and up) */
@media screen and (min-width: 480px) {
  :root {
    --font-base: 1rem;
  }
  
  .show-mobile { display: block !important; }
  .hide-mobile { display: none !important; }
  
  .container {
    padding: 0 var(--spacing-md);
  }
  
  /* Better button sizing on mobile */
  .btn {
    min-height: 44px; /* Apple's recommended touch target size */
    min-width: 44px;
    touch-action: manipulation;
  }
}

/* Medium devices (768px and up) */
@media screen and (min-width: 768px) {
  .show-tablet { display: block !important; }
  .hide-tablet { display: none !important; }
  .show-mobile { display: none !important; }
  .hide-mobile { display: block !important; }
  
  .container {
    padding: 0 var(--spacing-lg);
  }
  
  /* Enhanced grid for tablets */
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
}

/* Large devices (1024px and up) */
@media screen and (min-width: 1024px) {
  .show-desktop { display: block !important; }
  .hide-desktop { display: none !important; }
  .show-tablet { display: none !important; }
  .hide-tablet { display: block !important; }
  
  .container {
    padding: 0 var(--spacing-xl);
  }
  
  /* Enhanced grid for desktop */
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
}

/* Extra large devices (1200px and up) */
@media screen and (min-width: 1200px) {
  .container {
    max-width: var(--desktop);
  }
}

/* ============================================================================
   TOUCH-FRIENDLY ENHANCEMENTS
   ============================================================================ */

/* Enhanced touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
  /* This targets touch devices */
  
  button,
  .btn,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  /* Larger click areas for navigation */
  .nav-menu a {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-lg);
  }
  
  /* Enhanced form inputs */
  input,
  textarea,
  select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* ============================================================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ============================================================================ */

@media screen and (orientation: landscape) and (max-height: 500px) {
  /* Optimize for landscape mobile devices */
  
  .navbar {
    height: auto;
    min-height: 60px;
  }
  
  .nav-container {
    height: 60px;
  }
  
  .nav-logo {
    height: 50px !important;
    max-width: 200px !important;
  }
  
  .hamburger {
    width: 40px;
    height: 40px;
  }
  
  /* Adjust main content for landscape */
  main {
    padding-top: var(--spacing-sm);
  }
  
  /* Compact spacing in landscape */
  .page-wrapper {
    padding: 0 var(--spacing-sm);
  }
}

/* ============================================================================
   HIGH DPI / RETINA DISPLAY OPTIMIZATIONS
   ============================================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Enhance graphics for high DPI displays */
  
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Sharper borders and shadows */
  .card,
  .btn,
  .nav-menu {
    border-width: 0.5px;
  }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  /* Enhanced dark mode styles */
  :root {
    --text-color: #f8f9fa;
    --bg-color: #1a1a1a;
    --border-color: rgba(255, 255, 255, 0.1);
  }
}

/* ============================================================================
   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;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  body {
    background: white !important;
    color: black !important;
  }
  
  .navbar,
  .hamburger,
  .nav-menu,
  .page-footer {
    display: none !important;
  }
  
  main {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .page-wrapper {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* ============================================================================
   ENHANCED RESPONSIVE DESIGN IMPROVEMENTS
   ============================================================================ */

/* Dynamic viewport units for consistent mobile behavior */
:root {
  /* Better mobile viewport handling */
  --mobile-vw: 1vw;
  --mobile-vh: 1vh;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* Enhanced mobile browser support */
@supports (-webkit-touch-callout: none) {
  /* iOS specific fixes */
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
  }
  
  body {
    /* Fix for iOS Safari bounce */
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
}

/* Advanced container queries for future-proofing */
@supports (container-type: inline-size) {
  .responsive-container {
    container-type: inline-size;
  }
  
  @container (max-width: 600px) {
    .container-responsive {
      padding: var(--spacing-sm);
    }
  }
  
  @container (min-width: 601px) {
    .container-responsive {
      padding: var(--spacing-lg);
    }
  }
}

/* Enhanced focus management for mobile */
@media (hover: none) and (pointer: coarse) {
  /* Prevent zoom on input focus for iOS */
  input,
  textarea,
  select {
    font-size: 16px !important;
    transform: translateZ(0);
  }
  
  /* Better touch targets */
  button,
  .btn,
  [role="button"] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-user-select: none;
    user-select: none;
  }
}

/* Safe area support for modern mobile devices */
.safe-area-padding {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* Enhanced focus indicators */
*:focus {
  outline: 2px solid #69a0e0;
  outline-offset: 2px;
}

/* Screen reader only content */
.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;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  button,
  .btn {
    border: 2px solid currentColor;
  }
}