/* ================================================================
   home.css — Stretchtraveler booking-first home page styles
   All rules scoped to new home-page classes (st- prefix)
   No overrides to style.css or stretch.css
   ================================================================ */

/* ── Nav icon sizing ─────────────────────────────────────────── */
.nav-icon {
    font-size: 13px;
    margin-right: 4px;
    opacity: 0.85;
}

/* ── Hero section wrapper ────────────────────────────────────── */
.st-hero-section {
    position: relative;
}

/* ── Hero adjustments for World_Travel.jpg ───────────────────── */
.st-hero {
    padding-top: 160px;
    padding-bottom: 200px;
    background-position: center bottom !important;
}

.st-hero::before {
    background: rgba(10, 30, 70, 0.50) !important;
}

/* Hero title — smaller and higher */
.st-hero-title {
    font-size: 42px !important;
    line-height: 1.15;
    margin-bottom: 4px !important;
}

/* Hero subtitle — smaller, white */
.st-hero-subtitle {
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-top: -8px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .st-hero {
        padding-top: 100px;
        padding-bottom: 160px;
    }
    .st-hero-title {
        font-size: 32px !important;
    }
    .st-hero-subtitle {
        font-size: 14px !important;
    }
}

/* ── Home page search card — scalloped widget card overlapping hero ─
   Overrides .search-wrapper margin-top (-150px in style.css) to a
   smaller overlap since the home hero is shorter than the original
   template hero. All other search-wrapper/search-nav styles come
   from style.css unchanged.
────────────────────────────────────────────────────────────────── */
.st-hero-card-wrapper {
    position: relative;
    z-index: 5;
    margin-top: -28px;       /* just clips the hero bottom edge    */
}

.st-search-wrapper {
    margin-top: 0 !important; /* neutralise style.css -150px value  */
    margin-bottom: 50px;      /* breathing room before navy strip   */
}

/* Search Now button — inside search-nav so white container provides
   the stroke; sized to match the booking pill buttons exactly */
.st-search-now-btn {
    border-radius: 50px !important;
    padding: 6px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: inherit !important;
    white-space: nowrap;
    box-shadow: none !important;
}

/* Widget placeholder — keeps card height consistent while empty */
.st-widget-placeholder {
    min-height: 60px;
}

@media (max-width: 768px) {
    .st-hero-card-wrapper {
        margin-top: -14px;
    }
}

/* ── Section headers — consistent centered treatment ────────── */
.st-section-header {
    padding: 50px 0 10px;
}

.st-section-header .site-title {
    margin-top: 8px;
}

/* Tighter top padding — used where section above already has bottom space */
.st-section-header-tight {
    padding-top: 20px !important;
}

/* Tagline on dark/colored backgrounds — white text */
.st-tagline-light {
    color: rgba(255, 255, 255, 0.85) !important;
}

.st-tagline-light i {
    color: var(--theme-color) !important;
}

/* FAQ area — padding controlled internally */
.st-faq-area {
    padding-bottom: 80px;
}

/* ── Differentiator strip ────────────────────────────────────── */
.st-differentiator-strip {
    background: var(--color-dark);
    padding: 70px 0 60px;
    margin-top: 30px;
}

.st-differentiator-strip h3 {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
}

.st-differentiator-strip h3 span {
    color: var(--theme-color);
    font-style: italic;
}

.st-differentiator-strip p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.7;
    max-width: 560px;
}

.st-btn-outline {
    background: transparent !important;
    border: 2px solid var(--theme-color) !important;
    color: var(--theme-color) !important;
    box-shadow: none !important;
}

.st-btn-outline:hover {
    background: var(--theme-color) !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .st-differentiator-strip h3 {
        font-size: 24px;
    }
}

/* ── Testimonial heading — both tagline and h2 inside ts-bg ─── */
.st-testimonial-heading {
    margin-bottom: 30px !important;
    padding-top: 0 !important;
}

