/* ==========================================================================
   Roam Balkan — shared stylesheet for all public pages
   ========================================================================== */

/* Self-hosted variable fonts (no visitor data sent to Google) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display-var.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary-dark: #0f2a4a;
    /* Teal for text, links and buttons: 5.3:1 on white (WCAG AA).
       The brighter original teal is kept for decorative, non-text uses only. */
    --accent-teal: #007782;
    --accent-teal-hover: #005f68;
    --accent-teal-bright: #00a8b5;
    --bg-light: #f6f9fc;
    --bg-alt: #eef4f8;
    --text-muted: #5c6b73;
}

html {
    scroll-padding-top: 110px; /* keep anchored headings clear of the fixed navbar */
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #ffffff;
    color: var(--primary-dark);
    /* Safety net for decorative elements that can poke past the viewport
       (map pin tooltips near the right edge). Fix overflow at the source
       first — this only catches what slips through. */
    overflow-x: hidden;
}

/* Pages without a hero start under the fixed navbar — clear it.
   theme.js also gives the navbar a solid background on those pages.
   .search-hero counts as a hero here: it clears the navbar itself (via its
   own padding) so the navbar can sit transparent over its full cover. */
body:not(:has(.hero-section, .search-hero)) {
    padding-top: 84px;
}

h1, h2, h3, h4, .serif-font {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
}

/* Bootstrap derives a .row's negative side margins from the row's OWN gutter,
   but .container's padding is fixed at 12px. A .g-5 row (24px margins) therefore
   hangs 12px past its container on each side. From sm up the container has
   slack to absorb that; below sm it is full-bleed, so the overhang becomes
   horizontal page overflow — a strip of empty page beside every screen. The
   columns are stacked at this width, so the horizontal gutter buys nothing;
   the vertical one (--bs-gutter-y) is left alone. */
@media (max-width: 575.98px) {
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* -----------------------------------
   ACCESSIBILITY BASICS
   ----------------------------------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 2000;
    background: var(--primary-dark);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    color: #fff;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--accent-teal-bright);
    outline-offset: 2px;
}

.visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* -----------------------------------
   TOP NAVBAR (fixed; gains a solid background on scroll)
   ----------------------------------- */
