/* =========================================================================
   MOBILE REPAIRS
   =========================================================================

   Loaded LAST, after unified.css, so every rule here is a deliberate
   correction of something in the theme underneath. Each block names what it is
   fixing and why, because a bare override file becomes unreadable within a
   month and then nobody dares touch it.

   The single largest cause of "the site is not responsive" was not in CSS at
   all: there was no viewport meta tag, so phones laid the page out at a virtual
   980px and scaled it down, and every `max-width: 500px` rule in responsive.css
   never fired. That is fixed in app/layout.tsx. What follows are the real
   layout faults that were hidden behind it.

   ========================================================================= */


/* -------------------------------------------------------------------------
   1. NOTHING MAY SCROLL SIDEWAYS

   There was no `overflow-x` guard anywhere on the public site, and no `html`
   selector at all. Any one of the faults below produced a real document-level
   horizontal scrollbar, which on a phone means the whole page slides.

   This is a safety net, not a licence: the individual causes are still fixed
   below, because hiding overflow without fixing it just moves content
   off-screen where nobody can reach it.
   ------------------------------------------------------------------------- */

html,
body {
  overflow-x: clip;          /* `clip` does not create a scroll container, so */
  max-width: 100%;           /* position:sticky inside the page still works.  */
}

/* Long words, URLs and unspaced property titles break instead of widening
   their container. unified.css guarded only article prose; cards, headings,
   the footer and the homepage had nothing. */
h1, h2, h3, h4, h5, h6, p, li, a, td, th, figcaption, blockquote, .prop .addr p {
  overflow-wrap: break-word;
}

/* Media can never be wider than its column. */
img, video, iframe, canvas, svg, table {
  max-width: 100%;
}


/* -------------------------------------------------------------------------
   2. THE HERO

   Three separate faults stacked the headline, the two call-to-action panels
   and the gradient on top of one another:

   a) `.video-btn-area` is a SIBLING of `.video-sec`, absolutely positioned at
      `bottom: 30px`, and it comes later in the DOM — so it paints above
      `.hh-hero-copy` no matter what z-index the copy has.
   b) `style.css:494` gives each of the two <li> `width: 100%`, i.e. 200% of
      the row, and they cannot shrink below 96px of padding + a 40px icon +
      40px of icon margin each.
   c) `.video-overlay` is `height: 100vh` with no mobile override, inside a
      350px clipped box — so the dark bottom of the gradient, the part that was
      supposed to sit behind the white text, is never visible.

   Below phone width the two panels stop being absolutely positioned and become
   ordinary stacked blocks underneath the hero, which is what they should have
   been all along.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {
  /* The scrim must match the box it sits in, not the window. */
  .video-overlay {
    height: 100%;
  }
}

@media (max-width: 900px) {
  .banner-wrapper {
    height: auto;
  }

  /* Out of the overlay, into the flow. Nothing left to collide with. */
  .video-btn-area {
    position: static;
    bottom: auto;
    width: 100%;
    background: var(--primary-color, #021032);
  }

  .video-btn-area .container ul {
    display: grid;              /* two 100%-wide flex children were the bug */
    grid-template-columns: 1fr;
    gap: 0;
  }

  .video-btn-area .container ul li {
    width: 100%;
    border-left: 0;             /* the dotted divider only reads horizontally */
  }

  .video-btn-area .container ul li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
  }

  .video-btn-area a {
    padding: 18px 20px;         /* was 1.5rem 3rem — 96px of horizontal padding */
    gap: 14px;
  }

  .video-btn-area span.title {
    font-size: 17px;            /* was a hard 24px uppercase */
    line-height: 1.3;
  }

  .video-btn-area a p {
    font-size: 12.5px;
  }

  .video-btn-area i.fa-solid.fa-arrow-right {
    margin-left: 0;             /* was 40px, on a 40px min-width icon */
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 34px;
    line-height: 32px;
    font-size: 15px;
  }

  /* The animated hairlines drew a diamond just past the right edge. */
  .animated-separator {
    display: none;
  }

  /* Vertical placement is handled once, for every width, in section 10. */
}

