/* ================================================================
   MOBILE NAV + GLOBAL MOBILE FIXES
   Add to every page: <link rel="stylesheet" href="mobile-nav.css"/>
   ================================================================ */

/* Hamburger animation */
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:1001; position:relative; }
.hamburger span { display:block; width:24px; height:2px; background:var(--earth,#3d2b1a); border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Overlay + close button (created by JS) */
#mobileNavOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:997; }
#mobileNavOverlay.visible { display:block; }
#mobileNavClose { display:none; position:fixed; top:14px; right:16px; z-index:999; background:none; border:none; cursor:pointer; font-size:1.5rem; color:var(--earth,#3d2b1a); line-height:1; padding:4px; font-weight:700; }
#mobileNavClose.visible { display:block; }

@media (max-width: 900px) {
  .hamburger { display:flex; }

  /* Full-screen slide-over menu */
  .nav-menu {
    display:none !important;
    position:fixed !important;
    top:0; left:0; right:0; bottom:0;
    background:#fff;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    overflow-y:auto;
    padding:68px 0 40px;
    z-index:998;
  }
  .nav-menu.mobile-open { display:flex !important; }

  /* Nav items */
  .nav-item { border-bottom:1px solid rgba(0,0,0,.07); }
  .nav-link {
    padding:16px 20px !important;
    font-size:.97rem !important;
    border-radius:0 !important;
    justify-content:space-between !important;
    display:flex !important;
    align-items:center !important;
    white-space:normal !important;
  }
  .nav-caret { font-size:.7rem; transition:transform .25s; display:inline-block; }
  .nav-caret.open { transform:rotate(180deg); }

  /* Mega panel → accordion */
  .mega-panel {
    display:none !important;
    position:static !important;
    transform:none !important;
    min-width:auto !important;
    width:100% !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:0 !important;
    background:#faf6f0;
    border-top:1px solid rgba(0,0,0,.06);
  }
  .mega-panel.mobile-open { display:block !important; }
  .mega-panel-inner {
    flex-direction:column !important;
    padding:12px 16px 20px !important;
    gap:0 !important;
    min-width:auto !important;
  }
  .mega-panel-inner.layout-tours,
  .mega-panel-inner.layout-destinations,
  .mega-panel-inner.layout-resources { min-width:auto !important; }
  .mc { min-width:auto; margin-bottom:16px; }
  .mc-feat { display:none !important; }
  .mc-title { font-size:.68rem; margin-bottom:8px; }
  .mc-link { padding:10px 12px; }
  .mc-link-name { font-size:.88rem; }
  .mc-link-desc { font-size:.76rem; }
  .nav-enquire-btn {
    margin:12px 20px !important;
    border-radius:8px !important;
    text-align:center !important;
    justify-content:center !important;
    background:var(--gold,#C8872A) !important;
    color:#fff !important;
    padding:14px 20px !important;
  }
}

/* ================================================================
   GLOBAL PAGE-LEVEL MOBILE FIXES (all pages)
   ================================================================ */
@media(max-width:768px){
  .page-header { padding-top:100px !important; min-height:280px !important; }
  .page-header-content h1 { font-size:clamp(1.7rem,6vw,2.6rem) !important; }
  .page-header-content .page-header-sub { font-size:.9rem !important; }
  .page-header-content > div[style*="display:flex"] { flex-wrap:wrap !important; gap:8px !important; }
  .footer-top { grid-template-columns:1fr 1fr !important; gap:24px !important; }
  .reviews-grid { grid-template-columns:1fr !important; }
  .booking-banner h2 { font-size:clamp(1.4rem,4vw,2rem) !important; }
  .booking-actions { flex-direction:column; align-items:center; }
}
@media(max-width:480px){
  .footer-top { grid-template-columns:1fr !important; }
  .footer-bottom { flex-direction:column; text-align:center; gap:6px; }
  .util-bar .container { flex-direction:column; gap:6px; align-items:center; }
  .breadcrumb { font-size:.78rem; flex-wrap:wrap; }
}