/* ---------------------------------------------------------------------------
   Site navigation, 2026-09-06.

   One rail on the left of every page, homepage included; nothing on top.
   It shows the whole site at once, in the order the site is organised:

       collection            MERIT Hydro · 90 m
         product               FullBasin
           page                  Where does a pixel drain to?

   Planned collections stay in the list, greyed, so the three-way split is
   visible from any page. Indentation carries the hierarchy; no boxes, no
   uppercase group labels, no second navigation anywhere.

   Class names are new (fh-nav-*), so no rule from the older stylesheets
   applies to anything inside the rail. Load this file last.
--------------------------------------------------------------------------- */

.fh-rail {
  position: fixed; inset: 0 auto 0 0; z-index: 500;
  display: flex; flex-direction: column; width: 252px;
  padding: 30px 0 20px; overflow-y: auto;
  border-right: 1px solid #e4e9eb; background: #fafbfb;
  font-family: var(--sans, Inter, system-ui, sans-serif);
}
body.fh-railed { margin-left: 252px; }

.fh-rail-brand {
  display: block; margin: 0 0 30px; padding: 0 20px;
  color: #183b48; font: 600 22px/1.25 var(--sans); letter-spacing: -.03em;
  text-decoration: none;
}

.fh-nav { display: block; }
.fh-nav-group + .fh-nav-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid #e6ebed; }

.fh-nav-collection {
  display: block; position: relative; padding: 7px 20px 9px; color: #183b48;
  font: 600 14px/1.5 var(--sans); letter-spacing: -.005em; text-decoration: none;
}
.fh-nav-name { display: block; }
a.fh-nav-collection:hover { color: #17596c; background: #f0f4f5; }
a.fh-nav-collection:hover .fh-nav-meta { color: #6f8791; }
.fh-nav-meta {
  display: block; margin: 2px 0 0; padding: 0;
  color: #8a9aa1; font: 400 12px/1.5 var(--sans); letter-spacing: 0;
}
.fh-nav-list { margin-top: 3px; }

.fh-nav-product {
  display: block; padding: 7px 20px 7px 32px; color: #2c4c58;
  font: 500 14px/1.5 var(--sans); text-decoration: none;
}
a.fh-nav-product:hover { color: #17596c; background: #f0f4f5; }

.fh-nav-page {
  display: block; position: relative; padding: 7px 20px 7px 44px;
  color: #526b76; font: 400 13.5px/1.55 var(--sans); text-decoration: none;
}
a.fh-nav-page:hover { color: #17596c; background: #f0f4f5; }

/* The current page is the only filled state in the rail. */
body.fh-railed .fh-rail .is-here { color: #17596c; font-weight: 600; background: #eef3f4; }
body.fh-railed .fh-rail .is-here::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: #237286;
}
.fh-nav-product.is-here::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: #237286;
}
.fh-nav-product { position: relative; }

/* A hairline splits the three questions from the two ways of getting data. */
.fh-nav-page.fh-nav-cut { margin-top: 9px; padding-top: 14px; border-top: 1px solid #e6ebed; }

/* Not yet published: still listed, never clickable. */
.fh-nav-product.is-soon, .fh-nav-group.is-planned .fh-nav-collection { color: #97a6ac; font-weight: 500; }
.fh-nav-product.is-soon em { font-style: normal; color: #a7b4b9; font-size: 12px; }
.fh-nav-group.is-planned .fh-nav-meta { color: #a7b4b9; }

.fh-rail-foot { margin-top: auto; padding: 26px 20px 0; }
.fh-rail-foot a, .fh-rail-foot button {
  display: block; margin: 0 0 7px; padding: 0; border: 0; background: none;
  color: #71868f; font: 400 12.5px/1.6 var(--sans); text-align: left; text-decoration: none; cursor: pointer;
}
.fh-rail-foot a:hover, .fh-rail-foot button:hover { color: #17596c; }

.fh-rail-toggle { display: none; }

@media (max-width: 900px) {
  .fh-rail {
    position: relative; inset: auto; width: auto; padding: 14px 0 10px;
    border-right: 0; border-bottom: 1px solid #e4e9eb;
  }
  body.fh-railed { margin-left: 0; }
  .fh-rail-brand { margin: 0; }
  .fh-rail-toggle {
    display: block; margin-top: 10px; padding: 8px 20px; color: #4c636e;
    font: 500 14px/1.5 var(--sans); list-style: none; cursor: pointer;
  }
  .fh-rail-toggle::-webkit-details-marker { display: none; }
  .fh-rail-toggle::after {
    content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .fh-rail-menu[open] .fh-rail-toggle::after { transform: rotate(225deg); margin-bottom: -2px; }
  .fh-rail-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6ebed; }
}

/* ---------------------------------------------------------------------------
   Second pass, 2026-09-07. Everything above was buried under four later
   passes that turned each link into a bordered card with an arrow, wrapped
   the collection in a disclosure, and put a check mark on the open one. A
   product then looked exactly like a page, and three levels read as one flat
   list. Those passes are gone; the rail is back to the design at the top of
   this file. Nesting does the work: <ul> inside <ul>, indented, with only the
   current page filled in.
--------------------------------------------------------------------------- */

.fh-nav-list { margin: 0; padding: 0; list-style: none; }
.fh-nav-list .fh-nav-list { margin: 0 0 4px; }

h2.fh-nav-heading { margin: 0; font: inherit; }
p.fh-nav-label {
  margin: 14px 0 3px; padding: 0 20px 0 32px;
  color: #93a5ac; font: 400 11.5px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase;
}

.fh-nav-product { padding-left: 32px; }
.fh-nav-page { display: flex; gap: 9px; padding-left: 44px; }
.fh-nav-page b {
  flex: 0 0 9px; color: #a3b2b8;
  font: 400 12px/1.62 var(--mono, ui-monospace, monospace);
}
.fh-nav-page span { display: block; min-width: 0; }
.fh-nav-page.is-here b { color: #17596c; }

.fh-nav-overview {
  display: block; position: relative; padding: 7px 20px 7px 32px;
  color: #526b76; font: 400 13.5px/1.55 var(--sans); text-decoration: none;
}
a.fh-nav-overview:hover { color: #17596c; background: #f0f4f5; }
body.fh-railed .fh-rail a.fh-nav-collection.is-here { background: #eef3f4; }

/* Not yet published: listed, never a link, never in the tab order. */
.fh-nav-product.is-soon { padding-top: 11px; cursor: default; }
.fh-nav-product.is-soon em {
  display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 3px;
  background: #eef1f2; color: #7d8d94; font-size: 12px; font-style: normal;
}

/* The current page is filled; keyboard focus stays its own, separate ring. */
body.fh-railed .fh-rail a:focus-visible { outline: 2px solid #17596c; outline-offset: -2px; }

/* The rail is 252px wide on every page; an older stylesheet still says 264px. */
body.fh-railed.geo-site, body.fh-railed.fh-home { margin-left: 252px; }
@media (max-width: 900px) { body.fh-railed.geo-site, body.fh-railed.fh-home { margin-left: 0; } }

/* The footer button carries an icon from an older stylesheet; not in the rail. */
body.fh-railed .fh-rail .phone-btn::before { display: none; }

/* The map-view switch controls the page, so it now sits above the map, as one
   small pair of buttons. geoscience.css styles anything with this class as a
   full-width stack for the old sidebar, and its selectors carry two element
   names, so these have to match that weight to win. */
.gs-viewbar { margin: 0 0 20px; }
body.geo-site .gs-viewbar .gs-subnav {
  display: inline-flex; align-items: stretch; gap: 0; margin: 0; padding: 0;
  border: 1px solid #cfdade; border-left: 1px solid #cfdade; border-radius: 6px;
  overflow: hidden; background: #fff;
}
body.geo-site .gs-viewbar .gs-subnav button,
body.geo-site .gs-viewbar .gs-subnav .gs-view-option {
  display: block; width: auto; min-height: 0; margin: 0; padding: 9px 15px;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: #4c636e;
  font: 500 13.5px/1.45 var(--sans); text-align: left; white-space: nowrap; cursor: pointer;
}
body.geo-site .gs-viewbar .gs-subnav > * + * { border-left: 1px solid #e3eaec; }
body.geo-site .gs-viewbar .gs-subnav button strong,
body.geo-site .gs-viewbar .gs-subnav .gs-view-option strong { font: inherit; }
body.geo-site .gs-viewbar .gs-subnav button.is-on,
body.geo-site .gs-viewbar .gs-subnav .gs-view-option.is-on { background: #17596c; color: #fff; }
body.geo-site .gs-viewbar .gs-subnav button.is-on::before { display: none; }
body.geo-site .gs-viewbar .gs-subnav button:hover { background: #eef3f4; }
body.geo-site .gs-viewbar .gs-subnav button.is-on:hover { background: #17596c; }
body.geo-site .gs-viewbar .gs-subnav .gs-view-option { cursor: default; }
body.geo-site .gs-viewbar .gs-subnav .gs-view-option.is-unavailable,
body.geo-site .gs-viewbar .gs-subnav .gs-view-option.is-unavailable strong { color: #a7b4b9; }
body.geo-site .gs-viewbar .gs-subnav .fr-view-state { margin-left: 5px; color: inherit; font-size: 12px; opacity: .85; }