/* ============================================================
   ARGO AeroLab — Layout
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.prose { max-width: var(--max-prose); }

/* ---- Site header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 15, 20, 0.85);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.brand__logo {
  display: block;
  width: auto;
  height: 42px;
  max-width: 190px;
  object-fit: contain;
  flex: 0 1 auto;
}
@media (max-width: 480px) {
  .brand__logo { height: 34px; max-width: 150px; }
}

.main-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}
.main-nav a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard);
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--text-primary); }
.main-nav a[aria-current="page"] { border-color: var(--accent-emerald); }

.nav-toggle {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

/* Keep the desktop override after the base .nav-toggle display declaration. */
@media (min-width: 760px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
}

.mobile-nav {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { display: flex; flex-direction: column; padding: var(--space-3) var(--space-5) var(--space-5); gap: var(--space-1); }
.mobile-nav a {
  display: block;
  padding: var(--space-3) var(--space-2);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.mobile-nav a[aria-current="page"] { color: var(--accent-emerald); }

@media (min-width: 760px) { .mobile-nav { display: none !important; } }

/* ---- Search ---- */
.search-box {
  position: relative;
}
.search-box input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-7);
  color: var(--text-primary);
  width: 100%;
  max-width: 220px;
}
.search-box input:focus { border-color: var(--accent-blue); }
.search-box svg {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.search-results {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(340px, 90vw);
  background: var(--bg-elevated-hi);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 200;
}
.search-results[hidden] { display: none; }
/* Below ~420px the 340px panel, right-aligned to the narrow search box, would run off the left
   edge of the screen. Anchor it to the screen gutters instead, at the same height as on desktop
   (just under the 51px-tall search input). */
@media (max-width: 419px) {
  .search-results {
    position: fixed;
    top: calc(51px + var(--space-2));
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
  }
}
.search-results ul { padding: var(--space-2); }
.search-results li a {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}
.search-results li a:hover,
.search-results li a:focus-visible { background: var(--bg-elevated); }
.search-results__type {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-emerald);
  margin-bottom: 2px;
}
.search-results__empty { padding: var(--space-4); color: var(--text-tertiary); font-size: 0.9rem; }

/* ---- Sections / grids ---- */
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-7) 0;
  margin-top: var(--space-9);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--text-tertiary);
  font-size: 0.85rem;
}
@media (min-width: 640px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---- Roadmap layout ---- */
.roadmap-category {
  margin-bottom: var(--space-8);
}
.roadmap-category__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.roadmap-category__label {
  /* Overrides the shared h1-h4 block-level margin (base.css) so promoting
     this from a <span> to a semantic <h2> — for screen-reader navigation
     between roadmap sections — causes no visual change: it still sits
     inline in the flex header next to the lesson count. */
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--accent-emerald);
  font-weight: 600;
}
.roadmap-category__count {
  color: var(--text-tertiary);
  font-size: 0.85rem;
}
.roadmap-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}