/* Walkthrough scroll. Section-pin via sticky. */

.wt-toc {
  position: sticky;
  top: 56px;
  z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  height: 48px;
  display: none;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.wt-toc::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .site-header + .wt-toc { top: 64px; }
  .wt-toc { display: flex; }
}

.wt-toc__list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  font-size: var(--type-ui);
  white-space: nowrap;
  width: 100%;
}

.wt-toc__list a {
  color: var(--ink-muted);
  font-weight: 500;
  padding: var(--space-2) 0;
  transition: color var(--motion-fast) var(--easing);
}

.wt-toc__list a:hover {
  color: var(--ink);
}

.wt-toc__list a.is-active {
  color: var(--brand-red);
  border-bottom: 2px solid var(--brand-red);
}

.wt-toc__skip {
  margin-left: auto;
}

/* Mobile floating TOC */
.wt-toc-mobile {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 35;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--ink);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .wt-toc-mobile { display: none; }
}

/* Intro */

.wt-intro {
  padding-block: var(--space-8) var(--space-8);
}

@media (min-width: 768px) {
  .wt-intro { padding-block: var(--space-9); }
}

.wt-intro h1 {
  margin-bottom: var(--space-4);
  max-width: 18ch;
}

.wt-intro__lede {
  font-size: var(--type-lede);
  color: var(--ink-muted);
  line-height: 1.45;
  max-width: 52ch;
  margin-bottom: var(--space-4);
}

.wt-intro__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Chapter shell */

.wt-chapter {
  position: relative;
  min-height: 150vh;
}

@media (min-width: 768px) {
  .wt-chapter {
    min-height: 200vh;
  }
}

.wt-chapter[data-bg="surface"] { background: var(--surface); }
.wt-chapter[data-bg="surface-alt"] { background: var(--surface-alt); }
.wt-chapter[data-bg="brand-red-light"] { background: var(--brand-red-light); }

.wt-chapter__pin {
  position: sticky;
  top: 104px;
  height: calc(100vh - 104px);
  display: flex;
  align-items: center;
  padding-block: var(--space-6);
}

@media (max-width: 767px) {
  .wt-chapter__pin {
    top: 56px;
    height: calc(100vh - 56px);
  }
}

.wt-chapter__content {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-med) var(--easing),
    transform var(--motion-med) var(--easing);
}

.wt-chapter.is-pinned .wt-chapter__content {
  opacity: 1;
  transform: translateY(0);
}

.wt-chapter__eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.wt-chapter__eyebrow-row .eyebrow {
  margin-bottom: 0;
}

.wt-chapter__marker {
  height: 1px;
  background: var(--line-strong);
  width: 96px;
}

.wt-chapter__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .wt-chapter__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

.wt-chapter h2 {
  font-size: var(--type-h1);
  font-weight: 600;
  margin-bottom: var(--space-4);
  max-width: 18ch;
}

.wt-chapter__body {
  font-size: var(--type-lede);
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 44ch;
}

.wt-chapter__body p + p {
  margin-top: var(--space-3);
}

.wt-chapter__handoff {
  font-size: var(--type-small);
  color: var(--ink);
  font-style: italic;
  margin-top: var(--space-4);
}

.wt-lessons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.wt-lesson-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: box-shadow var(--motion-fast) var(--easing),
    border-color var(--motion-fast) var(--easing);
  color: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  transition-property: opacity, transform, box-shadow, border-color;
  transition-duration: var(--motion-med);
  transition-timing-function: var(--easing);
}

.wt-chapter.is-pinned .wt-lesson-card {
  opacity: 1;
  transform: translateY(0);
}

.wt-chapter.is-pinned .wt-lesson-card:nth-child(1) { transition-delay: 0.4s; }
.wt-chapter.is-pinned .wt-lesson-card:nth-child(2) { transition-delay: 0.48s; }
.wt-chapter.is-pinned .wt-lesson-card:nth-child(3) { transition-delay: 0.56s; }

.wt-lesson-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}

.wt-lesson-card__num {
  flex: none;
  font-family: "Fraunces", serif;
  font-weight: 500;
  color: var(--brand-red);
  font-size: var(--type-h3);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}

.wt-lesson-card__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: var(--type-h3);
  margin-bottom: var(--space-1);
}

.wt-lesson-card__line {
  font-size: var(--type-small);
  color: var(--ink-muted);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .wt-chapter {
    min-height: 0;
  }
  .wt-chapter__pin {
    position: static;
    height: auto;
    padding-block: var(--space-8);
  }
  .wt-chapter__content,
  .wt-lesson-card {
    opacity: 1;
    transform: none;
  }
  .wt-chapter.is-pinned .wt-lesson-card {
    transition-delay: 0s !important;
  }
}

/* Postcode lookup */

.postcode-lookup {
  padding-block: var(--space-9);
  background: var(--surface);
}

.postcode-lookup h2 {
  margin-bottom: var(--space-3);
  max-width: 20ch;
}

.postcode-lookup__lede {
  font-size: var(--type-lede);
  color: var(--ink-muted);
  margin-bottom: var(--space-6);
  max-width: 52ch;
}

.postcode-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 560px;
}

.postcode-form__label {
  font-size: var(--type-ui);
  font-weight: 500;
  color: var(--ink);
}

.postcode-form__input-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.postcode-form__input {
  flex: 1 1 200px;
  min-height: var(--input-height-lg);
  padding: 0 var(--space-4);
  font-family: "Inter", sans-serif;
  font-size: var(--type-body);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--motion-fast) var(--easing),
    box-shadow var(--motion-fast) var(--easing);
}

.postcode-form__input:focus {
  border-color: var(--line-strong);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.postcode-form__submit {
  min-height: var(--input-height-lg);
  padding: 0 var(--space-5);
}

.postcode-result {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  display: none;
  max-width: 720px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--motion-med) var(--easing),
    transform var(--motion-med) var(--easing);
}

.postcode-result[data-state] {
  display: block;
  opacity: 1;
  transform: none;
}

.postcode-result[data-state="match"] {
  background: var(--success-bg);
  border: 2px solid var(--success);
}

.postcode-result[data-state="nomatch"] {
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

.postcode-result[data-state="error"] {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
}

.postcode-result__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.postcode-result__icon {
  flex: none;
  width: 24px;
  height: 24px;
  display: none;
}

.postcode-result[data-state="match"] .postcode-result__icon--match { display: block; color: var(--success); }
.postcode-result[data-state="nomatch"] .postcode-result__icon--nomatch { display: block; color: var(--ink-muted); }
.postcode-result[data-state="error"] .postcode-result__icon--error { display: block; color: var(--warning); }

.postcode-result__headline {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: var(--type-h3);
  color: var(--ink);
  margin: 0;
}

.postcode-result__body {
  color: var(--ink-muted);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}

.postcode-result__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.postcode-error {
  color: var(--error);
  font-size: var(--type-small);
  margin-top: var(--space-2);
  display: none;
}

.postcode-error.is-visible {
  display: block;
}