@media (max-width: 560px) {
  /* The inline minHeight:480 on the video fought a 350px box and lost, leaving
     the subject of the photo cropped out. Give it a height it can fill. */
  .video-sec,
  .video-sec video,
  .video-sec .js-hero-slide__inner,
  .book-overlay {
    height: 420px !important;
    min-height: 420px !important;
  }

  .hh-hero-copy h1 {
    font-size: 26px;
    line-height: 1.2;
  }

  .hh-hero-copy p {
    font-size: 14.5px;
  }
}


/* -------------------------------------------------------------------------
   3. THE SEARCH BAR ESCAPING ITS SECTION

   `.book-overlay` is `position: absolute; height: 350px; align-items: flex-end`
   but its parent `section.search-bar` has no height of its own — only 3rem of
   padding, about 96px. So the search card was laid out roughly 250px BELOW its
   own section, landing on top of the About section, and `z-index: 40`
   guaranteed it painted over the text there.

   Giving the section a real height is the fix; the overlay then has something
   to be 100% of.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {
  section.search-bar {
    padding: 0;
    position: relative;
    min-height: 0;
  }

  section.search-bar .book-overlay {
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    /* Was `display: flex` with `align-items: flex-end`. On a flex ROW,
       align-items stretches vertically, not horizontally — so the search card
       kept its content width and sat marooned at 199px inside a 768px band.
       A block container lets it take the width it is given. */
    display: block;
    padding: 22px 16px 28px;
    background: var(--primary-color, #021032);
  }

  /* Full width on a phone, centred and readable on a tablet. */
  section.search-bar .hh-sb__wrap {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
}


/* -------------------------------------------------------------------------
   4. THE 501–767px DEAD ZONE

   responsive.css has an EMPTY `@media (max-width: 767px)` block, and its main
   phone block stops at 500px. So a 600px-wide phone in landscape, or a small
   tablet, got the ≤991 desktop-ish layout and none of the ~840 lines of phone
   CSS. These are the rules that block should have contained.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Deliberately NOT a blanket `section` rule. The hero and the search bar set
     their own padding (and the hero carries Bootstrap's .p-0), so restyling
     every section fights them and reopens the gap this file exists to close. */
  section:not(.banner-wrapper):not(.search-bar):not(.p-0) {
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }

  section.featured-prop,
  section.featured-spaces {
    padding-left: 16px;
    padding-right: 16px;
  }

  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Two- and three-across grids become one column. */
  .featured-prop .col-lg-3,
  .featured-prop .col-md-4,
  .featured-prop .col-sm-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* The attraction mosaic is a fixed 5/7/8/4 column arrangement that only
     reads as a mosaic when it is wide. */
  section.featured-spaces .atr,
  section.featured-spaces .col-5.first.atr,
  section.featured-spaces .col-7.second.atr,
  section.featured-spaces .fifth,
  section.featured-spaces .sixth,
  section.featured-spaces .seventh,
  section.featured-spaces .eighth {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  section.featured-spaces .col-5.first.atr,
  section.featured-spaces a,
  section.featured-spaces .img-area,
  section.featured-spaces img,
  section.featured-spaces .fifth a,
  section.featured-spaces .fifth .img-area,
  section.featured-spaces .fifth img,
  section.featured-spaces .sixth a,
  section.featured-spaces .sixth .img-area,
  section.featured-spaces .sixth img,
  section.featured-spaces .seventh a,
  section.featured-spaces .seventh .img-area,
  section.featured-spaces .seventh img,
  section.featured-spaces .eighth a,
  section.featured-spaces .eighth .img-area,
  section.featured-spaces .eighth img {
    height: 240px;
  }
}


/* -------------------------------------------------------------------------
   5. HEADINGS THAT NEVER SHRANK

   Every size below is a hard px value with no override at any breakpoint, so
   it rendered at full desktop size on a phone. Made fluid rather than given
   another fixed number, so there is no next breakpoint to forget.
   ------------------------------------------------------------------------- */

