/* ==========================================================================
   Webinar landing — the page a doubting parent lands on

   Everything here is the site's own system; only the call to action and the
   three steps need shapes the main page does not have.
   ========================================================================== */

.webinar-header__link {
  font-size: var(--step-small);
  color: var(--fg-muted);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.125rem;
}

.webinar-hero .display {
  max-width: 18ch;
  margin-bottom: var(--space-3);
}

.webinar-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.webinar-cta__main {
  flex: 1 1 22rem;
}

.webinar-cta__note {
  max-width: 42ch;
  margin-top: var(--space-2);
  font-size: var(--step-small);
  color: var(--fg-muted);
}

/* The parent reads this on a laptop but has Telegram on the phone. */
.qr {
  display: none;
  margin: 0;
  text-align: center;
}

.qr img {
  border-radius: var(--radius-card);
  /* The code is generated black on white and has to stay that way to scan. */
  background: #fff;
  padding: var(--space-2);
}

.qr figcaption {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--fg-muted);
}

/* Links inherit the page colour, so without this the bot address would read as
   plain muted text and nobody would try clicking it. */
.qr__link {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  color: var(--fg-accent);
  border-bottom: 1px solid currentColor;
}

.qr__link:hover {
  color: var(--fg);
}

@media (min-width: 60rem) and (hover: hover) {
  .qr {
    display: block;
  }
}

.host {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-4);
}

.host > div {
  flex: 1 1 24rem;
}

.host .section__title {
  margin-bottom: var(--space-2);
}

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* A real sequence, so the numbers carry meaning rather than decorate. */
.steps__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.steps__item::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--fg-machine);
  padding-top: 0.35rem;
}

.webinar-link {
  color: var(--fg-accent);
  border-bottom: 1px solid currentColor;
}

/* --- Registration --------------------------------------------------------- */

.register {
  max-width: 34rem;
}

.times {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.times__legend {
  padding: 0;
  margin-bottom: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--step-small);
}

.times__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0.75rem var(--space-3);
  margin-bottom: var(--space-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  cursor: pointer;
}

.times__option:has(input:checked) {
  border-color: var(--fg-machine);
  background: color-mix(in srgb, var(--gen) 12%, transparent);
}

.times__option:has(input:focus-visible) {
  outline: var(--focus-ring) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}

.times__loading {
  color: var(--fg-muted);
  font-size: var(--step-small);
}

.register__done {
  max-width: 34rem;
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--bg-raised);
}

.register__done p {
  margin-top: var(--space-1);
}

.register__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.register__hint {
  margin-top: var(--space-3);
  max-width: 46ch;
  font-size: var(--step-small);
  color: var(--fg-muted);
}