/* Simple theme styling for Zion Safari with a blurred background image */
:root{
  --bg-image: url('animals.jpg');
  --bg-blur: 100px; /* adjust blur strength */
  --bg-scale: 1.04; /* scale so blurred edges don't show */
  --overlay-dark: rgba(0,0,0,0.35); /* dark overlay to increase contrast */
}

html, body {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  color: #222;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  /* keep a plain background color as fallback */
  background-color: #f8fafc;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Full-screen blurred background layer (behind all page content) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1; /* behind everything */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(var(--bg-scale));
  filter: blur(var(--bg-blur)) brightness(0.9);
  will-change: transform, filter;
}

/* A subtle overlay on top of the blurred image to improve text contrast */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12));
  pointer-events: none;
}

/* Existing UI tweaks */
.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Jumbotron now uses a semi-transparent background so the blurred image shows through */
.jumbotron {
  background: rgba(255,255,255,0.85);
  /* fallback background-image removed (we're using the global blurred background) */
  color: #111;
  text-shadow: none; /* remove heavy shadow since overlay improves contrast */
  border-radius: .5rem;
  padding: 2rem;
}

/* Card backgrounds slightly translucent to show the blur behind while keeping readability */
.card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.04);
}

/* Slight adjustments for the right-column About card */
.card .card-body h5, .card .card-body h6 {
  color: #0b3948;
}

/* Responsive tune-ups */
@media (max-width: 768px) {
  body::before {
    filter: blur(calc(var(--bg-blur) * 0.8)) brightness(0.9);
    transform: scale(1.02);
  }
  .jumbotron {
    padding: 1.25rem;
  }
}

/* Accessibility: high-contrast mode consideration (prefers-contrast) */
@media (prefers-contrast: more) {
  body::before { filter: blur(6px) brightness(0.8); }
  .jumbotron, .card { background: #fff; }
}
/* Existing styles (keep the rest of your styles) */

/* Ensure navbar is the positioning anchor for the dropdown menu */
.navbar {
  position: relative;
  z-index: 1100; /* sit above the background but allow collapsed menu to overlay content */
}

/* Mobile: make the collapsed menu dropdown visually sit under the navbar */
@media (max-width: 991.98px) {
  /* make the collapsible element positioned absolute under the navbar */
  .navbar .navbar-collapse {
    position: absolute;
    top: 100%; /* directly under the navbar */
    left: 0;
    right: 0;
    background: rgba(34,34,34,0.98); /* near-opaque dark background matching navbar */
    padding: 1rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    overflow: hidden;
    transition: height .28s ease, opacity .28s ease;
  }

  /* ensure the inner nav links are visible and stacked */
  .navbar .navbar-collapse .navbar-nav {
    margin-top: 0;
    flex-direction: column;
  }

  .navbar .navbar-collapse .nav-link {
    color: #fff;
    padding: .5rem 0;
  }

  .navbar .navbar-collapse .d-flex {
    margin-top: .75rem;
    justify-content: flex-start;
  }

  /* Override Bootstrap's .collapse display behavior so Bootstrap's inline height animation works */
  .navbar .navbar-collapse.collapse {
    display: block !important;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* When the collapse is shown, allow it to expand (Bootstrap sets an inline height style) */
  .navbar .navbar-collapse.collapse.show {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Desktop: keep the default look */
@media (min-width: 992px) {
  .navbar .navbar-collapse {
    position: static;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
}
/* Footer (dark) adjustments */
.site-footer {
  background-color: #111827; /* deep dark */
  color: #e5e7eb; /* light gray text */
  border-top: 1px solid rgba(255,255,255,0.04);
}

.site-footer a.btn.btn-outline-light {
  border-color: rgba(255,255,255,0.12);
  color: #f8fafc;
}

.site-footer a.btn.btn-outline-light:hover {
  background-color: rgba(255,255,255,0.06);
  color: #fff;
}

.site-footer .text-muted {
  color: rgba(255,255,255,0.6) !important;
}

@media (max-width: 575.98px) {
  .site-footer .col-md-4 {
    text-align: center !important;
  }
  .site-footer .d-inline-flex {
    justify-content: center;
  }
}
/* Sidebar styles for index page (desktop + mobile offcanvas) */

/* Ensure the main layout has smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Sidebar styling for desktop */
.sidebar {
  position: sticky;
  top: 90px; /* gives space under the navbar */
  padding-top: 0.25rem;
}

/* Make nav links more prominent in the sidebar */
.sidebar .nav-link {
  color: #0b3948;
  padding-left: 0;
  font-weight: 600;
}

/* Small cards inside sidebar match other cards */
.sidebar .card {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.04);
}

/* Offcanvas adjustments to better match site theme */
.offcanvas-end {
  background: #fff;
}

/* Ensure offcanvas header looks good */
.offcanvas-header {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* Slight spacing for the Offcanvas link list */
.offcanvas-body .nav-link {
  padding-left: 0;
  color: #0b3948;
  font-weight: 600;
}

/* Keep cards readable when background blurred */
.card .card-body h5, .card .card-body h6 {
  color: #0b3948;
}

/* Responsive tweak: hide desktop sidebar on small screens (we already used d-none d-lg-block) */
/* No extra rule required, but ensure offcanvas button looks correct */
@media (max-width: 991.98px) {
  .offcanvas .btn { width: 100%; }
}