/**
 * ExploreGN — Global Responsive Guard System
 * 
 * This stylesheet provides defensive layout protection across the site.
 * It prevents horizontal overflow, ensures responsive media, and provides
 * safe container defaults without changing existing design or behavior.
 * 
 * Load AFTER main stylesheets to safely override unsafe width rules.
 */

/* ==========================================================================
   STEP 1: GLOBAL SAFETY RULES
   ========================================================================== */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent layout-breaking overflow from text */
* {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   STEP 2: RESPONSIVE MEDIA
   ========================================================================== */

img,
video,
iframe,
svg,
canvas,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   STEP 3: TABLE SAFETY
   ========================================================================== */

table {
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   STEP 4: FORM ELEMENT SAFETY
   ========================================================================== */

input,
select,
textarea,
button {
  max-width: 100%;
}

/* ==========================================================================
   STEP 5: UNIVERSAL CONTAINER SAFETY
   ========================================================================== */

.container:not(.splide__slide),
.container-fluid,
.content-wrapper {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Prevent flex/grid containers and children from causing overflow */
.flex,
.grid,
[class*="flex-"],
[class*="grid-"] {
  min-width: 0;
}

.flex > *,
.grid > *,
[class*="flex-"] > *,
[class*="grid-"] > * {
  min-width: 0;
  max-width: 100%;
}

/* ==========================================================================
   STEP 6: RESPONSIVE GRID UTILITY
   ========================================================================== */

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* ==========================================================================
   STEP 7: SLIDER / CAROUSEL / SPLIDE SAFETY
   ========================================================================== */

.splide,
.splide__track,
.splide__list,
.splide__slide {
  max-width: 100%;
}

/* Ensure splide sliders stay within viewport */
.splide {
  overflow: hidden;
}

.splide__list {
  display: flex;
}

/* ==========================================================================
   STEP 8: MOBILE BREAKPOINT SAFETY
   ========================================================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .container:not(.splide__slide),
  .container-fluid,
  .content-wrapper {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Mobile portrait (max-width: 768px) */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .container:not(.splide__slide),
  .container-fluid,
  .content-wrapper {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Ensure tables remain scrollable on mobile */
  table {
    font-size: 14px;
  }
}

/* Small mobile (max-width: 480px) */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .container:not(.splide__slide),
  .container-fluid,
  .content-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Ensure images don't break layout on very small screens */
  img {
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   STEP 9: SAFE NOTCH / SAFE AREA SUPPORT (for modern devices)
   ========================================================================== */

@supports (padding: max(0px)) {
  .container:not(.splide__slide),
  .container-fluid,
  .content-wrapper {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  @media (max-width: 1024px) {
    .container:not(.splide__slide),
    .container-fluid,
    .content-wrapper {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
  }

  @media (max-width: 768px) {
    .container:not(.splide__slide),
    .container-fluid,
    .content-wrapper {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
  }

  @media (max-width: 480px) {
    .container:not(.splide__slide),
    .container-fluid,
    .content-wrapper {
      padding-left: max(10px, env(safe-area-inset-left));
      padding-right: max(10px, env(safe-area-inset-right));
    }
  }
}

/* ==========================================================================
   STEP 10: CARD & CONTENT SAFETY
   ========================================================================== */

/* Prevent cards from overflowing their containers */
.card,
[class*="-card"],
.card-wrapper {
  max-width: 100%;
  overflow: hidden;
}

/* Ensure absolute positioned elements don't push viewport */
.absolute,
[style*="position: absolute"],
[style*="position:absolute"] {
  max-width: 100vw;
}

/* ==========================================================================
   STEP 11: NAVIGATION SAFETY (preserve existing overflow:visible for mobile menu)
   ========================================================================== */

/* Nav already handled in style_all.css - just ensure main nav wrapper stays inside viewport */
nav {
  max-width: 100%;
}

/* ==========================================================================
   STEP 12: FORM CONTAINER SAFETY
   ========================================================================== */

form {
  max-width: 100%;
}

/* Payment card and form safety */
.payment-card,
.reservation-card,
.booking-card,
.review-card,
.pay-card,
.summary-card {
  max-width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   STEP 13: HERO / BANNER SAFETY
   ========================================================================== */

.hero,
.banner,
[class*="hero-"],
[class*="banner-"] {
  max-width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   STEP 14: FOOTER SAFETY
   ========================================================================== */

footer {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   STEP 15: MODAL / POPUP SAFETY
   ========================================================================== */

.modal,
.popup,
[class*="modal-"],
[class*="popup-"] {
  max-width: 100vw;
  max-height: 100vh;
}

/* Chatbot popup is already handled in base.html inline styles */

/* ==========================================================================
   STEP 16: MOBILE ZOOM PREVENTION
   ========================================================================== */

/* Ensure touch targets are appropriately sized for small phones */
@media (max-width: 480px) {
  /* Prevent fixed-width elements from causing zoom */
  [class*="w-["],
  [style*="width:"] {
    max-width: 100% !important;
  }
  
  /* Ensure text inputs don't trigger iOS zoom (min 16px) */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   STEP 17: SMALL PHONE SAFETY (iPhone SE, small Android)
   ========================================================================== */

@media (max-width: 375px) {
  /* Extra small device padding reduction */
  .container:not(.splide__slide),
  .container-fluid,
  .content-wrapper {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  /* Ensure cards fit on smallest screens */
  .card,
  [class*="-card"],
  .pay-card,
  .summary-card,
  .payment-card {
    margin-left: 4px;
    margin-right: 4px;
  }
}

/* ==========================================================================
   STEP 18: PREVENT LAYOUT-BREAKING CALC WIDTHS
   ========================================================================== */

/* Override any calc widths that exceed 100% */
[class*="w-[calc(100%+"] {
  max-width: 100%;
  overflow: hidden;
}

/* ==========================================================================
   STEP 19: SECTION OVERFLOW CONTAINMENT
   ========================================================================== */

/* Only apply overflow containment to sections that need it */
section.overflow-hidden,
.section-contained {
  max-width: 100%;
  overflow-x: hidden;
}