/* ==========================================================================
   GoSorted.se — custom overrides
   Loaded AFTER site.css on every page that uses the main Webflow nav.
   Keep this file small and well-commented. Two fixes live here:
     1) Sticky-header background (was transparent → content bled through)
     2) Mobile nav menu (a stray Webflow IX2 transform pushed it off-screen)
   ========================================================================== */

/* --- Fix 1: sticky header background -------------------------------------
   .header-section is position:sticky; top:0 but had no background, so when
   the page scrolled, content showed through behind the logo / hamburger.
   Give it the page's cream colour with a subtle frosted blur (matches the
   landing-page .lp-nav treatment). Loaded after site.css, so this wins. */
.header-section {
  background-color: rgba(243, 242, 237, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}

/* --- Fix 2: mobile menu --------------------------------------------------
   On <=991px Webflow collapses the nav to a hamburger and, when opened,
   moves the menu into a .w-nav-overlay positioned just below the header.
   A leftover Webflow interaction left an inline transform: translateY(...)
   on the menu, dragging it off-screen above the viewport — so the menu
   "didn't open". Neutralise that transform whenever the menu is shown. */
@media screen and (max-width: 991px) {
  .w-nav-overlay .w-nav-menu,
  .nav-menu-2.w-nav-menu[data-nav-menu-open],
  .nav-menu-2.w-nav-menu {
    transform: none !important;
  }
}

/* --- Brand logo: swap the text wordmarks for the new GoSorted lockup --------
   The header/footer used a plain "GoSorted" text wordmark. Replace with the
   new lockup (check-tile mark + two-tone wordmark). Header is on a light bg →
   standard lockup; footer is on a dark bg (.footer-logo-text is white) →
   reversed lockup. Uses the 870px PNGs so the Plus Jakarta Sans wordmark is
   pixel-perfect with no web-font dependency. Text is hidden but kept for a11y. */
.navbar-logo-text,
.footer-logo-text {
  display: inline-block;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}
.navbar-logo-text {
  width: 161px;
  height: 40px;
  background-image: url('/assets/img/gosorted-logo-lockup.svg');
}
.footer-logo-text {
  width: 177px;
  height: 44px;
  background-image: url('/assets/img/gosorted-logo-lockup-reversed.svg');
}
@media screen and (max-width: 479px) {
  .navbar-logo-text { width: 138px; height: 34px; }
}

/* --- Top-nav alignment: keep the "Branscher" dropdown level with the plain links ---
   On desktop the plain links (.nav-link) are vertical-align:top with symmetric 4px
   padding, but "Branscher" is a Webflow dropdown whose .nav-dropdown wrapper has a
   taller line-height (27.2px = 16px x 1.7) than its 14px text, so the toggle text
   sat ~1.7px above the other links. Flex-center the <li> and the toggle, and collapse
   the wrapper's line-box to its text height. Desktop only — the mobile (<=991px) menu,
   where Branscher is an expandable row, is untouched.
   NOTE: do NOT set display:flex on .nav-dropdown itself — it contains the absolutely
   positioned mega-menu (top:auto), and flexing it moves the menu's static position to
   the top of the header instead of dropping it below. Adjust its line-height instead. */
@media screen and (min-width: 992px) {
  .nav-menu .dropdown-list-item,
  .nav-menu .nav-dropdown-toggle {
    display: flex;
    align-items: center;
  }
  .nav-menu .nav-dropdown { line-height: 23.8px; }
}