/* ================================================================
   WADI RUM AL OMAR — Global Responsive & Quality CSS
   Applies to ALL pages sitewide.
   Mobile-first improvements: spacing, typography, touch targets,
   grids, images, forms, footer.
   ================================================================ */

/* ----------------------------------------------------------------
   BOX MODEL & OVERFLOW
   ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------
   IMAGES & MEDIA
   ---------------------------------------------------------------- */
img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

img {
  object-fit: cover;
}

/* ----------------------------------------------------------------
   DROPDOWN — z-index & hover area fix
   ---------------------------------------------------------------- */
.dropdown {
  position: relative;
}

.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 18px; /* hover bridge — prevents menu from disappearing */
  pointer-events: auto;
}

.dropdown-content {
  z-index: 12000 !important;
}

.dropdown-content a {
  position: relative;
  z-index: 12001;
}

nav a {
  pointer-events: auto;
}

/* ----------------------------------------------------------------
   FOCUS STATES (accessibility)
   ---------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #c6a45a;
  outline-offset: 3px;
}

/* ----------------------------------------------------------------
   SECTION BASE — consistent vertical rhythm
   ---------------------------------------------------------------- */
section {
  position: relative;
}

/* ----------------------------------------------------------------
   FOOTER — consistent across all pages
   ---------------------------------------------------------------- */
footer {
  background: #0f0f0f;
  color: #ccc;
  padding: clamp(60px, 8vw, 110px) clamp(24px, 8%, 90px);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(28px, 4vw, 50px);
  max-width: 1300px;
  margin: 0 auto;
}

footer h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: 0.03em;
}

footer a,
footer p {
  color: #aaa;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #c6a45a;
}

.footer-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
  color: #666;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

.footer-copy a {
  display: inline;
  margin: 0;
  color: #c6a45a;
  font-size: 13px;
}

/* ----------------------------------------------------------------
   BUTTONS — minimum touch target 44px
   ---------------------------------------------------------------- */
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.btn.secondary {
  background: transparent !important;
  border: 1.5px solid currentColor;
}

/* ----------------------------------------------------------------
   FORM ELEMENTS — touch-friendly
   ---------------------------------------------------------------- */
input,
select,
textarea {
  font-family: inherit;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 12px 16px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #c6a45a;
  box-shadow: 0 0 0 3px rgba(198, 164, 90, 0.15);
  outline: none;
}

button[type="submit"],
input[type="submit"] {
  min-height: 48px;
  cursor: pointer;
}

/* ----------------------------------------------------------------
   TYPOGRAPHY — fluid scaling for all pages
   ---------------------------------------------------------------- */
h1 {
  font-size: clamp(30px, 5vw, 62px);
  line-height: 1.2;
}

h2 {
  font-size: clamp(22px, 3.8vw, 44px);
  line-height: 1.3;
}

h3 {
  font-size: clamp(18px, 2.8vw, 28px);
  line-height: 1.35;
}

p {
  line-height: 1.8;
}

/* ----------------------------------------------------------------
   SECTION: clamp vertical spacing globally (non-mobile baseline)
   ---------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1200px) {
  section {
    padding: clamp(80px, 8vw, 140px) clamp(40px, 6%, 90px);
  }

  .split {
    gap: clamp(40px, 5vw, 70px) !important;
  }
}

/* ================================================================
   BREAKPOINT — Tablet (≤ 1200px)
   ================================================================ */
@media (max-width: 1200px) {
  .shortcut-grid,
  .tour-grid,
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  footer {
    padding-left: clamp(24px, 6%, 60px);
    padding-right: clamp(24px, 6%, 60px);
  }
}

/* ================================================================
   BREAKPOINT — Small Tablet / Large Mobile (≤ 900px)
   ================================================================ */
