/* ============================================================
   BACKPACKERS BIBLE — style-2.css
   Master stylesheet

   CONTENTS:
   0.  Font Loading
   1.  CSS Custom Properties (Design Tokens)
   2.  CSS Reset & Box Model
   3.  Base Typography
   4.  Body & Page Background
   5.  Accessibility Utilities
   6.  Site Header (desktop)
   7.  Mobile Menu
   8.  Site Header — Responsive (mobile)
   9.  Map Section
   10. Jump Menu
   11. Quick Jump Menu
   12. Text Sections (headings, paragraphs, details/summary)
   13. Parallax Sections
   14. Colour Strips
   15. Tour Guide Popup
   16. Z-Index Overrides (mobile)
   17. GetYourGuide Tour Cards
   18. Map Image (hero-section)
   19. Hostel Directory
   19b. Hostel Toggle Button
   20. Top Picks (card-grid / hostel-card)
   21. Free Offline Guide / PWA Section
   22. Back to Top Button
   23. Footer
   24. Cookie Banner
   25. Tour Guide Popup (#ma)
   26. Hostel Directory Cards (regional pages)
   27. MAPLIBRE Poster Image (Behind interactive map)
   28. Map Description Bar
   29. Map Filter Buttons
   30. Resource list
   31. REGIONS GRID
   32. Cartouche illustration
   33. Map overlay circle
   34. Dictionary Definition
   35. Sitemap styles
   36. Compass styles
   37. KALAHARI GAME — DESKTOP ONLY
   38. my maps itinerary pages
   ============================================================ */


/* ============================================================
   0. FONT LOADING
   ============================================================ */

@font-face {
    font-family: 'Century Gothic';
    src: url('/fonts/CenturyGothic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('/fonts/CenturyGothic-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('/fonts/CenturyGothic-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('/fonts/CenturyGothic-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */

:root {

    /* Brand Colours */
    --color-red:           #bc1d23;
    --color-red-dark:      #7a1d23;
    --color-red-light:     #e74747;
    --color-yellow:        #ffd400;
    --color-yellow-bright: #fff200;
    --color-yellow-card:   #e7bd1d;
    --color-blue:          #3c73a5;
    --color-black:         #000000;
    --color-white:         #ffffff;
    --color-grey-light:    #f0f0f0;
    --color-grey-mid:      #888888;
    --color-grey-dark:     #333333;
    --color-text:          #000000;

    /* Typography */
    --font-primary: 'Century Gothic', sans-serif;

    /* Font Sizes */
    --text-xs:    0.82rem;
    --text-sm:    0.9rem;
    --text-base:  1rem;
    --text-md:    1.2rem;
    --text-lg:    1.4rem;
    --text-xl:    1.8rem;
    --text-2xl:   2rem;
    --text-3xl:   3rem;
    --text-4xl:   4rem;

    /* Spacing */
    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   1.5rem;
    --space-lg:   2.5rem;
    --space-xl:   4rem;
    --space-2xl:  6rem;

    /* Gap between a parallax image and the section that follows it.
       3.75rem ≈ 60px desktop  |  overridden to 1.875rem ≈ 30px at ≤1100px */
    --space-section-gap: 3.75rem;

    /* Layout */
    --container-max:  1200px;
    --container-text: 874px;
    --header-height:  119px;

    /* Z-index scale
       --z-above (10) is for page content that must clear
       decorative elements.
       --z-header (9999) is the fixed site header.
       Mama Africa popup must be below --z-header, so use
       a value between --z-above and --z-header, e.g. 500. */
    --z-base:        1;
    --z-above:       10;
    --z-popup:       500;
    --z-header:      9999;
    --z-mobile-menu: 15000;
    --z-skip-link:   999999;

    /* Transitions */
    --transition-fast:  0.1s ease;
    --transition-base:  0.3s ease;
    --transition-slide: 0.35s ease;
}


/* ============================================================
   2. CSS RESET & BOX MODEL
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: clip;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

img,
video {
    max-width: 100%;
    height: auto;
}

/* MapLibre map markers must not be constrained by the reset above */
#bb-map-wrap img,
.maplibregl-marker img,
.maplibregl-marker,
.maplibregl-canvas-container img {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

ul, ol {
    list-style: none;
}

/* Prepend the ID selector to override the map reset specificity */
#bb-map-wrap img.bb-marker-icon {
    width: 24px !important;   /* Change to 24px or 32px if 16px feels too small! */
    height: 24px !important;
    max-width: none !important;
}


/* ============================================================
   3. BASE TYPOGRAPHY
   ============================================================ */

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: normal;
    line-height: 1.15;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}


/* ============================================================
   4. BODY & PAGE BACKGROUND
   ============================================================ */

body {
    background-color: var(--color-yellow);
    width: 100%;
    overflow-x: clip;
}


/* ============================================================
   5. ACCESSIBILITY UTILITIES
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-red);
    color: var(--color-white);
    padding: 10px 18px;
    font-size: var(--text-base);
    font-weight: bold;
    z-index: var(--z-skip-link);
    text-decoration: none;
    border-radius: 0 0 6px 0;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}


/* ============================================================
   6. SITE HEADER
   ============================================================ */

#site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    background-color: var(--color-red);
    transition: transform var(--transition-slide);
    overflow: visible;
}

#site-header.is-hidden {
    transform: translateY(-100%);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 40px;
    background-color: var(--color-red);
    overflow: visible;
    position: relative;
    box-sizing: border-box;
}

/* -- Branding -- */

.site-header__branding {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 1;
    min-width: 0;
}

.site-header__logo-link {
    display: block;
    line-height: 0;
}

.site-header__logo-link:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}

.site-header__logo {
    width: 80px;
    height: 80px;
    background-color: var(--color-white);
    display: block;
}

.site-header__brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.site-header__brand-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.site-header__brand-name {
    font-size: var(--text-xl);
    font-weight: normal;
    color: var(--color-white);
    white-space: nowrap;
    line-height: 1.1;
}

.site-header__location-badge {
    background-color: var(--color-yellow);
    color: var(--color-black);
    font-size: var(--text-sm);
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.site-header__payoff {
    font-size: var(--text-md);
    color: var(--color-white);
    white-space: nowrap;
}

/* -- Controls -- */

.site-header__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    overflow: visible;
}

/* -- Hamburger -- */

.site-header__nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
}

.site-header__nav-toggle:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}

.site-header__nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-white);
    border-radius: 2px;
    transition: transform var(--transition-base),
                opacity var(--transition-base);
}

.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* -- Desktop Search -- */

.site-header__search {
    position: absolute;
    top: 18px;
    right: 40px;
    z-index: var(--z-above);
}

.site-header__search-bar {
    display: flex;
    align-items: center;
    background-color: #e8a0aa;
    border: none;
    border-radius: 999px;
    padding: 0 14px;
    height: 32px;
    gap: 6px;
    cursor: text;
    transition: background-color var(--transition-base);
}

.site-header__search-bar:hover,
.site-header__search-bar:focus-within {
    background-color: #f0b8c0;
}

.site-header__search-input {
    background: none;
    border: none;
    outline: none;
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    width: 200px;
    -webkit-appearance: none;
}

.site-header__search-input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.site-header__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.site-header__search-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__search-icon svg {
    width: 15px;
    height: 15px;
    stroke: var(--color-white);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.site-header__search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: var(--z-header);
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.site-header__search-results.is-open {
    display: block;
}

.site-header__search-results .search-result-item {
    display: block;
    padding: 11px 18px;
    color: var(--color-grey-dark);
    text-decoration: none;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--color-grey-light);
    transition: background var(--transition-fast);
}

.site-header__search-results .search-result-item:last-child {
    border-bottom: none;
}

.site-header__search-results .search-result-item:hover,
.site-header__search-results .search-result-item:focus {
    background: #fce8ed;
    color: var(--color-red);
    text-decoration: none;
}

.site-header__search-results .search-result-item strong {
    display: block;
    font-size: var(--text-base);
}

.site-header__search-results .search-result-item span {
    color: var(--color-grey-mid);
    font-size: var(--text-xs);
}

.site-header__search-no-results {
    padding: 14px 18px;
    color: var(--color-grey-mid);
    font-size: var(--text-sm);
}

/* -- Desktop Nav -- */

.site-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100%;
    padding-top: 44px;
}

.site-nav__cta {
    color: var(--color-white);
    font-size: var(--text-base);
    letter-spacing: 0.12em;
    text-decoration: none;
    white-space: nowrap;
    margin-right: 0.5rem;
    transition: color var(--transition-fast);
}

.site-nav__cta:hover {
    color: #f0b8c0;
    text-decoration: none;
}

.site-nav__cta:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}

.site-nav__link {
    color: var(--color-white);
    font-size: var(--text-base);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.site-nav__link:hover {
    color: #f0b8c0;
    text-decoration: none;
}

.site-nav__link:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}

.site-nav__item {
    position: static;
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.site-nav__mega-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--color-white);
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0;
    transition: color var(--transition-fast);
}

.site-nav__mega-trigger::after {
    content: ' ▾';
    font-size: 0.75em;
    vertical-align: middle;
}

.site-nav__mega-trigger:hover {
    color: #f0b8c0;
    text-decoration: none;
}

.site-nav__mega-trigger:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}

/* -- Mega Menus -- */

.site-nav__mega-menu {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: var(--color-yellow-bright);
    padding: 30px 10%;
    box-sizing: border-box;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    border-top: 5px solid var(--color-black);
    border-bottom: 5px solid var(--color-black);
    z-index: calc(var(--z-header) + 1);
}

.site-nav__item:hover .site-nav__mega-menu,
.site-nav__mega-menu[data-open] {
    display: grid;
}

.site-nav__mega-col {
    min-width: 180px;
}

.site-nav__mega-heading {
    color: var(--color-red);
    font-size: var(--text-md);
    font-weight: bold;
    margin-bottom: 12px;
    margin-top: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-black);
}

.site-nav__mega-col .site-nav__mega-heading:first-child {
    margin-top: 0;
}

