/* ----------------------------------------------------------------
   page.css — layout overrides specific to the Windchants Nova
   landing page. Keeps index.php free of inline <style> blocks.
-----------------------------------------------------------------*/

body {
    margin: 0;
    padding: 0;
}

/* == Hero banner ==============================================
   .banner is the <img> itself, not a wrapper, so these apply to it
   directly. Height and cropping come from custom.css.
============================================================= */
.banner {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* == Floating side tabs (Brochure / Enquire Now) ==============
   custom.css gives both tabs "min-height: 132px", so the short
   "Brochure" label floats in a lot of empty space while the longer
   "Enquire Now" nearly fills its tab — the two read as having
   different padding. Drop the fixed length and let each tab hug its
   own label, so the gap at both ends of the text is identical.

   The tabs use writing-mode: vertical-rl, but padding stays physical:
   top/bottom is the space at the ends of the text, left/right is the
   tab's thickness. */
.project_page .fixed_button .portal_button_fixed,
.project_page .fixed_button .portal_button_fixed:hover,
.project_page .fixed_button .portal_button_fixed:focus,
.project_page .fixed_button .portal_button_fixed:active {
    /* Labels read bottom-to-top, the usual orientation for a tab docked
       to the right edge. "sideways-lr" would do this with no transform,
       but only Firefox supports it, so the vertical-rl box is rotated.
       Declared on every state so hover/focus can never flip it. */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);

    /* The 180deg rotation swaps opposite corners, so these values are
       written mirrored: they render as rounding on the tab's left
       (page-facing) edge. */
    border-radius: 0 10px 10px 0;

    /* width:auto lets the horizontal padding set the tab's thickness
       (the theme's fixed 42px made it ignore padding), and min-height:0
       drops the theme's 132px so each tab hugs its own label — the short
       "Brochure" no longer floats in extra space. */
    width: auto;
    min-height: 0;
    padding: 22px 13px;
    text-decoration: none;
}

.floating_cta_actions {
    display: contents;
}

