/* =============================================================================
   nav.css  —  Accessible fly-out navigation (disclosure pattern)

   Colour scheme: the original FileLocal black-and-white menu, restored from
   /images/3rdparty/menu/style.css (the obout EasyMenu skin this nav replaced):
       white bar / #000 text  ·  #000 hover chip / #FFF text
       #000 submenu panel / #FFF text  ·  #B4B4B4 hairline under the bar

   Structure: a top-level item with children is ONE control —
   <button class="site-nav__link site-nav__disclosure"> wrapping the label and
   the chevron — so clicking anywhere on the item opens its submenu. Items
   without children are plain <a class="site-nav__link">. There is no longer a
   split link/button row, so no internal divider and no :has() bridging rules.

   Accessibility (WCAG 2.2 AA):
     1.4.3  Contrast (Minimum) ....... 21:1 on every text/background pair
     1.4.11 Non-text Contrast ........ dual-tone focus ring, 21:1 either way
     1.4.1  Use of Color ............. hover/focus also underline, never colour alone
     2.4.7  Focus Visible ............ :focus-visible + :focus fallback
     2.4.11 Focus Not Obscured ....... 2px offset ring, never clipped
     2.5.8  Target Size (Minimum) .... whole item is the target: 40px tall,
                                       label width + chevron (all ≥ 24×24)
     2.3.3  Animation from Interactions  prefers-reduced-motion honoured
     Forced-colors (Windows High Contrast) fully supported
   ============================================================================= */

:root {
  --nav-bar-bg: #ffffff;
  --nav-bar-border: 1px solid #b4b4b4;
  --nav-text: #000000;
  --nav-hover-bg: #000000;
  --nav-hover-text: #ffffff;
  --nav-active-bg: #000000;
  --nav-sep: #b4b4b4;
  --nav-focus-inner: #ffffff;
  --nav-focus-outer: #000000;
  --nav-sub-bg: #000000;
  --nav-sub-text: #ffffff;
  --nav-sub-hover-bg: #ffffff;
  --nav-sub-hover-text: #000000;
  --nav-sub-border: #000000;
  --nav-sub-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.25);
}

/* Reset */
.site-nav__list,
.site-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav bar */
.site-nav__list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1px;
  background: var(--nav-bar-bg);
  /*    padding: 0 6px;*/
  /*border-top: 1px solid #bababa;*/
  border-top: var(--nav-bar-border);
  border-bottom: var(--nav-bar-border);
  margin-bottom: 30px;
}

/* Vertical separator */
.site-nav__sep {
  width: 1px;
  align-self: center;
  height: 18px;
  background: var(--nav-sep);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Item wrapper */
.site-nav__item {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Top-level control — styles the <a> and the <button> identically */
.site-nav__link {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 40px;
  padding: 5px 12px;
  font-family: verdana, geneva, sans-serif;
  font-weight: 700;
  color: var(--nav-text) !important;
  background: transparent;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 3px;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}

  .site-nav__link, .site-nav__link span {
    font-size: 14px;
  }
/* <button> defaults that would otherwise break the match with <a> */
button.site-nav__link {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Lock link colours against global a:link / a:visited rules elsewhere on
   the site — a purple "visited" link on the black panel would fail 1.4.3. */
.site-nav__link:link,
.site-nav__link:visited {
  color: var(--nav-text) !important;
  text-decoration: none;
}

/* Hover / pressed / open — black chip, white text, plus an underline so the
   state is not signalled by colour alone (1.4.1).

   NOTE: :focus is deliberately absent. A <button> keeps focus after a mouse
   click, so listing :focus here left the chip painted on after the submenu
   had already closed. Keyboard focus is handled by the :focus-visible rule
   below, which a mouse click does not match. */
.site-nav__link:hover,
.site-nav__link:active,
.site-nav__disclosure[aria-expanded="true"] {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-text) !important;
}

  .site-nav__link:hover,
  .site-nav__link:hover .site-nav__label,
  .site-nav__link:active,
  .site-nav__link:active .site-nav__label {
    text-decoration: underline;
  }

/* Keyboard focus gets the same chip. Kept as its own rule on purpose: an
   invalid selector invalidates the WHOLE comma-separated list, so putting
   :focus-visible next to :hover above would drop the hover state entirely
   in any browser that doesn't support it. */
.site-nav__link:focus-visible {
  background: var(--nav-hover-bg);
  color: var(--nav-hover-text) !important;
}

  .site-nav__link:focus-visible,
  .site-nav__link:focus-visible .site-nav__label {
    text-decoration: underline;
  }

/* Open parent stays black but is not underlined — the expanded panel
   beneath it already carries the state, and aria-expanded announces it. */
.site-nav__disclosure[aria-expanded="true"] {
  background: var(--nav-active-bg);
  text-decoration: none;
}

/* Chevron */
.site-nav__chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke-width: 2.5;
  transition: transform 0.18s ease;
  pointer-events: none;
}

.site-nav__disclosure[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

/* Focus ring — dual tone, visible on white bar and black panel alike */
.site-nav__link:focus-visible,
.site-nav__submenu a:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--nav-focus-inner), 0 0 0 5px var(--nav-focus-outer);
  position: relative;
  z-index: 1;
}