@media (max-width: 900px) {
  /* --- Universal section padding — all pages --- */
  section,
  .section,
  .tour-section,
  .gallery-section,
  .faq-section,
  .tour-shortcuts,
  .packages-section,
  .reviews-section,
  .trip-form,
  .omar-story,
  .info-section,
  .alt {
    padding-left: clamp(18px, 5%, 48px) !important;
    padding-right: clamp(18px, 5%, 48px) !important;
  }

  /* Top/bottom: catch the large inline 140px padding on index.html */
  section {
    padding-top: clamp(64px, 9vw, 100px) !important;
    padding-bottom: clamp(64px, 9vw, 100px) !important;
  }

  /* Split gap: reduce from 90px to something comfortable */
  .split,
  .split.reverse {
    gap: clamp(24px, 4vw, 48px) !important;
  }

  /* --- Header / nav --- */
  header,
  header.site-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Kill horizontal overflow --- */
  .promo-inner,
  .hero-content,
  .container,
  .wrapper {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* --- One-column layout for all split grids --- */
  .split,
  .split.reverse,
  .tour-layout,
  .info-block,
  .info-block.reverse,
  .faq-grid,
  .review-grid,
  .why-grid,
  .package-grid,
  .packages,
  .footer-grid,
  .gallery-grid,
  .shortcut-grid,
  .camp-grid,
  .cards,
  .grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* --- Split: text always above image on mobile --- */
  .split,
  .split.reverse,
  .info-block,
  .info-block.reverse {
    display: flex !important;
    flex-direction: column !important;
  }

  .split .text,
  .split.reverse .text,
  .info-block .info-text,
  .info-block.reverse .info-text {
    order: 1 !important;
  }

  .split .image,
  .split.reverse .image,
  .info-block .info-image,
  .info-block.reverse .info-image {
    order: 2 !important;
  }

  .info-block.reverse,
  .info-block.reverse > * {
    direction: ltr !important;
  }

  /* --- Why grid: 2 columns on tablet --- */
  .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Section vertical spacing --- */
  .section,
  .packages-section,
  .reviews-section,
  .trip-form,
  .omar-story,
  .info-section,
  .faq-section,
  .alt {
    padding-top: clamp(56px, 8vw, 80px) !important;
    padding-bottom: clamp(56px, 8vw, 80px) !important;
  }

  /* --- Hero --- */
  .hero {
    min-height: 80vh !important;
    height: auto !important;
    padding-top: 130px !important;
    padding-bottom: 80px !important;
  }

  /* --- Typography --- */
  h1 {
    font-size: clamp(28px, 8.5vw, 44px) !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: clamp(18px, 5vw, 26px) !important;
    line-height: 1.35 !important;
  }

  /* --- Buttons --- */
  .btn,
  .tour-cta a,
  .package-cta a,
  .cta a,
  .about-cta,
  .contact-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* --- Tour image grid: 2 cols --- */
  .tour-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* --- Gallery: 2 cols --- */
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* --- Images aspect ratio fix --- */
  .tour-image-grid img,
  .gallery-item img,
  .image img,
  .info-image img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
  }

  /* --- Dropdown full width on mobile --- */
  .dropdown-content {
    min-width: 100% !important;
  }

  /* --- Footer copy stack --- */
  .footer-copy {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* --- Prev/Next nav --- */
  .prev, .next {
    font-size: 32px !important;
    padding: 10px !important;
  }

  .prev { left: 8px !important; }
  .next { right: 8px !important; }

  /* --- Package cards: uniform height --- */
  .package {
    display: flex !important;
    flex-direction: column !important;
  }

  /* --- Why grid: cards equal height --- */
  .why {
    display: flex !important;
    align-items: flex-start !important;
  }

  /* --- Review cards: full width --- */
  .reviews-track {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   BREAKPOINT — Mobile (≤ 600px)
   ================================================================ */
@media (max-width: 600px) {
  /* --- Promo bar compact --- */
  .promo-bar {
    height: 48px !important;
  }

  .promo-text {
    display: none !important;
  }

  .promo-inner {
    padding: 0 16px !important;
  }

  /* --- Header: account for smaller promo bar --- */
  header,
  header.site-header {
    top: 48px !important;
  }

  /* --- Logo compact --- */
  .logo img,
  .site-header .logo img {
    height: 68px !important;
  }

  /* --- Hero tighter --- */
  .hero {
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }

  .hero h1 {
    font-size: clamp(26px, 9vw, 38px) !important;
  }

  .hero p {
    font-size: 15px !important;
  }

  /* --- Grids: single column --- */
  .tour-image-grid,
  .gallery-grid,
  .price-grid,
  .why-grid,
  .budget-options,
  .day-options {
    grid-template-columns: 1fr !important;
  }

  /* --- Section padding tighter on small screens --- */
  section,
  .section,
  .alt,
  .tour-section,
  .packages-section,
  .reviews-section,
  .trip-form,
  .info-section,
  .faq-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: clamp(48px, 12vw, 72px) !important;
    padding-bottom: clamp(48px, 12vw, 72px) !important;
  }

  /* --- Tour content box --- */
  .tour-content {
    padding: 24px 18px !important;
  }

  /* --- Package card padding --- */
  .package {
    padding: 26px 22px !important;
  }

  /* --- Form block --- */
  .form-block {
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  /* --- Contact form --- */
  .contact-form {
    padding: 28px 20px !important;
  }

  /* --- About content --- */
  .about-content {
    padding: 60px 16px !important;
  }

  /* --- Why grid: 1 col forced --- */
  .why-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Testimonials/reviews --- */
  .review {
    padding: 22px 18px !important;
  }

  /* --- Footer grid 2 cols on small phones --- */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  footer {
    padding: 48px 16px !important;
  }

  /* --- Close button for modals --- */
  .close {
    top: 10px !important;
    right: 10px !important;
    font-size: 26px !important;
  }

  /* --- Lightbox nav arrows --- */
  .prev { left: 4px !important; }
  .next { right: 4px !important; }

  /* --- Hide subtitle text in promo --- */
  .promo-right a {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* --- Plan form: day cards stack cleanly --- */
  .day-options,
  .budget-options {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* --- Smaller section titles --- */
  .packages-section h2,
  .reviews-section h2,
  .trip-form h2,
  .faq-section h2 {
    font-size: clamp(20px, 7vw, 28px) !important;
    margin-bottom: 8px !important;
  }
}

/* ================================================================
   BREAKPOINT — Very Small (≤ 380px)
   ================================================================ */
@media (max-width: 380px) {
  h1 { font-size: clamp(22px, 10vw, 30px) !important; }
  h2 { font-size: clamp(18px, 8vw, 24px) !important; }

  .hero {
    padding-top: 110px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .day-options,
  .budget-options {
    grid-template-columns: 1fr !important;
  }
}