/* Menus, tabs, local tasks — Drupal markup varies; avoid requiring <nav> wrapper */

/* Sidebar rail (match design-system web-app rail) */
.theme-appgenie .appgenie-sidebar .menu,
.theme-appgenie .appgenie-sidebar nav ul,
.theme-appgenie .appgenie-navigation-collapsed .menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.theme-appgenie .appgenie-sidebar .menu .menu-item,
.theme-appgenie .appgenie-sidebar nav li,
.theme-appgenie .appgenie-navigation-collapsed .menu .menu-item {
  list-style: none;
  margin: 0;
}

.theme-appgenie .appgenie-sidebar .menu .menu-item > a,
.theme-appgenie .appgenie-sidebar .menu .menu-item > span,
.theme-appgenie .appgenie-sidebar nav li > a,
.theme-appgenie .appgenie-sidebar nav li > span,
.theme-appgenie .appgenie-navigation-collapsed .menu .menu-item > a,
.theme-appgenie .appgenie-navigation-collapsed .menu .menu-item > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.theme-appgenie .appgenie-sidebar .menu .menu-item > a:hover,
.theme-appgenie .appgenie-sidebar nav li > a:hover,
.theme-appgenie .appgenie-navigation-collapsed .menu .menu-item > a:hover {
  background: var(--bg-muted);
  color: var(--ink-900);
}

.theme-appgenie .appgenie-sidebar .menu .menu-item.is-active > a,
.theme-appgenie .appgenie-sidebar .menu .menu-item.is-active-trail > a,
.theme-appgenie .appgenie-sidebar nav li.is-active > a,
.theme-appgenie .appgenie-sidebar nav li.is-active-trail > a,
.theme-appgenie .appgenie-navigation-collapsed .menu .menu-item.is-active > a,
.theme-appgenie .appgenie-navigation-collapsed .menu .menu-item.is-active-trail > a {
  background: var(--genie-50);
  color: var(--genie-700);
  font-weight: 600;
}

.theme-appgenie .appgenie-sidebar .menu .menu-item > a:focus-visible,
.theme-appgenie .appgenie-sidebar nav li > a:focus-visible,
.theme-appgenie .appgenie-navigation-collapsed .menu .menu-item > a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

/* Nested menus in rail */
.theme-appgenie .appgenie-sidebar .menu .menu,
.theme-appgenie .appgenie-sidebar nav ul ul {
  margin-block-start: var(--sp-1);
  padding-inline-start: var(--sp-3);
}

/*
 * Top bar: account + utility menus horizontal (<ul> may not use class .menu).
 * Exclude ul.contextual-links — it lives under nav too; styling it as a menu overrides core
 * `.contextual-links { display: none }` and leaks Configure block links beside every pencil.
 */
.theme-appgenie .appgenie-topbar .menu,
.theme-appgenie .appgenie-topbar nav ul:not(.contextual-links) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}

.theme-appgenie .appgenie-topbar .menu .menu-item,
.theme-appgenie .appgenie-topbar nav ul:not(.contextual-links) li {
  list-style: none;
  margin: 0;
}

.theme-appgenie .appgenie-topbar .menu a,
.theme-appgenie .appgenie-topbar nav ul:not(.contextual-links) a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
}

.theme-appgenie .appgenie-topbar .menu a:hover,
.theme-appgenie .appgenie-topbar nav ul:not(.contextual-links) a:hover {
  background: var(--bg-muted);
  color: var(--ink-900);
}

/*
 * Header menus (main + account): flex the visible menu row only — leave .contextual on Drupal’s
 * absolute top/right (contextual.theme.css). Do not set position:relative on .contextual here;
 * that was forcing the pencil out of the corner regardless of .visually-hidden.
 */
html.theme-appgenie header.appgenie-topbar nav.contextual-region {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
}

html.theme-appgenie header.appgenie-topbar nav.contextual-region > h2 {
  order: 0;
}

html.theme-appgenie header.appgenie-topbar nav.contextual-region > ul {
  order: 1;
}

html.theme-appgenie header.appgenie-topbar nav.contextual-region > .contextual.open .contextual-links {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  inset-inline-start: auto;
  float: none;
  clear: none;
  margin-block-start: var(--sp-1);
  z-index: 520;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2);
  min-inline-size: 12rem;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

html.theme-appgenie header.appgenie-topbar nav.contextual-region > .contextual.open .contextual-links a {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
}

html.theme-appgenie header.appgenie-topbar nav.contextual-region > .contextual.open .contextual-links a:hover {
  background: var(--bg-muted);
  color: var(--ink-900);
}

/* Footer menu — horizontal strip, no bullets (Drupal core lists). */
.theme-appgenie footer.appgenie-footer .menu,
.theme-appgenie footer.appgenie-footer nav ul:not(.contextual-links) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}

.theme-appgenie footer.appgenie-footer .menu .menu-item,
.theme-appgenie footer.appgenie-footer nav ul:not(.contextual-links) > li {
  list-style: none;
  margin: 0;
}

.theme-appgenie footer.appgenie-footer .menu a,
.theme-appgenie footer.appgenie-footer nav ul:not(.contextual-links) a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-600);
  text-decoration: none;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.theme-appgenie footer.appgenie-footer .menu a:hover,
