/* ============================================================================ BookingInGh.com — GODMODE.CSS v4.0 Global layout layer. Loads AFTER theme.css in . ============================================================================ */ /* ── CSS VARIABLES ── */ :root { --bigh-topbar-height: 38px; --bigh-nav-height: 64px; --bigh-header-total: 102px; /* topbar + nav */ } @media (max-width: 768px) { :root { --bigh-topbar-height: 0px; /* topbar hidden on mobile */ --bigh-nav-height: 58px; --bigh-header-total: 58px; } } /* ── STICKY HEADER ── The header sticks to the top of the viewport as the user scrolls. A matching padding-top on pushes page content below it so nothing is ever hidden underneath. ─────────────────────────────────────────────────────────────────── */ .bigh-header { position: sticky; top: 0; left: 0; right: 0; width: 100%; z-index: 200; } /* Body offset so the hero/content starts below the full header */ body { padding-top: 0; /* header is in flow (sticky, not fixed) — no offset needed */ } /* ── TOPBAR — hide on mobile ── */ @media (max-width: 768px) { .bigh-topbar { display: none; } } /* ── NAV MAIN BAR height ── */ .bigh-header__main { height: var(--bigh-nav-height); display: flex; align-items: center; } .bigh-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; gap: 16px; } /* ── HAMBURGER — only on mobile ── */ .bigh-ham-btn { display: none; } @media (max-width: 900px) { .bigh-ham-btn { display: flex; } .bigh-nav__links { display: none; } } /* ── DETAIL PAGES — header becomes non-sticky so it never covers the hero ── Applied via .page-detail body class set in hotel-details and tour-details. ──────────────────────────────────────────────────────────────────────── */ body.page-detail .bigh-header { position: relative; top: auto; } /* ── FILTER BAR (tours/hotels listing pages) ── The .gm-filterbar sticky offset is handled inside gm-styles.php using the CSS variables defined above, so no override is needed here. ─────────────────────────────────────────────────────────────────────────── */ /* === BookingInGh emergency stability patch: keeps layout from scattering === */ *, *::before, *::after { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; } #bigh-main { display: block; width: 100%; min-height: 60vh; } .bigh-container { width: min(100% - 32px, 1180px); margin-inline: auto; } img, svg, video, canvas { max-width: 100%; height: auto; } .bigh-drawer { max-width: min(88vw, 380px); } .bigh-backdrop { pointer-events: none; } .bigh-backdrop.is-open { pointer-events: auto; } @media (max-width: 900px) { .bigh-nav__actions .bigh-btn { display: none; } .bigh-mega { display: none !important; } }