/*
Theme Name: Madikwe Child
Description: Child theme for the Madikwe Safari Lodge website based on the Greenshift FSE theme. Made with ❤️, good spirits and better music.
Author: TrustDavid
Template: greenshift
Version: 1.0.0
Text Domain: madikwe
*/

/**
 * MADIKWE SAFARI LODGE (MSL) CHILD THEME STYLESHEET
 *
 * Version: 1.0.0
 * Framework: BEM, Mobile-First, Structural Utility Focus
 *
 * NOTE: Typography and Colour tokens are managed via the FSE Site Editor.
 */

/* TOC
==========================================================================
1.0 DESIGN TOKENS (ROOT)
2.0 GLOBAL STYLES AND RESETS
3.0 NAVS, HEADER & FOOTER
4.0 LAYOUTS
5.0 COMPONENTS
6.0 UTILITY CLASSES
7.0 HELPER CLASSES
8.0 CRITICAL OVERRIDES
==========================================================================
*/

/*
==========================================================================
1.0 DESIGN TOKENS (ROOT)
==========================================================================
*/

/* 
--------------------------------------------------------------------------
 * ROOT STYLES AND TOKENS
-------------------------------------------------------------------------- 
*/

/*
   * NOTE: All custom CSS variables (tokens) are strictly namespaced
   * with --msl- to ensure no conflicts with FSE or plugin variables.
   */

html {
  font-size: 16px;
  line-height: 1.7;
}

:root {
  /* BREAKPOINT TOKENS*/
  /* Defined in em for accessibility and better relative scaling */
  --msl-breakpoint-md: 48em; /* 768px - Tablet Portrait */
  --msl-breakpoint-lg: 64em; /* 1024px - Tablet Landscape / Small Desktop */
  --msl-breakpoint-nav: 75em; /* 1200px - msl-nav-breakpoint-20260730. The off-canvas
     desktop layout needs 1172px: 32 padding + 110% of the 400px block + a 400px
     submenu = a flyout edge pinned at 872px, against a tertiary sidebar that starts
     at viewport-300. Below that they overlap. 75em is the measured minimum plus
     headroom; the whole nav chrome switches on this one value. */
  --msl-breakpoint-xl: 80em; /* 1280px - Standard Desktop */

  /* COLOUR TOKENS: ACCENT */
  --msl-color-twilight-soil: #4a2833;
  --msl-color-wild-fig: #633b47;
  --msl-color-sunset-ember: #dd8872;

  /* COLOUR TOKENS: PRIMARY */
  --msl-color-buffalo-hide: #433c3b;
  --msl-color-river-clay: #625c58;
  --msl-color-acacia-bark: #ab9e94;
  --msl-color-elephant-dust: #d3ccc1;
  --msl-color-kalahari-mist: #f4ede5;

  /* COLOUR TOKENS: AUXILLARY */
  --msl-color-buffalo-hide-35: rgba(67, 60, 59, 0.31);
  --msl-color-buffalo-hide-50: rgba(67, 60, 59, 0.5);
  --msl-color-buffalo-hide-85: rgba(67, 60, 59, 0.85);
  --msl-color-buffalo-hide-95: rgba(67, 60, 59, 0.95);
  --msl-color-elephant-dust-50: rgba(211, 204, 193, 0.5);
  --msl-color-twilight-soil-50: rgba(74, 40, 51, 0.5);
  --msl-color-wild-fig-0: rgba(99, 59, 71, 0);
  --msl-color-kalahari-mist-80: rgba(244, 237, 229, 0.8);

  /* FONT FAMILY TOKENS */
  --msl-font-heading: "IvyMode", serif;
  --msl-font-body: "Noto Sans", sans-serif;

  /* TYPOGRAPHY GENERAL TOKENS */
  --msl--font-size-oversized: 3.2rem;

  /* SPACING SCALE TOKENS */
  --msl-space-sm: 1rem;
  --msl-space-md: 2rem;
  --msl-space-lg: 4rem;
  --msl-space-xl: 6rem;
  --msl-space-huge: 8rem;
  --msl-space-god: 10rem;
  --msl-space-12vh: 12vh;
  --msl-space-15vh: 15vh;
  --msl-space-20vh: 20vh;

  /* ON-PAGE NAV SPACING */
  --msl-sidebar-width: 150px;
  --msl-nav-footer-offset: 2vh; /* MUST match .msl-nav__mobile-footer's bottom.
     The off-canvas panel height is derived from it so the bar's buttons centre
     in the strip below the panel — see msl-nav-centre-20260730. */
  --msl-mobile-nav-height: 100px;

  /* ENQUIRE BUTTON DROPDOWN */
  --msl-enquire-dropdown-width: 180px;

  /* PRIMARY CONTENT WIDTH */
  --msl-max-content-width: 72ch;

  /* TRANSITIONS */
  --msl-transition-function: cubic-bezier(0.4, 0, 0.2, 1);
  --msl-transition-duration-slow: 0.8s;
  --msl-transition-duration-fast: 0.3s;

  /* PARALLAX COVER TOKENS */
  --msl-parallax-block-height: 120vh;
  --msl-parallax-scroll-height: 20vh;
  --msl-parallax-overlay-colour: var(--msl-color-buffalo-hide-50);
  --msl-parallax-max-content-width: 1200px;
}

/*
==========================================================================
2.0 GLOBAL STYLES AND RESETS
==========================================================================
*/

/* 
--------------------------------------------------------------------------
 * BOX-MODEL RESET
-------------------------------------------------------------------------- 
*/

/* --- Box Sizing --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Sets the offset for all scrolling to prevent fixed/sticky element overlap */
  scroll-padding-top: 1px; /* Small 1px pad to force a better initial calculation */
}

/* --- Global Custom List --- */
.msl-list__custom ul {
  list-style: none;
  padding-left: 0;
}

.msl-list__custom ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.msl-list__custom ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.msl-list__custom--wild ul li::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/madikwe-spoor-WILD-DOG-bullet-32x32-1.png");
}
.msl-list__custom--camp ul li::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/madikwe-spoor-elephant-32x32-1.png");
}

.msl-list__custom--experience ul li::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/madikwe-spoor-impala-32x32-1.png");
}

.msl-list__custom--trip ul li::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/madikwe-spoor-LION-32x32-1.png");
}

/*
==========================================================================
3.0 NAVS, HEADER & FOOTER
==========================================================================
*/

/* 
--------------------------------------------------------------------------
 * ON-PAGE NAVIGATION (SIDEBARS & MOBILE BARS)
-------------------------------------------------------------------------- 
*/

.msl-nav__logo-primary {
  min-width: 140px !important;
  max-width: 75%;
}

.msl-nav__mobile-top-bar .msl-nav__logo-primary {
  margin-block-start: var(--msl-space-md);
  max-width: 240px;
}

/* --- Desktop Logo --- */
@media (min-width: 75em) {
  .msl-nav__logo-primary,
  .msl-nav__enquire-desktop {
    display: block;
    position: fixed;
    top: 0;
    z-index: 150;
    margin-block-start: var(--msl-space-md);
  }

  .msl-nav__logo-primary {
    left: 0;
    width: 220px;
    height: auto;
    margin-inline-start: calc(var(--msl-sidebar-width) / 4);
  }

  /* --- Desktop Enquire --- */
  .msl-nav__enquire-desktop {
    right: 0;
    margin-inline-end: calc(var(--msl-sidebar-width) / 4);
    padding-top: 18px;
  }
}

.msl-nav__mobile-top-bar .msl-nav__logo-primary--mobile {
  width: 200px;
  align-self: center;
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
 *  ENQUIRE DROPDOWN COMPONENT (.msl-enquire-dropdown)
 * -------------------------------------------------------------------------- */

.msl-enquire-dropdown {
  display: inline-block;
}

.msl-enquire-dropdown__trigger,
.msl-enquire-dropdown__item {
  width: var(--msl-enquire-dropdown-width) !important;
  min-width: var(--msl-enquire-dropdown-width) !important;
  text-align: center;
}

.msl-enquire-dropdown__menu {
  position: absolute;
  left: 50%;
  /* Start slightly offset for the slide-in transition */
  transform: translate(-50%, 10px);
  bottom: var(--msl-mobile-nav-height);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block-start: 0.5rem;
  z-index: 200;

  /* background-color: var(--msl-color-buffalo-hide-85); 
    border: 1px solid var(--msl-color-sunset-ember);
    border-radius: 2px; */

  /* Hidden State */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--msl-transition-duration-fast) var(--msl-transition-function),
    transform var(--msl-transition-duration-fast) var(--msl-transition-function),
    visibility 0s linear var(--msl-transition-duration-fast);
}

/* 3. Hover State Persistence Logic */
/* When .is-active is on the container, force the trigger to its hover state */
.msl-enquire-dropdown.is-active .msl-enquire-dropdown__trigger {
  text-decoration: none;
  box-shadow:
    0 0 0 0.5px var(--msl-color-sunset-ember),
    0 -5px 10px -5px var(--msl-color-sunset-ember),
    0 5px 10px -5px var(--msl-color-sunset-ember);
  color: var(--msl-color-sunset-ember);
  background-color: var(--msl-color-buffalo-hide);
}

/* Reveal the menu */
.msl-enquire-dropdown.is-active .msl-enquire-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 10%);
  transition-delay: 0s;
}

/* 4. Desktop Specifics (Top-Down) */
@media (min-width: 75em) {
  .msl-enquire-dropdown__menu {
    bottom: auto;
    top: 100%; /* Sits directly below the trigger */
    transform: translateX(-50%) translateY(-10px);
  }
}

.msl-nav__mobile-footer .msl-enquire-dropdown__menu {
  width: 100%;
  bottom: var(--msl-mobile-nav-height);
  background-color: transparent;
  border: none;
  padding: 0;
  padding-inline: var(--msl-space-md);
}

/* --- PRIMARY STRUCTURE --- */

/* Base opacity and transition for all fixed navigation elements */
.msl-nav__mobile-top-bar,
.msl-nav__mobile-footer,
.msl-nav__sidebar--left,
.msl-nav__sidebar--right {
  opacity: 0.5;
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}

.msl-nav__mobile-footer {
  opacity: 1;
}

/* Access elements through the sidebar */
.msl-nav__sidebar--left *,
.msl-nav__sidebar--right *,
.msl-nav__mobile-top-bar *,
.msl-nav__mobile-footer * {
  pointer-events: auto;
}

/* Inactivity State - Applies the modifier directly to the element */
.msl-nav__sidebar--left.msl-nav--idle,
.msl-nav__sidebar--right.msl-nav--idle {
  opacity: 0.15;
}

.msl-nav__mobile-top-bar.msl-nav--idle {
  opacity: 1;
}

/* Scroll Down State */
.msl-nav__mobile-top-bar.msl-nav--hidden,
.msl-nav__mobile-footer.msl-nav--hidden,
.msl-nav__sidebar--left.msl-nav--hidden,
.msl-nav__sidebar--right.msl-nav--hidden {
  opacity: 0;
}

/* Active State */
.msl-nav__mobile-top-bar.msl-nav--visible,
.msl-nav__mobile-footer.msl-nav--visible,
.msl-nav__sidebar--left.msl-nav--visible,
.msl-nav__sidebar--right.msl-nav--visible,
.msl-nav__sidebar--left:hover,
.msl-nav__sidebar--right:hover {
  opacity: 1 !important;
}

.msl-nav__mobile-top-bar.msl-nav--visible {
  background-color: var(--msl-color-buffalo-hide);
}

/* Access elements through the sidebar */
.msl-nav__sidebar--left *,
.msl-nav__sidebar--right *,
.msl-nav__mobile-top-bar *,
.msl-nav__mobile-footer * {
  pointer-events: auto;
}

/* Mobile Elements of the Navigation System */
.msl-nav__mobile-top-bar,
.msl-nav__mobile-footer {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--msl-mobile-nav-height);
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-inline: var(--msl-space-md);
}

.msl-nav__mobile-top-bar {
  top: 0;
  justify-content: center;
}

.msl-nav__mobile-footer {
  bottom: 2vh;
  justify-content: space-between;
}

@media (min-width: 75em) {
  .msl-nav__mobile-top-bar,
  .msl-nav__mobile-footer {
    display: none;
  }
}

/* Sidebar Block */
.msl-nav__sidebar--left,
.msl-nav__sidebar--right {
  display: none;
}

@media (min-width: 75em) {
  .msl-nav__sidebar--left,
  .msl-nav__sidebar--right {
    position: fixed;
    top: 0;
    margin-block-start: 0;
    width: var(--msl-sidebar-width);
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    padding-block: var(--msl-space-md);
    /*mix-blend-mode: exclusion;
    will-change: mix-blend-mode;*/
  }

  .msl-nav__sidebar--left {
    left: 0;
    align-items: flex-start;
    padding-inline-start: calc(var(--msl-sidebar-width) / 4);
  }

  .msl-nav__sidebar--right {
    right: 0;
    align-items: flex-end;
    padding-inline-end: calc(var(--msl-sidebar-width) / 4);
  }
}

/* SIDEBAR ICON CONTAINERS */
.msl-nav__icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* ICON MICRO-LABELS */
.msl-nav__micro-labels {
  font-size: 0.7rem;
  margin-block-start: 0.2rem;
  padding-block-start: 0;
}

/* LEFT SIDEBAR LOGO */
a.msl-nav__logo-primary {
  align-self: flex-start;
  opacity: 1 !important;
}

/* Sidebar Search Icon */
.msl-nav__search-icon,
.msl-nav__toggle-btn {
  position: relative;
  width: 36px;
  height: 36px;
  --msl-bar-space: calc(36px / 4);
}
@media (min-width: 75em) {
  .msl-nav__search-icon,
  .msl-nav__toggle-btn {
    width: 48px;
    height: 48px;
    --msl-bar-space: calc(48px / 4);
  }

  .msl-nav__micro-labels,
  .msl-nav__search-icon,
  .msl-nav__toggle-btn {
    transform: scale(0.75);
    filter: grayscale(1);
    transition: all var(--msl-transition-duration-slow) var(--msl-transition-function);
  }

  .msl-nav__icon-container:hover .msl-nav__micro-labels,
  .msl-nav__icon-container:hover .msl-nav__search-icon,
  .msl-nav__icon-container:hover .msl-nav__toggle-btn {
    transform: scale(1);
    filter: grayscale(0);
    color: var(--msl-color-sunset-ember);
  }

  .msl-nav__icon-container.msl-attention-pulse .msl-nav__micro-labels,
  .msl-nav__icon-container.msl-attention-pulse .msl-nav__search-icon,
  .msl-nav__icon-container.msl-attention-pulse .msl-nav__toggle-btn {
    transform: scale(1);
    filter: grayscale(0);
    color: var(--msl-color-sunset-ember);
  }
}

/* --- TOGGLE HAMBURGER --- */

.msl-nav__toggle-btn {
  background: none;
  border: none;
  padding: 0;
  display: flex;
}

.msl-nav__sidebar--right .msl-nav__toggle-bar,
.msl-nav__mobile-footer .msl-nav__toggle-bar {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: absolute;
  left: 0;
  transition:
    all 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
}
/* --- INITIAL POSITIONS: Defines the vertical starting position of each bar --- */
/* Uses calc() and the --msl-bar-space variable for scalable spacing control. */

.msl-nav__toggle-btn .msl-nav__toggle-bar:nth-child(1) {
  top: 0;
}
.msl-nav__toggle-btn .msl-nav__toggle-bar:nth-child(2) {
  top: var(--msl-bar-space);
}
.msl-nav__toggle-btn .msl-nav__toggle-bar:nth-child(3) {
  top: calc(2 * var(--msl-bar-space));
}
.msl-nav__toggle-btn .msl-nav__toggle-bar:nth-child(4) {
  top: calc(3 * var(--msl-bar-space));
}

/* --- ACTIVE/OPEN STATE MODIFIER (msl-nav__toggle-btn--open) --- */

/* BAR 1 (Top Bar) -> Rotates to form the top-left cross */
.msl-nav__toggle-btn--open .msl-nav__toggle-bar:nth-child(1) {
  /* Moves to the center line (16px) and rotates 45 degrees */
  top: 16px;
  transform: translateY(-50%) rotate(45deg);
}

/* BAR 2 & 3 (Inner Bars) -> Fade Out */
.msl-nav__toggle-btn--open .msl-nav__toggle-bar:nth-child(2),
.msl-nav__toggle-btn--open .msl-nav__toggle-bar:nth-child(3) {
  opacity: 0;
  transform: scaleX(0);
  transition-delay: 0.1s;
}

/* BAR 4 (Bottom Bar) -> Rotates to form the right cross */
.msl-nav__toggle-btn--open .msl-nav__toggle-bar:nth-child(4) {
  /* Moves to the center line (16px) and rotates -45 degrees */
  top: 16px;
  transform: translateY(-50%) rotate(-45deg);
}

/* 
--------------------------------------------------------------------------
 * OFF-CANVAS NAVIGATION (FULLSCREEN/MOBILE MENU)
-------------------------------------------------------------------------- 
*/

/* Primary Wrapper */
.msl-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  left: unset;
  max-width: none;
  width: 100vw;
  height: calc(100svh - var(--msl-mobile-nav-height));
  background: var(--msl-color-twilight-soil);
  z-index: 999;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 1.2s ease-in-out,
    visibility 0s linear 1.2s;
  will-change: transform;
}

/* Primary Wrapper Open */
.msl-offcanvas.is-open {
  transform: translateX(0);
  transition:
    transform 1.2s ease-in-out,
    visibility 0s linear 0s;
  visibility: visible;
}

/* Inner Container */
.msl-offcanvas__inner {
  position: relative;
  padding: var(--msl-space-sm);
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--msl-space-sm);
  pointer-events: none;
}

/* Inner Container all children */
.msl-offcanvas__inner * {
  pointer-events: auto;
}

/* Header/Enquire/Logo */
.msl-offcanvas__header {
  display: flex;
  justify-content: center;
}

.msl-offcanvas__header-logo {
  width: 180px;
  height: auto;
}

.msl-offcanvas__enquire-btn {
  display: none;
}

.msl-offcanvas__logo-link--mobile {
  display: block;
}

@media (min-width: 75em) {
  .msl-offcanvas__header {
    justify-content: flex-start;
    padding-left: var(--msl-space-md);
  }
  .msl-offcanvas__enquire-btn {
    display: inline-block;
  }

  .msl-offcanvas__logo-link--mobile {
    display: none;
  }
}

/* Footer & Tertiary Sidebar (Socials/Desktop Block) */
.msl-offcanvas__footer-wrapper {
  padding-top: var(--msl-space-sm);
}
.msl-offcanvas__logo-block--desktop {
  display: none;
}
.msl-offcanvas__tertiary-sidebar {
  display: none;
}
.msl-offcanvas__socials--mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  text-transform: uppercase;
  padding-block: var(--msl-space-sm);
  width: 100%;
}
.msl-offcanvas__social-link {
  color: var(--msl-color-elephant-dust);
  font-size: 0.75rem;
  padding: 0 0.5rem;
  text-decoration: none;
  border-right: 1px solid var(--msl-color-elephant-dust);
  font-family: var(--msl-font-body);
}
.msl-offcanvas__social-link:last-child {
  border-right: none;
}

@media (min-width: 75em) {
  .msl-offcanvas {
    width: calc(100vw - var(--msl-sidebar-width));
    height: 100vh;
  }
  .msl-offcanvas.is-open {
    transform: translateX(calc(-1 * var(--msl-sidebar-width)));
  }
  .msl-offcanvas__footer-wrapper {
    justify-content: flex-start;
    align-items: flex-end;
    padding-left: var(--msl-space-md);
  }
  .msl-offcanvas__logo-block--desktop {
    display: block;
  }
  .msl-offcanvas__tertiary-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--msl-sidebar-width);
    height: 100%;
    background: var(--msl-color-twilight-soil);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 20;
    padding: var(--msl-space-md) 0;
  }
  .msl-offcanvas__footer-icon {
    width: 180px;
    margin: 0;
  }
  .msl-offcanvas__socials--mobile {
    display: none;
  }
  .msl-offcanvas__divider-icon {
    display: block;
    width: 30px;
    height: 100px;
    background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/madikwe-shape-1.1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: var(--msl-space-md);
  }
  .msl-offcanvas__social-link {
    color: var(--msl-color-elephant-dust);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 0.9rem;
    padding: var(--msl-space-sm) 0;
    border-top: 1px solid var(--msl-color-elephant-dust);
    border-right: none;
  }
  .msl-offcanvas__tertiary-sidebar a.msl-offcanvas__social-link:last-child {
    border-top: none;
  }
}

/* Main Menu List: Accordion Base */
.msl-offcanvas__main-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
  text-align: center;
  padding-inline: var(--msl-space-sm);
}
@media (min-width: 75em) {
  .msl-offcanvas__main-list {
    justify-content: center;
    overflow: visible;
    text-align: left;
    padding-left: var(--msl-space-sm);
    width: calc(100% - var(--msl-sidebar-width));
  }
}

/* --- MAIN BLOCK CONTAINER --- */
.msl-offcanvas__main-block {
  margin-block: var(--msl-space-sm);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media (min-width: 75em) {
  .msl-offcanvas__main-block {
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 400px;
    overflow: visible;
  }
}

/* Primary Link Styling */
.msl-offcanvas__main-link {
  font-family: var(--msl-font-heading);
  font-size: 1.4rem;
  font-weight: 200;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--msl-color-acacia-bark);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-grow: 1;
  transition: color 0.3s ease-in-out;
  cursor: pointer;
  padding: 0.5rem 0;
}

@media (min-width: 75em) {
  .msl-offcanvas__main-link {
    font-size: 1.8rem;
    flex-grow: 0;
    padding: 0;
  }
}

/* Toggle Buttons Base States */
.msl-offcanvas__toggle-btn--mobile,
.msl-offcanvas__toggle-btn--t2 {
  background: none;
  border: none;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: var(--msl-space-sm);
  position: relative;
}

/* --- T2 submenu button tweaks --- */
.msl-offcanvas__toggle-btn--t2 {
  width: 1.4rem;
  height: 1.4rem;
}

.msl-offcanvas__toggle-btn--mobile::before,
.msl-offcanvas__toggle-btn--t2::before,
.msl-offcanvas__toggle-btn--mobile::after,
.msl-offcanvas__toggle-btn--t2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--msl-color-acacia-bark);
  transform: translate(-50%, -50%);
  transition:
    transform 0.5s ease-in-out 0.1s,
    opacity 0.5s ease-in-out,
    background-color 0.3s ease-in-out;
}

.msl-offcanvas__toggle-btn--mobile::before,
.msl-offcanvas__toggle-btn--t2::before {
  width: 2px;
  height: 60%;
}

.msl-offcanvas__toggle-btn--mobile::after,
.msl-offcanvas__toggle-btn--t2::after {
  width: 60%;
  height: 2px;
}

/* Toggle Buttons Open States */
.msl-offcanvas__main-link.is-open + .msl-offcanvas__toggle-btn--mobile::before,
.msl-offcanvas__submenu-item.is-open + .msl-offcanvas__toggle-btn--t2::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.msl-offcanvas__main-link.is-open + .msl-offcanvas__toggle-btn--mobile::after,
.msl-offcanvas__submenu-item.is-open + .msl-offcanvas__toggle-btn--t2::after {
  opacity: 0;
}

.msl-offcanvas__main-link.is-open + .msl-offcanvas__toggle-btn--mobile::before,
.msl-offcanvas__submenu-item.is-open + .msl-offcanvas__toggle-btn--t2::before {
  background-color: var(--msl-color-sunset-ember);
}

/* --- T2 SUBMENU CONTAINER --- */
.msl-offcanvas__submenu-container {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  min-width: 100%;
  z-index: 100;
  opacity: 0;
  transition:
    max-height 0.5s ease-in-out,
    visibility 0s linear 0.5s,
    opacity 0.5s ease-in-out;
}

.msl-offcanvas__main-link.is-open ~ .msl-offcanvas__submenu-container {
  max-height: 500px;
  visibility: visible;
  transition-delay: 0s;
  opacity: 1;
}

@media (min-width: 75em) {
  .msl-offcanvas__submenu-container {
    position: absolute;
    left: 110%;
    top: 0;
    display: flex;
    flex-direction: column;
    max-height: unset;
    min-width: 400px;
    opacity: 0;
    background-color: var(--msl-color-twilight-soil);
    padding: 0 1rem 1rem 1rem;
    transform: translateX(-30px);
    transition:
      transform 0.5s ease-in-out,
      opacity 0.5s ease-in-out,
      visibility 0s linear 0.5s;
  }

  .msl-offcanvas__main-link.is-open + .msl-offcanvas__toggle-btn--mobile + .msl-offcanvas__submenu-container {
    max-height: 500px;
    visibility: visible;
    transition-delay: 0s;
    transform: translateX(0);
    opacity: 1;
  }
}

