/* 2026 header nav - Figma: RTE-TIA-2026-Update.
   Layout/structure/link text from node 451:7423, but that node's own
   For Teachers/Submit buttons are a plain black outline/solid pair —
   superseded by the button colors actually used on real page instances
   (e.g. node 469:17549's embedded nav): Light Blue outline pill / Navy
   Blue solid pill, confirmed via Figma design data, not guessed. */

.th-header-2026 {
  background-color: transparent;
  padding: var(--space-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
}

.th-header-2026-logo {
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.05);
}

.th-header-2026-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.th-header-2026-nav {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-32);
}

.th-header-2026-links {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}

.th-header-2026-links a {
  font-family: var(--font-body-regular);
  font-size: var(--text-20);
  line-height: 1.2;
  letter-spacing: -0.22px;
  color: var(--color-text);
  white-space: nowrap;
  text-decoration: none;
  padding: var(--space-10) 0;
}

.th-header-2026-links a:hover,
.th-header-2026-links a.current {
  text-decoration: underline;
}
.th-header-2026-links a:focus-visible {
  outline: 2px solid var(--color-navy-blue);
  outline-offset: 2px;
}

.th-header-2026-actions {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

/* These were a byte-for-byte duplicate of .th-block-pill-btn's base -
   same font, size, line-height, radius, padding, white-space,
   text-decoration and text-align - but with a different hover
   (opacity: .85 against the pill's colour swap). Two identical buttons
   with two different hovers, sitting next to each other in the header.

   Now the same geometry as the pill system in blocks.css, which is
   already 48px, so the header height is unchanged and --header-h stays
   at 105px. The names stay because the markup and the mobile sheet
   layout below both key off them; only the values are shared.

   -outline is a misnomer inherited from the Figma node name: it is a
   solid light-blue fill, i.e. the pill system's "secondary", not its
   tertiary. Left alone rather than renamed, since renaming means
   touching both header partials for no visual gain. */
.th-header-2026-btn {
  font-family: var(--font-heading-bold);
  font-size: var(--text-20);
  line-height: 1.2;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  padding: var(--space-10) var(--space-32);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.1s ease;
}

.th-header-2026-btn-outline {
  background-color: var(--color-light-blue);
  color: var(--color-navy-blue);
}

.th-header-2026-btn-solid {
  background-color: var(--color-navy-blue);
  color: var(--color-white);
}

/* The header sits on the page's own background rather than inside a
   .th-block, so it can't use the .th-block-text-light switch. Its nav
   bar is always white, which is a light ground - so it takes the light
   case, magenta. */
.th-header-2026-btn:hover {
  background-color: var(--color-magenta);
  color: var(--color-white);
  border-color: var(--color-magenta);
}
.th-header-2026-btn:active {
  transform: scale(0.97);
}
.th-header-2026-btn:focus-visible {
  outline: 2px solid var(--color-navy-blue);
  outline-offset: 2px;
}

.th-header-2026-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  width: 44px;
  height: 44px;
  padding: var(--space-8);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.th-header-2026-toggle:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.th-header-2026-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
}

@media only screen and (max-width: 1200px) {
  .th-header-2026-nav {
    gap: var(--space-24);
    padding-left: var(--space-24);
  }

  .th-header-2026-links {
    gap: var(--space-20);
  }

  .th-header-2026-links a {
    font-size: var(--text-18);
  }

  .th-header-2026-btn {
    padding: var(--space-10) var(--space-24);
    font-size: var(--text-18);
  }
}

@media only screen and (max-width: 1024px) {
  .th-header-2026-nav {
    gap: var(--space-16);
    padding-left: var(--space-20);
  }

  .th-header-2026-links {
    gap: var(--space-16);
  }

  .th-header-2026-links a {
    font-size: var(--text-16);
  }

  .th-header-2026-btn {
    padding: var(--space-8) var(--space-20);
    font-size: var(--text-16);
  }

  .th-header-2026-actions {
    gap: var(--space-8);
  }
}

/* mobile
   The panel is a near-full-screen sheet rather than a short dropdown:
   it runs from under the header down to 20px off the bottom of the
   viewport, matching its own 20px left/right inset. dvh, not vh, so it
   doesn't sit under mobile browser chrome; the vh line before it is the
   fallback for browsers without dvh.

   Type steps up from --text-16 (inherited from the 1024px breakpoint,
   which is sized for a cramped horizontal bar) to --text-32, which the
   scale resolves to 24px at phone widths. A sheet this size wants list
   type, not nav-bar type. */
@media only screen and (max-width: 991px) {
  .th-header-2026-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-md);
    padding: var(--space-32) var(--space-24);
    gap: var(--space-32);
    z-index: 20;
    height: calc(100vh - var(--header-h) - var(--space-20));
    height: calc(100dvh - var(--header-h) - var(--space-20));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .th-header-2026-nav.is-open {
    display: flex;
  }

  .th-header-2026-links {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
  }

  /* 44px is the floor, not the outcome: at --text-42 the type alone
     already clears it, but min-height guarantees the touch target even
     if the scale is retuned later or a label renders short. The 16px
     gap keeps adjacent targets from being mistaken for one another -
     WCAG 2.5.8 wants targets separated as well as sized. */
  .th-header-2026-links a {
    font-size: var(--text-42);
    font-family: var(--font-heading-bold);
    line-height: 1.2;
    padding: var(--space-8) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Pushed to the foot of the sheet - the links are the primary content
     and the two CTAs read as a footer rather than a sixth and seventh
     list item. */
  .th-header-2026-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: auto;
    gap: var(--space-12);
  }

  .th-header-2026-btn {
    width: 100%;
    font-size: var(--text-24);
    padding: var(--space-16) var(--space-24);
  }

  .th-header-2026-toggle {
    display: flex;
  }
}

.th-header-2026-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}