/* Shared site styles (moved out of internal <style> blocks in header.php, contact-footer.php, footer.php).
   Loaded after main.css / new-blog.css. */

/* header.php — "see more" links in the mega menu */
.see-more a {
    font-weight: 600;
    color: #172E90;
}

.see-more a:hover {
    text-decoration: underline;
}

/* contact-footer.php — mobile bottom bar (hidden) + floating call / WhatsApp buttons */
.ftr-bar {
    padding-top: 10px;
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.ftr-bar-btn {
    flex-basis: 33.3%;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff !important;
    font-weight: 700;
    padding: 8px 0px;
}

.book-btn {
    flex-basis: 33.3%;
    background-color: #ffba00;
}

.wp-btn {
    flex-basis: 33.3%;
    background-color: #4CAF50;
}

.call-btn {
    flex-basis: 33.3%;
    background-color: #031b24;
}

.book-btn a,
.wp-btn a,
.call-btn a {
    color: #fefefe;
    text-decoration: none;
}

.ftr-bar {
    display: none;
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 999;
}

.whatsapp-float img {
    width: 50px;
    height: 50px;
}

.call-icon {
    position: fixed;
    bottom: 20px;
    left: 10px;
    z-index: 999;
}

.call-icon img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* footer.php */
.book-offer {
    background-color: #274bae;
}

/* Sliders before Swiper starts (scripts load after the page has painted):
   show the slides in the same row / column count and gap Swiper will use (main.js sectionSlider breakpoints),
   so nothing jumps when Swiper takes over. Only applies until .swiper-initialized is added. */
.js-section-slider { --sp-n: 1; --sp-g: 0px; }
.js-section-slider[data-gap="30"] { --sp-g: 30px; }
.js-section-slider[data-slider-cols*="base-2"] { --sp-n: 2; }
@media (min-width: 574px) {
    .js-section-slider[data-slider-cols*="sm-1"] { --sp-n: 1; }
    .js-section-slider[data-slider-cols*="sm-2"] { --sp-n: 2; }
    .js-section-slider[data-slider-cols*="sm-3"] { --sp-n: 3; }
}
@media (min-width: 767px) {
    .js-section-slider[data-slider-cols*="md-1"] { --sp-n: 1; }
    .js-section-slider[data-slider-cols*="md-2"] { --sp-n: 2; }
    .js-section-slider[data-slider-cols*="md-3"] { --sp-n: 3; }
}
@media (min-width: 991px) {
    .js-section-slider[data-slider-cols*="lg-1"] { --sp-n: 1; }
    .js-section-slider[data-slider-cols*="lg-2"] { --sp-n: 2; }
    .js-section-slider[data-slider-cols*="lg-3"] { --sp-n: 3; }
    .js-section-slider[data-slider-cols*="lg-4"] { --sp-n: 4; }
}
@media (min-width: 1199px) {
    .js-section-slider[data-slider-cols*="xl-1"] { --sp-n: 1; }
    .js-section-slider[data-slider-cols*="xl-2"] { --sp-n: 2; }
    .js-section-slider[data-slider-cols*="xl-3"] { --sp-n: 3; }
    .js-section-slider[data-slider-cols*="xl-4"] { --sp-n: 4; }
}
.js-section-slider:not(.swiper-initialized) > .swiper-wrapper { display: flex; }
.js-section-slider:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    flex-shrink: 0;
    width: calc((100% - (var(--sp-n) - 1) * var(--sp-g)) / var(--sp-n));
    margin-right: var(--sp-g);
}

/* Accessibility (Lighthouse): readable orange text on white (contrast >= 4.5:1), owner approved */
.hero__content .button.text-accent-1,
.hero__content .button.text-accent-1 a {
    color: #bd5500 !important;
}
.trust-text {
    color: #c83c00;
}

/* Accessibility: links inside buttons get a 24px tall tap area
   (vertical padding on an inline link does not move anything around it) */
.hero__content .button > a,
.pac-btm .pac-btm-btn2 > a {
    padding: 2px 0;
}

/* "Send to Enquiry" heading changed from h4 to h3 (heading order): keep the h4 size */
h3.sp-h4 {
    font-size: calc(1.275rem + .3vw);
}
@media (min-width: 1200px) {
    h3.sp-h4 {
        font-size: 1.5rem;
    }
}

/* ===== Responsive fixes (all screen sizes) ===== */

/* Slider arrows sit 70px outside the content; on screens narrower than that space they went off-screen
   (sideways scrolling on tablets). Keep them just outside the content instead. */
@media (max-width: 1399px) {
    .navAbsolute { left: -20px; right: -20px; }
}
@media (max-width: 767px) {
    .navAbsolute { left: -10px; right: -10px; }
}