.site-nav__mega-menu a[role="menuitem"] {
    display: block;
    color: var(--color-black);
    padding: 6px 0;
    font-size: var(--text-base);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-nav__mega-menu a[role="menuitem"]:hover {
    color: var(--color-red);
    text-decoration: none;
}

.site-nav__mega-menu a[role="menuitem"]:focus-visible {
    outline: 3px solid var(--color-red);
    outline-offset: 2px;
    border-radius: 2px;
}

/* -- Downloads Mega Menu -- */

.site-nav__mega-trigger--downloads {
    color: var(--color-yellow-bright);
}

.site-nav__mega-trigger--downloads:hover {
    color: var(--color-white);
}

.site-nav__mega-menu--downloads {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 500px;
    padding: 30px 40px;
}

.site-nav__item:hover .site-nav__mega-menu--downloads,
.site-nav__mega-menu--downloads[data-open] {
    display: grid;
}

.site-nav__mega-desc {
    color: var(--color-black);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.site-nav__mega-btn {
    display: inline-block;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: bold;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background-color var(--transition-fast);
}

.site-nav__mega-btn:hover {
    background-color: var(--color-red-dark);
    text-decoration: none;
    color: var(--color-white);
}

.site-nav__mega-btn:focus-visible {
    outline: 3px solid var(--color-red);
    outline-offset: 3px;
}

.site-nav__mega-spec {
    color: var(--color-black);
    font-size: var(--text-xs);
    margin: 8px 0 0 0;
    opacity: 0.7;
}

/* -- Colour Strips -- */

.site-header__strip {
    height: 6px;
    width: 100%;
    display: block;
}

.site-header__strip--black  { background-color: var(--color-black); }
.site-header__strip--yellow { background-color: var(--color-yellow-bright); }
.site-header__strip--blue   { background-color: var(--color-blue); }
.site-header__strip--green  { background-color: #36fd00; }

/* -- Header Spacer -- */

.header-spacer {
    height: 143px;
    display: block;
}


/* ============================================================
   7. MOBILE MENU
   Slides down from top. JS adds/removes .is-open.
   ============================================================ */

#mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-red);
    z-index: var(--z-mobile-menu);
    overflow-y: auto;
    padding: 80px 30px 100px;
    box-sizing: border-box;
    transform: translateY(-100%);
    transition: transform var(--transition-slide),
                visibility var(--transition-slide);
    visibility: hidden;
}

#mobile-menu.is-open {
    transform: translateY(0);
    visibility: visible;
}

.mobile-menu__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.mobile-menu__close:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}

.mobile-menu__search {
    margin-bottom: 2rem;
}

.mobile-menu__search-bar {
    display: flex;
    align-items: center;
    background-color: #e8a0aa;
    border-radius: 999px;
    padding: 0 14px;
    height: 40px;
    gap: 8px;
}

.mobile-menu__search-input {
    background: none;
    border: none;
    outline: none;
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    width: 100%;
    -webkit-appearance: none;
}

.mobile-menu__search-input::placeholder {
    color: rgba(255, 255, 255, 0.85);
}

.mobile-menu__search-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--color-white);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    flex-shrink: 0;
}

.mobile-menu__search-results {
    display: none;
    background: var(--color-white);
    border-radius: 8px;
    margin-top: 6px;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
}

.mobile-menu__search-results.is-open {
    display: block;
}

#mobile-menu a {
    display: block;
    width: 100%;
    padding: 16px 0;
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--text-base);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    transition: color var(--transition-fast);
}

#mobile-menu a:hover {
    color: var(--color-yellow);
    text-decoration: none;
}

#mobile-menu a:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}

.accordion {
    display: block;
    width: 100%;
    padding: 16px 0;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.accordion::after {
    content: '▾';
    position: absolute;
    right: 0;
    transition: transform var(--transition-base);
}

.accordion[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.accordion:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 3px;
}

.panel {
    display: none;
    padding: 10px 0 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.panel.is-open {
    display: block;
}

.panel a {
    border-bottom: none;
    padding: 10px 0;
    font-size: var(--text-sm);
    text-transform: none;
    color: rgba(255, 255, 255, 0.9);
}

.panel a:hover {
    color: var(--color-yellow);
}

.panel h3 {
    color: var(--color-white);
    font-size: var(--text-lg);
    font-weight: normal;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.panel__desc {
    color: var(--color-white);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 4px 0 10px 0;
}

.panel__spec {
    color: var(--color-white);
    font-size: var(--text-xs);
    margin: 6px 0 20px 0;
    opacity: 0.7;
}

.accordion--downloads {
    color: var(--color-yellow-bright);
    font-weight: bold;
}

.mobile-menu__share {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    margin-top: 3rem;
    color: var(--color-white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--text-sm);
    border-bottom: none !important;
}

.mobile-menu__share img {
    width: 45px;
    height: 45px;
    display: block;
    margin: 0 auto;
}


/* ============================================================
   8. SITE HEADER — RESPONSIVE (mobile, max-width: 1100px)
   ============================================================ */

@media (max-width: 1100px) {

    #site-header {
        --header-height: 75px;
    }

    .site-header__bar {
        height: 75px;
        padding: 0 15px;
    }

    .site-header__logo {
        width: 45px;
        height: 45px;
    }

    .site-header__brand-name {
        font-size: var(--text-md);
        white-space: normal;
    }

    .site-header__payoff {
        font-size: var(--text-xs);
    }

    /* Hidden on mobile — jump menu provides location context */
    .site-header__location-badge {
        display: none;
    }

    /* Show hamburger */
    .site-header__nav-toggle {
        display: flex;
    }

    /* Hide desktop search and nav */
    .site-header__search,
    .site-nav {
        display: none;
    }

    /* Controls becomes a simple row */
    .site-header__controls {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    /* Slim the spacer */
    .header-spacer {
        height: 99px;
    }

}


/* ============================================================
   9. MAP SECTION
   Temporary — will be replaced with Leaflet map.
   ============================================================ */

/* Invisible anchor for #map links — offset handled by scroll-margin-top */
#map {
    display: none;
}

#map-visual {
    position: relative;
    z-index: 1;
}

main {
    position: relative;
    z-index: 1;
}


/* ============================================================
   10. JUMP MENU
   The horizontally scrolling region card strip.
   Desktop: sits in normal page flow.
   Mobile:  fixed below header, hides with header on scroll.
   ============================================================ */

.jump-menu-section {
    background-color: var(--color-black);
    width: 100%;
    position: relative;
    z-index: var(--z-above);
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.jump-menu-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 15px;
    width: 100%;
    padding: 17px 12px 3px 12px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-behavior: smooth;
    position: relative;
    z-index: var(--z-above);
    background-color: var(--color-black);
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%228%22%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%2280%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%22140%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%22160%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%22180%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%221%22%20width%3D%226%22%20height%3D%226%22%20fill%3D%22%23ffd400%22%2F%3E%3Cpolygon%20points%3D%22220%2C0%20228%2C4%20220%2C8%22%20fill%3D%22%23ff0000%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: repeat-x;
    background-size: 240px 8px;
    background-position: top 5px left 0;
    scrollbar-width: auto;
    scrollbar-color: #999 #333;
    -ms-overflow-style: auto;
}

.jump-card {
    flex: 0 0 auto;
    position: relative;
    display: block;
    width: 150px;
    overflow: hidden;
    text-decoration: none;
    border-radius: 0;
}

.jump-card:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

.jump-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jump-card--active .jump-card-img {
    outline: 5px solid #ff0000;
    outline-offset: -5px;
}

.jump-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    font-size: var(--text-xs);
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
}

/* Mobile jump menu — in-flow below map, smaller cards */
@media (max-width: 1100px) {

    .jump-menu-container {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .jump-menu-container::-webkit-scrollbar {
        display: none;
    }

    .jump-card {
        width: 100px;
    }

    .jump-card-overlay {
        font-size: 0.7rem;
    }

}


/* ============================================================
   11. QUICK JUMP MENU
   About / Activities / Hostels bar.
   Desktop: sticky, centred.
   Mobile:  fixed to bottom, hides on scroll down.
   ============================================================ */

.yellow-menu-backdrop {
    display: none;
}

@media (min-width: 1101px) {
    .yellow-menu-backdrop {
        display: block;
        background-color: var(--color-yellow);
        width: 100%;
        height: 140px;
        margin-bottom: -140px;
    }
}

#quick-jump-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-red);
    z-index: var(--z-above);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

#quick-jump-menu a {
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--text-base);
    text-transform: uppercase;
    padding: 10px 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    transition: color var(--transition-fast);
}

#quick-jump-menu a:hover {
    color: var(--color-yellow);
    text-decoration: none;
}

#quick-jump-menu a:last-child {
    border-right: none;
}

#quick-jump-menu a:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: -3px;
}

/* Page title bar hidden on desktop */
#page-title-bar {
    display: none;
}

/* Desktop */
@media (min-width: 1101px) {
    #quick-jump-menu {
        position: sticky;
        top: 143px; /* 119px header + 24px colour strips. Flush with header bottom. */
        width: max-content;
        margin: 40px auto;
        height: 60px;
        border-radius: 0;
        /* Matches the slide speed of your site header perfectly */
        transition: top var(--transition-slide); 
    }

    /* When JS adds this class on scroll down, the menu slides up to the top edge */
    #quick-jump-menu.is-hidden {
        top: 0;
    }
}

/* Mobile */
@media (max-width: 1100px) {

    #quick-jump-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 55px;
        border-radius: 0;
        z-index: calc(var(--z-header) - 1); /* 9998 */
        isolation: isolate; /* own stacking context — always above #ma */
        transition: transform var(--transition-slide);
    }

    /* JS adds .is-hidden on scroll down */
    #quick-jump-menu.is-hidden {
        transform: translateY(100%);
    }

    /* ── Mobile page title bar — sits flush above #quick-jump-menu ── */
    #page-title-bar {
        display: block;
        position: fixed;
        bottom: 55px; /* flush with top of 55px quick-jump-menu */
        left: 0;
        width: 100%;
        background-color: #005F8A; /* matches .pill-ocean-blue */
        color: #ffffff;
        font-family: var(--font-primary, 'Century Gothic', sans-serif);
        font-size: var(--text-base);
        font-weight: 600;
        text-align: center;
        padding: 10px 0;
        z-index: calc(var(--z-header) - 1); /* same layer as quick-jump-menu */
        transition: transform var(--transition-slide); /* slides with the menu */
        pointer-events: none; /* purely informational — no tap target */
    }

    /* Slide the title bar down with the menu when JS adds .is-hidden */
    #quick-jump-menu.is-hidden + #page-title-bar {
        transform: translateY(calc(100% + 55px));
    }

    #quick-jump-menu a {
        flex: 1;
        text-align: center;
        font-size: var(--text-base);
        padding: 10px 5px;
    }

    body {
        padding-bottom: 175px;
    }

}


