/* =========================================================
   Navbar dropdown refinement only
   Scope: dropdown menus and the caret icon
   ========================================================= */

/* 1) Replace Bootstrap caret triangle with a slim chevron */
.navbar .dropdown-toggle::after {
    /* remove Bootstrap triangle */
    border: 0 !important;
  
    /* slim chevron using inline SVG so it looks crisp */
    content: "" !important;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 0.35rem;
    vertical-align: -0.05em;
  
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
  
    /* dark chevron for your white navbar */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%23122a38' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    opacity: 0.75;
  }
  
  /* On hover, slightly stronger chevron */
  .navbar .dropdown-toggle:hover::after,
  .navbar .dropdown-toggle:focus-visible::after {
    opacity: 0.95;
  }
  
  /* Rotate chevron when open */
  .navbar .show > .dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 0.95;
  }
  
  /* 2) Dropdown menu: cleaner shape, less chunky */
  .navbar .dropdown-menu {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 8px;
    margin-top: 8px;
  
    /* refined shadow, not heavy */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  }
  
  /* 3) Dropdown items: better spacing and hover */
  .navbar .dropdown-item {
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 400;
    color: var(--primary-dark) !important;
  }
  
  /* Subtle hover that fits your site */
  .navbar .dropdown-item:hover,
  .navbar .dropdown-item:focus-visible {
    background-color: rgba(11, 70, 88, 0.05);
    outline: none;
  }
  
  /* Keep your existing active style but ensure it does not feel bulky */
  .navbar .dropdown-item.active,
  .navbar .dropdown-item:active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
  }
  
  /* 4) Optional: slightly tighten dropdown divider if you use it */
  .navbar .dropdown-divider {
    margin: 6px 6px;
    opacity: 0.25;
  }
  
  /* 5) Mobile: make dropdown menus feel less like a floating box inside collapse */
  @media (max-width: 991.9px) {
    .navbar .dropdown-menu {
      margin-top: 6px;
      padding: 6px;
      box-shadow: none;
      border-radius: 10px;
    }
  
    .navbar .dropdown-item {
      padding: 10px 10px;
    }
  }

  /* =========================================================
   Navbar dropdown – visual continuity with header
   ========================================================= */

/* Dropdown container: flat top, subtle separation, light shadow */
.navbar .dropdown-menu {
    /* flat top edge */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  
    /* keep bottom rounding */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  
    /* reinforce the top edge like the navbar */
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  
    /* refined shadow that matches a header line, not a card */
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.06),
      0 12px 24px rgba(0, 0, 0, 0.22);
  }
  
  /* Ensure menu aligns cleanly under the toggle */
  .navbar .dropdown-menu[data-bs-popper] {
    margin-top: 0;
  }
  
  /* Optional: slightly reduce perceived thickness at the very top */
  .navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
  }

  /* =========================================================
   Navbar dropdown: dock to navbar (Bootstrap-native)
   ========================================================= */

/* Remove the built-in dropdown spacer so the menu touches the toggle */
.navbar {
    --bs-dropdown-spacer: 0rem;
  }
  
  /* If you still see a hairline gap, make it slightly negative */
  .navbar .dropdown-menu {
    margin-top: 6px !important;
  }

  /* Ensure top-row works correctly when applied to the navbar */
nav.top-row {
    height: auto;
  }
  

  .navbar .container {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }