/**
 * Header nav LEFT (center-menu, right after logo) / RIGHT (filter +
 * account) layout — CONFIRMED against the live xtrax markup
 * (templates/header/header-1.html.twig) and css/bootstrap.min.css:
 *
 *   <header id="header">
 *     <nav class="navbar ...">          <-- ALSO flex, space-between,
 *                                            direct children: .container
 *                                            AND #sidemenu_toggle
 *       <div class="container">          <-- flex, space-between
 *         <a class="navbar-brand">...</a>
 *         {{ page.main_menu }}          <-- blocks render directly here
 *         {% if social_networks %}<ul>...</ul>{% endif %}
 *       </div>
 *       <a id="sidemenu_toggle">...</a>  <-- hamburger, OUTSIDE .container
 *
 * Because #sidemenu_toggle is a sibling of .container (not inside it),
 * getting our right-hand group flush against .container's own right
 * edge is sufficient to clear it — no manual offset/width math needed;
 * .navbar's own space-between + padding already keeps them apart.
 *
 * Each block is wrapped individually by xtrax's own block.html.twig
 * (its final `{% else %}` branch, since 'main_menu' isn't one of the
 * regions it special-cases), which is where the #block-... selectors
 * below come from. Drupal renders a block's config ID with
 * underscores converted to hyphens for its HTML id attribute.
 */

#header .navbar > .container {
  flex-wrap: nowrap;
  /* Bootstrap's .container has a fixed max-width per breakpoint
   * (960px at ~992-1199px viewports, 1140px above, etc.) and centers
   * itself within the navbar — leaving equal blank space on both
   * sides that grows/shrinks with viewport width.
   *
   * flex: 1 1 auto + min-width: 0 (rather than a forced width: 100%)
   * lets this container grow to fill the row while still shrinking
   * when needed.
   */
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  /* #sidemenu_toggle (the hamburger) is NOT a normal flex sibling
   * sharing space with this container, despite .navbar itself being
   * flex/space-between — style.css sets
   * `.sidemenu_btn { position: absolute; right: 20px;
   * margin-right: 1rem; width: 36px; }` UNCONDITIONALLY (confirmed
   * directly in style.css, not behind any media query), positioned
   * against .navbar's own `position: relative` (confirmed in
   * bootstrap.min.css). An absolutely positioned element is removed
   * from normal flow entirely — it floats at a fixed offset
   * regardless of what flex siblings are doing, and overlaps
   * whatever content happens to render underneath it.
   *
   * Every earlier attempt at this overlap (margin-left:auto,
   * flex-shrink, width:100%) was solving the wrong problem, because
   * it assumed the hamburger shared space via flexbox the way a
   * normal sibling would — it never did. The actual fix is just
   * reserving real estate: right:20px + margin-right:16px +
   * width:36px = 72px minimum from .navbar's right edge; this adds
   * a safety margin above that minimum. */
  padding-right: 90px;
}

/* Center-menu block sits LEFT, right after the logo — not centered.
 * flex: 0 1 auto — no grow (doesn't claim extra space), but CAN
 * shrink (unlike the right-side group above, which stays fixed-size)
 * — this is what actually prevents the row from overflowing into the
 * hamburger at narrower desktop widths: when total content is wider
 * than available space, this is the one thing that yields room
 * rather than forcing an overflow.
 *
 * Same simplification as the right-side group above: this is a flex
 * ITEM of .container, not a flex CONTAINER itself — no display:flex
 * needed here, vertical centering already comes from .container. */
#block-accredify-header-center-menu {
  flex: 0 1 auto;
  margin-left: 2rem; /* clearance from the logo */
  min-width: 0;
  overflow: hidden;
}

/* Certification Filter + account menu, pushed to the far right of
 * .container. margin-left:auto on the FIRST of the pair is the trick
 * that does this: everything before it (logo, center-menu) stays put,
 * and this element plus everything after it gets pushed to the row's
 * end — the classic two-cluster flex split.
 *
 * NOTE: the account menu block's real ID is xtrax_account_menu (it's
 * reused, not created by this module — see update_9004), which
 * renders as HTML id="block-xtrax-account-menu".
 *
 * These are flex ITEMS of .container — they do NOT also need to be
 * flex CONTAINERS themselves. An earlier version of this file set
 * display:flex on these block wrappers too (to vertically center
 * their content), which was redundant — .container's own
 * align-items:center already centers each of these as a whole — and
 * created an unintended nested flex context (this wrapper flexing
 * its own children, one of which is the menu block's hidden <h2>
 * label, alongside the actual <ul>) that was collapsing/hiding the
 * first items in the account menu once it had 3 links instead of 2.
 * Removing display:flex here entirely fixes that; the <ul> inside
 * still has its own display:flex further below, which is the only
 * flex context actually needed to lay the <li> items out in a row.
 */
#block-accredify-certification-filter,
#block-xtrax-account-menu {
  flex: 0 0 auto;
}

