/* ==========================================================================
   responsive.css — tablet + landscape compatibility layer
   --------------------------------------------------------------------------
   Loaded LAST (after style.css / site-fonts.css) in layouts/app.blade.php and
   layouts/customer.blade.php. Everything here is an override on top of the
   vendor theme; the theme files themselves are left untouched.

   Problems this fixes:
     1. 992–1366px (iPad landscape, iPad Pro landscape, iPad portrait): the
        desktop nav links + Sign In + Meet & Greet + Book Now no longer fit on
        one row, so the menu wrapped onto a second line inside the white pill.
     2. 430–1024px: the floating nav pill is positioned with a width-relative
        `margin-bottom: -6%`, so as the screen narrows it drifts up over the
        email/phone line in the green strip and clipped it.
     3. 768–991px: two theme rules disagree about the hero, sizing the headline
        at 12px and the sub-line at 90px — on iPad portrait the text block grew
        to ~810px inside a 650px banner and spilled out of both ends.
     4. Phone landscape (short viewport): the hero is a hard-coded 650/700px
        box, so on a 375–430px tall screen the headline + CTAs sat below the
        fold and the copy was far too large for the space.
     5. Modals (Book Now / Meet & Greet / Sign In) were taller than a landscape
        phone viewport with no way to scroll to the footer buttons.
     6. The slide-in mobile menu wasted vertical space on short screens.
     7. 576-767px (iPad mini split-view, ~686px windows): the theme puts -3px
        of tracking on a 20px hero sub-line, so the glyphs overlapped, and the
        stacked-phone CTA sizing (0 48px padding, width 80%) does not fit the
        three-across row that .flex-sm-row turns on at 576px.
     8. Exactly 768px (iPad portrait): one theme block uses `max-width: 768px`
        instead of 767px, so the phone rules fired alongside the tablet header —
        the banner was pulled up 80px and painted over the green strip, cutting
        the email/phone line in half.

   Breakpoint plan:
     >= 1200px            full desktop nav (unchanged)
     992–1199px           hamburger nav + compact Sign In / Meet & Greet / Book Now
     768–991px            hamburger nav + compact Sign In / Book Now
                          (Meet & Greet moves into the hamburger)
     < 768px              everything in the hamburger (unchanged)
     any width, landscape
     with height <= 600px short-screen layout (hero, modals, menu)

   NOTE: the 1199px nav breakpoint is mirrored in assets/js/main.js
   (mianMenu -> breakpointCheck). Keep the two in sync.
   ========================================================================== */


/* ==========================================================================
   1. Global guards against horizontal overflow
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* Bare `img` selector on purpose: any theme rule with a class beats it, so
   fixed-size gallery/thumb images keep their intended dimensions. */
img {
    max-width: 100%;
}


/* ==========================================================================
   2. Nav collapses to the hamburger up to 1199px
   --------------------------------------------------------------------------
   The theme only ever collapsed at 991px. main.js now adds `.breakpoint-on`
   up to 1199px, but Bootstrap's `.d-lg-flex` / `.d-lg-none` still switch at
   992px, so the 992–1199px band needs the rules below to behave like mobile.
   ========================================================================== */

@media (max-width: 1199px) {

    /* Beat `.d-lg-flex { display: flex !important }` (Bootstrap + the inline
       <style> block in app.blade.php) so the off-canvas panel renders. */
    header .nav-container.breakpoint-on .nav-menu {
        display: block !important;
        margin-top: 0 !important;
    }

    /* The `.mobile-account-section` groups stay hidden at 992–1199px on
       purpose: the header still shows Sign In / the user pill / Meet & Greet /
       Book Now there, so repeating them in the panel would be pure duplication.
       Below 992px Bootstrap's `.d-lg-none` reveals them as before. */

    /* Menu links are stacked, not inline, in the panel. */
    header .nav-container.breakpoint-on .nav-menu .menu-items > ul > li {
        display: block !important;
        margin: 0 !important;
        line-height: normal !important;
    }

    header .nav-container.breakpoint-on .nav-menu .menu-items > ul > li > a {
        padding: 0 20px !important;
        font-size: 15px !important;
    }

    /* Give the pill back its normal padding — the theme squeezes it to
       `padding: 0 10px` at 992–1199px to try to fit the (now hidden) links. */
    header.header-three .nav-container {
        padding: 10px 20px !important;
    }

    /* Right-hand buttons: tighter so logo + buttons + burger always fit. */
    header .nav-container .menu-right-buttons {
        gap: 8px !important;
    }

    header.header-three .nav-container .menu-right-buttons > div,
    header.header-three .nav-container .menu-right-buttons > a {
        margin-left: 0 !important;
    }

    /* Selectors are deliberately deep: both layouts carry an inline <style>
       block that sets these to 46px with !important, and it is parsed after
       this file — only higher specificity wins. */
    header .nav-container .menu-right-buttons .main-btn.btn-filled {
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 18px !important;
        font-size: 13px !important;
    }

    header .nav-container .menu-right-buttons .auth-sign-in-btn,
    header .nav-container .menu-right-buttons .auth-user-pill {
        height: 40px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
        gap: 6px !important;
    }

    /* The burger sits at the far right of the pill. */
    header .nav-container .navbar-toggler {
        margin-left: 4px;
    }
}

