/* ============================================================================
   Support Center — page components (sup-)

   Page-specific layout for the support hub and the lost-license recovery flow.
   Builds on css/wm-dark.css (tokens, bands, wm- primitives — cards, form,
   alert, buttons), loaded first by wm_header() via wm_theme('dark'). A sup-
   component that turns out useful elsewhere should be promoted to
   css/wm-dark.css and renamed wm-.

   Loaded with a cache-busting query (controllers/support.php passes
   css/support-dark.css?v=N) — bump N when editing this file.
   ============================================================================ */

/* ---- Support hub cards ---- */
/* The hub is exactly four cards: step 4-across -> 2-across -> 1, never an
   unbalanced 3 (which would strand a single card on its own row). This
   overrides the shared auto-fit .wm-card-grid for this page only. */
.sup-hub { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .sup-hub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .sup-hub { grid-template-columns: 1fr; } }

/* The service cards carry CTAs, so they grow a little taller than the bare
   wm-card; lay out their body as a column and pin the actions to the bottom. */
.wm-card-grid .wm-card { display: flex; flex-direction: column; }
.sup-card__sub {
  font-family: var(--wm-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--wm-sand-gold);
  text-transform: uppercase;
  margin: -4px 0 12px;
}
/* Stack the CTAs in a column and pin the group to the bottom, so the primary
   (red) button is the bottom-most item and lines up across every card — even
   the "I need help with…" card, which has a secondary Forums button above it. */
.sup-card__actions {
  display: flex;
  flex-direction: column;
  /* Stretch so stacked CTAs share one width (e.g. Forums matches Help Center
     below it) and every card's button block lines up. */
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

/* ---- Lost-license recovery ---- */
.sup-recover { max-width: 640px; }
.sup-recover__lede { margin-bottom: 16px; }
.sup-recover__form { margin-top: 28px; }
.sup-recover__robot {
  font-family: var(--wm-font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--wm-earth-200);
  margin: 0;
}
/* The reCAPTCHA iframe has a fixed intrinsic width; keep it from being clipped
   by the form's narrow max-width on small screens. */
.sup-recover__form .g-recaptcha { margin: 4px 0 4px; }