/* ── Stretch nudge strips ────────────────────────────────────── */
.st-nudge-strip {
    background: var(--theme-color-light);
    border-top: 2px solid var(--theme-color);
    border-bottom: 2px solid var(--theme-color);
}

.st-nudge-dark {
    background: var(--color-dark);
    border-color: var(--color-dark);
}

.st-nudge-text {
    font-size: 16px;
    color: var(--color-dark);
    font-weight: 500;
}

.st-nudge-text i {
    color: var(--theme-color);
    margin-right: 8px;
    font-size: 18px;
}

.st-nudge-dark .st-nudge-text {
    color: rgba(255, 255, 255, 0.9);
}

.st-nudge-dark .st-nudge-text i {
    color: var(--theme-color);
}

/* ── Blog card hover polish ──────────────────────────────────── */
.blog-item {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

/* ── Dropdown menu icon spacing ──────────────────────────────── */
.dropdown-item i {
    width: 18px;
    margin-right: 8px;
    color: var(--theme-color);
    font-size: 13px;
}

.dropdown-divider {
    margin: 6px 12px;
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── Utility spacing ─────────────────────────────────────────── */
.py-40  { padding-top: 40px;  padding-bottom: 40px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }
.pt-100 { padding-top: 100px; }
.pb-70  { padding-bottom: 70px; }

/* ── Stretchfinder breadcrumb hero — matches home page appearance ─
   Overrides the global .site-breadcrumb in style.css which is too
   tall (270px top + 150px bottom) and uses a heavy black overlay.
   Scoped to .st-stretch-hero so FAQ, blog etc. are unaffected.
────────────────────────────────────────────────────────────────── */
.st-stretch-hero.site-breadcrumb {
    padding-top: 160px;
    padding-bottom: 80px;
    background-position: center bottom !important;
}

.st-stretch-hero.site-breadcrumb::before {
    background: rgba(10, 30, 70, 0.50) !important; /* navy tint — matches home */
}

@media (max-width: 768px) {
    .st-stretch-hero.site-breadcrumb {
        padding-top: 100px;
        padding-bottom: 60px;
    }
}

/* Home page: lower booking search card and add space before next section */
.st-hero-section .search-area {
    margin-top: -50px;
    padding-bottom: 55px;
}

.st-hero-section .search-wrapper {
    margin-top: 0 !important;
}

/* Pull the navy section down slightly from the booking card */
.st-differentiator-strip {
    margin-top: 0;
}


/* ================================================================
   MOBILE FIXES — home page  (max-width: 991px / 575px)
   Every rule is either scoped to .st-hero-section or wrapped in a
   max-width media query, so the desktop/laptop layout (≥992px) is
   completely untouched.
   ================================================================ */


/* ── 1. NAVBAR — hamburger menu ──────────────────────────────────
   • style.css caps .navbar-collapse at 220px — too short for all items
   • Navbar is position:fixed on mobile so we must NOT change its height
     or z-index; we only fix the collapsed drawer that drops down
────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Collapsed drawer: scroll instead of clipping */
    .navbar-collapse {
        max-height: 70vh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
        padding: 8px 16px 16px !important;
    }

    /* Nav link rows — tighter so full list fits */
    .navbar .nav-item .nav-link {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        font-size: 15px !important;
    }

    /* Dropdown items inside hamburger */
    .navbar .dropdown-menu .dropdown-item {
        font-size: 14px !important;
        padding: 8px 16px !important;
    }

    /* No max-height clipping on the sub-dropdown */
    .navbar .dropdown-menu {
        max-height: none !important;
        overflow: visible !important;
    }
}


/* ── 2. HERO — fix .main negative margin that overlaps the navbar ─
   style.css: .main { margin-top: -10rem }  — designed for desktop
   where the full header+top-bar is tall. On mobile the top-bar is
   hidden (display:none at 991px) and the navbar is only ~56px, so
   -10rem pulls the hero title up behind the navbar logo.
   We reset it to just clear the fixed navbar height.
────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .main {
        margin-top: 0 !important;
    }
}


/* ── 3. HERO IMAGE — padding controls visible image height ───────
   .hero-single desktop: padding-top:300px padding-bottom:280px
   On phone we want the image clearly visible, title readable,
   and enough bottom padding so the booking card overlaps neatly.
────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .st-hero-section .hero-single,
    .st-hero-section .st-hero {
        padding-top: 100px !important;   /* clear fixed navbar (~56px) + gap */
        padding-bottom: 140px !important; /* tall enough for bg image to show */
    }
}

