/* ==========================================================================
   Jnane Ayam Atlas — mobile & tablet responsive layer
   Loaded LAST, after style.css / coloring.css / colors/scheme-01.css.

   The Designesia theme ships a desktop-first stylesheet whose mobile rules
   stop short: the logo stays 250px wide, the nav is hidden by clipping an
   overflow:hidden header, and the fs-* / heading utilities are never scaled
   down. This file corrects those on small screens only. Desktop is untouched.
   ========================================================================== */

:root {
    --mobile-header-h: 64px;
}

/* ==========================================================================
   1. Base — no sideways scroll, no iOS text inflation
   ========================================================================== */

@media only screen and (max-width: 992px) {

    html {
        -webkit-text-size-adjust: 100%;
        /* fixed header must not cover in-page anchor targets */
        scroll-padding-top: calc(var(--mobile-header-h) + 10px);
    }

    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    img,
    video,
    iframe,
    table {
        max-width: 100%;
    }

    /* consistent side gutters everywhere.
       Note: do NOT set --bs-gutter-x on .row here — it would override
       Bootstrap's .g-0 helper and break the flush Instagram strip. */
    .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ==========================================================================
   2. Header — fixed compact bar
   The theme rendered a 131px tall header because #logo img was 208x117.
   ========================================================================== */

@media only screen and (max-width: 992px) {

    header,
    header.fixed,
    header.transparent,
    header.header-mobile,
    header.has-topbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: var(--mobile-header-h) !important;
        min-height: var(--mobile-header-h);
        margin: 0 !important;
        padding: 0 !important;
        background: var(--bg-dark-1) !important;   /* Ayam Atlas Dark Teal */
        /* must be visible so the slide-in menu panel is not clipped */
        overflow: visible !important;
        z-index: 1001;
    }

    header .container,
    header .container > .row,
    header .container > .row > [class^="col-"] {
        height: 100%;
    }

    header .de-flex {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 0 !important;
    }

    /* theme padding helper that pushed the bar down */
    header .sm-pt10 {
        padding-top: 0 !important;
    }

    header .de-flex-col {
        height: 100%;
        display: flex;
        align-items: center;
    }

    /* the middle column only holds the nav, which is now a fixed panel */
    header .header-col-mid {
        position: static;
        height: auto;
    }

    /* --- logo ------------------------------------------------------------ */

    #logo,
    #logo a {
        display: flex;
        align-items: center;
        height: 100%;
        line-height: 0;
    }

    #logo img.logo-main,
    #logo img.logo-scroll {
        display: none !important;
    }

    /* The Ayam Atlas standard lockup (mark over wordmark) has a tight
       1074x528 viewBox, so it is sized by height and never cropped or
       stretched. 50px is the tallest that clears the 64px bar. */
    #logo img.logo-mobile {
        display: block !important;
        width: auto !important;
        height: 50px !important;
        max-width: none;
        object-fit: contain;
    }

    /* --- right hand side: booking CTA + burger --------------------------- */

    .menu_side_area {
        margin-left: auto !important;
        margin-right: 0;
        width: auto !important;
        height: 100%;
        display: flex !important;
        align-items: center;
        gap: 4px;
        position: static;
        text-align: right;
    }

    /* keep the booking call-to-action reachable on phones — the theme hid it
       below 480px, which is exactly where a hotel needs it most */
    .menu_side_area .btn-main {
        display: inline-flex !important;
        align-items: center;
        margin: 0;
        padding: 9px 14px;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 1;
        white-space: nowrap;
    }

    #menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        float: none !important;
        position: static !important;
        width: 44px;
        height: 44px;
        margin: 0 -10px 0 4px;
        padding: 0;
        color: var(--brand-ivory);
    }

    #menu-btn:before {
        font-size: 21px;
        line-height: 1;
    }
}

@media only screen and (max-width: 360px) {

    #logo img.logo-mobile {
        width: auto !important;
        height: 44px !important;
    }

    .menu_side_area .btn-main {
        padding: 8px 10px;
        font-size: 10px;
    }
}

/* ==========================================================================
   3. Mobile navigation — full-height slide-in panel

   Previously #mainmenu sat at top:100px inside a 131px overflow:hidden
   header, so the first item ("Home") permanently leaked below the bar on
   every page. It is now a proper off-canvas panel.
   ========================================================================== */

@media only screen and (max-width: 992px) {

    nav {
        height: 0;
    }

    #mainmenu,
    header #mainmenu,
    header.header-mobile #mainmenu,
    .header-col-mid #mainmenu {
        position: fixed !important;
        top: var(--mobile-header-h) !important;
        left: 0 !important;
        right: 0;
        width: 100% !important;
        height: calc(100vh - var(--mobile-header-h)) !important;
        height: calc(100dvh - var(--mobile-header-h)) !important;
        margin: 0 !important;
        padding: 6px 20px 60px !important;
        background: var(--bg-dark-1);   /* Ayam Atlas Dark Teal */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 1000;

        transform: translateX(-100%);
        visibility: hidden;
        opacity: 0;
        transition: transform .32s cubic-bezier(.4, 0, .2, 1),
                    opacity .24s ease,
                    visibility .32s;
    }

    header.menu-open #mainmenu {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
    }

    #mainmenu > li {
        display: block;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(var(--brand-ivory-rgb), .1);
    }

    #mainmenu > li:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    #mainmenu a.menu-item {
        display: flex;
        align-items: center;
        min-height: 54px;
        padding: 0 !important;
        font-size: 15px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--brand-ivory);
        background: none !important;
    }

    #mainmenu a.menu-item:hover,
    #mainmenu a.menu-item.active {
        color: var(--brand-gold);
    }

    /* submenus stay inline inside the panel */
    #mainmenu li ul {
        position: static !important;
        width: 100%;
        border: none;
        background: none;
        box-shadow: none;
        padding-left: 14px;
    }

    #mainmenu li ul li a.menu-item {
        min-height: 46px;
        font-size: 13px;
        letter-spacing: 1px;
        opacity: .8;
    }

    /* stop the page behind the panel from scrolling */
    html:has(header.menu-open) {
        overflow: hidden;
    }
}

/* ==========================================================================
   4. Page titles (#subheader) — clear the fixed header, sane type size
   The theme used padding-top:100px under a 131px header, so every inner
   page had its <h1> sliced in half. It also left h1 at 60px on a 390px screen.
   ========================================================================== */

@media only screen and (max-width: 992px) {

    #subheader {
        padding-top: 118px !important;
        padding-bottom: 56px !important;
    }

    #subheader h1 {
        font-size: 34px !important;
        line-height: 1.15em;
        letter-spacing: -.5px;
    }

    #subheader .lead {
        font-size: 15px;
        line-height: 1.6em;
    }

    #subheader .crumb {
        font-size: 12px;
        margin-top: 14px;
    }
}

@media only screen and (max-width: 400px) {

    #subheader h1 {
        font-size: 29px !important;
    }
}

/* ==========================================================================
   5. Typography scale
   The theme only shrinks h1/h2 below 480px and never touches the fs-* utility
   classes this site leans on (fs-36 headings, fs-40 prices, fs-24 icons).
   ========================================================================== */

@media only screen and (max-width: 767px) {

    body {
        font-size: 15px;
        line-height: 1.65em;
    }

    p {
        font-size: 15px;
        line-height: 1.7em;
    }

    h1,
    h1.ultra-big,
    h1.ultra-big-2,
    .title-text {
        font-size: 34px !important;
        line-height: 1.15em !important;
        letter-spacing: -.5px !important;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.2em !important;
        letter-spacing: -.3px !important;
        margin-bottom: 14px;
    }

    h3 {
        font-size: 20px !important;
        line-height: 1.35em !important;
    }

    h4 {
        font-size: 17px !important;
        line-height: 1.4em !important;
    }

    .lead {
        font-size: 16px !important;
        line-height: 1.65em !important;
    }

    .subtitle {
        font-size: 11px !important;
        letter-spacing: 3px !important;
    }

    /* utility font sizes, clamped for small screens */
    .fs-500, .fs-450, .fs-400, .fs-350, .fs-300,
    .fs-250, .fs-200, .fs-150, .fs-120,
    .fs-96, .fs-84, .fs-72, .fs-64 {
        font-size: 40px !important;
        letter-spacing: -1px !important;
    }

    .fs-60, .fs-56, .fs-48 {
        font-size: 32px !important;
    }

    .fs-42, .fs-40, .fs-36 {
        font-size: 26px !important;
        line-height: 1.3em;
    }

    .fs-32, .fs-30, .fs-28 {
        font-size: 22px !important;
        line-height: 1.35em;
    }

    .fs-24 {
        font-size: 19px !important;
    }

    .fs-20 {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   6. Section rhythm — the theme's 90-130px vertical padding is too tall
      once the content is one column wide.
   ========================================================================== */

@media only screen and (max-width: 992px) {

    section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    section.no-top {
        padding-top: 0 !important;
    }

    section.no-bottom {
        padding-bottom: 0 !important;
    }

    .spacer-double {
        height: 40px;
    }

    .spacer-single {
        height: 20px;
    }

    /* decorative vertical rules crowd a narrow column */
    .lines-deco:before,
    .lines-deco:after {
        display: none;
    }
}

/* ==========================================================================
   7. Home page hero
   ========================================================================== */

@media only screen and (max-width: 767px) {

    .swiper-inner,
    .sw-caption {
        padding-left: 0;
        padding-right: 0;
    }

    h1.slider-title,
    h2.slider-title {
        font-size: 34px !important;
        line-height: 1.15em !important;
        letter-spacing: -.5px !important;
        margin-bottom: 16px !important;
    }

    .slider-teaser {
        font-size: 15px !important;
        line-height: 1.65em !important;
        /* the theme's col-lg-8 offset-lg-2 collapses to full width here */
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .d-stars i {
        font-size: 13px;
    }

    /* the circular decoration behind the hero copy overlaps the text */
    .box-slider-decor {
        display: none;
    }

    /* swiper arrows sit on top of the caption on narrow screens */
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}

/* ==========================================================================
   8. Grids — turn one-per-screen stacks into usable mobile layouts
   ========================================================================== */

@media only screen and (max-width: 991px) {

    /* --- gallery: ragged full-width images -> uniform 2-up tiles --------- */
    .col-lg-4:has(> a.image-popup) {
        flex: 0 0 auto;
        width: 50%;
    }

    a.image-popup img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    a.image-popup h4 {
        font-size: 14px !important;
    }

    /* --- about page team: 4 full-bleed portraits -> 2-up ----------------- */
    .col-lg-3:has(> img[src*="images/team"]) {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-3:has(> img[src*="images/team"]) img {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }
}

/* .card-img-square is deliberately left at its 1/1 ratio — it is shared by
   the room cards and the flush Instagram strip, and both read well square. */

@media only screen and (max-width: 991px) {

    /* Facilities page: image/text pairs sit in `row g-0`, so once the columns
       stack the heading lands flush against the bottom of the image. Give the
       wrapped rows a gap. Scoped to the centered variant so the deliberately
       flush Instagram strip (a plain `row g-0`) is not affected. */
    .row.g-0.align-items-center.justify-content-center {
        row-gap: 26px;
        margin-bottom: 46px;
    }

    .row.g-0.align-items-center.justify-content-center:last-child {
        margin-bottom: 0;
    }

}

/* ==========================================================================
   9. Carousels — arrows overlapping content
   ========================================================================== */

@media only screen and (max-width: 767px) {

    .owl-nav button.owl-prev,
    .owl-nav button.owl-next,
    .owl-theme .owl-nav [class*='owl-'] {
        width: 38px;
        height: 38px;
        opacity: .85;
    }

    .owl-nav button.owl-prev {
        left: 2px;
    }

    .owl-nav button.owl-next {
        right: 2px;
    }

    .owl-dots {
        margin-top: 18px;
    }
}

/* ==========================================================================
   10. Forms — 16px inputs (stops iOS auto-zoom), full-width actions
   ========================================================================== */

@media only screen and (max-width: 767px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
        min-height: 48px;
        width: 100%;
    }

    textarea,
    textarea.form-control {
        min-height: 130px;
    }

    input[type="submit"],
    button[type="submit"],
    #send_message,
    .btn-main.full-width {
        width: 100%;
        min-height: 50px;
    }

    /* Select2 room picker: the option label
       ("Deluxe Room | from 650 MAD/night | 2-3 Guests") ran off the box */
    .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    .select2-container .select2-selection--single {
        height: auto !important;
        min-height: 52px;
        display: flex;
        align-items: center;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        font-size: 13px !important;
        line-height: 1.4em !important;
        padding-right: 30px;
        white-space: normal;
        word-break: break-word;
    }

    .select2-container .select2-selection__rendered img {
        width: 34px;
        height: 34px;
        object-fit: cover;
    }

    .select2-dropdown {
        max-width: 100vw;
    }

    .select2-results__option {
        font-size: 13px;
        line-height: 1.4em;
        white-space: normal;
    }

    /* Guest / room steppers. Their value field is an input[type=text], so the
       full-width rule above would stack "- 1 +" onto three lines — keep the
       control on one row and give the +/- spans a real tap target. */
    .de-number {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding-bottom: 8px;
    }

    .de-number input[type="text"] {
        width: 48px !important;
        min-height: 40px;
        padding: 0;
        text-align: center;
        font-size: 16px !important;
    }

    .de-number .d-minus,
    .de-number .d-plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        flex: 0 0 auto;
        cursor: pointer;
        user-select: none;
    }
}

/* ==========================================================================
   11. Footer & misc tap targets
   ========================================================================== */

@media only screen and (max-width: 767px) {

    footer {
        padding-top: 56px;
        padding-bottom: 0;
    }

    footer .social-icons a,
    .social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .subfooter {
        text-align: center;
        font-size: 13px;
    }

    /* anything that is a link in body copy gets a comfortable target */
    .menu_side_area .btn-main,
    .btn-main,
    .btn-line {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   12. Shape-mask panels — all widths
   ==========================================================================
   The arch panels on facilities.html and the homepage welcome block are
   `.shape-mask-1 / .shape-mask-2` boxes with `padding-top: 100%`, i.e. square.
   jarallax renders the <img> inside them at 490x695 and pans it vertically,
   so `object-fit: cover` only ever shows a moving band of the source: the
   pool photo, for instance, drifts until nothing but the hillside above it is
   left in frame. The panels are ~350-490px, where the parallax drift is
   imperceptible but the mis-framing is not, so pin the image to fill its mask
   and let the crop in the file decide what is shown.

   This block is intentionally NOT inside a max-width query -- the framing is
   wrong at every viewport, not just small ones. */

.shape-mask-1 .jarallax-img,
.shape-mask-2 .jarallax-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: cover;
}

/* ==========================================================================
   13. Floating WhatsApp CTA — all widths
   ==========================================================================
   Sits next to the theme's #back-to-top as the second floating widget in
   #wrapper. A labelled pill from 993px up; a plain circle below that, where
   there is no room for the text.

   #back-to-top is fixed at right:20px / bottom:20px in style.css, i.e. the
   same corner, so it is lifted to stack above this button instead of under
   it. Like section 12 this block is intentionally not inside a max-width
   query. */

.wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1019;                      /* just under #back-to-top (1020) */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    padding: 0 18px;
    border-radius: 999px;
    background: #25d366;                /* WhatsApp brand green */
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    transition: transform .18s ease, background-color .18s ease,
                box-shadow .18s ease, opacity .2s ease, visibility .2s ease;
}

.wa-float i {
    font-size: 26px;
    line-height: 1;
}

.wa-float:hover,
.wa-float:focus-visible {
    background: #1da851;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

.wa-float:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* both widgets share the bottom-right corner, so stack them */
#back-to-top.show {
    bottom: 88px;
}

/* the off-canvas menu covers the page: the CTA must not float on top of it.
   A sibling combinator rather than :has() on the wrapper -- the CTA markup is
   placed directly after <header> so this stays a plain, reliably-invalidated
   selector. */
header.menu-open ~ .wa-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media only screen and (max-width: 992px) {

    .wa-float {
        width: 54px;
        padding: 0;
        justify-content: center;
    }

    .wa-float .wa-float-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .wa-float {
        transition: none;
    }

    .wa-float:hover,
    .wa-float:focus-visible {
        transform: none;
    }
}