/* Shared top navigation bar, used by every page via <link rel="stylesheet" href="shared/nav.css">.
   Each page still defines its own ".topnav a.active { background: ... }" override right after
   this include, so every module keeps its own accent color for its active nav state. */
.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #1b1f27;
  padding: 14px 20px;
  margin: -24px -24px 24px -24px;
}
.topnav .brand { margin-right: 24px; padding: 0; border-radius: 0; display: flex; align-items: center; }
.topnav .brand:hover { background: none; }
.topnav .brand img { height: 44px; width: auto; border-radius: 10px; display: block; }
/* Desktop only: the logo's flex-item box stays 44px tall (so the bar's own
   height is unchanged at 72px), but the image itself renders taller and
   bleeds through the bar's 14px top/bottom padding via matching negative
   margins. At 90px the image is taller than the 72px bar itself, so it
   necessarily bleeds past the bar's own bottom edge too (there's a 24px
   gap below the bar before the page content, plenty of room) -- bleeding
   upward instead would push it above the very top of the page, where it'd
   be permanently clipped with no way to scroll up to it. Skipped on
   narrower widths, where the nav collapses to logo+hamburger only. */
@media (min-width: 900px) {
  .topnav .brand img { height: 90px; margin: -12px 0 -34px; }
}
/* Signed-in greeting, right after the logo -- empty (and collapses to
   nothing) until updateWelcomeGreeting() fills it in, and hidden below
   900px along with the rest of the inline nav to keep mobile's collapsed
   logo+hamburger layout intact. */
.nav-welcome { color: #cfd3da; font-weight: 700; font-size: 15px; white-space: nowrap; margin-left: 4px; }
.topnav a { color: #cfd3da; text-decoration: none; font-weight: 700; padding: 10px 18px; border-radius: 8px; }
.topnav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-spacer { flex: 1 1 auto; }

/* Account cluster (email+Logout, or the Google button when signed out) --
   a left divider plus its own left padding keeps it visually distinct from
   the preceding nav links instead of blending in as just more menu items. */
.nav-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.15);
}
.nav-google-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  border: none;
  background: #fff;
  color: #333;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.nav-google-btn:hover { background: #f0f0f0; }