.top-navbar {
    z-index: 1030;
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.top-navbar.navbar-scrolled {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(15, 42, 74, 0.25);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

body:not(:has(.hero-section, .search-hero)) .top-navbar {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(15, 42, 74, 0.25);
}

/* Text stand-in for the logo image. Sized to roughly match the 160px mark it
   replaces, so the navbar keeps its proportions until the artwork returns. */
.brand-wordmark {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
}
.brand-wordmark:hover,
.brand-wordmark:focus {
    color: #ffffff;
}

.top-navbar .nav-link {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    position: relative;
    padding: 0.6rem 0.25rem; /* comfortable click/tap target */
    color: rgba(255, 255, 255, 0.92) !important;
}

.top-navbar .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: #ffffff;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateX(-50%);
}
.top-navbar .nav-link:hover::after,
.top-navbar .nav-link:focus-visible::after,
/* Where you are, kept on rather than revealed on hover. Driven off the same
   aria-current the markup sets, so the visual state cannot drift from the one
   a screen reader announces. */
.top-navbar .nav-link[aria-current]::after {
    width: 100%;
}
.top-navbar .nav-link:hover {
    color: #ffffff !important;
}

/* Scoped below lg so this cannot override Bootstrap's `display: none`
   for .navbar-expand-lg togglers on desktop */
@media (max-width: 991.98px) {
    .top-navbar .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.btn-nav-cta {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    border-radius: 50px;
    padding: 0.45rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-nav-cta:hover,
.btn-nav-cta:focus-visible {
    background-color: #ffffff;
    color: var(--primary-dark);
}

body:has(.offcanvas.show) .navbar-brand,
body:has(.offcanvas.show) .navbar-toggler {
    visibility: hidden;
}

.offcanvas-premium {
    background-color: var(--primary-dark);
    color: white;
    /* Bootstrap's flat 400px is wider than a 375px iPhone or a 360px Android,
       leaving no backdrop to tap and no way to dismiss by tapping outside.
       Set through Bootstrap's own custom property rather than `width`: it sizes
       the panel from `.offcanvas.offcanvas-end`, two classes deep, which
       outranks this single-class rule no matter how late it is declared. The
       variable is the supported seam and needs no specificity contest. */
    --bs-offcanvas-width: min(400px, 85vw);
}
.offcanvas-premium .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    min-width: 44px;
    min-height: 44px;
}
.offcanvas-premium .nav-link {
    font-size: 1.2rem;
    padding: 0.75rem 1rem;
    color: #fff;
}
/* A phone held sideways leaves ~390px of drawer height, and the menu was
   overrunning it by a few pixels. It scrolls rather than clips, but a menu
   this short should not need scrolling at all — take it out of the row
   spacing, which is the one thing here with room to give. Rows stay at 45px,
   still clear of the 44px floor. */
@media (max-height: 460px) {
    .offcanvas-premium .nav-link {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}
.offcanvas-premium .nav-link:hover,
.offcanvas-premium .nav-link:focus-visible {
    color: var(--accent-teal-bright);
}
/* Opening the drawer used to say nothing about where you already were */
.offcanvas-premium .nav-link[aria-current] {
    color: var(--accent-teal-bright);
    font-weight: 600;
}

/* -----------------------------------
   LANGUAGE SWITCHER (code pill opens a menu of language names)
   A segmented pill of locale codes stopped scaling past two languages — four
   codes crowd the navbar and read as jargon. The pill now holds only the
   current code and opens the full list, spelled the way each language spells
   itself.
   ----------------------------------- */
.lang-switch-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background-color: var(--bg-light);
    border: 1px solid rgba(15, 42, 74, 0.12);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
    color: var(--primary-dark);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.lang-switch-toggle:hover,
.lang-switch-toggle:focus-visible {
    background-color: #ffffff;
    color: var(--accent-teal);
}
.lang-switch-caret {
    transition: transform 0.3s ease;
}
.lang-switch-toggle[aria-expanded="true"] .lang-switch-caret {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .lang-switch-caret {
        transition: none;
    }
}

/* The panel is navy in both places: over the photo hero it would be the only
   pale chrome on a transparent navbar, and in the drawer it sits on the navy
   offcanvas. Lifted a shade off --primary-dark with a hairline so it still
   reads as a panel against the drawer rather than melting into it.
   (This absorbed the old .top-navbar .dropdown-menu/.dropdown-item rules — the
   switcher is the only dropdown in the navbar, and the drawer copy lives
   outside .top-navbar, so one block now dresses both.) */
.lang-switch-menu {
    --bs-dropdown-min-width: 11rem;
    --bs-dropdown-padding-y: 0.5rem;
    --bs-dropdown-border-radius: 14px;
    --bs-dropdown-bg: #17395f;
    --bs-dropdown-border-color: rgba(255, 255, 255, 0.16);
    --bs-dropdown-box-shadow: 0 12px 32px rgba(4, 15, 30, 0.45);
    /* The current language is marked by the check and the weight below, not by
       a filled row — a filled row in a four-item menu just reads as hover. */
    --bs-dropdown-link-active-bg: transparent;
    --bs-dropdown-link-active-color: #ffffff;
}
.lang-switch-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* 44px tap target: this is a menu of small words, and it is the control
       most likely to be reached for by someone who cannot read the page. */
    min-height: 44px;
    padding: 0.4rem 1.1rem;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* White, not the teal the nav links use for hover: teal-bright manages 4.96:1
   on --primary-dark but only 4.04:1 on this lighter panel, under the 4.5:1 AA
   floor for text. The background tint carries the hover signal instead, and the
   teal stays on the check — a graphic, held to 3:1. */
.lang-switch-option:hover,
.lang-switch-option:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.lang-switch-option.active {
    color: #ffffff;
    font-weight: 700;
}
.lang-switch-check {
    color: var(--accent-teal-bright);
    font-size: 1rem;
    line-height: 1;
}

/* Drawer copy. Sized up to the drawer's own scale, and placed by CSS rather
   than Popper (the button carries data-bs-display="static"): Popper anchors the
   panel to the pill's left edge, which is off-centre in a centred drawer, and
   it measures headroom against .offcanvas-body — which scrolls, so it can place
   the panel where the visitor would only find it by scrolling. Opening upward
   is unconditional here because the switcher is the drawer's last item. */
.lang-switch-drawer .lang-switch-toggle {
    font-size: 0.95rem;
    min-height: 44px;
    padding: 0.5rem 1.15rem;
}
.lang-switch-drawer .lang-switch-menu {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.6rem;
}

/* -----------------------------------
   HERO
   ----------------------------------- */
.hero-section {
    /* Background artwork is page-scoped (see each view's metaTags block) so
       different pages can reuse this layout with their own image. */
    background-color: var(--primary-dark);
    background-size: cover;
    background-position: center;
    height: 85vh;
    height: 85svh;
    min-height: min(480px, 100svh); /* never taller than one screen on short landscape phones */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hero-section.hero-short {
    height: 70vh;
    height: 70svh;
    min-height: min(420px, 100svh);
}

.hero-title {
    font-size: clamp(2.6rem, 6vw + 0.5rem, 5.5rem);
    color: #ffffff;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
}

.hero-subtitle {
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    max-width: 600px;
    margin: 0 auto;
}

.hero-eyebrow {
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.9);
}
/* The category in a tour's eyebrow links to its listing. It must inherit the
   eyebrow colour — the default link blue is unreadable over the hero image —
   so the underline is what marks it as a link at all. */
.hero-eyebrow a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.hero-eyebrow a:hover,
.hero-eyebrow a:focus-visible {
    border-bottom-color: rgba(255, 255, 255, 0.95);
}

.scroll-prompt {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    animation: bounce 2s infinite;
    text-decoration: none;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-12px) translateX(-50%); }
    60% { transform: translateY(-6px) translateX(-50%); }
}

/* -----------------------------------
   TYPOGRAPHY UTILITIES
   ----------------------------------- */
.section-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent-teal);
    font-weight: 600;
    display: block;
    margin-bottom: 1rem;
}
.section-tag-sm {
    font-size: 0.68rem;
    margin-bottom: 0.5rem;
}

