/* Classivo Coding — Page layout: header, sidebar, footer, containers */

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.brand:hover {
  text-decoration: none;
}

.brand__logo-img {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-base) var(--ease);
}

/* The logo artwork is dark navy on a transparent background, so it needs
   a light backdrop to stay legible once the page itself goes dark. */
:root[data-theme="dark"] .brand__logo-img {
  background: #fff;
  padding: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .brand__logo-img {
    background: #fff;
    padding: 3px;
  }
}

.brand__wordmark {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.brand__wordmark-accent {
  font-weight: 600;
  color: var(--brand);
  margin-inline-start: 0.3em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
}

.main-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.main-nav__links a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
}

.main-nav__links a:hover {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
  text-decoration: none;
}

.main-nav__links a.is-active {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* ---------- Nav dropdowns (Basics / Languages / Advanced) ----------
   Native <details>/<summary> — click/tap to open, works identically (and
   accessibly) on desktop and mobile with zero extra JS. */

.main-nav__dropdown { position: relative; }

.main-nav__dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.main-nav__dropdown summary::-webkit-details-marker { display: none; }
.main-nav__dropdown summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-block-start: -3px;
  opacity: 0.6;
  transition: transform var(--duration-fast, 0.15s) var(--ease, ease);
}
.main-nav__dropdown details[open] > summary::after { transform: rotate(225deg); margin-block-start: 3px; }
.main-nav__dropdown summary:hover,
.main-nav__dropdown summary.is-active {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}
.main-nav__dropdown summary.is-active { background: var(--brand-soft); color: var(--brand-strong); }

.main-nav__dropdown-menu {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
}

@media (min-width: 901px) {
  .main-nav__dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    min-width: 180px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 40;
  }
  .main-nav__dropdown-menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); white-space: nowrap; }
  .main-nav__dropdown-menu a:hover { background: var(--bg-surface-alt); text-decoration: none; }
  .main-nav__dropdown-menu a.is-active { background: var(--brand-soft); color: var(--brand-strong); }
}

@media (max-width: 900px) {
  .main-nav__dropdown-menu { padding-inline-start: var(--space-5); }
}

/* ---------- Courses mega-menu ----------
   One "Courses" dropdown replaces what used to be three separate top-level
   dropdowns (Basics / Languages / Advanced). Each course is a compact
   icon+label card laid out in a wrapping grid per group — inspired by
   card-style mega menus (e.g. craftwork.design) that pair a small icon
   with each item instead of a long bare-text link list. Grouping items
   into a grid keeps the panel from growing tall as more courses are
   added — a group of 7 wraps into ~3 rows of 3 instead of 7 stacked rows. */

.main-nav__mega {
  list-style: none;
  margin: 0;
  padding: var(--space-3);
}

.main-nav__mega-heading {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--space-1) var(--space-2);
  margin-block-end: var(--space-1);
}

.main-nav__mega-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-sm);
}
/* Admin-only preview cards stay hidden until shell.js confirms the role. */
.main-nav__mega-card[hidden],
.main-nav__mega-group[hidden] { display: none; }

.main-nav__mega-card-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--brand);
}

.main-nav__mega-card:hover { background: var(--bg-surface-alt); text-decoration: none; color: var(--text-primary); }
.main-nav__mega-card.is-active { background: var(--brand-soft); color: var(--brand-strong); }
.main-nav__mega-card.is-active .main-nav__mega-card-icon { color: var(--brand-strong); }

