/* ===========================================================================
   site.css — BestFriend Holiday design layer.

   main.css is the untouched vendor Entrada theme (Bootstrap 3, 2014). Rather
   than fight it selector-by-selector, the site's own sections use their own
   class names (.section, .tour-card, .hero…) and this file owns them outright.
   Only a handful of rules below override theme selectors, and those are marked.

   Palette is taken from the company logo: burnt gold, deep brown, savannah
   cream, with a dark green ink for type.
   =========================================================================== */

:root {
    --gold: #c8952f;
    --gold-dark: #a97a20;
    /* Small uppercase text needs 4.5:1; --gold-dark only reaches 3.8:1 on white. */
    --gold-text: #8a6216;
    --gold-soft: #f6ecd9;
    --brown: #4a2c17;
    --ink: #1d2a1f;
    --ink-soft: #55605a;
    --cream: #faf6ef;
    --line: #e6e0d6;
    --white: #fff;

    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 2px 4px rgba(29, 42, 31, .04), 0 12px 28px rgba(29, 42, 31, .07);
    --shadow-lg: 0 4px 8px rgba(29, 42, 31, .06), 0 24px 48px rgba(29, 42, 31, .13);
    --ease: cubic-bezier(.2, .7, .3, 1);

    --head-font: 'Fraunces', Georgia, 'Times New Roman', serif;
    --body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --- Base ---------------------------------------------------------------- */

body {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .hero h1, .section-head h2 {
    font-family: var(--head-font);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.18;
}

a { color: var(--gold-text); }
a:hover, a:focus { color: var(--brown); text-decoration: none; }

img { max-width: 100%; }

::selection { background: var(--gold); color: #fff; }

/* Visible focus for keyboard users (the theme removes outlines entirely). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--ink);
    color: #fff;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }

/* --- Buttons ------------------------------------------------------------- */

.btn-bfh {
    display: inline-block;
    padding: 14px 30px;
    border: 2px solid var(--gold);
    border-radius: 100px;
    background: var(--gold);
    color: #fff;
    font-family: var(--body-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    transition: all .25s var(--ease);
    cursor: pointer;
}

.btn-bfh:hover, .btn-bfh:focus {
    background: var(--gold-dark);
    border-color: var(--gold-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(169, 122, 32, .3);
}

.btn-bfh-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .75);
    color: #fff;
}
.btn-bfh-ghost:hover, .btn-bfh-ghost:focus {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

.btn-bfh-outline {
    background: transparent;
    border-color: var(--gold);
    color: var(--gold-dark);
}
.btn-bfh-outline:hover, .btn-bfh-outline:focus { background: var(--gold); color: #fff; }

.btn-bfh-light { background: #fff; border-color: #fff; color: var(--ink); }
.btn-bfh-light:hover, .btn-bfh-light:focus { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--brown); }

/* --- Header (overrides theme #header) ------------------------------------ */

#header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    /* jquery.main.js pins a pixel height on the fixed header for the theme's own
       layout; this header sizes from its content instead. */
    height: auto !important;
    background: linear-gradient(to bottom, rgba(15, 20, 16, .55), transparent);
    border: 0;
    transition: background .3s var(--ease), box-shadow .3s var(--ease);
}

/* Fully opaque: a translucent bar + backdrop-filter composited unpredictably
   over the page imagery behind it. */
#header.site-header.is-scrolled {
    background: #fff;
    box-shadow: 0 2px 20px rgba(29, 42, 31, .1);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 26px;
}

/* Theme sets .logo to a 180px bordered float — replaced here. */
#header .logo {
    flex: 0 0 auto;
    width: auto;
    float: none;
    margin: 0;
    padding: 12px 0;
    border: 0;
}

/* main.css uses a full-height ::before spacer to vertically centre the mark;
   this header uses flexbox, so the spacer only inflates the box. */
#header .logo:before { content: none; }

/* Needs the .site-header class to out-specify main.css's
   `#header.fixed-position .logo a { width: 120px }`, which otherwise clips the
   wordmark out of the flex box and lets it overlap the menu. */
#header.site-header .logo a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
}

#header .logo img { display: block; width: auto; height: 64px; }

/* Fixed width so the header geometry doesn't shift when Fraunces swaps in over
   the (wider) Georgia fallback — that shift is what let the wordmark collide
   with the menu on a slow font load. */
.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 180px;
    line-height: 1.15;
    white-space: nowrap;
}
.logo-text strong {
    font-family: var(--head-font);
    font-size: 19px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    transition: color .3s var(--ease);
}
.logo-text small {
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    transition: color .3s var(--ease);
}
#header.is-scrolled .logo-text strong { color: var(--ink); text-shadow: none; }
#header.is-scrolled .logo-text small { color: var(--gold-text); text-shadow: none; }