.theme-appgenie footer.appgenie-footer nav ul:not(.contextual-links) a:hover {
  background: color-mix(in srgb, var(--ink-900) 6%, transparent);
  color: var(--ink-900);
}

.theme-appgenie footer.appgenie-footer .menu .menu-item.is-active > a,
.theme-appgenie footer.appgenie-footer .menu .menu-item.is-active-trail > a,
.theme-appgenie footer.appgenie-footer nav ul:not(.contextual-links) > li.is-active > a,
.theme-appgenie footer.appgenie-footer nav ul:not(.contextual-links) > li.is-active-trail > a {
  color: var(--genie-700);
  font-weight: 600;
}

.theme-appgenie footer.appgenie-footer .menu a:focus-visible,
.theme-appgenie footer.appgenie-footer nav ul:not(.contextual-links) a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

/* Footer submenu (expanded items): stack under parent instead of inline row. */
.theme-appgenie footer.appgenie-footer .menu .menu,
.theme-appgenie footer.appgenie-footer nav ul ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  margin-block-start: var(--sp-2);
  padding-inline-start: var(--sp-3);
}

/*
 * Marketing landing: header region should be empty (see preprocess_page); hide any stray top bar so the
 * masthead sits flush under toolbars/skip-link without an empty white strip.
 */
body.theme-appgenie.appgenie-marketing-landing-page .appgenie-topbar {
  display: none;
}

/*
 * Hide the highlighted wrapper when there are no visible status messages (only the hidden
 * BigPipe fallback remains), so it cannot read as a blank strip above the hero.
 */
body.theme-appgenie.appgenie-marketing-landing-page .appgenie-region-highlighted-inner:not(:has(.messages)) {
  display: none;
}

/* Local tasks — primary/secondary live in content_above under the page title block. */
.theme-appgenie .appgenie-region-content-above nav.local-tasks-nav {
  margin-block: 0;
}

.theme-appgenie .appgenie-region-content-above nav.local-tasks-nav--primary {
  margin-block-start: var(--sp-4);
}

.theme-appgenie .appgenie-region-content-above nav.local-tasks-nav--secondary {
  margin-block-start: var(--sp-2);
}

.theme-appgenie .tabs-wrapper {
  margin-block: 0;
}

.theme-appgenie ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--border);
  padding-block-end: var(--sp-2);
}

.theme-appgenie ul.tabs li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.theme-appgenie ul.tabs a {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-500);
  text-decoration: none;
  border: 1px solid transparent;
}

.theme-appgenie ul.tabs.secondary a {
  font-size: var(--fs-13);
  font-weight: 500;
}

.theme-appgenie ul.tabs a:hover,
.theme-appgenie ul.tabs a:focus-visible {
  color: var(--ink-900);
  background: var(--bg-muted);
  outline: none;
  box-shadow: var(--shadow-glow);
}

.theme-appgenie ul.tabs a.is-active {
  font-weight: 600;
  color: var(--genie-700);
  background: var(--genie-50);
  border-color: var(--genie-200);
}

.theme-appgenie ul.tabs li.active > a,
.theme-appgenie ul.tabs li.is-active > a {
  font-weight: 600;
  color: var(--genie-700);
  background: var(--genie-50);
  border-color: var(--genie-200);
}

@media (max-width: 47.9375em) {
  /* Narrow screens: single-row horizontal scroll instead of wrapping tab stacks. */
  .theme-appgenie .appgenie-region-content-above ul.tabs.primary {
    flex-wrap: nowrap;
    gap: var(--sp-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-block-end: var(--sp-3);
  }
}

.theme-appgenie .breadcrumb ol {
  list-style: none;
  margin: var(--sp-3) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-14);
}

.theme-appgenie .breadcrumb ol li:not(:first-child)::before {
  content: '/';
  margin-inline-end: var(--sp-2);
  color: var(--fg-3);
}

.theme-appgenie nav .pager {
  padding-block-start: var(--sp-8);
}

/* Full pager (Views / core): horizontal row, no bullets. */
.theme-appgenie nav[aria-labelledby='pagination-heading'],
.theme-appgenie .pager {
  --appgenie-pager-gap: var(--sp-2);
}

.theme-appgenie ul.pager__items,
.theme-appgenie ul.js-pager__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: var(--appgenie-pager-gap, var(--sp-2));
}

.theme-appgenie ul.pager__items > li,
.theme-appgenie ul.js-pager__items > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.theme-appgenie ul.pager__items > li::marker,
.theme-appgenie ul.js-pager__items > li::marker {
  content: none;
}

/*
 * Contextual links sit in a high z-index layer; in wide header/footer regions the
 * wrapper can still capture clicks meant for menu links. Pass clicks through unless
 * the pencil trigger is used or the contextual dropdown is open (Drupal toggles .open on click).
 */
.theme-appgenie .contextual-region > .contextual {
  pointer-events: none;
}

.theme-appgenie .contextual-region > .contextual .trigger,
.theme-appgenie .contextual-region > .contextual.open {
  pointer-events: auto;
}