/* Uppercase set at 2.5px of tracking stops being readable somewhere around
   12px, and these eyebrows were sitting at 10.9px. Hold a 12px floor on
   phones; the tighter desktop size is untouched. (The matching rule for
   .fact-list dt sits with that block — media queries add no specificity, so it
   has to come after the declaration it overrides.) */
@media (max-width: 767.98px) {
    .section-tag-sm {
        font-size: 0.75rem;
    }
}

/* Legible soft-white for secondary text on navy surfaces (Bootstrap's
   .text-white-50 measures ~4.1:1 there — below AA) */
.text-soft {
    color: rgba(255, 255, 255, 0.85);
}

.lede {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* -----------------------------------
   SCROLL REVEAL (JS-gated: without JS everything stays visible)
   ----------------------------------- */
.js .reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.js .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}
.js .delay-1 { transition-delay: 0.1s; }
.js .delay-2 { transition-delay: 0.2s; }
.js .delay-3 { transition-delay: 0.3s; }

/* -----------------------------------
   DESTINATION / POST CARDS
   ----------------------------------- */
.destination-card {
    background: #ffffff;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(15, 42, 74, 0.06);
    box-shadow: 0 8px 24px rgba(15, 42, 74, 0.05);
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.destination-card:hover,
.destination-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 42, 74, 0.12);
}

.destination-card .img-wrapper {
    height: 260px;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    box-shadow: none;
}
/* Two-class selector so the generic tour-page `.img-wrapper img` sizing
   further down cannot override card thumbnails */
.destination-card .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.destination-card:hover img {
    transform: scale(1.06);
}

.destination-card .card-body {
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-price {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-dark);
}
.card-price small {
    color: var(--text-muted);
    font-weight: 400;
}

.destination-card .tour-link {
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--accent-teal);
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}
.destination-card:hover .tour-link {
    color: var(--accent-teal-hover);
}
.destination-card .tour-link i {
    transition: transform 0.3s ease;
}
.destination-card:hover .tour-link i {
    transform: translateX(5px);
}

/* Legacy post thumbnails (search results, older listings) */
.post-img {
    height: 240px;
    width: 100%;
    object-fit: cover;
}

/* -----------------------------------
   MAP SECTION
   ----------------------------------- */
.map-section {
    background-color: var(--bg-light);
    border-top: 1px solid rgba(15, 42, 74, 0.03);
    border-bottom: 1px solid rgba(15, 42, 74, 0.03);
}

/* The country is ~2.3x taller than it is wide, so the width cap is what keeps
   the map from running past the text column beside it: 300px wide ≈ 680px tall. */
