/* ===========================================================================
   The site's header, in one file.

   Every public page loads this -- the home page, the catalogue, a course,
   a bundle, checkout, the legal pages -- so the bar at the top is the same
   bar everywhere rather than two that resemble each other.

   It declares its own variables rather than reading the theme's, because
   half the pages that use it are not built on the theme.
   ========================================================================= */

.hm-head,.hm-sheet{
  --nv-ink:#0D084D; --nv-ink-2:#55597A; --nv-faint:#8A8DA5;
  --nv-line:#E4E8EF; --nv-bg:#F6F8FB; --nv-blue:#1362B1; --nv-sky:#72CAEA;
  --nv-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --nv-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --nv-shell:1200px;
  --nv-h:76px;              /* the bar's height, which the sticky bits read */
}

.hm-head{position:sticky;top:0;z-index:60;font-family:var(--nv-sans);
  background:rgba(246,248,251,.88);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--nv-line)}
.hm-head *{box-sizing:border-box}
.hm-head .hm-wrap{max-width:var(--nv-shell);margin:0 auto;padding:13px 28px;
  display:flex;align-items:center;gap:26px;
  border-left:1px solid var(--nv-line);border-right:1px solid var(--nv-line)}

/* The lock-up, at a size you can actually read across a room. It was 32px
   tall, which is a favicon with a word beside it. */
.hm-logo{display:flex;align-items:center;flex-shrink:0;height:48px;
  text-decoration:none}
.hm-logo img{height:44px;width:auto;display:block}
.hm-logo span{font-family:var(--nv-serif);font-weight:500;font-size:28px;
  letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--nv-sky),#0970C4 45%,var(--nv-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hm-nav{display:flex;flex:1;justify-content:center;gap:30px;font-size:15.5px;
  font-weight:500;white-space:nowrap}
.hm-head .hm-nav a{color:var(--nv-ink-2);text-decoration:none;position:relative;
  padding:6px 0;transition:color .16s}
.hm-head .hm-nav a:hover{color:var(--nv-ink)}
/* A quiet rule under the page you are on, drawn from the middle out. */
.hm-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;
  border-radius:2px;background:var(--nv-blue);transition:left .2s,right .2s}
.hm-nav a:hover::after,.hm-nav a[aria-current]::after{left:0;right:0}
.hm-head .hm-nav a[aria-current]{color:var(--nv-ink);font-weight:600}
.hm-nav a[aria-disabled="true"],.hm-sheet a[aria-disabled="true"]{color:var(--nv-faint);
  cursor:default}
.hm-nav a[aria-disabled="true"]:hover{color:var(--nv-faint)}
.hm-nav a[aria-disabled="true"]:hover::after{left:50%;right:50%}

.hm-acts{margin-left:auto;display:flex;gap:8px;align-items:center;white-space:nowrap}
.hm-head .hm-acts .login{color:var(--nv-ink);font-weight:600;font-size:15px;padding:11px 16px;
  text-decoration:none;border-radius:99px}
.hm-acts .login:hover{background:rgba(13,8,77,.05)}
.hm-head .hm-acts .start{background:var(--nv-ink);color:#fff;font-weight:600;font-size:15px;
  padding:12px 22px;border-radius:99px;border:1px solid var(--nv-ink);
  text-decoration:none;box-shadow:0 8px 18px -10px rgba(13,8,77,.6);
  transition:background .18s,border-color .18s}
.hm-head .hm-acts .start:hover{background:var(--nv-blue);border-color:var(--nv-blue);color:#fff}

.hm-burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;
  border-radius:14px;border:1px solid #D7DCE6;background:#fff;color:var(--nv-ink);
  cursor:pointer;padding:0}
.hm-burger svg{width:22px;height:22px}

/* ---------------------------------------------------------- the sheet ----
   A panel that comes down over the page rather than a list unrolling under
   the bar. The old drawer pushed the page down and left the reader looking
   at a strip of links with the page still showing behind them; this covers
   the page, which is what a menu is for, and gives each item room enough to
   be hit without aiming. */
.hm-sheet{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  font-family:var(--nv-sans);background:var(--nv-bg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1),visibility .22s}
.hm-sheet.open{opacity:1;visibility:visible;transform:none}
.hm-sheet-top{display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px;border-bottom:1px solid var(--nv-line);flex:none}
.hm-sheet-top .hm-logo{height:44px}
.hm-sheet-top .hm-logo img{height:40px}
.hm-sheet-x{width:46px;height:46px;border-radius:14px;border:1px solid #D7DCE6;
  background:#fff;color:var(--nv-ink);cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0}
.hm-sheet-x svg{width:20px;height:20px}
.hm-sheet-body{flex:1;min-height:0;overflow-y:auto;padding:14px 20px 24px}
.hm-sheet .hm-sheet-body a{display:flex;align-items:center;gap:14px;padding:16px 4px;
  font-family:var(--nv-serif);font-size:26px;font-weight:400;letter-spacing:-.02em;
  color:var(--nv-ink);text-decoration:none;border-bottom:1px solid var(--nv-line)}
.hm-sheet-body a .n{font-family:var(--nv-sans);font-size:12px;font-weight:800;
  letter-spacing:.08em;color:var(--nv-faint);width:22px;flex:none}
.hm-sheet-body a:active{background:rgba(19,98,177,.05)}
.hm-sheet .hm-sheet-body a[aria-current]{color:var(--nv-blue)}
.hm-sheet-foot{flex:none;padding:16px 20px 26px;border-top:1px solid var(--nv-line);
  background:#fff;display:flex;flex-direction:column;gap:10px}
.hm-sheet-foot a{display:flex;align-items:center;justify-content:center;
  min-height:52px;border-radius:99px;font-size:16px;font-weight:600;
  text-decoration:none}
.hm-sheet .hm-sheet-foot .go{background:var(--nv-ink);color:#fff}
.hm-sheet .hm-sheet-foot .alt{background:#fff;color:var(--nv-ink);border:1px solid #D7DCE6}
.hm-sheet-foot .say{font-size:13px;color:var(--nv-faint);text-align:center;
  min-height:0;display:block}
/* The page behind a full-screen sheet must not scroll under it. */
body.hm-locked{overflow:hidden}

@media (max-width:960px){
  .hm-nav{display:none}
  .hm-burger{display:flex}
  .hm-acts .login{display:none}
}
@media (max-width:760px){
  .hm-head{--nv-h:68px}
  .hm-head .hm-wrap{padding:11px 20px;gap:12px}
  /* The logo is the way home, and the first thing a thumb reaches for. */
  .hm-logo{height:44px}
  .hm-logo img{height:38px}
  .hm-acts .start{padding:11px 18px;font-size:14.5px;min-height:44px;
    display:inline-flex;align-items:center}
}
@media (max-width:380px){
  /* The narrowest screens: the logo, one button and the menu have to share
     320px, so everything steps down together -- and the bar still has to
     fit, which it did not at the larger sizes. */
  .hm-head .hm-wrap{padding:9px 12px;gap:6px}
  .hm-logo{height:44px}
  .hm-logo img{height:30px}
  .hm-acts{gap:5px}
  .hm-acts .start{padding:10px 12px;font-size:13.5px}
  .hm-burger{width:44px;height:44px;border-radius:12px}
  .hm-sheet-body a{font-size:23px;padding:14px 4px}
}

@media (prefers-reduced-motion:reduce){
  .hm-sheet{transition:none}
  .hm-nav a::after{transition:none}
}