#header .site-nav { margin: 0; border: 0; background: none; min-height: 0; }
#header .site-nav .navbar-nav { display: flex; align-items: center; float: none; margin: 0; }

/* main.css puts `padding: 40px 14px 0` on these until its own `.fixed-position`
   class kicks in on scroll — that made the row 102px tall and stretched the CTA
   pill from 44px to 62px, so the button changed size as you scrolled. Zero the
   padding and centre each item instead, so the height is identical either way. */
#header .site-nav .navbar-nav > li {
    display: flex;
    align-items: center;
    float: none;
    padding: 0;
}

/* Needs .site-header to out-specify main.css's
   `#header.fixed-position .navbar-default .navbar-nav > li > a { height: 44px }`,
   which pairs with a `height: 62px` rule above 1230px. Those two fixed heights
   are what made the "Plan my trip" pill change size as the page scrolled. */
#header.site-header .site-nav .navbar-nav > li > a {
    height: auto;
    padding: 10px 13px;
    line-height: 20px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
    background: none;
    transition: color .2s var(--ease);
}

#header.site-header .site-nav .navbar-nav > li > a:hover,
#header.site-header .site-nav .navbar-nav > li.active > a { color: var(--gold); }

#header.site-header.is-scrolled .site-nav .navbar-nav > li > a { color: var(--ink); text-shadow: none; }
#header.site-header.is-scrolled .site-nav .navbar-nav > li > a:hover { color: var(--gold-dark); }

/* Specificity has to beat `#header .site-nav .navbar-nav > li > a`, which sets
   `background: none` — otherwise the pill renders white-on-white. */
.nav-cta-item { margin-left: 10px; }
#header.site-header .site-nav .navbar-nav > li.nav-cta-item > a.nav-cta {
    display: inline-block;
    height: auto;
    padding: 11px 22px;
    border-radius: 100px;
    background: var(--gold);
    color: #fff;
    text-shadow: none;
    transition: all .25s var(--ease);
}
#header.site-header .site-nav .navbar-nav > li.nav-cta-item > a.nav-cta:hover,
#header.site-header .site-nav .navbar-nav > li.nav-cta-item > a.nav-cta:focus {
    background: var(--gold-dark);
    color: #fff;
    transform: translateY(-1px);
}

#header .navbar-toggle { border-color: rgba(255, 255, 255, .6); margin: 14px 0; }
#header .navbar-toggle .icon-bar { background: #fff; }
#header.is-scrolled .navbar-toggle { border-color: var(--line); }
#header.is-scrolled .navbar-toggle .icon-bar { background: var(--ink); }

/* The inline menu is ~940px wide and never wraps (nowrap keeps the labels
   readable), so the header only has room for the full lockup above ~1360px.
   Below that drop the wordmark, and below 1200px switch to the burger — rather
   than relying on a few pixels of slack that a slow web font would swallow. */
@media (min-width: 1200px) and (max-width: 1359px) {
    .logo-text { display: none; }
    #header .site-nav .navbar-nav > li > a { padding: 10px 11px; font-size: 12px; }
}

@media (max-width: 1199px) {
    /* bootstrap.css hides .navbar-toggle from 768px up and forces the collapse
       panel open — both have to be undone to move the burger breakpoint here. */
    #header .navbar-toggle { display: block; }

    /* Keep the mark and the burger on one row; the panel wraps beneath. */
    .header-inner { flex-wrap: wrap; align-items: center; padding: 6px 16px; }
    #header .logo { flex: 1 1 auto; }
    #header .logo img { height: 52px; }
    #header .site-nav { flex: 0 0 auto; }
    #header .site-nav .navbar-header { display: flex; align-items: center; margin-left: 0; margin-right: 0; }
    /* main.css absolutely positions .navbar-toggle at left:20px/top:-52px, which
       lands it off-canvas inside this flex header — put it back in flow. */
    #header .site-nav .navbar-toggle {
        position: static;
        float: none;
        margin: 0;
        left: auto;
        top: auto;
    }
    /* main.css zeroes #header .container-fluid padding below 991px. */
    #header .container-fluid.header-inner { padding: 6px 16px; }
    .logo-text { width: auto; }
    .logo-text strong { font-size: 17px; }
    /* The collapse panel lives inside the (narrow) burger column, so drop it out
       of flow and pin it across the full header width instead. #header is fixed,
       which makes it the containing block. */
    #header .site-nav { position: static; }
    #header .site-nav .navbar-collapse {
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(100% + 4px);
        width: auto;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        margin: 0;
        padding: 0;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-lg);
    }
    #header .site-nav .navbar-collapse.collapse:not(.in) { display: none !important; }
    #header .site-nav .navbar-nav { display: block; padding: 8px 0; }
    #header .site-nav .navbar-nav > li > a,
    #header.is-scrolled .site-nav .navbar-nav > li > a { color: var(--ink); text-shadow: none; padding: 12px 20px; }
    .nav-cta-item { margin: 0; padding: 10px 16px 14px; }
    #header .site-nav .navbar-nav > li.nav-cta-item > a.nav-cta { display: block; text-align: center; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero { position: relative; min-height: 100vh; max-height: 900px; overflow: hidden; background: var(--ink); }

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero:not(.js-hero-slider) .hero-slide { position: relative; opacity: 1; visibility: visible; }

.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(12, 18, 13, .82) 0%, rgba(12, 18, 13, .5) 45%, rgba(12, 18, 13, .15) 100%),
        linear-gradient(to top, rgba(12, 18, 13, .6) 0%, transparent 45%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 100vh;
    max-height: 900px;
    padding: 120px 0 90px;
}

.hero-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
}

.hero h1 {
    max-width: 15ch;
    margin: 0 0 20px;
    font-size: clamp(38px, 5.4vw, 76px);
    color: #fff;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}

.hero-sub {
    max-width: 52ch;
    margin: 0 0 32px;
    font-size: clamp(16px, 1.35vw, 19px);
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.hero-dots button {
    width: 34px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .4);
    cursor: pointer;
    transition: background .25s var(--ease), width .25s var(--ease);
}
.hero-dots button.active { background: var(--gold); width: 52px; }

@media (max-width: 767px) {
    .hero, .hero-inner { min-height: 78vh; }
    .hero-inner { padding: 100px 0 70px; text-align: left; }
    .hero-slide::after { background: linear-gradient(to top, rgba(12, 18, 13, .9) 0%, rgba(12, 18, 13, .45) 70%); }
}

/* --- Trust strip --------------------------------------------------------- */

.trust-strip { background: var(--ink); color: rgba(255, 255, 255, .8); padding: 26px 0; }
.trust-strip ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.trust-strip li {
    flex: 1 1 25%;
    min-width: 210px;
    padding: 10px 22px;
    border-left: 1px solid rgba(255, 255, 255, .12);
}
.trust-strip li:first-child { border-left: 0; padding-left: 0; }
.trust-strip i { color: var(--gold); font-size: 20px; margin-bottom: 8px; display: block; }
.trust-strip strong { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.trust-strip span { font-size: 13px; }

@media (max-width: 767px) {
    .trust-strip li { flex: 1 1 50%; border-left: 0; padding: 12px 10px; }
}

/* --- Sections ------------------------------------------------------------ */

.section { padding: 92px 0; }
.section-alt { background: var(--cream); }

.section-head { max-width: 660px; margin: 0 auto 52px; text-align: center; }

.section-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.section-head h2 { margin: 0 0 14px; font-size: clamp(28px, 3.2vw, 42px); }
.section-head p { margin: 0; font-size: 17px; }
.section-foot { margin-top: 44px; text-align: center; }

/* --- Tour cards ---------------------------------------------------------- */

.tour-grid { display: flex; flex-wrap: wrap; }
.tour-card-col { display: flex; margin-bottom: 30px; }

.tour-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.tour-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

.tour-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--gold-soft); }
.tour-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.tour-card:hover .tour-card-media img { transform: scale(1.07); }

.tour-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(12, 18, 13, .78);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tour-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }

.tour-route {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-text);
}

.tour-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; }
.tour-card h3 a { color: var(--ink); }
.tour-card h3 a:hover { color: var(--gold-text); }
.tour-card p { margin: 0 0 20px; font-size: 14.5px; }

.tour-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.tour-price { font-family: var(--head-font); font-size: 19px; font-weight: 600; color: var(--ink); }
.tour-price small { display: block; font-family: var(--body-font); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.tour-link { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tour-link i { transition: transform .25s var(--ease); display: inline-block; }
.tour-card:hover .tour-link i { transform: translateX(4px); }

/* --- Feature cards ------------------------------------------------------- */

.feature-grid { display: flex; flex-wrap: wrap; }
.feature-grid > div { margin-bottom: 26px; display: flex; }

.feature-card {
    width: 100%;
    padding: 34px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-card-flat { background: var(--cream); border-color: transparent; }
.section-alt .feature-card { background: #fff; }

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-dark);
    font-size: 26px;
}

.feature-card h3 { margin: 0 0 10px; font-size: 18px; }
.feature-card p { margin: 0; font-size: 14.5px; }

/* --- Destinations -------------------------------------------------------- */

.dest-grid > div { margin-bottom: 26px; }

.dest-card {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink);
}
.dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dest-card:hover img { transform: scale(1.08); }

.dest-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 18, 13, .88) 0%, rgba(12, 18, 13, .1) 55%, transparent 100%);
}

.dest-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 20px; color: #fff; }
.dest-overlay small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.dest-overlay strong { display: block; font-family: var(--head-font); font-size: 20px; line-height: 1.25; }
.dest-overlay em { display: block; margin-top: 5px; font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .82); }

/* --- Stats --------------------------------------------------------------- */

.stats-band { padding: 66px 0; background: var(--brown); }
.stat-item { text-align: center; padding: 14px 0; }
.stat-value { display: block; font-family: var(--head-font); font-size: clamp(34px, 4vw, 52px); font-weight: 600; color: var(--gold); line-height: 1; }
.stat-label { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }

/* --- Quotes -------------------------------------------------------------- */

.quote-card {
    height: 100%;
    margin: 0 0 26px;
    padding: 30px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    font-size: 15.5px;
}
.quote-stars { color: var(--gold); margin-bottom: 12px; font-size: 13px; }
.quote-card p { margin: 0 0 18px; font-style: italic; color: var(--ink); }
.quote-card cite { display: block; font-style: normal; }
.quote-card cite strong { display: block; font-size: 14px; color: var(--ink); }
.quote-card cite span { font-size: 12.5px; color: var(--ink-soft); }

/* --- Gallery ------------------------------------------------------------- */

