/* Services dropdown for the service page topbars.
   Loaded alongside the page's own stylesheet, so it reuses the :root tokens
   (--surface, --brand-deep, --line, --shadow) already defined there. */

.sahi-svc-dd {
  position: relative;
  display: inline-block;
}

/* Invisible bridge across the gap between the toggle and the menu, so moving the
   pointer down to the menu does not pass through un-hovered space and close it. */
.sahi-svc-dd::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

/* Button reset, then matched to .nav-link so it sits flush with the other links.
   color is `inherit`, not `var(--muted)`: the sibling links are <a>s, and
   `.sahi-advisor-page a { color: inherit }` outranks `.nav-link`'s own colour,
   so they actually paint the page's --text. A <button> escapes that rule, so
   hardcoding --muted here would render this one link visibly lighter. */
.sahi-svc-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  color: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Same hover treatment as .nav-link:hover. */
.sahi-svc-dd-toggle:hover,
.sahi-svc-dd.open .sahi-svc-dd-toggle,
.sahi-svc-dd:focus-within .sahi-svc-dd-toggle {
  background: rgba(22, 195, 227, 0.1);
  color: var(--brand-deep);
}

.sahi-svc-dd-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.18s ease;
}

.sahi-svc-dd.open .sahi-svc-dd-caret,
.sahi-svc-dd:focus-within .sahi-svc-dd-caret {
  transform: rotate(180deg);
}

.sahi-svc-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 268px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  /* Two-layer shadow: a wide ambient pool plus a tight contact edge, so the
     panel reads as lifted off the page rather than smudged onto it. */
  box-shadow: 0 20px 44px rgba(13, 143, 170, 0.16), 0 2px 6px rgba(13, 143, 170, 0.06);

  /* Hidden by default; visibility keeps it out of the tab order while closed. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* Opened by: the .open class (touch, where there is no hover), or keyboard focus. */
.sahi-svc-dd.open .sahi-svc-dd-menu,
.sahi-svc-dd:focus-within .sahi-svc-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Opened by hover — only on devices that genuinely hover, so a tap on a
   touchscreen does not leave the menu stuck open. */
@media (hover: hover) {
  .sahi-svc-dd:hover .sahi-svc-dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .sahi-svc-dd:hover .sahi-svc-dd-caret {
    transform: rotate(180deg);
  }
}

/* Every state names :visited explicitly. The theme's style.css carries
   `a:visited { color: #800080 }` at specificity (0,1,1), which outranks a bare
   `.sahi-svc-dd-item` (0,1,0) — that is what turned already-visited services
   purple while the rest of the menu stayed dark. */
.sahi-svc-dd-item,
.sahi-svc-dd-item:visited {
  position: relative;
  display: flex;
  align-items: center;
  /* Left padding reserves room for the is-current pill on every item, so the
     labels stay aligned whichever one is marked. */
  padding: 10px 12px 10px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease;
}

.sahi-svc-dd-item:hover,
.sahi-svc-dd-item:focus-visible {
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.sahi-svc-dd-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* Current page: tinted and marked with a pill so it reads without relying on colour alone. */
.sahi-svc-dd-item.is-current,
.sahi-svc-dd-item.is-current:visited {
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 700;
}

.sahi-svc-dd-item.is-current::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 3px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 999px;
  background: var(--brand-deep);
}

/* Mobile nav additions */
.sahi-svc-mobile-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-family: "Urbanist", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  border: 1px solid rgba(13, 143, 170, 0.14);
  background: rgba(255, 255, 255, 0.9);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sahi-svc-mobile-heading::-webkit-details-marker { display: none; }

.sahi-svc-mobile-group { grid-column: 1 / -1; margin: 0; }
.sahi-svc-mobile-group[open] .sahi-svc-mobile-heading {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 10px 22px rgba(13, 143, 170, 0.2);
}
.sahi-svc-mobile-group[open] { margin-bottom: 4px; }
.sahi-svc-mobile-items {
  display: grid;
  gap: 6px;
  padding: 8px 0 2px;
}
/* The descendant selector is (0,2,0), which already outranks both the theme's
   `a:visited` (0,1,1) and `.sahi-advisor-page a:visited` (0,1,2) — no
   !important needed to hold the colour. */
.sahi-svc-mobile-items .mobile-nav-link {
  margin-left: 0;
  margin-right: 0;
  color: var(--text);
  border-color: rgba(13, 143, 170, 0.14);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 3px 10px rgba(13, 143, 170, 0.04);
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.sahi-svc-mobile-heading:focus-visible,
.sahi-svc-mobile-items .mobile-nav-link:focus-visible {
  outline: 3px solid rgba(22, 195, 227, 0.34);
  outline-offset: 2px;
}

.sahi-svc-mobile-items .mobile-nav-link:active {
  transform: scale(0.985);
  background: var(--brand-soft);
}

.sahi-svc-mobile-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}

.sahi-svc-mobile-group[open] .sahi-svc-mobile-caret {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* Ties the base rule above on specificity (0,2,0) and wins on source order. */
.sahi-svc-mobile-link.is-current,
.sahi-svc-mobile-link.is-current:visited {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-deep), #08778f);
  box-shadow: 0 8px 18px rgba(13, 143, 170, 0.18);
}

@media (hover: hover) {
  .sahi-svc-mobile-items .mobile-nav-link:not(.is-current):hover {
    color: var(--brand-deep);
    border-color: rgba(13, 143, 170, 0.34);
    background: var(--brand-soft);
    transform: translateX(3px);
  }

  .sahi-svc-mobile-heading:hover {
    color: var(--brand-deep);
    border-color: rgba(13, 143, 170, 0.32);
    background: var(--brand-soft);
  }

  .sahi-svc-mobile-group[open] .sahi-svc-mobile-heading:hover {
    color: #fff;
    background: linear-gradient(135deg, #11b7d6, #087f98);
  }
}

@media (max-width: 860px) {
  .sahi-svc-mobile-heading { padding: 11px 12px; }
}