/*
 * LurkAlert desktop header layout (1000px and up).
 *
 * Every top-level link and button keeps its text on one line at every desktop
 * width, on every page that shares the header.
 *
 * assets/site-header-layout.js measures whether the single header row fits
 * inside the header without crossing the logo or the right edge. Only when it
 * does not fit does the script add the lurkalert-header-stacked class to the
 * html element. With that class the text links sit in two centered rows of
 * three (Scam Checker, Meet LurkAlert, Who We Are / Protection Plans,
 * Partners, Connect); on the checker route, which has no Scam Checker link,
 * the rows are three and two. The logo stays at the far left, and Get
 * Protected and Sign in stay at the right, vertically centered. Link fonts
 * are unchanged. Where the single row fits, nothing here changes it. The
 * mobile header (below 1000px) is not touched.
 */
@media (min-width: 1000px) {
  html body #header-outer #top nav > ul.sf-menu > li > a,
  html body #header-outer #top nav > ul.sf-menu > li > a .menu-title-text {
    white-space: nowrap !important;
  }
}

@media (min-width: 1000px) {
  html.lurkalert-header-stacked body #header-outer #top > .container {
    padding-left: clamp(16px, calc(50vw - 484px), 90px);
    padding-right: clamp(16px, calc(50vw - 484px), 90px);
  }

  html.lurkalert-header-stacked body #header-outer #top .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  html.lurkalert-header-stacked body #header-outer #top .col.span_3 {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin-right: 0;
  }

  html.lurkalert-header-stacked body #header-outer #top .col.span_9,
  html.lurkalert-header-stacked body #header-outer #top .col.span_9 > nav {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
  }

  html.lurkalert-header-stacked body #header-outer #top .col.span_9 > nav {
    width: 100%;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 74px;
    padding: 8px 260px 8px 0;
    box-sizing: border-box;
  }

  /* Line break between the two rows of links. */
  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons)::after {
    content: "";
    display: block;
    order: 2;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li {
    float: none;
    height: 44px;
    align-items: center;
    order: 3;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li > a {
    white-space: nowrap;
  }

  /* Same link padding the plugin's navigation stylesheet gives every other
     page. The Scam Checker page does not load that stylesheet, so without
     this its links keep Salient's wider 36px padding and the rows no longer
     fit. Elsewhere these values change nothing. */
  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li:not(.lurkalert-scam-checker-nav):not(.menu-item-has-children):not(#menu-item-280) > a {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children > a {
    padding-right: 34px !important;
    padding-left: 24px !important;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li:nth-child(-n+3) {
    order: 1;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > #menu-item-280,
  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li.lurkalert-account-signin {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    order: 4;
    margin: 0 !important;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li.lurkalert-account-signin {
    right: 0;
    width: 96px;
    justify-content: center;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > #menu-item-280 {
    right: 96px;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > #menu-item-280 > a {
    margin: 0 !important;
  }

  /* The Who We Are dropdown opens over the second row: lift it above those
     links and make the panel opaque so their text cannot show through. */
  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children:hover,
  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children:focus-within,
  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children.sfHover {
    z-index: 30;
  }

  html.lurkalert-header-stacked body #header-outer #top nav > ul.sf-menu:not(.buttons) > li.menu-item-has-children > ul.sub-menu {
    background-color: #fff !important;
  }
}