/*
 * Header fit fixes. Loaded after app.css from templates/_global/base.html.
 * Plain CSS (not part of the CodeKit-compiled SCSS) so it can change
 * without recompiling app.css.
 *
 * The desktop nav is absolutely positioned against the right edge, so below
 * ~1750px it slid under the logo. Two tiers:
 *   1300-1799px  tighter nav spacing; logo shrinks (350px -> 250px) only as needed
 *   1024-1299px  use the mobile burger menu, which previously started below 1024px
 */

/* Only the unscrolled header needs this: once scrolled, the logo is hidden. */
@media (min-width: 1300px) and (max-width: 1799px) {
  #top-bar:not(.is-stuck) .shrink-logo img.top-logo { width: clamp(250px, calc(100vw - 1060px), 350px); }
  #top-bar:not(.is-stuck) nav ul { right: 16px; align-items: center; }
  #top-bar:not(.is-stuck) nav ul li { padding-bottom: 0; }
  #top-bar:not(.is-stuck) nav ul li a { padding: 5px 7px 0; margin: 0; }
  #top-bar:not(.is-stuck) nav ul li a p { font-size: 16px; }
  #top-bar:not(.is-stuck) nav ul li a i { margin-left: 0.3em; }
  #top-bar:not(.is-stuck) a.website-cta { margin-left: 8px; margin-bottom: 0; padding: 5px 12px; }
  #top-bar:not(.is-stuck) a.website-cta p { font-size: 14px; letter-spacing: 0.5px; }
}

/* Scrolled header on wide screens: app.css sets the logo height to 0 here,
   which collapsed the whole header. Shrink it to a slim bar instead, like
   the scrolled header on tablets/phones. */
@media (min-width: 1300px) {
  #top-bar.is-stuck .shrink-logo img.top-logo { width: 200px; height: auto; }
  #top-bar.is-stuck nav ul { right: 16px; align-items: center; }
  #top-bar.is-stuck nav ul li { padding-bottom: 0; }
  #top-bar.is-stuck nav ul li a { padding: 13px 7px; margin: 0; border-bottom: 0; }
  #top-bar.is-stuck nav ul li a p { font-size: 16px; margin: 0; }
  #top-bar.is-stuck nav ul li a i { margin-left: 0.3em; }
  #top-bar.is-stuck a.website-cta { margin: 0 0 0 8px; padding: 4px 12px; }
  #top-bar.is-stuck a.website-cta p { font-size: 14px; letter-spacing: 0.5px; }
}

/* Undo the min-width:1024px desktop nav rules so the mobile menu applies. */
@media (min-width: 1024px) and (max-width: 1299px) {
  #top-bar { flex-direction: column; justify-content: flex-start; padding-right: 50px; }
  #top-bar .mobile-nav-wrap { width: 100%; }
  .mobile-btn { display: flex; }

  #top-bar nav { display: none; }
  #top-bar.ul-out nav { display: flex; }
  #top-bar nav ul {
    height: auto; overflow: hidden; display: block; align-items: normal;
    position: fixed; left: auto; right: -100px; top: auto; bottom: auto; width: auto;
  }
  #top-bar nav ul li a { margin: 0 5px; border-bottom: 0; }
  #top-bar nav ul li a i { display: none; }

  .dropdown-content {
    flex-direction: column; display: flex; position: relative;
    background-color: #ffffff; top: 0; padding: 0; align-items: normal;
  }
  .dropdown-content a { max-width: none; min-width: 0; margin: 0 !important; padding: 10px 0 !important; }
  .dropdown-content a img { display: none; }

  a.website-cta { margin: 3em auto 2em; width: 90%; padding: 10px 1em; }
  #top-bar.is-stuck a.website-cta { margin: 1em auto 1.2em; }
  #top-bar.is-stuck .shrink-logo img.top-logo { width: 200px; height: auto; }
}

/* ── Mobile (burger) menu layout ─────────────────────────────────────────
 * Applies wherever the burger menu is used (below 1300px, see above).
 * The open panel used to be a fixed 100vh box with centered, unscrollable
 * items, so long menus overflowed under the header and off the bottom.
 * Now the header is a column: logo row, then a scrollable menu below it.
 */
.submenu-toggle { display: none; }

@media (max-width: 1299px) {
  #top-bar.ul-out { height: 100vh; height: 100dvh; padding-right: 0; flex-direction: column; }
  #top-bar.ul-out .mobile-nav-wrap { flex-shrink: 0; }

  #top-bar.ul-out nav {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #EDEDED;
  }
  #top-bar.ul-out nav > ul {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 0 0 32px;
    margin: 0;
    transition: none;
  }

  /* Rows */
  #top-bar.ul-out nav > ul > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    text-align: left;
    border-bottom: 1px solid #EDEDED;
    background: transparent;
  }
  #top-bar.ul-out nav > ul > li > a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 52px;
    margin: 0;
    padding: 0 24px;
    text-align: left;
    border: 0;
  }
  #top-bar.ul-out nav > ul > li > a p {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    color: #133045 !important;
    text-align: left;
  }
  #top-bar.ul-out nav > ul > li > a p i { display: none; }

  /* Hover/tap state from scripts.js (active-drop) is for the desktop mega menu */
  #top-bar.ul-out li.nav-btn.active-drop { background-color: transparent; }
  #top-bar.ul-out li.nav-btn.active-drop p { color: #133045 !important; }
  #top-bar.ul-out li.nav-btn.active-drop i { color: #25608A; }

  /* Expand/collapse button for sub-pages */
  #top-bar.ul-out .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid #EDEDED;
    background: transparent;
    color: #25608A;
    font-size: 16px;
    cursor: pointer;
  }
  #top-bar.ul-out .submenu-toggle i { transition: transform .2s; }
  #top-bar.ul-out li.open > .submenu-toggle i { transform: rotate(180deg); }
  #top-bar.ul-out .submenu-toggle:focus-visible { outline: 3px solid #42ABE2; outline-offset: -3px; }

  /* Sub-pages: hidden until expanded (overrides the desktop :hover rule) */
  #top-bar.ul-out li.dropdown:not(.open) .dropdown-content { display: none; }
  #top-bar.ul-out li.dropdown.open .dropdown-content {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    position: static;
    width: 100%;
    padding: 4px 0 8px;
    background-color: #F4F8FB;
    box-shadow: none;
  }
  #top-bar.ul-out .dropdown-content a {
    display: flex !important;
    justify-content: flex-start;
    min-height: 44px;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 24px 10px 40px !important;
    background-color: transparent;
    box-shadow: none;
  }
  #top-bar.ul-out .dropdown-content a img { display: none; }
  #top-bar.ul-out .dropdown-content a p {
    font-size: 16px;
    font-weight: 400 !important;
    color: #133045 !important;
  }
  #top-bar.ul-out .dropdown-content a:hover { background-color: #E3EDF4; box-shadow: none; }
  #top-bar.ul-out .dropdown-content a:hover p { color: #133045 !important; }

  /* Buttons: grouped, even spacing */
  #top-bar.ul-out nav > ul > a.website-cta {
    display: block;
    width: auto;
    margin: 12px 24px 0 !important;
    padding: 14px 16px;
    text-align: center;
    border: 0;
  }
  #top-bar.ul-out nav > ul > li + a.website-cta { margin-top: 28px !important; }
  #top-bar.ul-out nav > ul > a.website-cta p { font-size: 15px; letter-spacing: 1px; }
}