/* --- T2 SUBMENU INNER CONTAINER --- */
.msl-offcanvas__submenu-block {
  /* Required to contain the T3 submenu/toggle button */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

/* --- T2 LINK + TOGGLE ROW LOCKUP --- */
.msl-offcanvas__submenu-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.msl-offcanvas__submenu-row .msl-offcanvas__submenu-item {
  flex-grow: 1;
  width: 100%;
}
.msl-offcanvas__submenu-row .msl-offcanvas__toggle-btn--mobile {
  flex-shrink: 0;
}

.msl-offcanvas__submenu-block .msl-offcanvas__submenu-item {
  padding: 0.5rem 0;
}

/* Tier 3 Accordion Fix (Restores the Accordion Class and Hides it) */
.msl-offcanvas__submenu-block > .msl-offcanvas__submenu-container,
.msl-offcanvas__submenu-block > .msl-offcanvas__submenu-container .msl-offcanvas__submenu-container--t3,
.msl-offcanvas__submenu-container--t3 {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition:
    max-height 0.5s ease-in-out,
    visibility 0s linear 0.5s,
    opacity 0.5s ease-in-out;
  position: static;
  transform: none;
  padding-left: 0.5rem;
}

/* T2 -> T3 VISIBILITY: Target the T3 container (which is a sibling of the T2 link's parent row). */
.msl-offcanvas__submenu-row:has(.msl-offcanvas__submenu-item.is-open) + .msl-offcanvas__submenu-container--t3 {
  max-height: 500px; /* Allows expansion */
  visibility: visible;
  transition-delay: 0s;
  opacity: 1;
}

/* Submenu item styling */
.msl-offcanvas__submenu-item {
  font-family: var(--msl-font-body);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--msl-color-acacia-bark);
  text-decoration: none;
  display: block;
  padding-block: 0.4rem;
  transition: color 0.3s ease-in-out;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 75em) {
  .msl-offcanvas__submenu-item {
    text-align: left;
    font-size: 1.2rem;
    padding-block: 0.4rem;
  }
}

.msl-offcanvas__submenu-container--t3 .msl-offcanvas__submenu-item {
  /*font-family: var(--msl-font-body);*/
  font-size: 0.85rem;
  font-weight: 400;
  padding-left: 0.5rem;
}
.msl-offcanvas__submenu-container--t3 .msl-offcanvas__submenu-item:last-child {
  margin-bottom: 0.5rem;
}

/* HOVER STATE (Visual cue) */
.msl-offcanvas__main-block:hover .msl-offcanvas__toggle-btn--mobile::before,
.msl-offcanvas__main-block:hover .msl-offcanvas__toggle-btn--mobile::after {
  background-color: var(--msl-color-kalahari-mist);
}

/* Hover States */
.msl-offcanvas__main-link:hover,
.msl-offcanvas__submenu-item:hover,
.msl-offcanvas__social-link:hover {
  color: var(--msl-color-kalahari-mist);
}

/* --- ACTIVE/OPEN STATE STYLING  --- */
.msl-offcanvas__main-link.is-open,
.msl-offcanvas__main-block:focus-within .msl-offcanvas__main-link {
  color: var(--msl-color-sunset-ember); /* Placeholder active colour */
}

/* -------------------------------------------------------------------------- *
 * ONPAGE NAV WAYFINDER
 * -------------------------------------------------------------------------- */

/* Mobile Base Styles (Hidden by default or styled to integrate with mobile nav) */
.msl-nav-onpage {
  display: none; /* Hide on mobile by default */
  position: fixed; /* Must be fixed for top pinning */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 500;
  top: var(--msl-mobile-nav-height); /* Pin it below the top bar */
  padding: 0.5rem var(--msl-space-md);
  opacity: 1;
  visibility: visible;
}

/* DEPRECATED: .msl-nav-onpage--in-content-flow is now a redundant class. */

/* Desktop Overrides (min-width: 64em) - Position and Layout */
@media (min-width: 64em) {
  .msl-nav-onpage {
    display: block;
    position: fixed;
    top: 50%;
    left: 0;
    right: unset;
    transform: translateY(-50%);
    width: auto;
    z-index: 500;
    padding: var(--msl-space-sm);
    /*background-color: var(--msl-color-buffalo-hide);
    border: 1px solid var(--msl-color-elephant-dust);*/
  }

  .msl-nav-onpage__list {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .msl-nav-onpage__link {
    display: block;
    padding: 0 0.5rem;
    text-shadow: 1px 1px 2px #433c3b;
    letter-spacing: 0.1rem;
    font-weight: 300;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--msl-color-elephant-dust);
    text-decoration: none;
    transition: color 0.8s var(--msl-transition-function);
  }
  .msl-nav-onpage__link:hover {
    color: var(--msl-color-kalahari-mist); /* Highlight on hover */
  }

  /* Active State (Phase 2 Placeholder - Ready for use) */
  .msl-nav-onpage__link--active {
    color: var(--msl-color-sunset-ember);
  }
}

/* -------------------------------------------------------------------------- *
 * NAV ICON BUTTON HIDE ON OFF-CANVAS NAV OPEN
 * -------------------------------------------------------------------------- */
/* Desktop Enquire Button Visibility Logic */
@media (min-width: 75em) {
  /* 1. Base State: Set transition for smooth fading */
  .msl-nav__enquire-desktop {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--msl-transition-duration-slow) var(--msl-transition-function) 0.2s,
      visibility var(--msl-transition-duration-fast) var(--msl-transition-function) 0.4s;
  }

  /* 2. Hidden State: Triggered when off-canvas menu is open */
  /* Logic: If the header wrapper contains an open off-canvas nav, hide the button */
  .wp-block-template-part:has(.msl-offcanvas.is-open) .msl-nav__enquire-desktop {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* -------------------------------------------------------------------------- *
 * SEARCH ARCHIVE CONTAINER HEADER  (Mobile-First Hiding & Positioning)
 * -------------------------------------------------------------------------- */

.msl-layout__search-archive .msl-layout__search-archive-header-container {
  gap: var(--msl-space-sm);
}

/* -------------------------------------------------------------------------- *
 * SEARCH FORM MODAL (Mobile-First Hiding & Positioning)
 * -------------------------------------------------------------------------- */

/* Default State: Mobile-First (Hidden, Full-width, Absolute Position) */
.msl-nav__search-form-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 50vh;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;

  /* ADDED FOR SLIDE-IN: Initial state is off-screen left */
  transform: translateX(-175%);

  visibility: hidden;
  opacity: 0;
  z-index: 100;
  background-color: var(--msl-color-buffalo-hide-85);
  padding: 1rem var(--msl-space-md);

  transition:
    opacity var(--msl-transition-duration-fast) var(--msl-transition-function) 0.2s,
    visibility var(--msl-transition-duration-fast) var(--msl-transition-function) 0.5s,
    transform var(--msl-transition-duration-slow) var(--msl-transition-function);
}

/* Modifier: Toggled Active State (Visible) */
.msl-nav__search-form-wrapper--active {
  /* ADDED FOR SLIDE-IN: Final state is in place */
  transform: translate(-50%, -50%);
  visibility: visible;
  opacity: 1;
  transition:
    opacity var(--msl-transition-duration-fast) var(--msl-transition-function),
    visibility var(--msl-transition-duration-fast) var(--msl-transition-function),
    transform var(--msl-transition-duration-slow) var(--msl-transition-function);
}

@media (min-width: 75em) {
  .msl-nav__search-form-wrapper {
    width: 50vw;
    border: 1px solid var(--msl-color-sunset-ember);
  }
}

/* Ensure form and fields fill the space */
.msl-nav__search-form-wrapper .search-form {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0.5rem;
  flex-direction: column;
}
.msl-nav__search-form-wrapper .search-field {
  flex-grow: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--msl-color-twilight-soil);
  background-color: var(--msl-color-kalahari-mist-80);
  border-radius: 4px;
}

.msl-nav__search-form-wrapper input.search-field:focus,
.msl-nav__search-form-wrapper input.search-field:focus-visible {
  outline-color: var(--msl-color-sunset-ember);
}

.msl-nav__search-form-wrapper .search-submit {
  /* Style to match your existing buttons (using Twilight Soil) */
  background: var(--msl-color-twilight-soil);
  color: var(--msl-color-kalahari-mist);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
}

.msl-nav__search-form-close-button {
  /* POSITIONING: Anchor the button relative to the full-screen overlay wrapper */
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  padding: 0; /* Remove default padding */
  line-height: 1; /* Standard line-height to center the text */
  font-size: 3rem; /* ~2x larger than the previous 2.5rem */
  color: var(--msl-color-sunset-ember);
  opacity: 1;

  cursor: pointer;
  z-index: 10;

  /* TRANSITION: Keep it smooth */
  transition: opacity 0.3s var(--msl-transition-function);
}

.msl-nav__search-form-close-button:hover {
  opacity: 0.8;
}

/* Ensure the X symbol inside the button is not visible */
.msl-nav__search-form-close-button span {
  display: block;
}

/* 
--------------------------------------------------------------------------
 * FOOTER
-------------------------------------------------------------------------- 
*/

/* --- BLOCK BASE - The full viewport-width element --- */
.msl-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 1;

  /* Styling pulled from reference */
  background-color: var(--msl-color-buffalo-hide);
  background-repeat: repeat;
  background-size: cover;
  opacity: 0.95;

  /* Default mobile padding */
  padding-block: var(--msl-space-lg);
  padding-inline: var(--msl-space-md);
}

/* --- ELEMENT: BACKGROUND VIDEO --- */
.msl-footer__video {
  /* Full bleed cover */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Ensure the video covers the whole area without distortion */
  object-fit: cover;
  object-position: 50% 50%;

  /* Inherits from .msl-footer, but explicitly set for clarity */
  z-index: -2;
  pointer-events: none; /* Allows clicks to pass through to the content that scrolls over the footer */
}

/* --- ELEMENT: BACKGROUND VIDEO FIX --- */
.msl-footer__video video {
  /* Must be absolute to fully stretch within its parent */
  position: absolute;
  /* Forces video element to inherit the wrapper's 100% dimensions (which are set to full footer height) */
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

/* --- ELEMENT - Inner Content Wrapper (Receives .msl-utility--max-1200 in markup) --- */
.msl-footer__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--msl-space-lg);
  color: var(--msl-color-kalahari-mist);
}

/* --- ELEMENT - Top Link Row (The main link sections) --- */
.msl-footer__top-row,
.msl-footer__mid-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; /* Space out the columns */
  gap: var(--msl-space-sm);
  /* The separator line should be slightly lighter than the main background */
  border-bottom: 1px solid var(--msl-color-river-clay);
  padding-bottom: var(--msl-space-md);
}

.msl-footer__mid-row {
  flex-direction: column;
  border-bottom: none;
  padding-bottom: none;
}

/* --- ELEMENT - Link Column/Section --- */
.msl-footer__link-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 0 0 calc(50% - (var(--msl-space-md) / 2));
  margin-block: 0;
  list-style: none;
  padding-inline-start: 0;
}

/* --- ELEMENT - Heading (e.g., ABOUT US, CAMPS) --- */
.msl-footer__heading {
  display: flex;
  align-items: flex-start;
  font-family: var(--msl-font-heading);
  font-size: 0.9rem; /* REDUCED: Smaller for mobile readability */
  letter-spacing: 0.15em; /* Reduced spacing slightly */
  text-transform: uppercase;
  color: var(--msl-color-kalahari-mist);
  margin-block-end: 0.5rem;
  padding-bottom: 0.3rem;
  width: fit-content;
  line-height: 1.4;
}

/* NEW: Base Pseudo-Element Style for the Icon */
.msl-footer__heading::after {
  content: "";
  display: inline-block;
  margin-left: 0.5rem; /* Space between text and icon */
  width: 1.4rem; /* Icon size */
  height: 1.4rem;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5; /* Subtle branding element */
}

/* --------------------------------------------------------------------------
 * --- FOOTER HEADING MODIFIERS (Unique Icons) ---
 * -------------------------------------------------------------------------- */

.msl-footer__heading--wild::after {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/madikwe-spoor-WILD-DOG.png");
}
.msl-footer__heading--stay::after {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Madikwe-Icon-Sleeps-Guests.png");
}
.msl-footer__heading--experiences::after {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/madikwe-icon-experiences.png");
}
.msl-footer__heading--planner::after {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/madikwe-icon-trip-planner.png");
}
.msl-footer__heading--connect::after {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/madikwe-icon-romance-relationships.png");
}
.msl-footer__heading--socials::after {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Madikwe-Wi-Fi-Icon.png");
}
.msl-footer__heading--subscribe::after {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/madikwe-icon-subscribe.png");
}

/* --- ELEMENT: Link Item --- */
.msl-footer__link a {
  font-family: var(--msl-font-body);
  font-size: 0.8rem; /* REDUCED: Smaller link text for mobile */
  color: var(--msl-color-acacia-bark);
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
.msl-footer__link a:hover {
  color: var(--msl-color-sunset-ember);
}

/* --- ELEMENT: Logo and Live Links Block --- */
.msl-footer__logo-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--msl-space-md);
  padding-block: var(--msl-space-md);
}

/* --- ELEMENT: Badges/Social Row --- */
.msl-footer__badges-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap; /* Ensure badges wrap on small mobile screens */
  gap: 1.5rem;
  padding-block: var(--msl-space-sm);
}

/* --- ELEMENT: Badge List Container --- */
.msl-footer__badges-row .msl-footer__badge-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 2.5rem 1.5rem;
  width: 100%;
}

/* --- ELEMENT: Badge Item Sizing --- */
.msl-footer__badge-list img {
  max-width: 100px;
  height: auto;
  object-fit: contain; /* Ensure images scale down cleanly within the box */
  filter: invert(1);
  opacity: 0.8;
  transition: opacity 0.3s ease-in-out;
}

.msl-footer__badge-list img:hover {
  opacity: 1;
}

/* --- ELEMENT - Copyright and Legal Row (New requirement) --- */
.msl-footer__copyright-row {
  font-family: var(--msl-font-body);
  font-size: 0.75rem;
  color: var(--msl-color-river-clay);
  text-align: center;
  padding-top: var(--msl-space-sm);
}

/* --- DESKTOP OVERRIDES (min-width: 64em) --- */
@media (min-width: 64em) {
  .msl-footer {
    padding-block: var(--msl-space-xl);
  }

  .msl-footer__top-row,
  .msl-footer__mid-row {
    flex-direction: row;
    flex-wrap: nowrap; /* ADDED: Ensure no wrapping on desktop */
    /* Use space-between for 4 columns, roughly 25% each */
    justify-content: space-between;
    align-items: flex-start;
  }

  .msl-footer__mid-row {
    flex-direction: row;
    border-bottom: none;
  }

  .msl-footer__link-col {
    flex: 1 1 23%; /* RESTORED: 4-column structure */
    max-width: none; /* RESTORED: Remove mobile max-width constraint */
    padding-inline-end: 1rem;
    gap: 0.8rem; /* RESTORED: Desktop gap */
    margin-block-end: 0; /* REMOVED: Mobile margin */
  }

  .msl-footer__badges-row .msl-footer__badge-list {
    flex-wrap: nowrap;
    gap: 2rem;
  }

  /* RESTORED: Desktop Typography Sizes */
  .msl-footer__heading {
    font-size: 1.2rem;
    letter-spacing: 0.2em;
  }

  .msl-footer__heading::after {
    width: 1.8rem; /* Slightly larger icon */
    height: 1.8rem;
  }

  .msl-footer__link a {
    font-size: 0.95rem;
  }

  /* Desktop Logo Block Alignment */
  .msl-footer__logo-block {
    text-align: left;
    align-items: flex-start;
  }
}

/* ==========================================================================
   CONTENT FILTER BAR (.msl-content-filter)
   Positioning: position:sticky — browser handles everything, no JS involved.
   Width: 280px collapsed, 640px expanded, centred via margin:0 auto.
   Search lives in the panel on all viewports — no strip search on desktop.

   PANEL VISIBILITY:
   No display:none anywhere on the panel — transitions can't run on
   display:none elements. Hidden state is entirely max-height:0 +
   overflow:hidden + panel-inner padding:0. All three transition together.
   ========================================================================== */

/* ── Hidden state — filterable items ──────────────────────────────────────── */
.msl-accordion__item.msl-content-filter--hidden {
  display: none !important;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.faq-section.msl-content-filter__section--empty {
  display: none !important;
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.msl-content-filter {
  position: sticky;
  top: calc(36px - var(--msl-space-lg) / 2);
  z-index: 200;
  width: 640px;
  margin: 0 auto;
  padding-top: calc(var(--msl-space-lg) / 2);
  padding-bottom: calc(var(--msl-space-lg) / 2);
}

/* ── Strip ──────────────────────────────────────────────────────────────── */
.msl-content-filter__strip {
  display: flex;
  align-items: stretch;
  height: 60px;
  background: var(--msl-color-elephant-dust, #ede5dc);
  box-shadow: 0 2px 12px rgba(67, 60, 59, 0.08);
  border: none;
  border-bottom: none;
}

/* ── Trigger ────────────────────────────────────────────────────────────── */
.msl-content-filter__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  cursor: pointer;
  flex: 1;
  border: none;
  background: transparent;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.msl-content-filter__trigger-label {
  font-family: var(--msl-font-heading, serif);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--msl-color-buffalo-hide, #433c3b);
  white-space: nowrap;
}

/* ── Hamburger / X icon ─────────────────────────────────────────────────── */
.msl-content-filter__icon {
  width: 18px;
  height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
}

.msl-content-filter__icon-bar {
  display: block;
  height: 1px;
  background: var(--msl-color-buffalo-hide, #433c3b);
  transform-origin: center;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease,
    width 0.22s ease;
}

.msl-content-filter__icon-bar:nth-child(1) {
  width: 100%;
}
.msl-content-filter__icon-bar:nth-child(2) {
  width: 70%;
}
.msl-content-filter__icon-bar:nth-child(3) {
  width: 40%;
}

.msl-content-filter.is-open .msl-content-filter__icon-bar:nth-child(1) {
  width: 100%;
  transform: rotate(45deg) translate(4px, 4px);
}
.msl-content-filter.is-open .msl-content-filter__icon-bar:nth-child(2) {
  opacity: 0;
  width: 0;
}
.msl-content-filter.is-open .msl-content-filter__icon-bar:nth-child(3) {
  width: 100%;
  transform: rotate(-45deg) translate(3px, -5px);
}

/* ── Strip divider — hidden on all viewports ────────────────────────────── */
.msl-content-filter__strip-divider {
  display: none;
  width: 1px;
  background: var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31));
  margin: 12px 0;
  flex-shrink: 0;
}

/* ── Inline search wrap — hidden on all viewports ──────────────────────── */
.msl-content-filter__strip-search-wrap {
  display: none;
  position: relative;
  align-items: center;
  flex: 1;
  padding: 0 24px;
}

.msl-content-filter__search--strip {
  width: 100%;
  background: var(--msl-color-elephant-dust, #ede5dc);
  border: 1px solid var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31));
  border-radius: 2px;
  outline: none;
  padding: 8px 14px;
  font-family: var(--msl-font-body, sans-serif);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--msl-color-buffalo-hide, #433c3b);
}

.msl-content-filter__search--strip::placeholder {
  color: var(--msl-color-buffalo-hide, #433c3b);
  opacity: 0.4;
}

/* ── No-results overlay (strip) — suppressed on all viewports ───────────── */
.msl-content-filter__no-results {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 24px;
  right: 24px;
  background: var(--msl-color-elephant-dust, #ede5dc);
  border: 1px solid var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31));
  border-radius: 2px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  gap: 8px;
  pointer-events: none;
  z-index: 2;
}

.msl-content-filter__no-results.is-visible {
  display: none; /* strip no-results suppressed — panel only */
}

@keyframes msl-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.msl-content-filter__no-results-text {
  font-family: var(--msl-font-heading, serif);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--msl-color-buffalo-hide, #433c3b);
  opacity: 0.7;
  white-space: nowrap;
}

.msl-content-filter__reset {
  font-family: var(--msl-font-heading, serif);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--msl-color-acacia-bark, #4a3830);
  border: 0.5px solid var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31));
  background: transparent;
  border-radius: 2px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
/* NO display:none here or anywhere on this element — it prevents transitions.
   Hidden state is max-height:0 + overflow:hidden + panel-inner padding:0.
   All three transition simultaneously for a clean slide with no content flash. */
