/*
 * TestLoopers horizontal header navigation.
 * One horizontal navigation on desktop; original hamburger remains mobile-only.
 * Phones and small tablets retain their unchanged original mobile menu.
 */
.desktop-header-nav,.header-desktop-login{display:none}
@media (min-width:1024px){
 /* Mobile hamburger is completely removed from the desktop layout.
    All remaining sections are reachable from the labeled More/Account menu. */
 .top .site-nav-menu{display:none!important}
 .desktop-header-nav{
  display:flex;align-items:center;justify-content:center;
  flex:1 1 auto;min-width:0;gap:clamp(2px,.4vw,9px);
  white-space:nowrap
 }
 .desktop-header-nav>a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:9px clamp(6px,.6vw,12px);
  border:1px solid transparent;border-radius:10px;
  color:#577096;font-size:clamp(11px,.82vw,12px);
  font-weight:750;line-height:1.35;white-space:nowrap;
  transition:background-color .16s,color .16s,border-color .16s
 }
 .desktop-header-nav .desktop-nav-logout-form{display:inline-flex;flex:0 0 auto;margin:0}
 .desktop-header-nav .desktop-nav-logout-form button{
  display:inline-flex;align-items:center;justify-content:center;
  height:37px;width:36px;padding:0;
  border:1px solid #e3e9f5;border-radius:10px;
  background:#fff;color:#647a9d;cursor:pointer
 }
 .desktop-header-nav .desktop-nav-logout-form button:hover{background:#fff2f2;border-color:#f2dfe2;color:#b34c5d}
 .desktop-header-nav .desktop-nav-logout-form button:focus-visible{outline:3px solid #8dabff;outline-offset:2px}
 .desktop-header-nav .desktop-nav-account{color:#355bc2}
 .desktop-header-nav>a:hover,
 .desktop-header-nav>a[aria-current=page]{
  background:#f1f5ff;color:#335cd5;
 }
 .desktop-header-nav>a.desktop-nav-cta{
  background:#365de1;border-color:#365de1;
  box-shadow:0 5px 16px #335cdb21;color:white;
  padding-inline:clamp(9px,.95vw,15px);
 }
 .desktop-header-nav>a.desktop-nav-cta:hover,
 .desktop-header-nav>a.desktop-nav-cta[aria-current=page]{
  background:#284bc4;border-color:#284bc4;color:#fff
 }
 .top>.top-right{
  flex:0 0 auto;display:flex;align-items:center;
  justify-content:flex-end;gap:8px;margin-left:0
 }
 .header-desktop-login{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:9px 13px;border:1px solid #e0e8f7;
  border-radius:10px;background:#fff;
  color:#42609c;font-size:12px;font-weight:800;white-space:nowrap
 }
 .header-desktop-login:hover{background:#f2f5ff;color:#365de1}
 .desktop-header-nav a:focus-visible,.header-desktop-login:focus-visible{
  outline:3px solid #8dabff;outline-offset:3px
 }
}
@media (min-width:1024px) and (max-width:1199px){
 .top{padding-left:20px;padding-right:20px;gap:10px}
 .top>.brand{max-width:205px}
 .top>.brand .brand-wordmark-svg{width:202px}
 .desktop-header-nav>a:nth-child(3):not(.desktop-nav-cta),
 .desktop-header-nav>a:nth-child(4):not(.desktop-nav-cta){display:none}
 .desktop-header-nav{gap:2px}
 .header-desktop-login{padding:8px 10px;font-size:11px}
 .top>.top-right{gap:6px}
}
@media (min-width:1200px) and (max-width:1330px){
 .desktop-header-nav>a:nth-child(4):not(.desktop-nav-cta){display:none}
}
@media (prefers-reduced-motion:reduce){
 .desktop-header-nav>a{transition:none}
}


/* TestLoopers sticky header on scroll — desktop, tablet and phone.
   Keep it in the normal document flow so content does not jump. */
.site > header.top{
 position:sticky;
 top:0;
 z-index:1000;
 flex-shrink:0;
 background:#fff;
 box-shadow:0 3px 16px rgba(20,43,87,.065);
}
/* When jumping from header links to homepage sections, keep titles visible. */
#how,#community{scroll-margin-top:105px}
@media (max-width:940px){
 #how,#community{scroll-margin-top:88px}
 /* The admin's secondary toolbar stays below the sticky global header. */
 .page-admin .tl-mobile-toolbar{top:66px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
}