.blog-headings h2        { font-size: clamp(26px, 5.2vw, 42px); line-height: 1.2; }
h1.blog-head             { font-size: clamp(24px, 5vw, 34px); line-height: 1.25; }
.blod-detail-description h1 { font-size: clamp(24px, 5vw, 34px); line-height: 1.25; }
.hh-sec-t                { font-size: clamp(24px, 4.6vw, 34px); }
.abt2-stat__n            { font-size: clamp(26px, 4.6vw, 34px); }
section.common-section-new h1 { font-size: clamp(25px, 5vw, 36px); line-height: 1.3; }


/* -------------------------------------------------------------------------
   6. FIXED WIDTHS AND OFF-SCREEN FURNITURE

   Each of these pushed the document wider than the screen.
   ------------------------------------------------------------------------- */

/* style.css:1167 — a hard 800px with no override anywhere. */
.signup .row.main {
  width: min(800px, 100%);
}

/* datepicker.css:1 — invisible (opacity:0) but still 425px and still absolutely
   positioned, so it still counted towards scroll width. */
input#demo17 {
  max-width: 100%;
}

/* style.css:2609 + responsive.css:911 — a 180px rotated button parked at
   right:-70px and switched ON below 500px. The markup no longer exists, but
   the rule is armed for any page that renders it. */
a.sticky.main-btn {
  right: 0;
  max-width: 100%;
}

/* CMS tables pasted by an admin had no width cap and no scroll container. */
@media (max-width: 767px) {
  section.common-section-new table,
  .cms-article .cms-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* -------------------------------------------------------------------------
   7. TAP TARGETS

   Buttons and nav links sized for a mouse are hard to hit with a thumb. 44px
   is the accessibility floor on both platforms.
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .main-btn,
  .btn,
  button,
  .mob-nav a,
  header .nav a {
    min-height: 44px;
  }

  .mob-nav img {
    width: min(190px, 52vw);   /* was a fixed 240px inside a 390px viewport */
    height: auto;
  }
}