.msl-content-filter__panel {
  position: absolute;
  top: calc(100% - var(--msl-space-lg) / 2);
  left: 0;
  right: 0;
  z-index: 199;
  max-height: 0;
  overflow: hidden;
  background: var(--msl-color-sand-dark, #e8ddd5);
  box-shadow: 0 8px 24px rgba(30, 10, 14, 0.1);
  transition: max-height var(--msl-transition-duration-slow) var(--msl-transition-function);
}

.msl-content-filter.is-open .msl-content-filter__panel {
  max-height: 800px;
}

/* ── Panel inner ────────────────────────────────────────────────────────── */
/* Padding lives here so it transitions cleanly alongside max-height.
   padding:0 when closed prevents a visible stub at the bottom. */
.msl-content-filter__panel-inner {
  padding: 0 24px;
  transition: padding var(--msl-transition-duration-slow) var(--msl-transition-function);
}

.msl-content-filter.is-open .msl-content-filter__panel-inner {
  padding: 24px 24px 30px;
}

/* ── Panel search — all viewports ──────────────────────────────────────── */
.msl-content-filter__search--panel {
  display: block;
  width: 100%;
  background: var(--msl-color-elephant-dust, #ede5dc);
  border: 1px solid var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31));
  border-radius: 2px;
  padding: 10px 14px;
  font-family: var(--msl-font-body, sans-serif);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--msl-color-buffalo-hide, #433c3b);
  margin-bottom: 14px;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.msl-content-filter__search--panel::placeholder {
  color: var(--msl-color-buffalo-hide, #433c3b);
  opacity: 0.4;
}

.msl-content-filter__search--panel:focus {
  border-color: var(--msl-color-buffalo-hide, #433c3b);
}

/* ── Panel no-results — all viewports ──────────────────────────────────── */
.msl-content-filter__no-results--panel {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--msl-font-heading, serif);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--msl-color-buffalo-hide, #433c3b);
  opacity: 0.7;
}

.msl-content-filter__no-results--panel.is-visible {
  display: flex;
  animation: msl-fade-in 0.18s ease forwards;
}

/* ── Panel label ────────────────────────────────────────────────────────── */
.msl-content-filter__panel-label {
  font-family: var(--msl-font-heading, serif);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--msl-color-buffalo-hide, #433c3b);
  opacity: 0.6;
  margin: 0 0 10px;
}

/* ── Jump buttons ───────────────────────────────────────────────────────── */
.msl-content-filter__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── GLOBAL IDLE FIX ────────────────────────────────────────────────────── */
.msl-nav__mobile-top-bar.msl-nav--idle,
.msl-nav__sidebar--left.msl-nav--idle,
.msl-nav__sidebar--right.msl-nav--idle {
  opacity: 1;
}

/* ── MOBILE ─────────────────────────────────────────────────────────────── */
@media (max-width: 63.99em) {
  .msl-content-filter {
    position: sticky;
    top: 0;
    width: 100%;
    margin: 0;
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .msl-content-filter.msl-filter--hidden {
    opacity: 0;
    pointer-events: none;
  }

  .msl-content-filter.msl-filter--visible,
  .msl-content-filter.msl-filter--idle {
    opacity: 1;
    pointer-events: auto;
    top: calc(100px - var(--msl-space-lg) / 2);
  }

  /* Stuck colour — brown strip, light text/icon */
  .msl-content-filter.is-stuck .msl-content-filter__strip {
    background: var(--msl-color-buffalo-hide);
  }
  .msl-content-filter.is-stuck .msl-content-filter__trigger-label {
    color: var(--msl-color-elephant-dust, #ede5dc);
  }
  .msl-content-filter.is-stuck .msl-content-filter__icon-bar {
    background: var(--msl-color-elephant-dust, #ede5dc);
  }
}

/* ── DESKTOP 1024+ ──────────────────────────────────────────────────────── */
/* Collapsed: 280px centred. Expanded (.is-open): 640px centred.
   Both states use margin:0 auto so the bar grows symmetrically from centre.
   Trigger stays centred in both states — no justify-content change needed. */
@media (min-width: 64em) {
  .msl-content-filter {
    width: 280px;
    transition: width var(--msl-transition-duration-slow) var(--msl-transition-function);
  }

  .msl-content-filter.is-open {
    width: 640px;
  }

  .msl-content-filter__trigger {
    flex: 1;
    padding: 0 28px;
    justify-content: center;
  }

  .msl-content-filter.is-open .msl-content-filter__panel-inner {
    padding: 24px 28px 30px;
  }

  .msl-content-filter__controls {
    gap: 8px;
  }

  /* Never hide with nav on desktop */
  .msl-content-filter.msl-filter--hidden,
  .msl-content-filter.msl-filter--visible,
  .msl-content-filter.msl-filter--idle {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* ── DESKTOP 1024+ ──────────────────────────────────────────────────────── */
/* Collapsed: 280px centred. Expanded (.is-open): 640px centred.
   Both states use margin:0 auto so the bar grows symmetrically from centre.
   Trigger stays centred in both states — no justify-content change needed. */
@media (min-width: 64em) {
  .msl-content-filter {
    width: 280px;
    transition: width var(--msl-transition-duration-slow) var(--msl-transition-function);
  }

  .msl-content-filter.is-open {
    width: 640px;
  }

  .msl-content-filter__trigger {
    flex: 1;
    padding: 0 28px;
    justify-content: center;
  }

  .msl-content-filter.is-open .msl-content-filter__panel-inner {
    padding: 24px 28px 30px;
  }

  .msl-content-filter__controls {
    gap: 8px;
  }

  /* Never hide with nav on desktop */
  .msl-content-filter.msl-filter--hidden,
  .msl-content-filter.msl-filter--visible,
  .msl-content-filter.msl-filter--idle {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/*
==========================================================================
4.0 LAYOUTS
==========================================================================
*/

/* --------------------------------------------------------------------------
 *  SECTION BLOCKS (Wrappers)
 * -------------------------------------------------------------------------- */

.msl-section-single,
.msl-section-cols-2,
.msl-section-cols-3 {
  /* Base styles for all sections (apply background, height, etc. here) */
  position: relative;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 
--------------------------------------------------------------------------
 * FLEX LAYOUT
-------------------------------------------------------------------------- 
*/

.msl-layout-flex {
  display: flex;
  flex-direction: column;
  gap: var(--msl-space-md);
}

@media (min-width: 64em) {
  .msl-layout-flex {
    flex-direction: row;
  }
}

/* --------------------------------------------------------------------------
 *  LAYOUT PRIMITIVE ELEMENT: __col (The Unified Column Handler)
 * -------------------------------------------------------------------------- */

.msl-layout-flex__col,
.msl-layout-flex__row {
  position: relative;
  width: 100%; /* Mobile default */
}

@media (min-width: 64em) {
  .msl-layout-flex__col,
  .msl-layout-flex__row {
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
 *  COLUMN STRUCTURE: __content-inner
 * -------------------------------------------------------------------------- */

.msl-layout-flex__content-inner {
  padding-block: 0;
  padding-inline: var(--msl-space-md);
}

@media (min-width: 64em) {
  .msl-layout-flex__content-inner {
    padding: var(--msl-space-md);
  }
}
/* --------------------------------------------------------------------------
 *  LAYOUT PRIMITIVE MODIFIERS (Desktop Ratio Logic)
 * -------------------------------------------------------------------------- */

@media (min-width: 64em) {
  /* Base setup for all multi-column layouts */
  .msl-layout-flex--r-50-50,
  .msl-layout-flex--r-40-60,
  .msl-layout-flex--r-60-40,
  .msl-layout-flex--r-70-30,
  .msl-layout-flex--r-75-25,
  .msl-layout-flex--r-25-50-25,
  .msl-layout-flex--r-33-34-33 {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  /* --- PRESET: 50/50 --- */
  .msl-layout-flex--r-50-50 > .msl-layout-flex__col,
  .msl-layout-flex--r-50-50 > .msl-layout-flex__row {
    flex: 1 1 50%; /* Flexible 50/50 */
  }

  /* --- PRESET: 40/60 --- */
  .msl-layout-flex--r-40-60 > .msl-layout-flex__col:nth-child(1),
  .msl-layout-flex--r-40-60 > .msl-layout-flex__row:nth-child(1) {
    flex: 0 0 40%; /* Fixed 60% */
  }
  .msl-layout-flex--r-40-60 > .msl-layout-flex__col:nth-child(2),
  .msl-layout-flex--r-40-60 > .msl-layout-flex__row:nth-child(2) {
    flex: 0 0 60%; /* Fixed 40% */
  }

  /* --- PRESET: 60/40 --- */
  .msl-layout-flex--r-60-40 > .msl-layout-flex__col:nth-child(1),
  .msl-layout-flex--r-60-40 > .msl-layout-flex__row:nth-child(1) {
    flex: 0 0 60%; /* Fixed 60% */
  }
  .msl-layout-flex--r-60-40 > .msl-layout-flex__col:nth-child(2),
  .msl-layout-flex--r-60-40 > .msl-layout-flex__row:nth-child(2) {
    flex: 0 0 40%; /* Fixed 40% */
  }

  /* --- PRESET: 70/30 --- */
  .msl-layout-flex--r-70-30 > .msl-layout-flex__col:nth-child(1),
  .msl-layout-flex--r-70-30 > .msl-layout-flex__row:nth-child(1) {
    flex: 0 0 70%; /* Fixed 70% */
  }
  .msl-layout-flex--r-70-30 > .msl-layout-flex__col:nth-child(2),
  .msl-layout-flex--r-70-30 > .msl-layout-flex__row:nth-child(2) {
    flex: 0 0 30%; /* Fixed 30% */
  }

  /* --- PRESET: 75/25 --- */
  .msl-layout-flex--r-75-25 > .msl-layout-flex__col:nth-child(1),
  .msl-layout-flex--r-75-25 > .msl-layout-flex__row:nth-child(1) {
    flex: 0 0 75%; /* Fixed 75% */
  }
  .msl-layout-flex--r-75-25 > .msl-layout-flex__col:nth-child(2),
  .msl-layout-flex--r-75-25 > .msl-layout-flex__row:nth-child(2) {
    flex: 0 0 25%; /* Fixed 25% */
  }

  /* --- PRESET: 25/50/25 --- */
  .msl-layout-flex--r-25-50-25 > .msl-layout-flex__col:nth-child(1),
  .msl-layout-flex--r-25-50-25 > .msl-layout-flex__row:nth-child(1) {
    flex: 0 0 25%;
  }
  .msl-layout-flex--r-25-50-25 > .msl-layout-flex__col:nth-child(2),
  .msl-layout-flex--r-25-50-25 > .msl-layout-flex__row:nth-child(2) {
    flex: 0 0 50%;
  }
  .msl-layout-flex--r-25-50-25 > .msl-layout-flex__col:nth-child(3),
  .msl-layout-flex--r-25-50-25 > .msl-layout-flex__row:nth-child(3) {
    flex: 0 0 25%;
  }

  /* --- PRESET: 33/34/33 --- */
  .msl-layout-flex--r-33-34-33 > .msl-layout-flex__col:nth-child(1),
  .msl-layout-flex--r-33-34-33 > .msl-layout-flex__row:nth-child(1) {
    flex: 0 0 33%;
  }
  .msl-layout-flex--r-33-34-33 > .msl-layout-flex__col:nth-child(2),
  .msl-layout-flex--r-33-34-33 > .msl-layout-flex__row:nth-child(2) {
    flex: 0 0 34%;
  }
  .msl-layout-flex--r-33-34-33 > .msl-layout-flex__col:nth-child(3),
  .msl-layout-flex--r-33-34-33 > .msl-layout-flex__row:nth-child(3) {
    flex: 0 0 33%;
  }
}

/* 
--------------------------------------------------------------------------
 * LAYOUT PRIMITIVES (FLOW)
-------------------------------------------------------------------------- 
*/

/* Forces children into a flex-row flow, restoring the horizontal stack */
.msl-layout--flow-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Ensures responsive wrapping */
  justify-content: space-between;
}
@media (min-width: 64em) {
  .msl-layout--flow-row {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

.msl-layout--column {
  flex-direction: column;
}

/* --------------------------------------------------------------------------
 *  ELEMENT ROLES (Reusable Content Styling)
 * -------------------------------------------------------------------------- */

.msl-element__heading {
  /* Example: Use heading font, reset top margin */
  font-family: var(--msl-font-heading);
  margin-block-start: 0;
  margin-block-end: var(--msl-space-sm);
}

.msl-element__text {
  /* Example: Enforces reading measure */
  max-width: 70ch;
  line-height: 1.7;
  margin-block-end: var(--msl-space-md);
}

.msl-element__media {
  /* Example: Full responsiveness and visual scaling */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msl-element__video {
  /* Example: Full responsiveness and visual scaling */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msl-element__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.msl-element__link {
  /* Example: Style the call-to-action link */
  display: inline-block;
  padding: var(--msl-space-sm);
  text-decoration: none;
  background: var(--msl-color-twilight-soil);
  color: var(--msl-color-kalahari-mist);
}

.msl-element__watermark {
  position: absolute;
  opacity: 0.1;
  width: 38vw;
  height: auto;
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

.msl-element__watermark-left {
  top: 2%;
  left: -10%;
}

.msl-element__watermark-right {
  top: 2%;
  right: -10%;
}

.msl-element__watermark-centre {
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 64em) {
  .msl-element__watermark-left,
  .msl-element__watermark-right {
    width: 30vw;
  }
}

/* 
--------------------------------------------------------------------------
 * MEDIA DEFAULTS
-------------------------------------------------------------------------- 
*/
.msl-element__icon--sm {
  width: 24px;
  height: auto;
}

.msl-element__icon--md {
  width: 36px;
  height: auto;
}

.msl-element__icon--lg {
  width: 48px;
  height: auto;
}

/* --------------------------------------------------------------------------
 *  STICKY VISUAL COLUMN UTILITIES
 * -------------------------------------------------------------------------- */

/* Applied to the Section Wrapper to prevent children from stretching 
   to the same height, which is required for sticky to fire. */
.msl-layout-flex--align-start {
  align-items: flex-start !important;
  margin-block-start: 0;
}

/* Applied to the Left Column to lock it during the scroll of the sibling. */
.msl-utility--sticky-visual-col {
  position: relative;
  top: 0;
  width: 100%;
  overflow: hidden;
  z-index: 5;
}

/* Mobile Tweak: If you have a sticky top-bar on mobile, offset the 'top' value. */
@media (min-width: 64em) {
  .msl-utility--sticky-visual-col {
    position: sticky !important;
    height: 100vh; /* Ensures the column takes up the full viewport height */
  }
}

@media (max-width: 64em) {
  div:has(~ .msl-utility--sticky-visual-col) > .msl-content-flow__pin-header,
  .msl-utility--sticky-visual-col ~ div > .msl-content-flow__pin-header {
    margin-block-start: 0;
  }
}

/* --------------------------------------------------------------------------
 * CONTENT FLOW PAGE STRUCTURE (Stacking Sticky Layout)
 * -------------------------------------------------------------------------- */

/* --- BLOCK BASE (.msl-content-flow) --- */
.msl-content-flow {
  position: relative;
  /* Resets all structural margins as this is a page-level wrapper */
  margin-block: 0;
  /* Mobile: Simple block flow for the mast and body */
}

/* --- ELEMENT: MAST/HEADER (.msl-content-flow__mast) --- */
/* Reuses existing hero styles and our new height utility (.msl-height--75vh) */
.msl-content-flow__mast {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-inline: auto;
  margin-block: 0;
  box-sizing: border-box;
  height: 40vh;
}

@media (min-width: 64em) {
  .msl-content-flow__mast {
    height: 30vh;
  }
}

.msl-content-flow__mast .msl-hero__content {
  padding-block: 4rem;
}

/* --- ELEMENT: BODY WRAPPER (.msl-content-flow__body) --- */

.msl-content-flow__body {
  position: relative;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* --- ELEMENT: STICKY ITEM (.msl-content-flow__sticky-item) --- */
.msl-content-flow__sticky-item {
  position: relative;
  /* Mobile: Default to simple block flow, no sticky behaviour */
  margin-block-end: 0; /* Margin handled by sections for clean flow */
  background-color: var(--msl-color-twilight-soil); /* Fallback colour */
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* --- ELEMENT: STICKY ITEM MEDIA & INFO (Lockup Styling for Mobile) --- */
.msl-content-flow__sticky-item-media {
  /* Mobile: Set a fixed height for the image in the sticky column on mobile */
  min-height: 40vh;
  position: relative;
}
.msl-content-flow__sticky-item-info {
  /* Mobile: Position the box on top of the image (absolute overlay) */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--msl-space-md);
  color: var(--msl-color-kalahari-mist);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.msl-content-flow__sticky-item-info h2 {
  font-family: var(--msl-font-heading);
  color: var(--msl-color-kalahari-mist);
  margin-block: 0;
  text-align: center;
}

.msl-content-flow__static-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- ELEMENT: CONTENT SECTION (.msl-content-flow__content-section) --- */
.msl-content-flow__content-section {
  /* Mobile: Separator for each distinct content section */
  padding-inline: var(--msl-space-md);
  padding-block: var(--msl-space-lg);
  margin-block-end: 0;
}

.msl-content-flow__content-section > *:first-child {
  margin-block-start: 0;
  border-top: none;
  padding-block-start: var(--msl-space-md);
}

.msl-content-flow__pin-header {
  margin-block: 5rem 2rem;
  padding-block-start: 3rem;
  border-top: 1px dashed var(--msl-color-elephant-dust);
}

.msl-content-flow__sub-header,
.msl-content-flow__sub-header-details {
  padding-block-start: 3rem;
}

.msl-content-flow__pin-header,
.msl-content-flow__sub-header,
.msl-content-flow__sub-header-details {
  text-align: center;
}

.msl-content-flow__body .msl-grid-item--right h3 {
  font-size: 1.4rem;
}

.msl-content-flow__body .msl-grid-item--right h4 {
  font-size: 1.2rem;
}

.msl-content-flow__body .msl-grid-item--right h5,
.msl-content-flow__body .msl-grid-item--right h6,
.msl-content-flow__body .msl-grid-item--right p,
.msl-content-flow__body .msl-grid-item--right li {
  font-size: 1rem;
  margin-inline: unset;
}

/* --------------------------------------------------------------------------
 * Desktop Overrides (min-width: 64em)
 * -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .msl-content-flow__body.msl-layout-grid-interleave {
    display: grid;
    grid-template-columns: 40% 60%;
    grid-auto-rows: minmax(auto, 1fr);
    padding: 0;
    margin: 0;
  }

  /* --- GRID POSITIONING RULES --- */

  /* LEFT-HAND COLUMN ITEMS */
  .msl-content-flow__body .msl-grid-item--left {
    grid-column: 1 / 2; /* All items go into the first column */
    grid-row: auto; /* Stacks them one after the other */
    position: relative;
    padding: 0 0 0 150px;
    /*    max-height: 100vh !important; */
  }

  /* RIGHT-HAND COLUMN ITEMS */
  .msl-content-flow__body .msl-grid-item--right {
    grid-column: 2 / 3; /* All items go into the second column */
    grid-row: auto; /* Stacks them one after the other */
    position: relative;
    padding-left: var(--msl-space-lg);
    padding-right: var(--msl-space-md);
    padding-block-end: var(--msl-space-lg);
    border-top: 1px dashed var(--msl-color-elephant-dust-50);
  }

  /* --- STICKY ITEM STYLING  --- */
  .msl-content-flow__sticky-item {
    max-width: 100%;
    z-index: 10;
  }

  /* --- STICKY ITEM MEDIA & INFO --- */
  .msl-content-flow__sticky-item-media {
    height: 100%;
    min-height: unset;
  }
  .msl-content-flow__sticky-item-info {
    position: absolute;
    top: 0;
    bottom: unset;
    left: unset;
    right: 2rem;
    text-align: right;
    padding: var(--msl-space-md);
    width: min-content;
  }

  .msl-content-flow__sticky-item-info h2 {
    border-right: 4px solid var(--msl-color-twilight-soil);
    margin-bottom: var(--msl-space-md);
    padding-right: var(--msl-space-sm);
    text-align: right;
  }

  .msl-content-flow__content-section {
    position: relative;
    padding-left: var(--msl-space-lg);
    padding-right: var(--msl-space-md);
    padding-block-start: 0;
    margin-block-start: 0;
    padding-block-end: var(--msl-space-lg);
    margin-block-end: 0;
    background-color: var(--msl-color-kalahari-mist);
    z-index: 2;
  }

  .msl-content-flow__content-section > *:first-child {
    margin-block-start: 5rem;
  }

  /* --- RIGHT-HAND PIN HEADER --- */

  .msl-content-flow__pin-header,
  .msl-content-flow__sub-header {
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--msl-color-kalahari-mist);
    padding-block: 3rem;
    margin-block: 2rem 4rem;
    border-top: none;
    border-bottom: 1px solid var(--msl-color-elephant-dust);
    font-family: var(--msl-font-heading);
  }

  .msl-content-flow__sub-header {
    margin-block-end: 2rem;
    border-bottom: 1px dashed var(--msl-color-elephant-dust-50);
  }

  .msl-content-flow__sub-header,
  .msl-content-flow__sub-header-details {
    font-family: var(--msl-font-body);
  }

  .msl-content-flow__sub-header-details {
    position: relative;
    margin-block: 2rem 0;
    padding-block-end: 0.5rem;
    border-bottom: none;
  }

  .msl-content-flow__sub-header-details-subtext {
    font-size: 0.9rem;
    margin-block-start: 0;
    padding-block-end: 2rem;
    border-bottom: 1px dashed var(--msl-color-elephant-dust-50);
  }

  .msl-content-flow__content-body-container {
    padding: 1rem;
  }

  /* --- FINAL CLEARING ELEMENT --- */
  /* Ensures there is enough scrolling room for the last right-hand content section to fully scroll past */
  .msl-content-flow__body::after {
    content: "";
    display: block;
    grid-column: 2 / 3; /* Ensures it is only in the content column */
    /*height: 100vh; /* Use a height that ensures the last sticky item is fully cleared */
  }
}

/* --- MAST & BLOCK BACKGROUNDS --- */

/* MASTS */
.msl-content-flow__mast#rates-hero,
.msl-content-flow__mast#faqs-hero,
.msl-content-flow__mast#gallery-hero,
.msl-content-flow__mast#terms-hero,
.msl-content-flow__mast#privacy-hero,
.msl-content-flow__mast#blog-hero,
.msl-content-flow__mast#enquire-hero,
.msl-content-flow__mast#search-hero {
  background-color: var(--msl-color-twilight-soil);
}

/* SAFARI PAGE IMAGES */

.msl-content-flow__bg-image-safari--family {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2024/09/Luxury-Family-Getaways-scaled-1.jpeg");
}
.msl-content-flow__bg-image-safari--private {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Game-drive-3-herd-of-elephant-scaled.jpeg");
}

/* RATES IMAGES */

.msl-content-flow__bg-image-rates--lelapa {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Lelapa-7.jpg");
}
.msl-content-flow__bg-image-rates--kopano {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Kopano-Suite-Landscape-13-scaled.jpg");
}
.msl-content-flow__bg-image-rates--dithaba {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Dithaba-5.jpg");
}
.msl-content-flow__bg-image-rates--elela {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Elela-1.jpg");
}

/* FAQ IMAGES */

.msl-content-flow__bg-image-faq--lodges {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Lelapa-Dining-Area-1-scaled.jpg");
  background-position: 50% 100%;
}

.msl-content-flow__bg-image-faq--lelapa {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Lelapa-Luxury-Suite-Landscape-7-scaled.jpg");
  background-position: 50% 500%;
}

.msl-content-flow__bg-image-faq--kopano {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Kopano-Suite-Landscape-13-scaled.jpg");
  background-position: 40% 500%;
}

.msl-content-flow__bg-image-faq--dithaba {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Dithaba-Suite-9-scaled.jpg");
  background-position: 50% 400%;
}

.msl-content-flow__bg-image-faq--elela {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Elela-Suite-Landscape-21-scaled.jpg");
  background-position: 10% 500%;
}

.msl-content-flow__bg-image-faq--safari {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/On-Safari-1-scaled.jpg");
  background-position: 80% 500%;
}

.msl-content-flow__bg-image-faq--reserve {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Madikwe-Game-Reserve-1-scaled.jpg");
  background-position: 50% 100%;
}

.msl-content-flow__bg-image-faq--wildlife {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Madikwe-Wildlife-Lion-1-scaled.jpg");
  background-position: 50% 500%;
}

.msl-content-flow__bg-image-faq--experiences {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Spa-Entry-1-scaled.jpg");
  background-position: 50% 50%;
}

.msl-content-flow__bg-image-faq--persona {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Family-on-Safari-1-scaled.jpg");
  background-position: 50% 100%;
}

.msl-content-flow__bg-image-faq--impact {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Conservation-5-scaled.jpg");
  background-position: 50% 50%;
}

.msl-content-flow__bg-image-faq--your-trip {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Dithaba-General-Landscape-6-scaled.jpg");
  background-position: 50% 100%;
}

/* WELLNESS IMAGES */

.msl-content-flow__bg-image-wellness--massage {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Spa-3-scaled.jpg");
  background-position: 50% 100%;
}

.msl-content-flow__bg-image-wellness--treatments {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Spa-16-scaled.jpg");
  background-position: 50% 100%;
}

.msl-content-flow__bg-image-wellness--addons {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Spa-15-scaled.jpg");
  background-position: 50% 100%;
}

.msl-content-flow__bg-image-wellness--packages {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Spa-12-scaled.jpg");
  background-position: 50% 100%;
}

/* TRAVEL IMAGES */

.msl-content-flow__bg-image-travel--general {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Leaning-Against-Vehicle-Soft-Sunset-1-scaled.jpg");
  background-position: 50% 100%;
}

.msl-content-flow__bg-image-travel--abjaterskop {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Dithaba-General-Landscape-7-scaled.jpg");
  background-position: 50% 100%;
}

.msl-content-flow__bg-image-travel--molatedi {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Lelapa-Pool-Waterhole-Elephants-Landscape-3-scaled.jpg");
  background-position: 50% 100%;
}

/* TERMS & CONDITIONS IMAGES */

.msl-content-flow__bg-image-terms--general {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Lelapa-Pool-6-scaled.jpg");
  background-position: 50% 100%;
}

/* PRIVACY POLICY IMAGES */

.msl-content-flow__bg-image-privacy--general {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Dithaba-2.jpg");
  background-position: 50% 100%;
}

/* 
--------------------------------------------------------------------------
 * HERO SECTION
-------------------------------------------------------------------------- 
*/
/* --- HERO WRAPPER --- */

.msl-block-hero {
  position: relative;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-inline: auto;
  box-sizing: border-box;
  min-height: 100vh;
}
.msl-block-hero#plan-your-trip {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/On-Safari-1-scaled.jpg);
}
.msl-block-hero#out-in-the-wild {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Game-Drive-Dusk.jpg);
}
.msl-hero {
  position: relative; /* contain absolutely positioned video + overlay */
  width: 100%;
  min-height: 100vh; /* full viewport hero */
  overflow: hidden; /* prevent accidental overflow from media */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--msl-color-kalahari-mist); /* fallback background */
}

/* --- BLOG HEADER --- */

.msl-content-flow__mast#blog-hero {
  margin-block-start: 0;
}

.msl-hero.msl-hero--blog {
  min-height: 50vh;
  height: 50vh;
  margin-block: auto;
}

@media (min-width: 64em) {
  .msl-hero.msl-hero--blog {
    min-height: 55vh;
    height: 75vh;
  }
}

.msl-hero--blog .msl-hero__content {
  position: absolute;
  left: 50%;
  top: unset;
  bottom: 20%;
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translate(-50%, 0);
  box-sizing: border-box;
  padding-block: 0;
  padding-inline: 0;
}

@media (min-width: 64em) {
  .msl-hero--blog .msl-hero__content {
    bottom: 0;
  }
}

.msl-hero--blog .msl-hero__content .msl-hero__title {
  margin: 0;
}

.msl-hero--blog .msl-hero__content h1 {
  background-color: var(--msl-color-kalahari-mist);
  color: var(--msl-color-buffalo-hide);
  margin-block-end: 0;
  padding: var(--msl-space-sm);
  border: solid 2px var(--msl-color-sunset-ember);
  font-size: 1.5rem;
}

@media (min-width: 64em) {
  .msl-hero--blog .msl-hero__content h1 {
    padding: 2rem 2rem 0 2rem;
    border-bottom: none;
    font-size: var(--wp--preset--font-size--huge);
  }
}

/* --- BLOG BREADCRUMBS --- */
.msl-blog__breadcrumbs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (min-width: 64em) {
  .msl-blog__breadcrumbs {
    flex-direction: row !important;
    justify-content: center !important;
  }
}

.msl-blog__breadcrumbs .smartcrawl-breadcrumb {
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  font-weight: 500;
  color: var(--msl-color-acacia-bark);
}

.msl-blog__breadcrumbs a {
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.1rem;
  font-weight: 300;
  color: var(--msl-color-acacia-bark);
  text-decoration: none;
}

.msl-blog__breadcrumbs a:hover {
  color: var(--msl-color-sunset-ember);
}

.msl-blog__breadcrumbs .smartcrawl-breadcrumb-separator {
  text-transform: uppercase;
  color: var(--msl-color-acacia-bark);
  font-size: 0.85rem;
  padding-inline: 4px;
}

.msl-blog__breadcrumbs:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: unset;
  bottom: 0;
  width: 100px;
  height: 2rem;
  transform: translate(-50%, -12rem);
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/madikwe-shape-6.1-no-bleed.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
  pointer-events: none;
  opacity: 0.6;
}

@media (min-width: 64em) {
  .msl-blog__breadcrumbs:after {
    transform: translate(-50%, -4rem);
  }
}

/* --- BLOG BODY --- */

.mls-blog__body {
  margin-block-start: var(--msl-space-md);
  padding-top: 0;
}
@media (min-width: 64em) {
  .mls-blog__body {
    margin-block-start: var(--msl-space-lg);
    padding-top: 0;
  }
}

/* --- HERO BACKGROUND VIDEO --- */

/* Class intended for the video tag wrapper / element */
.msl-hero__video {
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100vh;
  z-index: 1; /* below overlay and content */
  display: block;
  background-size: cover; /* in case a poster is used as background */
  background-position: 50% 50%;
  object-fit: cover;
  object-position: 30% 50%;
}

/* Ensure the html5 video element covers correctly */
.msl-hero__video source,
.msl-hero__video > source,
.msl-hero__video img {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to fill hero area */
  object-position: 50% 50%;
}

/* --- HERO VIDEO OVERLAY --- */

.msl-hero__overlay,
.msl-hero__content {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

/* --- HERO CONTENT --- */

.msl-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  z-index: 3;
  padding: 0 var(--msl-space-sm);
  margin-inline: auto;
  text-shadow: 1px 1px 4px rgba(67, 60, 59, 0.58);
}

/* Subtext or CTA wrapper */
.msl-hero__content .msl-hero__cta-row {
  margin-top: 1.25rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

#msl-safari-hero .msl-hero__video {
  object-position: 60% 50%;
}

#choose-camp-hero .msl-hero__video {
  object-position: 75% 50%;
}

#lelapa-hero .msl-hero__video {
  object-position: 45% 50%;
}

#kopano-hero .msl-hero__video,
#dithaba-hero .msl-hero__video {
  object-position: 50% 50%;
}

#elela-hero .msl-hero__video {
  object-position: 55% 50%;
}

#family-hero .msl-hero__video {
  object-position: 90% 50%;
}

#private-hero .msl-hero__video {
  object-position: 20% 50%;
}

#celebrations-hero .msl-hero__video {
  object-position: 41% 50%;
}

/* --- RESPONSIVE (DESKTOP OVERRIDES) --- */

@media (min-width: 64em) {
  .msl-hero {
    min-height: 100vh;
  }

  .msl-hero__content {
    padding-block: var(--msl-space-20vh);
    padding-inline: 2rem;
  }

  .msl-hero__content .msl-hero__title {
    font-size: clamp(3.2rem, 4.5vw, 5.2rem);
    max-width: 60ch;
  }

  .msl-hero__video {
    /* ensure video uses full bleed on large screens */
    object-position: 50% 45%;
  }
}

/* --- PERFORMANCE & FALLBACKS --- */

/* Hide video on reduced-motion preference to respect users */
@media (prefers-reduced-motion: reduce) {
  .msl-hero__video {
    display: none !important;
  }
  .msl-hero__overlay {
    opacity: 0.6;
  } /* ensure readable contrast */
}

/* Utility class: when JS or bandwidth policy forces poster-only fallback */
.msl-hero--poster-only {
  /* set a poster image via inline style or a CSS custom class */
  background-size: cover;
  background-position: 50% 50%;
}
.msl-hero--poster-only .msl-hero__video {
  display: none !important;
}
.msl-hero--poster-only .msl-hero__overlay {
  opacity: 0.55;
}

/* ---    MOBILE SAFETY: ensure inner content does not overflow --- */

.msl-hero__content > * {
  box-sizing: border-box;
  max-width: 100%;
  word-wrap: break-word;
}

/* 
--------------------------------------------------------------------------
 * SUB-HEADER ABOUT LAYOUT
-------------------------------------------------------------------------- 
*/

.msl-about-content-lodge {
  padding-bottom: 250px;
}

@media (min-width: 64em) {
  .msl-about-content-lodge {
    padding-bottom: var(--msl-space-lg);
  }
}

.msl-about-content .msl-layout__feature-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  column-gap: 0;
  row-gap: 0.5rem;
  max-width: 100%;
}

@media (min-width: 64em) {
  .msl-about-content .msl-layout__feature-icons {
    justify-content: space-between;
    align-items: center;
    row-gap: 5px;
    column-gap: 5px;
  }
}

.msl-about-content .msl-feature-list__item {
  margin-block-end: 0;
}

@media (min-width: 64em) {
  .msl-about-content .msl-feature-list__item {
    width: 31%;
  }
}

.msl-about-content .msl-feature-list__item:nth-last-child(1):nth-child(odd) {
  width: fit-content;
}

@media (min-width: 64em) {
  .msl-about-content .msl-feature-list__item:nth-last-child(1):nth-child(odd) {
    width: 50%;
  }
}

/* 
--------------------------------------------------------------------------
 * TWO-COLUMN CENTRE ORNAMENT BLOCK
 * -------------------------------------------------------------------------- 
*/

/* --- BLOCK BASE STYLES --- */

.msl-block-intro-unique {
  position: relative;
  align-items: stretch;
}

/* --- ORNAMENT RELOCATION (Base Styles on Column) --- */

/* The column needs position: relative to contain the ornament */
.msl-layout-flex__col--has-ornament-left {
  position: relative;
}

/* Base Ornament Style (No URL) */
.msl-layout-flex__col--has-ornament-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 90%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  z-index: 10;
}

/* --- ORNAMENT MODIFIERS --- */

/* Apply this class to the column for the Romance page */
.msl-layout-flex__col--romance-ornament::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/madikwe-shape-4.1.png");
}

/* --- MOBILE OVERRIDES --- */

@media (min-width: 64rem) {
  .msl-layout-flex__col--has-ornament-left::before {
    top: 50%;
    left: 0;
  }
}

/* --- COLUMN CONTENT REFINEMENT --- */

.msl-block-intro-unique .msl-element__heading,
.msl-block-intro-unique .msl-element__text {
  /* Constrain the headline width on desktop to prevent single long lines */
  text-align: left;
  margin-inline: auto;
}
/*
--------------------------------------------------------------------------
STANDARD PARALLAX IMAGE SCROLL
-------------------------------------------------------------------------- 
*/

/* BLOCK: .msl-parallax-cover */
.msl-parallax-cover {
  position: relative;
  min-height: var(--msl-parallax-block-height);
  overflow: clip;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: 0;
}

/* ELEMENT: __content (For Text) */
.msl-parallax-cover__content {
  position: relative;
  z-index: 30; /* Higher than sticky nav and everything else */
  max-width: var(--msl-parallax-max-content-width);
  width: 100%;
  padding: var(--msl-space-md); /* Mobile padding */
  color: var(--msl-color-kalahari-mist); /* Default text colour for dark background */
  text-align: center;
}

.msl-parallax-cover__content h2,
.msl-parallax-cover__content h3 {
  font-size: 2rem;
}

/* ELEMENT: __overlay (The Filter) */
.msl-parallax-cover__overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: var(--msl-parallax-overlay-colour);
  pointer-events: none;
  opacity: 0.7;
}

