/* WWSU Become Member
 * Reuses the site's real section/card/eyebrow/title components (.wwsu-section,
 * .wwsu-container, .wwsu-section__head/__eyebrow/__title, .wwsu-info-card) instead of a
 * parallel set of page-only classes - this file only styles what's genuinely unique to this
 * page: the hero title, the interest explorer/chips, the training steps, the employer strip
 * and the native form controls. `.wwsu-bg/--fg/--rule` etc. already flip correctly under
 * [data-surface="dark"] (see the training band below), same section-flip contract every
 * other page uses.
 */

.wwsu-join { font-family: var(--font-display); line-height: var(--leading-normal); }
.wwsu-join *, .wwsu-join *::before, .wwsu-join *::after { box-sizing: border-box; }

/* .btn-wwsu--primary's sitewide hover (fill -> cream, components.css) assumes the button
   sits on a dark surface, where cream reads as a clear highlight. Every primary button on
   this page sits on the light/cream surface instead, where that hover becomes the same
   color as the page behind it. Deepen toward --accent on hover here instead; this file
   loads after site.css/components.css (see the <link> order in layout.ejs) so this wins on
   source order without needing extra selector specificity. */
.wwsu-join .btn-wwsu--primary:hover,
.wwsu-join a.btn-wwsu--primary:hover {
  background: var(--accent);
  color: var(--wwsu-white);
}

.wwsu-join__section-intro { max-width: 62ch; margin: var(--space-4) 0 0; color: var(--fg-muted); font-size: var(--fs-18); line-height: var(--leading-snug); }

/* Hero: the one heading on this page that isn't .wwsu-section__title (a subpage intro
   band, not a content section) - still Futura caps, with the payoff word in green caps. */
.wwsu-join__page-header {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: var(--rule-w-1) solid var(--rule-soft);
  background: var(--bg);
}
.wwsu-join__header-title {
  max-width: 24ch;
  margin: 0 0 var(--space-5);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(var(--fs-36), 6vw, var(--fs-64));
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
}
.wwsu-join__header-title em {
  font-style: normal;
  color: var(--accent);
}
.wwsu-join__header-lede {
  max-width: 72ch;
  margin: 0;
  color: var(--fg);
  font-size: clamp(var(--fs-18), 2vw, var(--fs-21));
  line-height: var(--leading-snug);
}
.wwsu-join__header-context {
  max-width: 68ch;
  margin: var(--space-3) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-15);
}
.wwsu-join__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* Interest explorer */
.wwsu-join__interest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.wwsu-join__interest-card {
  min-height: 178px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  border: var(--rule-w-2) solid var(--fg);
  border-radius: var(--radius-2);
  background: var(--bg-elevated);
  color: var(--fg);
  padding: var(--space-5);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-broadcast);
}
/* Selection reads through border-color + the state icon alone - not a border-width/padding
   change, which used to reflow every card in the row on every click. */
.wwsu-join__interest-card[aria-pressed="true"] { border-color: var(--accent-press); }
.wwsu-join__interest-icon { width: 36px; height: 36px; color: var(--accent); display: block; }
.wwsu-join__interest-state { position: absolute; top: var(--space-4); right: var(--space-4); width: 16px; height: 16px; color: var(--fg-muted); }
.wwsu-join__interest-card[aria-pressed="true"] .wwsu-join__interest-icon,
.wwsu-join__interest-card[aria-pressed="true"] .wwsu-join__interest-state { color: var(--accent-press); }
.wwsu-join__interest-card strong { max-width: 16ch; font-size: var(--fs-16); font-weight: 900; letter-spacing: var(--track-loose); line-height: var(--leading-tight); text-transform: uppercase; }
.wwsu-join__interest-card span { color: var(--fg-muted); font-size: var(--fs-14); }
.wwsu-join__interest-card:focus-visible {
  outline: var(--rule-w-2) solid var(--accent);
  outline-offset: 3px;
}

/* Skills */
.wwsu-join__split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-16); align-items: start; }
.wwsu-join__skill-list { border-top: var(--rule-w-2) solid var(--fg); }
.wwsu-join__skill-list > div { display: grid; grid-template-columns: minmax(190px, .8fr) 1.2fr; gap: var(--space-6); padding: var(--space-5) 0; border-bottom: var(--rule-w-1) solid var(--rule-soft); }
.wwsu-join__skill-list strong { font-size: var(--fs-15); font-weight: 900; text-transform: uppercase; }
.wwsu-join__skill-list span { color: var(--fg-muted); font-size: var(--fs-15); }

