/* ==========================================================================
   Post-join onboarding app (/thanks-for-joining/)

   The markup is a React app (repo: post-join-onboard), built with
   `npm run build:theme` and committed here as scripts/apps/ccl-post-join/,
   and embedded by the acf/ccl-post-join-app block. The bundle injects only
   Font Awesome's CSS, so everything else is styled here, on the theme's
   tokens (styles/tokens.css) and type scale (theme.json). Headings use their
   tag's own size, except the app-scoped step-down noted below.

   The old live site loads its OWN copy of the app and of this file (under
   /dist/ and /styles/), so edits here only reach this theme.
   ========================================================================== */

/* --- Frame ---------------------------------------------------------------- */

/* #root is a direct child of the constrained post content, which would cap
   it at the 780px content width; the two-column steps need the wide width.
   It also follows the app's data <script>, which earns it the layout's 24px
   block gap; the page's own top padding is enough. */
#root {
  max-width: var(--wp--style--global--wide-size);
  margin-top: 0;
}

/* Breadcrumb -> step dots: the template puts 56px here (<main>'s 24px block
   gap + the wrapper's 32px padding). Keep the padding and drop the gap, so the
   first step's buttons sit higher on laptop screens. */
main:has(> .wp-block-group > .wp-block-post-content > #root) {
  margin-block-start: 0;
}

.App {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
}

/* The app spaces its own pieces with gaps, so start every text element flat. */
.App :where(h1, h2, h3, p, ul, ol) {
  margin-block: 0;
}

/* --- Step dots ------------------------------------------------------------ */

.dot-clicker {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xs); /* 16px dots 24px apart: meets the 24px target-size spacing rule */
}

.dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.dot:hover {
  border-color: var(--ccl-blue);
}

.dot.active {
  background: var(--ccl-blue);
  border-color: var(--ccl-blue);
}

/* --- Step heading --------------------------------------------------------- */

.screen-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: var(--wp--style--global--content-size);
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

/* Step 1's handwritten kicker ("You're in!") sits on the title; the
   heading's gap spaces it, so drop the style's own bottom margin. One size
   up from the style's default: over a 56px h1, 24px handwriting looked
   like a footnote. */
.screen-heading > .is-style-handwritten {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1;
}

/* A deliberate exception to "the tag sets the size" (Alaina, 2026-10-09):
   inside the app, h2 and h3 each render one step down the scale. A step is
   one screen with a big h1, and at full size its subtitle and column
   headings crowded it. */
.App h2 {
  font-size: var(--fs-h3);
  line-height: calc(var(--lh-h3) / var(--fs-h3));
}

.App h3 {
  font-size: var(--fs-h4);
  line-height: calc(var(--lh-h4) / var(--fs-h4));
}

/* --- Two columns ---------------------------------------------------------- */

.two-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3xl);
  align-items: start;
}

@media (max-width: 899px) {
  .two-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xl);
  }

  /* "reverse" steps put their video above the copy on narrow screens. */
  .two-cols.reverse > :first-child {
    order: 2;
  }
}

.col-content,
.col-content > section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.col-content {
  gap: var(--spacing-lg);
}

/* Column headings take the "Regular weight" heading style (the tag's size
   at 400), like the step subtitle, so the step's h1 stays the one bold
   heading. Bold h3s under a regular h2 read heavier than their parent.
   Not the numbered item titles on step 4 (li h3), which stay bold. */
.col-content > :is(h2, h3),
.col-content > section > h3 {
  font-weight: var(--fw-weak);
}

/* --- Step 1: introduce yourself ------------------------------------------- */

.ccl p.chapter-name {
  font-weight: var(--fw-strong-body);
}

.textarea-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.textarea-container > textarea {
  width: 100%;
  /* Three lines: the starter message's length on desktop. Where the browser
     supports it, field-sizing lets the box grow to fit what's typed (and the
     longer wrap on narrow screens); elsewhere it scrolls, and the corner
     handle still resizes it. */
  min-height: calc(3 * 1.5em + 2 * var(--spacing-sm));
  field-sizing: content;
  padding: var(--spacing-sm);
  font: inherit;
  line-height: 1.5;
  color: var(--ccl-text);
  background: var(--grey-0);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-xs);
  resize: vertical;
}

.supplemental-help-text {
  font-size: var(--fs-small);
  line-height: calc(var(--lh-small) / var(--fs-small));
  font-style: italic;
  color: var(--ccl-text-help);
}