/* ELEMENT: __image (The Parallax Media) */
.msl-parallax-cover__image {
  position: absolute;
  z-index: 5;
  width: 100%;
  /* Must be taller than the block to allow movement */
  height: calc(var(--msl-parallax-block-height) + (var(--msl-parallax-scroll-height) * 1.9));
  object-fit: cover;
  /* Base Animation setup */
  animation-timing-function: linear; /* Crucial for smooth scroll-based keyframes */
  animation-duration: 1s; /* Set to 1s to be overridden by Greenshift/GSAP view() */
  animation-fill-mode: both;
  animation-timeline: view(); /* Greenshift/GSAP's scroll-linked animation timeline */
}

/* --- DESKTOP OVERRIDES (min-width: 64em) --- */
@media (min-width: 64em) {
  .msl-parallax-cover__content {
    padding: var(--msl-space-lg); /* Desktop padding */
  }
  .msl-parallax-cover__content h2 {
    font-size: var(--msl--font-size-oversized);
  }
  .msl-parallax-cover__content h3 {
    font-size: 1.2rem;
  }
}
/* -------------------------------------------------------------------------- *  
 * PARALLAX ANIMATION KEYFRAMES & MODIFIERS * 
 * -------------------------------------------------------------------------- */

/* KEYFRAME 1: CLASSIC Parallax (Image moves DOWN as user scrolls, appears to lag) */
@keyframes msl_move_down {
  from {
    transform: translateY(calc(-1 * var(--msl-parallax-scroll-height)));
  }
  to {
    transform: translateY(var(--msl-parallax-scroll-height));
  }
}

/* KEYFRAME 2: OPPOSING Parallax (Image moves UP as user scrolls) */
@keyframes msl_move_up {
  from {
    transform: translateY(var(--msl-parallax-scroll-height));
  }
  to {
    transform: translateY(calc(-1 * var(--msl-parallax-scroll-height)));
  }
}

/* MODIFIER: The user applies this class to the ROOT block (.msl-parallax-cover) */

/* Classic Downward Movement */
.msl-parallax-cover--down .msl-parallax-cover__image {
  animation-name: msl_move_down;
}

/* Opposing Upward Movement */
.msl-parallax-cover--up .msl-parallax-cover__image {
  animation-name: msl_move_up;
}

/* 
--------------------------------------------------------------------------
STICKY PARALLAX LAYOUT (parallax video scroll with content overlay)
-------------------------------------------------------------------------- 
*/

/* 1. Parent Wrapper (Creates the total scrollable area) */
.msl-parallax-scene__wrapper {
  position: relative !important;
  /* Must be taller than the viewport to allow content to scroll */
  min-height: 180vh;
  margin-inline: calc(-1 * var(--wp--style--root--padding-right)) !important;
}

/* 2. Sticky Pin Container (The element that stays in place) */
.msl-parallax-scene__sticky-pin {
  /* This is the core pinning logic */
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* The sticky element should only be the height of the viewport */
  height: 110vh;
  overflow: hidden; /* Ensures video/map does not bleed outside the viewport */
}

/* 3. Video Container (The actual background) */
.msl-parallax-scene__video {
  position: relative; /* Set to relative for inner content */
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: transparent; /* Placeholder BG to see the block */
}

/* 4. HTML5 Video Element Styling */
.msl-parallax-scene__video video {
  /* Ensure the video covers the entire container without distortion */
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
}

#msl-parallax-scene__video-element-home--out-in-the-wild {
  object-position: 45% 50%;
}

#msl-parallax-scene__video-element--reserve {
  object-position: 45% 50%;
}

/* 5. Map/Overlay Layer */
.msl-parallax-scene__overlay {
  position: absolute;
  inset: 0;
  z-index: 20; /* Must be above the video (10) */
  display: flex;
  flex-direction: column;
  padding: 2rem;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2vh;
  pointer-events: none; /* Allows user to click through the map overlay to interact with the next section */
}

/* 6. Subsequent Content (The block that scrolls over the sticky element) */
.msl-parallax-scene__scroll-content {
  position: relative;
  /*min-height: 100vh;*/
  z-index: 30; /* Must be the highest z-index to scroll over everything else */
  background: var(--msl-color-kalahari-mist); /* White background to transition into */
  padding-block: 0;
}

.msl-parallax-scene__overlay h2,
.msl-parallax-scene__overlay h3 {
  font-size: 2rem;
}

.msl-parallax-scene__scroll-content--0-top {
  padding-block-start: 0;
}

@media (min-width: 64em) {
  .msl-parallax-scene__overlay h2 {
    font-size: var(--msl--font-size-oversized);
  }
  .msl-parallax-scene__overlay h3 {
    font-size: 1.2rem;
  }
}
/* -------------------------------------------------------------------------- *
 * VISTA IMMERSIVE PARALLAX
 * -------------------------------------------------------------------------- */

/* BLOCK: Root container for the entire scene */
.msl-vista-parallax {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 80vh;
  padding: 0;
  background-size: cover;
  background-position: center var(--y-offset);
  background-attachment: fixed;
  --y-offset: 50%;
}

.msl-vista-parallax--dining {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Bush-Dinner-wide-angle-scaled.jpg");
}

.msl-vista-parallax--travel {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Lelapa-Drone-Sunset-1-scaled.jpg");
}

/* ELEMENT: Text overlay container */
.msl-vista-parallax__text-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ELEMENT: Text Heading (Subtle Flyover Effect - Pure CSS) */
.msl-vista-parallax__heading {
  /* Set initial state for the subtle flyover effect */
  transform: translateY(20px);
  opacity: 0;

  /* Use a standard, simple transition to animate the change */
  transition:
    transform 1s ease-out,
    opacity 1s ease-out;

  /* Styling */
  color: var(--msl-color-kalahari-mist);
  font-size: 2.5rem;
  padding: 0 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Modifier: This class is what a simple JS IntersectionObserver would apply on intersection */
.msl-vista-parallax.is-in-view .msl-vista-parallax__heading {
  transform: translateY(0);
  opacity: 1;
}

/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  .msl-vista-parallax__heading {
    font-size: var(--msl--font-size-oversized);
  }
}

/* 
--------------------------------------------------------------------------
 * LODGE HIGHLIGHTS 2-COL Block
-------------------------------------------------------------------------- 
*/

.msl-block-lodge-highlights {
  text-align: center;
  width: 100%;
}
@media (min-width: 64em) {
  .msl-block-lodge-highlights {
    align-content: flex-start;
    text-align: left;
  }
}

.msl-block-lodge-highlights__content h2 {
  margin-block-start: 0;
}

@media (min-width: 64em) {
  .msl-block-lodge-highlights__content .gs_tab {
    justify-content: flex-start;
    width: fit-content;
    font-size: 0.85rem;
    font-family: var(--msl-font-body);
  }
}

.gs_tabs_list.slider-sync button.gs_click_sync {
  border: 1px solid var(--msl-color-buffalo-hide-35);
}

.msl-block-lodge-highlights__media {
  padding-inline: 0 !important;
}

.msl-block-lodge-highlights__content--icon-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  column-gap: 5px;
  row-gap: 5px;
  max-width: 100%;
}

@media (min-width: 64em) {
  .msl-block-lodge-highlights__content--icon-list {
    justify-content: start;
    align-items: flex-start;
    row-gap: 5px;
  }
}

.msl-feature-list__item {
  display: flex;
  flex-direction: row; /* Icon and text side-by-side */
  align-items: center;
  gap: 0.5rem;
  width: 49%; /* Allows for 2-column wrap on mobile (49% + small gap) */
  margin-block-end: 0.75rem;
}

.msl-feature-list__item .msl-element__icon--sm,
.msl-feature-list__item .msl-element__icon--md,
.msl-feature-list__item .msl-element__icon--lg {
  flex-shrink: 0; /* Ensures the icon doesn't shrink */
  /* Remove the existing inline text/image gap from the base list: */
  margin-block-end: 0;
}

.msl-block-lodge-highlights__scroller-text-container {
  border-left: 4px solid var(--msl-color-sunset-ember);
  background-color: var(--msl-color-elephant-dust-50);
  width: 200px;
  min-height: 10px;
  padding-left: 6px;
}

/* --- LODGE BLOCK DETAILS (rates, FAQ) --- */

.msl-block-lodge-details.msl-flex {
  flex-direction: column;
}

/* 
--------------------------------------------------------------------------
 * GALLERY LAYOUT
-------------------------------------------------------------------------- 
*/

/* --- GALLERY FILTERS --- */

.msl-gallery-filter {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--msl-color-elephant-dust);
  margin-bottom: 2.5rem;
  min-height: 180px; /* Reserves space for two rows of buttons */
  position: relative;
}

/* --- NEW ELEMENT: STABILIZE PRIMARY ROW (Context + Search) --- */
.msl-gallery-filter__primary-row {
  display: flex;
  flex-direction: column; /* Mobile: Stacked */
  gap: 1.5rem;
  width: 100%;
}

/* --- NEW ELEMENT: SUBORDINATE ROW (Lodge Filter - Hidden/Shown by JS) --- */
.msl-gallery-filter__subordinate-row {
  /* Force to a single row */
  width: 100%;
  display: none;
  padding-top: 0.5rem;
  border-top: 1px solid var(--msl-color-elephant-dust);
  margin-top: 1rem;
}

.msl-gallery-filter.has-lodge-filter-active .msl-gallery-filter__subordinate-row {
  display: flex; /* Force it to appear */
}

.msl-gallery-filter__group {
  width: 100%;
}

/* --- SUBORDINATE ROW INNER STYLING (Hides inner label) --- */

.msl-gallery-filter__subordinate-row .msl-gallery-filter__label {
  display: none; /* Hides the "Filter by Lodge" label */
}

/* --- GENERAL FILTER GROUP STYLING --- */

.msl-gallery-filter__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.msl-gallery-filter__label {
  /* IvyMode Light, CAPS, Expanded look (Brand Style Guide) */
  font-family: var(--msl-font-heading, serif);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  color: var(--msl-color-buffalo-hide);
  margin: 0;
}

.msl-gallery-filter__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.msl-gallery-filter__input {
  /* Input field styling */
  padding: 0.75rem 1rem;
  border: 1px solid var(--msl-color-acacia-bark);
  background: var(--msl-color-kalahari-mist);
  color: var(--msl-color-buffalo-hide);
  font-family: var(--msl-font-body, sans-serif);
  font-size: 1rem;
  border-radius: 4px;
  transition: border-color 0.2s ease-in-out;
}

.msl-gallery-filter__input:focus {
  border-color: var(--msl-color-twilight-soil);
  outline: none;
}

/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  .msl-gallery-filter {
    /* Desktop minimum height is higher */
    min-height: 120px;
  }

  .msl-gallery-filter__primary-row {
    flex-direction: row; /* Desktop: Horizontal */
    align-items: flex-end;
    justify-content: space-between;
  }

  .msl-gallery-filter__group {
    flex-grow: 1;
    max-width: 60%;
  }

  .msl-gallery-filter__group--search {
    max-width: 35%;
  }

  .msl-gallery-filter__input {
    width: 100%;
  }

  .msl-gallery-filter__subordinate-row {
    /* Desktop: Ensure full width and clean margin */
    padding-top: 1rem;
    margin-top: 1rem;
  }
}

/* --- GALLERY GRID & CARD --- */

.msl-gallery-grid {
  /* MOBILE BASE: True Masonry using CSS Columns */
  display: block;
  column-count: 2; /* Two columns on mobile */
  column-gap: 1rem;
  width: 100%;
}

.msl-gallery-card-wrapper {
  /* Force item to behave as a single block within the column */
  display: block;
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;

  /* Vertical gap between items (must match column-gap for a clean grid) */
  margin-bottom: 1rem;

  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: opacity 0.4s ease-in-out;
}

/* Helper Class for JS: toggles visibility */
.msl-gallery-card-wrapper.is-hidden {
  display: none;
}

.msl-gallery-card {
  position: relative;
  margin: 0;
  line-height: 0; /* Prevents layout issues with text line height */
}

.msl-gallery-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.4s ease-in-out,
    opacity 0.4s ease-in-out !important;
  will-change: transform;
  transform: translateZ(0); /* Forces a new composite layer for smooth transform */
}

.msl-gallery-card:hover .msl-gallery-card__image {
  transform: scale(1.05);
}

.msl-gallery-card__caption {
  font-family: var(--msl-font-body, sans-serif);
  font-size: 0.9rem;
  color: var(--msl-color-buffalo-hide);
  padding: 0.75rem 1rem;
  background: var(--msl-color-kalahari-mist);
  margin: 0;
  line-height: 1.4;
  text-align: center;
}

/* Desktop Overrides (min-width: 64em) - Masonry Column Setup */
@media (min-width: 64em) {
  .msl-gallery-grid {
    /* SWITCH TO CSS COLUMNS FOR MASONRY BASE */
    display: block; /* Overrides the mobile grid layout */
    column-count: 3; /* Three-column waterfall aesthetic */
    column-gap: 2rem; /* Retain desktop gap */
    width: 100%;
    /* No height/overflow limitations, allow the flow to happen */
  }

  .msl-gallery-card-wrapper {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;

    /* Vertical space between items - Must match the column-gap for consistency */
    margin-bottom: 2rem;
    width: 100%; /* Ensures item fills its column width */

    /* Remove mobile visual styles on desktop */
    box-shadow: none;
    border-radius: 0;
  }
}

/*
==========================================================================
5.0 COMPONENTS
==========================================================================
*/

/* --------------------------------------------------------------------------
 * BASE ACCORDION BLOCK (.msl-accordion) - FINAL FUNCTIONAL CORE
 * -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * COMPONENT: NOTICE BLOCK (.msl-notice)
 * Generic callout/notice component. Use anywhere on site.
 * -------------------------------------------------------------------------- */

.msl-notice,
#seo-uk-quote .msl-notice {
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.5;
  background-color: var(--msl-color-kalahari-mist);
  border: 1px solid var(--msl-color-elephant-dust);
  border-left-width: 3px;
  color: var(--msl-color-buffalo-hide);
}

.msl-notice p,
#seo-uk-quote .msl-notice p {
  margin: 0;
}

.msl-notice strong,
#seo-uk-quote .msl-notice strong {
  color: var(--msl-color-twilight-soil);
}

/* Warning — restrictions, hard rules */
.msl-notice--warning,
#seo-uk-quote .msl-notice--warning {
  border-left-color: var(--msl-color-sunset-ember);
}

/* Positive — confirmations, good news */
.msl-notice--positive,
#seo-uk-quote .msl-notice--positive {
  border-left-color: var(--msl-color-wild-fig);
}

/* Info — neutral context, guidance */
.msl-notice--info,
#seo-uk-quote .msl-notice--info {
  border-left-color: var(--msl-color-twilight-soil);
}

/* --- BLOCK BASE - CONTAINER --- */
.msl-accordion {
  width: 100%;
  max-width: 1200px;
  border: none;
  margin: var(--msl-space-sm) auto;
  /* Removed row-gap, spacing handled by item margin */
}

/* --- ELEMENT - ITEM (The core collapsing unit) --- */
.msl-accordion__item {
  position: relative;
  display: grid;
  grid-template-rows: min-content 0fr;
  transition: grid-template-rows 0.4s ease-in-out;
  will-change: grid-template-rows;

  border: 1px solid var(--msl-color-acacia-bark);
  margin-block-end: 1rem;
}

/* MODIFIER - OPEN STATE */
.msl-accordion__item.is-open {
  grid-template-rows: min-content 1fr;
}

/* --- ELEMENT - HEADER/TRIGGER (Question Block) --- */
.msl-accordion__header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-family: var(--msl-font-heading);
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--msl-color-river-clay);
  background: transparent;

  /* Stabilize header height using min-height and box-sizing */
  min-height: 3.5rem;
  box-sizing: border-box;

  padding: 1rem var(--msl-space-md);
  transition:
    color 0.8s ease-in-out,
    padding-block 0.8s ease-in-out;
}

/* --- BASE BAR EXPANSION (Left-to-Right Visual Feedback) --- */
.msl-accordion__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background-color: var(--msl-color-twilight-soil);
  z-index: -1;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}

/* Open State Visuals */
.msl-accordion__item.is-open > .msl-accordion__header {
  padding-block: 1.2rem;
  color: var(--msl-color-kalahari-mist);
  background-color: transparent;
}
.msl-accordion__item.is-open > .msl-accordion__header::before {
  width: 100%;
}

/* --- ELEMENT - CONTENT (Answer Panel) --- */
.msl-accordion__content {
  overflow: hidden;
  min-height: 0;
  background-color: rgba(237, 227, 215, 0.35);
  color: var(--msl-color-buffalo-hide);
  padding: 0; /* Padding must be on inner element */
  text-align: left;
  font-size: 0.9rem;
  font-weight: 300;
}

/* --- INNER CONTENT FIXES (for padding consistency) --- */
.msl-accordion__answer-inner {
  padding: var(--msl-space-md); /* Apply padding to inner element */
}
.msl-accordion__answer-inner p:first-child {
  margin-block-start: 0;
}
.msl-accordion__answer-inner p:last-child {
  margin-block-end: 0;
}

/* --- ELEMENT - ICON/TOGGLE (Plus/Minus Icon) --- */
.msl-accordion__icon {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-left: 1rem;
}
.msl-accordion__icon::before,
.msl-accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--msl-color-acacia-bark);
  transition: transform 0.3s ease-in-out;
}
.msl-accordion__icon::before {
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
}
.msl-accordion__icon::after {
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}
.msl-accordion__item.is-open .msl-accordion__icon::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* --------------------------------------------------------------------------
 * MODIFIER: FAQ (.msl-accordion--faq) - Minimal overrides for full block styles
 * -------------------------------------------------------------------------- */

.msl-accordion--faq {
  border: none;
  margin-block-end: var(--msl-space-lg);
}
.msl-accordion--faq .msl-accordion__item {
  border: 1px solid var(--msl-color-acacia-bark);
  width: 100%;
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
 * MODIFIER: RATES (.msl-accordion--rates) - Overrides for Right-to-Left expansion
 * -------------------------------------------------------------------------- */

.msl-accordion.msl-accordion--rates {
  width: 70%;
  float: right;
  text-shadow: none;
}

.msl-accordion--rates .msl-accordion__header {
  justify-content: flex-end;
  text-align: right;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  padding: 0.75rem var(--msl-space-sm);
  color: var(--msl-color-kalahari-mist);
}

/* --- BAR OVERRIDE: Right-to-left expansion --- */
.msl-accordion--rates .msl-accordion__header::before {
  left: unset;
  right: 0;
  width: 2px;
  background-color: var(--msl-color-twilight-soil-50);
}
.msl-accordion--rates .msl-accordion__item.is-open > .msl-accordion__header::before {
  background-color: var(--msl-color-twilight-soil);
}

.msl-accordion--rates .msl-accordion__item {
  border: none;
}

/* --- ICON RESKIN (Moves the icon to the left of the text) --- */
.msl-accordion--rates .msl-accordion__icon {
  order: -1;
  margin-left: 0;
  margin-right: var(--msl-space-sm);
}

/* --- CONTENT RESKIN (Reduced padding, transparent background) --- */
.msl-accordion--rates .msl-accordion__content {
  background-color: var(--msl-color-kalahari-mist);
}

/* --------------------------------------------------------------------------
 * DECORATOR: NICHE SUMMARY DIVIDERS (Descendant Selector for structural visuals)
 * -------------------------------------------------------------------------- */

/* --- Item Border Overrides (Used when flex decoration wrapper is present) --- */
.msl-accordion-flex-decoration-wrapper .msl-accordion__item {
  border: none;
  width: auto;
  padding: 0;
  margin-block-end: 5rem;
}

.msl-accordion-flex-decoration-wrapper .msl-accordion__header {
  border: 1px solid var(--msl-color-acacia-bark);
}

.msl-accordion-flex-decoration-wrapper .msl-accordion__answer-inner {
  border: 1px solid var(--msl-color-acacia-bark);
  padding: var(--msl-space-md);
}

/* --- Shape Divider Element (Applied only in the Decorated context) --- */
.msl-accordion-flex-decoration-wrapper .msl-accordion__item::after {
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-5rem / 2);
  left: 50%;
  transform: translate(-50%, 50%);
  width: 100px;
  height: 100%;
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/madikwe-shape-6.1-no-bleed.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
  pointer-events: none;
  opacity: 0.6;
}

.msl-accordion-flex-decoration-wrapper .msl-accordion__item:last-child::after {
  display: none;
}

/* 
--------------------------------------------------------------------------
 * BEM FLOP PANEL MODULE - .msl-flop-panel
 * 
 * NOTE: The Block is the container, items are its elements.
-------------------------------------------------------------------------- 
*/

