/*
 * Combined grammar route composition.
 * Load after the ordered shared layers and the two temporary legacy route
 * stylesheets. Task 10.2 owns parity-proven migration of those legacy files.
 * This layer consumes shared tokens and limits itself to shell integration.
 */

:where(.grammar-page) {
  min-inline-size: 0;
  max-inline-size: 100%;
  color: var(--color-text-inverse);
  background-color: var(--color-brand-navy-950);
  overflow-x: visible;
}

/* The shared header remains one static landmark when controllers are absent. */
:where(.grammar-site-header) {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  display: block;
  min-inline-size: 0;
  color: var(--color-text-inverse);
  background-color: var(--color-surface-inverse);
  border-block-end: var(--border-width) solid var(--color-border-strong);
}

:where(.grammar-site-nav) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--control-min-block);
  padding-block: var(--space-2);
  padding-inline: var(--layout-gutter);
  border-block-end: var(--border-width) solid var(--color-brand-navy-700);
  color: var(--color-text-inverse);
  background-color: var(--color-brand-navy-900);
  font-family: var(--font-body);
  font-size: var(--text-step--1);
}

:where(.grammar-site-nav) > :where(a, span) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

:where(.grammar-site-nav) > a[href] {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-min-block);
}

:where(.grammar-site-nav__separator) {
  color: var(--color-border-strong);
}

:where(.grammar-site-nav__current) {
  color: var(--color-text-inverse);
}

/* Neutralize only legacy shell positioning; grammar screen rules stay intact. */
:where(.grammar-site-header) > :where(.grammar-app-header) {
  position: static;
  inset-block-start: auto;
  z-index: auto;
  inline-size: min(
    calc(100% - var(--layout-gutter) - var(--layout-gutter)),
    var(--content-max)
  );
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: var(--space-4);
  padding-inline: 0;
  border: 0;
  border-image: none;
  color: var(--color-text-inverse);
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:where(.grammar-app-header) :where(h1, p) {
  color: var(--color-text-inverse);
}

:where(.grammar-app-header) h1 {
  margin: 0;
  font-family: var(--font-editorial);
}

:where(.grammar-site-header) :where(a, button):focus-visible {
  outline-color: var(--color-focus-ring-inverse);
}

:where(.grammar-main) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.grammar-main) :where(h2, h3) {
  color: var(--color-text-inverse);
}

/* Keep a real contentinfo landmark without adding non-baseline route copy. */
:where(.grammar-site-footer) {
  min-inline-size: 0;
  min-block-size: var(--space-2);
  border-block-start: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text-inverse);
  background-color: var(--color-surface-inverse);
}

:where(.grammar-site-footer__inner) {
  min-block-size: var(--space-2);
  padding-block: var(--space-2);
}

@media (max-width: 48rem) {
  :where(.grammar-site-nav) {
    gap: var(--space-2) var(--space-3);
    padding-inline: var(--space-4);
  }

  :where(.grammar-site-header) > :where(.grammar-app-header) {
    inline-size: 100%;
    padding-inline: var(--space-4);
  }

  :where(.grammar-app-header) .header-right {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin-inline-start: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  :where(.grammar-app-header) .header-text {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  :where(.grammar-app-header) :where(.dash-nav-btn, .back-btn, .level-badge) {
    min-block-size: 44px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Desktop fit: compact header + wider content measure.
   The legacy `.header` rule (specificity 0,1,0) was overriding the
   shell's zero-specificity `:where()` padding, making the banner tall.
   These class-level rules (higher specificity) restore a compact
   header and let the trainer use more of a wide screen.
   ═══════════════════════════════════════════════════════════════ */
:where(.grammar-page) {
  --content-max: 84rem;
}

.grammar-site-header .grammar-app-header {
  padding-block: var(--space-2);
  padding-inline: 0;
}

.grammar-app-header .header-text h1 {
  font-size: 1.35rem;
  line-height: 1.1;
}

.grammar-app-header .header-text p {
  font-size: 0.72rem;
}

.grammar-app-header .flag {
  height: 34px;
}

/* Trim the sticky site nav a touch so the combined header is shorter. */
.grammar-site-header .grammar-site-nav {
  padding-block: var(--space-1);
}


/* Auto-hide sticky header: slides away on scroll-down, returns on scroll-up.
   Disabled under reduced-motion (header simply stays put). */
.grammar-site-header {
  transition: transform 0.28s var(--ease-standard, ease);
  will-change: transform;
}
.grammar-site-header.grammar-site-header--hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .grammar-site-header { transition: none; }
  .grammar-site-header.grammar-site-header--hidden { transform: none; }
}