/* ==========================================================================
   SolarCoin Path Chooser — sc-chooser.css
   Scoped under .sc-chooser, .sc-switchbar, .sc-path, html.sc-js only.
   Tokens declared as custom properties on the four scoped roots so they
   inherit to every descendant without leaking to the rest of the theme.
   ========================================================================== */

.sc-chooser,
.sc-switchbar,
.sc-path {
  --sc-navy: #162742;
  --sc-orange: #FF7B00;
  --sc-cream: #F9F3D9;
  --sc-gold: #FFC201;
  --sc-body: #484B63;
  --sc-hairline: rgba(22, 39, 66, 0.1);
  --sc-callout-bg: #FFF3E0;
  --sc-radius-card: 16px;
  --sc-radius-pill: 50px;
  font-family: inherit;
}

.sc-chooser *,
.sc-switchbar *,
.sc-path * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------
   Reveal-one (progressive enhancement — no-JS keeps every panel visible)
   -------------------------------------------------------------------- */
html.sc-js .sc-path {
  display: none;
}
html.sc-js .sc-path.is-active {
  display: block;
}
.sc-path {
  scroll-margin-top: 96px; /* clears sticky switchbar / theme nav on anchor jump */
}
.sc-path h2:focus-visible {
  outline: 3px solid var(--sc-orange);
  outline-offset: 6px;
  border-radius: 4px;
}
html.sc-js {
  scroll-behavior: smooth;
}

/* ==========================================================================
   .sc-chooser — wrapper
   ========================================================================== */
.sc-chooser {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ==========================================================================
   .sc-cardgrid — 1 col mobile-first, 3 equal cols above 680px
   ========================================================================== */
.sc-cardgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
  width: 100%;
}
@media (min-width: 681px) {
  .sc-cardgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* --------------------------------------------------------------------
   .sc-card — full-height clickable button
   -------------------------------------------------------------------- */
.sc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  height: 100%;
  text-align: left;
  font: inherit;
  color: var(--sc-navy);
  background: var(--sc-cream);
  border: 2px solid transparent;
  border-radius: var(--sc-radius-card);
  padding: 28px 24px 24px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.sc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(22, 39, 66, 0.14);
  border-color: rgba(255, 123, 0, 0.4);
}
.sc-card:focus-visible {
  outline: 3px solid var(--sc-orange);
  outline-offset: 3px;
  border-color: var(--sc-orange);
}

/* Selected state */
.sc-card[aria-pressed="true"] {
  background: #ffffff;
  border-color: var(--sc-orange);
  box-shadow: 0 10px 24px rgba(255, 123, 0, 0.2);
  transform: translateY(-2px);
}
/* Checkmark badge — pure CSS, no markup change needed */
.sc-card[aria-pressed="true"]::after {
  content: "\2713";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sc-orange);
  color: var(--sc-cream);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-card__num {
  align-self: flex-start;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--sc-orange);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
}
.sc-card[aria-pressed="true"] .sc-card__num {
  opacity: 0.32;
}

.sc-card__title {
  display: block;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sc-navy);
}

.sc-card__desc {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sc-body);
}

.sc-card__time {
  display: inline-block;
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-orange);
}

/* ==========================================================================
   .sc-helper-toggle — "Not sure which is me?"
   ========================================================================== */
.sc-helper-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 12px 26px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sc-navy);
  background: transparent;
  border: 2px solid var(--sc-navy);
  border-radius: var(--sc-radius-pill);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sc-helper-toggle::after {
  content: "\25BE"; /* small chevron */
  display: inline-block;
  font-size: 0.75em;
  transition: transform 0.2s ease;
}
.sc-helper-toggle:hover {
  background: var(--sc-orange);
  border-color: var(--sc-orange);
  color: var(--sc-cream);
}
.sc-helper-toggle:focus-visible {
  outline: 3px solid var(--sc-orange);
  outline-offset: 3px;
}
.sc-helper-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ==========================================================================
   .sc-helper — 2-question flow (collapsed by [hidden])
   ========================================================================== */
.sc-helper {
  margin-top: 20px;
  padding: 28px 24px;
  background: var(--sc-cream);
  border-radius: var(--sc-radius-card);
  max-width: 560px;
}
.sc-helper[hidden] {
  display: none;
}

.sc-helper__q {
  display: block;
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sc-navy);
}

.sc-helper__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px 10px 0;
  padding: 10px 24px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sc-navy);
  background: #ffffff;
  border: 2px solid var(--sc-hairline);
  border-radius: var(--sc-radius-pill);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sc-helper__opt:hover {
  border-color: var(--sc-orange);
  transform: translateY(-2px);
}
.sc-helper__opt:focus-visible {
  outline: 3px solid var(--sc-orange);
  outline-offset: 2px;
}
.sc-helper__opt[aria-pressed="true"] {
  background: var(--sc-orange);
  border-color: var(--sc-orange);
  color: var(--sc-cream);
}

