/*!
 * Header menu — brand-center alignment fix
 * -----------------------------------------------------------------------------
 * Bootsnav builds the "logo in the middle" header by splitting the menu items
 * into two halves and giving each half a rigid `width:50%` box with a fixed
 * 100px gutter reserved for the logo (see bootsnav.css). As soon as one half
 * needs more room than that (which happens every time a menu item is added,
 * because the split point moves), the items wrap onto a second row and fall
 * out of the header.
 *
 * This file replaces that rigid layout on desktop with a single flex row:
 *
 *     [ left items ][ logo ][ right items ]
 *
 * - the row can never wrap (flex-wrap:nowrap + white-space:nowrap);
 * - the logo is a real item in the row, so items can never sit under it;
 * - both halves are equal flex boxes, so the logo stays optically centred,
 *   and each half only grows past its share when it truly needs to;
 * - spacing is driven by --jssl-nav-scale, which header-menu-fit.js shrinks
 *   just enough to keep everything on one line, whatever the item count.
 *
 * Mobile / tablet (< 1024px) keeps the original collapsible bootsnav layout.
 */

@media (min-width: 1024px) {

  nav.navbar.bootsnav.brand-center {
    /* Set by header-menu-fit.js (1 = full size). Kept as a fallback here so
       the header still behaves if the script is blocked or fails. */
    --jssl-nav-scale: 1;
    /* Horizontal padding of each menu link; the script lowers this before it
       touches the font size. */
    --jssl-nav-pad: clamp(8px, 1.25vw, 20px);
    /* Space kept free on both sides of the row. The icon strip (.attr-nav) is
       absolutely positioned inside it; keeping it symmetrical is what keeps the
       logo centred in the viewport. header-menu-fit.js narrows or widens this
       to the icon strip's real width, so icons can be added or removed there
       without the menu running underneath them. */
    --jssl-nav-icon-inset: clamp(12px, 1.2vw, 20px);
    --jssl-nav-gutter: calc(var(--jssl-nav-icon-inset) + 80px);
    /* Breathing space between the logo and the two menu halves. */
    --jssl-nav-logo-gap: clamp(10px, 1.4vw, 30px);
  }

  /* 1 ── the header row itself ------------------------------------------- */
  nav.navbar.bootsnav.brand-center > .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--jssl-nav-gutter);
    padding-right: var(--jssl-nav-gutter);
  }

  /* The collapse wrapper must not create a box of its own, so that the two
     halves become flex items of the row and can sit around the logo. */
  nav.navbar.bootsnav.brand-center > .container > .navbar-collapse {
    display: contents !important;
  }

  /* 2 ── logo: a real item in the middle of the row --------------------- */
  nav.navbar.bootsnav.brand-center > .container > .navbar-header {
    position: static;
    float: none;
    width: auto;
    max-width: none;
    order: 2;
    flex: 0 0 auto;
    margin: 0 var(--jssl-nav-logo-gap);
    padding: 0;
    text-align: center;
  }

  nav.navbar.bootsnav.brand-center > .container > .navbar-header .logo {
    margin: 0;
  }

  /* 3 ── the two menu halves ------------------------------------------- */
  nav.navbar.bootsnav.brand-center .navbar-collapse .col-half {
    display: flex;
    align-items: center;
    float: none;
    /* Equal shares keep the logo centred; min-content stops the items from
       ever being squeezed into a second row. */
    width: auto;
    flex: 1 1 0%;
    min-width: min-content;
    padding: 0;
    text-align: left;
  }

  nav.navbar.bootsnav.brand-center .navbar-collapse .col-half.left {
    order: 1;
    justify-content: flex-end;
  }

  nav.navbar.bootsnav.brand-center .navbar-collapse .col-half.right {
    order: 3;
    justify-content: flex-start;
  }

  /* 4 ── the menus ----------------------------------------------------- */
  nav.navbar.bootsnav.brand-center .navbar-collapse ul.nav {
    display: flex !important;
    flex-wrap: nowrap;
    float: none !important;
    margin: 0 !important;
    padding: 0;
  }

  nav.navbar.bootsnav.brand-center .navbar-collapse ul.nav > li {
    float: none;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* 5 ── fluid spacing: shrinks instead of wrapping --------------------- */
  nav.navbar.bootsnav.brand-center .navbar-collapse ul.nav > li > a {
    /* header-menu-fit.js tightens --jssl-nav-pad first and only scales the
       type (--jssl-nav-scale) when the padding floor is not enough, so the
       labels keep their full 12px for as long as the row allows. */
    padding-left: var(--jssl-nav-pad);
    padding-right: var(--jssl-nav-pad);
    font-size: calc(12px * var(--jssl-nav-scale));
    /* master.css sets `transition-duration:.2s` on every element with the
       default `transition-property:all`, which would animate these two
       properties — and make them impossible to measure reliably. */
    transition-property: color, background-color, border-color, opacity;
  }

  /* Used by header-menu-fit.js while it measures the row. */
  nav.navbar.bootsnav.brand-center.jssl-nav-measuring,
  nav.navbar.bootsnav.brand-center.jssl-nav-measuring * {
    transition: none !important;
  }

  /* Dropdown/megamenu contents must keep their own type scale. */
  nav.navbar.bootsnav.brand-center .navbar-collapse ul.nav ul.dropdown-menu a,
  nav.navbar.bootsnav.brand-center .navbar-collapse ul.nav .megamenu-content a {
    font-size: 13px;
  }

  nav.navbar.bootsnav.brand-center .navbar-collapse ul.nav .megamenu-content .content ul.menu-col li a {
    font-size: 12px;
  }

  /* 6 ── search icon: stays pinned inside the reserved gutter ----------- */
  nav.navbar.bootsnav.brand-center > .container > .attr-nav {
    position: absolute;
    right: var(--jssl-nav-icon-inset);
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    margin: 0;
    padding-left: 0;
  }

  nav.navbar.bootsnav.brand-center > .container > .attr-nav > ul {
    margin: 0;
  }

  /* Quick actions belong to the collapsed menu only. */
  .jssl-mobile-actions {
    display: none !important;
  }
}

