/* ==========================================================================
   Intelligent Title — Two-Tier Desktop Header v1.0
   File: /assets/css/it-nav.css
   Load LAST, after site.css, video-share.css, it-tokens.css, it-fixes.css.

   1181px and wider: a quiet secondary row sits above the primary row.
     Secondary: Why Intelligent Title, When to Order, Underwriting,
                Meet IRIS, Resources
     Primary:   Who We Serve, Pre-Policy Intelligence, Price a Policy,
                Order — $149
   1180px and below: unchanged. The secondary row is hidden and the
   hamburger menu lists every item, exactly as today.

   Rollback: remove the it-nav.css <link>. The markup it adds is hidden
   by default, so the site returns to the single-row header.
   ========================================================================== */

/* Hidden unless the desktop rules below apply */
.it-utility { display: none; }

@media (min-width: 1181px) {
  :root {
    --it-utility-h: 32px;   /* secondary row, including its border   */
    --it-primary-h: 76px;   /* primary row                            */
    --it-header-h: calc(var(--it-utility-h) + var(--it-primary-h) + 1px); /* + header border */
  }

  /* ---- Secondary row ---------------------------------------------------- */
  .it-utility {
    display: block;
    height: var(--it-utility-h);
    box-sizing: border-box;
    background: var(--it-teal-25, #F6FBFC);
    border-bottom: 1px solid var(--it-border, #D9DCE1);
  }
  .it-utility ul {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
  }
  .it-utility a {
    display: block;
    font-family: var(--sans, inherit);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--it-slate-500, #57657B);      /* 5.66:1 on teal-25 */
    text-decoration: none;
    padding: 6px 0;
  }
  .it-utility a:hover { color: var(--it-teal-700, #0B6F7F); }
  .it-utility a[aria-current="page"] {
    color: var(--navy, #0F2342);
    box-shadow: inset 0 -2px 0 var(--it-action, #0E7F91);
  }

  /* ---- Primary row: essentials only, full size -------------------------- */
  .nav-items > li.it-secondary { display: none; }
  .nav-wrap {
    height: var(--it-primary-h);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    gap: 32px;
  }
  .nav-items { gap: 32px; flex-wrap: nowrap; }
  .nav-items .nav-link {
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 10px 0;
    white-space: nowrap;
  }
  .nav-cta { padding: 11px 20px; font-size: 15px; white-space: nowrap; }
  /* Undo the compact 1181-1359px logo from it-fixes.css; there is room now */
  .nav-logo .it-logo, .nav-logo svg { width: auto; height: 40px; }

  /* ---- Things that sit under the header --------------------------------- */
  .trust-bar { top: var(--it-header-h); }
  .mega-menu { top: calc(var(--it-header-h) - 12px); }
  /* Invisible bridge over the gap between "Who We Serve" and its menu, so the
     menu stays open while the pointer travels down into it */
  .mega-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  html { scroll-padding-top: calc(var(--it-header-h) + 72px); }
}

@media (min-width: 1181px) and (max-width: 1279px) {
  .nav-items { gap: 26px; }
  .it-utility ul { gap: 22px; }
}