/* ============================================
   Responsive Fixes - Ensure All Elements Are Responsive
   ============================================ */

/* Main nav: avoid horizontal overflow on tablets */
@media (max-width: 1024px) and (min-width: 769px) {
  .navigation {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    position: relative !important;
  }
}

/* Global responsive fixes */
@media (max-width: 768px) {
  /* Ensure all containers are responsive */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Calendar: 7-column grid must not inherit * max-width (breaks cells) */
  .calendar-weekdays,
  .calendar-weekdays .weekday,
  .calendar-days-grid,
  .calendar-days-grid .calendar-day {
    max-width: none !important;
  }
  
  /* Fix any fixed widths */
  .container,
  .wrapper,
  .content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Fix absolute positioned elements */
  [style*="position: absolute"],
  [style*="position:fixed"] {
    position: relative !important;
  }
  
  /* Ensure all images are responsive */
  img,
  picture,
  video:not(.video-player-element),
  iframe,
  embed,
  object {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Fix tables */
  table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix forms */
  form,
  .form,
  .contact-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  /* Fix cards and containers */
  .card,
  .news-card,
  .story-card,
  .contact-card,
  .course-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Fix grids */
  .grid,
  .grid-container,
  .news-container,
  .stories-container,
  .contact-container,
  .courses-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  
  /* Fix flex containers */
  .flex-row,
  .row {
    flex-direction: column !important;
  }
  
  /* Fix navigation */
  .navigation {
    display: none !important;
  }
  
  /* Fix header */
  .header .container {
    flex-wrap: wrap !important;
    height: 167px;
  }
  
  /* Fix footer */
  .footer,
  .footer-grid {
    width: 100% !important;
    flex-direction: column !important;
  }
  
  /* Fix modals */
  .modal,
  .modal-content,
  .popup,
  .popup-content {
    width: 90% !important;
    max-width: 90% !important;
    margin: 5% auto !important;
  }
  
  /* Fix buttons 
  button,
  .btn,
  input[type="button"],
  input[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
  }
  */

  /* Prevent horizontal scroll */
  body,
  html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fix sections */
  section,
  .section {
    width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow: hidden;
    justify-content: center;
    justify-items: center;
  }


  
  /* Fix banners and heroes */
  .banner,
  .hero,
  .banner-content,
  .hero-content {
    width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}