@media (max-width: 575px) {
    .st-hero-section .hero-single,
    .st-hero-section .st-hero {
        padding-top: 80px !important;
        padding-bottom: 120px !important;
    }

    /* Hero title */
    .st-hero-section .hero-title,
    .st-hero-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin: 4px 0 4px !important;
    }

    /* Hero subtitle */
    .st-hero-section .hero-single p,
    .st-hero-subtitle {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }
}


/* ── 4. BOOKING CARD — position below hero, not buried inside it ─
   Global: .search-wrapper { margin-top: -150px }
   home.css desktop: .st-hero-section .search-wrapper { margin-top:0 }
   On mobile both negative pulls must be cancelled and the search-area
   sits flush below the hero with just a small cosmetic overlap.
────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Kill global -150px pull-up on ALL pages (safe: already 0 on desktop
       home via the rule above; other pages use .search-common scoping) */
    .search-wrapper {
        margin-top: 0 !important;
    }

    /* Home page: gentle overlap so card clips hero bottom edge cleanly */
    .st-hero-section .search-area {
        margin-top: -36px !important;
        padding-bottom: 30px !important;
    }
    .st-hero-section .search-wrapper {
        margin-top: 0 !important;
    }

    /* ── Booking pill row (Flights / Hotels / Car Rental / Tours) ──
       style.css: display:inline-block — causes buttons to overflow on
       narrow screens and Tours to wrap to a random second line.
       Switch to flex so all 4 pills share one row and wrap evenly.  */
    .search-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        border-radius: 16px 16px 0 0 !important;
        margin-bottom: -20px !important;
        padding: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .search-nav .nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .search-nav .nav-item {
        margin: 3px !important;
        flex: 0 0 auto !important;
    }

    .search-nav .nav-link {
        font-size: 13px !important;
        padding: 6px 14px !important;
        white-space: nowrap !important;
    }

    /* Tab-content card padding — too large at 45px desktop */
    .search-wrapper .tab-content {
        padding: 28px 16px 20px !important;
        border-radius: 0 0 20px 20px !important;
    }
}

@media (max-width: 575px) {
    /* Phones: slightly more compact pills */
    .search-nav .nav-link {
        font-size: 12px !important;
        padding: 5px 11px !important;
    }

    .search-wrapper .tab-content {
        padding: 22px 12px 18px !important;
    }

    /* Search button — stop it floating; centre it */
    .search-form .search-btn {
        display: flex !important;
        justify-content: center !important;
        margin-top: 16px !important;
    }

    .search-form .search-btn .theme-btn,
    .st-search-now-btn {
        position: static !important;
        transform: none !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
        top: auto !important;
        width: auto !important;
        min-width: 140px !important;
    }
}


/* ── 5. SECTION HEADINGS — "What Makes Us Different", "Easy as 1,2,3" etc.
   .site-title is 40px desktop. On a 375px phone that's too large.
   .site-title-tagline (the teal badge above each heading) is fine at 16px.
────────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {

    .site-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-top: 6px !important;
    }

    .site-title-tagline {
        font-size: 13px !important;
        letter-spacing: 1.5px !important;
    }

    /* Differentiator navy strip */
    .st-differentiator-strip h3 {
        font-size: 22px !important;
    }
    .st-differentiator-strip p {
        font-size: 14px !important;
    }

    /* Nudge strip text */
    .st-nudge-text {
        font-size: 14px !important;
    }
}


/* ── 6. SECTION SPACING — reduce large py-100 / pt-100 on phones ─ */
@media (max-width: 575px) {

    .py-100 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
    .pt-100 {
        padding-top: 50px !important;
    }
    .pb-70 {
        padding-bottom: 36px !important;
    }
    .st-section-header {
        padding: 28px 0 6px !important;
    }
    .st-faq-area {
        padding-bottom: 50px !important;
    }
}


/* ── 7. VIDEO SECTION — mobile scaling ───────────────────────────
   Desktop: .video-content has border-radius:200px 0 0 200px (pill
   shape bleeding off the right edge) and .video-wrapper is a fixed
   400px tall. On mobile both collapse badly.
   The inline <video> element also has the large border-radius baked
   into a style attribute — we override it via CSS specificity here.

   EDGE CLIPPING:
   • Right edge: container-fluid has pe-0 (Bootstrap padding-end:0)
     at ALL breakpoints, so the video bleeds to the viewport edge on
     mobile. Fix: restore right padding on mobile only.
   • Bottom edge: video-content has no explicit height and relies on
     video-wrapper. overflow:hidden clips the bottom rounded corner.
     Fix: use overflow:visible + clip via border-radius only, and add
     a small bottom padding so the corner has room to render.

   MUTE BUTTON NOTES:
   • #stMuteBtn has display:none inline — JS shows it when playing.
     That's intentional; we must NOT override display here.
   • It is position:absolute with bottom:20px; left:20px inside
     .video-wrapper (position:relative). We keep that anchor intact
     and only override the play button's size — NOT the mute button.
   • We scope the size reduction to #stPlayBtn only so the mute
     button keeps its own 42×42px inline dimensions.
────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* ── Restore padding that pe-0 removes on the right side ─────
       pe-0 on container-fluid applies at all breakpoints, causing
       the video to bleed flush to the right viewport edge on mobile */
    .video-area .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;   /* restore the missing right gap */
    }

    /* Remove the desktop pill shape — standard rounded card on mobile.
       overflow:visible (not hidden) so bottom corners aren't clipped. */
    .video-content {
        border-radius: 20px !important;
        margin: 0 !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    /* Wrapper: position:relative so absolute children anchor to it.
       overflow:hidden here clips the video to rounded corners cleanly
       without clipping the mute button (which is inside the wrapper). */
    .video-wrapper {
        position: relative !important;
        height: 260px !important;
        overflow: hidden !important;
        border-radius: 20px !important;  /* clip video corners here instead */
    }

    /* The inline <video> border-radius — override the style attribute */
    #stDemoVideo {
        border-radius: 0 !important;     /* wrapper handles clipping now   */
    }

    /* Remove the ms-lg-auto desktop offset on the wrapper col */
    .video-area .col-lg-10 {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Ensure the inner row/col don't add unexpected overflow */
    .video-content .row,
    .video-content .col-lg-12 {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── Play button only — reduce to fit the shorter player ───── */
    #stPlayBtn {
        height: 60px !important;
        width: 60px !important;
        line-height: 60px !important;
        font-size: 18px !important;
    }

    /* ── Mute/speaker button — keep it visible inside the frame ──
       z-index above the video (z-index:99) so it's always tappable */
    #stMuteBtn {
        bottom: 16px !important;
        left: 16px !important;
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 13px !important;
        z-index: 200 !important;
    }
}

@media (max-width: 575px) {

    /* Slightly shorter on phones */
    .video-wrapper {
        height: 210px !important;
    }

    /* Tighten section vertical padding */
    .video-area.py-120 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* Text column body copy */
    .video-area .about-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Play button — a touch smaller on phones */
    #stPlayBtn {
        height: 52px !important;
        width: 52px !important;
        line-height: 52px !important;
        font-size: 16px !important;
    }

    /* Mute button — keep tucked in corner */
    #stMuteBtn {
        bottom: 12px !important;
        left: 12px !important;
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 12px !important;
    }
}