/* Shared header: the "Free review" button on every page, and a menu button that opens the
   site menu on phones and tablets (31 Oct 2026). Loaded after each page's own styles. */

.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;margin-left:22px;
  background:#111;color:#fff !important;border-radius:999px;font-size:12px;letter-spacing:.9px;text-transform:uppercase;
  font-weight:500;text-decoration:none;white-space:nowrap;flex:0 0 auto;transition:background .2s}
.nav-cta:hover,.nav-cta:focus-visible{background:#0f8f68}
.nav-toggle{display:none}
#navbar .nav-links,nav #sitenav{margin-left:auto}
#navbar .nav-logo .tagline,nav .brand em{white-space:nowrap}

/* laptops: the full menu fits once the tagline steps aside */
@media (min-width:1181px) and (max-width:1400px){
  #navbar .nav-logo .tagline,nav .brand em{display:none}
  #navbar .nav-links,nav #sitenav{gap:18px}
}

/* the home page's header is held to a set width, so the full menu only fits without its tagline */
@media (min-width:1181px){nav .brand em{display:none}}

/* phones and tablets: logo, Free review, menu button; the menu drops down below the header */
@media (max-width:1180px){
  :root{--nav-h:58px}
  #navbar{flex-wrap:nowrap !important;align-items:center !important;
    padding-top:env(safe-area-inset-top,0px) !important;padding-bottom:0 !important;
    padding-left:max(20px,env(safe-area-inset-left,0px)) !important;padding-right:max(12px,env(safe-area-inset-right,0px)) !important;
    min-height:calc(58px + env(safe-area-inset-top,0px)) !important}
  #navbar .nav-logo{flex:0 1 auto !important;flex-basis:auto !important;min-width:0;min-height:44px;display:flex;flex-direction:column;justify-content:center}
  #navbar .tl-logo,nav .brand .tl-logo{height:25px;width:auto;align-self:flex-start}
  nav .wrap{flex-wrap:wrap;align-items:center}
  nav .brandwrap{flex:1 1 0;min-width:0;min-height:58px;flex-wrap:nowrap}
  nav #navlist{flex-basis:100%;order:5}
  nav #sitenav{flex-basis:auto !important;width:auto !important}

  .nav-cta{margin-left:auto;min-height:40px;padding:0 14px;font-size:11.5px;letter-spacing:.7px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-left:6px;flex:0 0 auto;
    background:none;border:0;padding:0;cursor:pointer;color:#111;-webkit-tap-highlight-color:transparent}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
    position:relative;transition:transform .2s,opacity .2s}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
  .nav-toggle span::before{top:-7px}
  .nav-toggle span::after{top:7px}
  .menu-open .nav-toggle span{background:transparent}
  .menu-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
  .menu-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}

  /* the menu itself */
  #navbar .nav-links,nav #sitenav{display:none !important;position:absolute;top:100%;left:0;right:0;margin:0 !important;
    flex-direction:column !important;align-items:stretch !important;gap:0 !important;flex-wrap:nowrap !important;overflow-x:hidden !important;overflow-y:auto;
    max-height:calc(100vh - 58px - env(safe-area-inset-top,0px));max-height:calc(100dvh - 58px - env(safe-area-inset-top,0px));
    background:#fff;border-top:1px solid #e8e8e8 !important;padding:6px max(20px,env(safe-area-inset-right,0px)) 18px max(20px,env(safe-area-inset-left,0px)) !important;
    box-shadow:0 18px 30px rgba(0,0,0,.12);list-style:none}
  #navbar.menu-open .nav-links,nav.menu-open #sitenav{display:flex !important}
  #navbar .nav-links li,nav #sitenav li{flex:none !important;border-bottom:1px solid #eee}
  #navbar .nav-links li:last-child,nav #sitenav li:last-child{border-bottom:0}
  #navbar .nav-links a,nav #sitenav a{display:flex !important;align-items:center;justify-content:flex-start !important;min-height:52px;width:100%;
    font-size:14px !important;letter-spacing:1px !important;color:#222;box-shadow:none !important;border:0 !important;padding:0 !important;cursor:pointer}
  #navbar .nav-links a[aria-current="page"],nav #sitenav a[aria-current="page"],#navbar .nav-links a.is-new{color:#000;font-weight:500}
  #navbar .nav-links a[aria-current="page"]::after,nav #sitenav a[aria-current="page"]::after,#navbar .nav-links a.is-new::after{
    content:"";width:6px;height:6px;border-radius:50%;background:#0f8f68;margin-left:10px}
  body.menu-lock{overflow:hidden}
  .nav-shade{position:fixed;inset:0;z-index:899;background:rgba(17,17,17,.32)}
}

/* phones: the logo alone, so the button and menu fit */
@media (max-width:640px){
  #navbar .nav-logo .tagline,nav .brand em,nav .pagename{display:none !important}
}
@media (max-width:360px){
  .nav-cta{padding:0 11px;font-size:11px;letter-spacing:.4px}
}
@media (prefers-reduced-motion:reduce){.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{transition:none}}