/* ============================================================
   12. TEXT SECTIONS
   These classes are used site-wide across all pages.
   Do not rename without updating every page template.

   h1 → .area-hero-title
   h2 → .section-heading-desktop
   h3/h4 → .sub-heading-desktop
   p  → .intro-p
   ============================================================ */

/* Section wrapper — yellow background, centred content */
.text-section {
    background-color: var(--color-yellow);
    width: 100%;
    padding: var(--space-xl) var(--space-sm);
    box-sizing: border-box;
}

/* Modifier: adds the standard parallax→section gap as padding-top.
   Apply whenever a .text-section (or equivalent) immediately follows
   a parallax image. Replaces the old hide-on-mobile/hide-on-desktop
   spacer divs throughout the site. */
.text-section--after-parallax {
    padding-top: var(--space-section-gap);
}

/* Inner container — constrains content width */
.text-section__inner {
    max-width: var(--container-text);  /* 874px */
    margin: 0 auto;
}

/* Hero text container — yellow section between header and map */
.area-hero-container {
    background-color: var(--color-yellow);
    width: 100%;
    min-height: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
    position: relative;
}

/* h1 — used for region/page title */
.area-hero-title {
    font-size: var(--text-4xl);        /* 4rem / ~64px */
    font-weight: normal;
    line-height: 1.1;
    color: var(--color-black);
    text-align: center;
    margin: 10px auto 20px auto;
    max-width: var(--container-text);
    display: block;
    scroll-margin-top: 175px;
}

/* Modifier: 60px/30px gap above an h2 that appears mid-section
   (not as the first element after a parallax image).
   Apply to any .area-hero-title h2 on regional and inner pages
   where it follows other content rather than opening a section. */
.area-hero-title--section-gap {
    margin-top: var(--space-section-gap);
}

/* h2 — used for major section headings */
.section-heading-desktop {
    font-size: var(--text-3xl);        /* 3rem / ~48px */
    font-weight: normal;
    line-height: 1.2;
    color: var(--color-black);
    text-align: center;
    display: block;
    max-width: var(--container-text);
    margin: 70px auto 40px auto;
    clear: both;
    scroll-margin-top: 175px;
}

/* h3/h4 — used for sub-sections */
.sub-heading-desktop {
    font-size: var(--text-2xl);        /* 2rem / ~32px */
    font-weight: normal;
    line-height: 1.2;
    color: var(--color-black);
    text-align: center;
    display: block;
    max-width: var(--container-text);
    margin: 70px auto 30px auto;
    clear: both;
}

/* Body paragraphs */
.intro-p {
    font-size: var(--text-lg);         /* 1.4rem / ~22px */
    line-height: 1.8;
    color: var(--color-black);
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    display: block;
}

/* Inline strong inside paragraphs */
.intro-p strong {
    font-weight: bold;
}


/* ============================================================
   12a. TEXT SECTIONS — RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1100px) {

    :root {
        /* 30px gap on mobile/tablet between parallax and following section */
        --space-section-gap: 1.875rem;
    }

    .area-hero-title {
        font-size: 2.8rem;
        line-height: 1.15;
        padding: 0 15px;
    }

    .section-heading-desktop {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-top: 50px;
        margin-bottom: 25px;
        padding: 0 15px;
    }

    .sub-heading-desktop {
        font-size: 1.8rem;
        margin-top: 50px;
        margin-bottom: 20px;
        padding: 0 15px;
    }

    .intro-p {
        font-size: var(--text-base);   /* drops to 1rem on mobile */
        line-height: 1.7;
        padding: 0 15px;
    }

}

/* Mobile */
@media (max-width: 600px) {

    .area-hero-title {
        font-size: 2.4rem;
        line-height: 1.15;
    }

    .section-heading-desktop {
        font-size: 2rem;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .sub-heading-desktop {
        font-size: 1.75rem;
        margin-top: 40px;
        margin-bottom: 20px;
    }

}

/* ============================================================
   12b. DETAILS / SUMMARY — "Read More / Read Less" toggle
   Used site-wide inside .text-section and .container-wide.
   ============================================================ */

/* Wrapper — centres the button */
details {
    text-align: center;
    margin: 10px 0 0 0;
}

/* The button itself */
details summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    background-color: var(--color-red);
    color: #ffffff;
    padding: 12px 28px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: normal;
    text-align: center;
    border: none;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-bottom: 40px;
}

/* Remove default WebKit triangle */
details summary::-webkit-details-marker { display: none; }

details summary:hover,
details summary:focus-visible {
    background-color: var(--color-red);
    color: #e76b70;
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* When open — slightly deeper red, reduced bottom margin */
details[open] summary {
    background-color: #d40000;
    color: #ffffff;
    margin-bottom: 15px;
}

/* Closed state: gap between the "Read More" button and whatever
   follows. padding-bottom avoids margin-collapse. Used when a
   parallax image follows directly (no section padding-top to rely on). */
details:not([open]) {
    padding-bottom: var(--space-section-gap);
}

@media (max-width: 600px) {
    details summary {
        margin-bottom: 20px;
        padding: 10px 20px;
    }
}


/* ============================================================
   12c. CTA BUTTONS & SECTION LINKS
   
   .download-btn      — the standard red call-to-action button used
                        throughout the site (migrated from style.css).
   .section-cta       — wrapper block that centres a button and provides
                        consistent vertical breathing room. Replaces
                        <center> tags and inline margin hacks.
   .section-cta__label — the "FOR IN-DEPTH INFO ON X, SEE:" lead-in
                        that appears above some .section-cta blocks.
                        Replaces style="margin-top: 70px" on .intro-p.
   ============================================================ */

.download-btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: var(--text-md);        /* 1.2rem */
    font-family: var(--font-primary);
    background-color: var(--color-red);
    color: var(--color-white);
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
    transition: background-color var(--transition-base);
}

.download-btn:hover,
.download-btn:focus-visible {
    background-color: var(--color-red-dark);
    color: var(--color-white);
    text-decoration: none;
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* Wrapper — centres the button with consistent vertical space.
   Uses padding-bottom (not margin-bottom) so it doesn't collapse
   with the margin-top of the following heading. */
.section-cta {
    text-align: center;
    margin-top: 2rem;
    padding-bottom: var(--space-section-gap);
}

/* Lead-in label above the button */
.section-cta__label {
    font-size: var(--text-lg);        /* 1.4rem — matches .intro-p */
    font-weight: bold;
    color: var(--color-black);
    text-align: center;
    margin: 2.5rem auto 1rem auto;    /* gap above matches section rhythm */
    max-width: var(--container-text);
    display: block;
}

/* Gap before the first h3/h4 inside an expanded <details> block.
   Applied to the heading element itself so the gap is part of the
   heading's own spacing, not a separate spacer div. Uses the same
   --space-section-gap token (60px desktop / 30px mobile). */
.expanded-text__first-heading {
    margin-top: var(--space-section-gap) !important;
}

@media (max-width: 600px) {
    .download-btn {
        padding: 12px 24px;
        font-size: var(--text-base);
    }

    /* Platform buttons — smaller on mobile, stacked vertically */
    .btn-booking-com,
    .btn-hostelworld-com,
    .btn-getyourguide-com {
        width: 200px !important;
        min-width: 200px !important;
        height: 60px !important;
        min-height: 60px !important;
        font-size: 11pt !important;
        margin: 5px auto !important;
    }

    .booking-btn-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 20px auto !important;
        padding: 0 !important;
    }
}


/* ============================================================
   13. PARALLAX SECTIONS
   
   Usage:
   <div class="parallax-window" style="background-image: url(...)">
       <div class="parallax-attribution">
           <a href="...">PLACE NAME</a> — caption | Photo: Name
       </div>
   </div>

   Height variants — add a modifier class for different heights:
   .parallax-window                → 900px (default, full hero)
   .parallax-window--medium        → 660px
   .parallax-window--tall          → 1400px
   .parallax-window--short         → 600px

   Note: background-image is set inline per-instance since each
   parallax uses a different image.
   ============================================================ */

.parallax-window {
    height: 900px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: var(--z-base);
}

.parallax-window--medium {
    height: 660px;
}

.parallax-window--tall {
    height: 1400px;
}

.parallax-window--short {
    height: 600px;
}

/* Image attribution badge — bottom right corner */
.parallax-attribution {
    position: absolute;
    bottom: 10px;
    right: 20px;
    left: auto;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-xs);
    font-family: Arial, sans-serif;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: var(--z-base);
    pointer-events: auto;
    line-height: 1.4;
    max-width: calc(100% - 40px); /* prevents it touching either edge */
}

.parallax-attribution a {
    color: var(--color-yellow);
    text-decoration: underline;
}

.parallax-attribution a:hover {
    color: var(--color-white);
}

/* Optional text overlay centred in the parallax */
.parallax-text {
    color: var(--color-white);
    font-size: var(--text-2xl);
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    padding: 0 20px;
}


/* ------------------------------------------------------------
   PARALLAX — MOBILE
   background-attachment: fixed causes severe zoom bugs on iOS.
   On mobile we switch to scroll and use background-size: cover
   so the image still fills the space correctly.
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

    .parallax-window,
    .parallax-window--medium,
    .parallax-window--tall,
    .parallax-window--short {
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        height: auto;
        min-height: 300px;
    }

    .parallax-attribution {
        font-size: 10px;
        padding: 2px 6px;
    }

}



.parallax-window {
    /* 1. Default to the mobile image asset */
    background-image: var(--bg-mobile);
    
    /* 2. Ensure the background scales nicely on smaller screens */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Your existing layout/height rules for the window go here */
    min-height: 300px; 
}

/* 3. Swap to the desktop image and apply parallax on larger screens */
@media (min-width: 768px) {
    .parallax-window {
        background-image: var(--bg-desktop);
        background-attachment: fixed; /* Standard CSS parallax technique */
        min-height: 400px; /* Optional: scale up the height for desktop */
    }
}


