/* 
 * Responsive CSS for Wardiah Contracting Company
 * Enhanced mobile and tablet experience with accessibility considerations
 */

/* Base responsive adjustments */
@media screen and (max-width: 1200px) {
    .container {
      max-width: 95%;
    }
  }
  
  /* Tablet Styles */
  @media screen and (max-width: 992px) {
    /* Typography adjustments */
    .section-title {
      font-size: 2rem;
    }
    
    .hero-title {
      font-size: 2.8rem;
    }
    
    /* Layout adjustments */
    .grid-3, .grid-4 {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-2 {
      grid-template-columns: 1fr;
    }
    
    .section {
      padding: 60px 0;
    }
    
    .contact-container {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    
    .footer-content {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
    }
    
    /* Reduce animation complexity on tablets */
    .shape-decoration {
      opacity: 0.3;
    }
    
    /* Optimize performance */
    [data-aos-delay] {
      transition-delay: 0s !important; /* Remove delay on tablets for better performance */
    }
  }
  
  /* Mobile Landscape Styles */
  @media screen and (max-width: 768px) {
    /* Typography adjustments */
    .section-title {
      font-size: 1.8rem;
    }
    
    .hero-title {
      font-size: 2.2rem;
    }
    
    .hero-description {
      font-size: 1.1rem;
    }
    
    body {
      font-size: 15px; /* Slightly smaller base font size */
    }
    
    /* Layout adjustments */
    .grid-3, .grid-4 {
      grid-template-columns: 1fr;
      gap: 25px;
    }
    
    .section {
      padding: 50px 0;
    }
    
    /* Mobile navigation enhancements */
    .nav-list {
      position: fixed;
      top: 0;
      right: -80%; /* Start offscreen */
      width: 80%; /* Wider for better touch targets */
      height: 100vh;
      background-color: var(--card-bg);
      flex-direction: column;
      align-items: flex-start;
      padding: 80px 30px 30px;
      transition: right 0.3s ease; /* Smoother transition */
      box-shadow: var(--shadow-lg);
      z-index: 1000;
      overflow-y: auto; /* Allow scrolling for many menu items */
    }
    
    .nav-list.active {
      right: 0;
    }
    
    .nav-list li {
      width: 100%;
      margin-bottom: 20px;
    }
    
    .nav-link {
      display: block;
      padding: 12px 0; /* Larger touch target */
      font-size: 1.1rem; /* Larger text for better tap targets */
    }
    
    .mobile-menu-btn {
      display: block;
      z-index: 1001;
      padding: 10px; /* Larger tap target */
    }
    
    /* Optimize touch interactions */
    .btn {
      padding: 12px 25px; /* Larger touch targets */
      min-height: 44px; /* Minimum height for touch targets */
    }
    
    .filter-btn {
      padding: 10px 15px;
      margin-bottom: 5px;
    }
    
    /* Team card adjustments */
    .team-card {
      max-width: 350px;
      margin-left: auto;
      margin-right: auto;
    }
    
    /* Project table responsive improvements */
    .projects-table thead {
      display: none;
    }
    
    .projects-table, 
    .projects-table tbody, 
    .projects-table tr, 
    .projects-table td {
      display: block;
      width: 100%;
    }
    
    .projects-table tr {
      margin-bottom: 15px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      font-size: 0.85rem; /* Smaller text on mobile for better fit */
    }
    
    .projects-table td {
      text-align: right;
      padding: 8px 10px; /* Smaller padding on mobile */
      position: relative;
      padding-left: 50%;
      min-height: 30px;
      word-break: break-word; /* Prevent text overflow */
    }
    
    .projects-table td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      width: 45%;
      font-weight: 600;
      text-align: left;
      padding-right: 10px;
      font-size: 0.85rem; /* Match the table data font size */
    }
    
    .projects-table td:last-child {
      border-bottom: none;
    }
    
    /* Footer adjustments */
    .footer-col {
      min-width: 100%;
    }
    
    /* Accessibility adjustments */
    .accessibility-controls {
      bottom: 20px;
      right: 20px;
    }
    
    .form-control {
      font-size: 16px; /* Prevent auto-zoom on iOS */
    }
    
    /* Disable hover effects and use active states instead */
    .btn:hover, .card:hover, .activity-card:hover, .team-card:hover {
      transform: none;
    }
    
    .btn:active, .card:active, .activity-card:active, .team-card:active {
      transform: translateY(-2px);
    }
  }
  
  /* Mobile Portrait Styles */
  @media screen and (max-width: 576px) {
    .container {
      padding: 0 15px;
    }
    
    .section-title {
      font-size: 1.6rem;
    }
    
    .hero-title {
      font-size: 1.8rem;
    }
    
    .btn {
      padding: 10px 20px;
      font-size: 0.9rem;
    }
    
    .footer-content {
      grid-template-columns: 1fr;
    }
    
    .projects-filter {
      flex-direction: column;
      align-items: center;
    }
    
    .filter-btn {
      width: 80%;
      margin-bottom: 8px;
    }
  }
  
  /* Print Styles */
  @media print {
    /* Hide unnecessary elements */
    header, footer, .hero-section, .accessibility-controls,
    .mobile-menu-btn, .projects-filter, .contact-form {
      display: none !important;
    }
    
    /* Ensure text is black on white */
    body {
      color: #000;
      background: #fff;
      font-size: 12pt;
      line-height: 1.4;
    }
    
    /* Remove shadows and effects */
    * {
      box-shadow: none !important;
      text-shadow: none !important;
    }
    
    /* Ensure links are readable */
    a {
      color: #000;
      text-decoration: underline;
    }
    
    /* Add URL after links */
    a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 90%;
    }
    
    /* Page breaks */
    h1, h2, h3, h4, h5, h6 {
      page-break-after: avoid;
      page-break-inside: avoid;
    }
    
    img {
      page-break-inside: avoid;
      page-break-after: avoid;
    }
    
    table, figure {
      page-break-inside: avoid;
    }
    
    /* Make images fit on page */
    img {
      max-width: 100% !important;
      page-break-inside: avoid;
    }
    
    /* Show full table for printing */
    .projects-table, .projects-table tbody, 
    .projects-table tr, .projects-table td,
    .projects-table th {
      display: table;
      width: 100%;
      display: revert;
    }
    
    .projects-table th {
      background-color: #f0f0f0 !important;
      color: black !important;
    }
    
    /* Restore table headers for print */
    .projects-table thead {
      display: table-header-group;
    }
    
    .projects-table td::before {
      content: none;
    }
  }
  
  /* Reduced Motion Media Query */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.001s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001s !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* High Contrast Mode Support */
  @media (forced-colors: active) {
    .btn, .nav-link, .filter-btn, .form-submit,
    .team-card, .activity-card, .contact-card {
      forced-color-adjust: none;
      border: 1px solid ButtonText;
    }
  }
  

  
  /* RTL Support for Internationalization */
  [dir="rtl"] {
    .nav-list {
      right: auto;
      left: -80%;
    }
    
    .nav-list.active {
      right: auto;
      left: 0;
    }
    
    /* Fix for projects table in RTL mode */
    .projects-table th,
    .projects-table td {
      text-align: right;
    }
    
    /* Only apply these styles in mobile view */
    @media screen and (max-width: 768px) {
      .projects-table td {
        text-align: right;
        padding-right: 50%;
        padding-left: 10px;
      }
      
      .projects-table td::before {
        left: auto;
        right: 10px;
        text-align: right;
        width: 45%;
      }
    }
    
    .activity-icon {
      margin-left: 0;
      margin-right: 20px;
    }
    
    .activity-title, .activity-description {
      text-align: right;
    }
    
    @media screen and (max-width: 576px) {
      .activity-card, .contact-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      
      .activity-icon, .contact-card-icon {
        margin: 0 0 15px 0;
      }
    }
  }