/* ================================================================
   CEYBREEZ MOBILE HEADER V6 — DESKTOP LOOK
   PURPOSE: Keep the same visual language as the desktop website.
   MOBILE LAYOUT:
     Row 1 = Language left · Logo centered · Plan my trip right
     Row 2 = Normal website navigation links (no hamburger menu)
   IMPORTANT: Load this stylesheet LAST.
   ================================================================ */

@media (max-width: 900px) {
  :root {
    --cb-mob-header-bg: #073f3a;
    --cb-mob-header-text: #ffffff;
    --cb-mob-gold: #efc581;
    --cb-mob-header-h: 108px;
  }

  html { scroll-padding-top: 12px !important; }
  body { padding-top: 0 !important; }

  /* Header stays in normal page flow so heroes never hide underneath it. */
  body .site-header,
  body[data-page="home"] .site-header,
  body:not([data-page="home"]) .site-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: var(--cb-mob-header-h) !important;
    min-height: var(--cb-mob-header-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(7,63,58,.985) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 8px 24px rgba(3,28,25,.10) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 100000 !important;
  }

  body .site-header.scrolled {
    height: var(--cb-mob-header-h) !important;
    min-height: var(--cb-mob-header-h) !important;
    padding: 0 !important;
    background: rgba(7,63,58,.99) !important;
  }

  /* The shell becomes a two-row compact version of the desktop header. */
  body .site-header .nav-shell,
  body[data-page="home"] .site-header .nav-shell,
  body:not([data-page="home"]) .site-header .nav-shell {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Logo — same original colour logo used on desktop. */
  body .site-header .brand,
  body[data-page="home"] .site-header .brand,
  body:not([data-page="home"]) .site-header .brand {
    position: absolute !important;
    top: 7px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 122px !important;
    max-width: 122px !important;
    height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100004 !important;
  }

  body .site-header .brand img,
  body[data-page="home"] .site-header .brand img,
  body:not([data-page="home"]) .site-header .brand img {
    width: 122px !important;
    max-width: 122px !important;
    height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    filter: none !important;
  }

  /* Right-side desktop action, just made smaller for mobile. */
  body .site-header .nav-actions,
  body[data-page="home"] .site-header .nav-actions,
  body:not([data-page="home"]) .site-header .nav-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: auto !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    z-index: 100005 !important;
  }

  body .site-header .nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #0a413b !important;
    box-shadow: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  body .site-header .nav-cta i {
    font-size: 8px !important;
    margin-left: 5px !important;
  }

  /* No hamburger in this version — nav is visible like the desktop website. */
  body .site-header .menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Language stays on the left of the same header bar. */
  body .cb-lang-switcher,
  html[dir="rtl"] body .cb-lang-switcher {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 100020 !important;
  }

  body .cb-lang-button {
    min-height: 34px !important;
    max-width: 94px !important;
    padding: 0 9px !important;
    gap: 4px !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    background: rgba(5,45,41,.92) !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body .cb-lang-button .cb-lang-flag { font-size: 14px !important; }

  body .cb-lang-menu,
  html[dir="rtl"] body .cb-lang-menu {
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: auto !important;
    width: 176px !important;
    max-height: calc(100dvh - 74px) !important;
  }

  /* Desktop-style nav links on a dedicated compact second row. */
  body .site-header .main-nav,
  body[data-page="home"] .site-header .main-nav,
  body:not([data-page="home"]) .site-header .main-nav,
  body:not(.menu-open) .site-header .main-nav,
  body.menu-open .site-header .main-nav {
    position: absolute !important;
    top: 55px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 53px !important;
    min-height: 53px !important;
    margin: 0 !important;
    padding: 5px 10px 7px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: transparent !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    z-index: 100003 !important;
  }

  body .site-header .main-nav::-webkit-scrollbar { display: none !important; }

  body .site-header .main-nav a,
  body[data-page="home"] .site-header .main-nav a,
  body:not([data-page="home"]) .site-header .main-nav a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.94) !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  body .site-header .main-nav a:hover,
  body .site-header .main-nav a.active,
  body[data-page="home"] .site-header .main-nav a.active,
  body:not([data-page="home"]) .site-header .main-nav a.active {
    background: var(--cb-mob-gold) !important;
    color: #17443c !important;
  }

  /* Old mobile-menu state must not lock scrolling. */
  body.menu-open {
    overflow: auto !important;
    touch-action: auto !important;
  }

  /* Clear legacy hero offsets created for fixed/hamburger headers. */
  body .hero,
  body .tours-hero,
  body .v4-hero,
  body .td-v4-hero,
  body .contact-v4-hero,
  body .services-v4-hero {
    margin-top: 0 !important;
  }
}

@media (max-width: 520px) {
  body .site-header .brand,
  body .site-header .brand img {
    width: 108px !important;
    max-width: 108px !important;
  }

  body .site-header .nav-cta {
    padding: 0 9px !important;
    font-size: 9px !important;
  }

  body .cb-lang-button {
    max-width: 86px !important;
    padding: 0 8px !important;
    font-size: 9.5px !important;
  }

  body .site-header .main-nav {
    gap: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body .site-header .main-nav a {
    min-height: 32px !important;
    padding: 0 9px !important;
    font-size: 10.5px !important;
  }
}

@media (max-width: 380px) {
  :root { --cb-mob-header-h: 104px; }

  body .site-header .brand,
  body .site-header .brand img {
    width: 98px !important;
    max-width: 98px !important;
  }

  body .site-header .nav-cta {
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 8.5px !important;
  }

  body .cb-lang-button {
    min-height: 32px !important;
    max-width: 82px !important;
    font-size: 9px !important;
  }

  body .site-header .main-nav {
    top: 53px !important;
    height: 51px !important;
    min-height: 51px !important;
  }
}