/* ── Collapsed (mobile / tablet) menu quick actions ───────────────────────
   Search + call row shown at the top of the burger menu. */
@media (max-width: 1023px) {
  nav.navbar.bootsnav .navbar-collapse .jssl-mobile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 12px 30px;
    border-bottom: solid 1px #e0e0e0;
  }

  nav.navbar.bootsnav .navbar-collapse .jssl-mobile-actions > li {
    float: none;
    margin: 4px 5px;
  }

  nav.navbar.bootsnav .navbar-collapse .jssl-mobile-actions > li > a {
    display: inline-block;
    padding: 8px 18px;
    border: solid 1px #e0e0e0;
    color: #212121;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
  }

  nav.navbar.bootsnav .navbar-collapse .jssl-mobile-actions > li > a:hover,
  nav.navbar.bootsnav .navbar-collapse .jssl-mobile-actions > li > a:focus {
    border-color: #FEA734;
    color: #FEA734;
  }

  nav.navbar.bootsnav .navbar-collapse .jssl-mobile-actions > li > a > i {
    margin-right: 8px;
    font-size: 14px;
    vertical-align: middle;
  }
}

/* Small laptops have the least room in the row: trim the logo a little, and
   drop the contact icon (the CONTACT menu item is right there anyway) so the
   menu keeps a readable size. */
@media (min-width: 1024px) and (max-width: 1199px) {
  nav.navbar.bootsnav.brand-center > .container > .navbar-header .logo img {
    max-height: 52px;
  }

  nav.navbar.bootsnav.brand-center > .container > .attr-nav > ul > li.contact {
    display: none;
  }
}

/* Browsers without `display:contents` (IE11 and friends) cannot lift the two
   halves out of the collapse wrapper: hand them back the original bootsnav
   layout instead of a half-applied flex row. */
@media (min-width: 1024px) {
  @supports not (display: contents) {
    nav.navbar.bootsnav.brand-center > .container {
      display: block;
      width: 1170px;
      max-width: 100%;
      padding-left: 15px;
      padding-right: 15px;
    }

    nav.navbar.bootsnav.brand-center > .container > .navbar-header {
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      margin: 0;
    }

    nav.navbar.bootsnav.brand-center .navbar-collapse .col-half {
      display: block;
      width: 50%;
      float: left;
      min-width: 0;
    }

    nav.navbar.bootsnav.brand-center .navbar-collapse .col-half.left {
      text-align: right;
      padding-right: 100px;
    }

    nav.navbar.bootsnav.brand-center .navbar-collapse .col-half.right {
      text-align: left;
      padding-left: 100px;
    }

    nav.navbar.bootsnav.brand-center .navbar-collapse ul.nav {
      display: inline-block !important;
    }

    nav.navbar.bootsnav.brand-center .navbar-collapse ul.nav > li {
      float: left;
    }

    nav.navbar.bootsnav.brand-center > .container > .attr-nav {
      right: 60px;
    }
  }
}