/* StudyPass — Shell
   Header, primary nav, language + theme toggles, footer, admin/app frame.
   Shared by the main site, the student area and the admin dashboard.
*/

/* ==============================================================
   HEADER
   ============================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--bg-canvas);
  border-bottom: var(--border-hair) solid var(--edge-hair);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--nav-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  color: var(--fg-strong);
}
.brand:hover { text-decoration: none; }
.brand__logo { height: 22px; width: auto; }
.brand__mark { height: 28px; width: 28px; }

/* Primary nav — desktop */
.site-nav { display: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-nav__list > li + li { margin-top: 0; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--nav-height);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  border-bottom: var(--border-medium) solid transparent;
  transition: color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
}
.site-nav__link:hover { color: var(--fg-strong); text-decoration: none; }
.site-nav__link[aria-current='page'] {
  color: var(--fg-strong);
  font-weight: var(--weight-semibold);
  border-bottom-color: var(--edge-brand);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.site-header__actions .btn--primary,
.site-header__actions .btn--secondary { display: none; }

/* Icon-ish square toggles: language, theme */
.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-sm);
  min-width: var(--control-sm);
  padding-inline: var(--space-3);
  border: var(--border-hair) solid var(--edge-hair);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  background: transparent;
  transition: border-color var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default);
}
.toggle:hover { border-color: var(--edge-strong); color: var(--fg-strong); }
.toggle[aria-pressed='true'] { color: var(--fg-strong); border-color: var(--edge-strong); }

/* Language switch — two flush halves, current one filled */
.lang {
  display: inline-flex;
  border: var(--border-hair) solid var(--edge-hair);
  height: var(--control-sm);
}
.lang__btn {
  padding-inline: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
  transition: background-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.lang__btn:hover { color: var(--fg-strong); }
.lang__btn[aria-pressed='true'] {
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
}

/* Mobile menu button */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-md);
  height: var(--control-md);
  border: var(--border-hair) solid var(--edge-hair);
  color: var(--fg-strong);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-default),
              opacity var(--duration-fast) var(--ease-default);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.site-drawer {
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  z-index: var(--z-overlay);
  background: var(--bg-canvas);
  border-top: var(--border-hair) solid var(--edge-hair);
  padding: var(--space-6) var(--gutter) var(--space-8);
  overflow-y: auto;
  display: none;
}
.site-drawer.is-open { display: block; }
.site-drawer__list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.site-drawer__list > li + li { margin-top: 0; }
.site-drawer__link {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: var(--border-hair) solid var(--edge-hair);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--fg-strong);
}
.site-drawer__link:hover { text-decoration: none; color: var(--fg-brand); }
body.is-locked { overflow: hidden; }

@media (min-width: 1000px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .site-drawer { display: none !important; }
  .site-header__actions .btn--primary,
  .site-header__actions .btn--secondary { display: inline-flex; }
}

/* ==============================================================
   FOOTER
   ============================================================== */
.site-footer {
  margin-top: auto;
  background: var(--bg-inverse);
  color: var(--fg-on-dark-muted);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--fg-on-dark-muted); }
.site-footer a:hover { color: var(--fg-on-dark); }

.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-7);
}
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); }
}
.site-footer__title {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-on-dark);
  margin-bottom: var(--space-4);
}
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list > li + li { margin-top: var(--space-3); }
.site-footer__logo { height: 20px; width: auto; opacity: 0.9; margin-bottom: var(--space-4); }

.site-footer__legal {
  border-top: var(--border-hair) solid var(--edge-inverse);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
}
/* The IELTS non-affiliation line. Required on every page. */
.disclaimer {
  max-width: 62ch;
  color: var(--fg-on-dark-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-heading);
}

/* ==============================================================
   PAGE FRAME
   ============================================================== */
.page { display: flex; flex-direction: column; min-height: 100svh; }
.page__main { flex: 1 0 auto; }

/* Page heading block, used by the student area and admin */
.page-head {
  padding-block: var(--space-7);
  border-bottom: var(--border-hair) solid var(--edge-hair);
}
.page-head__row {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: flex-end; justify-content: space-between;
}

/* ==============================================================
   APP / ADMIN FRAME — sidebar + content
   ============================================================== */
.frame { display: block; }
.frame__sidebar {
  display: none;
  border-right: var(--border-hair) solid var(--edge-hair);
  padding: var(--space-6) var(--space-5);
}
.frame__content { padding: var(--space-6) var(--gutter) var(--space-9); min-width: 0; }

@media (min-width: 1000px) {
  .frame {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    align-items: start;
  }
  .frame__sidebar {
    display: block;
    position: sticky;
    top: var(--nav-height);
    height: calc(100svh - var(--nav-height));
    overflow-y: auto;
  }
}

.side-nav { list-style: none; padding: 0; margin: 0; }
.side-nav > li + li { margin-top: 0; }
.side-nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-left: var(--border-medium) solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-muted);
  transition: color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
}
.side-nav__link:hover { color: var(--fg-strong); text-decoration: none; }
.side-nav__link[aria-current='page'] {
  color: var(--fg-strong);
  font-weight: var(--weight-semibold);
  border-left-color: var(--edge-brand);
  background: var(--bg-subtle);
}
.side-nav__group {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: var(--space-5) var(--space-4) var(--space-2);
}

/* ==============================================================
   VERY NARROW PHONES (≤ 420px)
   The header runs out of room around 380px: brand + language +
   theme + menu is about 390px of fixed-width content. Tighten the
   gaps and the wordmark rather than dropping a control.
   ============================================================== */
@media (max-width: 420px) {
  .site-header__inner { gap: var(--space-3); }
  .site-header__actions { gap: var(--space-2); }
  .brand { gap: var(--space-2); }
  .brand__logo { height: 18px; }
  .brand__mark { height: 24px; width: 24px; }
}