#block-accredify-certification-filter {
  margin-left: auto;
}

#block-xtrax-account-menu {
  margin-left: 1.5rem;
}

/* Neither 'header-center-navigation' nor 'account' has a
 * menu--<name>.html.twig override in xtrax (confirmed: only main,
 * side-menu, onepage-menu, onepage-side-menu, main-navigation-custom
 * exist), so both fall back to Drupal core's bare default menu
 * template — a plain <ul><li><a>, no Bootstrap nav classes, no flex —
 * which is why menu items were stacking vertically instead of sitting
 * in a row. This makes the <ul> itself a horizontal flex row.
 *
 * Colors are set explicitly rather than left to inherit, since this
 * theme has no consistent default link color for plain (non
 * .nav-link-classed) links in the header context — leaving it to
 * inherit risks landing on a color with poor contrast against the
 * dark header background depending on what page is being viewed.
 * Adjust the color values below to match brand if this doesn't quite
 * match the rest of the nav.
 */
#block-accredify-header-center-menu ul,
#block-xtrax-account-menu ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
  min-width: 0;
}

#block-accredify-header-center-menu li,
#block-xtrax-account-menu li {
  margin: 0;
}

#block-accredify-header-center-menu a,
#block-xtrax-account-menu a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

#block-accredify-header-center-menu a:hover,
#block-xtrax-account-menu a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Overrides a legacy xtrax rule (custom.css, ~line 694):
 *   #block-xtrax-account-menu li:has(a[href="/user/login"]) { display:none; }
 * Written (per its own comment) for when this block lived in the
 * SIDE MENU, to avoid duplicating the sidebar's own separate login
 * form there. That reasoning doesn't apply now that this block is in
 * the HEADER (see update_9004) — no such duplicate form exists here
 * — but the rule is still active and was catching core's own
 * legitimate 'Log in'/'Log out' toggle link (plugin user.logout,
 * Drupal's built-in LogoutLinkMenu — see update_9009's docblock for
 * why this is the only link that needs to show here; a separate
 * custom 'Login' link was found redundant with it and disabled).
 *
 * !important is used deliberately: custom.css loads after this file
 * in the page (confirmed from asset order) and this module doesn't
 * own/edit custom.css directly, so matching or exceeding its
 * specificity through normal cascade order isn't reliable — this is
 * a narrow, well-documented, single-purpose exception to a rule
 * whose own stated intent no longer applies to this placement.
 */
#header #block-xtrax-account-menu li:has(a[href="/user/login"]) {
  display: list-item !important;
}

/* Mobile sidebar (region 'side_menu', inside <nav class="side-nav">)
 * intentionally has NO layout rules here — it renders as a plain
 * vertical list by default, which is the wanted behavior.
 *
 * The desktop header blocks above must NOT also render in mobile
 * view, though — the off-canvas side menu already covers the same
 * links there. xtrax already has exactly this pattern for the old
 * header block (`#block-xtrax-header-navigation-links{display:none}`
 * in css/custom.css, re-shown only above the lg breakpoint); these
 * three blocks needed the same treatment and didn't have it yet,
 * which is why they were showing up stacked above the mobile hero.
 * 991.98px matches Bootstrap's own navbar-expand-lg breakpoint
 * exactly, so this toggles at the same point the site's own mobile
 * nav (off-canvas side menu) takes over.
 */
@media (max-width: 991.98px) {
  #block-accredify-header-center-menu,
  #block-accredify-certification-filter,
  #block-xtrax-account-menu {
    display: none;
  }

  /* The desktop-only reserved space for the hamburger button (see
   * the padding-right comment on #header .navbar > .container above)
   * has nothing to clear at this width, since all three blocks above
   * are hidden here — reset it to avoid leaving unused empty space. */
  #header .navbar > .container {
    padding-right: 0;
  }
}

/* Mobile off-canvas menu's own Certification Filter instance (see
 * update_9011) — strips the desktop version's button/pill chrome
 * (border, padding, background) so it reads as a plain link matching
 * "Modules"/"Psychometrics" and the sidebar login block's own links
 * around it, rather than looking like a separate boxed control.
 *
 * Scoped to #block-accredify-certification-filter-mobile specifically
 * — a distinct block ID from the desktop instance
 * (#block-accredify-certification-filter, no "-mobile" suffix) — so
 * the desktop header's own button styling is untouched.
 *
 * color/font: inherit rather than hardcoded values, since the exact
 * font-size/color the theme applies to its own plain side-menu links
 * isn't something this module owns or has visibility into — inherit
 * lets it pick up whatever the theme's surrounding context already
 * establishes for sibling links, so it stays in sync with them
 * automatically rather than needing separate upkeep here.
 */
#block-accredify-certification-filter-mobile .alp-header-cert-filter-toggle {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  display: block;
  width: 100%;
}

#block-accredify-certification-filter-mobile .alp-header-cert-filter-toggle:hover {
  border: none;
  color: inherit;
}