/* Base menu styles */
.sf-menu {
  background: transparent;
  padding-inline-start: 0;
  margin: 0 10px;
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
}

.sf-menu ul {
  background: var(--sts-color-surface, #fff);
}

/* Dropdown menu items - solid hover like overflow */
.sf-menu ul li:hover {
  background-color: var(--sts-color-surface-tinted, #f5f5f5);
}

.sf-menu ul li a:hover {
  background-color: var(--sts-color-surface-tinted, #f5f5f5);
}

.sf-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-menu > li {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}

.sf-menu > li.in-overflow {
  display: none;
}

.sf-menu li:hover > ul,
.sf-menu li:focus-within > ul {
  display: block;
  opacity: 1;
  transition-delay: 0s;
}

/* Ensure normal dropdowns appear above other content */
.sf-menu ul {
  z-index: 100;
}

.sf-menu ul ul {
  top: 0;
  left: 100%;
}

/* Hidden dropdowns use display:none so they take no scroll space (visibility
   alone still extends the page height and forces a scrollbar on short pages).
   allow-discrete keeps the fade-out and close delay working as before. */
.sf-menu ul {
  position: absolute;
  display: none;
  opacity: 0;
  top: 100%;
  left: 0;
  z-index: 99;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  min-width: 12em;
  transition: opacity 0.15s ease 0.1s, display 0s linear 0.25s;
  transition-behavior: allow-discrete;
}

/* Hover bridge: invisible zone between top-level item and its dropdown */
.sf-menu > li > ul::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* Hover bridge: invisible zone between parent item and side submenu */
.sf-menu ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  bottom: 0;
  width: 12px;
  height: auto;
}

.sf-menu > li > a > img {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  margin-right: 0.4em;
}

.sf-menu a {
  color: var(--sts-color-text, #000);
  display: block;
  position: relative;
  padding: 0.75rem;
  text-decoration: none;
}

.sf-menu > li > a {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  line-height: 1;
}

/* Larger click/hover targets for dropdown items */
.sf-menu ul a {
  padding: 0.65rem 0.75rem;
}

/* Item subtext: smaller inline note on the same line as the label */
.sf-menu ul li a small {
  margin-left: 0.5em;
  font-size: 0.8em;
  color: var(--sts-color-text-subtle, #999);
  font-weight: normal;
}

.sf-menu li {
  position: relative;
  white-space: nowrap;
}

/* Desktop menu hover - solid background like overflow dropdown */
.sf-menu > li:hover {
  background-color: var(--sts-color-surface-tinted, #f5f5f5);
}

.sf-menu > li > a:hover {
  background-color: var(--sts-color-surface-tinted, #f5f5f5);
}

/* Chevron indicators for items with submenus */
.sf-arrows .sf-with-ul {
  padding-right: 2.5em;
}

.sf-arrows .sf-with-ul::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f078"; /* fa-chevron-down */
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  font-size: 0.75em;
  color: var(--sts-color-text-disabled, rgba(0, 0, 0, 0.3));
  pointer-events: none;
}

.sf-arrows > li:hover > .sf-with-ul::after,
.sf-arrows > li > .sf-with-ul:focus::after {
  color: var(--sts-color-text-subtle, rgba(0, 0, 0, 0.5));
}

.sf-arrows ul .sf-with-ul::after {
  content: "\f054"; /* fa-chevron-right */
}

.sf-arrows ul li:hover > .sf-with-ul::after,
.sf-arrows ul li > .sf-with-ul:focus::after {
  color: var(--sts-color-text-subtle, rgba(0, 0, 0, 0.5));
}

/* Overflow menu container, trailing the top-level items at the end of the
   nav row. Hidden until the script moves the first item into it. */
.overflow-menu {
  position: relative;
  display: none;
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
}

.overflow-menu.has-items {
  display: block;
}

/* The toggle reuses .compactNavButton for its look (see menuOverflow.php),
   so it always matches the other nav icon buttons. */
.overflow-menu .overflow-toggle:focus-visible {
  outline: 2px solid var(--sts-color-focus-border, #2061c2);
  outline-offset: 2px;
}

/* Chevron indicators for overflow dropdown */
.overflow-dropdown .sf-with-ul {
  position: relative;
  padding-right: 2.5em;
}

/* Anchored to the toggle (same end of the bar), not the viewport. */
.overflow-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--sts-color-surface, #fff);
  border: 1px solid var(--sts-color-border, #d0d6dd);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  z-index: 1000;
  border-radius: 6px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.overflow-menu.open .overflow-dropdown {
  display: block;
}

.overflow-dropdown li {
  position: relative;
  display: block;
}

.overflow-dropdown a {
  display: block;
  padding: 10px 20px;
  color: var(--sts-color-text, #333);
  text-decoration: none;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.overflow-dropdown a:hover {
  background-color: var(--sts-color-surface-tinted, #f5f5f5);
}

/* Cloned top-level links sit outside .sf-menu, so size their icons here. */
.overflow-dropdown > li > a > img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 0.5em;
}

.overflow-dropdown > li > a > .compactNavIcon {
  width: 1.25em;
  margin-right: 0.5em;
  color: var(--sts-color-text-subtle, #66727d);
  font-size: 14px;
  text-align: center;
}

.overflow-dropdown ul {
  display: none;
  position: static;
  background: var(--sts-color-surface-subtle, #f9f9f9);
  box-shadow: none;
  padding: 0;
  min-width: auto;
  list-style: none;
}

.overflow-dropdown ul.visible {
  display: block;
}

.overflow-dropdown ul a {
  padding-left: 40px;
  font-size: 0.95em;
}

.overflow-dropdown ul ul a {
  padding-left: 60px;
}

.overflow-dropdown .sf-with-ul::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054"; /* fa-chevron-right */
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
  font-size: 0.75em;
  color: var(--sts-color-text-disabled, rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
  pointer-events: none;
}

.overflow-dropdown li.submenu-open > .sf-with-ul::after {
  transform: translateY(-50%) rotate(90deg);
  color: var(--sts-color-text-subtle, rgba(0, 0, 0, 0.5));
}

.overflow-dropdown li:hover > .sf-with-ul::after {
  color: var(--sts-color-text-subtle, rgba(0, 0, 0, 0.5));
}

/* Ensure menu layout works with overflow */
#main-navigation {
  flex: 1;
}

/* Keep top-level items hidden until the overflow script has measured and
   placed them, so overfull items never flash on screen on page load.
   Visibility keeps the layout measurable while hiding the paint. The
   script reveals the nav synchronously in the same task as the first
   calculation (before first paint), and without JS the noscript fallback
   in the page head reveals the menu again. */
#main-navigation:not(.is-ready) {
  visibility: hidden;
}

/* ============================================================================
   Simple Dropdown - Single button dropdown component for in-page use
   ============================================================================ */

.simple-dropdown {
  --sd-bg: var(--sts-color-surface, #fff);
  --sd-border: var(--sts-color-border, #ccc);
  --sd-hover: var(--sts-color-surface-hover, #f5f5f5);
  --sd-active: var(--sts-color-legacy-block-surface-hover, #e8e8e8);
  --sd-text: var(--sts-color-text, #333);
  --sd-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  display: inline-block;
  padding: 0;
  margin: 0;
  list-style: none;
  align-self: flex-start;
}

.simple-dropdown > li {
  position: relative;
}

/* Main toggle button */
.simple-dropdown > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: 32px;
  box-sizing: border-box;
  padding: 0 2.25em 0 1em;
  text-decoration: none;
  color: var(--sts-color-primary-text, #103d68);
  white-space: nowrap;
  background: var(--sts-color-primary-surface, #e7f2fc);
  border: 1px solid var(--sts-color-primary-border, #9fc2e3);
  border-radius: var(--sts-radius-md, 6px);
  font-size: small;
  font-weight: 600;
  font-family: Verdana, Geneva, sans-serif;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.simple-dropdown > li > a::after {
  content: "";
  position: absolute;
  right: 0.75em;
  top: 50%;
  transform: translateY(-25%);
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: var(--sts-color-primary-text, #103d68);
}

.simple-dropdown > li:hover > a {
  color: var(--sts-color-primary-text-hover, #092f54);
  background: var(--sts-color-primary-surface-hover, #d5e9fa);
  border-color: var(--sts-color-primary-border-hover, #6fa6d8);
}

.simple-dropdown > li.open > a {
  color: var(--sts-color-primary-text-hover, #092f54);
  background: var(--sts-color-primary-surface-hover, #d5e9fa);
  border-color: var(--sts-color-primary, #5e93cf);
}

/* Dropdown menu */
.simple-dropdown ul {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 0.4em 0;
  list-style: none;
  background: var(--sd-bg);
  border: 1px solid var(--sd-border);
  border-radius: 4px;
  box-shadow: var(--sd-shadow);
  z-index: 1000;
}

/* Nested dropdowns */
.simple-dropdown ul ul {
  top: -0.4em;
  left: calc(100% + 4px);
}

/* Dropdown items */
.simple-dropdown ul li {
  position: relative;
}

.simple-dropdown ul li a {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  text-decoration: none;
  color: var(--sd-text);
  white-space: nowrap;
  transition: background-color 0.12s ease;
}

.simple-dropdown ul li a:hover {
  background-color: var(--sd-hover);
}

/* Nested item with children - right arrow */
.simple-dropdown ul li:has(> ul) > a {
  padding-right: 2em;
}

.simple-dropdown ul li:has(> ul) > a::after {
  content: "";
  position: absolute;
  right: 0.75em;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: var(--sts-color-border-strong, #666);
}

/* Group headings */
.simple-dropdown__heading {
  padding: 0.35em 1em 0.2em;
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--sts-color-text-subtle, #aaa);
  cursor: default;
  user-select: none;
}

li + .simple-dropdown__heading {
  border-top: 1px solid var(--sts-color-border-subtle, #eee);
  margin-top: 0.3em;
  padding-top: 0.5em;
}

/* Item subtext */
.simple-dropdown ul li a span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}

.simple-dropdown ul li a small {
  font-size: 0.8em;
  color: var(--sts-color-text-subtle, #999);
  font-weight: normal;
  white-space: normal;
}

/* Menu item icons sit in uniform squares so labels align */
.simple-dropdown ul li a > i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  font-size: 12px;
  line-height: 1;
  color: var(--sts-color-text-muted, #495057);
  background: var(--sts-color-surface-tinted, #f2f2f2);
  border: 1px solid var(--sts-color-border, #dee2e6);
  border-radius: 4px;
}

.simple-dropdown ul li a:hover > i {
  background: var(--sts-color-legacy-block-surface-hover, #e8e8e8);
  border-color: var(--sts-color-border-strong, #adb5bd);
}

/* Icon-less items align their text with icon-led labels */
.simple-dropdown ul li a:not(:has(> i)) {
  padding-left: calc(1em + 24px + 0.5em);
}