.gallery-grid > div { margin-bottom: 24px; }
.gallery-thumb { display: block; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 4 / 3; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-thumb:hover img { transform: scale(1.07); }
.gallery-caption { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }

/* --- CTA band ------------------------------------------------------------ */

.cta-band { padding: 84px 0; background: var(--ink); text-align: center; color: rgba(255, 255, 255, .85); }
.cta-band h2 { margin: 0 0 14px; color: #fff; font-size: clamp(28px, 3.2vw, 40px); }
.cta-band p { max-width: 56ch; margin: 0 auto 30px; font-size: 17px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --- Page banner --------------------------------------------------------- */

.page-banner { position: relative; padding: 190px 0 90px; background: var(--ink); overflow: hidden; }
.page-banner .banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 18, 13, .85), rgba(12, 18, 13, .45));
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner h1 { margin: 0 0 10px; color: #fff; font-size: clamp(32px, 4.4vw, 56px); }
.page-banner p { margin: 0; font-size: 17px; color: rgba(255, 255, 255, .88); }

.breadcrumbs-bfh { margin-bottom: 14px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.breadcrumbs-bfh a { color: rgba(255, 255, 255, .7); }
.breadcrumbs-bfh a:hover { color: var(--gold); }
.breadcrumbs-bfh span { color: var(--gold); }

@media (max-width: 767px) { .page-banner { padding: 140px 0 60px; } }

/* --- Filter pills -------------------------------------------------------- */

.filter-tabs { list-style: none; padding: 0; margin: 0 0 40px; text-align: center; }
.filter-tabs li { display: inline-block; margin: 0 5px 10px; }
.filter-tabs li a {
    display: block;
    padding: 10px 22px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: all .25s var(--ease);
}
.filter-tabs li.active a,
.filter-tabs li a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* --- Tour detail --------------------------------------------------------- */

.tour-hero { position: relative; padding: 200px 0 80px; background: var(--ink); overflow: hidden; }
.tour-hero .tour-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 18, 13, .9) 10%, rgba(12, 18, 13, .35) 100%); }
.tour-hero .container { position: relative; z-index: 2; }
.tour-hero h1 { margin: 8px 0 14px; color: #fff; font-size: clamp(30px, 4vw, 52px); max-width: 20ch; }
.tour-hero .tour-route { color: var(--gold); font-size: 12px; }

.tour-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 28px; padding: 0; list-style: none; }
.tour-facts li {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 100px;
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 13.5px;
}
.tour-facts i { color: var(--gold); }
.tour-facts strong { font-weight: 600; }