/* -------------------------------------------------------------------------
   8. THE MOBILE HEADER AND THE OFF-CANVAS MENU

   Reported from a real phone, and every symptom traced to one of four faults
   measured in the browser rather than guessed at:

   a) THE LOGO IS SIZED BY WIDTH ALONE. `responsive.css` sets
      `.mob-nav img { width: 220px }`. That is fine for a wide wordmark and
      wrong for the round badge actually uploaded in Site Settings, which at
      220px wide is also ~220px TALL — so it covered the hero headline. A logo
      can be any shape, so it is capped by HEIGHT here; width follows.

   b) THE DRAWER HAD NO STACKING ORDER. `#tag1.menu-bar-in` carried no
      `z-index`, while `.hh-hero-copy` has `z-index: 3` and comes later in the
      DOM. The headline and its paragraph therefore painted straight through
      the open menu, on top of "Home" and "About Us". This is the "banner
      content upar dikh raha hai" fault.

   c) THE DRAWER WAS `position: absolute`, so it was anchored to the top of
      the document rather than to the screen. Opening it after scrolling left
      it somewhere above the viewport.

   d) `height: 100vh` WITH NO SCROLL. Nine links against a fixed height meant
      the last of them (FAQ and anything after it) were simply cut off with no
      way to reach them. `100dvh` also keeps it correct while a mobile browser
      shows and hides its address bar, which `100vh` does not.

   The open/closed state is now the `.is-open` class set in
   components/guest/Header.tsx, not an inline transform.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {

  /* (a) Height-capped, so a square, round or wide logo all behave. */
  .mob-nav img {
    width: auto;
    max-width: 62vw;
    max-height: 48px;
    object-fit: contain;
  }

  /* The flex row has to be on the CONTAINER, not on `.mob-nav`. `.mob-nav` is
     the <nav> and has exactly one flow child — the Bootstrap `.container` —
     so flex properties on it align nothing. Inside that container the logo
     <a> is `display: inline` and the burger wrapper is a block, so they
     STACKED: a 98px-tall bar with a logo on one line and the burger beneath
     it. The drawer and its backdrop are also children here but both are
     `position: fixed`, so they sit out of flow and never join the row. */
  .mob-nav > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .mob-nav > .container > a {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  /* The hamburger must stay reachable and obviously tappable. */
  .mob-nav .menu-toggle1 {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Inside the drawer there is room for a larger mark, but still capped. */
  #tag1 .mobile-menu-logo img {
    width: auto;
    max-width: 78%;
    max-height: 86px;
  }

  /* (b) continued — and this is the part that actually settles it.
     <header> is `position: absolute; z-index: 3`, so it is a stacking context:
     everything inside it, the drawer included, is painted as one unit at level
     3 of the page. `.hh-hero-copy` is also level 3 and comes later in the DOM,
     so it won — and no z-index on the drawer could ever have changed that,
     because the comparison never reached the page. Lifting the HEADER is what
     lifts the drawer. Only while the menu is open, so the header goes back to
     sitting under the page's own overlays as soon as it closes. */
  header.nav-open {
    z-index: 1200;
  }

  /* (b), (c), (d) — the drawer itself. */
  /* NOTE, and it matters for both boxes below: <header> carries a transform
     (an identity `matrix(1,0,0,1,0,0)`, but a transform all the same). ANY
     transform makes an element the containing block for its `position: fixed`
     descendants. So `inset: 0` in here does NOT mean the viewport — it means
     the 82px-tall header. Both boxes therefore state their size explicitly
     instead of stretching to edges that are not where they look. */
  #tag1.menu-bar-in {
    position: fixed;                 /* was absolute: anchored to the page */
    top: 0;
    left: 0;
    width: min(300px, 84vw);
    height: 100dvh;                  /* survives the address bar appearing */
    max-height: 100dvh;
    overflow-y: auto;                /* every link reachable, always */
    overscroll-behavior: contain;    /* scrolling the menu never scrolls the page */
    -webkit-overflow-scrolling: touch;
    z-index: 1200;                   /* above .hh-hero-copy (3) and .book-overlay (40) */
    transform: translateX(-105%);    /* was -38em, which is width-dependent */
    padding-bottom: 40px;
  }

  #tag1.menu-bar-in.is-open {
    transform: translateX(0);
  }

  /* Comfortable, thumb-sized rows rather than a dense desktop list. */
  #tag1 ul.main-menu-list-in {
    width: 100%;
    text-align: left;
  }

  #tag1 a.nav-link {
    display: block;
    padding: 13px 6px;
    margin-bottom: 0;
    font-size: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  #tag1 li.nav-item:last-child a.nav-link {
    border-bottom: 0;
  }

  /* The close button needs a real target, not just a 24px glyph. */
  #tag1 #close-menu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    right: .5rem;
    top: .5rem;
  }

  /* The backdrop. Tapping it closes the menu — the first thing anyone tries. */
  .mob-nav__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;                    /* NOT `inset: 0` — see the note above */
    height: 100dvh;
    z-index: 1100;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }

  .mob-nav__backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }
}

/* The backdrop belongs to the phone header only; it must never appear over
   the desktop layout if the state is somehow left set. */
@media (min-width: 992px) {
  .mob-nav__backdrop { display: none; }
}


/* -------------------------------------------------------------------------
   9. STICKY HEADER

   The theme half-built this and stopped: style.css already carries a
   `header.scrolleed` rule (the typo is theirs) with a black background, but
   nothing ever added that class, and `header` is `position: absolute` — so
   even with the class it would have scrolled away with the page. This
   finishes the job.

   Why `fixed` and not `sticky`: `position: sticky` needs the element to be in
   normal flow, and this header is deliberately out of flow so it can float
   over the hero. Every page on this site opens with a full-bleed banner —
   `.banner-wrapper` on the homepage, `section.breadcrumb` (250px) everywhere
   else — so the header has always overlapped its first section by design.
   `fixed` keeps that exact look and costs no layout change: no spacer, no
   padding on any page, nothing to keep in step if a banner height changes.

   Two states:
     at rest  — transparent, the hero shows through, as before
     stuck    — brand navy with a shadow, and a little shorter, so it reads as
                a bar over the content rather than a panel stuck to the top
   ------------------------------------------------------------------------- */

header {
  position: fixed;

  /* Was 3, which put it under `.book-overlay` (40) — the search card would
     have slid over the top of a scrolling header. Modals sit at 1050+ and are
     unaffected, and the open mobile drawer takes 1200 (section 8). */
  z-index: 900;

  transition: background-color .28s ease, box-shadow .28s ease;
  will-change: background-color;
}

