/* Generated by engine/products/state_pages.py from site/waterledger/mi/nav.css; edit that file and rerun. */
/* Water Ledger: the top bar (four main links and a More menu) and the footer's full list of pages. Shared by every page;
   loaded after each page's own styles. On phones the bar shows Calculator and a Menu with everything. */
.mast .nav { display: flex; gap: 20px; align-items: center; flex-wrap: nowrap; font-size: 0.93rem; }
.mast .nav > a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.mast .nav > a:hover, .mast .nav > a[aria-current="page"] { color: var(--water); }
.mast .nav > a[aria-current="page"] { font-weight: 600; }
.mast .navmore { position: relative; }
.mast .navmore > summary { list-style: none; cursor: pointer; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mast .navmore > summary::-webkit-details-marker { display: none; }
.mast .navmore > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 4px; }
.mast .navmore[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.mast .navmore .menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 230px; display: grid; gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
.mast .navmore .menu a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.mast .navmore .menu a:hover, .mast .navmore .menu a[aria-current="page"] { background: var(--water-soft); color: var(--water); }
.mast .navmore .menu .theme-btn { justify-self: start; margin: 6px 10px 4px; }
.mast .navmore .menu .sep { height: 1px; background: var(--line); margin: 4px 6px; }
.mast .navmore .menu .mob, .mast .navmore .lbl-m { display: none; }
@media (max-width: 680px) {
  .mast .nav { gap: 14px; }
  .mast .nav > a.pri { display: none; }
  .mast .navmore .menu .mob { display: block; }
  .mast .navmore .menu .sep.mob { display: block; }
  .mast .navmore .menu { left: 0; right: auto; }          /* the button sits near the left edge on a phone */
  .mast .navmore .lbl-m { display: inline; }
  .mast .navmore .lbl-d { display: none; }
}
footer .footlinks { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 18px; padding-block: 18px 4px; font-size: 0.88rem; }
footer .footlinks a { color: var(--muted); text-decoration: none; }
footer .footlinks a:hover { color: var(--water); text-decoration: underline; }