.map-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* At 300px the map stands 679px tall — most of a phone screen spent on a
   drawing whose only interaction (pin <-> list <-> county) is bound to hover
   and so never fires on touch. Half the width halves the cost; the list below
   still names all five places. */
@media (max-width: 767.98px) {
    .map-container {
        max-width: 200px;
    }
}

.stylized-map {
    width: 100%;
    height: auto;
}

/* One path per county. At this width a viewBox unit is about a pixel, so the
   hairline stroke reads as a border rather than a drawn outline. */
.stylized-map path {
    fill: #e0ecef;
    stroke: var(--accent-teal-bright); /* decorative line, not text */
    stroke-width: 1;
    stroke-linejoin: round;
    transition: fill 0.3s ease;
}
.stylized-map path.is-active {
    fill: #c2dde2;
}

/* Pins keep a 32px hover/touch area around a 14px dot */
.map-pin {
    position: absolute;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    text-decoration: none;
}
.map-pin .dot {
    width: 14px;
    height: 14px;
    background-color: var(--primary-dark);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(15, 42, 74, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.map-pin::after {
    content: attr(data-label);
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--primary-dark);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.map-pin:hover .dot,
.map-pin:focus-visible .dot,
.map-pin.is-active .dot {
    background-color: var(--accent-teal);
    box-shadow: 0 0 0 6px rgba(0, 119, 130, 0.2);
    transform: scale(1.2);
}
.map-pin:hover,
.map-pin:focus-visible,
.map-pin.is-active {
    z-index: 10;
}
.map-pin:hover::after,
.map-pin:focus-visible::after,
.map-pin.is-active::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.map-list {
    list-style: none;
    padding: 0;
}
.map-list li {
    margin-bottom: 0.5rem;
}
.map-list [data-pin] {
    position: relative;
    display: inline-block;
    padding: 0.35rem 0 0.35rem 2rem;
    font-size: 1.15rem;
    color: var(--primary-dark);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: default;
}
.map-list [data-pin]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-teal-bright);
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.map-list [data-pin]:hover,
.map-list [data-pin]:focus-visible {
    color: var(--accent-teal);
}
.map-list [data-pin]:hover::before,
.map-list [data-pin]:focus-visible::before {
    transform: scale(1.5);
}

/* -----------------------------------
   INFO / GOOD-TO-KNOW
   ----------------------------------- */
.info-section {
    background-color: var(--bg-alt);
}

.fact-list dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent-teal);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.fact-list dd {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-dark);
    margin-bottom: 0;
}
/* Same 12px floor as .section-tag-sm above */
@media (max-width: 767.98px) {
    .fact-list dt {
        font-size: 0.75rem;
    }
}

/* -----------------------------------
   TESTIMONIALS / TRUST
   ----------------------------------- */
.testimonial-card {
    background: #ffffff;
    border: 1px solid rgba(15, 42, 74, 0.06);
    border-radius: 1.5rem;
    padding: 2rem;
    height: 100%;
    box-shadow: 0 8px 24px rgba(15, 42, 74, 0.05);
}
.testimonial-card blockquote {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--primary-dark);
    margin-bottom: 1.25rem;
}
.testimonial-card figcaption {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.testimonial-card .stars {
    color: #c98a00;
    letter-spacing: 2px;
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-light);
    border: 1px solid rgba(15, 42, 74, 0.08);
    border-radius: 50px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-dark);
}
.trust-chip i {
    color: var(--accent-teal);
}

/* -----------------------------------
   NEWSLETTER
   ----------------------------------- */
.newsletter-box {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #1a3c61 100%);
    border-radius: 1.5rem;
    padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 4vw, 2rem);
    color: white;
    text-align: center;
}

.custom-input {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
}
.custom-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.custom-input:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--accent-teal-bright);
    box-shadow: 0 0 0 3px rgba(0, 168, 181, 0.45);
    color: white;
}

.consent-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}
.consent-note a {
    color: rgba(255, 255, 255, 0.9);
}

/* -----------------------------------
   BUTTONS
   ----------------------------------- */
.btn-accent {
    background-color: var(--accent-teal);
    color: #ffffff;
    border-radius: 50px;
    padding: 0.8rem 2.25rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 119, 130, 0.25);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-accent:hover,