.sc-helper__result {
  margin-top: 16px;
  padding: 20px 24px;
  background: var(--sc-callout-bg);
  border-left: 4px solid var(--sc-orange);
  border-radius: 8px;
}
.sc-helper__result p,
.sc-helper__result strong {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--sc-navy);
}

.sc-helper__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 12px 28px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sc-cream);
  background: var(--sc-orange);
  border: 0;
  border-radius: var(--sc-radius-pill);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sc-helper__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 123, 0, 0.3);
}
.sc-helper__cta:focus-visible {
  outline: 3px solid var(--sc-navy);
  outline-offset: 3px;
}

/* ==========================================================================
   .sc-switchbar — compact bar, sticky, visible only via .is-visible
   Note: JS owns the inner markup (not fixed by contract); this styles
   plain <button>/<a> children generically so it works regardless of the
   exact attributes JS assigns to each pill/link.
   ========================================================================== */
.sc-switchbar {
  display: none; /* default: not shown until JS adds .is-visible */
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  background: var(--sc-cream);
  border-bottom: 1px solid var(--sc-hairline);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sc-switchbar[hidden] {
  display: none;
}
.sc-switchbar.is-visible {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 40;
}

.sc-switchbar button,
.sc-switchbar a {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* path pills */
.sc-switchbar button {
  padding: 8px 18px;
  color: var(--sc-navy);
  background: #ffffff;
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-radius-pill);
}
.sc-switchbar button:hover {
  border-color: var(--sc-orange);
}
.sc-switchbar button:focus-visible,
.sc-switchbar a:focus-visible {
  outline: 3px solid var(--sc-orange);
  outline-offset: 2px;
}
.sc-switchbar button[aria-current="true"],
.sc-switchbar button[aria-pressed="true"] {
  background: var(--sc-orange);
  border-color: var(--sc-orange);
  color: var(--sc-cream);
}

/* "See all options" link — pushed to the end */
.sc-switchbar a {
  margin-left: auto;
  padding: 8px 4px;
  color: var(--sc-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.sc-switchbar a:hover {
  color: var(--sc-orange);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.sc-js {
    scroll-behavior: auto;
  }
  .sc-card,
  .sc-card::after,
  .sc-helper-toggle,
  .sc-helper-toggle::after,
  .sc-helper__opt,
  .sc-helper__cta,
  .sc-switchbar button,
  .sc-switchbar a {
    transition: none !important; /* only way to fully kill inherited transform/box-shadow easing here */
  }
  .sc-card:hover,
  .sc-card[aria-pressed="true"],
  .sc-helper__opt:hover,
  .sc-helper__cta:hover {
    transform: none;
  }
}

/* chooser heading + subhead (added by integrator to match section framing) */
.sc-chooser__title{margin:0 0 10px;text-align:center;color:#162742;font-weight:900;font-size:clamp(1.5rem,4vw,2rem);line-height:1.1;}
.sc-chooser__sub{margin:0 auto 40px;text-align:center;color:#484B63;max-width:640px;font-size:1.0625rem;line-height:1.5;}

/* ---- scroll-proof handoff: collapse the chooser band when a path is active ---- */
html.sc-js.sc-path-active .sc-chooser-section { display: none; }
/* a persistent "change path" affordance stays available via the switchbar */

/* ---- mobile: keep the sticky switchbar clear of a lower-right support chat bubble (#14) ---- */
@media (max-width: 600px) {
  .sc-switchbar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    font-size: 0.8125rem;
  }
  /* leave a gap on the right edge so a floating chat bubble isn't covered */
  .sc-switchbar { padding-right: 76px; }
}

/* ---- trust anchor bar (#5) ---- */
.sc-trustbar{max-width:1200px;margin:0 auto;padding:12px 20px;font-size:0.875rem;line-height:1.5;color:#162742;background:#FFF3E0;border:1px solid rgba(255,123,0,.35);border-radius:8px;}
.sc-trustbar strong{color:#162742;}
@media(min-width:681px){.sc-trustbar{text-align:center;}}
/* ---- chooser convergence note (#8) ---- */
.sc-chooser__note{margin:18px 0 0;font-size:0.875rem;color:#484B63;font-style:italic;}

/* ---- live-theme polish (verified against the real page) ---- */
/* clear the 81px fixed site header so the trust bar isn't hidden under it */
.sc-trustbar{margin-top:92px;}
/* keep the sticky switchbar's controls clear of the bottom-right Help + Feedback widgets */
.sc-switchbar{padding-right:150px;}
@media (max-width:600px){ .sc-switchbar{padding-right:84px;} }

/* deep-link arrival: hide the hero so the chosen path is the first content under the header */
html.sc-js.sc-deeplink .sc-hero-section{ display:none; }

/* 2-path layout (Path 1 / exchange eliminated — SolarCoin was DEX-only) */
@media (min-width:681px){ .sc-cardgrid--2{ grid-template-columns:repeat(2,1fr); max-width:840px; margin-left:auto; margin-right:auto; } }