/* Site header: a full-width bar with four menus and a search box.
   Loaded after theme.css and overrides its floating-box header. */

.navbar {
  top: 0;
  width: 100%;
  max-width: none;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}
.navbar.is-scrolled,
.page-home .navbar.is-scrolled,
:root[data-theme="light"] .navbar,
:root[data-theme="light"] .page-home .navbar.is-scrolled { box-shadow: none; }
.nav-spacer { height: 73px; }
.nav-inner { gap: 20px; }
.navbar .brand-logo { height: 46px; }
/* Logo steps down with the screen so the account icons always fit beside it. */
@media (max-width: 1180px) { .navbar .brand-logo { height: 38px; } }
@media (max-width: 900px)  { .navbar .brand-logo { height: 30px; } }
@media (max-width: 420px)  {
  .navbar .brand-logo { height: 24px; }
  .nav-inner { padding: 0 14px; gap: 10px; }
  .nav-right { gap: 2px; padding-left: 8px; }
}
@media (max-width: 350px)  { .navbar .brand-logo { height: 21px; } }

.nav-links { gap: 22px; margin-left: 12px; }
.nav-menu-wide { width: 520px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 12px; padding: 12px 6px; left: -16px; right: auto; }
.nav-menu .nav-more-menu:not(.nav-menu-wide) { left: -16px; right: auto; }
.nav-menu-head { margin: 8px 15px 4px; font-size: 12.5px; font-weight: 600; color: var(--text-faint); }
.nav-menu-col .nav-menu-head:first-child { margin-top: 2px; }
.nav-menu-wide a { padding: 6px 15px; font-size: 14px; }

/* Search */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-desktop { margin-left: auto; }
.nav-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--text-faint); pointer-events: none; }
.nav-search input {
  width: 190px; height: 36px; padding: 0 12px 0 32px;
  font-size: 14px; border-radius: 3px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #fff;
  transition: width .2s ease, border-color .15s;
}
.nav-search input::placeholder { color: rgba(255,255,255,0.55); }
.nav-search input:focus { width: 240px; border-color: rgba(255,255,255,0.4); }
:root[data-theme="light"] .navbar.is-scrolled .nav-search input,
:root[data-theme="light"] body:not(.page-home) .nav-search input {
  background: #f4f2ed; border-color: rgba(18,21,25,.16); color: var(--text);
}
:root[data-theme="light"] body:not(.page-home) .nav-search input::placeholder,
:root[data-theme="light"] .navbar.is-scrolled .nav-search input::placeholder { color: var(--text-faint); }
.nav-search-mobile { display: none; }

@media (max-width: 1180px) {
  .nav-search input { width: 140px; }
  .nav-search input:focus { width: 180px; }
  .nav-links { gap: 16px; }
}
/* Narrow desktops: the box shrinks to its icon until it is focused. */
@media (max-width: 1080px) and (min-width: 901px) {
  .nav-search input { width: 36px; padding-right: 0; cursor: pointer; }
  .nav-search input::placeholder { color: transparent !important; }
  .nav-search input:focus { width: 170px; cursor: text; }
}
@media (max-width: 900px) {
  .nav-search-desktop { display: none; }
  .nav-search-mobile { display: block; margin: 4px 0 10px; }
  .nav-search-mobile input { width: 100%; padding-left: 12px; height: 42px; font-size: 16px; }
  .nav-search-mobile input:focus { width: 100%; }
  .nav-menu-wide { width: auto; display: block; padding: 0 0 10px 16px; }
  .nav-menu-head { margin: 10px 0 4px; }
  .nav-menu-wide a { padding: 7px 0; }
  .nav-spacer { height: 67px; }
}

/* Footer now has a Markets column. */
@media (min-width: 901px) {
  .footer-grid { grid-template-columns: 2fr repeat(4, 1fr); }
}

/* Right-edge fade on tables that scroll sideways (set by common.js). */
.mk-table-wrap.has-more, .lesson-table-wrap.has-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

/* Small laptops, signed in: the avatar already opens the dashboard, so the text link goes. */
@media (max-width: 1040px) and (min-width: 901px) {
  .nav-links > a.nav-dash { display: none; }
  .nav-links { gap: 14px; }
  .nav-inner { gap: 14px; }
}