/* AbitGo - shared accessible primary navigation.
   Loaded after style.css so the open state wins over `.menu{display:none}`.

   Below 980px the desktop nav is hidden by the base stylesheet, so the toggle
   appears at exactly the width where the links disappear. The panel is closed
   by default and the links stay in the markup at every width, so they remain
   crawlable with JavaScript disabled. */

/* ---------------------------------------------------------------- layout safety
   A grid item defaults to min-width:auto, so a long unbreakable string forces
   its track wider than 1fr and pushes the row past the viewport. This is what
   made the university catalogue overflow by 7px at 768px. Allowing items to
   shrink fixes it without changing any column count or visual design. */
.grid > *,
.grid-2 > *,
.grid-3 > *,
.cards > *,
.catalog > *,
.compare-results > *,
.links-grid > *,
.hero-grid > * {
  min-width: 0;
}

.ag-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background: #2563eb;
  color: #fff;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  text-decoration: none;
}
.ag-skiplink:focus {
  left: 0;
}

.ag-navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border: 1px solid rgba(127, 145, 180, 0.42);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ag-navtoggle:hover {
  background: rgba(127, 145, 180, 0.14);
}
.ag-navtoggle:focus-visible,
[data-ag-nav] a:focus-visible,
.ag-skiplink:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}
.ag-navtoggle .ag-navtoggle-x { display: none; }
.ag-navtoggle[aria-expanded="true"] .ag-navtoggle-x { display: inline; }
.ag-navtoggle[aria-expanded="true"] .ag-navtoggle-bars { display: none; }

@media (max-width: 980px) {
  .ag-navtoggle {
    display: inline-flex;
  }

  /* Closed by default at mobile widths. The compound selectors match the
     per-template rules that set their own `display` on the nav (for example
     `.ag-gamehead nav{display:flex}`), which would otherwise win on
     specificity and leave the panel permanently open. */
  [data-ag-nav],
  header [data-ag-nav],
  .ag-gamehead nav[data-ag-nav] {
    display: none;
  }

  /* Higher specificity than the closed rules above and than `.menu{display:none}`. */
  [data-ag-nav][data-ag-open="true"],
  header [data-ag-nav][data-ag-open="true"],
  .ag-gamehead nav[data-ag-nav][data-ag-open="true"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    flex-basis: 100%;
    margin-top: 12px;
    padding: 8px 0 6px;
    border-top: 1px solid rgba(127, 145, 180, 0.28);
  }

  [data-ag-nav][data-ag-open="true"] a {
    display: block;
    width: 100%;
    /* 48px min touch target */
    padding: 13px 6px;
    min-height: 48px;
    box-sizing: border-box;
    border-radius: 10px;
    text-decoration: none;
  }

  [data-ag-nav][data-ag-open="true"] a:hover {
    background: rgba(127, 145, 180, 0.14);
  }

  /* The header rows are flex containers; allow the panel to wrap onto its own
     line instead of squeezing the logo. */
  .navin,
  header.nav > .container,
  header.top > .container,
  header.topbar > .container {
    flex-wrap: wrap;
  }
}