/*
 * Shared dark "chrome" theme layered on top of assets/css/app.css.
 *
 * Scope: header, primary nav, nav dropdowns, footer, mobile bottom nav,
 * mobile sheets, and the immersive take-header — the parts every page
 * gets from render_layout(). Deliberately does NOT touch page body
 * content (cards, forms, buttons inside .site-main, etc.) or the
 * :root / --primary custom properties, which page content still relies on.
 *
 * Loaded after app.css in includes/layout.php so these rules win on
 * selectors of equal specificity.
 */

.site-header {
  background: #10161F;
  box-shadow: none;
  border-bottom: 1px solid #2A3341;
}

/* Full-bleed pages (e.g. the homepage) manage their own section widths via
   their own wrapper class instead of the shared .container. */
.site-main--bleed {
  padding: 0;
}

.header-stats-bar {
  border-top-color: #2A3341;
}

.header-stats-inner {
  color: #AAB3C0;
  background: #1B2330;
  border-color: #2A3341;
}

.nav-menu-toggle {
  border-color: #3A4557;
  background: transparent;
  color: #fff;
}

.nav-menu-toggle:hover {
  background: #1B2330;
  border-color: #8892A0;
}

/* Text wordmark (replaces the image logo, which doesn't read on a dark header) */
.chrome-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}

.chrome-logo-main {
  color: #fff;
  font-family: 'Space Grotesk', 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.chrome-logo-sub {
  align-self: flex-end;
  margin-top: 2px;
  color: #AAB3C0;
  font-family: 'IBM Plex Mono', 'Roboto', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.chrome-logo-sub span {
  color: #17A398;
}

.main-nav > a {
  color: #B7BFCC;
}

.main-nav > a.active,
.main-nav > a:hover {
  color: #fff;
}

.nav-dropdown-toggle:not(.btn),
.nav-user-toggle:not(.btn) {
  color: #B7BFCC;
}

.nav-dropdown-toggle:not(.btn):hover,
.nav-user-toggle:not(.btn):hover {
  color: #fff;
}

.nav-dropdown-menu {
  background: #1B2330;
  border-color: #2A3341;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
}

.nav-dropdown-menu a {
  color: #B7BFCC;
}

.nav-dropdown-menu a:hover {
  background: #232C3A;
  color: #fff;
}

/* Header-only button treatment (scoped via .main-nav, does not touch .btn-primary/.btn-outline elsewhere) */
.main-nav a.btn-outline {
  color: #fff;
  border-color: #3A4557;
  background: transparent;
}

.main-nav a.btn-outline:hover {
  color: #fff;
  border-color: #8892A0;
  background: #1B2330;
}

.main-nav a.btn-primary {
  background: #17A398;
  border-color: #17A398;
  color: #06231F;
}

.main-nav a.btn-primary:hover {
  background: #20B8AB;
  border-color: #20B8AB;
}

/* Footer */
.site-footer {
  background: #10161F;
  color: #8A93A3;
}

.site-footer-notices {
  border-bottom-color: #2A3341;
}

.site-footer-links a {
  color: #B7BFCC;
}

.site-footer-links a:hover {
  color: #fff;
}

/* Immersive take-header (quiz/flashcard/lab session chrome) */
.take-header {
  background: #10161F;
  color: #fff;
  box-shadow: none;
  border-bottom: 1px solid #2A3341;
}

.take-header .btn-outline {
  color: #fff;
  border-color: #3A4557;
}

.take-header .btn-outline:hover {
  background: #1B2330;
  border-color: #8892A0;
}

/* Mobile bottom nav */
@media (max-width: 959px) {
  .mobile-bottom-nav {
    background: #10161F;
    border-top-color: #2A3341;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
  }

  .mobile-bottom-nav-item {
    color: #8A93A3;
  }

  .mobile-bottom-nav-item.is-active,
  .mobile-bottom-nav-item:hover,
  .mobile-bottom-nav-item:focus-visible {
    color: #7FD8CB;
  }

  .mobile-bottom-nav-item--accent {
    color: #17A398;
  }

  .mobile-sheet-backdrop {
    background: rgba(6, 10, 16, 0.6);
  }

  .mobile-sheet {
    background: #151C27;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  }

  .mobile-sheet-handle {
    background: #2A3341;
  }

  .mobile-sheet-head h2 {
    color: #fff;
  }

  .mobile-sheet-close {
    background: #232C3A;
    color: #B7BFCC;
  }

  .mobile-sheet-user {
    color: #8A93A3;
  }

  .mobile-sheet-action {
    background: #1B2330;
    border-color: #2A3341;
    color: #E7EAEF;
  }

  .mobile-sheet-action:hover,
  .mobile-sheet-action:focus-visible {
    background: #232C3A;
    border-color: #3A4557;
  }

  .mobile-sheet-action > i:first-child {
    color: #17A398;
  }

  .mobile-sheet-action-chevron {
    color: #5B6472;
  }

  .mobile-sheet-action--admin {
    border-color: rgba(245, 165, 36, 0.4);
    background: rgba(245, 165, 36, 0.08);
  }

  .mobile-sheet-action--admin > i:first-child {
    color: #F5A524;
  }

  .mobile-sheet-action--logout {
    border-color: rgba(239, 68, 68, 0.35);
    color: #FCA5A5;
  }

  .mobile-sheet-action--logout > i:first-child {
    color: #FCA5A5;
  }

  .mobile-sheet-legal {
    border-top-color: #2A3341;
  }

  .mobile-sheet-legal a {
    color: #8A93A3;
  }

  .mobile-sheet-legal a:hover,
  .mobile-sheet-legal a:focus-visible {
    color: #7FD8CB;
  }
}