/* AQUROV — the primary navigation: what hangs under a navigation item.
 *
 * The header's own row, brand and buttons stay in header.php's critical block;
 * this sheet owns the panels the desktop row opens (a dropdown of links, or a
 * mega menu of pictures) and the grouped lists inside the mobile drawer. Two
 * contracts decide the shape below:
 *
 * 1. Panels are positioned by assets/wp-behaviors/behaviors.js, which writes
 *    position/left/top/max-width/max-height/overflow inline when it opens one.
 *    So a panel here gets its width and its looks, never its position, and its
 *    transform is left alone so the runtime's own opening motion plays.
 * 2. Without JavaScript a panel must stay shut. It is shown only while the
 *    runtime has marked its item open (data-state="open"), which also backs up
 *    the hidden attribute the template renders.
 *
 * Colours follow the site's own palette: main blue #0F5FB8 marks the current
 * page, and the panels are white cards on the same border grey as the header. */

.aq-nav,
.aq-menu-nav {
  --nav-ink: #17212B;
  --nav-muted: #40505E;
  --nav-soft: #687684;
  --nav-faint: #93A1AE;
  --nav-line: #DBE3EA;
  --nav-hairline: #EDF1F5;
  --nav-accent: #0F5FB8;
  --nav-accent-dark: #0A4D95;
  --nav-tint: #F2F7FC;
  --nav-tile: #EEF3F7;
}

/* The row itself. Five groups plus Account have to hold one line at 1080px,
   which is the width the bar is shown from, so the gaps are tighter than the
   header's own and nothing here wraps. */
.aq-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  font-size: 14px;
  color: var(--nav-muted);
}

.aq-nav-item {
  display: flex;
  align-items: center;
  position: relative;
}

.aq-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 6px;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.aq-nav-link:hover,
.aq-nav-link:focus-visible {
  color: var(--nav-accent);
  background: var(--nav-tint);
}

/* The current page, and the section it belongs to, is the one thing the row
   paints in the site's main blue — the rule the design guide sets for the
   current navigation state. */
.aq-nav-link[aria-current="page"] {
  color: var(--nav-accent);
  font-weight: 700;
}

/* Label and caret are two halves of one control: the label navigates, the caret
   opens the panel, and both light up together. A caret that opens nothing is
   never rendered — the template keeps a group without sub-links a plain link. */
.aq-nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-height: 34px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--nav-soft);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.aq-nav-item:hover .aq-nav-link,
.aq-nav-item:hover .aq-nav-caret,
.aq-nav-item:focus-within .aq-nav-link,
.aq-nav-item:focus-within .aq-nav-caret {
  color: var(--nav-accent);
  background: var(--nav-tint);
}

.aq-nav-caret:hover,
.aq-nav-caret:focus-visible {
  color: var(--nav-accent);
}

.aq-nav-caret:focus-visible,
.aq-nav-link:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 1px;
}

.aq-nav-caret-icon {
  display: block;
  transition: transform 0.2s ease;
}

.aq-nav-caret[aria-expanded="true"] .aq-nav-caret-icon {
  transform: rotate(180deg);
}

/* The panel. Its width is decided here — the runtime clamps the box into the
   viewport from this width and writes only its position and limits. A panel is
   never wider than the screen either.
 *
 * It is taken out of flow on purpose, and that has to stay: the runtime measures
 * the panel right after it shows it and before it positions it, and a panel
 * still sitting in flow as a flex child of the navigation item would be squeezed
 * by flex sizing — the runtime would then clamp the real-width panel into the
 * viewport from a width it never has, and a wide panel could hang off the
 * screen. Out of flow, the measurement is the panel's own width. */
.aq-nav-panel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 18px 18px 14px;
  border: 1px solid var(--nav-line);
  border-radius: 10px;
  background: #fff;
  color: var(--nav-muted);
  box-shadow: 0 18px 40px rgba(9, 22, 33, 0.14);
  font-size: 13px;
  text-align: left;
}

.aq-nav-item[data-state="open"] > .aq-nav-panel {
  display: block;
}

.aq-nav-panel--families { width: min(940px, calc(100vw - 32px)); }
.aq-nav-panel--tiles    { width: min(860px, calc(100vw - 32px)); }
.aq-nav-panel--links    { width: min(560px, calc(100vw - 32px)); }
.aq-nav-panel--cols1    { width: min(300px, calc(100vw - 32px)); }

.aq-nav-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.aq-nav-panel-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nav-soft);
}

.aq-nav-panel-all,
.aq-nav-list-all {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nav-accent);
  text-decoration: none;
  white-space: nowrap;
}

.aq-nav-panel-all:hover,
.aq-nav-panel-all:focus-visible,
.aq-nav-list-all:hover,
.aq-nav-list-all:focus-visible {
  color: var(--nav-accent-dark);
  text-decoration: underline;
}

/* The routes the header row has no width for at every size travel here. */
.aq-nav-panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--nav-hairline);
}

.aq-nav-foot-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nav-accent);
  text-decoration: none;
}

.aq-nav-foot-link:hover,
.aq-nav-foot-link:focus-visible {
  color: var(--nav-accent-dark);
  text-decoration: underline;
}

/* Mega menu A — the catalogue. One block per family: its picture, its name and
   how much is filed under it on the family line, its subfamilies under that.
   Four columns put the eight families in two rows, which is the shape of the
   catalogue on one screen. */
.aq-nav-families {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 26px;
  align-items: start;
}

.aq-nav-family { min-width: 0; }