/* 
* A. BLOCK GRID (.msl-flop-panel__grid)
* Mapped from .gsbp-4beb226 (The wrapper defining row/column flex)
*/
.msl-flop-panel__grid {
  display: flex;
  flex-direction: column; /* Mobile-First: stacked columns */
  justify-content: flex-start;
}
/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  .msl-flop-panel__grid {
    flex-direction: row; /* Desktop: side-by-side flex */
  }
}
/*
* B. ITEM ELEMENT (.msl-flop-panel__item)
* Replaces .expanel (Base for all panels/items).
*/
.msl-flop-panel__item {
  /* --- Base Layout (Mobile-First) --- */
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* titles and content flow top-down */
  align-items: flex-start;
  padding: 2rem;
  width: 100%;
  min-height: 200px;
  max-height: 0;
  overflow: hidden;
  scroll-margin-top: 1rem; /* prevents browser from scrolling element abruptly when focused */

  /* --- Base Appearance & Transition --- */
  border-right-style: solid;
  border-right-width: 5px;
  border-right-color: var(--msl-color-acacia-bark);
  color: var(--msl-color-kalahari-mist);
  transition: flex 0.8s ease-in-out;
}

.msl-flop-panel__item:last-child {
  border: none;
}

/* --- Item Hover/Focus/Active States (Mobile) --- */
.msl-flop-panel__item.active {
  flex: 4;
  height: 100%;
  max-height: 150vh;
}

/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  .msl-flop-panel__item {
    height: 90vh;
    min-height: 450px;
    max-height: 90vh;
    display: block;
    padding: 0;
  }
}
@media (min-width: 64em) {
  .msl-flop-panel__item:hover,
  .msl-flop-panel__item:focus,
  .msl-flop-panel__item.active {
    flex: 4;
    height: 90vh;
    max-height: 90vh;
  }
}

/* Optional Focus Treatment */
.msl-flop-panel__item:focus {
  outline: 2px solid rgba(255, 255, 255, 0.08);
  outline-offset: 6px;
}
/* --- ::before Overlay State --- */
.msl-flop-panel__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--msl-color-buffalo-hide);
  opacity: 0.4;
  transition: opacity 0.35s cubic-bezier(0.42, 0, 0.58, 1);
}

.msl-flop-panel__item.active::before {
  opacity: 0.8;
}

@media (min-width: 64em) {
  .msl-flop-panel__item::before {
    opacity: 0.2;
  }

  /* RESTORED :hover and :focus for Desktop */
  .msl-flop-panel__item:hover::before,
  .msl-flop-panel__item:focus::before,
  .msl-flop-panel__item.active::before {
    opacity: 0.8;
  }
}

/* 
* C. IMAGE MODIFIERS (msl-flop-panel--{name})
*/
/* Shared Background Properties for all image-based panels */
.msl-flop-panel__grid .msl-flop-panel--lelapa,
.msl-flop-panel__grid .msl-flop-panel--kopano,
.msl-flop-panel__grid .msl-flop-panel--dithaba,
.msl-flop-panel__grid .msl-flop-panel--elela,
.msl-flop-panel__grid .msl-flop-panel--wellness,
.msl-flop-panel__grid .msl-flop-panel--dining,
.msl-flop-panel__grid .msl-flop-panel--family,
.msl-flop-panel__grid .msl-flop-panel--personal,
.msl-flop-panel__grid .msl-flop-panel--celebrations {
  background-color: var(--msl-color-buffalo-hide);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Unique Background Images */

/* Lodges */
.msl-flop-panel--lelapa {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Lelapa-Still-scaled.jpg) !important;
  background-position: 33% 73%;
}
.msl-flop-panel--kopano {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Kopano-Still-scaled.jpg) !important;
  background-position: 43% 60%;
}
.msl-flop-panel--dithaba {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Dithaba-Still-scaled.jpg) !important;
  background-position: center center;
}
.msl-flop-panel--elela {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Elela-Still-scaled.jpg) !important;
  background-position: 43% 51%;
}

/* Experiences */
.msl-flop-panel--wellness {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Wellness-Hero-Still-scaled.png) !important;
  background-position: 45% 73%;
}
.msl-flop-panel--dining {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Dining-Still-scaled.jpg) !important;
  background-position: 43% 60%;
}
.msl-flop-panel--family {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Family-Still-scaled.jpg) !important;
  background-position: 30% 50%;
}
.msl-flop-panel--personal {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Private-Still-scaled.jpg) !important;
  background-position: 20% 50%;
}
.msl-flop-panel--celebrations {
  background-image: url(https://madikwesafarilodge.co.za/wp-content/uploads/2025/12/Celebrations-Still-scaled.jpg) !important;
  background-position: 43% 51%;
}

/* 
* D. TITLE/SUBTITLE ELEMENTS (.msl-flop-panel__title, __subtitle)
* FINAL MOBILE REFACTOR: Commits to Position: Relative/Document Flow on Mobile (Base).
*/

.msl-flop-panel__item .msl-flop-panel__title,
.msl-flop-panel__item .msl-flop-panel__subtitle {
  position: relative;
  left: unset;
  top: unset;
  transform: none;
  transition-duration: 0.8s;
  color: var(--msl-color-elephant-dust);
  text-transform: uppercase;
  box-sizing: border-box;
  padding: 0; /* Remove padding here, use parent gap or margin */
  text-align: center; /* Center the text for the mobile visual */
  width: 100%; /* Allows centering of max-content element */
}
.msl-flop-panel__item .msl-flop-panel__title {
  margin-block-start: 10px;
  width: max-content;
  align-self: center;
  font-family: Ivymode, sans-serif;
  font-size: clamp(2rem, 3vw, 4rem);
  line-height: clamp(4rem, 6vw, 5rem);
  letter-spacing: 0.3rem;
  white-space: nowrap !important;
}
.msl-flop-panel__item .msl-flop-panel__subtitle {
  margin-block-start: 0; /* Replaces original 'top: 70px' positioning */
  width: 100%;
  text-align: center;
  font-size: var(--wp--preset--font-size--xs, 0.85rem);
  line-height: var(--wp--custom--line-height--xs, 1.15rem);
  letter-spacing: 0.2rem;
  font-weight: 600;
  text-shadow: 2 2 5 5 var(--msl-color-buffalo-hide);
}

/* Mobile Expanded State - Titles remain in flow, but change colour */
.msl-flop-panel__item:hover .msl-flop-panel__title,
.msl-flop-panel__item:focus .msl-flop-panel__title,
.msl-flop-panel__item.active .msl-flop-panel__title,
.msl-flop-panel__item:hover .msl-flop-panel__subtitle,
.msl-flop-panel__item:focus .msl-flop-panel__subtitle,
.msl-flop-panel__item.active .msl-flop-panel__subtitle {
  /* Only visual change is colour, position is stable */
  color: var(--msl-color-kalahari-mist);
  /* Alignment will be dictated by the parent's flex-start setting (from a previous fix) */
}

/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  /* Desktop Collapsed State (Restores ABSOLUTE positioning, rotation, and custom positioning) */
  .msl-flop-panel__item .msl-flop-panel__title,
  .msl-flop-panel__item .msl-flop-panel__subtitle {
    position: absolute; /* Desktop Collapsed: ABSOLUTE (restores original) */
    align-self: unset;
    text-align: left; /* Alignment reset for absolute position */
  }
  .msl-flop-panel__item .msl-flop-panel__title {
    bottom: 60px;
    left: 50px;
    transform: rotateZ(-90deg);
    transform-origin: center left;
    font-weight: 300;
  }
  .msl-flop-panel__item .msl-flop-panel__subtitle {
    bottom: 40px;
    left: 28px;
    transform: translateX(0%);
    width: fit-content;
    font-weight: 300;
  }

  /* Desktop Hover/Active State (Restores original expanded position) */
  .msl-flop-panel__item:hover .msl-flop-panel__title,
  .msl-flop-panel__item:focus .msl-flop-panel__title,
  .msl-flop-panel__item.active .msl-flop-panel__title,
  .msl-flop-panel__item:hover .msl-flop-panel__subtitle,
  .msl-flop-panel__item:focus .msl-flop-panel__subtitle,
  .msl-flop-panel__item.active .msl-flop-panel__subtitle {
    position: absolute; /* Desktop Expanded: ABSOLUTE (retains original behaviour) */
    color: var(--msl-color-kalahari-mist);
  }
  .msl-flop-panel__item:hover .msl-flop-panel__title,
  .msl-flop-panel__item:focus .msl-flop-panel__title,
  .msl-flop-panel__item.active .msl-flop-panel__title {
    left: 20px;
    transform: rotateZ(0deg);
  }
  .msl-flop-panel__item:hover .msl-flop-panel__subtitle,
  .msl-flop-panel__item:focus .msl-flop-panel__subtitle,
  .msl-flop-panel__item.active .msl-flop-panel__subtitle {
    left: 23px;
    transform: translateX(0%);
  }
} /*
* E. HIDDEN CONTENT ELEMENT (.msl-flop-panel__content)
*/
.msl-flop-panel__item .msl-flop-panel__content {
  position: relative; /* keep in document flow on mobile */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* flow-based, left-aligned on mobile */
  padding: 0 0;
  padding-top: 0;
  margin: 0;
  opacity: 0;
  height: 0;
  overflow: hidden; /* hides content during collapse */
  transform: translateY(-16px); /* small lift for nicer entrance */
  transition:
    opacity 0.8s ease-in-out,
    transform 0.8s ease-in-out,
    padding-top 0.8s ease-in-out;
}

/* --------- CONTENT: mobile/expanded (revealed) --------- */
.msl-flop-panel__item:hover .msl-flop-panel__content,
.msl-flop-panel__item:focus .msl-flop-panel__content,
.msl-flop-panel__item.active .msl-flop-panel__content {
  opacity: 1;
  transform: translateY(0);
  margin: 0;
  padding-top: 2rem;
}
/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  .msl-flop-panel__item .msl-flop-panel__content {
    width: 700px;
    margin-bottom: 25px;
    opacity: 0;
    height: 0;
    max-height: 0;
    overflow: hidden;
  }

  .msl-flop-panel__item:hover .msl-flop-panel__content,
  .msl-flop-panel__item:focus .msl-flop-panel__content,
  .msl-flop-panel__item.active .msl-flop-panel__content {
    align-items: flex-start;
    align-self: unset;
    opacity: 1;
    height: 100%;
    padding-top: 10px;
    padding-inline: 2rem;
    margin-block: 0;
    row-gap: 0;
    max-height: unset;
  }
}

/* 
* F. CONTENT CHILDREN & BUTTONS
*/

/* Content Body Text Alignment (Experience Base Style) */
.msl-flop-panel__item .msl-flop-panel__content-body {
  text-align: center !important;
  font-size: 16px;
}

@media (min-width: 64em) {
  .msl-flop-panel__item .msl-flop-panel__content-body {
    text-align: left !important;
  }
}

.msl-flop-panel__item .msl-flop-panel__content ul {
  font-size: 16px;
}

/* Experience Base Button Styling (Mobile-First: Centred/Relative) */
.msl-flop-panel__item .msl-flop-panel__content .msl-button__primary.msl-flop-panel__button {
  position: relative;
  top: unset;
  left: unset;
  right: unset;
  bottom: unset;
  height: fit-content;
  width: fit-content;
  align-self: center;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  font-size: 0.85rem;
  text-decoration: none;
}

/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  .msl-flop-panel__item .msl-flop-panel__content .msl-button__primary.msl-flop-panel__button {
    align-self: flex-start;
  }
}

/* --- Lodge Modifier for Button (Absolute Positioning Override) --- */
.msl-flop-panel__item.msl-flop-panel--lodge .msl-flop-panel__content .msl-button__primary.msl-flop-panel__button {
  /* Lodge Button Mobile Style (Absolute Position) - Only applies if the lodge modifier is used */
  position: absolute;
  bottom: 40px;
  right: 0;
  left: 59%;
  transform: translatex(-50%);
  top: unset;
  transition: all 0.8s;
}

/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  .msl-flop-panel__item.msl-flop-panel--lodge .msl-flop-panel__content .msl-button__primary.msl-flop-panel__button {
    bottom: 46px;
    right: 30px;
    left: unset;
    margin-right: 1rem;
    transform: translatex(0);
  }
}

/* 
* G. ICON GROUP (LODGE MODIFIER ONLY)
*/
/* Mobile-First Layout (3-column icon group) */
.msl-flop-panel__item .msl-flop-panel__icon-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  column-gap: 0;
  row-gap: 0.5rem;
  max-width: 100%;
  margin-block: var(--msl-space-sm);
}
.msl-flop-panel__item .msl-flop-panel__icon-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 49%;
  margin-block-end: 0;
}

/* Desktop Overrides (min-width: 64em) */
@media (min-width: 64em) {
  .msl-flop-panel__item .msl-flop-panel__icon-group {
    justify-content: flex-start;
    align-items: center;
    row-gap: 5px;
    column-gap: 3rem;
    width: 100%;
    margin-block: var(--msl-space-md);
  }
  .msl-flop-panel__item .msl-flop-panel__icon-item {
    width: auto;
  }
  /*.msl-flop-panel__item .msl-flop-panel__icon-item:nth-last-child(1):nth-child(odd) {
    width: 50%;
  } */
}

/* 
* H. UTILITY FIXES
*/
.msl-flop-panel__item.active .msl-flop-panel__title,
.msl-flop-panel__item.active .msl-flop-panel__subtitle {
  /* Ensures color persistence when JS adds .active class */
  color: var(--msl-color-kalahari-mist);
}

/* 
--------------------------------------------------------------------------
 * SEO HERO CONTAINER (80vh desktop / 60vh mobile, strict height)
-------------------------------------------------------------------------- 
*/

.msl-seo-hero {
  position: relative;
  height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 64em) {
  .msl-seo-hero {
    height: 60vh;
  }
}

/* 
--------------------------------------------------------------------------
 * SEO VIDEO BACKGROUND (Greenshift video block)
-------------------------------------------------------------------------- 
*/

.msl-seo-hero .msl-seo-hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Ensure video block children render correctly */
.msl-seo-hero__video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.msl-seo-hero__video-wrapper video,
.msl-seo-hero__video-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 
--------------------------------------------------------------------------
 * DARK OVERLAY (same opacity as existing hero)
-------------------------------------------------------------------------- 
*/

.msl-seo-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--msl-parallax-overlay-colour);
  z-index: 2;
}

/* 
--------------------------------------------------------------------------
 * TEXT CONTENT (title + subtitle, centered)
-------------------------------------------------------------------------- 
*/

.msl-seo-hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--msl-space-md);
  text-align: center;
}

@media (min-width: 64em) {
  .msl-seo-hero__content {
    padding: var(--msl-space-lg);
  }
}

/* Title */
.msl-seo-hero__title {
  font-family: var(--msl-font-heading);
  font-size: var(--msl--font-size-oversized);
  font-weight: 400;
  color: var(--msl-color-kalahari-mist);
  line-height: 1.2;
  margin: 0;
  max-width: 90%;
}

@media (max-width: 64em) {
  .msl-seo-hero__title {
    font-size: 2.2rem;
  }
}

/* Subtitle / Description */
.msl-seo-hero__subtitle {
  font-family: var(--msl-font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--msl-color-kalahari-mist);
  line-height: 1.6;
  margin: var(--msl-space-sm) auto 0;
  max-width: 85%;
}

@media (max-width: 64em) {
  .msl-seo-hero__subtitle {
    font-size: 0.95rem;
  }
}

/* Metadata (e.g., "Offered by" + rating) */
.msl-seo-hero__meta {
  font-family: var(--msl-font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--msl-color-elephant-dust);
  margin-top: var(--msl-space-sm);
}

@media (max-width: 64em) {
  .msl-seo-hero__meta {
    font-size: 0.85rem;
  }
}

/* --------------------------------------------------------------------------
 * SEO TAB - ICON GRID (.msl-seo-tab__icon-group)
 * 2×2 CSS grid — consistent alignment regardless of text length
 * -------------------------------------------------------------------------- */

.msl-seo-tab__icon-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
  margin-block: var(--msl-space-sm);
}

@media (max-width: 63.999em) {
  .msl-seo-tab__icon-group {
    grid-template-columns: 1fr;
  }
}

.msl-seo-tab__icon-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}

.msl-seo-tab__icon-item .msl-typography--value-xs {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.3;
}

@media (min-width: 64em) {
  .msl-seo-tab__icon-group {
    gap: 0.65rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
 * SEO TAB - IMAGE ACCORDION (.msl-seo-image-accordion)
 * Replaces all gsbp-* layout/styling. Retains gs_* classes for JS functionality.
 * Background images remain on gsbp-* classes (set via front-end editor).
 * -------------------------------------------------------------------------- */

/* WRAPPER */
.msl-seo-image-accordion {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

/* ITEM */
.msl-seo-image-accordion .gs_item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--msl-color-elephant-dust-50);
}

/* TITLE WRAPPER (H3) */
.msl-seo-image-accordion .gs_title {
  margin: 0;
  padding: 0;
  min-height: 150px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

/* BUTTON */
.msl-seo-image-accordion .gs_title button {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 1rem;
  align-items: center;
  align-self: center;
  justify-items: flex-start;
  width: 100%;
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  background-color: #0000000d;
  border: none;
  cursor: pointer;
  color: var(--msl-color-kalahari-mist);
  text-decoration: none;
}

/* CAMP NAME (span - row 1 col 1) */
.msl-seo-image-accordion .gs_title button .gs_name {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--msl-font-heading);
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 200;
  color: var(--msl-color-kalahari-mist);
  margin: 0;
}

/* CHEVRON (svg - row 1 col 2) */
.msl-seo-image-accordion .gs_title button .gs_icon {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  width: 14px;
  height: 14px;
  fill: var(--msl-color-kalahari-mist);
  transition: transform 0.5s ease;
}

/* TAGLINE (p - row 2, span both cols) */
.msl-seo-image-accordion .gs_title button p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding-block-end: 0.25rem;
  font-size: 0.85rem;
  font-family: var(--msl-font-body);
  font-weight: 200;
  letter-spacing: 0.15em;
  color: var(--msl-color-kalahari-mist);
  opacity: 0.8;
}

/* OPEN STATE - chevron rotation */
.msl-seo-image-accordion .gs_item[data-active] .gs_icon {
  transform: rotate(90deg);
}

/* CONTENT PANEL */
.msl-seo-image-accordion .gs_content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.5s cubic-bezier(0.42, 0, 0.58, 1),
    opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.msl-seo-image-accordion .gs_item[data-active] .gs_content {
  max-height: 5000px;
  opacity: 1;
}

/* CONTENT INNER */
.msl-seo-image-accordion .gs_content .gs_content_inner {
  padding: 25px;
  font-size: 1rem;
  line-height: 1.7rem;
}

/* Icon alignment fix in camp accordion panels */
.msl-seo-image-accordion .msl-seo-tab__icon-group {
  overflow: visible;
}

.msl-seo-image-accordion .msl-seo-tab__icon-item {
  align-items: flex-start;
}

/* 
--------------------------------------------------------------------------
 * SEO TAB MODULE (.msl-seo-tabs)
 * Tabs on desktop (≥64em), accordion on mobile (<64em)
-------------------------------------------------------------------------- 
*/

/* WRAPPER */
.msl-seo-tabs {
  width: 100%;
}

@media (max-width: 63.999em) {
  .msl-seo-tabs {
    padding: var(--msl-space-sm);
  }
}
/* TAB NAV — desktop only */
.msl-seo-tabs__nav {
  display: none;
  flex-direction: row;
  width: 100%;
  margin-block-end: -1px;
}

@media (min-width: 64em) {
  .msl-seo-tabs__nav {
    display: flex;
  }
}

/* TAB BUTTONS */
.msl-seo-tabs__tab {
  background-color: transparent;
  border: 1px solid var(--msl-color-elephant-dust);
  padding: 11px 24px;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  color: var(--msl-color-river-clay);
  font-family: var(--msl-font-heading);
  font-weight: 400;
  transition:
    color 0.4s ease-in-out,
    background-color 0.4s ease-in-out,
    border-color 0.4s ease-in-out;
  position: relative;
}

.msl-seo-tabs__tab.active {
  color: var(--msl-color-sunset-ember);
  background-color: rgba(212, 204, 193, 0.27);
  border-bottom-color: transparent;
}

.msl-seo-tabs__tab:focus {
  outline: none;
}

/* PANELS CONTAINER */
.msl-seo-tabs__panels {
  width: 100%;
}

@media (max-width: 63.999em) {
  .msl-seo-tabs__panels {
    padding: var(--msl-space-xs) var(--msl-space-sm);
  }
}

@media (min-width: 64em) {
  .msl-seo-tabs__panels {
    border: 1px solid var(--msl-color-elephant-dust);
  }
}

/* INDIVIDUAL PANEL */
.msl-seo-tabs__panel {
  width: 100%;
}

@media (max-width: 63.999em) {
  .msl-seo-tabs__panel {
    margin-block-end: 5px;
  }
}

/* ACCORDION TRIGGER — mobile only */
.msl-seo-tabs__accordion-trigger {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 1rem var(--msl-space-sm);
  background-color: var(--msl-color-kalahari-mist);
  border: 1px solid var(--msl-color-elephant-dust);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--msl-font-heading);
  font-size: 1rem;
  letter-spacing: 0.1rem;
  color: var(--msl-color-river-clay);
  font-weight: 400;
  text-align: left;
  transition:
    color 0.4s ease-in-out,
    background-color 0.4s ease-in-out;
}

.msl-seo-tabs__accordion-trigger[aria-expanded="true"] {
  color: var(--msl-color-sunset-ember);
  background-color: rgba(212, 204, 193, 0.27);
  border-bottom-color: transparent;
}

/* Hide accordion trigger on desktop */
@media (min-width: 64em) {
  .msl-seo-tabs__accordion-trigger {
    display: none;
  }
}

/* CHEVRON */
.msl-seo-tabs__chevron {
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.4s ease-in-out;
}

.msl-seo-tabs__accordion-trigger[aria-expanded="true"] .msl-seo-tabs__chevron {
  transform: rotate(90deg);
}

.msl-seo-tabs__accordion-trigger .msl-seo-tabs__chevron,
.msl-seo-tabs__accordion-trigger svg.gs_icon {
  width: 12px;
  height: 12px;
  min-width: 12px;
  flex-shrink: 0;
  order: -1;
}

/* PANEL INNER — the actual content */
.msl-seo-tabs__panel-inner {
  padding: var(--msl-space-md);
}

/* Mobile: hide inactive panel content */
@media (max-width: 63.999em) {
  .msl-seo-tabs__panel-inner {
    display: none;
  }

  .msl-seo-tabs__panel.active .msl-seo-tabs__panel-inner {
    display: block;
    border: 1px solid var(--msl-color-elephant-dust-50);
    border-top: none;
  }
}

/* Desktop: hide inactive panels entirely */
@media (min-width: 64em) {
  .msl-seo-tabs__panel {
    display: none;
  }

  .msl-seo-tabs__panel.active {
    display: block;
  }
}

/* Editor: show all panels so content is accessible */
.block-editor-block-list__layout .msl-seo-tabs__panel {
  display: block !important;
}

.block-editor-block-list__layout .msl-seo-tabs__panel-inner {
  display: block !important;
}

.block-editor-block-list__layout .msl-seo-tabs__accordion-trigger {
  pointer-events: none;
}

/* 
--------------------------------------------------------------------------
 * AMENITIES LIST
-------------------------------------------------------------------------- 
*/

.msl-layout__amenities-list {
  gap: unset;
}

.msl-layout__amenities-list .msl-layout-flex__col {
  row-gap: var(--msl-space-lg);
}

.msl-layout__amenities-list ul.is-style-nounderline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 2rem;
}

.msl-layout__amenities-list ul.is-style-nounderline li {
  margin: 0;
  text-align: center;
}

@media (min-width: 64em) {
  .msl-layout__amenities-list .msl-layout-flex__col {
    row-gap: unset;
    border-right: 1px solid var(--msl-color-elephant-dust);
  }

  .msl-layout__amenities-list .msl-layout-flex__col:last-child {
    border-right: none;
  }

  .msl-layout__amenities-list .msl-layout-flex__col:after {
    display: block;
  }
}
/* 
--------------------------------------------------------------------------
 * RATES TABLE
-------------------------------------------------------------------------- 
*/

/* --- Base Wrapper (Applies to both) --- */
.msl-rates {
  margin-block: var(--msl-space-sm);
}

.msl-rates--desktop {
  display: none;
}

/* --- MOBILE BLOCK STYLES (.msl-rates--mobile) --- */

/* Data Row Item (msl-rates__item) - The Accordion Container on Mobile */
.msl-rates--mobile .msl-rates__item {
  display: grid;
  grid-template-rows: auto 0fr; /* Accordion is closed by default */
  transition: grid-template-rows 0.4s ease-out;
  margin-block-end: var(--msl-space-sm);
  border: 1px solid var(--msl-color-acacia-bark);
  border-radius: 4px;
  background: var(--msl-color-kalahari-mist);
}

/* NEW: Mobile Lodge Header for 'All Rates' view */
.msl-rates__lodge-header-mobile {
  font-family: var(--msl-font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--msl-color-river-clay);
  text-align: center;
  padding: var(--msl-space-md) 0 var(--msl-space-sm) 0;
  border-bottom: 2px solid var(--msl-color-acacia-bark);
  margin-bottom: var(--msl-space-sm);
}

/* Accordion Open State */
.msl-rates--mobile .msl-rates__item.is-open {
  grid-template-rows: auto 1fr;
  margin-block-end: var(--msl-space-md);
}

/* Accordion Header (The always-visible row) */
.msl-rates__accordion-header {
  font-family: var(--msl-font-heading);
  font-size: 1rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  cursor: pointer;
  padding: 11px 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  color: var(--msl-color-river-clay);
  background-color: transparent;
  transition:
    color 0.4s ease-in-out,
    background-color 0.4s ease-in-out;
  position: relative;
  z-index: 2;
}

/* Accordion Header Styling */
.msl-rates__accordion-header:hover,
.msl-rates--mobile .msl-rates__item.is-open .msl-rates__accordion-header {
  color: var(--msl-color-sunset-ember);
  background-color: rgba(212, 204, 193, 0.27);
  border-bottom-color: transparent;
}

