/* ============================================================================
   LAWELIYA — MOBILE + LOGO FIX
   File: assets/css/mobile-optimized.css  (NEW FILE — upload here)
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════════
   1. LOGO — dark logo on dark header fix
   The header goes transparent at top of page, making a dark logo invisible.
   Fix: always keep a solid dark pill behind the header container.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Override the "transparent at top" rule — always show dark background */
.site-header:not(.lcl-scrolled) {
  background: rgba(6, 6, 5, 0.82) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(200, 164, 110, 0.10) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
}

/* Logo image — no filter, show as-is, proper sizing */
.header-logo .custom-logo-link img,
.header-logo .custom-logo-link img.custom-logo {
  height: 46px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: none !important;
  display: block;
}

/* Text fallback logo */
.logo-text { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.logo-laweliya {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.4rem; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold, #c8a46e); line-height: 1;
}
.logo-tagline {
  font-family: var(--font-body, 'Jost', sans-serif);
  font-size: 0.5rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-muted, #7a7468);
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. HEADER MOBILE — hide desktop nav, show hamburger
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .main-navigation { display: none !important; }
  .mobile-menu-toggle { display: flex !important; }

  .header-container {
    padding: 10px 16px !important;
    gap: 12px;
  }

  .btn-book-now { padding: 8px 16px; font-size: 0.66rem; }
}

@media (max-width: 768px) {
  .site-header { padding: 8px 12px !important; }

  .header-logo .custom-logo-link img { height: 36px !important; }
  .logo-laweliya { font-size: 1.15rem; }

  .header-container {
    padding: 8px 14px !important;
  }
}

@media (max-width: 480px) {
  .header-logo .custom-logo-link img { height: 30px !important; max-width: 130px; }
  .logo-laweliya { font-size: 1rem; }

  /* Shrink book button on tiny phones */
  .btn-book-now { padding: 7px 12px; font-size: 0.62rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. MOBILE MENU OVERLAY
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .mobile-menu-content { padding: 95px 28px 36px; }
  .mobile-menu-close { top: 18px; right: 22px; }
  .mobile-menu li a { font-size: clamp(1.5rem, 7vw, 2.2rem); padding: 14px 0; }
  .btn-book-now-mobile { padding: 15px 28px; font-size: 0.76rem; }
  .mobile-contact p { font-size: 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   4. HERO — fix iOS height and mobile layout
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hp-hero {
    min-height: 100svh;
    padding-bottom: 80px;
    align-items: flex-end;
  }

  .hp-hero-content { padding: 0 20px; }
  .hp-hero-title { font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.05; }
  .hp-hero-sub { font-size: 0.9rem; max-width: 100%; }

  .hp-hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hp-hero-stats { gap: 20px; flex-wrap: wrap; }
  .hp-stat-n { font-size: clamp(1.5rem, 5vw, 2rem); }
}

@media (max-width: 480px) {
  .hp-hero { padding-bottom: 56px; }
  .hp-hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }

  .hp-hero-actions .hp-btn-gold,
  .hp-hero-actions .hp-btn-ghost {
    width: 100%; justify-content: center; padding: 14px 20px;
  }

  .hp-hero-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  }
}

/* iOS 100vh fix */
@supports (-webkit-touch-callout: none) {
  .hp-hero { min-height: -webkit-fill-available; }
  .mobile-menu-overlay { height: -webkit-fill-available; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. SAFARI INTELLIGENCE WIDGET — fix mobile overflow
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* The live conditions panel that overlaps on mobile */
  .lcl-si-panel,
  .safari-intel-panel,
  [class*="si-panel"],
  .live-conditions {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 0 20px 0 !important;
  }

  /* Weather widget row */
  .si-weather-row,
  .weather-destinations {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   6. CARDS — single column, no hover lifts on touch
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .destinations-grid,
  .safaris-showcase,
  .wildlife-grid,
  .lodges-showcase,
  .hp-tour-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
    margin-top: 32px;
  }

  .destination-card,
  .safari-card-luxury,
  .wildlife-card,
  .lodge-card-luxury,
  .hp-tour-card {
    border-radius: 18px;
  }

  .destination-image,
  .card-image,
  .wildlife-image { min-height: 200px; }
}

@media (hover: none) and (pointer: coarse) {
  .destination-card:hover,
  .safari-card-luxury:hover,
  .wildlife-card:hover,
  .lodge-card-luxury:hover,
  .hp-tour-card:hover {
    transform: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
  }

  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   7. SECTIONS & LAYOUT
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  section, [class*="-section"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .hp-container, .container, .container-wide {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hp-split, .split-layout, [class*="two-col"] {
    flex-direction: column !important;
    gap: 36px;
  }

  .hp-section-title { font-size: clamp(1.7rem, 6vw, 2.6rem); }
}

/* ══════════════════════════════════════════════════════════════════════════════
   8. FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .footer-grid, .footer-columns, [class*="footer-col"] {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .footer-ticker { height: 38px; }
  .ticker-label { font-size: 0.56rem; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   9. FORMS — prevent iOS zoom, proper touch targets
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* font-size 16px prevents iOS from zooming in on focus */
  input, select, textarea,
  .form-input, .form-select, .form-textarea {
    font-size: 16px !important;
    min-height: 46px;
  }

  .form-row { flex-direction: column !important; gap: 12px; }

  button[type="submit"], .form-submit, input[type="submit"] {
    width: 100%; min-height: 50px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   10. iOS + GLOBAL FIXES
   ══════════════════════════════════════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
.mobile-menu-overlay { overscroll-behavior: contain; }

@media (max-width: 768px) { .desktop-only { display: none !important; } }
@media (min-width: 769px) { .mobile-only  { display: none !important; } }