.aq-nav-family-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--nav-ink);
  text-decoration: none;
}

.aq-nav-thumb {
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  background: var(--nav-tile);
}

.aq-nav-thumb--family { width: 64px; height: 44px; }

.aq-nav-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aq-nav-family-text { display: block; min-width: 0; }

.aq-nav-family-name {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--nav-ink);
}

.aq-nav-family-meta {
  display: block;
  font-size: 11.5px;
  color: var(--nav-soft);
}

.aq-nav-family-head:hover .aq-nav-family-name,
.aq-nav-family-head:focus-visible .aq-nav-family-name { color: var(--nav-accent); }

.aq-nav-children,
.aq-nav-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.aq-nav-child,
.aq-nav-menu-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-left: -6px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--nav-muted);
  text-decoration: none;
}

.aq-nav-child:hover,
.aq-nav-child:focus-visible,
.aq-nav-menu-link:hover,
.aq-nav-menu-link:focus-visible {
  color: var(--nav-accent);
  background: var(--nav-tint);
}

.aq-nav-child[aria-current="page"],
.aq-nav-menu-link[aria-current="page"] {
  color: var(--nav-accent);
  font-weight: 700;
}

/* How many records sit behind a link. A tabular figure keeps the column of
   numbers straight while the names beside them differ in length. */
.aq-nav-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--nav-faint);
}

/* Mega menu B — the application environments. A picture and the summary the
   environment already carries on its own page, three to a row. */
.aq-nav-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}

.aq-nav-tile {
  display: block;
  margin: -8px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.aq-nav-tile:hover,
.aq-nav-tile:focus-visible {
  border-color: var(--nav-line);
  background: var(--nav-tint);
}

.aq-nav-tile-media {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--nav-tile);
  /* One proportion for every tile, so a panel of mixed pictures still reads as
     a grid rather than as a ragged column. */
  aspect-ratio: 3 / 2;
}

.aq-nav-tile-name {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--nav-ink);
}

.aq-nav-tile:hover .aq-nav-tile-name,
.aq-nav-tile:focus-visible .aq-nav-tile-name,
.aq-nav-tile[aria-current="page"] .aq-nav-tile-name { color: var(--nav-accent); }

.aq-nav-tile-text {
  /* Two lines is what a tile can hold; the full summary stays on the
     environment's own page. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nav-soft);
}

/* The dropdown proper — the libraries and the support routes. Lists of names,
   so they need columns rather than pictures. */
.aq-nav-links {
  display: grid;
  gap: 18px 26px;
  align-items: start;
}

.aq-nav-links--cols1 { grid-template-columns: minmax(0, 1fr); }
.aq-nav-links--cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.aq-nav-col { min-width: 0; }

.aq-nav-col-title {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nav-soft);
}

.aq-nav-list-all { display: inline-block; margin-bottom: 4px; }

/* The drawer's groups. Each group is a disclosure: its label opens it and the
   hub of the group is the first link inside, which is what keeps a menu this
   size scannable on a phone. The drawer's shell, search field and buttons stay
   in header.php. */
.aq-menu-group { border-bottom: 1px solid var(--nav-hairline); }

.aq-menu-group-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 0;
  border: 0;
  background: transparent;
  color: var(--nav-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.aq-menu-group-btn:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
}

.aq-menu-group-label { flex: 1 1 auto; }

.aq-menu-group-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--nav-soft);
}

.aq-menu-group-icon {
  flex: 0 0 auto;
  display: block;
  color: var(--nav-soft);
  transition: transform 0.2s ease;
}

.aq-menu-group-btn[aria-expanded="true"] .aq-menu-group-icon { transform: rotate(180deg); }

/* The disclosure runtime wraps the panel in a motion box of its own, so the
   padding lives on the panel and the box measures the space the links take. */
.aq-menu-group-panel { padding: 0 2px 10px; }

.aq-menu-list,
.aq-menu-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aq-menu-list a,
.aq-menu-sublist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  color: var(--nav-muted);
  font-size: 14.5px;
  line-height: 1.5;
  text-decoration: none;
}

.aq-menu-sublist a { padding: 6px 2px; font-size: 13.5px; }

/* The hub of a group and the families inside it carry the stronger ink; the
   subfamilies under them read as what they are — a level down. */
.aq-menu-list a.aq-menu-all,
.aq-menu-list a.aq-menu-branch-link {
  font-weight: 650;
  color: var(--nav-ink);
}

.aq-menu-list a:hover,
.aq-menu-sublist a:hover,
.aq-menu-list a.aq-menu-all:hover,
.aq-menu-list a.aq-menu-branch-link:hover { color: var(--nav-accent); }

.aq-menu-list a[aria-current="page"],
.aq-menu-sublist a[aria-current="page"] {
  color: var(--nav-accent);
  font-weight: 700;
}

.aq-menu-sublist {
  margin: 0 0 4px;
  padding-left: 12px;
  border-left: 1px solid var(--nav-hairline);
}

.aq-menu-count {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--nav-faint);
}

/* Above this width the row is the navigation, below it the drawer is. The same
   number is where header.php shows the toggle and hides the search strip, so
   exactly one navigation is on screen at any width. */
@media (max-width: 1079px) {
  .aq-nav { display: none; }
}

/* At the narrow end of the desktop range a family name and its longest
   subfamily need the room three columns give them, not four. */
@media (min-width: 1080px) and (max-width: 1199px) {
  .aq-nav-panel--families .aq-nav-families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}