/* The floating pill is placed with `bottom: 60px` plus a `margin-bottom: -6%`
   that is relative to the viewport WIDTH, so as the screen narrows the pill
   creeps upward until it sits on top of the email/phone line in the green
   strip — measurably covering it from 1024px all the way down to 430px.
   Anchor the pill from the top instead so it clears the strip at every width.
   Below 400px the theme switches the bar to `position: relative`, where a
   `top` offset would just shove it down the page, so that range is excluded. */
@media (min-width: 400px) and (max-width: 1199px) {

    header.header-three .main-menu-area {
        top: 56px !important;
        bottom: auto !important;
        margin-bottom: 0 !important;
    }

    /* Re-assert the scrolled state: the rule above carries !important, which
       would otherwise beat `.sticky-active`'s plain `top: 12px`. */
    header.header-three .main-menu-area.sticky-header.sticky-active {
        top: 8px !important;
    }
}

/* 1200–1399px (iPad Pro 12.9" landscape is exactly 1366px wide, and 1366x768
   laptops are still common): the desktop row needed ~45px more than it had and
   wrapped onto a second line. Trim the logo and the link padding instead of
   collapsing a screen this wide into a hamburger. */
@media (min-width: 1200px) and (max-width: 1399px) {

    header .nav-container .site-logo img {
        max-width: 170px;
    }

    header .nav-container .menu-items ul li a {
        padding: 0 6px;
    }

    header.header-three .nav-container {
        padding: 10px 24px;
    }

    header .nav-container .menu-right-buttons .main-btn.btn-filled {
        padding: 0 22px !important;
    }
}

/* 768–991px: no room for three pills next to a 200px logo — Meet & Greet is
   already available inside the hamburger, so drop the duplicate. */
@media (min-width: 768px) and (max-width: 991px) {

    header .nav-container .menu-right-buttons .nav-mg-btn {
        display: none !important;
    }

    header .nav-container .site-logo img {
        max-width: 160px;
    }
}

/* Very narrow landscape phones (e.g. 667px wide): keep the logo small so the
   Book Now CTA and the burger never collide. */
@media (max-width: 767px) {

    header .nav-container .site-logo img {
        max-width: 150px;
    }
}


/* ==========================================================================
   2b. Hero typography on tablets
   --------------------------------------------------------------------------
   The theme sizes the hero by element rather than by role, and the two rules
   collide between 768px and 991px:
     `.banner-area .banner-content span.promo-tag` -> 12px   (the BIG line)
     `.banner-area.banner-style-two .banner-content h1` -> 90px (the SMALL line)
   so the headline and the sub-line swapped sizes and the 90px h1 grew the
   content box to ~810px inside a 650px banner — it spilled out both ends on
   iPad portrait. Restore the intended hierarchy.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .banner-area .banner-content span.promo-tag {
        font-size: 30px !important;
        line-height: 1.15 !important;
        padding-bottom: 16px !important;
    }

    /* Beats `.banner-area.banner-style-two .banner-content h1 { 90px }`. */
    .banner-area.banner-style-two .banner-content h1.title,
    .banner-area.banner-style-three .banner-content h1.title {
        font-size: 19px !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
    }
}

/* 992–1199px: the theme's -3px tracking crushes the sub-line together. */
@media (min-width: 992px) and (max-width: 1199px) {

    .banner-area .banner-content .title {
        letter-spacing: 0 !important;
        line-height: 1.35 !important;
    }
}


/* ==========================================================================
   2c. Hero on small tablets / large phones (576–767px)
   --------------------------------------------------------------------------
   This band (iPad mini split-view, 686px-wide windows, phone landscape on a
   tall device) was never covered by the rules above, and two theme rules break
   the hero in it:
     `.banner-area .banner-content .title` -> `letter-spacing: -3px` on a 20px
        font, which is -15% of the em — the glyphs physically overlap and the
        sub-line renders as "Lovingreliablepetcare&boarding...".
     `.btn-outline-light` -> `padding: 0 48px; letter-spacing: 2px;
        width: 80%` (the <=768px rule), which is sized for the stacked phone
        layout. At 576px and up `.flex-sm-row` puts all three CTAs on one row,
        so 96px of padding each no longer fits: the labels wrapped and
        "Meet & Greet" grew into a 124px-tall blob.
   ========================================================================== */

