/* =============================================================================
   JOIN SAFI LANDING PAGE (template-join-safi.php)
   ============================================================================= */

/* --- Hero --- */
/* Unlike other pages, this template keeps the hero container in normal flow
   (not nested in the absolute background layer), so the section grows with
   its content instead of clipping. The container's fixed 70vh is dropped;
   the hero keeps a 60vh presence on large screens via its own min-height. */
.template-join-safi .hero {
  min-height: 60vh;
  height: auto;
}

.template-join-safi .hero .container {
  height: auto;
  min-height: 0;
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}

.hero__background--join {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e293b 100%);
}

.template-join-safi .hero__title,
.template-join-safi .hero__subtitle {
  color: #ffffff;
}

.template-join-safi .hero__subtitle {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

.join-hero__eyebrow {
  color: var(--color-accent-light);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-md);
}

.join-hero__actions {
  margin-top: var(--spacing-xl);
}

.join-hero__note {
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: #cbd5e1;
}

.join-hero__note a {
  color: #ffffff;
  text-decoration: underline;
}

/* --- How it works steps --- */
.join-steps-section {
  background: var(--color-background-light);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.join-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: join-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-xl);
}

.join-steps li {
  counter-increment: join-step;
}

.join-steps li::before {
  content: counter(join-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-family-logo);
  font-size: var(--font-size-3xl);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.join-steps strong {
  display: block;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.join-steps span {
  display: block;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.join-steps .btn {
  margin-top: var(--spacing-md);
}

/* --- Benefits --- */
.join-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg) var(--spacing-2xl);
}

.join-benefits li {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.join-benefit__icon {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #ffffff;
}

.join-benefit__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.join-benefits strong {
  display: block;
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.join-benefits li > div > span {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* --- Qualify --- */
.join-qualify-section {
  background: var(--color-background-light);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.join-free-callout {
  background: var(--color-primary);
  color: #ffffff;
  padding: var(--spacing-lg) var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  flex-wrap: wrap;
}

.join-free-callout__big {
  font-family: var(--font-family-logo);
  font-size: var(--font-size-3xl);
  letter-spacing: 0.05em;
  color: var(--color-accent-light);
  line-height: 1;
}

.join-free-callout p {
  margin: 0;
  font-size: var(--font-size-base);
  color: #e2e8f0;
  max-width: 58ch;
}

.join-qualify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  align-items: stretch;
}

.join-qualify-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  scroll-margin-top: 6rem;
}

.join-qualify-card h3 {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  margin: 0;
}

.join-qualify-card p {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin: 0;
}

.join-qualify-card .btn {
  align-self: flex-start;
  margin-top: auto;
}


/* --- Final CTA band --- */
.join-cta-band {
  background: var(--color-primary);
  color: #ffffff;
  text-align: center;
  padding: var(--spacing-3xl) 0;
}

.join-cta-band h2 {
  color: #ffffff;
  margin-bottom: var(--spacing-md);
}

.join-cta-band p {
  color: #cbd5e1;
  max-width: 55ch;
  margin: 0 auto var(--spacing-xl);
}

.join-cta-band__note {
  font-size: var(--font-size-sm);
  color: #94a3b8;
  margin-top: var(--spacing-lg) !important;
  margin-bottom: 0 !important;
}

.join-cta-band__note a {
  color: #ffffff;
  text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 560px) {
  .join-hero__actions .btn,
  .join-cta-band .btn {
    width: 100%;
    text-align: center;
  }
}


/* =============================================================================
   APPLY FOR MEMBERSHIP (template-apply.php)
   -----------------------------------------------------------------------------
   The same body sections as the Join page, under a compact band instead of a
   hero. No image and no image fallback: this page is a step in the Membership
   journey, so it opens on the content rather than on artwork. The gradient is
   the one .hero__background--join already uses when no image is set.
   ============================================================================= */

.apply-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e293b 100%);
  padding: var(--spacing-3xl) 0;
  text-align: center;
}

.apply-header__title {
  color: #ffffff;
  margin-bottom: var(--spacing-md);
}

.apply-header__subtitle {
  color: #ffffff;
  max-width: 60ch;
  margin: 0 auto;
}

.apply-header__note {
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: #cbd5e1;
}

.apply-header__note a {
  color: #ffffff;
  text-decoration: underline;
}

/* The first body section sits directly under the band, so it does not need the
   full section spacing the Join page gives it below a 60vh hero. */
.template-apply .join-steps-section {
  padding-top: var(--spacing-2xl);
}

/* =============================================================================
   BARGAINING COUNCIL REGION PICKER (parts/join-sections.php)
   -----------------------------------------------------------------------------
   Radio buttons drive the panels through :has(), with no JavaScript. The radios
   stay in the page (clipped, not display:none) so they keep their keyboard
   behaviour and screen reader semantics.

   The fallback matters: every panel is visible by default, and only the
   @supports block below hides them. A browser without :has() shows all five
   sets of steps stacked - longer, but nothing is ever hidden by a feature the
   browser does not have.
   ============================================================================= */

.council-picker__regions {
  border: 0;
  padding: 0;
  margin: 0 0 var(--spacing-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.council-picker__regions legend {
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.council-picker__choice {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  background: var(--color-background);
}

.council-picker__choice:hover {
  border-color: var(--color-primary);
}

/* Clipped rather than hidden: still focusable, still announced. */
.council-picker__choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.council-picker__choice:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.council-picker__choice:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-background);
}

.council-picker__prompt {
  display: none;
  color: var(--color-text-light);
}

/* Matches .join-qualify-card above: same border, same accent rule, no radius -
   this theme keeps border-radius for buttons only. */
.council-panel {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  scroll-margin-top: 6rem;
}

.council-panel h3 {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xs);
}

.council-panel__council {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.council-panel__note {
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

.council-panel__steps {
  margin: 0 0 var(--spacing-lg);
  padding-left: 1.25em;
}

.council-panel__steps li {
  margin-bottom: var(--spacing-sm);
}

.council-panel__contact {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
}

@supports selector(:has(*)) {
  .council-panel {
    display: none;
  }

  .council-picker:has(#council-region-cape:checked) .council-panel--cape,
  .council-picker:has(#council-region-swd:checked) .council-panel--swd,
  .council-picker:has(#council-region-north:checked) .council-panel--north,
  .council-picker:has(#council-region-kzn:checked) .council-panel--kzn,
  .council-picker:has(#council-region-other:checked) .council-panel--other {
    display: block;
  }

  .council-picker__prompt {
    display: block;
  }

  .council-picker:has(input:checked) .council-picker__prompt {
    display: none;
  }
}

@media (max-width: 767px) {
  .council-picker__choice {
    width: 100%;
  }

  .council-panel {
    padding: var(--spacing-lg);
  }
}