.screen .failure-text {
  display: none;
  font-style: normal;
}

.screen.loading-failed .failure-text {
  display: unset;
}

/* --- Buttons -------------------------------------------------------------- */

.ccl-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

/* The buttons themselves are the site's .btn + .btn-primary / .btn-tertiary
   (site.css). The external-link icon on "Write Congress!" needs a gap. */
.ccl-button-container .btn svg {
  margin-right: var(--spacing-xs);
}

/* --- Step 2: info session ------------------------------------------------- */

.ccl .session-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ccl .next-session {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  text-align: left;
  color: var(--ccl-text);
  background: var(--grey-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.ccl .next-session:hover {
  background: var(--ccl-blue-bg);
  border-color: var(--ccl-blue);
}

.ccl .next-session.selected-session {
  font-weight: var(--fw-strong-body);
  color: #fff;
  background: var(--ccl-blue);
  border-color: var(--ccl-blue);
}

/* "What you'll learn" panel */
.greenbox {
  padding: var(--spacing-xl);
  color: var(--ccl-text);
  background: var(--bg-success);
  border-radius: var(--radius-md);
}

.greenbox ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: 0;
  list-style: none;
}

.greenbox li strong {
  text-transform: uppercase;
}

.greenbox li .fa-circle-check {
  margin-right: var(--spacing-2xs);
  color: var(--ccl-green-dark);
}

.greenbox .rest-of-text {
  display: block;
}

.greenbox .rest-of-text::before {
  content: "...";
}

/* "and most importantly": a handwritten aside, in the face the site uses for
   kickers (.is-style-handwritten). */
.greenbox .introductory-text {
  display: block;
  font-family: var(--font-hand);
  font-size: var(--fs-h5);
  font-weight: 700;
  color: var(--grey-600);
}

/* --- Step 3: social ------------------------------------------------------- */

.follow-social h2 {
  font-weight: var(--fw-weak);
  text-align: center;
}

.ccl .social-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-2xl);
}

.ccl .ccl-social-button {
  display: block;
  padding: 6px;
  background: var(--ccl-blue);
  border-radius: 50%;
  transition: background-color .12s ease;
}

.ccl .ccl-social-button:hover {
  background: var(--ccl-blue-dark);
}

/* An inline SVG sits on the text baseline and leaves descender space under
   it, which stretched these circles into ovals. */
.ccl .ccl-social-button svg {
  display: block;
}

.ccl .follow-social iframe {
  margin-top: var(--spacing-md);
}

/* Keep Continue in reach below the tall social feed. */
.follow-social .ccl-button-container {
  position: sticky;
  bottom: 0;
  justify-content: center;
  padding: var(--spacing-md);
  background: var(--grey-0);
}

/* --- Step 4: what happens next -------------------------------------------- */

.the-real-fun ol {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: 0;
  list-style: none;
  counter-reset: next-step;
}

.the-real-fun li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--spacing-sm);
  row-gap: var(--spacing-xs);
  counter-increment: next-step;
}

.the-real-fun li::before {
  content: counter(next-step);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  border: 2px solid var(--ccl-green);
  border-radius: 50%;
}

.the-real-fun li > :not(h3) {
  grid-column: 2;
}

/* --- Video ---------------------------------------------------------------- */

/* The dark fill shows behind a preview that has no thumbnail (step 4's
   YouTube video), where the white play icon was otherwise invisible. */
.react-player-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ccl-navy);
  border-radius: var(--radius-md);
}

.react-player {
  width: 100%;
  height: 100%;
}

/* --- Loading spinner ------------------------------------------------------ */

.loading-spinner-message {
  font-size: var(--fs-h5);
  text-align: center;
}

@keyframes green_dash {
  from { stroke-dashoffset: -35.34; }
  to { stroke-dashoffset: -318.0834; }
}

@keyframes blue_dash {
  from { stroke-dashoffset: -23.562; }
  to { stroke-dashoffset: 164.934; }
}

#wait-spinner {
  width: 100%;
  fill: none;
  text-align: center;
}

#wait-spinner svg {
  max-width: 200px;
}

.green-circle {
  stroke: var(--ccl-green);
  stroke-width: 10;
  stroke-dashoffset: -35.34;
  animation: green_dash 4s linear infinite;
}

.blue-circle {
  stroke: var(--ccl-blue);
  stroke-width: 10;
  stroke-dashoffset: -23.562;
  animation: blue_dash 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .green-circle,
  .blue-circle {
    animation: none;
  }
}