@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Quicksand:wght@400;500;700&display=swap');


/*CSS Variables*/

:root {
    --main-bg-color: #5d6768;
    --primary-bg-color:#f0f8ff;
    --secondary-bg-color: #e6f0f3;
    --highlight-bg-color: #dbe9f4;
    --primary-accent-color:#404e64;
    --secondary-accent-color: #6e7f80;
    --highlight-accent-color: #2c3e50;
    --highlight-second-accent-color: #a3b18a;
    --button-color-bg: #f39c12;
    --primary-font: "Quicksand", sans-serif;
    --secondary-font: "Noto Sans", sans-serif;
    --section-margin: 80px;
}

.cta-background{
  min-height: 200px;
  background-color: var(--primary-accent-color);                  /* base colour */
  background-image: url("/static/images/hero/snowy_mtn_art_transparent.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

/*Global Styles*/

body {
    font-family: var(--primary-font);
    background-color: #e6f0f3;
}

h1, h2, h3, h4, h5 {
  font-family: var(--secondary-font);
  letter-spacing: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.header-font {
  font-family: var(--secondary-font);
  text-transform: uppercase;
}

.container-wide {
  max-width: 1800px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

hr {
  color: var(--primary-accent-color);
  width: 90%;
  margin: auto;
  height: 2px;
}

.section-margin {
  margin-block: var(--section-margin);
}

/*Navbar*/

.nav-link {
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

#navbar .nav-link:hover {
    color: var(--button-color-bg);
}

@media (max-width: 992px) {
.navbar .nav-link,
.navbar .navbar-brand {
  filter: drop-shadow(3px 3px 9px rgba(0,0,0,.70));
}
}

@media (max-width: 992px) {
.navbar-toggler-icon {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.90));
}
}

/* Default: transparent navbar */
.navbar-transparent {
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled: solid background */
.navbar-solid {
  background-color: var(--primary-accent-color);
  background-image: url("/static/images/hero/snowy_mtn_art_transparent.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* optional shadow */
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
  position: relative;
  text-decoration: none;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

/* Hover underline effect */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: var(--button-color-bg);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* All dropdowns site-wide */
.dropdown-menu{
  --bs-dropdown-bg: var(--primary-accent-color);              /* menu background */
  --bs-dropdown-link-color: #e9eef5;      /* item text */
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.08);
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-border-color: transparent; /* optional */
}

/* Active page underline stays visible */
.nav-link.active::after {
  width: 100%;
  background-color: var(--button-color-bg);
}

/* Mobile only (adjust breakpoint to match your navbar-expand-*) */
@media (max-width: 991.98px){
  /* the whole slide-down panel */
  .navbar .navbar-collapse{
    background: var(--primary-accent-color);
    border-radius: 0 0 .75rem .75rem; /* optional */
  }

  /* dropdown inside the collapsed panel */
  .navbar .dropdown-menu{
    --bs-dropdown-bg: transparent;         /* let panel color show through */
    --bs-dropdown-link-color: #e9eef5;
    --bs-dropdown-link-hover-bg: rgba(255,255,255,.12);
    --bs-dropdown-border-color: transparent;
    box-shadow: none;                       /* optional: flatter look on mobile */
  }

  .navbar .nav-link{ color:#e9eef5; }
  .navbar .nav-link:hover{ color:#fff; }
}

/* Full-viewport panel on mobile */
/* (Phones <576px stay full-width, slide from left) */
@media (max-width: 575.98px){
  #mobileNav.offcanvas-start{
    --bs-offcanvas-width: 100vw;
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important; /* hidden off left */
  }
  #mobileNav.offcanvas-start.show{
    transform: none !important;             /* visible in place */
  }
}

/* styles for off-canvas navbar */
#mobileNav{
  --bs-offcanvas-bg: var(--primary-accent-color);        
  --bs-offcanvas-border-color: transparent;
  background: var(--primary-accent-color);
  box-shadow: none;
}

/* Dropdowns inside offcanvas should stack, not float */
/* Make dropdowns stack and push content down inside the offcanvas */
/* Offcanvas dropdowns should stack and not be shifted by Popper */
#mobileNav .dropdown-menu{
  position: static !important;     /* take part in normal flow */
  transform: none !important;      /* cancel Popper translate(...) */
  inset: auto !important;          /* ignore top/left/right from Popper */
  display: none;                   /* Bootstrap will toggle .show */
  width: 100%;
  margin: .25rem 0 0;
  border: 0;
  box-shadow: none;
  padding-left: .5rem;             /* keep your indent */
  background-color: var(--primary-accent-color, #344353); /* fallback */
  background-color: color-mix(in srgb, var(--primary-accent-color) 85%, black 15%); /* darker dropdown */
}

#mobileNav .dropdown-menu.show{
  display: block;                 /* when opened, occupy space */
}

#mobileNav .dropdown-item{ color: rgba(255,255,255,.9); }
#mobileNav .dropdown-item:hover{
  background: rgba(255,255,255,.08);
  color:#fff;
}
#mobileNav .nav-link{ color:#fff; font-weight:700; }
#mobileNav .offcanvas-header{ border-bottom: 1px solid rgba(255,255,255,.08); }

/* If you use dropdown-menu-end inside offcanvas, neutralise end alignment */
#mobileNav .dropdown-menu-end{
  inset: auto !important; /* ignore right/left offsets from absolute positioning */
}