@media (min-width: 901px) {
  .main-nav__mega {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    width: min(620px, 90vw);
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    z-index: 40;
  }
  .main-nav__mega-group + .main-nav__mega-group {
    border-block-start: 1px solid var(--border-subtle);
    padding-block-start: var(--space-2);
  }
  .main-nav__mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }
  .main-nav__mega-card { padding: var(--space-2) var(--space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 900px) {
  .main-nav__mega {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-inline-start: var(--space-5);
  }
  .main-nav__mega-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .main-nav__mega-card { padding: var(--space-1) 0; }
  .main-nav__mega-card-icon svg { width: 16px; height: 16px; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* ---------- Account menu (avatar + dropdown) ---------- */
.auth-menu { position: relative; }
.auth-menu summary { list-style: none; cursor: pointer; }
.auth-menu summary::-webkit-details-marker { display: none; }

.auth-menu__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: var(--text-sm);
  font-weight: 700;
}
.auth-menu[open] .auth-menu__avatar { outline: 2px solid var(--brand-300); outline-offset: 2px; }

.auth-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 190px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  z-index: 40;
  display: flex;
  flex-direction: column;
}

.auth-menu__name {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.auth-menu__panel a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.auth-menu__panel a:hover { background: var(--bg-surface-alt); text-decoration: none; }

.auth-menu__divider { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-2) 0; }

.nav-toggle {
  display: none;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

@media (max-width: 900px) {
  .main-nav__links {
    display: none;
    position: absolute;
    top: var(--header-height);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-3);
    box-shadow: var(--shadow-md);
  }
  .main-nav__links.is-open { display: flex; }
  .nav-toggle { display: inline-flex; }
}

/* Below ~480px the brand wordmark, search icon, and the three header-action
   buttons don't all fit at full size — shrink the brand and tighten the
   gaps/padding rather than letting the wordmark visually overlap its
   neighbors. */
@media (max-width: 480px) {
  .site-header__inner { gap: var(--space-3); padding-inline: var(--space-4); }
  .brand { gap: var(--space-2); min-width: 0; }
  .brand__logo-img { height: 28px; }
  .brand__wordmark { font-size: var(--text-base); }
  .header-actions { gap: 0; }
}

/* On the narrowest phones the wordmark doesn't fit next to the header
   buttons (it slid under the search button, and "Log in" wrapped onto two
   lines). Show the logo mark alone there; the link keeps its name through
   aria-label, and the wordmark stays available to screen readers. */
@media (max-width: 440px) {
  .site-header .brand__wordmark {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .header-actions .btn { white-space: nowrap; }
}

/* ---------- App shell (sidebar + content) ---------- */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  align-items: start;
  max-width: 1400px;
  margin-inline: auto;
}

.course-sidebar {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  border-inline-end: 1px solid var(--border-subtle);
}

.course-sidebar__group {
  margin-bottom: var(--space-5);
}

.course-sidebar__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);                /* module titles ("Module 12 — …") stand out from the lesson links */
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.course-sidebar__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.course-sidebar__links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.course-sidebar__links a:hover {
  background: var(--bg-surface-alt);
  color: var(--text-primary);
  text-decoration: none;
}

.course-sidebar__links a.is-active {
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 700;
}

.course-sidebar__links a.is-done::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-success);
  margin-inline-start: auto;
  flex-shrink: 0;
}

.content-area {
  min-width: 0;
  padding: var(--space-7) var(--space-8) var(--space-10);
}

@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .course-sidebar {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 90;
    background: var(--bg-surface);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease);
    width: 82vw;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
  }
  .course-sidebar.is-open { transform: translateX(0); }
  /* RTL anchors the drawer to the right edge, so it must slide out to the
     right — translateX(-100%) left ~70px of it covering the content. */
  [dir="rtl"] .course-sidebar { transform: translateX(100%); }
  [dir="rtl"] .course-sidebar.is-open { transform: translateX(0); }
  .content-area { padding: var(--space-5) var(--space-4) var(--space-9); }
}

/* ---------- Footer ----------
   Mirrors the header mega-menu's grouping (same `NAV_GROUPS` data) instead
   of the old single flat row of all course links + site links with no
   headings — that stopped being legible once the course count grew past
   what fit on one wrapped line. */

.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-8) 0;
  margin-top: var(--space-9);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--space-7);
  align-items: start;
}

.site-footer__brand p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-5);
}

.site-footer__col-heading {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-block-end: var(--space-2);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__col a {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.site-footer__col a:hover {
  color: var(--text-primary);
  text-decoration: none;
}

@media (max-width: 800px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- Utility layout ---------- */

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }