/*!
 * Goodin Header - Lean CSS
 * Goal: replicate the Ferguson-style header layout using Bootstrap 5.3 classes first,
 * with ONLY the minimum custom CSS needed for spacing, logo sizing, and nav hover behavior.
 *
 * CHANGELOG (per latest request):
 *  - Added --goodin-goldenrod token + hover color behavior (no underlines).
 *  - Top bar font-size set to 0.75rem.
 *  - Utility links font-size set to 0.85rem, Create Account forced no-wrap.
 *  - Logo max-height reduced to 50px.
 *  - Main header vertical padding tightened.
 *  - Container max-width now 80% (not 1312px).
 *  - Bottom nav: no bottom padding/margin; hover bg is 50% midnight, text remains white,
 *    slight top border-radius; extra horizontal padding for nav-links.
 *  - Cart removed (markup change).
 */
:root {
  /* If your global theme already defines these, these are harmless fallbacks. */
  --goodin-blue: #0061aa;
  --goodin-midnight: #0a2433;
}

/* =========================================
 Layout container override (do NOT use .container)
 ========================================= */
.goodin-header-container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

/* =========================================
 Link policy for header
 - No underlines
 - Hover => goldenrod, EXCEPT main nav uses midnight overlay bg + white text
 ========================================= */
.goodin-header a {
  text-decoration: none !important;
}

.goodin-link:hover, .goodin-link:focus,
.goodin-topbar-link:hover,
.goodin-topbar-link:focus {
  color: var(--goodin-goldenrod) !important;
  text-decoration: none !important;
}

/* Force no wrap for specific items */
.goodin-nowrap {
  white-space: nowrap;
}

/* =========================================
 Top bar
 ========================================= */
.bg-goodin-midnight {
  background-color: var(--goodin-midnight) !important;
}

.goodin-topbar {
  font-size: 0.75rem;
}
.goodin-topbar-link {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: nowrap;
}

/* =========================================
 Logo
 ========================================= */
.goodin-logo {
  max-height: 50px;
  height: auto;
  width: auto;
}

/* =========================================
 Search
 - Match the structural pattern from search.txt while keeping prior width feel
 ========================================= */
.goodin-search {
  max-width: 860px;
}
.goodin-search-input {
  border-radius: 0.25rem;
}
.goodin-search-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
}

/*  .gooddin-search-group, helps keep the search visually compact */
/* =========================================
 Utility links
 ========================================= */
.goodin-utility-links {
  font-size: 0.85rem;
}

/* =========================================
 Main nav: spacing + hover behavior
 - No bottom gap
 - Hover bg: midnight @ 50% opacity, text remains white
 - Rounded top corners for hover background
 - Extra horizontal padding (px-3 feel)
 ========================================= */
.goodin-main-nav {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.goodin-main-nav .navbar-nav .nav-link {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  padding-left: 1rem; /* ~= px-3 */
  padding-right: 1rem; /* ~= px-3 */
  color: var(--goodin-white) !important;
  white-space: nowrap;
  border-radius: 0.35rem 0.35rem 0 0;
  /* Main nav hover: keep white text, overlay bg */
}
.goodin-main-nav .navbar-nav .nav-link:hover, .goodin-main-nav .navbar-nav .nav-link:focus {
  background-color: rgba(10, 36, 51, 0.5);
  color: var(--goodin-white) !important;
  text-decoration: none !important;
}
.goodin-main-nav .navbar-nav .show > .nav-link {
  background-color: rgba(10, 36, 51, 0.5);
  color: var(--goodin-white) !important;
}
.goodin-main-nav .dropdown-menu {
  /* Dropdown menu base */
  border-radius: 0;
}

/* Mega menu helpers */
.goodin-mega-menu .list-group-item {
  border-radius: 0;
}
.goodin-mega-menu .list-group-item.active {
  background-color: var(--goodin-midnight);
  border-color: var(--goodin-midnight);
  color: var(--goodin-white);
}

.goodin-mega-panel {
  background: var(--goodin-white);
  border-radius: 0.5rem;
}

.goodin-mega-link {
  color: var(--goodin-midnight);
  padding: 0.25rem 0;
}
.goodin-mega-link:hover, .goodin-mega-link:focus {
  color: var(--goodin-goldenrod);
}

/* =========================================================
 SUBMENU + MEGA MENU ADDITIONS (compatible with latest partial)
 Applies to All Products dropdown markup found in _AllProductsMegaMenu.cshtml:
   - .goodin-allproducts-dropdown (dropdown-menu wrapper)
   - .goodin-allproducts-submenu (left vertical list)
   - .goodin-submenu-link (left item links)
   - .goodin-mega-panel (right panel)
   - .goodin-mega-img (tile images)
 Non-breaking: does not modify prior header rules.
 ========================================================= */
/* Ensure dropdown sits above other content */
.goodin-allproducts-dropdown {
  z-index: 3000;
}
.goodin-allproducts-dropdown.dropdown-menu {
  /* Fit content width (not full screen), with comfortable padding + shadow, and flush to header bottom */
  width: auto !important;
  min-width: 22rem;
  max-width: min(70rem, 95vw);
  margin-top: 0 !important;
  border: 0 !important;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.18);
  background: var(--goodin-white);
  color: #212529;
}

/* Left submenu: no borders, white bg, dark text */
.goodin-allproducts-submenu {
  background: var(--goodin-white);
  color: #212529;
}

/* Left submenu links: no separators; hover/active => primary bg + white text */
.goodin-submenu-link {
  border: 0 !important;
  text-decoration: none !important;
  color: #212529 !important;
  white-space: nowrap;
}
.goodin-submenu-link:hover, .goodin-submenu-link:focus, .goodin-submenu-link.active {
  background: var(--goodin-blue) !important;
  color: var(--goodin-white) !important;
}

/* Right mega panel: light bg */
.goodin-mega-panel {
  background: var(--bs-light, #f8f9fa) !important;
}

/* Tile images: <=115px square, soft border, no rounding */
.goodin-mega-img {
  width: 115px;
  height: 115px;
  max-width: 115px;
  max-height: 115px;
  object-fit: contain;
  border: 1px solid var(--bs-border-color, #dee2e6) !important;
  border-radius: 0 !important;
}