/* ============================================================
   14. COLOUR STRIPS
   Used throughout the page as decorative dividers.
   .strip    — body strips (6px)
   .f-strip  — footer strips (6px, same height)
   Colour is set by a second class: .black .yellow .blue .green .red
   ============================================================ */

.strip,
.f-strip {
    height: 6px;
    width: 100%;
    display: block;
}

.strip.black,
.f-strip.black  { background-color: var(--color-black); }

.strip.yellow,
.f-strip.yellow { background-color: var(--color-yellow-bright); }

.strip.blue,
.f-strip.blue   { background-color: var(--color-blue); }

.strip.green,
.f-strip.green  { background-color: #36fd00; }

.strip.red,
.f-strip.red    { background-color: var(--color-red); }




/* ============================================================
   16. Z-INDEX SUMMARY (mobile)
   #ma (tour guide): z-index 40
   .jump-menu-section: z-index calc(--z-header - 1) = 9998
   #quick-jump-menu:   z-index calc(--z-header - 1) = 9998
   Both menus are above #ma. pointer-events:none on #ma
   container (section 25) ensures taps pass through to menus.
   ============================================================ */

/* ============================================================
   17. GETYOURGUIDE TOUR CARDS

   .tour-section          — yellow full-width wrapper
   .tour-grid             — responsive card grid
   .tour-card             — individual tour card (white on yellow)
   .tour-image            — card image with attribution badge
   .img-attr              — photo credit badge (bottom-right)
   .tour-info             — card text area
   .tour-price            — green price line
   .btn-getyourguide-com  — orange GYG brand button
   ============================================================ */

/* ============================================================
   17. GETYOURGUIDE TOUR CARDS
   Core rules copied verbatim from style.css (confirmed working).
   Additions: padding on .tour-section, .tour-card--desktop-only
   for hiding extra cards on mobile, and .booking-btn-container.
   ============================================================ */

.tour-section {
    background-color: #ffd400;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 var(--space-lg) 0;
    text-align: center;
}

.tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 25px;
    margin: var(--space-lg) auto 0 auto;
    justify-content: center;
    max-width: 1100px;
}

.tour-card {
    text-decoration: none;
    color: #333;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
    width: 300px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.tour-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.tour-image {
    position: relative;
    height: 180px;
    background-size: cover;
    background-position: center;
}

.img-attr {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 9px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    pointer-events: none;
}

.tour-info {
    padding: 20px;
}

.tour-info h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.tour-price {
    font-weight: bold;
    color: #1a7a3f; /* darkened from #27ae60 — WCAG AA on white (~6.2:1) */
    margin: 0;
}

/* Booking platform buttons container */
.booking-btn-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 40px 0 0 0;
    flex-wrap: wrap;
    padding-bottom: var(--space-section-gap); /* gap before next element (map image) */
}

/* Standard inline blue hyperlink — used in body text and hostel lists */
.blue-link {
    color: #0000e0;
    font-weight: bold;
    text-decoration: none;
}

.blue-link:hover {
    color: #000000;
    text-decoration: underline;
}

