.k9-primary-nav a {
  position: relative;
  font-size: .875rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  transition: color .15s;
}
.k9-primary-nav a::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 0;
  height: 1px; width: 0;
  background: var(--accent);
  transition: width .15s;
}
.k9-primary-nav a:hover { color: var(--primary); }
.k9-primary-nav a:hover::after { width: 100%; }


.menu,
.menu-item {
    list-style: none;
    list-style-type: none;
}

.menu-item::marker {
    content: "";
}


/* =========================================================
   PRIMARY NAV DROPDOWN
   ========================================================= */

.k9-primary-nav .menu-item {
    position: relative;
}


/* Hide submenu by default */
.k9-primary-nav .sub-menu {
    display: none;

    position: absolute;
    top: calc(100% + 12px);
    left: 0;

    min-width: 280px;
    margin: 0;
    padding: 8px;

    list-style: none;

    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.10);

    z-index: 1000;
}


/* Invisible bridge between Services and dropdown.
   Prevents dropdown closing while mouse moves down. */
.k9-primary-nav .sub-menu::before {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    top: -14px;

    height: 14px;
}


/* Show submenu */
.k9-primary-nav .menu-item-has-children:hover > .sub-menu,
.k9-primary-nav .menu-item-has-children:focus-within > .sub-menu {
    display: block;
}


/* Submenu items */
.k9-primary-nav .sub-menu .menu-item {
    display: block;
    width: 100%;
}


/* Submenu links */
.k9-primary-nav .sub-menu a {
    display: block;

    width: 100%;
    padding: 10px 12px;

    font-size: 0.875rem;
    line-height: 1.4;

    white-space: normal;

    border-radius: 9px;
}


/* Don't show the normal underline animation inside dropdown */
.k9-primary-nav .sub-menu a::after {
    display: none;
}


/* Dropdown item hover */
.k9-primary-nav .sub-menu a:hover {
    background: color-mix(
        in oklab,
        var(--primary) 8%,
        transparent
    );

    color: var(--primary);
}


/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

/*
 * We use ::before because your existing CSS already uses
 * a::after for the animated underline.
 */

.k9-primary-nav > .menu-item-has-children > a::before {
    content: "⌄";

    position: absolute;
    right: -14px;
    top: 50%;

    transform: translateY(-55%);

    font-size: 12px;
    line-height: 1;

    color: currentColor;
}


/* Give parent link room for arrow */
.k9-primary-nav > .menu-item-has-children > a {
    margin-right: 10px;
}