/* ==========================================================================
   Mountain Delights – site-wide interaction polish (loaded after style.css)
   Motion is subtle and respects prefers-reduced-motion.
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mdnav-h, 84px) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* keyboard focus is visible everywhere, mouse focus stays quiet */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #7fc4ee; outline-offset: 2px; border-radius: 4px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* ---------- reveal on scroll ---------- */
.ux-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--ux-delay, 0ms); will-change: opacity, transform; }
.ux-reveal.is-in { opacity: 1; transform: none; }
html.ux-no-motion .ux-reveal { opacity: 1; transform: none; transition: none; }

/* ---------- cards ---------- */
/* trip cards: even spacing, title block aligned across a row, hover lift */
.package { transition: transform .3s ease, box-shadow .3s ease, opacity .7s cubic-bezier(.2, .7, .2, 1); padding: 10px 10px 14px !important; border: 1px solid rgba(16, 32, 48, .06); }
.package.ux-reveal { transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .7s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.package.ux-reveal.is-in { transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease; }
.package:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -18px rgba(16, 32, 48, .35); }
.package .pack-content .trip-title { padding: 16px 6px 12px !important; min-height: calc(1.2em * 2 + 28px); }
.package .pack-down { padding: 0 6px 2px !important; gap: 12px 20px !important; margin-top: auto; }
.package .pack-down .p1 { margin: 0; }
.package-section .row > .col.mb-3 { margin-bottom: 24px !important; }
.package-section { padding-bottom: 56px !important; }
.package-section .col-md-12 > .title { flex-wrap: wrap; gap: 12px 24px; margin-bottom: 26px !important; }
@media (max-width: 991.98px) { .package-section .col-md-12 > .title .first { width: 100%; } .package-section .col-md-12 > .title .first p { width: 100% !important; } }
.package .package-img img, .package-img img { transition: transform .6s ease !important; }
.package:hover .package-img img { transform: scale(1.06); }
.package .trip-title { transition: color .2s; }

/* ---------- buttons and links ---------- */
.banner-link a, .button-section a, .cta-btn, .pay-btn, .pay-now-btn, .btn, .link a, .blog .title a, .mdnav-burger, .mdnav-cta, .for-phone-contact a, .book-side a, .side-section-main .btn, #dnvd .nav-link {
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.banner-link a:hover, .button-section a:hover, .cta-btn:hover, .pay-btn:hover, .btn-primary:hover, .btn-success:hover, .link a:hover, .mdnav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35); }
.banner-link a:active, .button-section a:active, .cta-btn:active, .pay-btn:active, .btn:active, .link a:active, .mdnav-burger:active, .mdnav-cta:active, .mdblog-expert-btns a:active { transform: translateY(0) scale(.98); box-shadow: none; }

/* content links get a clear hover */
.inner-page-content a:not(.btn), .welcome p a, .pack-details .content p a { text-underline-offset: 3px; transition: color .15s; }

/* ---------- images fade in once loaded (lazy ones in particular) ---------- */
img.ux-img { opacity: 0; transition: opacity .4s ease; }
img.ux-img.is-loaded { opacity: 1; }

/* ---------- fixed elements that used to collide ---------- */
/* back-to-top moves to the left so it never sits under the chat buttons */
.to-top { right: auto !important; left: 18px !important; bottom: 18px !important; width: 44px; height: 44px; padding: 0 !important; display: none; align-items: center; justify-content: center; background: rgba(26, 43, 72, .92) !important; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); transition: background .2s, transform .2s; z-index: 9998; }
.to-top.is-visible { display: flex !important; }
.to-top:hover { background: #007ec4 !important; transform: translateY(-2px); }
@media (max-width: 1023.98px) { .to-top { bottom: 84px !important; left: 14px !important; width: 40px; height: 40px; } }

/* trip page tab bar sits under the sticky site header instead of covering it */
html.mdnav-on #dnvd { transform: translateY(var(--mdnav-h, 0px)); transition: transform .25s ease, top .4s, opacity .4s; }
@media (max-width: 1023.98px) { html.mdnav-on #dnvd { transform: translateY(var(--mdnav-h, 0px)); } }

/* the old hero bottom margin is gone with the new hero; keep the welcome block breathing room */
.mdhero ~ .welcome { padding-top: 72px; }
@media (max-width: 767.98px) { .mdhero ~ .welcome { padding-top: 44px; } }

/* ---------- responsive type: long copy is easier to read a notch smaller on phones ---------- */
@media (max-width: 767.98px) {
    .welcome p, .inner-page-content p, .package-section .title p, .blog .title p, .pack-details .content p, .pack-details .content li { font-size: 16px !important; line-height: 1.65; }
    .welcome h2, .package-section .title h2, .blog .title h2, .inner-page-title h1 { font-size: clamp(26px, 7vw, 32px) !important; line-height: 1.15; }
    .pack-details .content h2 { font-size: 24px !important; }
    .pack-details .content h3 { font-size: 20px !important; }
    .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
}

/* ---------- small consistency fixes ---------- */
.welcome .wel-innerlay, .package-section .title .line { transition: none; }
.testimonials .content, .why-us li, .achievement .content { transition: transform .3s ease, box-shadow .3s ease; }
.testimonials .content:hover { transform: translateY(-3px); }