/* GetYourGuide brand button */
.btn-getyourguide-com {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 268px;
    min-width: 268px;
    height: 92px;
    min-height: 92px;
    background-color: #c4401a; /* darkened from #ff5534 — WCAG AA with white text (~5.2:1) */
    color: #ffffff;
    text-decoration: none;
    font-family: 'Arial Black', sans-serif;
    font-size: 14pt;
    text-align: center;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.btn-getyourguide-com:hover {
    color: #ffffff;
    text-decoration: none;
}

.btn-getyourguide-com:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* Hide extra tour cards on mobile — show only 3 cards (the ones
   without this class). Avoids an excessively long page on phones. */
.tour-card--desktop-only {
    display: none;
}

@media (min-width: 700px) {
    .tour-card--desktop-only {
        display: flex;
    }
}

/* Mobile: single-column grid */
@media (max-width: 350px) {
    .tour-grid { grid-template-columns: 1fr; }
    .tour-card { width: 100%; }
}


/* ============================================================
   18. MAP IMAGE (hero-section)
   Full-width static image — not a parallax. Used for the SA map
   and any other full-bleed pictures. Verbatim from style.css.
   ============================================================ */

.hero-section {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0; /* removes ghost-padding below inline images */
    overflow: hidden;
}

.hero-img-fluid {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Desktop: fixed aspect ratio (1920×662) */
@media (min-width: 768px) {
    .hero-img-fluid {
        aspect-ratio: 1920 / 662;
        max-height: 662px;
    }
}

/* Mobile: square crop */
@media (max-width: 767px) {
    .hero-img-fluid {
        aspect-ratio: 1 / 1;
        width: 100%;
    }
}


/* ============================================================
   19. HOSTEL DIRECTORY
   .top-pics-section      — outer yellow wrapper
   .hostel-list-section   — inner section (flex column, centred)
   .hostel-grid           — 2-col grid of hostel lists
   .hostel-col            — left-aligned column
   .btn-booking-com       — Booking.com navy button
   .btn-hostelworld-com   — Hostelworld orange button
   Verbatim from style.css. Spacer divs replaced by padding-top
   on .top-pics-section using --space-section-gap.
   ============================================================ */

.top-pics-section {
    background-color: #ffd400;
    width: 100%;
    box-sizing: border-box;
    padding-top: var(--space-section-gap); /* replaces hide-on-mobile spacer divs */
}

.hostel-list-section {
    background-color: #ffd400;
    width: 100%;
    min-height: auto;
    padding: 10px 0 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Regional hostel card sections — must have yellow background so
   .container-wide-hostels cards sit on a matching colour. */
.region-header-section {
    background-color: #ffd400;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.hostel-col {
    text-align: left;
}

/* h4 headings (region/area names) in hostel directory columns.
   Smaller than default, bold, with space above and below. */
.hostel-col h4 {
    font-size: 0.95rem;
    font-weight: bold;
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
}




/* h2 headings (region/area names) in hostel directory columns.
   Smaller than default, bold, with space above and below. */
.hostel-col h2 {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
}



.hostel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    max-width: 1100px;
    width: 100%;
    margin-top: 40px;
}

.hostel-list-section ul {
    list-style-type: disc;
    padding-left: 18px;
    margin: 0;
    text-align: left;
}

.hostel-list-section li a {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: bold;
    color: #0000f6;
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}

.hostel-list-section li a:hover {
    color: #000000;
}

/* Shared base for all booking-platform buttons */
.btn-booking-com,
.btn-hostelworld-com {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 268px;
    min-width: 268px;
    height: 92px;
    min-height: 92px;
    text-decoration: none;
    font-family: 'Arial Black', sans-serif;
    font-size: 14pt;
    text-align: center;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.btn-booking-com {
    background-color: #253c7e;
    color: #ffffff;
}

.btn-booking-com span.dot-com {
    color: #4d9ed7;
}

.btn-booking-com:hover { color: #4d9ed7; text-decoration: none; }

.btn-hostelworld-com {
    background-color: #c4451a; /* darkened from #f3724a — WCAG AA with white text (~5.1:1) */
    color: #ffffff;
}

.btn-hostelworld-com:hover { color: #f39c8c; text-decoration: none; }

.btn-booking-com:focus-visible,
.btn-hostelworld-com:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* Gap between intro paragraphs and the hostel grid.
   Replaces hide-on-mobile spacer divs (60px desktop / 30px mobile). */
.hostel-list-section .container-wide {
    padding-top: 0;
}

.hostel-grid-spacer {
    height: var(--space-section-gap);
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
    .top-pics-section {
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }
    .hostel-grid {
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .hostel-col {
        width: 100%;
    }
    .hostel-list-section ul {
        padding-left: 20px;
    }
    .hostel-list-section li {
        margin-bottom: 6px;
    }
    .hostel-list-section li a {
        display: inline;
        line-height: 1.6;
    }
}

@media screen and (max-width: 600px) {
    .hostel-col p,
    .hostel-col .detail-p,
    .hostel-col li {
        font-size: 0.95rem;
        line-height: 1.8rem;
    }
    .hostel-col ul {
        padding-left: 15px;
        margin-left: 0;
        list-style-position: outside;
        text-align: left;
    }
    .hostel-col li {
        margin-left: 0;
        padding-left: 0;
    }
}

/* ============================================================
   19b. HOSTEL TOGGLE BUTTON  (.hostel-toggle)

   Left-aligned variant of the details/summary button used inside
   .hostel-col. Same size as the global summary button but left-
   aligned. Text ("Hostels"/"Close") is in the HTML and swapped
   by script-2.js on toggle.
   ============================================================ */

details.hostel-details {
    text-align: left;
    margin: 0.5rem 0 0 0;
}

/* Suppress the parallax gap — next element is always a heading */
details.hostel-details,
details.hostel-details:not([open]) {
    padding-bottom: 0;
}

/* The button — matches the global summary size exactly so it
   never changes dimensions on open/close */
details.hostel-details > summary.hostel-toggle {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    background-color: var(--color-red);
    color: #ffffff;
    padding: 12px 28px;
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: normal;
    text-align: center;
    border: none;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-bottom: 1.875rem; /* 30px — consistent open and closed, no size jump */
}

details.hostel-details > summary.hostel-toggle::-webkit-details-marker { display: none; }
details.hostel-details > summary.hostel-toggle::marker { display: none; }

details.hostel-details > summary.hostel-toggle:hover,
details.hostel-details > summary.hostel-toggle:focus-visible {
    background-color: var(--color-red);
    color: #e76b70;
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

details.hostel-details[open] > summary.hostel-toggle {
    background-color: #d40000;
    color: #ffffff;
    margin-bottom: 1.875rem; /* 30px — same as closed, no size jump */
}

/* Space between the last hostel link and the next h4 */
details.hostel-details[open] > .expanded-text {
    margin-bottom: 1.5rem;
}


/* ============================================================
   20. TOP PICKS (card-grid / hostel-card)
   Verbatim from style.css. Spacer divs replaced by padding on
   .top-pics-section (already set in section 19) and
   padding-bottom on .card-grid.
   ============================================================ */

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 507px);
    gap: 46px;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px var(--space-section-gap) 20px; /* bottom = 60px/30px gap before next element */
}

.hostel-card {
    background-color: #fcaf17;
    width: 507px;
    height: 100%;
    padding: 24px 24px 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    position: relative;
}

.card-location-tag {
    background-color: #bc1d23;
    width: 460px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    padding: 6px 15px 8px 15px;
    box-sizing: border-box;
    color: #ffffff;
    text-align: center;
}

.card-location-tag h3 {
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.08em;
    opacity: 0.85;
    line-height: 1.2;
}

/* Top picks: hostel name inside .card-location-tag — scoped so
   section 26 (.container-wide-hostels .hostel-card-header) doesn't conflict */
.card-location-tag .hostel-card-header {
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 1px 0 0 0;
    padding: 0;
    width: 100%;
    text-align: center;
    line-height: 1.2;
}

.card-img {
    width: 460px;
    height: 307px;
    object-fit: cover;
    margin-bottom: 10px;
}

.hostel-card p {
    width: 460px;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.card-btn {
    background-color: #bc1d23;
    width: 264px;
    height: 67px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    margin-top: 25px;
    margin-bottom: 0;
    transition: color 0.3s;
}

.card-btn:hover,
.card-btn:focus-visible {
    color: #ff8f8f;
    text-decoration: none;
}

.card-btn:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* Cards hidden on mobile — show only 2, hide the rest */
.hostel-card--desktop-only {
    display: none;
}

@media (min-width: 700px) {
    .hostel-card--desktop-only {
        display: flex;
    }
}

/* Responsive */
@media (max-width: 1100px) {
    .card-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 20px 15px var(--space-section-gap) 15px;
    }
    .hostel-card {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    .card-location-tag {
        width: 100%;
        padding: 6px 15px 8px 15px;
    }
    .card-img {
        width: 100%;
        height: auto;
        aspect-ratio: 460 / 307;
    }
    .hostel-card p {
        width: 100%;
    }
}


/* ============================================================
   21. FREE OFFLINE GUIDE / PWA SECTION

   .phone-images      — wrapper for the phone mockup images
   .phone-mockup      — the actual img element
   .desktop-only      — visible ≥601px, hidden on mobile
   .mobile-only       — visible ≤600px, hidden on desktop
   .product-grid      — two-column flex layout for Lite vs Full
   .product-col       — individual product column
   .promo-circle      — "ABSOLUTELY FREE!" badge
   .product-title     — h3 inside each product column
   .file-specs        — small print below download buttons
   .qr-code           — QR code image
   .download-btn      — already defined in section 12c; the PWA
                        section uses width/height overrides here
   #download-status   — JS-written status text
   #install-instructions — post-download how-to panel
   ============================================================ */

/* Phone mockup images */
.phone-images {
    text-align: center;
    margin: 2rem 0 1rem 0;
}

.phone-mockup {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Desktop shows wide image; hide mobile image */
.desktop-only { display: block; }
.mobile-only  { display: none; }

@media (min-width: 601px) {
    .mobile-only { display: none !important; }
    .phone-images { display: block; }
}

@media (max-width: 600px) {
    .desktop-only { display: none !important; }
    .phone-images { display: block; }

    .phone-mockup.mobile-only {
        display: block !important;
        width: 85%;
        max-width: 450px;
        margin: 1rem auto;
    }
}

/* Two-column product grid (Lite PDF vs Full App) */
.product-grid {
    display: flex;
    justify-content: center;
    gap: 100px;
    margin-top: 2rem;
    flex-wrap: wrap;
    padding-bottom: var(--space-section-gap); /* 60px/30px gap before next element */
}

.product-col {
    width: 470px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}

/* Push the download button to the same vertical position in both columns
   by consuming any extra space above it. flex-direction: column on
   .product-col makes margin-top: auto work here. */
.product-col .download-btn {
    margin-top: auto;
}

/* Ensure paragraphs above the button have breathing room */
.product-col p {
    margin-bottom: 1rem;
    padding: 0 1rem;
}

/* "ABSOLUTELY FREE!" badge */
.promo-circle {
    width: 110px;
    height: 110px;
    background-color: #fff200;
    border: 5pt solid #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    z-index: 2;
}

.promo-circle__top {
    font-size: 9pt;
    font-weight: bold;
}

.promo-circle__price {
    font-size: 24pt;
    font-weight: bold;
    line-height: 1;
}

/* Product icon images */
.product-icon {
    height: 200px;
    margin-bottom: 20px;
}

h3.product-title {
    font-size: 18pt;
    font-weight: bold;
    margin: 20px 0;
}

/* Download buttons in this section are wider than the default */
.product-col .download-btn {
    width: 330px;
    height: 84px;
    font-size: 12pt;
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-specs {
    font-size: 12pt;
    margin: 15px 0 50px 0;
    line-height: 1.2;
}

.qr-code {
    width: 225px;
    height: 225px;
    margin-top: 20px;
}

/* JS-written download status line */
#download-status {
    font-size: 0.8rem;
    margin-top: 5px;
    color: #555;
}

/* Post-download install instructions panel */
#install-instructions {
    display: none; /* shown by JS */
    font-size: 0.85rem;
    margin-top: 15px;
    padding: 12px 16px;
    background: #fff3cd;
    border-radius: 8px;
    text-align: left;
}

/* Responsive */
@media (max-width: 1100px) {
    .product-grid { gap: 50px; }
}

@media (max-width: 600px) {
    .product-col { width: 100%; }
    .product-col .download-btn { width: 100%; max-width: 330px; }
    .qr-code { display: none; } /* QR codes are desktop-only — pointless on mobile */
}


/* ============================================================
   22. BACK TO TOP BUTTON
   Fixed circle, bottom-right. Hidden by default; JS adds .show.
   Verbatim from style.css.
   ============================================================ */

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #d32f2f;
    border: 2px solid #ffeb3b;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.arrow-up {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #ffffff;
    margin-bottom: 4px;
}

.back-to-top:hover {
    background-color: #5f8950;
    transform: translateY(-5px);
}

.back-to-top:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* JS adds this class when the user scrolls down */
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 65px; /* 55px quick-jump-menu + 10px gap */
        right: 20px;
        width: 45px;
        height: 45px;
    }
}


/* ============================================================
   23. FOOTER

   footer                     — base element
   .affiliate-disclosure      — blue top section
   .affiliate-disclosure__cta — centred phone image + button wrapper
   .download-btn-yellow       — yellow variant of the download button
   .footer-main-red           — red brand section
   .footer-logo               — logo image
   .footer-brand              — site name h2
   .footer-payoff             — tagline
   .footer-nav                — link row
   .footer-share              — WhatsApp row
   .footer-share__icon        — WhatsApp icon image
   .footer-contribute         — teal contribution strip
   .footer-copyright          — yellow copyright bar
   .disclosure-text           — body text inside affiliate-disclosure
   .contact-link-multi        — JS-populated contact link span
   ============================================================ */

footer {
    width: 100%;
    font-family: var(--font-primary);
    overflow-x: hidden;
}

/* --- Affiliate Disclosure --- */

.affiliate-disclosure {
    background-color: #33689e;
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

.affiliate-disclosure h4 {
    color: #f6f723;
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

.disclosure-text {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 1000px;
    margin: 0 auto 15px auto;
}

.affiliate-disclosure a:not(.download-btn-yellow) {
    color: #f6f723;
    font-weight: bold;
    text-decoration: none;
    transition: color var(--transition-base);
}

.affiliate-disclosure a:not(.download-btn-yellow):hover {
    color: #ffffff;
}

/* Centred CTA block: phone image + button + file-specs */
.affiliate-disclosure__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 20px;
}

.affiliate-disclosure__cta img {
    margin-bottom: -5px; /* tight coupling between image and button */
}

.affiliate-disclosure__cta .file-specs {
    margin-bottom: 50px;
}

/* Yellow download button (footer variant) */
.download-btn-yellow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 330px;
    height: 84px;
    background-color: #ffdd00;
    color: #000000;
    border: none;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-base);
    margin-bottom: 20px;
}

.download-btn-yellow:hover,
.download-btn-yellow:focus-visible {
    color: #e74747;
    text-decoration: none;
}

.download-btn-yellow:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* Keep the heart emoji/image on the same line as "holiday!" */
.disclosure-text img {
    display: inline;
    vertical-align: middle;
    height: 1.2em;
    width: auto;
}

/* --- Red Brand Section --- */

.footer-main-red {
    background-color: var(--color-red);
    padding: 40px 20px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

.footer-logo {
    width: 100px;
    height: 100px;
    background-color: var(--color-yellow); /* visible if logo is transparent */
    margin-bottom: 15px;
}

.footer-brand {
    font-size: 2rem;
    font-weight: normal;
    line-height: 1.1;
    margin: 0;
    text-align: center;
    display: block;
}

.footer-payoff {
    font-size: 1.2rem;
    line-height: 1;
    margin: 5px 0 30px 0;
    text-align: center;
    display: block;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 30px 0;
    max-width: 1200px;
}

.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.footer-nav a:hover {
    color: #f0b8c0;
    text-decoration: none;
}

.footer-nav a:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* WhatsApp share row */
.footer-share {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.footer-share__icon {
    width: 45px;
    height: 45px;
}

/* --- Contribute strip --- */

.footer-contribute {
    background-color: #19ffc1;
    color: #000000;
    text-align: center;
    padding: 20px;
    font-size: 1rem;
    box-sizing: border-box;
}

/* --- Copyright bar --- */

.footer-copyright {
    background-color: var(--color-yellow);
    color: #000000;
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
    display: block;
}

/* --- Responsive --- */

@media (max-width: 1100px) {
    .affiliate-disclosure,
    .footer-main-red {
        width: 100%;
        box-sizing: border-box;
    }
    footer {
        padding-bottom: 10px;
    }
    .footer-copyright {
        padding-bottom: 20px;
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .footer-nav {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .footer-brand { font-size: 1.5rem; }
    .footer-payoff { font-size: 1rem; opacity: 0.85; }
    .download-btn-yellow { width: 100%; max-width: 330px; }
}

@media (max-width: 600px) {
    .disclosure-text {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    .footer-contribute {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    .footer-copyright {
        font-size: 0.75rem;
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .footer-nav a {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }
    .footer-nav {
        gap: 12px;
        margin: 15px 0;
    }
}


/* ============================================================
   24. COOKIE BANNER
   Fixed bottom bar. Hidden by default; JS sets display: block
   once the banner should be shown.
   ============================================================ */

.cookie-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #1a1a1a;
    color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: var(--z-popup);
    display: none; /* shown by JS */
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.cookie-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
    min-width: 300px;
}

.cookie-content a {
    color: #ffd700;
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: opacity 0.2s, transform 0.2s;
}

.cookie-btn.accept  { background: #ffd700; color: #000000; }
.cookie-btn.decline { background: #444444; color: #ffffff; }

.cookie-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.cookie-btn:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}


/* ============================================================
   25. TOUR GUIDE POPUP (#ma)
   Fixed character + speech bubble. Appears/disappears on scroll
   via tourguide.js. The tips and assets are configured per-page
   via window.BB_TIPS in a small inline script.
   ============================================================ */

#ma {
    position: fixed;
    bottom: 80px;
    left: 50px;
    display: inline-flex;
    align-items: center;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    height: min-content;
}

#ma-img {
    width: 200px;
    height: auto;
    pointer-events: auto;
    transition: width 0.3s;
}

#ma-bubble {
    position: relative;
    margin-left: 10px;
    margin-bottom: 20px;
    background: #000000;
    color: #fff200;
    border: 2px solid #FFD700;
    padding: 12px;
    border-radius: 4px;
    width: 180px;
    pointer-events: auto;
}

#ma-bubble p {
    margin: 0;
    font-family: sans-serif;
    font-size: 15px;
}

#ma-bubble a {
    color: #ffffff;
    font-size: 15px;
}

/* Speech bubble tail — outer (border colour) */
#t-out {
    position: absolute;
    left: -12px;
    bottom: 15px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #FFD700;
}

/* Speech bubble tail — inner (fill colour) */
#t-in {
    position: absolute;
    left: -9px;
    bottom: 15px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #000000;
}

@media (max-width: 600px) {
    #ma {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100vw;
        background-color: rgba(255, 255, 255, 0.65);
        display: flex;
        padding: 5px 7px;
        box-sizing: border-box;
        align-items: flex-end;
        transition: opacity 0.5s;
        z-index: 40;            /* below both menus (z-index: 9998) */
        pointer-events: none;   /* entire #ma bar passes all taps to menus above */
    }
    /* Keep pointer events disabled on all children too — the menus at
       z-index 9998 sit visually on top, but without this any tap in
       the overlapping area would be caught by #ma-img / #ma-bubble
       despite the higher z-index on the menus. */
    #ma *  {
        pointer-events: none;
    }
    #ma-img {
        width: 120px;
    }
    #ma-bubble {
        max-width: calc(100% - 130px);
        font-size: 15px;
        padding: 10px;
        margin-bottom: 5px;
        margin-left: 0;
        margin-right: 0;
    }
}