/* darker dropdown on desktop smaller screens*/
@media (min-width: 992px){
  #navbar .dropdown-menu{
    --bs-dropdown-bg: color-mix(in srgb, var(--primary-accent-color) 85%, black 15%);
  }
}

/* On small/tablet screens: dock offcanvas on the RIGHT (≥576px and <992px) */
@media (min-width: 576px) and (max-width: 991.98px){
  #mobileNav.offcanvas-start{
    left: auto !important; 
    right: 0 !important; 
    --bs-offcanvas-width: clamp(320px, 40vw, 420px);
    transform: translateX(100%) !important; /* hidden off right */
  }
  #mobileNav.offcanvas-start.show{
    transform: none !important;            /* visible in place */
  }
}

/*Hero*/

.hero-img {
    filter: brightness(85%);
}

/*Buttons*/

  .cta-btn {
    background-color: var(--button-color-bg);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .cta-btn:hover {
    background-color: #f39c12;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
  }

  .map-btn {
    background-color: var(--highlight-bg-color);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
  }

  .map-btn:hover {
    background-color: var(--primary-accent-color);
    color: white;
    font-weight: bold;
    text-transform: uppercase;
  }

/*Why Section*/

  #reasons {
  width: 90%;
  margin-inline: auto; /* only centers horizontally */
}

  #reasons h2 {
    margin-bottom: 20px;
    text-align: center;
  }

  #reasons p {
    margin-bottom: 20px;
    text-align: center;
    color: var(--primary-accent-color);
  }

  #why-experience>div,
    #why-active>div {
      line-height: 20px;
      margin-bottom: 20px;
    }

  #why-take-tour ul {
    padding: 0 20px;
  }

  #why-take-tour hr {
    border-top: 1px solid var(--primary-accent-color);
    margin: 5px 0;
  }

  .checkmark-list {
    list-style: none;
    padding-left: 0;
  }
  
  .checkmark-list li {
    position: relative;
    padding-left: 2.5em;
    margin-bottom: 0.75em;
  }
  
  .checkmark-list li::before {
    content: "✔";
    color: white;
    background-color: #f39c12;
    border-radius: 50%; /* circle */
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    position: absolute;
    left: 0;
    top: 0.1em;
  }

  .carousel-item img {
    width: 100%;
    height: 400px; /* Fixed height */
    object-fit: cover; /* Ensures the image covers the entire area while maintaining aspect ratio */
  }

  /*Gallery*/

.gallery-content {
  margin: 0;
  padding: 0;
}

.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.masonry-gallery {
  column-count: 1;
  column-gap: 1rem;
}

@media (min-width: 576px) {
  .masonry-gallery {
    column-count: 2;
  }
}

@media (min-width: 768px) {
  .masonry-gallery {
    column-count: 3;
  }
}