.msl-rates--mobile .msl-rates__item.is-open .msl-rates__accordion-header {
  border-bottom: 1px solid var(--msl-color-elephant-dust);
}

/* Accordion Content (The hidden, collapsible section) */
.msl-rates__accordion-content {
  overflow: hidden;
  min-height: 0;
  padding-inline: var(--msl-space-sm);
  position: relative;
  z-index: 1;
}

/* Data Cell Container (msl-rates__cell) - Label/Value Pair on Mobile */
.msl-rates--mobile .msl-rates__cell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--msl-color-elephant-dust);
  font-size: 0.85rem;
}

/* Last Cell Border Reset */
.msl-rates__accordion-content .msl-rates__cell:last-child {
  border-bottom: none;
}

/* Toggle Icon (The plus/minus symbol) */
.msl-rates__toggle-icon {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-left: 0;
  order: -1;
}
.msl-rates__toggle-icon::before,
.msl-rates__toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--msl-color-acacia-bark);
  transition: transform 0.3s ease-out;
}
.msl-rates__toggle-icon::before {
  width: 1px;
  height: 100%;
  transform: translate(-50%, -50%);
}
.msl-rates__toggle-icon::after {
  width: 100%;
  height: 1px;
  transform: translate(-50%, -50%);
}

/* Toggle Icon: Rotate vertical bar on open to form an 'X' */
.msl-rates--mobile .msl-rates__item.is-open .msl-rates__toggle-icon::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

/*  Hide empty cells on mobile only */
@media (max-width: 63.999em) {
  .msl-rates--mobile .msl-rates__cell:has(.msl-rates__cell-value:empty) {
    display: none;
  }
}

/* Add border to accordion content panel */
.msl-rates--mobile .msl-rates__item.is-open .msl-rates__accordion-content {
  border-top: none;
}

/* BEM ELEMENTS: Label and Value Styling (Mobile) */
.msl-rates--mobile .msl-rates__cell-label {
  font-weight: 600;
  color: var(--msl-color-river-clay);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}
.msl-rates--mobile .msl-rates__cell-value {
  text-align: right;
  color: var(--msl-color-buffalo-hide);
}

/* --- Desktop Overrides (min-width: 64em) --- */

@media (min-width: 64em) {
  .msl-rates--mobile {
    display: none;
  }
  .msl-rates--desktop {
    display: block;
  }
  .msl-rates__header-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.75rem var(--msl-space-sm);
    border-bottom: 1px solid var(--msl-color-elephant-dust-50);
    background: var(--msl-color-elephant-dust-50);
    font-family: var(--msl-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .msl-rates__header-cell {
    padding-inline: 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    border-right: 1px solid rgba(171, 158, 148, 0.15);
  }

  /* Data Row Item: Flex Row Reset */
  .msl-rates--desktop .msl-rates__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--msl-color-elephant-dust);
    margin-block-end: 0;
    padding: 0.75rem var(--msl-space-sm);
    line-height: 2.5rem;
    background: transparent;
  }

  /* Zebra Striping */
  .msl-rates--desktop .msl-rates__item:nth-child(odd) {
    background: rgba(237, 227, 215, 0.15);
  }
  /* Data Cell: Reset for Table Columns */
  .msl-rates--desktop .msl-rates__cell {
    display: block;
    padding-inline: 0.5rem;
    border-bottom: none;
    border-right: 1px solid rgba(171, 158, 148, 0.15);
    font-size: 0.8rem;
    text-align: center;
  }
  .msl-rates--desktop .msl-rates__cell-label {
    display: none;
  }
  .msl-rates--desktop .msl-rates__cell-value {
    text-align: center;
  }

  /* --- DYNAMIC COLUMN WIDTHS (Final Adjustments for Even Spacing) ---*/

  /* The core dynamic rule applies to all header and data cells */
  .msl-rates__header-row--10-cols > .msl-rates__header-cell,
  .msl-rates--desktop .msl-rates__item--10-cols > .msl-rates__cell,
  .msl-rates__header-row--9-cols > .msl-rates__header-cell,
  .msl-rates--desktop .msl-rates__item--9-cols > .msl-rates__cell,
  .msl-rates__header-row--8-cols > .msl-rates__header-cell,
  .msl-rates--desktop .msl-rates__item--8-cols > .msl-rates__cell,
  .msl-rates__header-row--7-cols > .msl-rates__header-cell,
  .msl-rates--desktop .msl-rates__item--7-cols > .msl-rates__cell,
  .msl-rates__header-row--6-cols > .msl-rates__header-cell,
  .msl-rates--desktop .msl-rates__item--6-cols > .msl-rates__cell,
  .msl-rates__header-row--5-cols > .msl-rates__header-cell,
  .msl-rates--desktop .msl-rates__item--5-cols > .msl-rates__cell,
  .msl-rates__header-row--4-cols > .msl-rates__header-cell,
  .msl-rates--desktop .msl-rates__item--4-cols > .msl-rates__cell {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Tighter Overrides for fixed-width columns (Promo Tag is the only necessary override) */

  .msl-rates__header-row > .msl-rates__header-cell:last-child,
  .msl-rates--desktop .msl-rates__item > .msl-rates__cell:last-child {
    text-align: center;
    border-right: none;
  }
}

/* 
--------------------------------------------------------------------------
 * TESTIMONIAL CARD 
-------------------------------------------------------------------------- 
*/

/* --- BLOCK BASE - MODULE CONTAINER --- */
.msl-testimonial-module-wrapper {
  position: relative;
  width: 100%;
}

/* --- BLOCK BASE - SCROLLER CONTAINER --- */
.msl-layout__testimonial-scroller {
  position: relative;
  width: 100%;
  padding-block: var(--msl-space-lg);
  padding-inline: 0;
  overflow: hidden;
}

@media (min-width: 64em) {
  .msl-layout__testimonial-scroller {
    padding-inline: var(--msl-space-md);
  }
}

/* --- ELEMENT - CARD CONTAINER --- */
.msl-layout__testimonial-card {
  position: relative;
  height: auto;
  min-height: auto;
  width: 100%;
  max-width: 750px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-inline: auto;
  text-align: center;
  padding: var(--msl-space-lg) var(--msl-space-md);
}

/* --- ELEMENT - IMAGE ABOVE REVIEW --- */
.msl-layout__testimonial-accent-image {
  display: block;
  object-fit: contain;
  width: 80px;
  height: 80px;
  opacity: 0.7;
  margin-block-end: 0.5rem;
}

/* --- ELEMENT - REVIEW TEXT --- */
.msl-layout__testimonial-review {
  font-family: var(--msl-font-body);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--msl-color-kalahari-mist);
  max-width: 60ch; /* Ensure readability */
  margin-inline: auto;
  min-height: auto;
  height: auto;
}

/* ---  ELEMENT - STAR RATING --- */
.msl-layout__testimonial-rating {
  margin-block-end: 0.5rem;
}
.msl-testimonial-star-svg {
  width: 80px;
  height: auto;
}

/* --- ELEMENT - REVIEWER NAME/SOURCE --- */
.msl-layout__testimonial-name {
  font-family: var(--msl-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--msl-color-acacia-bark);
}

/* --- PAGINATION DOTS STYLING  --- */

/* Inactive Dots: Acacia Bark */
.msl-layout__testimonial-scroller .swiper-pagination-bullet {
  background: var(--msl-color-acacia-bark);
  opacity: 1; /* Ensure all dots are visible, not just based on Swiper's default opacity */
  width: 10px; /* Standardize size for consistency */
  height: 10px;
}

/* Active/Selected Dot: River Clay */
.msl-layout__testimonial-scroller .swiper-pagination-bullet-active {
  background: var(--msl-color-sunset-ember);
}

/* --- NAVIGATION ARROWS STYLING (Ember) --- */

/* Target both Previous and Next buttons */
.msl-testimonial-module-wrapper .swiper-button-next,
.msl-testimonial-module-wrapper .swiper-button-prev {
  color: var(--msl-color-acacia-bark);
  transition: color 0.3s ease-in-out;
  top: 50%;
  transform: translateY(-50%);
  margin-inline: 5px;
  margin-top: 0;
  z-index: 50;
}

.msl-testimonial-module-wrapper .swiper-button-prev {
  left: 0;
}

.msl-testimonial-module-wrapper .swiper-button-next {
  right: 0;
}

.msl-testimonial-module-wrapper .swiper-button-next:after,
.msl-testimonial-module-wrapper .swiper-button-prev:after {
  font-size: 24px;
}

.msl-testimonial-module-wrapper .swiper-button-next:hover,
.msl-testimonial-module-wrapper .swiper-button-prev:hover {
  color: var(--msl-color-sunset-ember);
}

/* --- SWIPER LAYOUT OVERRIDES --- */
@media (min-width: 64em) {
  .msl-layout__testimonial-card {
    max-width: 750px;
  }

  .msl-layout__testimonial-accent-image {
    width: 85px;
    height: 85px;
  }

  .msl-layout__testimonial-review {
    font-size: 1.25rem;
  }

  .msl-testimonial-module-wrapper .swiper-button-next,
  .msl-testimonial-module-wrapper .swiper-button-prev {
    width: 2rem;
    height: 2rem;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-inline: 0;
  }

  .msl-testimonial-module-wrapper .swiper-button-next:after,
  .msl-testimonial-module-wrapper .swiper-button-prev:after {
    font-size: 32px;
  }
}

/* 
--------------------------------------------------------------------------
 * PROMO CARD BOX
-------------------------------------------------------------------------- 
*/
.msl-layout__promo-wrapper {
  padding-block-start: var(--msl-space-md);
}

.msl-layout__promo-wrapper h3 {
  margin-block-end: 0;
}

.msl-layout__promo-wrapper .msl-layout__testimonial-scroller {
  padding-block-start: 0;
}

.msl-layout__promo-card {
  width: 100%;
  max-width: 350px;
  min-height: 250px;
  margin: var(--msl-space-lg) auto;
  padding: 0;
  background: var(--msl-color-kalahari-mist);
  border: 1px solid var(--msl-color-acacia-bark);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* --- Header/Visual Area (Top/Left Block) --- */
.msl-layout__promo-card-header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  flex: 1 1 100%;
  min-height: 250px;
  background: #fafaf7;
  background-size: cover;
  text-align: center;
  padding: var(--msl-space-md) var(--msl-space-sm);
  border-bottom: 1px solid var(--msl-color-acacia-bark);
}

.msl-layout__promo-card-header > * {
  position: relative;
  z-index: 2; /* Ensures ALL direct children (h6, p, button) are above the overlay */
}

.msl-layout__promo-card-header--overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 1; /* Puts the overlay between the header content (z-index: 2) and the header element (z-index: 0/1) */
}

.msl-layout__promo-card-header--pay3-stay4 {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Lelapa-2.jpeg");
}

.msl-layout__promo-card-header--honeymoon {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Outdoors-meal-cheers.jpeg");
}

.msl-layout__promo-card-header--returning-guests {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/Lelapa-8-scaled.jpg");
}

.msl-layout__promo-card-title {
  font-family: var(--msl-font-heading);
  font-size: 1.6rem;
  margin-block: 0;
  color: var(--msl-color-kalahari-mist);
}

.msl-layout__promo-card-subtitle {
  font-size: 1rem;
  color: var(--msl-color-elephant-dust);
  margin: 0;
  font-family: var(--msl-font-body);
}

/* --- Content Block (Bottom/Right Block) --- */
.msl-layout__promo-card-content {
  background: var(--msl-color-elephant-dust);
  padding: var(--msl-space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  /* Ensure it fills the width on mobile */
  flex: 1 1 100%;
}

/* --- Data Point Layout and Styling (Unchanged) --- */
.msl-layout__promo-card-data-point {
  display: flex;
  justify-content: center;
  align-items: baseline;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  padding-block-end: 0.5rem;
}

.msl-layout__promo-card-label,
.msl-layout__promo-card-value--price {
  font-family: var(--msl-font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--msl-color-river-clay);
  text-transform: uppercase;
}

.msl-layout__promo-card-value,
.msl-layout__promo-card-details {
  font-family: var(--msl-font-body);
  font-size: 0.95rem;
  font-weight: 400;
  text-align: center;
  color: var(--msl-color-buffalo-hide);
}

.msl-layout__promo-card-label {
  padding-inline-end: 0.5rem;
}

.msl-layout__promo-card-footer {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.5rem;
  margin-block-start: 1rem;
}

.msl-layout__promo-card-value--price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--msl-color-twilight-soil);
}

.msl-layout__promo-card-value--price-note {
  font-size: 0.75rem;
  color: var(--msl-color-river-clay);
}

.msl-layout__promo--trigger {
  align-self: center;
}

/* --- DESKTOP ENHANCEMENTS (min-width: 64em) --- */

@media (min-width: 64em) {
  /* DESKTOP: Switch from column to row structure */
  .msl-layout__promo-card {
    flex-direction: row;
    /* Allow the card to breathe on larger screens */
    max-width: 900px;
    min-height: 450px;
  }

  /* Assign the 40/60 width split */
  .msl-layout__promo-card-header {
    flex: 1 1 40%;
    border-bottom: none; /* Remove mobile bottom border */
    border-right: 1px solid var(--msl-color-acacia-bark); /* Add vertical divider */
  }

  .msl-layout__promo-card-content {
    flex: 1 1 60%;
    /* Add left padding to separate from the new vertical divider */
    padding-inline-start: var(--msl-space-md);
  }

  .msl-layout__promo-card-details {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
 *  PERSON CARD BLOCK (msl-person-card)
 * -------------------------------------------------------------------------- */

.msl-person-card {
  min-width: 300px;
  max-width: 500px;
  min-height: 400px;
  margin: var(--msl-space-md, auto);
  padding: 0;

  overflow: visible;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* --- IMAGE WRAPPER --- */
.msl-person-card__image-wrapper {
  width: 100%;
  min-height: 33vh;
  /*max-height: 250px;*/
  overflow: visible;
  position: relative;
  background: var(--msl-color-elephant-dust);
  border-radius: 500px 500px 0 0;
  padding-bottom: 0;
  z-index: 5;
}

/* --- IMAGE --- */
.msl-person-card__image,
.msl-person-card__image--alpha {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: visible;
  transform: translate(-50%, 0);
  transition: transform 0.8s ease-in-out;
  will-change: transform;
}

.msl-person-card:hover .msl-person-card__image,
.msl-person-card:hover .msl-person-card__image--alpha {
  transform: scale(1.02) translate(-48%, -10px);
  z-index: 6;
}
.msl-person-card__hover-mask {
  position: absolute;
  bottom: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background-color: var(--msl-color-kalahari-mist);
  z-index: 10;
}

/* --- CONTENT & TEXT ELEMENTS --- */
.msl-person-card__content {
  position: relative;
  padding: var(--msl-space-md);
  padding-top: 2rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.msl-person-card__name {
  font-family: var(--msl-font-heading);
  font-size: 1.3rem;
}

.msl-person-card__name h3 {
  margin-block: 0;
}

/* --- Team Focus Tags --- */
.msl-person-card__tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center tags on mobile */
  gap: 0.5rem;
  padding-block: 0;
}

.msl-person-card__tag {
  /* CI-inspired Pill/Chip Aesthetic */
  padding: 0.25rem 0.6rem;
  font-family: var(--msl-font-body);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--msl-color-kalahari-mist);
  background: var(--msl-color-twilight-soil);
  border-radius: 10px;
}

.msl-person-card__role {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--msl-color-wild-fig);
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.msl-person-card__bio {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-block-end: 0;
}

.msl-person-card__details-trigger {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  background-color: transparent;
  color: var(--msl-color-buffalo-hide);
  min-width: 8vw;
  border: none;
  font-family: Ivymode;
  font-size: 0.65rem;
  letter-spacing: 0.1rem;
  font-weight: 200;
  text-transform: uppercase;
}

/* --- PERSON CARD: EXTENDED DATA & TAGS --- */

/* --- Hidden Details Block --- */

.msl-person-card__details {
  /* --- STRUCTURAL SETUP --- */
  position: static;
  display: flex; /* Must be flex or block, never none */
  flex-direction: column;
  gap: 0.75rem;
  /* --- HIDDEN STATE FOR GSAP --- */
  height: 0;
  opacity: 0;
  transition: none;
  will-change: auto;
  padding-block: 0;
}

/* --- Data Grid (For future use in modal) --- */
.msl-person-card__data-grid {
  /* MOBILE-FIRST: Simple vertical stack with dividers */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1rem;
  border-top: 1px dashed var(--msl-color-acacia-bark);
  border-bottom: 1px dashed var(--msl-color-acacia-bark);
  text-align: left;
}

.msl-person-card__data-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.msl-person-card__data-label {
  flex-shrink: 0;
  margin-right: 0.9rem;
  font-size: 0.85rem;
}
.msl-person-card__data-value {
  font-size: 0.85rem;
  text-align: center;
  flex-grow: 1;
}

/* --- Responsive Breakpoint --- */
@media (min-width: 64em) {
  .msl-person-card__data-grid {
    /* Switch to a two-column grid on desktop */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
  }

  .msl-person-card__tag-list {
    justify-content: flex-start; /* Left-align tags on desktop */
  }
}

/* 
--------------------------------------------------------------------------
 * SPOOR TRACKER (spoor-container)
-------------------------------------------------------------------------- 
*/

.spoor-container {
  position: absolute;
  left: 0;
  width: 90%;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  --foot-fill-colour: var(--msl-color-buffalo-hide);
}

/* ABSOLUTE CENTERING FOR THE GUIDE LINE (SVG CONTAINER) */
.spoor-path-svg {
  position: absolute;
  top: 0;
  left: 50%; /* Start the container at the horizontal centre */
  width: 100%;
  height: 100%;
  /* Shift the container left by half its size to align the 500-unit path to the viewport center */
  transform: translateX(-50%);
}

/* BEM ELEMENT: INDIVIDUAL FOOTPRINT */
.spoor-container__foot {
  position: absolute;
  opacity: 0;
  width: 80px;
  height: 80px;
  transform-origin: 50% 50%;
  border-radius: 17%;
}

/* Explicitly target all inner paths and use the CSS Variable */
.spoor-container__foot path {
  fill: var(--foot-fill-colour);
}

/* DEBUG LINE: Make the path visible for this test - REMOVE IN FINAL BUILD */
.spoor-path-svg path {
  stroke: rgba(108, 62, 73, 0);
}

/* 
--------------------------------------------------------------------------
 * FULL SLIDER CAPTION UTILITY
-------------------------------------------------------------------------- 
*/

.msl-utility-full-scroller .swiper-slide-inner {
  align-items: flex-end;
}

.wp-block-greenshift-blocks-swipe .slider-content-zone {
  position: relative;
  height: 100%;
  min-height: 100%;
}

/* MAIN UTILITY BLOCK: Positioning and Full Width */
.msl-utility-full-scroller-caption {
  margin-bottom: 50px;
  width: 90vw;
  z-index: 5;
  background-color: var(--msl-color-buffalo-hide-85);
  border-left: 2px solid var(--msl-color-sunset-ember);
}

/* INNER CONTENT ELEMENT: Constraint and Styling */
.msl-utility-full-scroller-caption__content {
  color: var(--msl-color-kalahari-mist);
  text-align: center;
  font-family: var(--msl-font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  padding-block: var(--msl-space-sm);
  padding-inline: var(--msl-space-md);
}

.msl-utility-full-scroller-caption__content h2,
.msl-utility-full-scroller-caption__content h3,
.msl-utility-full-scroller-caption__content h4,
.msl-utility-full-scroller-caption__content h5,
.msl-utility-full-scroller-caption__content h6 {
  font-family: var(--msl-font-heading);
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  margin-block: 1rem;
  font-size: 1rem;
}

.msl-utility-full-scroller-caption__content p {
  margin-block-end: 0;
  font-size: 0.75rem;
}

/* Responsive Padding */
@media (min-width: 64em) {
  .msl-utility-full-scroller-caption {
    margin-bottom: 60px;
    width: 70vw;
  }

  .msl-utility-full-scroller-caption__content {
    padding-block: var(--msl-space-md);
  }

  .msl-utility-full-scroller-caption__content h2,
  .msl-utility-full-scroller-caption__content h3,
  .msl-utility-full-scroller-caption__content h4,
  .msl-utility-full-scroller-caption__content h5,
  .msl-utility-full-scroller-caption__content h6 {
    font-size: 1.2rem;
  }
  .msl-utility-full-scroller-caption__content p {
    font-size: 1rem;
  }
}

/* 
--------------------------------------------------------------------------
 * SMALL SLIDER CAPTION UTILITY
-------------------------------------------------------------------------- 
*/

/* MAIN UTILITY BLOCK: Positioning and Full Width */
.msl-utility-small-scroller-caption {
  width: fit-content;
  max-width: 95%;
  margin: 0 auto;
  z-index: 5;
  background-color: var(--msl-color-buffalo-hide-50);
  border-left: 2px solid var(--msl-color-sunset-ember);
}

/* INNER CONTENT ELEMENT: Constraint and Styling */
.msl-utility-small-scroller-caption__content {
  color: var(--msl-color-kalahari-mist);
  text-align: center;
  font-family: var(--msl-font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  padding-block: var(--msl-space-sm);
  padding-inline: var(--msl-space-md);
}

/* 
--------------------------------------------------------------------------
 * SCROLLER COMPONENTS
-------------------------------------------------------------------------- 
*/

/* The decision gate button holder (minimal styles for testing) */
.msl-ho-scroll-decision-gate {
  padding: 1rem;
  text-align: center;
}

@media (min-width: 64em) {
  .msl-ho-scroll-decision-gate {
    padding: 3rem;
  }
}

.msl-ho-scroll-decision-gate button {
  margin: 0.5rem;
  padding: 1rem 2rem;
  /* Add your msl-button__primary styling here */
}

.wp-block-post-content > .msl-utility__ho-scroll-wrapper.alignfull {
  /* Counteracts the inherited padding from its nearest padded parent: .entry-content */
  margin-inline: calc(-1 * var(--wp--style--root--padding-right)) !important;
  width: 100vw !important; /* Forces full viewport width */
  max-width: 100vw !important; /* Failsafe */
  height: 0;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.5s ease-in-out; /* For the smooth reveal */
}

.wp-block-post-content > .msl-utility__ho-scroll-wrapper.alignfull.is-active {
  height: auto;
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

.msl-utility__ho-scroll-container-default {
  min-height: 100vh;
  position: relative;
}

.msl-utility__ho-scroll-wrapper {
  overflow: visible;
  margin-top: 0;
  color: #ffffff;
}
.msl-utility__ho-scroll-wrapper.is-active {
  display: block;
}

.msl-utility__ho-scroll-pinned-area {
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 0;
  overflow-x: clip;
}

.msl-utility__ho-scroll-content-area {
  height: 100vh;
  width: max-content;
  position: sticky;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--msl-color-acacia-bark);
  padding-left: 0;
  padding-right: 0;
  column-gap: 0;
  white-space: nowrap;
}

.msl-utility__ho-scroll-content-area > div {
  min-width: 100vw;
  width: 100vw;
  flex-shrink: 0;
}

.msl-utility__ho-scroll-container,
.msl-utility__ho-scroll-container-centred {
  position: relative;
  min-height: 100vh;
  padding-top: 2rem;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.msl-utility__ho-scroll-container {
  justify-content: space-evenly;
}

.msl-utility__ho-scroll-container-centred {
  justify-content: center;
}

@media (min-width: 64em) {
  .msl-utility__ho-scroll-container,
  .msl-utility__ho-scroll-container-centred {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.msl-utility__ho-scroll-container-centred .msl-utility__ho-scroll-leader-text-container {
  border-top: none;
}

.msl-utility__ho-scroll-leader-text-container {
  border-top: 1px solid var(--msl-color-acacia-bark);
  border-bottom: 1px solid var(--msl-color-acacia-bark);
  padding-block: var(--msl-space-sm);
}

.msl-utility__ho-scroll-leader-header,
.msl-utility__ho-scroll-leader-text {
  font-weight: 300;
}

.msl-utility__ho-scroll-icon {
  width: 30vw;
}
@media (min-width: 64em) {
  .msl-utility__ho-scroll-icon {
    width: 25vw;
  }
}

.msl-utility__ho-scroll-icon-small {
  width: 15vw;
}
@media (min-width: 64em) {
  .msl-utility__ho-scroll-icon-small {
    width: 8vw;
  }
}

/* Inner container fancy */
.msl-utility__ho-scroll-inner-container {
  position: absolute;
  top: unset;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--msl-color-buffalo-hide-50);
  border-left: 6px solid var(--msl-color-sunset-ember);
  padding: var(--msl-space-md);
  min-height: 100px;
}

@media (min-width: 64em) {
  .msl-utility__ho-scroll-inner-container {
    top: unset;
    bottom: 100px;
    left: 50px;
    transform: translate(0%, 0%);
    width: fit-content;
    transition: transform 1s ease-in-out;
  }
}

.msl-utility__ho-scroll-inner-container-icon {
  width: 36px;
  height: auto;
}

.msl-utility__ho-scroll-inner-container-text {
  font-family: var(--msl-font-heading);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.3rem;
  text-transform: uppercase;
  color: var(--msl-color-kalahari-mist);
  text-align: center;
  text-wrap: auto;
}

.msl-utility__ho-scroll-inner-container-subtext {
  font-family: var(--msl-font-body);
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.1rem;
  color: var(--msl-color-kalahari-mist);
  text-align: center;
  text-wrap: auto;
}

.msl-utility__ho-scroll-inner-container .msl-button__primary {
  white-space: normal;
  max-width: 100%;
  height: auto;
  word-break: break-word;
}

/* Inner container caption style */
.msl-utility__ho-scroll-inner-container-caption {
  position: absolute;
  top: unset;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100px;
  width: 90vw;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--msl-color-buffalo-hide-50);
  border-left: 2px solid var(--msl-color-sunset-ember);
  padding: var(--msl-space-sm);
}

@media (min-width: 64em) {
  .msl-utility__ho-scroll-inner-container-caption {
    width: 80vw;
    transition: transform 1s ease-in-out;
  }
  .msl-utility__ho-scroll-inner-container-text {
    font-size: 1.2rem;
  }
  .msl-utility__ho-scroll-inner-container-subtext {
    font-size: 1rem;
  }
}

.msl-utility__ho-scroll-text {
  max-width: 30ch;
  color: var(--msl-color-elephant-dust);
  position: relative;
  text-wrap: auto;
}

@media (min-width: 64em) {
  .msl-utility__ho-scroll-text {
    max-width: 100%;
  }
}

.msl-utility__ho-scroll-img {
  width: 150vw;
  max-width: 100%;
  height: 100vh;
  object-fit: cover;
  /*object-position: 60% 50%;*/
}

@media (min-width: 64em) {
  .msl-utility__ho-scroll-img {
    width: 100vw;
  }
}

.msl-utility__ho-scroll-video {
  width: 100vw;
}
@media (min-width: 64em) {
  .msl-utility__ho-scroll-video {
    max-width: 100%;
  }
}

/* --- Ho-scroll mini-nav --- */

.msl-ho-scroll-nav {
  /* Fixed position and full width at the bottom of the viewport */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 70px;
  z-index: 1000; /* Must be above everything else (your main nav is 100) */

  /* Visual Styling */
  background-color: var(--msl-color-kalahari-mist);

  /* Flexbox for even spacing of the 5 links */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;

  /* Initial HIDDEN state for GSAP animation */
  opacity: 0;
  transform: translateY(100%);
  will-change: transform, opacity;

  /* Default transition (for non-JS fallback) */
  transition:
    transform 0.5s ease-in-out,
    opacity 0.5s ease-in-out;
}

.msl-ho-scroll-nav__link {
  /* Styling for the text links */
  font-family: var(--msl-font-body);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--msl-color-buffalo-hide);
  text-decoration: none;
  padding: 0 0.5rem;
  transition: color 0.3s var(--msl-ease-in-out);
}

.msl-ho-scroll-nav__link:hover {
  color: var(--msl-color-wild-fig);
}

/* 
--------------------------------------------------------------------------
 * AUDIO COMPONENT & TOGGLE
-------------------------------------------------------------------------- 
*/

/* 
--------------------------------------------------------------------------
 * AUDIO GUIDE WRAPPER (No-Impact Container)
-------------------------------------------------------------------------- 
*/
.msl-audio-wrapper {
  /* Ensures the wrapper occupies space but does not alter content flow */
  position: relative;
  height: auto;

  /* Resets all box model properties to zero/default */
  margin: 0;
  padding: 0;
  border: none;

  /* Ensures children's inherited properties are not affected */
  background: transparent;
  box-shadow: none;

  /* Defensive: Resets any potential parent-inherited flex/grid context */
  display: block;
  box-sizing: border-box;

  overflow: hidden;
}

/* Container: hidden by default, shown via .is-active */
.msl-audio-prompt-lockup {
  position: fixed;
  top: 66vh;
  right: 2rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;

  /* Hidden by default (JS toggles .is-active) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.8s ease-in-out,
    transform 0.8s ease-in-out,
    visibility 0s linear 0.8s;
}

/* Visible state */
.msl-audio-prompt-lockup.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Button base - DEFAULT background is KALAHARI (visible but not live) */
.msl-audio-toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--msl-color-acacia-bark);
  background-color: var(--msl-color-kalahari-mist); /* default (Kalahari) */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition:
    background-color 0.6s ease-in-out,
    border-color 0.6s ease-in-out,
    transform 0.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

.msl-audio-toggle:active {
  transform: scale(0.98);
}

/* SVG icons overlap & centred */
.msl-audio-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  pointer-events: none;
  transition:
    opacity 0.25s ease-in-out,
    color 0.45s ease-in-out;
  color: var(--msl-color-buffalo-hide);
  fill: currentColor;
}

/* Label */
.msl-audio-prompt-lockup__label {
  font-family: var(--msl-font-body);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  transition: color 0.6s ease-in-out;
  white-space: nowrap;
  margin-top: 0.25rem;
  color: var(--msl-color-river-clay); /* default label colour */
}

/* Hover emphasis */
.msl-audio-prompt-lockup:hover .msl-audio-toggle {
  border-color: var(--msl-color-wild-fig);
}
.msl-audio-prompt-lockup:hover .msl-audio-toggle svg {
  color: var(--msl-color-wild-fig);
}
.msl-audio-prompt-lockup:hover .msl-audio-prompt-lockup__label {
  color: var(--msl-color-wild-fig);
}

/* ACTIVE & LIVE state: only when lockup has both .is-active AND .is-live
   (JS will add .is-live when audio has actually been started/unmuted) */
.msl-audio-prompt-lockup.is-active.is-live .msl-audio-toggle {
  background-color: var(--msl-color-twilight-soil);
  border-color: var(--msl-color-acacia-bark);
}
.msl-audio-prompt-lockup.is-active.is-live .msl-audio-toggle svg {
  color: var(--msl-color-acacia-bark);
  fill: currentColor;
}
.msl-audio-prompt-lockup.is-active.is-live .msl-audio-prompt-lockup__label {
  color: var(--msl-color-acacia-bark);
}

/* PAUSED / MUTED while active+live: elephant dust background, wild fig icon/label */
.msl-audio-prompt-lockup.is-active.is-live .msl-audio-toggle.is-muted {
  background-color: var(--msl-color-elephant-dust);
  border-color: var(--msl-color-wild-fig);
}
.msl-audio-prompt-lockup.is-active.is-live .msl-audio-toggle.is-muted svg {
  color: var(--msl-color-wild-fig);
}
.msl-audio-prompt-lockup.is-active.is-live .msl-audio-toggle.is-muted + .msl-audio-prompt-lockup__label,
.msl-audio-prompt-lockup.is-active.is-live .msl-audio-toggle.is-muted ~ .msl-audio-prompt-lockup__label {
  color: var(--msl-color-wild-fig);
}

/* Icon visibility keyed to .is-muted */
.msl-audio-toggle.is-muted .msl-audio-toggle__icon--off {
  opacity: 1;
}
.msl-audio-toggle.is-muted .msl-audio-toggle__icon--on {
  opacity: 0;
}

.msl-audio-toggle:not(.is-muted) .msl-audio-toggle__icon--on {
  opacity: 1;
}
.msl-audio-toggle:not(.is-muted) .msl-audio-toggle__icon--off {
  opacity: 0;
}

/* Accessibility focus */
.msl-audio-toggle:focus {
  outline: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04);
}

/* Responsive */
@media (max-width: 48em) {
  .msl-audio-prompt-lockup {
    top: 60vh;
    right: 1rem;
  }
  .msl-audio-toggle {
    width: 44px;
    height: 44px;
  }
  .msl-audio-toggle svg {
    width: 20px;
    height: 20px;
  }
  .msl-audio-prompt-lockup__label {
    font-size: 0.7rem;
  }
}

/* 
--------------------------------------------------------------------------
 * — WIP CURRENTLY INACTIVE  — WHO IT'S FOR LODGE BAR
-------------------------------------------------------------------------- 
*/

.msl-layout__who-its-for-container {
  position: relative;
  background-color: var(--msl-color-acacia-bark);
}

.msl-layout__who-its-for-inner-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  align-content: center;
  height: 120px;
}

@media (min-width: 64em) {
  .msl-layout__who-its-for-inner-container {
    flex-direction: row;
  }
}

.msl-layout__who-its-for-lockup {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 4px;
}
.msl-layout__who-its-for-lockup-text {
  font-size: var(--wp--preset--font-size--xs, 0.85rem);
  line-height: var(--wp--custom--line-height--xs, 1.15rem);
  font-family: var(--msl-font-body);
  text-transform: uppercase;
}

.msl-layout__who-its-for-title {
  font-size: var(--wp--preset--font-size--s, 1rem);
  line-height: var(--wp--custom--line-height--s, 1.4rem);
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--msl-font-heading);
  letter-spacing: 0.1;
  color: #b7a89c;
}