header.is-stuck {
  background-color: var(--primary-color, #021032);
  box-shadow: 0 6px 24px rgba(2, 16, 50, .32);
}

/* Slightly tighter once it is a bar rather than part of the hero. The
   !important is not a flourish: style.css sets `header .second-row { padding:
   10px 30px !important }`, so nothing without it can win. */
header.is-stuck .second-row {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

header.is-stuck .mob-nav {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* The resting cap is what makes the shrink ANIMATE. `max-height` cannot
   transition to or from `none`, so without a number here the logo would snap
   between sizes in one direction and glide in the other. 150px also happens to
   be a sane ceiling for a desktop header: the logo is admin-uploaded, and
   without it a 900px image would produce a 900px-tall header. */
header .second-row .logo img {
  max-height: 150px;
  width: auto;
  transition: max-height .28s ease;
}

header.is-stuck .second-row .logo img,
header.is-stuck .mob-nav img {
  max-height: 40px;
  width: auto;
  transition: max-height .28s ease;
}

/* An in-page anchor must not land underneath the bar. */
html {
  scroll-padding-top: 96px;
}

@media (max-width: 991px) {
  html { scroll-padding-top: 76px; }
}

/* Someone who has asked their system to reduce motion gets the states without
   the cross-fade. */
@media (prefers-reduced-motion: reduce) {
  header,
  header.is-stuck .second-row .logo img,
  header.is-stuck .mob-nav img {
    transition: none;
  }
}


/* -------------------------------------------------------------------------
   10. THE HERO HEADLINE MUST CLEAR THE HEADER

   Reported as "logo banner me ghus raha hai" on a desktop, and it is real:
   at 1280x600 the headline overlapped the header by 20px, at 1366x660 they
   touched. Two things had to be true at once for it to show, which is why a
   width sweep never caught it — the fault is driven by viewport HEIGHT:

     .hh-hero-copy was `top: 42%` of the hero with `translateY(-50%)`, so on a
     short window 42% is a small number and the copy climbs toward the top of
     the page — straight into a 170px-tall header.

   A short window is not unusual, it is the norm: a 1920x1080 laptop at the
   Windows 150% display scaling most of them ship with reports a CSS viewport
   of roughly 1280x600, and browser chrome takes a further slice.

   Fixed in two ways, because either alone would leave a case uncovered:

   a) The desktop logo is capped at 96px, taking the header from 170px to
      ~116px. `.logo img { width: 150px }` sized by WIDTH, so a round badge
      was 150px tall as well — the same shape assumption that made the phone
      logo swallow the headline.

   b) The copy now fills the hero and centres itself INSIDE padding that
      reserves the header at the top and the two call-to-action panels at the
      bottom. Percentages cannot express "below the header"; padding can, and
      it stays correct at any window height without a media query per device.
   ------------------------------------------------------------------------- */

@media (min-width: 992px) {
  header .second-row .logo img {
    max-height: 96px;
  }
}

.banner-wrapper .hh-hero-copy {
  /* Fill the hero instead of being pinned to a percentage of it. */
  top: 0;
  bottom: 0;
  transform: none;

  display: flex;
  flex-direction: column;
  justify-content: center;

  /* top: clears the header. bottom: clears .video-btn-area, which is
     absolutely positioned over the foot of the hero at these widths. */
  padding: 136px 20px 210px;
}

@media (max-width: 991px) {
  /* The compact mobile bar replaces the desktop one here — 68px, not 116px. */
  .banner-wrapper .hh-hero-copy {
    padding: 92px 22px 190px;
  }
}

@media (max-width: 900px) {
  /* Section 2 moves .video-btn-area out of the overlay and into normal flow
     below the hero, so there is nothing left at the bottom to reserve for. */
  .banner-wrapper .hh-hero-copy {
    padding: 88px 22px 30px;
  }
}

@media (max-width: 560px) {
  .banner-wrapper .hh-hero-copy {
    padding: 80px 18px 24px;
  }
}