@charset "utf-8";
/* CSS Document */
.site-header-visual{
	position: relative;
	background:
		linear-gradient(rgba(12,18,24,0.58), rgba(12,18,24,0.58)),
		url("../images/header-placeholder.jpg") center center / cover no-repeat;
	background-color: var(--brand-header-surface, #1c2730);
}
/* Temporary Base Page navigation background */
.main-header {
    background: var(--brand-header-surface, #1c2730);
}

/* optional: ensure nav area stays visually clean over the image */
.site-header-visual .main-header,
.site-header-visual .site-header,
.site-header-visual .header,
.site-header-visual .topbar{
	background: transparent;
}

/* optional: make sure text stays readable */
.site-header-visual,
.site-header-visual h1,
.site-header-visual h2,
.site-header-visual h3,
.site-header-visual p,
.site-header-visual a,
.site-header-visual li,
.site-header-visual span{
	color: #fff;
}
/* =====================================================
   SHARED HEADER AND NAVIGATION LAYERING
   ===================================================== */

/* Keep the navigation above page heroes and content */
.main-header {
    position: relative;
    z-index: 1000;
}

/* Keep the sticky header above subsequent sections */
.main-header .header-sticky {
    position: relative;
    z-index: 1001;
}

/* Ensure the desktop dropdown can extend below the header */
.main-header .navbar,
.main-header .navbar-collapse,
.main-header .nav-menu-wrapper {
    overflow: visible;
}

/* Desktop dropdown menus */
.main-header .navbar-nav .submenu {
    position: relative;
}

.main-header .navbar-nav .submenu > ul {
    z-index: 1100;
}

/* Hero remains below the navigation */
.page-header,
.hero-royal {
    position: relative;
    z-index: 1;
}

/* Mobile navigation */
@media (max-width: 991px) {
    .main-header .responsive-menu {
        position: relative;
        z-index: 1200;
    }

    .main-header .slicknav_menu,
    .main-header .slicknav_nav {
        z-index: 1201;
    }
}

/* ================================================================
   CBA STICKY HEADER / DUAL LOGO (2026-10)
   Wildex function.js manages .header-sticky.active after scrolling.
   The template activates it with .active-sticky-header.
   Keep this below the earlier header layering rules.
   ================================================================ */

/* The wrapper is a legacy dark preview background. Leave the hero
   to its own page-specific styles. No changes to hero dimensions. */
.main-header.active-sticky-header { z-index: 1500; }
.main-header.active-sticky-header .header-sticky.active {
    background: #f8faf9;
    border-bottom: 1px solid rgba(15, 40, 36, .13);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .12);
    z-index: 1501;
}

/* Use the natural logo dimensions without shifting layout on toggle. */
.main-header .brand-logo-pair {
    display: inline-flex;
    width: clamp(150px, 17vw, 218px);
    min-height: 58px;
    align-items: center;
    position: relative;
}
.main-header .brand-logo-pair .brand-logo {
    width: 100%;
    height: auto;
    max-height: 74px;
    object-fit: contain;
    object-position: left center;
}
.main-header .brand-logo-colour { display: none; }
.main-header .header-sticky.active .brand-logo-light { display: none; }
.main-header .header-sticky.active .brand-logo-colour { display: block; }

/* At top: light logo / white menu. On scroll: dark menu on light band. */
.main-header .header-sticky:not(.active) .main-menu ul li > a.nav-link {
    color: #fff;
}
.main-header .header-sticky.active .main-menu ul li > a.nav-link {
    color: #23332f;
}
.main-header .header-sticky.active .main-menu ul li > a.nav-link:hover,
.main-header .header-sticky.active .main-menu ul li > a.nav-link:focus {
    color: var(--brand-link-hover, #076638);
}
/* Wildex dropdowns must retain their own background and legible text. */
.main-header .header-sticky.active .main-menu ul li ul li a.nav-link {
    color: #23332f;
}
/* Don't override the button's text contrast with the navigation colour. */
.main-header .header-sticky.active .header-btn a { color: #fff; }

/* Keep open desktop and mobile menus above hero backgrounds. */
.main-header .header-sticky.active .responsive-menu,
.main-header .header-sticky.active .slicknav_menu,
.main-header .header-sticky.active .slicknav_nav { z-index: 1600; }

@media (max-width: 991px) {
    .main-header .brand-logo-pair { width: 165px; min-height: 46px; }
    .main-header .brand-logo-pair .brand-logo { max-height: 58px; }
    .main-header .header-sticky.active .slicknav_btn { z-index: 1601; }
}

/* =====================================================
   CBA MOBILE HEADER LAYOUT — STEP 4A
   Applies only to screens 991px wide and smaller.
   Does not modify desktop navigation or dropdowns.
   ===================================================== */

@media (max-width: 991px) {

  /* Keep the mobile header compact */
  .main-header .header-sticky .navbar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: 80px;
  }

  /* Logo: prevent oversized dimensions */
  .main-header .navbar-brand.brand-logo-pair {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: 150px;
    max-width: 36%;
    margin: 0;
    padding: 0;
  }

  .main-header .brand-logo-pair .brand-logo {
    width: 100%;
    max-width: 150px;
    height: auto;
  }

  /* Smaller mobile CTA */
  .main-header .header-btn {
    flex: 0 1 auto;
    margin: 0;
  }

  .main-header .header-btn a {
    font-size: 12px;
    line-height: 1.25;
    padding: 11px 12px;
    white-space: nowrap;
  }

  /* Smaller hamburger / close control */
  .main-header .navbar-toggle {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
  }

}

/* STEP 4B — Hide decorative CTA arrow on mobile */
@media (max-width: 991px) {
  .main-header .header-btn a::before,
  .main-header .header-btn a::after {
    display: none;
  }
}

/* =====================================================
   STEP 5A — MOBILE REGIONAL NAVIGATION HIERARCHY
   Visual changes only; no interaction changes.  DEPRECATED
   ===================================================== */

/* STEP 5B — Mobile third-level trip links */
@media (max-width: 991px) {

  /* Trips nested within regional dropdowns */
  .responsive-menu .slicknav_nav ul ul a {
    font-size: 0.9em;
    font-weight: 400;
  }

}
/* =====================================================
   SHARED INTERIOR PAGE HERO AND BREADCRUMBS
   Applies to InteriorPage and TripPage layouts
   ===================================================== */

body.page-interior .interior-page-hero {
    padding-top: 180px;
}

/* Breadcrumb navigation */
body.page-interior .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0 0 24px;
    background: transparent;
}

body.page-interior .breadcrumb,
body.page-interior .breadcrumb li,
body.page-interior .breadcrumb a {
    font-size: 15px;
    line-height: 1.5;
}

/* Tablet and mobile */
@media (max-width: 991px) {
    body.page-interior .interior-page-hero {
        padding-top: 135px;
    }
}
/* Shared breadcrumb styling for all interior and trip hero sections.  */
.page-header .breadcrumb,
.interior-page-hero .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0 0 24px;
    background: transparent;
}
.page-header .breadcrumb,
.page-header .breadcrumb li,
.page-header .breadcrumb a,
.interior-page-hero .breadcrumb,
.interior-page-hero .breadcrumb li,
.interior-page-hero .breadcrumb a {
    font-size: 15px;
    line-height: 1.5;
}
/* Restore the approved breadcrumb colours on dark interior heroes. */
.interior-page-hero .breadcrumb .breadcrumb-item a {
    color: #fff;
}
.interior-page-hero .breadcrumb .breadcrumb-item.active {
    color: #e6f1eb;
}