/* Inner page banner (About, Site Map ...): on phones the theme sets padding-bottom 0, so the "Home > Page" line fell
   below the photo onto the white wave and the white page name disappeared. Keep it on the photo. */
@media (max-width: 767px) {
    .pageHeader.-type-1 { padding-top: 56px; padding-bottom: 56px; }
}

/* Home "The Wanderer's Guide": on large phones / tablets (576-992px) the photo box had a fixed height
   (400px, or 210px !important up to 768px) but the photo was taller, so it ran over the text.
   Let the box follow the photo. (Phones under 576px already fit and keep their look.) */
@media (min-width: 576px) and (max-width: 992px) {
    .travel-section .image-container { height: auto !important; }
    .travel-section .image-container img {
        display: block;
        max-width: min(90%, 560px);
        margin: 40px auto 0 !important;
        bottom: 0;
    }
    .travel-section .content-container { padding-top: 28px !important; }
}

/* Tour / vehicle pages: right-hand booking boxes are 360px wide; let them shrink to their column on tablets */
.tourSingleSidebar { max-width: 100%; }

/* Vehicle page "What's included / excluded": the 130px column gap pushed the page sideways below desktop */
@media (max-width: 1199px) {
    .x-gap-130 { margin-left: -15px; margin-right: -15px; }
    .x-gap-130 > * { padding-left: 15px; padding-right: 15px; }
}

/* Tour page sticky section menu: let its link row wrap instead of widening the page on phones / tablets */
@media (max-width: 991px) {
    .singleMenu__content .col-auto { max-width: 100%; }
}

/* Home top slider on phones: new-blog.css puts all slider arrows 5px outside the box (-5px !important), which cut the
   hero arrows in half at the screen edge and over the headline. Keep them fully inside the photo, in its bottom corners
   (clear of the headline and the centred Book Now button), a little smaller. */
@media (max-width: 575.98px) {
    .hero.-type-2 .navAbsolute { left: 10px !important; right: 10px !important; top: auto; bottom: 12px; transform: none; }
    .hero.-type-2 .navAbsolute__button { width: 34px; height: 34px; }
}

/* iPhone zooms the page in when a form box with text under 16px is tapped: use 16px in form boxes on phones / tablets */
@media (max-width: 991px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    select,
    textarea { font-size: 16px !important; }
}

/* Very small phones (under 360px): wide price tables scroll inside themselves instead of the whole page,
   and the tour page's sticky section links get a slightly smaller font so they fit */
@media (max-width: 359px) {
    main table, .js-pin-container table { display: block; max-width: 100%; overflow-x: auto; }
    .singleMenu__links a { font-size: 14px; }
}

/* Tour / vehicle pages without an admin FAQ (include/faq-auto.php): Call / WhatsApp help strip under the FAQ.
   The buttons are the sidebar's own .get-det / .card-what buttons, sized for a row. */
.tt-help {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px; background: var(--color-light-3, #FBFBFB);
}
.tt-help__text p { margin: 0; }
.tt-help__text p + p { margin-top: 2px; }
.tt-help__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-help__btns .get-det,
.tt-help__btns .card-what {
    width: auto; min-width: 150px; min-height: 44px; padding: 10px 18px;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 500;
}
@media (max-width: 575px) {
    .tt-help__btns { width: 100%; }
    .tt-help__btns .get-det,
    .tt-help__btns .card-what { flex: 1 1 100%; }
}

/* Banner (breadcrumb) photos uploaded in admin: a little darker so the white page name stays readable */
/* purgecss ignore */
.pageHeader__bg img[src*="/banner_"] { filter: brightness(.85); }

/* Page name on the banner photo: a soft frosted panel behind the text so it stays readable on any photo */
.pageHeader.-type-1 .pageHeader__content {
    display: table; margin: 0 auto; max-width: 100%;
    padding: 14px 40px 18px; border-radius: 16px;
    background: rgba(11, 31, 58, .42); border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (max-width: 767px) {
    .pageHeader.-type-1 .pageHeader__content { padding: 10px 18px 14px; border-radius: 12px; }
}

/* Heading only for screen readers (keeps the heading order h1 > h2 > h3 on listing pages) */
/* purgecss ignore */
.tt-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* "View More" card button: the link fills the whole button, so the whole button is one tap target */
.pac-btm .pac-btm-btn2 > a { display: block; margin: -4px; padding: 4px; }

/* Inner page banner (breadcrumb) starts below the fixed header, so the photo and title are not hidden behind it */
.pageHeader.-type-1 { margin-top: 88px; padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 767px) {
    .pageHeader.-type-1 { margin-top: 65px; padding-top: 56px; padding-bottom: 56px; }
}