/* ============================================================
   26. HOSTEL DIRECTORY CARDS (regional pages)

   .container-wide-hostels  — card wrapper (yellow bg, shadow)
   .hostel-card-header      — red strip with hostel name in white
   .detail-h2               — hostel name inside the red strip
   .detail-p                — contact info / description block
   .map-3d-image            — 3D PNG map of the region
   .region-map              — Google My Map iframe wrapper
   .map-fallback            — offline fallback image
   .map-section-visual      — #map-visual wrapper (replaces inline style)
   ============================================================ */

/* Gap wrapper for the 3D map PNG — applies 60/30px space above it */
.map-3d-wrapper {
    padding-top: var(--space-section-gap);
}

/* Card wrapper */
.container-wide-hostels {
    max-width: 900px;
    width: calc(100% - 20px);
    margin: 0 auto var(--space-section-gap) auto;
    padding: 0 0 30px 0;
    box-sizing: border-box;
    background-color: var(--color-yellow);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* Red header strip — hostel name in white.
   Scoped to .container-wide-hostels so it doesn't affect
   .hostel-card-header in the top picks section (section 20). */
.container-wide-hostels .hostel-card-header {
    background-color: var(--color-red);
    padding: 22px 25px;
    margin: 0 0 20px 0;
}

.detail-h2 {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Contact info and description */
.detail-p {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    line-height: 1.65;
    margin: 0 25px 15px 25px;
    word-wrap: break-word;
    text-align: left;
}

.detail-p p {
    margin: 0 0 8px 0;
}

.detail-p strong {
    font-weight: bold;
}

/* Read More button — a little space above it */
.container-wide-hostels details {
    text-align: center;
    margin: 1.5rem 25px 0 25px;
}

/* Expanded text — left-aligned */
.container-wide-hostels .expanded-text {
    text-align: left;
}

.container-wide-hostels .expanded-text p,
.container-wide-hostels .expanded-text ul,
.container-wide-hostels .expanded-text li {
    text-align: left;
}

/* Booking buttons — centred, with equal space above and below */
.container-wide-hostels .booking-btn-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 1.5rem 25px 1.5rem 25px;
    padding-bottom: 0;
}

/* Map centering — iframe fills wrapper, wrapper is full-width */
.map-section-visual {
    width: 100%;
    position: relative;
    line-height: 0;
    margin-bottom: var(--space-section-gap);
    display: flex;
    justify-content: center;
}

/* 3D region map image */
.map-3d-image {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: block;
    margin: 0 auto var(--space-section-gap) auto;
}

/* Google My Map iframe wrapper */
.region-map {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.region-map iframe {
    display: block;
    border: 0;
    width: 100%;
}

/* Offline fallback image */
/* Offline fallback — image only, no text, full width.
   hostel-map.js may inject a <p> alongside the <img>; hide it. */
.map-fallback {
    display: none;
    width: 100%;
}

.map-fallback p,
.map-fallback span,
#bb-map-wrap .map-fallback p,
#bb-map-wrap .map-fallback span,
#bb-map-wrap > p,
#bb-map-wrap > span {
    display: none !important;
}

/* 1. Restrict the fallback to direct children only, saving the map pins */
.map-fallback img,
#bb-map-wrap > img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* 2. Iron-clad protection for your hostel pins */
img.bb-marker-icon {
    width: 30px !important;
    height: 30px !important;
    max-width: none !important; /* Overrides any rogue responsive image rules */
}

/* Responsive */
@media (max-width: 1100px) {
    .container-wide-hostels {
        width: calc(100% - 30px);
        border-radius: 10px;
    }
    .map-section-visual {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .detail-h2 { font-size: 1.4rem; }
    .detail-p  { font-size: 1rem; margin: 0 15px 12px 15px; }
    .container-wide-hostels .hostel-card-header { padding: 16px 15px; }
    .container-wide-hostels .booking-btn-container {
        margin: 1.5rem 15px 1.5rem 15px;
        justify-content: center;
    }
    .container-wide-hostels details {
        margin: 1.5rem 15px 0 15px;
    }
}


/* ============================================================
   27. MAPLIBRE Poster Image (Behind interactive map)
   ============================================================ */

.sa-hostel-map-shell {
  position: relative;
  width: 100%;
  height: 590px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .sa-hostel-map-shell {
    height: 310px;
  }
}

.sa-hostel-map-poster,
.sa-hostel-map-poster img,
.sa-hostel-map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sa-hostel-map-poster {
  z-index: 3; /* Must sit above the iframe (z-index: 2) so taps reach it */
  cursor: pointer;
}

.sa-hostel-map-poster img {
  object-fit: cover;
  display: block;
}

.sa-hostel-map-iframe {
  border: none;
  z-index: 2;
  background: transparent;
}

/* ============================================================
   28. MAP DESCRIPTION BAR
   Dark bar with green text, sits between header and map.
   ============================================================ */

.map-description {
    background: #000000;
    padding: 6px 8px 0 8px;
    font-size: 14px;
    line-height: 1.2;
    display: block;
    text-align: center;
}

.map-description__label {
    color: #fff200;
    font-weight: 600;
}

.map-description__text {
    color: #fff200;
}

/* Mobile Styles */
@media screen and (max-width: 600px) {
    .map-description {
        font-size: 11px;
        padding: 3px 7px;
    }
}



/* ============================================================
   29. MAP FILTER BUTTONS
   The scrollable row of hostel-filter buttons that sits above
   the interactive map on national and regional pages.

   Colour is per-button data, not a design pattern, so each
   <a> carries a direct  style="background-color: #xxx"  inline
   style (and  color: #000000  on the two light buttons: yellow
   and amber).  All structural rules live here.

   All 16 button colours are WCAG AA compliant (≥4.5:1) against
   their text colour.  See the contrast audit in the dev notes.
   ============================================================ */

.map-filter-bar {
    background-color: #000000;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 0 6px 0;
    text-align: center;
}

/* Scroll container — matches jump menu scrollbar treatment:
   dark (#333) track, mid-grey (#999) thumb, hidden on mobile */
.map-filter-bar__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    padding: 6px 20px 6px 20px;
    box-sizing: border-box;
    scrollbar-width: auto;
    scrollbar-color: #999999 #333333;
}

.map-filter-bar__scroll::-webkit-scrollbar {
    height: 6px;
}

.map-filter-bar__scroll::-webkit-scrollbar-track {
    background: #333333;
}

.map-filter-bar__scroll::-webkit-scrollbar-thumb {
    background: #999999;
    border-radius: 3px;
}

.map-filter-bar__scroll::-webkit-scrollbar-button {
    background: #333333;
    width: 6px;
}

.map-filter-bar__row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
    min-height: 45px;
}