@media (min-width: 576px) and (max-width: 767px) {

    /* Beats `@media (min-width: 576px) and (max-width: 767px)` in style.css,
       which is the rule that applies the -3px tracking. */
    .banner-area .banner-content .title,
    .banner-area.banner-style-two .banner-content h1.title,
    .banner-area.banner-style-three .banner-content h1.title {
        font-size: 22px !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
        padding-bottom: 20px !important;
    }

    .banner-area .banner-content span.promo-tag {
        font-size: 30px !important;
        line-height: 1.15 !important;
        padding-bottom: 18px !important;
    }

    /* Three CTAs share ~516px of content width here, so each gets ~150px.
       `white-space: nowrap` keeps every label on one line; the trimmed padding
       and tracking are what make that fit. */
    .banner-area .banner-content .btn-outline-light {
        width: auto !important;
        padding: 0 20px !important;
        font-size: 12px !important;
        line-height: 44px !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
    }

    .banner-area .banner-content .gap-4 {
        gap: .75rem !important;
    }
}


/* ==========================================================================
   2d. The 768px off-by-one
   --------------------------------------------------------------------------
   style.css has one `@media (max-width: 768px)` block (the rest of the theme
   uses the Bootstrap-correct `max-width: 767px`), so at EXACTLY 768px — iPad
   mini / iPad portrait, the single most common tablet width — the phone rules
   fire on top of the tablet header:

     `.slick-slider { margin-top: -5rem }` pulls the banner up 80px to tuck it
        under the compact phone header. At 768px the header is NOT compact: the
        green strip is 115px tall and still shows the email/phone line. The
        banner starts at y=35 instead of y=115 and, carrying `z-index: 999`
        against the strip's auto, paints straight over it — slicing the contact
        line through the middle of the glyphs.
     `.btn-outline-light { width: 80% }` is the stacked-phone width. With two
        CTAs side by side it stretches each to 336px.

   Re-asserting the desktop values from `min-width: 768px` up is a no-op at 769px
   and above (the theme rule has already stopped applying there), so this
   corrects the single off-by-one pixel and touches nothing else.
   ========================================================================== */

@media (min-width: 768px) {

    .banner-area .slick-slider {
        margin-top: 0 !important;
    }

    .banner-area .banner-content .btn-outline-light {
        width: auto !important;
        line-height: 60px !important;
        font-size: 14px !important;
    }
}


/* ==========================================================================
   3. Short landscape viewports (phones held sideways)
   --------------------------------------------------------------------------
   Targets orientation: landscape with a viewport <= 600px tall, which is every
   phone in landscape and no iPad (iPad landscape is 744–1024px tall).
   ========================================================================== */

