/**
 * Header navigation fixes for the 2025 header component.
 *
 * These overrides fix search icon positioning, secondary nav alignment,
 * and green pill button styling that Cohesion custom styles alone
 * cannot handle due to specificity constraints.
 *
 * ACTIVATION: Add class "header-nav-v2" to the header component's
 * root Container in Cohesion Layout Canvas. Remove it to rollback.
 */

/* === Desktop === */

/* Move search-box before the secondary nav items and vertically align */
.header-nav-v2 .top-panel .search-box {
  order: -1;
  margin-left: auto;
  margin-right: 10px;
  align-self: center;
  margin-top: 1px;
}

/* Remove auto margin on secondary nav so it sits right after search icon */
.header-nav-v2 .top-panel .proto-sub-menu {
  margin-left: 0;
}

/* On search page, search-box is absent — restore auto margin so nav stays right-aligned */
.path-search .header-nav-v2 .top-panel .proto-sub-menu {
  margin-left: auto;
}

/* Align last nav item flush to the right edge */
.header-nav-v2 .proto-sub-menu ul li:last-child {
  margin-right: 0;
}

/* Green pill button - layout-only overrides; all visual styles (colors, bg, border-radius, padding)
   are controlled by the Cohesion custom style so client can change them freely */
.header-nav-v2 .proto-sub-menu li a.coh-style-green-pill-button {
  display: inline-block;
  white-space: nowrap;
}

/* === Mobile === */
@media only screen and (max-width: 1280px) {
  /* Reset desktop overrides - search-box uses fixed positioning on mobile */
  .header-nav-v2 .top-panel .search-box {
    order: 0;
    margin-left: 0;
    margin-right: 0;
    align-self: auto;
    margin-top: 0;
  }

  /* Restore auto margin on secondary nav for mobile */
  .header-nav-v2 .top-panel .proto-sub-menu {
    margin-left: auto;
  }

  /* Align search icon with hamburger — accounts for admin toolbar via CSS var */
  .header-nav-v2 .search-box {
    top: calc(var(--drupal-displace-offset-top, 0px) + 20px);
  }

  /* Nudge search icon down to align with hamburger/X */
  .header-nav-v2 .search-button-opener:before {
    margin-top: 6px;
  }

  /* Center items grouped together, align text baselines in the purple bar */
  .header-nav-v2 .proto-sub-menu ul {
    align-items: baseline;
    justify-content: center;
  }

  /* Green pill button mobile - only font-size override; colors come from Cohesion */
  .header-nav-v2 .proto-sub-menu li a.coh-style-green-pill-button {
    font-size: 16px;
  }
}