.map-filter-btn {
    /* background-color and color are set per-button via inline style="background-color: #xxx" */
    display: inline-block;
    color: #ffffff; /* default; overridden inline to #000000 on the two light buttons */
    padding: 5px 4px;
    text-decoration: none;
    font-family: 'Century Gothic', sans-serif;
    font-size: 0.8rem;
    font-weight: normal;
    text-transform: uppercase;
    border: 3px solid transparent; /* reserve space so active border doesn't shift layout */
    border-radius: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.map-filter-btn:hover {
    opacity: 0.85;
    text-decoration: none;
}

.map-filter-btn:focus-visible {
    outline: 3px solid var(--color-yellow-bright);
    outline-offset: 2px;
}

/* Active state — JS toggles this class */
.map-filter-btn--active {
    border-color: #ffffff;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

/* Disclaimer note below the buttons */
.map-filter-bar__note {
    color: #a0a0a0; /* 8.0:1 on black — AAA */
    font-family: 'Century Gothic', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 0 20px;
    box-sizing: border-box;
    white-space: normal;
}

@media (max-width: 600px) {
    .map-filter-bar__scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .map-filter-bar__scroll::-webkit-scrollbar {
        display: none;
    }

    .map-filter-btn {
        font-size: 0.75rem;
        padding: 8px 6px;
    }

    .map-filter-bar__note {
        font-size: 0.55rem;
        letter-spacing: 0.5px;
        margin-top: 6px;
    }
}


/* ============================================================
   30. RESOURCE LIST
   ============================================================ */

.resource-list {
    list-style: none;
    padding: 0;
    margin: var(--space-section-gap) 0 0 0;
}
.resource-list li {
    margin-top: var(--space-section-gap);
}
.resource-list__title {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

@media (max-width: 600px) {
    .resource-list {
        padding: 0 20px;
    }
}

/* ============================================================
   31. REGIONS GRID
   Cards with background images and semi-transparent glass boxes.
   Used on /backpacking-south-africa/
   ============================================================ */

/* Intro paragraph above the grid */
.about-p-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    max-width: 1200px;
    padding: 0 40px;
    text-align: center;
    margin: 0 auto var(--space-section-gap) auto;
}

/* The grid itself */
.overlay-grid {
    display: grid;
    grid-template-columns: repeat(3, 380px);
    gap: 30px;
    justify-content: center;
    padding: 0 20px var(--space-section-gap) 20px;
    box-sizing: border-box;
}

/* Individual card */
.card-wrapper {
    width: 380px;
    height: 380px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card-wrapper:hover {
    transform: scale(1.05);
}

/* Full-bleed background image */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background-color: #666;
}

/* Semi-transparent overlay box */
.glass-box {
    position: relative;
    z-index: 2;
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.glass-box h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: bold;
    margin: 0 0 0.625rem 0;
    color: #000;
}

.glass-box p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    margin: 0 0 1.25rem 0;
    line-height: 1.3;
    color: #000;
}

/* Explore button */
.red-explore-btn {
    background-color: #bc1d23;
    width: 212px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.red-explore-btn:hover {
    color: #da8293;
    text-decoration: none;
}

.red-explore-btn:focus-visible {
    color: #da8293;
    text-decoration: none;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* ---- Responsive ---- */

/* Two columns at medium widths */
@media (max-width: 1260px) {
    .overlay-grid {
        grid-template-columns: repeat(2, 380px);
    }
}

/* Single column on mobile — cards go full-width */
@media (max-width: 800px) {
    .overlay-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-wrapper {
        width: 100%;
        height: 320px;
    }

    .glass-box {
        width: 85%;
        height: auto;
        min-height: 240px;
        padding: 16px;
    }

    .about-p-text {
        padding: 0 20px;
        font-size: 1rem;
    }
}


/* ============================================================
   29. ABOUT PAGE — CARDS GRID
   Used on the about-backpackers-bible page.
   Verbatim from style.css, cleaned up.
   ============================================================ */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1100px;
    gap: 40px;
    justify-content: center;
    margin: 2rem auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.card {
    background-color: #e7bd1d;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    justify-content: flex-start;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.card-header-bg {
    background-color: var(--color-red);
    height: 35px;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.card-header-bg h3 {
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    line-height: 35px;
    text-align: center;
}

.card-text {
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    max-width: 460px;
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: center;
    flex-grow: 0;
}

.hostel-container-1200 {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

@media (max-width: 1000px) {
    .cards-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
    }
    .card {
        width: 100%;
        height: auto;
        padding-bottom: 30px;
    }
}

/* ============================================================
   32. CARTOUCHE ILLUSTRATION
   ============================================================ */

/* Base styles (Mobile First) */
.cartouche-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;  /* Mobile bottom margin */
}

.cartouche-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Desktop styles (Screens wider than 767px) */
@media (min-width: 768px) {
  .cartouche-container {
    margin-bottom: 60px; /* Desktop bottom margin */
  }
}


/* ============================================================
   33. MAP OVERLAY CIRCLE
   ============================================================ */

.map-overlay-circle {
    position: absolute;
    top: 60px;
    right: 70px;
    width: 170px;
    height: 170px;
    background-color: #fff200;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.1;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.9);
    z-index: 10;
    pointer-events: none; /* Desktop: click through to the map */
    border: 3px solid #fff;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* --- Mobile Responsiveness & Behaviour --- */
@media (max-width: 767px) {
    .map-overlay-circle {
        width: 130px;
        height: 130px;
        font-size: 12px;
        padding: 15px;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        pointer-events: auto; /* Mobile: tapping the circle loads the map */
        cursor: pointer;
    }

    /* After the map loads, fade the circle out */
    .map-container.map-active .map-overlay-circle {
        opacity: 0;
        visibility: hidden;
    }
}



/* ============================================================
   34. DICTIONARY DEFINITION BOX
   ============================================================ */

.dictionary-def {
    background-color: #ffffff;
    border-left: 6px solid #bc1d23; /* Backpackers Bible Red */
    padding: 25px 30px;
    margin: 40px auto;
    max-width: 800px; /* Keeps the text line-length readable */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* The word being defined */
.dictionary-def dfn {
    font-family: 'Century Gothic', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #000000;
    font-style: normal; /* Browsers italicize <dfn> by default; this resets it */
    letter-spacing: 1px;
}

/* The grammar type (noun, verb, etc.) */
.dictionary-def .word-type {
    font-family: 'Century Gothic', sans-serif;
    font-size: 1.1rem;
    color: #666666;
    font-style: italic;
    margin-left: 10px;
}

/* The definition text */
.dictionary-def p {
    font-family: 'Century Gothic', sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #333333;
    margin: 15px 0 25px 0;
    text-align: left;
}

/* The attribution line */
.dictionary-def footer {
    font-family: 'Century Gothic', sans-serif;
    font-size: 1rem;
    color: #666666;
    text-align: right;
}

/* The specific source name */
.dictionary-def cite {
    font-style: italic;
    font-weight: bold;
    color: #000000;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
    .dictionary-def {
        padding: 20px 20px;
        margin: 30px 15px; /* Adds a safety gutter on small screens */
    }
    
    .dictionary-def dfn {
        font-size: 1.6rem;
    }
    
    .dictionary-def p {
        font-size: 1.1rem;
    }
}


/* ============================================================
   35. SITEMAP STYLES
   ============================================================ */

/* Container for the sitemap to match page width */
.sitemap-wrap {
    max-width: 100%; /* Adjust this to match your site's standard paragraph width */
    margin: 0 auto;   /* Centers the container on the page */
    padding: 0 20px;  /* Prevents text from touching screen edges on mobile */
}

/* Fixes the bullet point indentation */
.sitemap-list {
    padding-left: 1.5rem; 
    list-style-type: none;
    margin-top: 5rem;

}

/* New class for left-aligned descriptive text */
.sitemap-text-left {
    text-align: left;
    margin-top: 0.5rem;
    margin-bottom: 5rem;
    display: block;
    line-height: 1.6;
}


/* Ensure the list item has room for the arrow */
.sitemap-list li {
    margin-top: 50px;
    position: relative;
    padding-left: 40px; /* Increased this slightly to ensure the arrow isn't cramped */
}

/* The Arrow Code */
.sitemap-list li::before {
    content: "\2B95"; /* Check that this is a BACKSLASH */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;   /* Made it larger so it's easier to spot */
    line-height: 1.2; /* Aligns it vertically with the H2 link */
    color: #333;      /* Change to 'blue' or 'red' temporarily to see if it appears */
    display: block;
}


/* 2. Fix the font sizes: Force h3 and h4 to look larger within the sitemap */
.sitemap-list h3 a {
    font-size: 1.5rem !important; /* Forces the Home/Itinerary links to be large */
}

.sitemap-list h4 a {
    font-size: 1.5rem !important; /* Forces the Regional links (Cape Town, etc) to be larger */
}


/* 3. Keep your existing alignment and spacing */
.sitemap-list {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

.sitemap-list li {
    margin-top: 60px; /* Space before the next header */
    position: relative;
}

.sitemap-text-left {
    text-align: left;
    margin-top: 10px;
    display: block;
    line-height: 1.6;
}



/* Fix the box model so padding doesn't push text off the screen */
.sitemap-wrap, .sitemap-list, .sitemap-list li, .sitemap-text-left {
    box-sizing: border-box;
}

/* ---------------------------------------------------
   MOBILE STYLES (Triggers on screens 768px or smaller) 
   --------------------------------------------------- */
@media (max-width: 768px) {
    /* 1. Reduce the indentation and space for the arrow */
    .sitemap-list li {
        padding-left: 25px; /* Pulls the text back to the left */
        margin-top: 40px;   /* Slightly tighter vertical spacing for mobile */
    }

    /* 2. Scale down the arrow to match */
    .sitemap-list li::before {
        font-size: 18px; 
        top: 2px;
    }

    /* 3. Scale down the heading fonts so they don't break the screen width */
    .sitemap-list h3 a {
        font-size: 1.6rem !important; 
    }

    .sitemap-list h4 a {
        font-size: 1.3rem !important;
    }

    /* 4. Ensure paragraphs stay contained */
    .sitemap-text-left {
        padding-right: 0;
        margin-right: 0;
        width: 100%;
        overflow-wrap: break-word; /* Forces long words/URLs to break instead of overflowing */
    }
}


/* 1. Desktop Safety: Ensure sitemap images never break the container */
.sitemap-list li img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2. Mobile Rule: Shrink the images to half size on phones */
@media (max-width: 768px) {
    .sitemap-list li img {
        max-width: 80%; /* Shrinks the image to half the container width */
        margin-left: 0; /* Keeps it aligned to the left with the text */
        margin-right: auto;
    }
}




/* ============================================================
   36. COMPASS STYLES
   ============================================================ */

.compass-container {
  position: relative !important;
  margin: -40px auto 0 auto;
  box-sizing: border-box;
}

.compass-wrapper-unified {
  position: relative !important;
  display: block !important;
  background-image: url('https://backpackersbible.com/assets/compass-background.svg') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  z-index: 1;
}

/* The Spinning Needle */
.compass-wrapper-unified::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background-image: url('https://backpackersbible.com/assets/compass-needle.svg') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  transform-origin: center center !important;
  animation: bbbSwingCentred 8s ease-in-out infinite !important;
  z-index: 2 !important;
}

@keyframes bbbSwingCentred {
  0%, 20% { transform: translate(-50%, -50%) rotate(0deg); }
  30%, 50% { transform: translate(-50%, -50%) rotate(225deg); }
  60%, 80% { transform: translate(-50%, -50%) rotate(90deg); }
  90%, 100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ==========================================================================
   2. GLOBAL PILL & LINK STYLES
   ========================================================================== */
.pill {
  position: absolute !important; 
  background-color: #bc1d23 !important; 
  color: white !important;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 3 !important; /* Default, will be overridden on mobile */
  border-radius: 50px !important;
  border: 2px solid #ffd400 !important; /* ADDED: Yellow border */
}

.pill a {
  color: white !important;
  text-decoration: none;
  transition: opacity 0.2s, text-decoration 0.2s;
}

.pill a:hover {
  opacity: 0.8;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   3. MOBILE MAP LAYOUT (Screens under 768px wide)
   ========================================================================== */
@media (max-width: 767px) {
  .compass-container {
    width: 100%;
    max-width: 380px;
    height: 740px;    /* Slightly expanded to give the vertical stacks breathing room */
    display: block !important;
    margin-top: 20px !important;
  }

  .compass-wrapper-unified {
    width: 260px !important;
    height: 260px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  /* Center all pills into a clean vertical spine */
  .pill {
    padding: 8px 16px;
    font-size: 13px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* ==========================================
     TOP CLUSTER (Stacked Above Compass)
     ========================================== */

  /* WEST: Highest pill, steps far left, then down to W */
  .pill.west { top: 30px; z-index: 11 !important; }
  .pill.west::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    width: 130px; 
    height: 310px;
    border-left: 2px solid #bc1d23;
    border-top: 2px solid #bc1d23;
    z-index: -1;
  }

  /* NORTH WEST: Steps mid-left, then down to NW */
  .pill.north-west { top: 80px; z-index: 12 !important; }
  .pill.north-west::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    width: 92px;
    height: 210px;
    border-left: 2px solid #bc1d23;
    border-top: 2px solid #bc1d23;
    z-index: -1;
  }

  /* NORTH EAST: Steps mid-right, then down to NE */
  .pill.north-east { top: 130px; z-index: 13 !important; }
  .pill.north-east::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92px;
    height: 160px;
    border-right: 2px solid #bc1d23;
    border-top: 2px solid #bc1d23;
    z-index: -1;
  }

  /* NORTH: Lowest of top cluster, shoots straight down to N */
.pill.north { top: 180px; z-index: 14 !important; }
.pill.north::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 15px; /* Tighter fit for mobile compass */
  background: #bc1d23;
  transform: translateX(-50%);
}

  /* ==========================================
     BOTTOM CLUSTER (Stacked Below Compass)
     ========================================== */

  /* SOUTH: Highest of bottom cluster, shoots straight up to S */
.pill.south { bottom: 180px; z-index: 14 !important; }
.pill.south::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: 15px; /* Tighter fit for mobile compass */
  background: #bc1d23;
  transform: translateX(-50%);
}

  /* SOUTH EAST: Steps mid-right, then up to SE */
  .pill.south-east { bottom: 130px; z-index: 13 !important; }
  .pill.south-east::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 92px;
    height: 160px;
    border-right: 2px solid #bc1d23;
    border-bottom: 2px solid #bc1d23;
    z-index: -1;
  }

  /* SOUTH WEST: Steps mid-left, then up to SW */
  .pill.south-west { bottom: 80px; z-index: 12 !important; }
  .pill.south-west::after {
    content: '';
    position: absolute;
    bottom: 50%;
    right: 50%;
    width: 92px;
    height: 210px;
    border-left: 2px solid #bc1d23;
    border-bottom: 2px solid #bc1d23;
    z-index: -1;
  }

  /* EAST: Lowest pill, steps far right, then up to E */
  .pill.east { bottom: 30px; z-index: 11 !important; }
  .pill.east::after {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 130px;
    height: 310px;
    border-right: 2px solid #bc1d23;
    border-bottom: 2px solid #bc1d23;
    z-index: -1;
  }
}

/* ==========================================================================
   4. DESKTOP MAP LAYOUT (Screens 768px and wider)
   ========================================================================== */
@media (min-width: 768px) {
  .compass-container {
    width: 850px;
    height: 850px;
    display: block !important;
  }

  .compass-wrapper-unified {
    width: 450px !important;
    height: 450px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }

  .pill {
    padding: 10px 20px;
    font-size: 15px;
  }

  /* --- Desktop Coordinates & Lines --- */
  
  /* NORTH */
  .pill.north { top: 120px; left: 50%; transform: translateX(-50%); }
  .pill.north::after { content: ''; position: absolute; top: 100%; left: 50%; width: 2px; height: 30px; background: #bc1d23; transform: translateX(-50%); }

  /* SOUTH */
  .pill.south { bottom: 120px; left: 50%; transform: translateX(-50%); }
  .pill.south::after { content: ''; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 30px; background: #bc1d23; transform: translateX(-50%); }

  /* EAST */
  .pill.east { left: 680px; top: 50%; transform: translateY(-50%); }
  .pill.east::after { content: ''; position: absolute; right: 100%; top: 50%; width: 25px; height: 2px; background: #bc1d23; transform: translateY(-50%); }

  /* WEST */
  .pill.west { right: 680px; top: 50%; transform: translateY(-50%); }
  .pill.west::after { content: ''; position: absolute; left: 100%; top: 50%; width: 25px; height: 2px; background: #bc1d23; transform: translateY(-50%); }

  /* NORTH EAST (Centered origin, points down-left to compass) */
  .pill.north-east { top: 170px; left: 630px; }
  .pill.north-east::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 2px; 
    height: 150px; /* Increased length to bridge the gap */
    background: #bc1d23; 
    transform-origin: top center;
    transform: rotate(45deg); 
    z-index: -1; /* Tucks seamlessly behind the pill background */
  }

  /* NORTH WEST (Centered origin, points down-right to compass) */
  .pill.north-west { top: 170px; right: 630px; }
  .pill.north-west::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 2px; 
    height: 150px; 
    background: #bc1d23; 
    transform-origin: top center;
    transform: rotate(-45deg); 
    z-index: -1;
  }

  /* SOUTH EAST (Centered origin, points up-left to compass) */
  .pill.south-east { bottom: 170px; left: 630px; }
  .pill.south-east::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 2px; 
    height: 150px; 
    background: #bc1d23; 
    transform-origin: top center;
    transform: rotate(135deg); 
    z-index: -1;
  }

  /* SOUTH WEST (Centered origin, points up-right to compass) */
  .pill.south-west { bottom: 170px; right: 630px; }
  .pill.south-west::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 2px; 
    height: 150px; 
    background: #bc1d23; 
    transform-origin: top center;
    transform: rotate(-135deg); 
    z-index: -1;
  }
}

/* ==========================================================================
   OCEAN PILL COLOR MODIFIER
   ========================================================================== */
.pill.pill-ocean-blue {
  background-color: #005F8A !important; 
  border-color: #009FE3 !important; 
  cursor: default !important; 
}

/* Change borders to blue for the mobile "stepped" lines, but keep the boxes transparent! */
.pill.pill-ocean-blue::after {
  border-color: #005F8A !important;
  background-color: transparent !important; 
}

/* The straight lines (North/South on mobile) are drawn with backgrounds, not borders */
.pill.north.pill-ocean-blue::after,
.pill.south.pill-ocean-blue::after {
  background-color: #005F8A !important;
}

/* On Desktop, ALL lines are straight and drawn with backgrounds */
@media (min-width: 768px) {
  .pill.pill-ocean-blue::after {
    background-color: #005F8A !important;
  }
}

/* ==========================================================================
   EXTRA STANDALONE PILLS (Itineraries & Advice)
   ========================================================================== */

/* Bright, accessible green (Contrast ratio: 5.5:1 against white text) */
.pill.extra-itineraries,
.pill.extra-advice {
  background-color: #007B3A !important; 
}

/* Prevent the compass connecting lines from drawing on these detached pills */
.pill.extra-itineraries::after,
.pill.extra-advice::after {
  display: none !important;
}

/* --- Mobile Positioning (Screens under 768px) --- */
@media (max-width: 767px) {
  /* Expand the gap below the compass further to fit the lowered pills */
  .compass-container {
    margin-bottom: 180px !important; 
  }
  
  /* Pushed further away from the lowest compass pill */
  .pill.extra-itineraries { 
    bottom: -70px; 
    z-index: 10 !important; 
  }
  
  .pill.extra-advice { 
    bottom: -130px; 
    z-index: 10 !important; 
  }
}

/* --- Desktop Positioning (Screens 768px and wider) --- */
@media (min-width: 768px) {
  /* Add margin to the bottom of the container to clear the new pills */
  .compass-container {
    margin-bottom: 80px !important; 
  }

  /* Placed further down and sitting side-by-side in one line */
  .pill.extra-itineraries { 
    bottom: -30px; 
    left: calc(50% - 10px); /* Pushes the right edge 10px left of center */
    transform: translateX(-100%); 
  }
  
  .pill.extra-advice { 
    bottom: -30px; 
    left: calc(50% + 10px); /* Pushes the left edge 10px right of center */
    transform: translateX(0); 
  }
}

/* --- Centre label --- */

.pill-center-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  
  /* Styling */
  background-color: #000000;
  color: #ffffff;
  padding: 8px 16px;
  font-weight: bold;
  border-radius: 0; /* Square edges */
  white-space: nowrap;
  
  /* Optional: pointer-events: none; if you don't want it to block clicks */
  pointer-events: none;
}

/* ============================================================
   37. KALAHARI GAME — DESKTOP ONLY
   The game canvas and its wrapper are hidden on mobile/tablet.
   The JS script itself is also conditionally skipped — see
   the HTML comment in the page source around the <script> tag.
   ============================================================ */

.kalahari-game-wrap {
  display: none; /* Hidden by default (mobile-first) */
}

@media (min-width: 1024px) {
  .kalahari-game-wrap {
    display: block; /* Only visible on desktop */
  }
}


/* ============================================================
   38. My Maps Itinerary page load on click
   ============================================================ */


.map-placeholder {
    position: relative;
}

.map-placeholder picture,
.map-placeholder img {
    display: block;
    width: 100%;
}

.load-map-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    padding: 1rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
}