.nav-google-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.nav-progress-link { color: #cfd3da; font-size: 13px; padding: 8px 12px; white-space: nowrap; }
.nav-progress-link.active { background: rgba(255,255,255,.16); color: #fff; }
.nav-account-email { color: #8a90a0; font-size: 12px; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.nav-logout-btn {
  padding: 7px 12px;
  border-radius: 6px;
  border: none;
  background: #37414f;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.nav-logout-btn:hover { background: #445069; }

.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  padding: 6px;
  min-width: 210px;
  z-index: 500;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown:hover .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a { color: #333; padding: 10px 14px; white-space: nowrap; }
.nav-dropdown-menu a:hover { background: #f0f1f3; color: #333; }
.nav-dropdown-menu a.active { background: #f0f1f3; font-weight: 800; }

/* 3-line hamburger, always visible regardless of screen size -- opens the
   same full site-map overlay for both desktop and mobile visitors. */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-hamburger span { display: block; width: 100%; height: 2px; background: #cfd3da; border-radius: 2px; }
.nav-hamburger:hover span { background: #fff; }

/* Below 900px, the inline Math/English/GK/More/About/Pricing/Support/account
   links hide -- Home and (if the visitor is browsing one) the current
   module stay, and the hamburger overlay covers everything else, so
   there's no hover-vs-tap dropdown behavior to reconcile on touch devices. */
@media (max-width: 899px) {
  .nav-account, .nav-link, .nav-dropdown, .nav-welcome { display: none; }
}
/* .nav-mobile-current is the mobile-only mirror of whichever module the
   Math/English/GK/More links above already cover on desktop -- redundant
   there, so it only renders below the 900px breakpoint. */
@media (min-width: 900px) {
  .nav-mobile-current { display: none; }
}

/* ================= trial banner (shared/nav.js's insertTrialBanner) ================= */
.trial-feedback-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 -24px 24px -24px;
  padding: 10px 20px;
  background: #1b1f27;
}
.trial-feedback-link {
  padding: 6px 12px;
  border-radius: 6px;
  background: #ffca28;
  color: #3a2e00;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  justify-self: center;
}
.trial-feedback-account {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  min-width: 0; /* lets this grid item shrink below its content's width instead of overflowing the row */
}
.trial-feedback-email {
  color: #8a90a0;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.trial-feedback-logout {
  padding: 7px 12px;
  border-radius: 6px;
  border: none;
  background: #37414f;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Message + email + Logout all on one row runs out of space on phone-width
   screens well before 899px -- stack the account controls under the trial
   message instead of letting them push the row (and the whole page) wider
   than the viewport, which was making taps land in the wrong place site-wide. */
@media (max-width: 640px) {
  .trial-feedback-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
  }
  .trial-feedback-spacer { display: none; }
  .trial-feedback-account { justify-self: center; }
  .trial-feedback-email { max-width: 55vw; }
}

/* ================= hamburger overlay ================= */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,17,22,.55);
  z-index: 2000;
}
.nav-overlay.open { display: block; }
.nav-overlay-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: min(360px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -8px 0 30px rgba(0,0,0,.25);
  padding: 20px 20px 40px;
  overflow-y: auto;
}
.nav-overlay-inner a { text-decoration: none; }
.nav-overlay-close {
  display: block;
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: none;
  background: #f0f1f3;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #333;
  cursor: pointer;
}
.nav-overlay-close:hover { background: #e2e3e6; }
.nav-overlay-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}
.nav-overlay-account .nav-google-btn { background: #f7f7f9; border: 2px solid #ddd; }
.nav-overlay-account .nav-progress-link {
  color: #1565c0;
  font-weight: 700;
  /* claims the full row width, which in a wrapping flex row pushes it onto
     its own new line below email+Logout instead of trailing after them. */
  flex-basis: 100%;
}
.nav-overlay-account .nav-progress-link.active { background: #e3f2fd; border-radius: 8px; }
.nav-overlay-account .nav-account-email { color: #888; max-width: 200px; }
.nav-overlay-account .nav-logout-btn { background: #eee; color: #333; }
.nav-overlay-account .nav-logout-btn:hover { background: #ddd; }

.nav-overlay-link {
  display: block;
  padding: 12px 8px;
  color: #222;
  font-weight: 700;
  border-radius: 8px;
}
.nav-overlay-link:hover { background: #f5f5f7; }
.nav-overlay-link.active { background: #eef1f5; }

.nav-overlay-modules-label {
  font-size: 12px;
  font-weight: 800;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 18px 0 6px;
  padding: 0 8px;
}
.nav-overlay-modules { display: flex; flex-direction: column; gap: 2px; }
.nav-overlay-module-link {
  flex: 1 1 auto;
  padding: 12px 8px;
  color: #222;
  font-weight: 700;
  border-radius: 8px;
}
.nav-overlay-module-link:hover { background: #f5f5f7; }
.nav-overlay-module-link.active { background: #eef1f5; }
.nav-overlay-module-row { display: flex; align-items: center; }
.nav-overlay-expand-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s;
}
.nav-overlay-module.expanded .nav-overlay-expand-btn { transform: rotate(180deg); }
.nav-overlay-sublist {
  display: none;
  flex-direction: column;
  padding-left: 18px;
  border-left: 2px solid #eee;
  margin: 2px 0 6px 20px;
}
.nav-overlay-module.expanded .nav-overlay-sublist { display: flex; }
.nav-overlay-sub-link {
  padding: 9px 8px;
  color: #555;
  font-weight: 600;
  font-size: 14px;
  border-radius: 6px;
}
.nav-overlay-sub-link:hover { background: #f5f5f7; }
.nav-overlay-sub-link.active { background: #eef1f5; color: #222; font-weight: 800; }