.msl-layout__header-inset {
  padding-inline: var(--msl-space-md);
  padding-block: var(--msl-space-sm);
  z-index: 10;
}

/* 
--------------------------------------------------------------------------
 * — WIP CURRENTLY INACTIVE — CONTAINER BOTTOM BAR ICONS
-------------------------------------------------------------------------- 
*/

.msl-layout__container-bottom-bar {
  position: static;
  width: 100%;
  padding-inline: var(--msl-space-md);
  margin-block-start: 0;
  box-sizing: border-box;
  z-index: auto; /* Reset z-index for inline flow */
}

@media (min-width: 64em) {
  .msl-layout__container-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10; /* Ensure it sits above background elements */
    padding-inline: var(--msl-space-md);
    padding-block: var(--msl-space-sm);
    margin-block-start: 0;
    box-sizing: border-box; /* Crucial for padding not to exceed 100% width */
  }
}

/* 2. Style the Content inside it (Ensuring it is visually appealing) */
.msl-layout__container-bottom-bar .msl-layout__feature-icons {
  max-width: var(--msl-utility--max-1200, 1200px); /* Constrain the icons bar width */
  margin-inline: auto; /* Centre the icons bar */
  padding: 0;
}

/* ==========================================================================
 * MSL CURRENCY TOGGLE PILL
 * Add this snippet to style.css under Section 5.0 COMPONENTS
 * Scope: .msl-currency-toggle — tightly namespaced, no bleed risk
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * CURRENCY TOGGLE — WRAPPER
 * -------------------------------------------------------------------------- */

.msl-currency-toggle {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 0;
  margin-bottom: var(--msl-space-sm);

  /* Pill container */
  border: 1px solid var(--msl-color-elephant-dust);
  border-radius: 5px;
  padding: 8px;
  width: fit-content;
}

/* --------------------------------------------------------------------------
 * CURRENCY TOGGLE — BUTTONS
 * -------------------------------------------------------------------------- */

.msl-currency-toggle__btn {
  /* Reset */
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;

  /* Sizing */
  padding: 0.35rem 0.85rem;
  border-radius: 100px;

  /* Typography */
  font-family: var(--msl-font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--msl-color-river-clay);

  /* Transition */
  transition:
    background-color var(--msl-transition-duration-fast) var(--msl-transition-function),
    color var(--msl-transition-duration-fast) var(--msl-transition-function);
}

.msl-currency-toggle__btn:hover:not(.is-active) {
  color: var(--msl-color-buffalo-hide);
}

/* Active state */
.msl-currency-toggle__btn.is-active {
  background: var(--msl-color-wild-fig);
  color: var(--msl-color-kalahari-mist);
}

/* --------------------------------------------------------------------------
 * CURRENCY TOGGLE — DISCLAIMER
 * Rendered as a <span> injected by the JS alongside the pill buttons.
 * -------------------------------------------------------------------------- */

.msl-currency-toggle__disclaimer {
  display: block;
  justify-self: center;
  font-family: var(--msl-font-body);
  font-size: 0.6rem;
  font-style: italic;
  color: var(--msl-color-acacia-bark);
  margin-left: 0.75rem;
  margin-block-end: 0.75rem;
  max-width: 60ch;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
 * RESPONSIVE — Stack pill below sm if needed
 * -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  .msl-currency-toggle {
    flex-wrap: wrap;
  }
}

@media (min-width: 64em) {
  .msl-currency-toggle,
  .msl-currency-toggle__disclaimer {
    justify-self: end;
  }
}

/* ==========================================================================
 * MSL LODGE FROM RATES
 * Scope: .msl-from-rates — tightly namespaced
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * WRAPPER
 * -------------------------------------------------------------------------- */

.msl-from-rates {
  margin-bottom: var(--msl-space-md);
}

/* --------------------------------------------------------------------------
 * GRID — four lodges in a row, wraps gracefully on mobile
 * -------------------------------------------------------------------------- */

.msl-from-rates__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px; /* hairline dividers via gap on a coloured parent */
  background: var(--msl-color-elephant-dust);
  border: 1px solid var(--msl-color-elephant-dust);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
  .msl-from-rates__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
 * ITEM — individual lodge cell
 * -------------------------------------------------------------------------- */

.msl-from-rates__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: var(--msl-color-kalahari-mist);
}

/* --------------------------------------------------------------------------
 * TYPOGRAPHY
 * -------------------------------------------------------------------------- */

.msl-from-rates__lodge-name {
  font-family: var(--msl-font-body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--msl-color-river-clay);
  white-space: nowrap;
}

.msl-from-rates__from-label {
  font-family: var(--msl-font-body);
  font-size: 0.65rem;
  font-style: italic;
  color: var(--msl-color-acacia-bark);
  line-height: 1;
}

.msl-from-rates__amount {
  font-family: var(--msl-font-heading);
  font-size: 1rem;
  color: var(--msl-color-buffalo-hide);
  line-height: 1.1;
}

.msl-from-rates__amount--unavailable {
  color: var(--msl-color-acacia-bark);
}

.msl-from-rates__note {
  font-family: var(--msl-font-body);
  font-size: 0.6rem;
  color: var(--msl-color-acacia-bark);
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
 * DISCLAIMER
 * -------------------------------------------------------------------------- */

.msl-from-rates__disclaimer {
  font-family: var(--msl-font-body);
  font-size: 0.65rem;
  font-style: italic;
  color: var(--msl-color-acacia-bark);
  margin: 0;
  line-height: 1.5;
}

.msl-from-rates__disclaimer-link {
  color: var(--msl-color-river-clay);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.msl-from-rates__disclaimer-link:hover {
  color: var(--msl-color-buffalo-hide);
}

/*
==========================================================================
6.0 UTILITY CLASSES
==========================================================================
*/

/* 
--------------------------------------------------------------------------
 * LAYOUT & ALIGNMENT
-------------------------------------------------------------------------- 
*/

/* --- Layout --- */
.msl-layout--relative {
  position: relative;
}

.msl-layout--flex-column {
  display: flex;
  flex-direction: column;
}

/* --- Alignment --- */
.msl-self--center {
  align-self: center;
  justify-self: center;
}

.msl-children--center {
  align-items: center;
  align-content: center;
  justify-content: center;
}

.msl-align--start {
  align-items: flex-start;
}

.msl-justify--start {
  justify-items: flex-start;
  justify-content: flex-start;
  justify-self: start;
}

.msl-justify--end {
  justify-items: flex-end;
  justify-content: flex-end;
  justify-self: end;
}

.msl-text--align-left {
  text-align: left;
}

.msl-text--align-center {
  text-align: center;
}

@media (min-width: 64em) {
  .msl-text--align-right {
    text-align: right;
  }
}

@media (min-width: 64em) {
  .msl-layout--sticky {
    position: sticky;
    top: 0;
  }
  .msl-layout--sticky-content-2rem {
    top: 2rem;
  }
}

/* 
--------------------------------------------------------------------------
 * SIZING
-------------------------------------------------------------------------- 
*/

/* --- Height --- */
.msl-height--100vh {
  min-height: fit-content;
  padding-block: 4rem;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

@media (min-width: 64em) {
  .msl-height--100vh {
    min-height: 100vh;
    padding-block: revert;
  }
  /* --- Height --- */
  .msl-height--50vh {
    min-height: 50vh;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
  }
}

/* 
--------------------------------------------------------------------------
 * SPACING
-------------------------------------------------------------------------- 
*/

/* --- Padding --- */
.msl-spacing--header-clear {
  padding-block-start: var(--msl-mobile-nav-height);
}

.msl-spacing--footer-clear {
  padding-block-end: 70px;
}

@media (min-width: 64em) {
  .msl-spacing--footer-clear {
    padding-block-end: 0;
  }
}

@media (min-width: 75em) {
  .msl-spacing--sidebar-left-clear {
    padding-left: var(--msl-sidebar-width);
  }
}
@media (min-width: 75em) {
  .msl-spacing--sidebar-right-clear {
    padding-right: var(--msl-sidebar-width);
  }
}

.msl-utility__padding-top-bottom-6-4 {
  padding-block-start: 4rem;
  padding-block-end: 4rem;
}
@media (min-width: 64em) {
  .msl-utility__padding-top-bottom-6-4 {
    padding-block-start: 6rem;
    padding-block-end: 6rem;
  }
}

/* Inline Padding */

.msl-utility__padding-inline--sm {
  padding-inline: var(--msl-space-sm);
}

.msl-utility__padding-inline--md {
  padding-inline: var(--msl-space-md);
}

.msl-utility__padding-inline--lg {
  padding-inline: var(--msl-space-lg);
}

/* Block Padding */

.msl-utility__padding-block-sm {
  padding-block: var(--msl-space-sm);
}

.msl-utility__padding-block--md {
  padding-block: var(--msl-space-md);
}

.msl-utility__padding-block--lg {
  padding-block: var(--msl-space-lg);
}

.msl-utility__padding-block-start--sm {
  padding-block-start: var(--msl-space-sm);
}

.msl-utility__padding-block-start--md {
  padding-block-start: var(--msl-space-md);
}

.msl-utility__padding-block-start--lg {
  padding-block-start: var(--msl-space-lg);
}

.msl-utility__padding-block-end--sm {
  padding-block-end: var(--msl-space-sm);
}

.msl-utility__padding-block-end--md {
  padding-block-end: var(--msl-space-md);
}

.msl-utility__padding-block-end--lg {
  padding-block-end: var(--msl-space-lg);
}

.msl-utility__padding-block-clear {
  padding-block: 0;
}

.msl-utility__margin-block-clear {
  margin-block: 0;
}

/* FX Padding */

.msl-utility__padding-fx--20vh {
  padding-block-start: 20vh;
}

/* 
--------------------------------------------------------------------------
 * TYPOGRAPHY
-------------------------------------------------------------------------- 
*/
.msl-block-hero h1,
.msl-seo-hero h1 {
  font-size: 2.2rem;
}
.msl-block-hero h2,
.msl-seo-hero h2 {
  font-size: 1.2rem;
}

@media (min-width: 64em) {
  .msl-block-hero h1,
  .msl-seo-hero h1 {
    font-size: 3.2rem;
  }
  .msl-block-hero h2,
  .msl-seo-hero h2 {
    font-size: 1.2rem;
  }
}

.msl-typography--label {
  font-weight: 400;
  color: var(--msl-color-acacia-bark);
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.msl-typography--label-small {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--msl-color-river-clay);
}

.msl-typography--value-xs {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1rem;
}

.msl-typography--header-accent {
  position: relative;
  padding-block-end: calc(var(--msl-space-xl) * 1.5);
}

.msl-typography--header-accent::after {
  content: "";
  display: block;
  position: absolute;
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/madikwe-shape-6.1-no-bleed.png");
  width: 200px;
  height: 50px;
  opacity: 0.5;
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%; /* Position it below the heading text */
  left: 50%; /* Start the positioning from the center */
  transform: translateX(-50%); /* Pull it back 50% of its own width for center alignment */
  margin-inline: 0;
}

@media (min-width: 64em) {
  .msl-typography--header-accent::after {
    width: 250px;
    height: 75px;
  }
}

/* 
--------------------------------------------------------------------------
 * COLOUR
-------------------------------------------------------------------------- 
*/

/* --- Colour Utilities --- */
.msl-color--lightest {
  color: var(--msl-color-kalahari-mist);
}
.msl-color--light {
  color: var(--msl-color-elephant-dust);
}
.msl-color--medium {
  color: var(--msl-color-acacia-bark);
}
.msl-color--medium-dark {
  color: var(--msl-color-river-clay);
}
.msl-color--dark {
  color: var(--msl-color-buffalo-hide);
}

.msl-color--primary-accent {
  color: var(--msl-color-wild-fig);
}
.msl-color--dark-accent {
  color: var(--msl-color-twilight-soil);
}
.msl-color--pop-accent {
  color: var(--msl-color-sunset-ember);
}

.msl-bg-color--lightest {
  background-color: var(--msl-color-kalahari-mist);
}
.msl-bg-color--light {
  background-color: var(--msl-color-elephant-dust);
}
.msl-bg-color--medium {
  background-color: var(--msl-color-acacia-bark);
}
.msl-bg-color--medium-dark {
  background-color: var(--msl-color-river-clay);
}
.msl-bg-color--dark {
  background-color: var(--msl-color-buffalo-hide);
}

.msl-bg-color--primary-accent {
  background-color: var(--msl-color-wild-fig);
}
.msl-bg-color--dark-accent {
  background-color: var(--msl-color-twilight-soil);
}
.msl-bg-color--pop-accent {
  background-color: var(--msl-color-sunset-ember);
}

/* 
--------------------------------------------------------------------------
 * VISUAL EFFECTS
-------------------------------------------------------------------------- 
*/

/* --- Visual Effects --- */
.msl-fx--auto-contrast {
  color: var(--msl-color-sunset-ember);
}

.msl-fx-color-invert {
  color: var(--msl-color-kalahari-mist);
  background-color: var(--msl-color-buffalo-hide);
}

/* 
--------------------------------------------------------------------------
 * BACKGROUND TEXTURES
-------------------------------------------------------------------------- 
*/

.msl-bg-texture {
  position: relative;
  isolation: isolate;
}

.msl-bg-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-repeat: repeat;
  background-size: cover;
  background-attachment: fixed;
}

.msl-bg-texture--dirt::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/MSL-Texture-DIRT-100-scaled.png");
  opacity: 0.03;
}

.msl-bg-texture--shadow::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/MSL-Texture-Shadow-100-scaled.png");
  opacity: 0.2;
}

.msl-bg-texture--grainy::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/MSL-Texture-Grainy-100-scaled.png");
  opacity: 0.07;
}

.msl-bg-texture--mud::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/MSL-Texture-Mud-100-scaled.png");
  opacity: 0.03;
}

.msl-bg-texture--wood::before {
  background-image: url("https://madikwesafarilodge.co.za/wp-content/uploads/2025/11/MSL-Texture-Wood-100-scaled.png");
  opacity: 0.02;
}

/* 
--------------------------------------------------------------------------
 * BUTTONS
-------------------------------------------------------------------------- 
*/

/* --- PRIMARY BUTTON, NAV BUTTON --- */
.msl-button__primary {
  padding-top: 0.55rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  padding-left: 1rem;
  color: var(--msl-color-kalahari-mist);
  min-width: 8vw;
  border: none;
  font-size: 0.85rem;
  font-family: Ivymode;
  letter-spacing: 0.2rem;
  font-weight: 200;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: all 0.4s ease-in-out;
}

.msl-button__primary {
  background-color: transparent;
  box-shadow: 0 0 0 0.7px var(--msl-color-kalahari-mist);
}

.msl-button__enquire-nav {
  background-color: var(--msl-color-buffalo-hide-95);
  box-shadow: 0 0 0 0.7px var(--msl-color-sunset-ember);
}

.msl-button__primary a {
  text-decoration: none;
}

.msl-button__primary:hover,
.msl-button__primary:focus,
.msl-button__primary:active {
  text-decoration: none;
  box-shadow:
    0 0 0 0.5px var(--msl-color-sunset-ember),
    0 -5px 10px -5px var(--msl-color-sunset-ember),
    0 5px 10px -5px var(--msl-color-sunset-ember);
  color: var(--msl-color-sunset-ember);
  background-color: var(--msl-color-buffalo-hide);
}

.msl-button__primary:hover a,
.msl-button__primary:focus a,
.msl-button__primary:active a {
  color: var(--msl-color-sunset-ember);
}

.msl-button__primary--subtle:hover,
.msl-button__primary--subtle:focus,
.msl-button__primary--subtle:active {
  box-shadow: 0 0 0 0.5px var(--msl-color-sunset-ember);
}

/* --- BUTTON DARK --- */
.msl-button__dark {
  color: var(--msl-color-buffalo-hide);
  box-shadow: 0 0 0 0.5px var(--msl-color-buffalo-hide);
}

/* --- DOWNLOAD BUTTON --- */
.msl-button__download::after {
  content: " \2193";
  margin-left: 5px;
}

/* --------------------------------------------------------------------------
 * FILTER BUTTONS (msl-button-tag) - Uses existing token structure
 * -------------------------------------------------------------------------- 
 */