.site-nav__link:focus,
.site-nav__submenu a:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

/* Fallback for browsers without :focus-visible support.
   These fall back to :focus, which means the chip/ring can linger after a
   mouse click there — an acceptable trade for having any focus indicator at
   all (2.4.7). Modern browsers never enter this block. */
@supports not selector(:focus-visible) {
  .site-nav__link:focus,
  .site-nav__submenu a:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--nav-focus-inner), 0 0 0 5px var(--nav-focus-outer);
    position: relative;
    z-index: 1;
  }

  .site-nav__link:focus {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-text) !important;
    text-decoration: underline;
  }
}

/* Submenu panel — black */
.site-nav__submenu {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 185px;
  background: var(--nav-sub-bg);
  border: 1px solid var(--nav-sub-border);
  border-radius: 3px;
  box-shadow: var(--nav-sub-shadow);
  padding: 4px;
  display: none;
  z-index: 9999;
}

  .site-nav__submenu.is-open {
    display: block;
  }

  .site-nav__submenu li {
    list-style: none;
  }

  /* Submenu links — white text on black */
  .site-nav__submenu a {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-family: verdana, geneva, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--nav-sub-text) !important;
    background: transparent;
    text-decoration: none;
    border-radius: 0;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: background-color 0.1s, color 0.1s;
  }

    /* Lock against global a:visited rules — see note above */
    .site-nav__submenu a:link,
    .site-nav__submenu a:visited {
      color: var(--nav-sub-text) !important;
      text-decoration: none;
    }

    /* Hover / pressed — underline is the primary cue, as in the original menu,
       with the inverse chip reinforcing it (never colour alone, 1.4.1). */
    .site-nav__submenu a:hover,
    .site-nav__submenu a:active {
      background: var(--nav-sub-hover-bg);
      color: var(--nav-sub-hover-text) !important;
      text-decoration: underline;
      outline: 2px solid transparent !important;
    }

    /* :focus-visible, not :focus — a ctrl/middle-clicked link keeps focus
       instead of navigating, which would leave the row stuck inverted. */
    .site-nav__submenu a:focus-visible {
      background: var(--nav-sub-hover-bg);
      color: var(--nav-sub-hover-text) !important;
      text-decoration: underline;
    }

/* Reduced motion (2.3.3) */
@media (prefers-reduced-motion: reduce) {
  .site-nav__link,
  .site-nav__chevron,
  .site-nav__submenu a {
    transition: none;
  }
}

/* Forced colors / Windows High Contrast Mode */
@media (forced-colors: active) {
  .site-nav__list {
    border-bottom-color: CanvasText;
  }

  .site-nav__sep {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .site-nav__link,
  .site-nav__link:link,
  .site-nav__link:visited,
  .site-nav__submenu a,
  .site-nav__submenu a:link,
  .site-nav__submenu a:visited {
    color: LinkText !important;
    background: Canvas;
  }

    .site-nav__link:hover,
    .site-nav__disclosure[aria-expanded="true"],
    .site-nav__submenu a:hover {
      color: HighlightText !important;
      background: Highlight;
    }

    /* :focus-visible, not :focus — same stuck-after-click reason as above.
       Separate rule so it can't invalidate the hover list. */
    .site-nav__link:focus-visible,
    .site-nav__submenu a:focus-visible {
      color: HighlightText !important;
      background: Highlight;
    }

    /* box-shadow is ignored here, so restore a real outline */
    .site-nav__link:focus-visible,
    .site-nav__submenu a:focus-visible {
      outline: 3px solid CanvasText;
      outline-offset: 2px;
    }

  .site-nav__submenu {
    border-color: CanvasText;
    background: Canvas;
  }
}

/* Increased-contrast preference */
@media (prefers-contrast: more) {
  .site-nav__list {
    border-bottom-color: #000000;
  }

  .site-nav__sep {
    background: #000000;
  }
}

/* Screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-nav__list li,
.site-nav__item,
.site-nav__submenu li {
  list-style-type: none !important;
  list-style: none !important;
  margin: 0;
}