/*
 * The secondary-services dropdown, shared by both navigation bars.
 *
 * The site grew to eight destinations across the top, which is more than
 * anybody reads and more than fits a laptop without the row scrolling
 * sideways. Cleaning and Monuments earn their place; Resetting, One-for-One,
 * the FAQ and the service-area index are all things people look for once they
 * are already interested, so they live one press away instead of competing for
 * the same glance.
 *
 * Two navigation markups exist on the site — `.nav-link` inside `.nav-links`
 * on the funnel pages, `.page-tab` inside `.page-tabs` on the three that
 * predate it. Rather than fork the dropdown, both are styled here off the
 * `data-nav-more` hook, and the trigger simply reuses whichever link class its
 * own bar already uses so it looks like the tabs beside it.
 *
 * The panel is `position: fixed` and placed by script for one specific reason:
 * both navigation pills set `overflow-x: auto` so they can scroll sideways on a
 * phone, and an absolutely positioned menu inside a scroll container gets
 * clipped at the pill's edge. Fixed positioning escapes that without needing
 * either pill rewritten.
 */

[data-nav-more] { position: relative; flex: none; display: inline-flex; }

/* The trigger is a button so it can carry aria-expanded, but it sits in a row
   of links, so everything a button brings with it is taken back off. */
.nav-more__trigger {
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  gap: 6px;
  justify-content: center;
}
.nav-more__trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
  transition: transform .15s ease;
}
.nav-more__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Open, or sitting on one of the pages inside it, the trigger reads as current
   in exactly the way the flat tabs do. */
.nav-more__trigger[aria-expanded="true"],
.nav-more__trigger[data-nav-current="true"] { background: #171816; color: #fff; }

.nav-more__menu {
  position: fixed;
  z-index: 60;
  min-width: 232px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  border: 1px solid rgba(23, 24, 22, .17);
  border-radius: 16px;
  background: #fdfcf9;
  box-shadow: 0 18px 40px rgba(23, 24, 22, .18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-more__menu[hidden] { display: none; }
.nav-more__item {
  display: block;
  border-radius: 11px;
  padding: 10px 12px;
  color: #171816;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}
.nav-more__item small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  opacity: .62;
}
.nav-more__item:hover,
.nav-more__item:focus-visible { background: rgba(23, 24, 22, .07); }
.nav-more__item[aria-current="page"] { background: #171816; color: #fff; }
.nav-more__item[aria-current="page"] small { opacity: .75; }

/* With the row down to five destinations there is no longer anything to scroll
   past on a laptop, so the sideways scroll only has to survive on a phone. */
@media (min-width: 1101px) {
  .nav-links, .page-tabs { overflow-x: visible; }
}

/* The footer carries the whole navigation in plain links on every page: the
   dropdown is a convenience, this is the guarantee that no destination is
   reachable only through script, and it gives crawlers a flat path between
   every page without a single extra tab across the top. */
.footer-nav { display: block; line-height: 2; }
.footer-nav a { white-space: nowrap; }