@media (orientation: landscape) and (max-height: 600px) {

    /* ---- Hero ------------------------------------------------------------
       Was a fixed 650px (700px + 15% top padding under 767px) box — roughly
       twice the viewport — so the headline and CTAs sat below the fold. The
       green header strip sits above the banner and the floating nav pill
       overlaps its top edge, so the height budget is `viewport - strip` and
       the top padding has to clear the pill. */
    .banner-area.banner-style-two .single-banner,
    .banner-area.banner-style-three .single-banner {
        height: auto !important;
        padding: 28px 0 !important;
        /* 92px is the pinned green strip below; the hero then takes the rest
           of the screen exactly once. */
        min-height: calc(100vh - 92px);
        min-height: calc(100svh - 92px);
    }

    .banner-area .banner-content span.promo-tag {
        font-size: 22px !important;
        line-height: 1.15 !important;
        padding-bottom: 10px !important;
    }

    .banner-area.banner-style-two .banner-content h1.title,
    .banner-area.banner-style-three .banner-content h1.title {
        font-size: 14px !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        padding-bottom: 14px !important;
    }

    /* `.btn-outline-light` hard-codes `line-height: 60px` (40px + `width: 80%`
       under 768px) with !important, which is what made the CTA row 100px tall
       and wrapped "Meet & Greet" onto two lines. */
    .banner-area .banner-content .btn-outline-light {
        line-height: 34px !important;
        padding: 0 16px !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
        width: auto !important;
        white-space: nowrap !important;
    }

    /* The CTA row uses `gap-4` (1.5rem) — too airy for a short screen. */
    .banner-area .banner-content .gap-4 {
        gap: .75rem !important;
    }

    /* ---- Header ----------------------------------------------------------
       The green strip sizes itself from the contact list, and the floating nav
       pill is placed with `bottom: 60px` plus a `-6%` (width-relative) margin —
       so on a short screen the pill lands on top of the email/phone line and
       clips it to fragments. Hide the covered strip content and pin the strip
       to a known height, which also gives the hero a single, width-independent
       number to subtract. */
    header.header-three .header-top .contact-list,
    header.header-three .header-top .sigma_social-links {
        display: none !important;
    }

    header.header-three .header-top {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 92px !important;
    }

    header.header-three .main-menu-area {
        top: 8px !important;
        bottom: auto !important;
        margin-bottom: 0 !important;
    }

    /* `header.header-three ...` (not `header ...`) — the theme's 576–767px rule
       is one class more specific and would otherwise keep the 200px logo. */
    header.header-three .nav-container .site-logo img {
        max-width: 140px !important;
    }

    /* Under 768px the theme pulls the slider up by -5rem to tuck it under the
       header on portrait phones. In landscape that drags the headline behind
       the floating nav pill. */
    .banner-area .slick-slider {
        margin-top: 0 !important;
    }

    header.header-three .main-menu-area.sticky-header.sticky-active {
        top: 0 !important;
    }

    header.header-three .main-menu-area.sticky-header.sticky-active .nav-container {
        border-radius: 0 !important;
        padding: 4px 16px !important;
    }

    header.header-three .main-menu-area.sticky-header.sticky-active .site-logo img {
        max-width: 140px;
    }

    /* ---- Slide-in menu ---------------------------------------------------
       ~12 rows at 45px each overflowed a 375px-tall screen; tighten the rows
       and the top padding so most of the menu is visible without scrolling
       (it still scrolls when it needs to). */
    header .nav-container.breakpoint-on .nav-menu {
        padding-top: 48px !important;
    }

    header .nav-container.breakpoint-on .nav-menu .menu-items > ul > li > a {
        line-height: 36px !important;
        font-size: 14px !important;
    }

    header .nav-container.breakpoint-on .nav-menu .mobile-account-section ul li a {
        line-height: 32px !important;
        font-size: 13px !important;
    }

    header .nav-container .navbar-close {
        top: 12px;
        right: 14px;
    }

    /* ---- Section rhythm --------------------------------------------------
       Cheap vertical wins so a section header + its content share a screen. */
    .section-title.mb-50 {
        margin-bottom: 24px !important;
    }
}


/* ==========================================================================
   4. Modals on short landscape viewports
   --------------------------------------------------------------------------
   Book Now / Meet & Greet / Sign In pin their bodies to 72–75vh, which leaves
   no room for the header + footer once the viewport is ~375px tall — the
   Continue / Submit buttons ended up unreachable. Turn each modal into a
   flex column that fits the screen and scrolls its body.
   ========================================================================== */

@media (orientation: landscape) and (max-height: 600px) {

    .modal {
        padding: 0 !important;
    }

    .modal .modal-dialog {
        margin: 8px auto !important;
        max-height: calc(100vh - 16px) !important;
    }

    .modal .modal-dialog.modal-dialog-centered {
        align-items: flex-start !important;
        min-height: calc(100vh - 16px) !important;
    }

    .modal .modal-content {
        max-height: calc(100vh - 16px) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .modal .modal-body {
        flex: 1 1 auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal .modal-header,
    .modal .modal-footer,
    .modal .bm-footer {
        flex-shrink: 0 !important;
    }

    /* Book Now wraps header/body/footer in a per-step div, so the flex column
       has to pass through that extra level. */
    #bookingModal #bk-step-1,
    #bookingModal #bk-step-2,
    #bookingModal #bk-step-3,
    #bookingModal #bk-step-4,
    #bookingModal #bk-step-5 {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    #bookingModal #bk-step-1.d-none,
    #bookingModal #bk-step-2.d-none,
    #bookingModal #bk-step-3.d-none,
    #bookingModal #bk-step-4.d-none,
    #bookingModal #bk-step-5.d-none {
        display: none !important;
    }

    /* iOS Safari zooms the page whenever a focused field is under 16px. */
    .modal .form-control,
    .modal .form-select {
        font-size: 16px !important;
    }
}


/* ==========================================================================
   5. Customer portal on tablets / short screens
   ========================================================================== */

@media (orientation: landscape) and (max-height: 600px) {

    .portal-wrap {
        min-height: 0 !important;
    }

    /* The sidebar sticks at `top: 100px`, an offset sized for the desktop
       header; on a short screen that wastes a quarter of the viewport. */
    .portal-wrap .portal-sidebar {
        top: 70px !important;
        max-height: calc(100vh - 70px) !important;
    }
}