/* Employer proof */
.wwsu-join__employer-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule-w-2) solid var(--fg); border-left: var(--rule-w-1) solid var(--rule-soft); }
.wwsu-join__employer-logo { display: flex; min-height: 112px; align-items: center; justify-content: center; border-right: var(--rule-w-1) solid var(--rule-soft); border-bottom: var(--rule-w-1) solid var(--rule-soft); background: var(--wwsu-white); padding: var(--space-6) var(--space-8); }
/* --img-edge keeps a light logo from bleeding into the white plate it sits on. */
.wwsu-join__employer-logo img { display: block; width: auto; max-width: min(190px, 88%); max-height: 58px; object-fit: contain; outline: var(--rule-w-1) solid var(--img-edge); outline-offset: 0; }
/* ESPN WING and WYSO render visually smaller than the others at the same max-height. */
.wwsu-join__employer-logo--wide img { max-width: min(250px, 94%); max-height: 94px; }

/* Training band - .wwsu-section--dark + data-surface="dark" together (see layout.ejs) so
   both the real .wwsu-section__eyebrow/__title dark-mode colors AND the ambient
   --bg/--fg/--rule custom-property flip apply. Only step-list/callout specifics live here. */
.wwsu-join__steps { list-style: none; margin: var(--space-8) 0 0; padding: 0; border-top: var(--rule-w-2) solid var(--rule); }
.wwsu-join__steps li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6) 0; border-bottom: var(--rule-w-1) solid var(--rule); }
.wwsu-join__step-no { color: var(--accent-hover); font-family: var(--font-mono); font-size: var(--fs-13); }
.wwsu-join__steps strong { font-size: var(--fs-18); font-weight: 900; letter-spacing: var(--track-loose); text-transform: uppercase; }
.wwsu-join__steps p { max-width: 70ch; margin: var(--space-2) 0 0; color: var(--fg-muted); }
.wwsu-join__after-training { margin-top: var(--space-6); border-left: var(--rule-w-4) solid var(--accent); padding: 2px 0 2px var(--space-4); }
.wwsu-join__after-training strong { color: var(--fg); font-size: var(--fs-14); font-weight: 900; letter-spacing: var(--track-loose); text-transform: uppercase; }
.wwsu-join__after-training p { max-width: 70ch; margin: var(--space-2) 0 0; color: var(--fg-muted); }
.wwsu-join__academic-credit { margin-top: var(--space-8); border: var(--rule-w-1) solid var(--rule); border-top: var(--rule-w-3) solid var(--accent); border-radius: var(--radius-2); background: var(--bg-elevated); padding: var(--space-6); }
.wwsu-join__academic-credit h3 { margin: var(--space-1) 0 var(--space-2); color: var(--fg); font-size: clamp(var(--fs-24), 3vw, var(--fs-30)); font-weight: 900; text-transform: uppercase; }
.wwsu-join__academic-credit p:last-child { max-width: 68ch; margin: 0; color: var(--fg-muted); }
.wwsu-join__commitment { margin-top: var(--space-12); border: var(--rule-w-2) solid var(--rule); border-top-color: var(--accent); border-radius: var(--radius-2); background: var(--bg-elevated); padding: var(--space-6); }
.wwsu-join__commitment-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-8); }
.wwsu-join__commitment-grid p { margin: 0; padding: var(--space-5) 0; color: var(--fg-muted); border-top: var(--rule-w-1) solid var(--rule); }
.wwsu-join__commitment-grid strong { color: var(--fg); }

/* Form - the card itself is .wwsu-info-card.wwsu-info-card--primary (real component,
   see layout.ejs); only the two-column layout and the interest chips are page-specific. */
