/* Holiday Mazha public site styles (first-party; replaces the removed template bundle). */

:root {
    --hm-primary: #1ca8cb;
    --hm-primary-dark: #158da8;
    --hm-dark: #1b2838;
    --hm-light: #f8fafc;
    --hm-text: #334155;
    --hm-border: #e2e8f0;
    --hm-radius: 12px;
    --hm-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    --hm-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.1);
    --hm-section-y: 72px;
}

@media (max-width: 991.98px) {
    :root { --hm-section-y: 48px; }
}

@media (max-width: 575.98px) {
    :root { --hm-section-y: 36px; }
}

html { scroll-padding-top: 90px; scroll-behavior: smooth; }

body {
    color: var(--hm-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

img { max-width: 100%; }

/* Shared layout helpers */
.section-pad { padding-top: var(--hm-section-y); padding-bottom: var(--hm-section-y); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 28px; }
.section-eyebrow { color: var(--hm-primary-dark); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.wrap-anywhere { overflow-wrap: anywhere; }

/* Accessibility */
.skip-link {
    position: absolute; top: -40px; left: 0; background: var(--hm-primary); color: #fff;
    padding: 8px 16px; z-index: 10001; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 0; }
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #0b6e88;
    outline-offset: 2px;
}

/* Top bar */
.header-top-section-new { background-color: #0f172a; color: #e2e8f0; padding: 8px 0; font-size: 13px; }
.header-top-section-new a { color: #cbd5e1; text-decoration: none; transition: color 0.2s ease; }
.header-top-section-new a:hover { color: var(--hm-primary); }

/* Header */
.header-11 { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 8px 0; }
.header-11 > .container { position: relative; }
.brand-logo-img { max-height: 52px; max-width: 100%; height: auto; width: auto; object-fit: contain; display: block; }
/* The logo shrinks; the action buttons (search, WhatsApp, menu) never do. */
.header-11 .logo { flex: 0 1 auto; min-width: 0; }
.header-11 .logo a { display: block; }
.header-actions { flex: 0 0 auto; }

.main-menu > ul {
    display: flex; list-style: none; margin: 0; padding: 0;
    gap: clamp(6px, 1.6vw, 24px); align-items: center; white-space: nowrap;
}
.main-menu > ul > li > a,
.mega-toggle {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
    color: #1e293b; font-weight: 600; font-size: 15px; text-decoration: none;
    padding: 8px 6px; background: none; border: 0; cursor: pointer; transition: color 0.2s ease;
}
.main-menu > ul > li > a:hover,
.main-menu > ul > li > a.active,
.mega-toggle:hover,
.mega-toggle.active,
.mega-toggle[aria-expanded="true"] { color: var(--hm-primary-dark); }
.mega-toggle .fa-chevron-down { font-size: 11px; transition: transform 0.2s ease; }
.mega-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

@media (max-width: 1279.98px) {
    .main-menu > ul > li > a, .mega-toggle { font-size: 14px; padding-left: 4px; padding-right: 4px; }
    .header-actions .theme-btn { padding: 10px 14px; }
}

/* Mega menu panel: aligned to the header container, never wider than it */
.mega-panel {
    position: absolute; left: 12px; right: 12px; top: 100%;
    background: #fff; border: 1px solid var(--hm-border); border-radius: 0 0 var(--hm-radius) var(--hm-radius);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain;
    padding: 20px 24px 24px; z-index: 1030; white-space: normal;
}
.mega-panel[hidden] { display: none; }
.mega-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;
    padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--hm-border);
}
.mega-title { font-weight: 700; color: var(--hm-dark); font-size: 16px; }
.mega-viewall { font-weight: 600; font-size: 14px; color: var(--hm-primary-dark); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mega-viewall:hover { text-decoration: underline; }
.mega-grid { column-width: 210px; column-gap: 22px; }
.mega-group { break-inside: avoid; margin-bottom: 12px; }
.mega-group-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; margin: 0 0 4px; }
.mega-group ul { list-style: none; margin: 0; padding: 0; }
.mega-group a {
    display: flex; align-items: center; min-height: 34px; padding: 2px 8px; margin: 0 -8px;
    border-radius: 6px; color: #1e293b; font-size: 15px; text-decoration: none; overflow-wrap: anywhere;
}
.mega-group a:hover { background: #f1f5f9; color: var(--hm-primary-dark); }
.mega-empty { color: #64748b; margin: 0; }

/* Buttons */
.theme-btn {
    background-color: var(--hm-primary-dark); color: #fff !important; padding: 10px 22px; border-radius: 6px;
    font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; min-height: 44px; transition: background-color 0.2s ease, transform 0.2s ease; border: none;
    cursor: pointer;
}
.theme-btn:hover { background-color: #0f7891; transform: translateY(-1px); }
.theme-btn-outline {
    background-color: transparent; color: #0f7891 !important; border: 2px solid var(--hm-primary-dark);
    padding: 8px 18px; border-radius: 6px; font-weight: 600; font-size: 14px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
}
.theme-btn-outline:hover { background-color: var(--hm-primary-dark); color: #fff !important; }
.search-trigger, .sidebar__toggle {
    color: #334155; padding: 10px; min-width: 44px; min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer; border: 0; background: none;
}
.search-trigger { font-size: 18px; }
.sidebar__toggle { font-size: 20px; }
.search-trigger:hover { color: var(--hm-primary-dark); }

/* Mobile drawer */
.mobile-nav-drawer {
    position: fixed; top: 0; right: 0; width: 100%; max-width: 340px; height: 100vh; height: 100dvh;
    background: #fff; z-index: 9999; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s;
    overflow-y: auto; overscroll-behavior: contain; padding: 20px; display: flex; flex-direction: column;
}
.mobile-nav-drawer.active { transform: none; visibility: visible; transition: transform 0.3s ease; }
.mobile-nav-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9998;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.mobile-nav-overlay.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
body.nav-open, body.search-open { overflow: hidden; }
.mobile-nav-links { list-style: none; padding: 0; margin: 16px 0; }
.mobile-nav-links > li { border-bottom: 1px solid #f1f5f9; }
.mobile-nav-links a, .mobile-acc-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px;
    padding: 12px 4px; color: #1e293b; font-weight: 600; font-size: 16px; text-decoration: none;
    background: none; border: 0; text-align: left; cursor: pointer;
}
.mobile-nav-links a:hover, .mobile-nav-links a.active,
.mobile-acc-toggle:hover, .mobile-acc-toggle.active { color: var(--hm-primary-dark); }
.mobile-acc-toggle .fa-chevron-down { font-size: 12px; transition: transform 0.2s ease; }
.mobile-acc-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.mobile-acc-panel { padding: 0 0 8px 8px; }
.mobile-acc-panel[hidden] { display: none; }
.mobile-acc-panel .mobile-group-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; font-weight: 700; margin: 10px 0 2px 4px; }
.mobile-acc-panel ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav-links .mobile-acc-panel li { border: 0; }
.mobile-nav-links .mobile-acc-panel a { font-weight: 500; font-size: 15px; min-height: 44px; padding: 8px 4px; }
.mobile-nav-links .mobile-acc-panel a.viewall { color: var(--hm-primary-dark); font-weight: 700; }

/* Search modal */
.search-modal-backdrop {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.92); z-index: 10000;
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.search-modal-backdrop.active { display: flex; }
.search-modal-card { width: 100%; max-width: 600px; position: relative; }
.search-input-field {
    width: 100%; padding: 16px 20px; font-size: 18px; border-radius: 8px; border: 2px solid var(--hm-primary);
    outline: none; background: #fff;
}
.search-modal-close {
    position: absolute; top: -48px; right: 0; color: #fff; font-size: 28px; cursor: pointer;
    background: none; border: none; padding: 4px; min-width: 44px; min-height: 44px;
}

/* Footer */
.site-footer { background-color: #0f172a; color: #94a3b8; padding-top: 56px; padding-bottom: 24px; }
.site-footer h4 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.site-footer a { color: #b6c2d1; text-decoration: none; transition: color 0.2s ease; overflow-wrap: anywhere; }
.site-footer a:hover { color: #7fd6ec; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer .social-link {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #334155; border-radius: 50%;
}
.footer-bottom { border-top: 1px solid #1e293b; padding-top: 20px; margin-top: 40px; font-size: 14px; }

@media (max-width: 767.98px) {
    .site-footer { padding-top: 40px; }
    .site-footer .footer-grid > [class*="col-"] { min-width: 0; }
    .site-footer .footer-grid h4 { font-size: 16px; margin-bottom: 14px; }
    .site-footer .footer-grid p,
    .site-footer .footer-grid li,
    .site-footer .footer-grid a { font-size: 13px; }
    .site-footer .footer-grid img { width: auto; max-width: 100%; height: auto; max-height: 42px; }
    .site-footer .footer-grid .social-link { width: 40px; height: 40px; }
    .footer-bottom {
        justify-content: center !important;
        text-align: center;
        margin-top: 28px;
    }
    .footer-bottom > * { flex: 0 0 100%; width: 100%; }
}

/* Page title band (internal pages; deliberately compact so it is never mistaken for the hero) */
.page-title-band { background: #0f172a; color: #fff; padding: 36px 0; text-align: center; }
.page-title-band h1 { color: #fff; font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); margin: 0 0 8px; overflow-wrap: anywhere; }
.page-title-band .breadcrumb { margin: 0; justify-content: center; row-gap: 2px; --bs-breadcrumb-divider-color: #94a3b8; }
.page-title-band .breadcrumb-item { min-width: 0; overflow-wrap: anywhere; }
.page-title-band .breadcrumb a { color: #7fd6ec; text-decoration: none; }
.page-title-band .breadcrumb-item.active { color: #e2e8f0; }
.page-title-band p { color: #cbd5e1; margin: 0; }
.page-title-band.is-left { text-align: left; }
.page-title-band.is-left .breadcrumb { justify-content: flex-start; }

/* Cards & shared image frame */
.travel-card {
    background: #fff; border-radius: var(--hm-radius); overflow: hidden; box-shadow: var(--hm-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease; height: 100%; display: flex; flex-direction: column;
    border: 1px solid var(--hm-border); position: relative;
}
.travel-card:hover { transform: translateY(-4px); box-shadow: var(--hm-shadow-hover); }
.media-frame { aspect-ratio: 16 / 11; width: 100%; background-color: var(--hm-border); overflow: hidden; display: block; }
.media-frame > img, img.media-frame { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame.is-empty { display: flex; align-items: center; justify-content: center; background: #94a3b8; color: #fff; }
.travel-card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.travel-card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; overflow-wrap: anywhere; }
.travel-card-actions { margin-top: auto; padding-top: 16px; border-top: 1px solid #f1f5f9; display: flex; flex-wrap: wrap; gap: 8px; }
.travel-card-actions > a { flex: 1 1 auto; }
.badge-scope, .badge-duration {
    font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 20px; display: inline-block;
}
.badge-scope { background-color: rgba(28, 168, 203, 0.14); color: #0b6e88; }
.badge-duration { background-color: #f1f5f9; color: #475569; }
.stat-card { border: 1px solid var(--hm-border); border-radius: var(--hm-radius); background: #fff; padding: 24px; box-shadow: var(--hm-shadow); }
a.stat-card { display: block; text-decoration: none; height: 100%; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.stat-card:hover { transform: translateY(-3px); box-shadow: var(--hm-shadow-hover); }

/* Filters */
.filter-card { position: static; }
@media (min-width: 992px) {
    .filter-card { position: sticky; top: 96px; }
}

/* Hero: image-only. The box has ONE stable aspect ratio (set inline from the first image, never taller than 3:2),
   so autoplay can never move the page. Every image is contained inside it: complete, never clipped.
   The ONLY overlay is the search form. */
.hero-media { background: #e2e8f0; }
.hero-stage { position: relative; width: 100%; margin: 0; overflow: hidden; }
.hero-stage .hero-swiper { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-stage .swiper-slide { height: 100%; }
.hero-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-fallback { position: absolute; inset: 0; background: #cbd5e1; }
.hero-search {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5;
    width: min(760px, calc(100% - 24px)); margin: 0; display: flex; gap: 8px; align-items: center;
    background: rgba(255, 255, 255, 0.96); border: 1px solid var(--hm-border); border-radius: 10px;
    padding: 6px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.22);
}
.hero-search .hero-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.hero-search .hero-search-field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; }
.hero-search input[type="search"] {
    width: 100%; min-height: 44px; border: 0; border-radius: 6px; padding: 8px 12px 8px 40px; font-size: 16px; background: transparent; color: #0f172a;
}
.hero-search input[type="search"]:focus-visible { outline: 3px solid #0b6e88; outline-offset: 0; }
.hero-search .theme-btn { flex: 0 0 auto; padding-left: 20px; padding-right: 20px; }
@media (max-width: 575.98px) {
    .hero-search { width: calc(100% - 16px); padding: 4px; gap: 4px; }
    .hero-search .theme-btn .label { display: none; }
    .hero-search .theme-btn { padding: 0 14px; min-width: 44px; }
}
.hero-controls { position: absolute; z-index: 4; left: 0; right: 0; bottom: 8px; pointer-events: none; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; }
.hero-controls > * { pointer-events: auto; }
.hero-arrow {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.25); cursor: pointer;
    background: rgba(255, 255, 255, 0.85); color: #0f172a; display: inline-flex; align-items: center; justify-content: center;
}
.hero-arrow:hover { background: #fff; }
.hero-dots { display: flex; gap: 6px; align-items: center; }
.hero-dots .swiper-pagination-bullet {
    width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 1; border: 1px solid rgba(15, 23, 42, 0.45); margin: 0;
}
.hero-dots .swiper-pagination-bullet-active { background: var(--hm-primary-dark); border-color: var(--hm-primary-dark); }
@media (max-width: 575.98px) {
    .hero-arrow { display: none; }
    .hero-controls { justify-content: center; }
}

/* Itinerary details media */
.gallery-main { aspect-ratio: 16 / 9; background: var(--hm-border); border-radius: var(--hm-radius); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 575.98px) { .gallery-main { aspect-ratio: 4 / 3; } }
.gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 4px; }
.gallery-thumb { flex: 0 0 auto; width: 88px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; min-height: 44px; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb[aria-current="true"] { border-color: var(--hm-primary-dark); }
.day-thumb { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 8px; display: block; }
.booking-card { position: static; }
@media (min-width: 992px) { .booking-card { position: sticky; top: 96px; } }
.day-description-content { overflow-wrap: anywhere; }
.day-description-content img, .day-description-content table { max-width: 100%; height: auto; }
.itinerary-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border: 1px solid var(--hm-border); border-radius: 14px; background: #f8fafc; }
.itinerary-share-label { color: var(--hm-navy); font-size: 0.9rem; font-weight: 800; }
.itinerary-share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-action { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: #fff !important; text-decoration: none; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; }
.share-action:hover { transform: translateY(-2px); filter: brightness(1.08); }
.share-action.is-whatsapp { background: #12803f; }
.share-action.is-facebook { background: #1877f2; }
.share-action.is-x { background: #111827; }
.share-action.is-linkedin { background: #0a66c2; }
.share-action.is-telegram { background: #2381cc; }
.share-action.is-pinterest { background: #bd081c; }
.share-action.is-email { background: #475569; }
.share-action.is-native { background: #2563eb; }
.share-action.is-copy { background: #0e7490; }
.itinerary-share-status { flex-basis: 100%; min-height: 1.2em; color: #166534; font-size: 0.82rem; font-weight: 700; }
@media (max-width: 575.98px) {
    .itinerary-share { align-items: flex-start; }
    .itinerary-share-label { flex-basis: 100%; }
    .share-action { width: 44px; height: 44px; }
}
.accordion-button:has(.itinerary-day-badge) { gap: 10px; }
.itinerary-day-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #0e7490;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.itinerary-day-title { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .accordion-button:has(.itinerary-day-badge) { align-items: flex-start; padding: 14px 12px; }
    .itinerary-day-badge { min-width: 58px; padding-inline: 8px; }
}

/* About / contact */
.portrait-image { width: 100%; height: auto; display: block; }
.map-frame { position: relative; height: clamp(260px, 45vw, 380px); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (hover: none), (max-width: 991.98px) {
    .map-frame:not(.is-active) iframe { pointer-events: none; }
}

/* Footer credit stays white */
.footer-credit,
.site-footer .footer-credit a,
.site-footer .footer-credit a:visited,
.site-footer .footer-credit a:hover,
.site-footer .footer-credit a:focus { color: #ffffff; }

/* WhatsApp actions */
.wa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px;
    padding: 8px 12px; border-radius: 6px; background: #12803f; color: #fff !important; font-weight: 600;
    font-size: 14px; text-decoration: none; border: 0; cursor: pointer; transition: background-color 0.2s ease;
}
.wa-btn:hover { background: #0e6a34; }
.wa-btn i { font-size: 20px; }
.card-route { color: #0b6e88; }

/* Grid / list toggle */
.results-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.view-toggle { display: inline-flex; border: 1px solid var(--hm-border); border-radius: 8px; overflow: hidden; background: #fff; }
.view-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #475569; text-decoration: none; }
.view-btn + .view-btn { border-left: 1px solid var(--hm-border); }
.view-btn:hover { background: #f1f5f9; }
.view-btn.is-active { background: var(--hm-primary-dark); color: #fff; }

/* List mode: one card per row on wider screens, normal vertical card on mobile */
@media (min-width: 768px) {
    .travel-card.is-list { flex-direction: row; }
    .travel-card.is-list .media-frame { flex: 0 0 300px; width: 300px; aspect-ratio: auto; min-height: 206px; align-self: stretch; }
    .travel-card.is-list .travel-card-actions { justify-content: flex-end; }
    .travel-card.is-list .travel-card-actions > a { flex: 0 0 auto; }
}
.travel-card.is-list .travel-card-body { min-width: 0; }

.enquiry-card:target { outline: 3px solid rgba(28, 168, 203, 0.4); }

/* ==========================================================================
   Polish & motion (modern product-site feel). All motion is transform/opacity
   only and is switched off entirely under prefers-reduced-motion below.
   ========================================================================== */
:root { --hm-ease: cubic-bezier(0.22, 1, 0.36, 1); --hm-grad: linear-gradient(135deg, #158da8 0%, #0f7891 100%); }

/* Frosted sticky header that gains depth once the page scrolls */
.header-11 { background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); transition: box-shadow 0.3s var(--hm-ease), padding 0.3s var(--hm-ease); }
.header-11.is-scrolled { box-shadow: 0 6px 24px rgba(15, 23, 42, 0.1); }

/* Buttons: gradient fill, soft lift, arrow nudge, tactile press */
.theme-btn { background-image: var(--hm-grad); box-shadow: 0 6px 16px rgba(21, 141, 168, 0.25); transition: transform 0.25s var(--hm-ease), box-shadow 0.25s var(--hm-ease), filter 0.25s; }
.theme-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(21, 141, 168, 0.32); filter: brightness(1.05); }
.theme-btn:active, .theme-btn-outline:active, .wa-btn:active { transform: translateY(0) scale(0.98); }
.theme-btn .fa-arrow-right, .theme-btn .fa-paper-plane { transition: transform 0.25s var(--hm-ease); }
.theme-btn:hover .fa-arrow-right, .theme-btn:hover .fa-paper-plane { transform: translateX(3px); }
.theme-btn-outline, .wa-btn { transition: transform 0.25s var(--hm-ease), background-color 0.2s, color 0.2s, box-shadow 0.25s var(--hm-ease); }
.theme-btn-outline:hover { transform: translateY(-2px); }
.wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(18, 128, 63, 0.3); }

/* Mega panel and mobile drawer: animated entrance */
@keyframes hmMegaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega-panel:not([hidden]) { animation: hmMegaIn 0.22s var(--hm-ease) both; }
.mega-group a { transition: background-color 0.15s, color 0.15s, padding-left 0.2s var(--hm-ease); }
.mega-group a:hover { padding-left: 14px; }
@keyframes hmItemIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.mobile-nav-drawer.active .mobile-nav-links > li { animation: hmItemIn 0.4s var(--hm-ease) both; }
.mobile-nav-drawer.active .mobile-nav-links > li:nth-child(2) { animation-delay: 0.05s; }
.mobile-nav-drawer.active .mobile-nav-links > li:nth-child(3) { animation-delay: 0.1s; }
.mobile-nav-drawer.active .mobile-nav-links > li:nth-child(4) { animation-delay: 0.15s; }
.mobile-nav-drawer.active .mobile-nav-links > li:nth-child(5) { animation-delay: 0.2s; }

/* Hero search: gentle entrance and a focus glow (the search form remains the only hero overlay) */
@keyframes hmSearchIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.hero-search { animation: hmSearchIn 0.7s var(--hm-ease) 0.15s both; transition: box-shadow 0.3s var(--hm-ease); }
.hero-search:focus-within { box-shadow: 0 14px 40px rgba(15, 23, 42, 0.28), 0 0 0 4px rgba(28, 168, 203, 0.35); }

/* Cards: lift, image zoom, accent bar */
.travel-card, a.stat-card, .stat-card { transition: transform 0.35s var(--hm-ease), box-shadow 0.35s var(--hm-ease), border-color 0.25s, opacity 0.6s var(--hm-ease); }
.travel-card:hover { border-color: rgba(28, 168, 203, 0.45); }
.media-frame > img, img.media-frame { transition: transform 0.6s var(--hm-ease); }
.travel-card:hover .media-frame > img { transform: scale(1.06); }
.badge-scope, .badge-duration { letter-spacing: 0.02em; }
.section-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.section-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--hm-grad); }
.text-center .section-eyebrow::before { display: none; }

/* Page title band: deep gradient with soft glows instead of a flat block */
.page-title-band { background: radial-gradient(900px 260px at 85% -40%, rgba(28, 168, 203, 0.35), transparent 60%), radial-gradient(700px 240px at 5% 140%, rgba(21, 141, 168, 0.25), transparent 60%), #0f172a; }

/* Why-us band: glassy tiles */
.bg-dark.section-pad { background: radial-gradient(1000px 400px at 50% -20%, rgba(28, 168, 203, 0.22), transparent 65%), #0f172a !important; }
.bg-dark.section-pad .p-3 { border-radius: var(--hm-radius); transition: background-color 0.3s, transform 0.35s var(--hm-ease); }
.bg-dark.section-pad .p-3:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-4px); }
.bg-dark.section-pad .fa-2x { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(28, 168, 203, 0.15); font-size: 1.5rem; }

/* Scroll reveal (classes are added by site.js only when IntersectionObserver exists) */
.reveal-pending { opacity: 0; transform: translateY(22px); }

/* Wide screens & laptops: scale the canvas instead of leaving a narrow column */
@media (min-width: 1600px) {
    .container { max-width: 1500px; }
    .mega-panel { padding: 24px 32px 28px; }
    .mega-grid { column-width: 240px; }
}
@media (min-width: 2000px) {
    html { font-size: 17px; }
    .container { max-width: 1760px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .section-head { margin-bottom: 22px; }
    .travel-card-body { padding: 18px; }
}
@media (max-width: 575.98px) {
    .travel-card:hover, a.stat-card:hover { transform: none; }
}

/* Respect users who ask for less motion: no animation, everything visible immediately */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal-pending { opacity: 1; transform: none; }
    .travel-card:hover .media-frame > img { transform: none; }
}

/* ==========================================================================
   Theme v2: richer palette, stronger buttons, softer surfaces.
   Contrast checked: white on --hm-teal / --hm-blue >= 4.5:1; navy on white >= 15:1.
   ========================================================================== */
:root {
    --hm-navy: #0b1f3a;
    --hm-text: #3b4a5f;
    --hm-teal: #0e7490;
    --hm-blue: #2563eb;
    --hm-sky: #e8f4f8;
    --hm-sand: #fff7ed;
    --hm-primary: #0891b2;
    --hm-primary-dark: #0e7490;
    --hm-border: #dde6ee;
    --hm-radius: 16px;
    --hm-shadow: 0 2px 4px rgba(11, 31, 58, 0.04), 0 10px 28px rgba(11, 31, 58, 0.07);
    --hm-shadow-hover: 0 4px 8px rgba(11, 31, 58, 0.06), 0 22px 44px rgba(11, 31, 58, 0.14);
    --hm-grad: linear-gradient(135deg, #0e7490 0%, #2563eb 100%);
    --hm-grad-wa: linear-gradient(135deg, #15803d 0%, #166534 100%);
}

body { color: var(--hm-text); background: #fff; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--hm-navy); letter-spacing: -0.01em; }
.page-title-band h1, .site-footer h4, .bg-dark h2, .bg-dark h3, .bg-dark .h5 { color: #fff; }
.text-dark { color: var(--hm-navy) !important; }
.text-muted { color: #566579 !important; }
.text-info { color: #0891b2 !important; }
.bg-light { background-color: #f3f8fb !important; }
a { color: var(--hm-teal); }
a:hover { color: #155e75; }

/* Buttons: bigger targets, clear primary / secondary / success hierarchy */
.theme-btn, .theme-btn-outline, .wa-btn { min-height: 48px; padding: 12px 26px; border-radius: 12px; font-size: 15px; font-weight: 700; letter-spacing: 0.005em; }
.theme-btn { background-image: var(--hm-grad); background-color: var(--hm-teal); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28); }
.theme-btn:hover { background-color: var(--hm-teal); box-shadow: 0 12px 26px rgba(37, 99, 235, 0.36); filter: saturate(1.1) brightness(1.04); }
.theme-btn-outline { border: 2px solid var(--hm-teal); color: var(--hm-teal) !important; background: #fff; padding: 10px 24px; }
.theme-btn-outline:hover { background-image: var(--hm-grad); border-color: transparent; color: #fff !important; box-shadow: 0 10px 22px rgba(37, 99, 235, 0.25); }
.wa-btn { background-image: var(--hm-grad-wa); background-color: #15803d; padding: 12px 20px; box-shadow: 0 8px 18px rgba(21, 128, 61, 0.25); }
.wa-btn:hover { background-color: #15803d; filter: brightness(1.06); }
.travel-card-actions .wa-btn { padding: 10px 14px; }
.travel-card-actions .theme-btn { padding: 11px 18px; }
.header-actions .theme-btn { min-height: 44px; padding: 10px 20px; }

/* Header navigation: navy labels with an animated underline */
.main-menu > ul > li > a, .mega-toggle { color: var(--hm-navy); position: relative; }
.main-menu > ul > li > a::after, .mega-toggle::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--hm-grad); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--hm-ease); }
.main-menu > ul > li > a:hover::after, .main-menu > ul > li > a.active::after, .mega-toggle:hover::after, .mega-toggle.active::after, .mega-toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.main-menu > ul > li > a:hover, .main-menu > ul > li > a.active, .mega-toggle:hover, .mega-toggle.active, .mega-toggle[aria-expanded="true"] { color: var(--hm-teal); }
.header-top-section-new { background: linear-gradient(90deg, #0b1f3a 0%, #0f2f57 100%); }
.mega-panel { border-radius: 0 0 20px 20px; border-color: #d6e3ee; }
.mega-group a:hover { background: var(--hm-sky); color: var(--hm-teal); }
.mega-group-title { color: var(--hm-teal); }

/* Hero surround and fallback (fallback has no artwork, so a soft brand wash is fine) */
.hero-media { background: linear-gradient(180deg, #eaf4f8 0%, #f6fafc 100%); }
.hero-fallback { background: radial-gradient(900px 420px at 15% 20%, rgba(8, 145, 178, 0.28), transparent 60%), radial-gradient(800px 420px at 90% 80%, rgba(37, 99, 235, 0.22), transparent 60%), #dbeaf3; }
.hero-search { border-radius: 16px; padding: 8px; border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.97); box-shadow: 0 18px 50px rgba(11, 31, 58, 0.28); }
.hero-search input[type="search"] { min-height: 52px; font-size: 17px; }
.hero-search .theme-btn { min-height: 52px; border-radius: 12px; padding-left: 28px; padding-right: 28px; }
@media (max-width: 575.98px) { .hero-search { padding: 5px; } .hero-search input[type="search"] { min-height: 46px; font-size: 16px; } .hero-search .theme-btn { min-height: 46px; padding: 0 16px; } }

/* Surfaces */
.travel-card, .stat-card { border-radius: var(--hm-radius); border-color: var(--hm-border); box-shadow: var(--hm-shadow); }
.travel-card-title { font-size: 1.15rem; line-height: 1.3; }
.travel-card-title a:hover { color: var(--hm-teal) !important; }
.badge-scope { background: #dff3f8; color: #0b6580; }
.badge-duration { background: #eef2ff; color: #3730a3; }
.card-route { color: var(--hm-teal); font-weight: 600; }
.section-head h2, .text-center > h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 800; }
.section-eyebrow { color: var(--hm-teal); }
.section-pad.bg-light { background: linear-gradient(180deg, #f3f8fb 0%, #eef5fa 100%) !important; }
.view-btn.is-active { background-image: var(--hm-grad); }
.stat-card .fa-earth-americas, .stat-card .text-info i { color: var(--hm-teal); }
a.stat-card:hover { border-color: rgba(14, 116, 144, 0.4); }
.form-control, .form-select { border-radius: 10px; min-height: 46px; border-color: #cbd8e4; }
.form-control:focus, .form-select:focus { border-color: var(--hm-primary); box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.18); }

/* Title band and dark sections */
.page-title-band { background: radial-gradient(900px 260px at 85% -40%, rgba(37, 99, 235, 0.45), transparent 60%), radial-gradient(700px 240px at 5% 140%, rgba(8, 145, 178, 0.4), transparent 60%), #0b1f3a; padding: 44px 0; }
.bg-dark.section-pad { background: radial-gradient(1000px 420px at 50% -20%, rgba(37, 99, 235, 0.3), transparent 65%), radial-gradient(700px 300px at 0% 100%, rgba(8, 145, 178, 0.22), transparent 60%), #0b1f3a !important; }
.bg-dark.section-pad .fa-2x { background: linear-gradient(135deg, rgba(8, 145, 178, 0.35), rgba(37, 99, 235, 0.35)); color: #a5f3fc !important; }
.badge.bg-info { background: rgba(8, 145, 178, 0.25) !important; color: #a5f3fc !important; border: 1px solid rgba(165, 243, 252, 0.35); }

/* Footer */
.site-footer { background: linear-gradient(180deg, #0b1f3a 0%, #081629 100%); }
.site-footer a:hover { color: #a5f3fc; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.1); }

/* Mobile drawer accents */
.mobile-acc-panel .viewall, .mobile-nav-links a:hover, .mobile-nav-links a.active, .mobile-acc-toggle:hover, .mobile-acc-toggle.active { color: var(--hm-teal); }
.mobile-nav-links a, .mobile-acc-toggle { color: var(--hm-navy); }

/* ==========================================================================
   Catalogue filters, sort, chips and infinite scroll
   ========================================================================== */
.filter-card { padding: 16px; }
.filter-card .filter-field { margin-bottom: 10px; }
.filter-card .form-label { font-size: 12px; font-weight: 700; color: var(--hm-navy); margin-bottom: 4px; }
.filter-card .form-select, .filter-card .form-control { min-height: 40px; }
.filter-card .filter-help .wa-btn, .filter-card .filter-help .theme-btn-outline { min-height: 44px; }
@media (min-width: 992px) {
    /* Compact and sticky on desktop; scrolls internally on short screens instead of overflowing. */
    .filter-card { position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow-y: auto; overscroll-behavior: contain; }
}
.filter-toggle { position: relative; }
.filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 8px; border-radius: 11px; background: var(--hm-teal); color: #fff; font-size: 12px; font-weight: 700; }
.filter-toggle:hover .filter-count { background: #fff; color: var(--hm-teal); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border-radius: 999px; background: #e6f4f8; color: #0b5f78; font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid #c4e4ee; max-width: 100%; }
.filter-chip span { overflow-wrap: anywhere; }
.filter-chip:hover { background: #d4edf4; color: #08485c; }
.filter-chip .fa-xmark { font-size: 12px; }
.filter-clear { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 8px; font-size: 13px; font-weight: 700; color: var(--hm-navy); text-decoration: underline; }

.results-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sort-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.sort-label { font-size: 13px; font-weight: 600; color: var(--hm-navy); white-space: nowrap; margin: 0; }
.sort-form .form-select { min-width: 200px; max-width: 100%; min-height: 44px; }
@media (max-width: 575.98px) {
    .results-controls { width: 100%; justify-content: space-between; }
    .sort-form { flex: 1 1 auto; min-width: 0; }
    .sort-form .form-select { min-width: 0; width: 100%; }
}

.infinite-status { min-height: 24px; color: #566579; font-size: 14px; }
.infinite-error { color: #9f1239; font-weight: 600; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.infinite-end { color: #566579; font-weight: 600; padding: 12px 0 4px; }
.infinite-sentinel { height: 1px; }

.filter-card .filter-help h2 { font-size: 1rem; font-weight: 700; }
.filter-card .filter-heading { font-size: 1rem; }