/*
================================================================
V4: Header with Background Image (Menu Aligned to Bottom)
================================================================
*/

/* 1. Hide the original logo element completely. */
.navbar-brand {
  display: none !important;
}

/* 2. Apply the image as a background to the main header container. */
header.container-header {
  background-image: url('/images/bigtop_hero.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 200px; /* Adjust this value to make your header taller or shorter */
  
  /* --- THIS IS THE KEY CHANGE --- */
  /* Use the grid system to align the menu to the BOTTOM of the header */
  display: grid;
  align-content: end; /* Changed from 'center' to 'end' */
}

/* 3. Center the menu itself horizontally. */
/* We make its container full-width and then center the list inside it. */
header.container-header .container-nav {
  width: 100%;
}
header.container-header ul.mod-menu {
  justify-content: center;
}

/* 4. Improve menu text readability against the background. */
header.container-header ul.mod-menu a {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.1rem;
  /* Adds a subtle shadow behind the text to make it "pop" */
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
}

/* 5. Style the active menu item */
header.container-header ul.mod-menu li.active > a {
  color: #a7c9ff; /* Give the currently active page link a different color */
}