.wwsu-join__form-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: var(--space-14); align-items: start; }
.wwsu-join__form-intro { position: sticky; top: var(--space-24); }
.wwsu-join__form-intro > p:not(.wwsu-section__eyebrow) { max-width: 48ch; color: var(--fg-muted); }
.wwsu-join__form-section + .wwsu-join__form-section { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--rule-w-1) solid var(--rule-soft); }
.wwsu-join__form-section h3 { margin: 0 0 var(--space-5); font-size: var(--fs-18); font-weight: 900; text-transform: uppercase; }
.wwsu-join__field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.wwsu-join__field-help { margin: calc(var(--space-2) * -1) 0 var(--space-4); color: var(--fg-muted); font-size: var(--fs-13); }
.wwsu-join__form-interests { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wwsu-join__interest-chip {
  min-height: 44px;
  border: var(--rule-w-1) solid var(--rule);
  border-radius: var(--radius-1);
  background: transparent;
  color: var(--fg);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: var(--track-loose);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-broadcast), color var(--dur-2) var(--ease-broadcast), border-color var(--dur-2) var(--ease-broadcast);
}
.wwsu-join__interest-chip[aria-pressed="true"] { border-color: var(--accent-press); background: var(--accent); color: var(--wwsu-white); }
/* Press-scale, matching .btn-wwsu:active and the guide cards. */
.wwsu-join__interest-chip:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .wwsu-join__interest-chip:active { transform: none; }
}
.wwsu-join__interest-chip:focus-visible { outline: var(--rule-w-2) solid var(--accent); outline-offset: 2px; }
.wwsu-join__selected-summary { margin-top: var(--space-6); border-top: var(--rule-w-2) solid var(--fg); padding-top: var(--space-3); }
.wwsu-join__selected-summary strong { display: block; margin-bottom: var(--space-1); font-size: var(--fs-11); letter-spacing: var(--track-loose); text-transform: uppercase; }
.wwsu-join__selected-summary span { color: var(--fg-muted); }
.wwsu-join__submit-row { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-8); }
.wwsu-join__success { padding-block: var(--space-3); }
.wwsu-join__success h3 { margin: 0; font-size: var(--fs-30); font-weight: 900; text-transform: uppercase; }
.wwsu-join__success > p:not(.wwsu-section__eyebrow) { color: var(--fg-muted); }

/* Native form controls (this app has no <wwsu-form>/<wwsu-field> web component on the
   public website - that pair only exists inside the member portal). */
.wwsu-join .wwsu-field { display: block; margin-bottom: var(--space-4); }
.wwsu-join .wwsu-field__label { display: block; margin-bottom: var(--space-1); color: var(--fg); font-size: var(--fs-12); font-weight: 800; letter-spacing: var(--track-loose); }
.wwsu-join .wwsu-field input:not([type="checkbox"]):not([type="radio"]),
.wwsu-join .wwsu-field select,
.wwsu-join .wwsu-field textarea {
  width: 100%;
  min-height: 44px;
  border: var(--rule-w-2) solid var(--rule);
  /* Concentric radius: these sit inside .wwsu-info-card--primary (--radius-2),
     so the inner corner steps down one notch. Matches .ds-input. */
  border-radius: var(--radius-1);
  background: var(--wwsu-white);
  color: var(--fg);
  padding: var(--space-3) var(--space-3);
  font: inherit;
}
.wwsu-join .wwsu-field textarea { min-height: 110px; resize: vertical; }
.wwsu-join .wwsu-field input:focus,
.wwsu-join .wwsu-field select:focus,
.wwsu-join .wwsu-field textarea:focus { outline: var(--rule-w-2) solid var(--accent); outline-offset: 2px; }
.wwsu-join .wwsu-field__help { display: block; margin-top: var(--space-1); color: var(--fg-muted); font-size: var(--fs-12); }
.wwsu-join__form-card [role="alert"]:not(:empty) { margin: 0 0 var(--space-4); border-left: var(--rule-w-4) solid var(--danger); padding: var(--space-3) var(--space-3); background: var(--wwsu-white); color: var(--fg); }

@media (max-width: 980px) {
  .wwsu-join__split, .wwsu-join__form-layout { grid-template-columns: 1fr; }
  .wwsu-join__interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwsu-join__form-intro { position: static; }
}

@media (max-width: 640px) {
  .wwsu-join__page-header { padding: var(--space-10) 0 var(--space-6); }
  .wwsu-join__interest-grid, .wwsu-join__employer-strip, .wwsu-join__commitment-grid, .wwsu-join__field-row { grid-template-columns: 1fr; }
  .wwsu-join__interest-card { min-height: 0; }
  .wwsu-join__skill-list > div { grid-template-columns: 1fr; gap: var(--space-2); }
  .wwsu-join__steps li { grid-template-columns: 52px 1fr; gap: var(--space-4); }
  .wwsu-join__submit-row { align-items: stretch; flex-direction: column; }
  .wwsu-join__submit-row .btn-wwsu { width: 100%; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .wwsu-join__interest-card, .wwsu-join__interest-chip { transition: none; }
}