.tour-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tour-hero-price { color: #fff; font-family: var(--head-font); font-size: 26px; margin-right: 8px; }
.tour-hero-price small { display: block; font-family: var(--body-font); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

.tour-body { padding: 76px 0; }
.tour-body h2 { font-size: 27px; margin: 0 0 18px; }
.tour-body h3 { font-size: 19px; margin: 34px 0 12px; }
.tour-prose { font-size: 16.5px; color: var(--ink-soft); }
.tour-prose p { margin-bottom: 16px; }

.tour-aside {
    position: sticky;
    top: 110px;
    padding: 28px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.tour-aside h3 { margin: 0 0 6px; font-size: 20px; }
.tour-aside p { font-size: 14.5px; }
.tour-aside .btn-bfh { width: 100%; text-align: center; margin-top: 8px; }
.tour-aside-contact { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14px; }
.tour-aside-contact li { margin-bottom: 8px; }
.tour-aside-contact i { color: var(--gold-dark); width: 18px; }

.inc-list { list-style: none; padding: 0; margin: 0; }
.inc-list li { position: relative; padding-left: 30px; margin-bottom: 11px; font-size: 15px; }
.inc-list li::before {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 1px;
    color: #3d8b46;
}
.exc-list li::before { content: '\f00d'; color: #c0563f; }

/* Itinerary timeline */
.itinerary { list-style: none; margin: 0; padding: 0; }
.itinerary > li { position: relative; padding: 0 0 28px 40px; border-left: 2px solid var(--line); }
.itinerary > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.itinerary > li::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-soft);
}
.itin-day { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 3px; }
.itin-title { display: block; font-family: var(--head-font); font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.itin-body { font-size: 15px; }

@media (max-width: 991px) {
    .tour-aside { position: static; margin-top: 36px; }
}
@media (max-width: 767px) {
    .tour-hero { padding: 150px 0 56px; }
    .section { padding: 62px 0; }
    .tour-body { padding: 52px 0; }
}

/* Bulleted text produced by rich_text() */
.rich-list { list-style: none; padding: 0; margin: 0 0 16px; }
.rich-list li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.rich-list li::before { content: ''; position: absolute; left: 4px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.itin-body p:last-child, .itin-body .rich-list:last-child { margin-bottom: 0; }

/* --- Contact ------------------------------------------------------------- */

.contact-card {
    padding: 34px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.contact-form .form-group { margin-bottom: 18px; }
.contact-form label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.contact-form .form-control {
    height: 50px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-size: 15px;
    color: var(--ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-form textarea.form-control { height: auto; }
.contact-form .form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 149, 47, .16); }

.contact-tiles { list-style: none; padding: 0; margin: 0 0 26px; }
.contact-tiles li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-tiles li:last-child { border-bottom: 0; }
.contact-tiles i {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold-dark);
}
.contact-tiles strong { display: block; font-size: 13px; color: var(--ink); }
.contact-tiles a, .contact-tiles address { font-size: 15px; margin: 0; color: var(--ink-soft); }

/* --- Footer -------------------------------------------------------------- */

/* main.css sets `#footer { display: table-footer-group }` for the theme's own
   sticky-footer trick. Inside this layout that made the footer a table row group
   sized to the table (1200px), leaving a white band across the rest of the page.
   Also clears the theme's tiled background image. */
#footer.site-footer {
    display: block;
    width: auto;
    background: var(--ink);
    background-image: none;
    color: rgba(255, 255, 255, .68);
    padding: 74px 0 0;
}
/* Match the header's 1380px lockup so the two line up on wide screens
   (Bootstrap's .container would otherwise cap the footer at 1170px). */
#footer.site-footer > .container,
#footer.site-footer .footer-bottom-inner {
    width: 100%;
    max-width: 1380px;
    padding-left: 26px;
    padding-right: 26px;
}

.footer-cols { display: flex; flex-wrap: wrap; }
.footer-col { margin-bottom: 34px; }
.footer-col h3 { margin: 0 0 18px; font-size: 15px; color: #fff; letter-spacing: .02em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 11px; font-size: 14.5px; }
.footer-col a { color: rgba(255, 255, 255, .68); transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--gold); }

.footer-brand img { margin-bottom: 16px; height: 66px; width: auto; }
.footer-brand p { font-size: 14.5px; max-width: 34ch; }

.footer-contact i { color: var(--gold); width: 20px; }
.footer-contact address { display: inline; font-style: normal; }

.social-list { display: flex; gap: 10px; margin-top: 18px !important; }
.social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 17px;
    transition: all .25s var(--ease);
}
.social-list a:hover { background: var(--gold); color: #fff; transform: translateY(-2px); }

.footer-bottom { margin-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 15px;
    font-size: 13px;
}
.payment-option { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; opacity: .8; }

/* --- WhatsApp ------------------------------------------------------------ */

/* Circular icon button with an expanding pulse ring. Sits bottom-LEFT so it
   never collides with the theme's bottom-right scroll-to-top. Brand green is
   fine here — it's an icon graphic, not body text, so the text-contrast rule
   that made the old pill dark doesn't apply. */
.whatsapp-float {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 60;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 10px 28px rgba(37, 211, 102, .45);
    animation: waPulse 2.4s infinite;
    transition: transform .25s var(--ease);
}
.whatsapp-float:hover { color: #fff; transform: scale(1.08); }
.whatsapp-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* label kept for screen readers */

@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (max-width: 767px) {
    .whatsapp-float { left: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float { animation: none; }
}

/* --- Blog ---------------------------------------------------------------- */

.post-meta { display: block; margin-bottom: 12px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--gold-text); }
.post-body { font-size: 16.5px; }
.post-body p { margin-bottom: 18px; }
.post-body img { border-radius: var(--radius-sm); }

/* --- Utility ------------------------------------------------------------- */

.alert { border-radius: var(--radius-sm); border: 0; padding: 16px 20px; font-size: 15px; }
.alert-success { background: #eaf6ec; color: #256b31; }
.alert-danger { background: #fdeeea; color: #a3372a; }

.empty-note { text-align: center; padding: 50px 0; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}