.msl-button__filter {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-family: var(--msl-font-body);
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-decoration: none !important; /* Ensure it overrides any theme link styling */

  /* Initial State (Inactive) */
  background: var(--msl-color-elephant-dust);
  color: var(--msl-color-buffalo-hide);
  border: 1px solid var(--msl-color-acacia-bark);
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

/* Active State */
.msl-button__filter.is-active,
.msl-button-__filter:hover {
  background: var(--msl-color-twilight-soil);
  color: var(--msl-color-kalahari-mist);
  border-color: var(--msl-color-twilight-soil);
}

/*
==========================================================================
7.0 HELPER CLASSES
==========================================================================
*/

/* 
--------------------------------------------------------------------------
 * MAX-WIDTH CONSTRAINTS
-------------------------------------------------------------------------- 
*/

.msl-utility--clip-x {
  /* Hides content that spills horizontally outside the element */
  overflow-x: hidden !important;
}

.msl-utility--clip {
  overflow: hidden !important;
}

.msl-utility--width-100 {
  width: 100%;
}

.msl-utility--max-100 {
  max-width: 100%;
}

.msl-utility--max-ch70 {
  max-width: var(--msl-max-content-width);
  margin-inline: auto;
}

.msl-utility--max-ch45 {
  max-width: 45ch;
  margin-inline: auto;
}

.msl-utility--max-ch40 {
  max-width: 40ch;
  margin-inline: auto;
}

.msl-utility--max-1200 {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  box-sizing: border-box; /* Defensive */
  align-self: center; /* Defensive for when the Parent is Flex Column */
}

.msl-utility--width-fit-content {
  width: fit-content;
}

.msl-utility--block-start-0 {
  margin-block-start: 0;
}

@media (max-width: 64em) {
  .msl-utility--mobile-50vh {
    min-height: unset;
    max-height: unset;
    height: 50vh;
  }
}

/* 
--------------------------------------------------------------------------
 * VISIBILITY (msl-utility--mobile-only, etc.)
-------------------------------------------------------------------------- 
*/

@media (min-width: 64em) {
  .msl-utility--mobile-only {
    display: none !important;
  }
}

@media (max-width: 64em) {
  .msl-utility--desktop-only {
    display: none !important;
  }
}

/* 
--------------------------------------------------------------------------
 * FLOW MODIFIERS (msl-utility--mobile-column-reverse)
-------------------------------------------------------------------------- 
*/

@media (max-width: 64em) {
  .msl-utility--mobile-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (max-width: 64em) {
  .msl-utility--mobile-row-reverse {
    flex-direction: row-reverse;
  }
}

@media (max-width: 64em) {
  .msl-utility--mobile-text-center {
    text-align: center;
  }
}

/*
==========================================================================
8.0 CRITICAL OVERRIDES
==========================================================================
*/

/* ---- GRAVITY FORMS ---- */

.gform_required_legend {
  display: none !important;
}

.gfield_required {
  color: var(--msl-color-wild-fig) !important;
}

.gform-theme--framework
  input[type]:where(:not(.gform-text-input-reset):not([type="hidden"])):where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ) {
  font-weight: 300 !important;
}

.gform-theme--framework
  .gfield_list_group_item::before:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ),
.gform-theme--framework
  .gform-field-label:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(
        .gform-theme__disable-framework *
      )
  ) {
  font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
 * COMPONENT: CAMP COMPARISON GRID (.msl-gf-camp-grid)
 * Scoped to #seo-uk-quote to beat GF cascade order.
 * -------------------------------------------------------------------------- */

#seo-uk-quote .msl-gf-camp-grid {
  display: block;
}

#seo-uk-quote .msl-gf-camp-grid .msl-gf-note-intro {
  font-size: 0.75rem;
  color: var(--msl-color-river-clay);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block-end: 0.75rem;
  margin-block-start: 0;
}

#seo-uk-quote .msl-gf-camp-grid .msl-gf-camp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#seo-uk-quote .msl-gf-camp-grid .msl-gf-camp-list li {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--msl-color-buffalo-hide);
  padding-left: 0;
  margin: 0;
}

#seo-uk-quote .msl-gf-camp-grid .msl-gf-camp-list li strong {
  color: var(--msl-color-twilight-soil);
}

/* ---- GREENSHIFT TABS ---- */

/* Override inline max-height on Greenshift tabs content area */
.gs_root .gs_content_area .gs_content.active {
  max-height: 5000px !important;
}

.msl-layout__content-col-inner .swiper .swiper-slide {
  width: 100% !important;
}

/* ---- GREENSHIFT SWIPER ARROWS ---- */

.wp-block-greenshift-blocks-swiper.gs-swiper .swiper-button-prev,
.wp-block-greenshift-blocks-swiper.gs-swiper .swiper-button-next {
  background-color: var(--msl-color-buffalo-hide-50);
}

/* ---- FEATHERLIGHT LIGHTBOX ---- */

/* Container */
.featherlight {
  background: var(--msl-color-buffalo-hide-85) !important;
}

/* Content */
.featherlight .featherlight-content {
  padding: 0 !important;
  border: 2px solid var(--msl-color-sunset-ember) !important;
  border-radius: 5px;
  background: transparent !important;
}

/* Close icon */
.featherlight .featherlight-close-icon {
  top: 2px !important;
  right: 2px !important;
  line-height: 35px !important;
  width: 35px !important;
  background: var(--msl-color-buffalo-hide-85) !important;
  border-radius: 0 3px 0 0 !important;
  color: var(--msl-color-sunset-ember) !important;
}

/* Navigation arrows */
/* 1. Hide the native content/emoji image in the span to clean up the element */
.featherlight-next span,
.featherlight-previous span {
  display: none !important;
}

/* 2. Style the button container and apply positioning/size */
.featherlight-next,
.featherlight-previous {
  /* Base positioning and size */
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 3rem !important;
  height: 3rem !important;
  cursor: pointer;
  opacity: 0.7;
  color: var(--msl-color-sunset-ember) !important;
  background: var(--msl-color-buffalo-hide-85) !important;

  transition: opacity var(--msl-transition-duration-fast) var(--msl-transition-function) !important;
  border-radius: 3px;
  overflow: hidden !important; /* Prevents the scrollbar you observed */
}

/* 3. Inject the clean Unicode arrow using ::before for style control */
.featherlight-next::before,
.featherlight-previous::before {
  content: ""; /* Base reset */
  position: relative; /* Must be relative inside Flex to follow flow */
  font-size: 3rem;
  line-height: 1; /* Retain for arrow shape consistency */
  color: inherit;
  /* Remove all previous translation/absolute positioning, as Flex handles it now */
  top: -0.25rem;
  left: unset;
  transform: unset;
}

/* 4. Inject the specific Unicode characters */
.featherlight-previous::before {
  content: "‹"; /* Clean left arrow Unicode */
}

.featherlight-next::before {
  content: "›"; /* Clean right arrow Unicode */
}

/* 5. Positioning Overrides (Retained for edge spacing) */
.featherlight-previous {
  left: 20px !important;
}
.featherlight-next {
  right: 20px !important;
}

/* 6. Hover State */
.featherlight-next:hover,
.featherlight-previous:hover {
  opacity: 1;
}

/* --- Desktop Nav Visibility Lock --- */
@media (min-width: 75em) {
  .msl-nav--visible-lock {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}
/* ==========================================================================
   COMPLIANZ COOKIE BANNER — Madikwe brand styling (TCF off / optin)
   Ported from Tanda Tula, re-tokenised + site-button styling.
   Scoped under #cmplz-cookiebanner-container to win over Complianz's CDN CSS.
   ========================================================================== */
:root {
  --msl-cmplz-accent: var(--msl-color-sunset-ember, #dd8872);
  --msl-cmplz-text: var(--msl-color-buffalo-hide, #433c3b);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  background: rgba(244, 237, 229, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--msl-cmplz-text);
  border-radius: 10px;
  border: 1px solid var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31));
  box-shadow: 0 6px 22px rgba(67, 60, 59, 0.18);
  max-width: 460px;
  padding: 20px;
  line-height: 1.5;
  text-align: center;
  justify-items: center;
  font-family: var(--msl-font-body, sans-serif);
}
#cmplz-cookiebanner-container .cmplz-logo { display: block; margin: 0 auto 6px; max-height: 30px; }
#cmplz-cookiebanner-container .cmplz-title { display: none; }
#cmplz-cookiebanner-container .cmplz-message {
  width: 100%;
  font-family: var(--msl-font-body, sans-serif);
  font-size: 0.9rem; font-weight: 400; line-height: 1.6;
  margin: 0 auto 14px; text-align: center; color: var(--msl-cmplz-text);
}
#cmplz-cookiebanner-container .cmplz-close { border-radius: 999px; }
#cmplz-cookiebanner-container .cmplz-close:focus-visible { outline: 2px solid var(--msl-cmplz-accent); outline-offset: 2px; }
#cmplz-cookiebanner-container .cmplz-buttons {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 8px; width: 100%;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
  flex: 1 1 auto;
  font-family: Ivymode, var(--msl-font-heading, serif);
  font-size: 0.6rem; font-weight: 200; letter-spacing: 0.1rem; line-height: 1.3;
  text-transform: uppercase; text-align: center; white-space: nowrap;
  padding: 0.6rem 0.45rem;
  border: none; border-radius: 0; background: transparent; color: var(--msl-cmplz-text);
  box-shadow: 0 0 0 0.7px var(--msl-cmplz-text);
  cursor: pointer; transition: all 0.3s ease-in-out;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:focus {
  background: var(--msl-color-buffalo-hide, #433c3b); color: var(--msl-color-kalahari-mist, #f4ede5);
  box-shadow: 0 0 0 0.5px var(--msl-cmplz-accent), 0 -5px 10px -5px var(--msl-cmplz-accent), 0 5px 10px -5px var(--msl-cmplz-accent);
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:focus-visible { outline: 2px solid var(--msl-cmplz-accent); outline-offset: 2px; }
#cmplz-cookiebanner-container .cmplz-links { justify-content: center; }
#cmplz-cookiebanner-container .cmplz-links .cmplz-documents { margin-top: 12px; font-size: 0.8rem; font-family: var(--msl-font-body, sans-serif); }
#cmplz-cookiebanner-container .cmplz-links .cmplz-documents a { color: var(--msl-cmplz-text); text-decoration: underline; text-underline-offset: 2px; }
#cmplz-cookiebanner-container .cmplz-category {
  border: 1px solid var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31)); border-radius: 8px; padding: 10px; margin: 6px 0;
  background: rgba(244, 237, 229, 0.5); text-align: left;
}
#cmplz-cookiebanner-container .cmplz-category-title { font-family: var(--msl-font-heading, serif); font-weight: 600; margin-bottom: 4px; }
#cmplz-manage-consent .cmplz-manage-consent {
  background: rgba(244, 237, 229, 0.5) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--msl-cmplz-text);
  border: 1px solid var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31));
  box-shadow: 0 4px 14px rgba(67, 60, 59, 0.12);
  font-family: var(--msl-font-heading, serif); text-transform: uppercase; letter-spacing: 0.1rem; font-size: 0.62rem;
}
#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus { background: rgba(244, 237, 229, 0.82) !important; }
body .cmplz-blocked-content-container .cmplz-blocked-content-notice {
  background: rgba(244, 237, 229, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px dashed var(--msl-color-buffalo-hide-35, rgba(67, 60, 59, 0.31)); border-radius: 10px; padding: 12px;
  text-align: center; font-family: var(--msl-font-body, sans-serif); color: var(--msl-cmplz-text);
}
body button.cmplz-accept-service {
  padding: 0.55rem 1rem; border: none; border-radius: 0; background: transparent;
  color: var(--msl-cmplz-text); box-shadow: 0 0 0 0.7px var(--msl-cmplz-text);
  font-family: Ivymode, var(--msl-font-heading, serif); text-transform: uppercase; letter-spacing: 0.16rem; font-size: 0.7rem; font-weight: 200; cursor: pointer;
}
@keyframes msl-cmplz-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { animation: msl-cmplz-slide-up 0.45s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn { transition: none; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { animation: none; }
}
@media (max-width: 480px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner { padding: 16px; max-width: 92vw; }
  #cmplz-cookiebanner-container .cmplz-buttons { flex-wrap: wrap; }
  #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn { flex: 1 1 100%; }
}


/*
==========================================================================
9.0 WAYFINDER (FULL-PAGE LINK MENU) + MSL FILLED BUTTON
==========================================================================
*/

/*
--------------------------------------------------------------------------
 * MSL FILLED BUTTON (.msl-button__primary.msl-button__filled)
 *
 * Frosted-glass background variant of the brand primary button. Chains
 * with .msl-button__primary on photographic backgrounds where the
 * outline-only primary lacks readability.
 *
 * Overrides ONLY background + vertical padding. Outline, text colour,
 * letter-spacing, font family, and the hover treatment (sunset-ember
 * glow) all inherit from .msl-button__primary.
--------------------------------------------------------------------------
*/

.msl-button__primary.msl-button__filled {
  background-color: var(--msl-color-buffalo-hide-50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-top: 1rem;
  padding-bottom: 0.95rem;
}

.msl-button__primary.msl-button__filled:hover,
.msl-button__primary.msl-button__filled:focus,
.msl-button__primary.msl-button__filled:active {
  background-color: var(--msl-color-buffalo-hide);
}

/*
--------------------------------------------------------------------------
 * WAYFINDER
--------------------------------------------------------------------------
*/

.page-id-18577 .site-content {
  padding: 0 !important;
  margin: 0 !important;
}

.page-id-18577 .site-title-area {
  display: none;
}

.msl-wayfinder {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 6vh var(--msl-space-sm) var(--msl-space-md);
  overflow: hidden;
}

.msl-wayfinder__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

.msl-wayfinder__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 28rem;
  gap: var(--msl-space-sm);
}

.msl-wayfinder__logo {
  width: clamp(220px, 50vw, 360px);
  height: auto;
  display: block;
  margin-block-end: 0;
}

.msl-wayfinder__buttons {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.msl-wayfinder__button {
  display: block;
  width: 100%;
}

@media (min-width: 48em) {
  .msl-wayfinder__inner {
    max-width: 32rem;
  }
}


/* =========================================================================
 * Safari rendering fixes — 2026-07-03 (buttons + sticky parallax video clip)
 * ========================================================================= */

/* 1) Button borders were drawn with a sub-pixel, spread-only box-shadow
 *    (0 0 0 .5-.7px <colour>). WebKit rasterises spread-only sub-pixel shadows
 *    unevenly and drops edges -> partial "L-shaped" borders, and the effect
 *    varies with each display's pixel ratio. Use a real 1px border; buttons are
 *    box-sizing:border-box so there is no layout shift. The blurred hover *glow*
 *    is kept (Safari renders blurred shadows correctly). */
.msl-button__primary     { border: 1px solid var(--msl-color-kalahari-mist); box-shadow: none; }
.msl-button__enquire-nav { border: 1px solid var(--msl-color-sunset-ember);  box-shadow: none; }
.msl-button__dark        { border: 1px solid var(--msl-color-buffalo-hide);  box-shadow: none; }
.msl-button__primary:hover,
.msl-button__primary:focus,
.msl-button__primary:active {
  border-color: var(--msl-color-sunset-ember);
  box-shadow: 0 -5px 10px -5px var(--msl-color-sunset-ember),
              0  5px 10px -5px var(--msl-color-sunset-ember);
}
.msl-button__primary--subtle:hover,
.msl-button__primary--subtle:focus,
.msl-button__primary--subtle:active {
  border-color: var(--msl-color-sunset-ember);
  box-shadow: none;
}

/* 2) Sticky parallax video: WebKit's compositor fails to clip the composited
 *    <video> to its overflow:hidden sticky pin during scroll, leaving a band of
 *    video peeking below the section until a repaint. Force a hard clip. The
 *    layout is already correct, so this changes nothing on Chrome. */
.msl-parallax-scene__sticky-pin { clip-path: inset(0); }

/* =========================================================================
 * Safari scroll-jank fix — 2026-07-03
 * background-attachment:fixed forces WebKit to repaint the whole background on
 * every scroll frame (Chrome composites it; iOS ignores it) -> periodic "hops".
 * Drop to scroll: the texture is a repeating cover image (visually identical),
 * and the vista sections keep their JS background-position drift.
 * ========================================================================= */
.msl-vista-parallax     { background-attachment: scroll; }
.msl-bg-texture::before { background-attachment: scroll; }
/* ============================================================
   Accessibility remediation — 2026-07-28 maintenance run
   ============================================================ */

/* Footer column headings changed h4 -> h3 to close the heading-order violation.
   Browser default heading margins differ by tag (h4 = 1.33em, h3 = 1.5em), which
   would have shifted every footer heading down by 3.26px on desktop and 9.6px on
   mobile. Pinning the h4 value keeps the footer pixel-identical at every viewport. */
.msl-footer__heading { margin-block-start: 1.33em; }

/* Tag links measured 4.02:1 against the peach background (#dd8872), just under the
   4.5:1 minimum. #3a3433 lifts it to 4.56:1 and is visually indistinguishable. */
.is-style-greenshift-tags-color.wp-block-post-terms a[rel="tag"] { color: #3a3433; }

/* =========================================================================
 * TWO-COLUMN SECTIONS — keep the text top-aligned beside a slider
 * -------------------------------------------------------------------------
 * `.msl-children--center` sets align-items + align-content + justify-content
 * as a FLEX utility, but these text columns compute to `display: block`.
 * Chrome 123+ / Safari 17.4+ now honour `align-content` on block containers,
 * so it silently vertical-centres the column. Where the paired media column
 * is a fixed-height slider (does not fill the section) the text drifts
 * ~115px below the image top and reads as misaligned. Scoped to slider
 * sections only; sections whose media fills the column still centre.
 * Offset matches the media column's 6rem so both start level + clear the
 * fixed header. Added 2026-07-24, re-applied 2026-07-29 after a staging reset.
 * ========================================================================= */
.msl-section-cols-2:has(.gs-swiper) > .msl-layout-flex__col.msl-children--center {
  align-content: start;
  padding-block-start: 6rem;
}
.msl-section-cols-2:has(.gs-swiper) > .msl-layout-flex__col.msl-children--center .msl-layout--sticky > :first-child {
  margin-block-start: 0;
}

/* =========================================================================
 * DOWNLOAD BUTTONS — breathing room above the button
 * -------------------------------------------------------------------------
 * The button anchor is display:inline and carries a margin:0 from the combined
 * CSS, so a top margin on the button itself never lands. Instead space the
 * element immediately BEFORE it (a <p> on Wellness, a <ul> on the trip planner).
 * Gap goes from 18px to ~43px — a little more than the inter-paragraph gap,
 * per David's brief. Added 2026-07-29.
 * ========================================================================= */
:has(> a.msl-button__download) > :where(p,ul,ol,h1,h2,h3,h4,div):has(+ a.msl-button__download) {
  margin-block-end: 2.75rem;
}

/* =========================================================================
 * TITLE BAND — flat fill so the divider matches its neighbours
 * -------------------------------------------------------------------------
 * `.msl-bg-texture::before` uses background-size:cover, which scales the soft
 * Shadow vignette to each section's own HEIGHT. A short full-width title band
 * (1054px) beside taller content sections (1171px) crops the vignette at a
 * different zoom, so it reads a shade off from the section above. Tiling the
 * texture instead shows visible rectangles (soft vignette, not a seamless
 * tile). Fix: drop the texture on this one band and flat-fill it with the
 * neighbours' effective textured tone — imperceptible from the 0.2 overlay,
 * and seamless. Scoped by the msl-band--flush modifier on this block only.
 * Added 2026-07-29. "Your Madikwe Spa Experience" band, Wellness page.
 * ========================================================================= */
.msl-band--flush::before { display: none; }
.msl-band--flush { background-color: rgb(238, 232, 224); }

/* ============================================================
   Award seals in the off-canvas nav — 2026-07-30
   Approved: mockup 2 (desktop) + mockup 3 (mobile), David 2026-07-30.
   ============================================================ */

.msl-offcanvas__awards { display: flex; }

.msl-offcanvas__award {
	display: block;
	height: auto;
	max-width: 100%;
}

/* ---- Breakpoint is EXACTLY 1024px (measured, not assumed) ----
   Below it the panel shows .msl-offcanvas__socials--mobile and hides
   .msl-offcanvas__tertiary-sidebar; at 1024 they swap. Matching that
   single boundary means there is no width where both or neither show. */
.msl-offcanvas__awards--desktop { display: none; }
.msl-offcanvas__awards--mobile  { display: flex; }

@media (min-width: 75em) {
	.msl-offcanvas__awards--desktop { display: flex; }
	.msl-offcanvas__awards--mobile  { display: none; }
}

/* ---- DESKTOP: stacked at the top of the 150px right column ----
   The column is full-viewport-height and justify-content: flex-end, so it is
   bottom-anchored. `margin-bottom: auto` on the seals absorbs the free space,
   holding them at the top while the divider + socials stay at the bottom —
   which is what mockup 2 shows.
   Width is clamped against VIEWPORT HEIGHT, not width, because the failure
   mode here is vertical: an oversized seal is clipped off the TOP of the
   screen, never scrolled to. Measured budget in the column is
   (viewport height − 526px of fixed content). */
.msl-offcanvas__awards--desktop {
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 1.6vh, 20px);
	margin-bottom: auto;
	width: 100%;
}

.msl-offcanvas__awards--desktop .msl-offcanvas__award {
	width: clamp(68px, 11vh, 104px);
}

/* ---- MOBILE: side by side, centred, above the socials row ---- */
.msl-offcanvas__awards--mobile {
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin: 0 auto clamp(18px, 3vh, 30px);
	padding: 0 16px;
	width: 100%;
	box-sizing: border-box;
}

.msl-offcanvas__awards--mobile .msl-offcanvas__award {
	width: clamp(84px, 26vw, 116px);
}

/* ---- Short desktop windows: the decorative divider yields its space ----
   APPROVED DEVIATION (David, 2026-07-30). The divider-icon is 100px tall with
   a 32px bottom margin = 132px. Without reclaiming it the seals clip: measured
   6px short at 1366x768 and 74px short at 1024x700, both common laptop sizes.
   Hiding a decorative element in favour of content is the graceful trade.
   Logged in the MSL design-decisions record. */
@media (min-width: 75em) and (max-height: 770px) {
	.msl-offcanvas__tertiary-sidebar .msl-offcanvas__divider-icon { display: none; }
}


/* ---- Submenu "+" toggles: one vertical line at every width ---- *
 * msl-plus-align-20260730
 * .msl-offcanvas__main-list is a flex column with align-items: flex-start,
 * so every .msl-offcanvas__main-block shrank to its own label width and
 * justify-content: space-between had nothing to spread — the "+" sat
 * immediately after the text and stepped left as the labels got shorter.
 * Two bands hid it: below ~430px the labels already fill the panel, and
 * from 64em the desktop min-width: 400px gives every block the same box.
 * Everything between (tablet and small laptop) slanted.
 * Giving every block one shared box restores a single right edge, exactly as
 * desktop does with its min-width: 400px.
 *
 * The box is sized FROM desktop rather than guessed. Measured: desktop type is
 * 28.8px with a longest label of 302.5px and a 32px button inside a 400px block,
 * so 65.5px sits between the longest label and the "+". Sub-desktop type is
 * 22.4px with a longest label of 235.3px, so 336px reproduces that gap (68.7px).
 * NB the link carries flex-grow: 1 here, so a measured link width is the link
 * filling the block, NOT the label — neutralise the grow before measuring.
 * min(...,100%) leaves phones alone: at 390 the list is 326px, so it still fills. */
.msl-offcanvas__main-block {
	/* a DEFINITE width, not min-width: the in-flow submenu container would
	   otherwise inflate shrink-to-fit past it (measured 581.8 / 492.4 / 379). */
	width: min(336px, 100%);
}

@media (min-width: 75em) {
	.msl-offcanvas__main-block {
		width: auto;
		min-width: 400px;
	}
}


/* ---- Nav chrome swap between 64em and the nav breakpoint ---- *
 * msl-nav-utility-scope-20260730
 * The header swaps its mobile/desktop logo + Enquire with the generic
 * .msl-utility--mobile-only / --desktop-only helpers, which switch at 64em.
 * The nav chrome now switches at 75em, so between the two the header showed
 * an unpositioned desktop logo (1100x27, full width) while the mobile logo and
 * the Enquire CTA were both display:none. Scoped to the header so page content
 * keeps the generic 64em behaviour (responsive video pairs, flop-panel labels). */
@media (min-width: 64em) and (max-width: 74.999em) {
	header.wp-block-template-part .msl-utility--mobile-only  { display: inline-block !important; }
	header.wp-block-template-part .msl-utility--desktop-only { display: none !important; }
}


/* ---- Nav item group centres with the logo, seals and socials ---- *
 * msl-nav-centre-20260730
 * .msl-offcanvas__main-list is a flex column with align-items: flex-start, so the
 * group hugged the left edge while everything else in the panel is centred:
 * measured 16px of margin on the left against 112/164/276/444/543px on the right
 * at 768/820/932/1100/1199. Centring the group balances it; the labels stay
 * left-aligned inside each row so the "+" column keeps its single edge.
 * Desktop keeps flex-start — its own layout is built around the left rail. */
.msl-offcanvas__main-list {
	align-items: center;
}

@media (min-width: 75em) {
	.msl-offcanvas__main-list {
		align-items: flex-start;
	}
}

/* ---- The bottom bar's buttons centre in the strip below the panel ---- *
 * The footer is fixed at bottom: 2vh, is --msl-mobile-nav-height tall, and centres
 * its button, so the button's centre sits (2vh + height/2) above the viewport
 * bottom. Mirroring the panel's bottom edge across that centre puts it at
 * 2*(2vh) + height. Measured before: the button sat exactly 4vh nearer the panel
 * than the viewport at every height tested (844 -> 33.8px, 1180 -> 47.2px).
 * The buttons do not move — only the panel's bottom edge is calculated. */
.msl-offcanvas {
	height: calc(100svh - (2 * var(--msl-nav-footer-offset)) - var(--msl-mobile-nav-height));
}

@media (min-width: 75em) {
	.msl-offcanvas {
		height: 100vh;
	}
}


/* ---- Stacked menu sits off the top edge ---- *
 * msl-nav-vertical-20260730
 * Measured with the panel open: the list starts at y=95 and the first item at
 * y=111 — 16px — while 92 to 395px of the list sat empty below the last item.
 * Centring inside the LIST puts the group ~75px above the panel's true centre
 * (the logo is above the list, the seals and socials below it) and leaves half
 * the slack underneath for submenus. Same value the desktop rule already uses.
 *
 * `safe` is load-bearing: this list is overflow-y: auto and overflows once two
 * submenu levels are open (634px of content in a 426px window). Plain centring
 * makes start-edge overflow unreachable; `safe center` reverts to start the
 * moment it overflows. Where `safe` is unsupported the declaration is dropped
 * entirely and the list keeps flex-start, which is today's behaviour.
 *
 * 27em = 432px clears the widest mainstream phone portrait (430px), so phones
 * are untouched; the upper bound hands desktop back to its own rule. */
@media (min-width: 27em) and (max-width: 74.999em) {
	.msl-offcanvas__main-list {
		justify-content: safe center;
	}
}