@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   SHARED SITE NAVIGATION STYLES — single source of truth, paired with
   nav-partial.html (which supplies the markup). Edit ONLY this file to
   change nav appearance site-wide — do not copy these rules into an
   individual page's <style> block again, that's what caused the nav to
   look different from page to page in the first place.
   ═══════════════════════════════════════════════════════════════════ */
.nav { position: sticky; top: 0; z-index: 9999; background: rgba(245,245,247,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 0 48px; height: 64px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; }
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-logo { width: 39px; height: 39px; background: #1e3a5f; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #f5f0e8; font-size: 18px; flex-shrink: 0; }
/* Real bug found live, explicit user report ("Write Smarter" logo wrapping
   to two lines on desktop): no white-space:nowrap here, so once .nav-links
   grew past ~8 items (admin-only accounts also see Research Assistant 2 +
   Quantitative Business, 10 items total) the flex row had nowhere left to
   take space from except this text, and it wrapped instead of the nav
   scrolling or the links shrinking. nav-links items already have their own
   white-space:nowrap; this was the one piece of the nav missing it. */
.nav-name { font-size: 20px; font-weight: 800; color: #0d1b2a; letter-spacing: -0.3px; white-space: nowrap; }
.nav-links { display: flex; flex-wrap: nowrap; gap: 8px; list-style: none; margin: 0; padding: 0; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links li { list-style: none; margin: 0; padding: 0; }
.nav-links a { padding: 9px 16px; border-radius: 8px; font-size: 18px; font-weight: 500; color: #64748b; text-decoration: none; transition: all 0.15s; display: inline-block; }
.nav-links a:hover { color: #1e3a5f; background: #e8f0f8; }
.nav-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; }
.btn-nav-outline { padding: 9px 20px; border-radius: 7px; border: 1.5px solid #e2e8f0; background: transparent; color: #1e3a5f; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; display: inline-block; }
.btn-nav-outline:hover { border-color: #1e3a5f; background: #e8f0f8; }
.btn-nav-primary { padding: 9px 20px; border-radius: 7px; background: #1e3a5f; color: #f5f0e8; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; border: none; display: inline-block; }
.btn-nav-primary:hover { background: #152d4a; }
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: #1e3a5f; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.15s; }
.nav-hamburger:hover { background: #e8f0f8; }
.nav-dropdown { display: none; position: absolute; top: 64px; left: 0; right: 0; background: white; border-bottom: 1px solid rgba(0,0,0,0.08); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 9998; padding: 12px 16px 20px; animation: navSlideDown 0.2s ease; }
.nav-dropdown.active { display: block; }
@keyframes navSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.nav-dropdown-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.nav-dropdown-links a { display: block; padding: 14px 16px; border-radius: 8px; font-size: 17px; font-weight: 500; color: #1e293b; text-decoration: none; }
.nav-dropdown-links a:hover { background: #e8f0f8; color: #1e3a5f; }
.nav-dropdown-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.nav-dropdown-actions a { display: block; text-align: center; padding: 13px; border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; }
.nav-dd-signin { border: 1.5px solid #e2e8f0; color: #1e3a5f; }
.nav-dd-started { background: #1e3a5f; color: #f5f0e8; }
/* The roomier tabs above cost ~100px of horizontal space, so claw that back on
   laptop widths instead of letting the link row start scrolling at ~1366px.
   The 767px rule below still wins on phones (it comes later in the file). */
@media (max-width: 1400px) {
  .nav { padding: 0 24px; }
}
@media (max-width: 767px) {
  .nav-links { display: none !important; }
  .nav-actions { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .nav { padding: 0 16px; }
}

/* Normalisation: page-level body typography (line-height, tracking, smoothing)
   and legacy page-local nav rules must not leak into the shared nav. Without
   this, tabs sit a few pixels apart and widths differ per page. */
.nav, .nav * {
  font-family: 'Inter', sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}
.nav-name { line-height: 24px; }
.nav-links { gap: 8px !important; }
.nav-actions { gap: 12px !important; }
.nav-links a { padding: 9px 16px !important; font-size: 18px !important; font-weight: 500 !important; }