/* 
 * Comprehensive Responsive CSS
 * Targets all device sizes with appropriate breakpoints
 */

/* Base styles (applied to all devices) */
:root {
  --touch-target-size: 44px;
}

/* Mobile-first approach */
body {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Ensure all touch targets meet accessibility standards */
button, 
.btn, 
a.nav-link, 
.mobile-menu-toggle,
input[type="submit"],
input[type="button"] {
  min-height: var(--touch-target-size);
  min-width: var(--touch-target-size);
}

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
}

/* Mobile/Small Screen (below 480px) */
@media only screen and (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.3rem; }
  
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  /* Mobile navigation improvements */
  .mobile-nav {
    width: 100%;
  }
  
  /* Stack elements vertically on mobile */
  .row {
    flex-direction: column;
  }
  
  /* Full-width elements on mobile */
  .col, .col-12, .col-sm-12 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Adjust spacing for mobile */
  section {
    padding: 30px 0;
  }
  
  /* Ensure proper font size for readability */
  p, li, td, th {
    font-size: 16px;
  }
  
  /* Improve mobile form elements */
  input, select, textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
    width: 100%;
  }
  
  /* Adjust header for mobile */
  .header {
    padding: 10px 0;
  }
  
  /* Improved mobile menu toggle */
  .mobile-menu-toggle {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1000;
  }
  
  /* Hide desktop navigation on mobile */
  .desktop-nav {
    display: none;
  }
  
  /* Language switcher position for mobile */
  .language-switcher {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1000;
  }
}

/* Small Tablet (481px to 767px) */
@media only screen and (min-width: 481px) and (max-width: 767px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.7rem; }
  h3 { font-size: 1.4rem; }
  
  .container {
    padding-left: 25px;
    padding-right: 25px;
  }
  
  /* Improved navigation for small tablets */
  .mobile-nav {
    width: 320px;
  }
  
  /* Adjust row layout for small tablets */
  .row {
    flex-wrap: wrap;
  }
  
  /* Column adjustments for small tablets */
  .col-sm-6 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  /* Adjust section spacing */
  section {
    padding: 40px 0;
  }
  
  /* Language switcher position for small tablet */
  .language-switcher {
    position: absolute;
    top: 15px;
    right: 60px;
  }
}

/* Large Tablet (768px to 1023px) */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.5rem; }
  
  .container {
    padding-left: 40px;
    padding-right: 40px;
  }
  
  /* Column adjustments for large tablets */
  .col-md-4 {
    width: 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  
  .col-md-6 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  /* Show desktop navigation */
  .desktop-nav {
    display: flex;
  }
  
  /* Hide mobile menu toggle on larger tablets */
  .mobile-menu-toggle {
    display: none;
  }
  
  /* Ensure link spacing in navigation */
  .nav-link {
    padding: 10px 15px;
  }
}

/* Desktop (1024px to 1199px) */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
  .container {
    max-width: 960px;
    margin: 0 auto;
  }
  
  /* Column adjustments for desktop */
  .col-lg-3 {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  
  .col-lg-4 {
    width: 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  
  .col-lg-6 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  /* Desktop navigation improvements */
  .desktop-nav {
    display: flex;
  }
  
  .nav-link {
    padding: 15px 20px;
  }
}

/* Large Desktop (1200px and above) */
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
    margin: 0 auto;
  }
  
  /* Column adjustments for large desktop */
  .col-xl-2 {
    width: 16.666%;
    flex: 0 0 16.666%;
    max-width: 16.666%;
  }
  
  .col-xl-3 {
    width: 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  
  /* Desktop navigation improvements */
  .desktop-nav {
    display: flex;
  }
  
  .nav-link {
    padding: 15px 25px;
  }
}

/* RTL specific adjustments */
html[dir="rtl"] {
  /* RTL text alignment */
  text-align: right;
  
  /* Flip padding and margins */
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  
  /* Flip positions for RTL */
  .mobile-menu-toggle {
    right: auto;
    left: 15px;
  }
  
  .language-switcher {
    left: auto;
    right: 15px;
  }
  
  /* Flip direction for lists */
  ul, ol {
    padding-right: 20px;
    padding-left: 0;
  }
  
  /* Adjust icons and directional elements for RTL */
  .arrow-icon, 
  .dropdown-toggle::after {
    transform: rotate(180deg);
  }
  
  /* RTL adjustments for columns */
  @media only screen and (max-width: 480px) {
    .language-switcher {
      left: auto;
      right: 15px;
    }
    
    .mobile-menu-toggle {
      right: auto;
      left: 15px;
    }
  }
  
  @media only screen and (min-width: 481px) and (max-width: 767px) {
    .language-switcher {
      right: auto;
      left: 60px;
    }
  }
}

/* Print styles for better printing */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.3;
  }
  
  .no-print {
    display: none !important;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}