/* Add all template user customisations here to orevent over writing with future upgrades */

/* 1. Center the header and menu layout */
.container-header {
  display: flex !important;
  justify-content: center !important;
}

.container-nav, .navbar-nav {
  justify-content: center !important;
  width: 100% !important;
}

/* 2. THE CATCH-ALL DESKTOP HOVER (Targets all list structures) */
@media (min-width: 992px) {
  /* This catches ANY list item containing a nested list inside your menu */
  .mod-menu li:hover > ul,
  .mod-menu .dropdown:hover > .dropdown-menu,
  .navbar-nav .nav-item:hover > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    z-index: 1000 !important;
  }
}

/* 3. Dropdown Background Styling (Updated to capture ALL dropdown levels) */
.mod-menu .dropdown-menu, 
.navbar-nav .dropdown-menu,
.mod-menu ul ul {
  background-color: #f0f4f8 !important; /* Light grey with a subtle hint of blue */
  border: 1px solid #d1d9e6 !important; /* Soft border matching the tint */
  border-radius: 4px !important;       /* Slightly rounds the corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* Soft, modern shadow */
  padding: 0.5rem 0 !important;
}

/* Style the individual links inside ALL dropdown levels */
.mod-menu .dropdown-item,
.navbar-nav .dropdown-item,
.mod-menu ul ul a {
  color: #333333 !important; /* Dark grey text for optimal readability */
  padding: 0.5rem 1.5rem !important;
  display: block !important;
  width: 100% !important;
}

/* Change color when a user hovers over any subcategory link */
.mod-menu .dropdown-item:hover,
.navbar-nav .dropdown-item:hover,
.mod-menu ul ul a:hover {
  background-color: #e2eaf2 !important; /* Slightly deeper blue-grey highlight */
  color: #111111 !important;            /* Darker text on hover */
}

/* 4. Force Bootstrap variables to apply the blue-grey layout globally */
.navbar, .container-nav, .mod-menu {
  --bs-dropdown-bg: #f0f4f8 !important; /* Forces the initial dropdown background */
  --bs-dropdown-border-color: #d1d9e6 !important;
  --bs-dropdown-link-color: #333333 !important;
  --bs-dropdown-link-hover-bg: #e2eaf2 !important;
  --bs-dropdown-link-hover-color: #111111 !important;
}

/* Hard override for any remaining native Bootstrap dropdown containers */
ul.dropdown-menu[data-bs-popper] {
  background-color: #f0f4f8 !important;
}

/* 5. UNCONDITIONAL BACKGROUND FIX: Target all variations of initial dropdown lists */
.container-header .mod-menu ul,
.container-header .navbar-nav ul,
.container-header .dropdown-menu,
.container-nav .dropdown-menu,
.navbar-nav .dropdown-menu,
ul.dropdown-menu,
div.dropdown-menu {
  background: #f0f4f8 !important;
  background-color: #f0f4f8 !important;
}

/* Ensure that individual dropdown wrappers on the first tier don't retain white */
.mod-menu .nav-item.dropdown .dropdown-menu {
  background-color: #f0f4f8 !important;
}


/* End of user customisation of template - below only specifically for OSTimer countdow for Aviva walk countdown */

/* Forces color on the main outer container */
div[class*="ostimer"] {
    color: #ff0000 !important;
}

/* Forces color on any text links or spans inside the timer */
div[class*="ostimer"] *, 
div[class*="ostimer"] span {
    color: #ff0000 !important;
}