html,body{overflow-x:hidden} .nav__toggle{display:none} @media(max-width:1024px){ .nav__links{display:none!important} .nav__inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding-top:8px;padding-bottom:8px;flex-wrap:nowrap} .nav__right{display:flex;align-items:center;gap:8px;margin-left:auto} .nav__right .btn--primary{display:none} .nav .nav__phone{display:none} .brand__name{font-size:1.15rem}.brand__sub{font-size:.62rem} .nav.is-scrolled{background:#1A3329} .nav__toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;background:transparent;border:0;cursor:pointer} .nav__toggle span{display:block;height:2px;width:100%;background:currentColor;transition:transform .25s,opacity .2s} .nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__toggle.is-open span:nth-child(2){opacity:0} .nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav__drawer{position:fixed;inset:64px 0 0 0;background:#1A3329;color:#F8F6F1;padding:28px 24px 40px;overflow-y:auto;z-index:70;transform:translateY(-8px);opacity:0;transition:opacity .25s,transform .25s} .nav__drawer.is-open{transform:none;opacity:1} .nav__drawer-links{list-style:none;margin:0 0 24px;padding:0} .nav__drawer-links li{border-bottom:1px solid rgba(248,246,241,.12)} .nav__drawer-links a{display:block;padding:16px 4px;color:#F8F6F1;text-decoration:none;font-family:var(--font-display);font-size:1.35rem} .nav__drawer-cta{display:flex;flex-direction:column;gap:12px;margin-top:8px} .nav__drawer-cta .btn{width:100%;justify-content:center} body.khr-nav-open{overflow:hidden} } .nav__drawer[hidden]{display:none} @media(max-width:767px){body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}} @media(max-width:640px){ .hero__inner,.inner-hero__inner{grid-template-columns:1fr!important;gap:32px!important;padding-left:20px!important;padding-right:20px!important;max-width:100vw!important;box-sizing:border-box} .hero__inner>*,.hero__left,.hero__right{max-width:100%!important;min-width:0!important;box-sizing:border-box} .hero__sub,.hero h1,.inner-hero h1,.inner-hero p{max-width:100%;overflow-wrap:break-word} .hero__meta{flex-wrap:wrap;gap:8px 16px} .hero,.inner-hero{padding-bottom:88px!important} } @media(max-width:900px){ .contact-grid,.split,.split__inner,.two-col,.room-detail-grid,.feature__grid{grid-template-columns:1fr!important;display:block!important} .contact-grid>*,.split>*{max-width:100%!important;box-sizing:border-box} } @media(max-width:768px){ .contact-form__row{grid-template-columns:1fr!important;display:block!important} .contact-form__row>*+*{margin-top:14px} .contact-field input,.contact-field textarea,.contact-field select,.contact-form input,.contact-form textarea,.contact-form select{width:100%!important;box-sizing:border-box} /* collapse ANY inline multi-col grid on phones (catches inline style= grids with no class) */ [style*="grid-template-columns"]{grid-template-columns:1fr!important} .packages,.case-studies,.clients-strip{grid-template-columns:1fr!important} /* long CTAs wrap instead of forcing horizontal overflow */ .btn{white-space:normal!important;max-width:100%;text-align:center} } img{max-width:100%;height:auto} /* ============ MOBILE FIXES v2 (2026-08-04) ============ */ @media (max-width: 1024px) { /* Drawer is appended to by chrome.js so it can cover the viewport */ .nav__drawer{ position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; max-height: none !important; width: 100% !important; z-index: 9998 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important; } .nav__toggle{ z-index: 9999 !important; position: relative; } #nav.nav{ z-index: 9997 !important; } } /* ---- ONE bottom bar only: keep #khr-wa-bar (Call · WhatsApp · Book) ---- */ #site-stickybar, .sticky-bar { display: none !important; } /* Click-to-Chat plugin: KEEP the floating bubble (this is what live shows - .ht-ctc-chat, 50x50, bottom-right). Hide only the plugin's own bottom call-to-action bar, so it cannot stack with our #khr-wa-bar. */ .ctc_cta_stick, .ht-ctc-cta, .ht-ctc-cta-hover, .ctc_s_bar { display: none !important; } /* our single bar sits above everything, with iOS safe area */ #khr-wa-bar{ z-index: 9990 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; } body.khr-nav-open #khr-wa-bar{ display: none !important; } /* hide bar while menu open */ /* ---- hero meta chips: readable, no cramping ---- */ @media (max-width: 640px) { .hero__meta{ display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; } .hero__meta-item{ font-size: .74rem; letter-spacing: .10em; white-space: nowrap; } } /* ---- Wide data tables must scroll inside themselves, never widen the page. Fixes corporate-hotel-in-kufri-shimla: table.data-table (513px) was pushing body.scrollWidth to 402px on a 360px Android viewport. -------- */ @media (max-width: 900px) { .data-table, .main-table-i { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .reveal, .reveal > * { max-width: 100%; min-width: 0; } .reveal { overflow-x: clip; } } /* ---- WordPress admin bar offset ----------------------------------------- .nav is position:fixed at top:0. For logged-in users the 32px admin bar sits on top of it and hides the nav row. Public visitors never see this, but editors reviewing the site do. ------------------------------------- */ body.admin-bar .nav { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .nav { top: 46px; } }