@media (min-width: 992px) {
  .masonry-gallery {
    column-count: 4;
  }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  display: block;
}

.masonry-item img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.masonry-item img:hover {
  transform: scale(1.05);
}

/*About*/

.tg-snr {
  max-height: 500px;
  width: auto;
  max-width: none;
}

/*Equipment*/

.accordion {
  --bs-accordion-btn-bg:  var(--primary-bg-color); 
  --bs-accordion-active-bg: var(--primary-accent-color);
  --bs-accordion-active-color: white;
  --bs-accordion-bg: var(--primary-bg-color);
  --bs-accordion-color: black;
  --bs-accordion-btn-focus-box-shadow: none;
    padding:10px;
}

/*Routes Styles*/

  .route-map { 
    height: 400px; width: 100%; margin-top: 1rem; 
  }
  .route-section { 
    padding: 4rem 0; border-top: 1px solid #eee; 
  }
  .scroll-link { 
    cursor: pointer; text-decoration: none; color: inherit; 
  }

  .route-info-box { 
    background: #f8f9fa; padding: 1rem; margin-top: 0.5rem; border-radius: 5px; font-size: 0.875rem; border: 1px solid #ccc; 
  }

  /* Leaflet CSS for improved contrast*/

  /* Make Leaflet controls readable on busy map tiles */
.leaflet-bar a,
.leaflet-control-zoom a,
.leaflet-control-layers,
.leaflet-control-attribution,
.leaflet-control-scale {
  background: rgba(255,255,255,.95);
  color: #111;                     /* strong text color */
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  border-radius: .375rem;
}

/* Popup text contrast */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.1);
}

/* Attribution readability on any tile */
.leaflet-control-attribution {
  padding: 2px 6px;
  font-size: .85rem;
}

/* Zoom buttons and other bar controls */
.leaflet-bar a,
.leaflet-control-zoom a {
  width: 48px;
  height: 48px;
  line-height: 48px;   /* centers + / – glyph */
  font-size: 1.25rem;
}

/* Visible keyboard focus */
.leaflet-bar a:focus-visible,
.leaflet-control a:focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
  border-radius: .5rem;
}

/* Ensure Lighthouse reads markers as ≥48px tap targets */
.leaflet-marker-icon.accessible-marker {
  width: 56px !important;
  height: 56px !important;
}

/* Strong color for attribution links (and underline for clarity) */
.leaflet-control-attribution a {
  color: #111 !important;
  text-decoration: underline;
}

/* stats box under the map, keep it high-contrast */
.route-info-box {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.1);
  padding: .5rem .75rem;
  border-radius: .5rem;
}

  /*Footer*/

  .footer-left {
    background-color: var(--primary-accent-color);
  }

  .footer-right {
    background-color: lightgrey;
    color: black;
  }

  .social-link {
   color: white; /* default icon color */
   transition: color 0.3s ease, transform 0.2s ease;
  }

  .social-link:hover {
    color: var(--button-color-bg);
    transform: scale(1.2); /* optional "zoom" effect on hover */
  }

  /* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {

  #why-experience, #why-active {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #why-experience>div,
    #why-active>div {
        width: 75%;
    }

    #why-active>div {
        text-align: end;
        align-self: flex-end;
    }
  }

  @media screen and (min-width: 1200px) {    
    /* Reasons section */
    #why-take-tour {
        display: flex;
        flex-direction: row;
    }

    #why-take-tour > div {
        flex: 1;
    }

    #why-image {
        order: 0
    }

    #why-active {
        order: 1;
    }

    #why-experience > div {
        align-self: flex-start;
    }

    #why-active > div {
        align-self: flex-end;
    }
}

 /*Region Cards*/

  .card-img-top {
    max-height: 160px;
    object-fit: cover;
  }

  .region-card {
    margin: 20px;
    justify-content: center;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

.fixed-title-height {
  height: 3rem;
}

/*Media Query for Generic Section Margins Top/Bottom*/

@media (max-width: 768px) {
  :root {
    --section-margin: 60px;
  }
}

@media (max-width: 480px) {
  :root {
    --section-margin: 40px;
  }
}