.btn-accent:focus-visible {
    background-color: var(--accent-teal-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 119, 130, 0.35);
}

.btn-hero-outline {
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
    border-radius: 50px;
    padding: 0.8rem 2.25rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-hero-outline:hover,
.btn-hero-outline:focus-visible {
    background-color: #ffffff;
    color: var(--primary-dark);
}

/* Outline variant for secondary CTAs on light backgrounds */
.btn-outline-accent {
    border: 1.5px solid var(--accent-teal);
    color: var(--accent-teal);
    border-radius: 50px;
    padding: 0.7rem 2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn-outline-accent:hover,
.btn-outline-accent:focus-visible {
    background-color: var(--accent-teal);
    color: #ffffff;
    transform: translateY(-2px);
}

/* -----------------------------------
   TOUR PAGE: STICKY SUB-NAV
   ----------------------------------- */
/* On the tour detail page the sticky sub-nav owns wayfinding, so the main
   navbar is NOT fixed — it sits over the hero and scrolls away with the page.
   (Explicit body class, set by the view, so this doesn't depend on :has().) */
body.tour-detail .top-navbar {
    position: absolute;
}

.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(15, 42, 74, 0.05);
}

.pill-scroller {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.25rem 0;
}
.pill-scroller::-webkit-scrollbar {
    display: none;
}
/* On a narrow screen every strip built on this — the tour sub-nav, the journal
   topics, the search topics — is wider than the container it sits in, and the
   scrollbar above is hidden, so a pill is simply sliced off at the edge with
   nothing to say it moves. Fade whichever side still has pills behind it.
   theme.js sets these classes from the scroll position, which beats a media
   query on both counts: a strip that fits never fades a pill that cannot move,
   and an end already reached stops advertising itself. */
.pill-scroller.is-scrolled-end {
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, #000 90%, transparent 100%);
}
.pill-scroller.is-scrolled-start {
    -webkit-mask-image: linear-gradient(to left, #000 90%, transparent 100%);
    mask-image: linear-gradient(to left, #000 90%, transparent 100%);
}
.pill-scroller.is-scrolled-start.is-scrolled-end {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.badge-outline {
    border: 1px solid rgba(15, 42, 74, 0.2);
    color: var(--primary-dark);
    background: transparent;
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}
.badge-outline:hover {
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}
/* Pills land at 42px from their padding alone — 2px under the minimum the rest
   of the site keeps. Only mobile gets the flex box and the floor, so the
   desktop rows keep their current inline metrics exactly. */
@media (max-width: 991.98px) {
    .badge-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
}
.badge-outline.active {
    background-color: var(--primary-dark);
    color: #fff;
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(15, 42, 74, 0.2);
}

.sticky-nav .price-cta {
    white-space: nowrap;
    font-weight: 600;
}

/* -----------------------------------
   TOUR PAGE: CONTENT
   ----------------------------------- */
.breadcrumb-slim {
    font-size: 0.85rem;
}
.breadcrumb-slim a {
    color: var(--accent-teal);
    text-decoration: none;
}
.breadcrumb-slim a:hover {
    text-decoration: underline;
}

.img-wrapper {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(15, 42, 74, 0.06);
}
.img-wrapper img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 400px is a landscape crop on a desktop column but a near-square slab on a
   390px phone, and a tour with several itinerary days pays it once per day.
   Card thumbnails are unaffected — .destination-card .img-wrapper img is the
   more specific selector. */
@media (max-width: 767.98px) {
    .img-wrapper img {
        height: 240px;
    }
}
.img-wrapper:hover img {
    transform: scale(1.04);
}

.tour-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.tour-facts .fact {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-light);
    border: 1px solid rgba(15, 42, 74, 0.08);
    border-radius: 50px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
}
.tour-facts .fact i {
    color: var(--accent-teal);
}

.timeline-container {
    position: relative;
}
.timeline-container::before {
    content: '';
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 50%;
    width: 1px;
    background: rgba(15, 42, 74, 0.15);
    transform: translateX(-50%);
    z-index: 0;
    display: none;
}
@media (min-width: 768px) {
    .timeline-container::before {
        display: block;
    }
}

.day-number {
    width: 48px;
    height: 48px;
    background-color: var(--primary-dark);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 8px #ffffff;
    flex: 0 0 48px;
}

/* Single-column itinerary timeline (works without per-day images) */
.itinerary-timeline {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.itinerary-day {
    position: relative;
    display: flex;
    gap: 1.5rem;
    padding-bottom: 2.5rem;
}
.itinerary-day:last-child {
    padding-bottom: 0;
}
/* Connecting line runs down the centre of the day-number circles */
.itinerary-day::before {
    content: '';
    position: absolute;
    left: 23px;
    top: 48px;
    bottom: -8px;
    width: 2px;
    background: rgba(15, 42, 74, 0.12);
}
.itinerary-day:last-child::before {
    display: none;
}
.itinerary-content {
    padding-top: 0.15rem;
}

/* -----------------------------------
   TOUR PAGE: UPCOMING DEPARTURES
   ----------------------------------- */
.date-list .date-row {
    padding: 1rem 1.25rem;
    border: 1px solid rgba(15, 42, 74, 0.08);
    border-radius: 1rem;
    margin-bottom: 0.75rem;
    background: #ffffff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.date-list .date-row:hover {
    border-color: rgba(0, 119, 130, 0.35);
    box-shadow: 0 8px 24px rgba(15, 42, 74, 0.06);
}
.date-list .date-when {
    font-weight: 600;
    color: var(--primary-dark);
}
.date-list .date-seats {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.date-list .date-price {
    color: var(--accent-teal);
}

/* Standalone teal link (e.g. "view on map") outside a .contact-alt block */
.contact-alt-link {
    color: var(--accent-teal);
    font-weight: 600;
    text-decoration: none;
}
.contact-alt-link:hover,
.contact-alt-link:focus-visible {
    text-decoration: underline;
}

.tour-description {
    color: var(--text-muted);
}
.tour-description p:last-child {
    margin-bottom: 0;
}

.custom-list {
    list-style: none;
    padding-left: 0;
}
.custom-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.2rem;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}
.custom-list li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--accent-teal);
    font-size: 1.1rem;
}
.custom-list.list-excluded li::before {
    content: "\F62A"; /* x-circle */
    color: var(--text-muted);
}

/* -----------------------------------
   ENQUIRY / CTA
   ----------------------------------- */
.cta-box {
    background: linear-gradient(135deg, #f0f7f9 0%, #ffffff 100%);
    border-radius: 1.5rem;
    padding: clamp(1.5rem, 5vw, 4rem);
    border: 1px solid rgba(0, 119, 130, 0.12);
    box-shadow: 0 20px 40px rgba(15, 42, 74, 0.03);
}

.enquiry-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
}
.enquiry-form .form-control,
.enquiry-form .form-select {
    border-radius: 0.75rem;
    padding: 0.65rem 1rem;
    border-color: rgba(15, 42, 74, 0.18);
}
.enquiry-form .form-control:focus,
.enquiry-form .form-select:focus {
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(0, 119, 130, 0.2);
}

.contact-alt a {
    color: var(--accent-teal);
    font-weight: 600;
    text-decoration: none;
}
.contact-alt a:hover {
    text-decoration: underline;
}

/* -----------------------------------
   FAQ
   ----------------------------------- */
.faq-accordion .accordion-item {
    border: 1px solid rgba(15, 42, 74, 0.08);
    border-radius: 1rem !important;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.faq-accordion .accordion-button {
    font-weight: 600;
    color: var(--primary-dark);
    background: #ffffff;
    padding: 1.1rem 1.4rem;
}
.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--bg-light);
    color: var(--accent-teal-hover);
    box-shadow: none;
}
.faq-accordion .accordion-body {
    color: var(--text-muted);
    line-height: 1.7;
}

/* -----------------------------------
   FOOTER
   ----------------------------------- */
.site-footer {
    background-color: var(--bg-light);
    border-top: 1px solid rgba(15, 42, 74, 0.08);
}
.site-footer a {
    color: var(--primary-dark);
    text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--accent-teal);
}
.site-footer .footer-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-teal);
    font-weight: 600;
    margin-bottom: 1rem;
}
.site-footer .contact-line {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
}
.site-footer .contact-line i {
    color: var(--accent-teal);
}
.footer-legal {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.footer-legal a {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.2rem;
}

/* The footer is where a phone visitor taps to call, message or mail, and those
   rows came out 34px tall — under the 44px minimum the menu toggle and the
   drawer close button already hold themselves to. Scoped like the toggler
   rule: a mouse does not need the extra height, and on desktop it would only
   loosen a column that reads fine as it is. */
@media (max-width: 991.98px) {
    .site-footer .contact-line,
    .footer-legal a {
        min-height: 44px;
    }
}

/* -----------------------------------
   LEGAL / SIMPLE PAGES
   ----------------------------------- */
.page-simple {
    padding-top: 8rem;
}
.page-simple .container {
    max-width: 760px;
}

/* -----------------------------------
   AUTH / LOGIN
   ----------------------------------- */
.auth-section {
    /* The navbar is fixed and body already clears it; this adds breathing room
       so the card sits optically centred on a tall screen. */
    padding: 3rem 0 5rem;
    background: linear-gradient(160deg, var(--bg-alt) 0%, #ffffff 55%);
    min-height: calc(100vh - 84px);
    display: flex;
    align-items: center;
}

.auth-card {
    background: #ffffff;
    border: 1px solid rgba(15, 42, 74, 0.08);
    border-radius: 1.5rem;
    padding: clamp(1.75rem, 5vw, 3rem);
    box-shadow: 0 24px 60px rgba(15, 42, 74, 0.08);
}

.auth-card-head {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-title {
    font-size: clamp(1.6rem, 4vw, 2rem);
    margin-bottom: 0.4rem;
}

.auth-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

/* Icon sits inside the field; the input carries the padding so the caret
   never overlaps it. */
.auth-field {
    position: relative;
}
.auth-field > .bi {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.auth-field .form-control {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border-color: rgba(15, 42, 74, 0.18);
}
.auth-field .form-control:focus {
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(0, 119, 130, 0.2);
}
.auth-field .form-control.is-invalid {
    border-color: #b02a37;
    background-image: none; /* Bootstrap's icon would collide with the toggle */
}

.auth-toggle {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0.5rem 0.65rem;
    line-height: 1;
    border-radius: 0.5rem;
    /* Same 44px floor as the rest of the site's controls — it came out 37x32 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
.auth-toggle:hover {
    color: var(--accent-teal);
}

.auth-error {
    color: #b02a37;
    font-size: 0.85rem;
    margin: 0.4rem 0 0;
}

.auth-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fdf2f3;
    border: 1px solid rgba(176, 42, 55, 0.25);
    color: #842029;
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.auth-alert-success {
    background: #f0f7f9;
    border-color: rgba(0, 119, 130, 0.25);
    color: var(--accent-teal-hover);
}

.auth-footnote {
    text-align: center;
    margin: 1.5rem 0 0;
    font-size: 0.9rem;
}
.auth-footnote a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}
.auth-footnote a:hover {
    color: var(--accent-teal);
}

/* -----------------------------------
   REDUCED MOTION
   ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .js .reveal-up {
        opacity: 1;
        transform: none;
    }
    .destination-card:hover,
    .btn-accent:hover {
        transform: none;
    }
    .destination-card:hover img,
    .img-wrapper:hover img {
        transform: none;
    }
}

/* -----------------------------------
   PRINT (itineraries are printed/saved as PDF to share)
   ----------------------------------- */
@media print {
    .top-navbar,
    .offcanvas,
    .sticky-nav,
    .scroll-prompt,
    .newsletter-box,
    .skip-link,
    .btn,
    form {
        display: none !important;
    }
    .js .reveal-up {
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-section {
        height: auto;
        min-height: 0;
        background: none !important;
        padding: 2rem 0;
    }
    .hero-title,
    .hero-subtitle,
    .hero-eyebrow {
        color: #000 !important;
        text-shadow: none;
    }
    body {
        background: #fff;
        color: #000;
    }
    .timeline-container .row {
        break-inside: avoid;
    }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}

/* -----------------------------------
   ERROR PAGES (404 with site chrome)
   ----------------------------------- */
/* The navbar is fixed and dark, so the error section needs top padding to
   clear it — and enough height that the footer doesn't ride up the viewport. */
.error-section {
    padding: 11rem 0 7rem;
    background-color: var(--bg-white);
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.error-code {
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    color: var(--accent-teal);
    opacity: 0.9;
}

.error-section .list-inline-item a {
    color: var(--text-muted);
}

.error-section .list-inline-item a:hover,
.error-section .list-inline-item a:focus-visible {
    color: var(--accent-teal);
}