@media only screen and (max-width: 767px) {
    .project_page .fixed_button.floating_cta_stack {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100vw;
        right: 50%;
        bottom: 0;
        transform: translateX(50%);
        margin: 0;
        gap: 0;
        border: 1px solid #aa8453;
        background: #fff;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .18);
    }

    .floating_cta_actions {
        display: flex;
        width: 100%;
        height: 48px;
        flex-direction: row-reverse;
    }

    .project_page .fixed_button.floating_cta_stack .portal_button_fixed {
        flex: 0 0 50%;
        width: 50%;
        min-height: 0;
        height: 48px;
        padding: 0 4px;
        border: 0;
        border-radius: 0;
        background: #aa8453;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .4px;
        line-height: 47px;
        text-align: center;
        white-space: nowrap;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .project_page .fixed_button.floating_cta_stack .portal_button_fixed span {
        display: block;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        writing-mode: horizontal-tb;
        transform: none;
        visibility: visible;
        opacity: 1;
    }

    .project_page .fixed_button .portal_button_fixed + .portal_button_fixed {
        border-left: 1px solid rgba(255, 255, 255, .9);
    }
}

/* == Floating click-to-call button ============================ */
.phone {
    position: fixed;
    width: 55px;
    height: 55px;
    bottom: 18px;
    right: 20px;
    background-color: #aa8453;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 28px;
    line-height: 46px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.phone img {
    display: block;
    padding: 12px;
}


/* == intl-tel-input: fill the enquiry form's field width ====== */
.iti {
    display: block;
    width: 100%;
}

.iti input {
    width: 100%;
}


/* == Header section navigation ================================
   7 in-page links plus the CTA share the container, so they sit
   tighter than the site-wide menu's shorter label set.
============================================================= */
.project_page .menu ul.level1 > li > .section-link {
    padding: 32px 11px;
    letter-spacing: 1.5px;
    margin: 0;
}

.project_page .menu ul.level1 > li > .section-link.active,
.project_page .nav-scroll .menu ul.level1 > li > .section-link.active {
    color: #aa8453;
    font-weight: 600;
}

.project_page .navbar .butn-light.other_button {
    margin-top: 0;
    margin-bottom: 0;
}

@media only screen and (max-width: 1199px) {
    .project_page .menu ul.level1 > li > .section-link {
        padding: 32px 7px;
        font-size: 14px;
        letter-spacing: 1px;
    }
}

/* Off-canvas drawer: back to the theme's stacked link layout */
@media only screen and (max-width: 992px) {
    .project_page .menu ul.level1 > li > .section-link {
        padding: 12px 28px;
        font-size: 15px;
        letter-spacing: 2px;
    }

    .project_page .navbar .butn-light.other_button {
        margin: 20px 28px;
    }
}

/* == Fixed header =============================================
   style.css pins .nav-scroll to the viewport, but a
   ".project_page .nav-scroll { position: absolute }" rule undoes
   that for project pages, so the bar scrolled away with the page.
   Re-pin it here: transparent over the banner, then a white fixed
   bar once custom.js adds .nav-scroll past 100px of scroll.
============================================================= */
.project_page .navbar.nav-scroll {
    position: fixed;
    top: 0;
    -webkit-transform: none;
    transform: none;
}

/* == intl-tel-input: detached country dropdown ================
   The plugin only styles the country list when it renders inline.
   This form uses dropdownContainer: document.body (an inline list
   gets clipped by the enquiry popup), so the detached
   .iti--container needs the same border, shadow and height cap —
   without them the list runs the full length of the page.
============================================================= */
.iti--container:not(.iti--fullscreen-popup) .iti__dropdown-content {
    border: 1px solid var(--iti-border-color, #ccc);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}

/* The list is appended to <body>, so it inherits the site's 15px/1.75
   type. That made every row ~60px tall; reset it to the plugin's own
   compact scale. */
.iti--container .iti__search-input,
.iti--container .iti__country {
    font-size: 14px;
    line-height: 1.4;
}

.iti--container .iti__search-input {
    padding: 9px 12px;
}

.iti--container .iti__country {
    padding: 7px 12px;
}

.iti--container:not(.iti--fullscreen-popup) .iti__country-list {
    max-height: 190px;
}

/* Sit above the enquiry popup (z-index: 999) */
.iti--container {
    z-index: 1060;
}

/* Phones: shorter list so the field stays visible above it */
@media only screen and (max-width: 575px) {
    .iti--container:not(.iti--fullscreen-popup) .iti__country-list {
        max-height: 160px;
    }
}

/* == Enquiry popup: centred but always scrollable =============
   .popup_module_in centres the form in a 100%-height flex box
   with no overflow, so on a short viewport the lower half of the
   form was unreachable. Keep the centring and add scrolling;
   "margin: auto" on the card keeps its top reachable when the
   form is taller than the screen (flex centring alone clips it).
============================================================= */
.popup_module .popup_module_in {
    overflow-y: auto;
    padding: 20px 0;
}

.popup_module .popup_container {
    margin: auto;
}

@media only screen and (max-width: 575px) {
    .popup_module .popup_container {
        padding: 24px 18px;
    }
}

/* == Enquiry popup: OTP verification step =====================
   Step 2 of the popup. Hidden until the enquiry is accepted and
   an OTP has been sent (see assets/js/main.js).
============================================================= */
.otp_step {
    display: none;
}

.otp_intro {
    text-align: center;
    font-size: 14px;
    margin: 0 0 18px;
}

.otp_inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

.otp_inputs .otp_digit {
    width: 52px;
    height: 56px;
    padding: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #222;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius: 3px;
}

.otp_inputs .otp_digit:focus {
    outline: 0;
    border-color: #aa8453;
    box-shadow: 0 0 0 2px rgba(170, 132, 83, 0.15);
}

.otp_inputs .otp_digit.has_error {
    border-color: #d33;
}

.otp_resend {
    font-size: 14px;
}

.otp_resend a {
    color: #aa8453;
    text-decoration: underline;
}

/* Hidden while the countdown is running */
.otp_resend a.is_disabled {
    display: none;
}

#otp_verify_button:disabled {
    cursor: wait;
    opacity: 0.7;
}

#enquiry_submit_button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.otp_back {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    text-decoration: underline;
}

/* Fallback shown when the browser blocks the brochure pop-up that
   opens after OTP verification (see openCtaDownload in main.js). */
.cta_download_link {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

@media only screen and (max-width: 575px) {
    .otp_inputs .otp_digit {
        width: 46px;
        height: 50px;
        font-size: 20px;
    }
}

/* == Sticky enquiry bar =========================================
   A row docked to the bottom of the viewport, reachable without
   opening the full popup. Desktop/tablet only: every field inline,
   no close button, so it stays available for the whole visit.
   Below 768px the bar is hidden altogether — there is no room for
   the field row, and enquiry is already reachable from the side
   tab, the header drawer, the download CTAs and the timed popup.
============================================================= */
.sticky-enquiry {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: #f8f5f0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
    padding: 12px 20px;
}

.sticky-enquiry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1140px;
    margin: 0 auto;
}

.sticky-enquiry-row .form-control {
    flex: 1 1 150px;
    min-width: 0;
    height: 42px;
    border: 1px solid #c6c5c5;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    padding: 0 12px;
    margin: 0;
}

.sticky-mobile-wrap {
    flex: 1 1 170px;
    min-width: 0;
}

/* intlTelInput wraps the input in .iti, which defaults to inline-block —
   force it to fill the flex item so the bordered .form-control input
   (styled by the rule above) still spans the whole slot. */
.sticky-mobile-wrap .iti {
    display: block;
    width: 100%;
}

.sticky-enquiry-submit {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Consent now sits inline between the mobile field and the button, so it
   takes its own flex slot and wraps to two or three lines instead of
   pushing the row wider. */
.sticky-enquiry-check {
    flex: 1 1 260px;
    min-width: 190px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: #6b6b6b;
}

/* Bootstrap styles .form-check-input for a padded .form-check block
   ("float: left; margin-left: -1.5em", plus custom.css's own negative
   margin), which inside this flex row pulled the box out from under
   the pointer. Only the float and margins are reset here.

   position stays "relative": custom.css draws the tick as an absolutely
   positioned :before on the input, so making the input static sent the
   tick off to some other ancestor and the box looked unchecked however
   often it was clicked. Width/height are left to custom.css too — the
   tick's geometry is measured against its 18px box. */
.sticky-enquiry-check .form-check-input {
    flex: 0 0 auto;
    float: none;
    position: relative;
    /* zeroes Bootstrap's -1.5em pull; the row's gap handles the spacing */
    margin: 1px 0 0;
    cursor: pointer;
}

.sticky-enquiry-check .form-check-label {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    color: #6b6b6b;
    cursor: pointer;
}

.sticky-enquiry-check a {
    color: #aa8453;
    text-decoration: underline;
}

/* Full-width line under the row; :empty keeps it from reserving space
   while there is no message to show. */
.sticky-enquiry-error {
    display: block;
    max-width: 1140px;
    margin: 6px auto 0;
    color: #d33;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
}

.sticky-enquiry-error:empty {
    display: none;
}

/* The field the validation stopped on */
.sticky-enquiry-row .form-control.has_error {
    border-color: #d33;
    box-shadow: 0 0 0 2px rgba(221, 51, 51, .12);
}

/* Tablets: the five slots no longer fit on one line, so wrap and let the
   consent take a full line of its own under the fields. */
@media (max-width: 991px) {
    .sticky-enquiry-row {
        flex-wrap: wrap;
    }

    .sticky-enquiry-row .form-control,
    .sticky-mobile-wrap {
        flex: 1 1 45%;
    }

    .sticky-enquiry-check {
        flex: 1 1 100%;
        order: 1;
    }

    .sticky-enquiry-submit {
        flex: 0 0 auto;
        order: 2;
        margin-left: auto;
    }
}

/* Phones: no bar at all. main.js reports its height as 0 while it is
   display:none, so the body padding and the floating call button's
   offset collapse along with it. */
@media (max-width: 767px) {
    .sticky-enquiry {
        display: none;
    }
}

/* == Hero banner: show the artwork whole =======================
   index.php serves two different crops: 1920x1080 (16:9) above
   767px and 600x900 (2:3) below it.

   custom.css sizes the banner with "height: min(100svh, 56.25vw)"
   plus object-fit:cover. Whenever 100svh is the smaller of the two
   — any normal laptop, e.g. 1536x730 where 56.25vw is 864px — the
   image is cropped vertically. Both files carry copy baked into
   their top and bottom edges (the RERA line at the top, the legal
   strip along the bottom), so that crop cuts the text off.

   Rendering at natural aspect instead means no crop at any width,
   and each source keeps its own ratio without a per-breakpoint
   height. The banner can then run past the fold on very wide
   screens, which is what a full-bleed poster hero is meant to do.
============================================================= */
.project_page .header.element .banner {
    width: 100%;
    height: auto;
    max-height: none;
}

/* == Mobile navigation drawer ==================================
   responsive.css docks .menu off-canvas below 992px. Three gaps
   are filled in here.
============================================================= */

/* 1. A backdrop, so the drawer reads as a layer over the page and
      tapping beside it closes the menu (see assets/js/other-custom.js). */
.menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
    /* under .menu / .navbar (z-index 999) but over the page */
    z-index: 898;
}

.menu-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

/* 2. Freeze the page behind the open drawer, so scrolling moves the
      menu rather than the content underneath it. */
body.menu-open {
    overflow: hidden;
}

@media only screen and (min-width: 993px) {
    /* Desktop has no drawer — never let a stale class lock the page. */
    .menu-backdrop {
        display: none;
    }

    body.menu-open {
        overflow: visible;
    }
}

@media only screen and (max-width: 992px) {
    /* 3. calc(100vh - 90px) overflows on phones, where 100vh counts the
          address bar that is not actually on screen — the last menu item
          ends up under the browser chrome. dvh tracks the visible area;
          the vh line stays as the fallback for older browsers. */
    .menu {
        height: calc(100vh - 90px);
        height: calc(100dvh - 90px);
        /* iOS momentum scrolling inside the drawer */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 20px;
    }

    /* The drawer sits above its own backdrop */
    .menu.open {
        z-index: 899;
    }
}

/* == Mobile drawer: stack the nav links =======================
   custom.css lays the header nav out as a single nowrap flex row:

       .menu ul.level1 { display: flex; flex-wrap: nowrap; white-space: nowrap }

   responsive.css tries to undo that for the drawer with
   ".menu ul { display: block }", but that selector is weaker
   (0,0,1,1 vs 0,0,2,1), so the flex row won regardless of order.
   Inside the 300px drawer the eight items stayed on one line and
   everything past "Walkthrough" overflowed out of sight.
============================================================= */
@media only screen and (max-width: 992px) {
    .project_page .menu ul.level1 {
        display: block;
        white-space: normal;
        width: 100%;
    }

    .project_page .menu ul.level1 > li {
        display: block;
        width: 100%;
    }

    /* The CTA is the last item; give it room away from the links */
    .project_page .menu ul.level1 > li > .butn-light.other_button {
        display: block;
    }
}

/* == Space for the fixed enquiry bar ===========================
   .sticky-enquiry is position:fixed, so it covers the bottom of the
   page instead of taking space in the flow: the end of the footer
   stayed hidden behind it however far you scrolled, and the
   floating call button sat underneath it (z-index 100 vs 900).
   --sticky-bar-h is measured and published by assets/js/main.js;
   the 0px fallback keeps the layout sane before that runs.
============================================================= */
body {
    padding-bottom: var(--sticky-bar-h, 0px);
}

/* Lift the call button clear of the bar */
.phone {
    bottom: calc(var(--sticky-bar-h, 0px) + 18px);
}

/* Keep the side tabs centred on desktop. */
.fixed_button {
    margin-top: calc(var(--sticky-bar-h, 0px) / -2);
}

/* Dock the side tabs at the bottom on mobile. */
@media only screen and (max-width: 767px) {
    .fixed_button {
        top: auto;
        right: 50%;
        bottom: var(--sticky-bar-h, 0px);
        transform: translateX(50%);
        flex-direction: row-reverse;
        margin-top: 0;
    }

    .project_page .fixed_button .portal_button_fixed,
    .project_page .fixed_button .portal_button_fixed:hover,
    .project_page .fixed_button .portal_button_fixed:focus,
    .project_page .fixed_button .portal_button_fixed:active {
        writing-mode: horizontal-tb;
        transform: none;
        border-radius: 10px;
        white-space: nowrap;
    }
}

/* == Mobile drawer: no horizontal overflow =====================
   responsive.css parks the closed drawer at "right: -340px", i.e.
   340px past the right edge of the viewport. body has
   "overflow-x: hidden", but that does not clip position:fixed
   children — they are laid out against the viewport, not the body —
   so on phones the page could still be panned sideways to the empty
   strip while scrolling.

   Keeping it at right:0 and sliding it out with a transform gives
   the same animation without ever occupying space outside the
   viewport (transformed fixed elements do not extend the scroll
   area), and it animates on the compositor instead of on "right".
============================================================= */
@media only screen and (max-width: 992px) {
    .menu {
        right: 0;
        transform: translateX(110%);
        transition: transform .4s ease;
        will-change: transform;
    }

    .menu.open {
        right: 0;
        transform: translateX(0);
    }
}