/* sections/support.css
 *
 * /support page — Figma node 188:8663. Phase D of the visual-polish
 * plan (interactive surface). Two cream-body sections under
 * `.ays-light`:
 *   1. Quick answers — eyebrow + h3 + 5 AysFaqItem accordions +
 *      closing link to /faq.
 *   2. Contact — eyebrow + h3 + form (with all states) + closing
 *      quote.
 *
 * Form-state token mapping (from `Theme.form.*`, `Theme.text.*`,
 * `Theme.comp.status.*`, `Layout.theme.{field,focus}` in
 * `src/tokens.json`):
 *
 *   ┌──────────┬─────────────────────────┬───────────────────────┐
 *   │ State    │ Border                  │ Background / Text     │
 *   ├──────────┼─────────────────────────┼───────────────────────┤
 *   │ default  │ form-border-enabled     │ form-bg-enabled       │
 *   │ filled   │ form-border-filled      │ form-bg-enabled       │
 *   │ focus    │ form-border-active +    │ form-bg-enabled       │
 *   │          │ outline (theme-focus)   │                       │
 *   │ error    │ form-border-danger      │ message: text-danger  │
 *   │ disabled │ form-border-disabled    │ form-bg-disabled,     │
 *   │          │                         │ text-disabled         │
 *   │ success  │ —                       │ comp-status-success + │
 *   │          │                         │ comp-status-text-     │
 *   │          │                         │ success               │
 *   └──────────┴─────────────────────────┴───────────────────────┘
 *
 * Backend wiring is deferred (per visual-polish-plan). The success
 * markup is rendered into the DOM but hidden by the
 * `[data-state="initial"]` wrapper — when a future JS submit handler
 * flips the wrapper to `data-state="success"`, the form fades out and
 * the success block fades in. Same CSS handles both states.
 *
 * Load order in Layout.astro: after terms.css.
 */

/* ── Section wraps ──
 * Both sections share `.ays-light` cream BG via the parent wrapper;
 * the alternating-band pattern of the pre-redesign /support is gone
 * — Figma renders both sections on the same cream surface. */
.ays-light .ays-support-quick,
.ays-light .ays-support-contact {
  background: var(--ays-page-default);
}

/* Container — content cap shared with `.page-hero .container` via
 * `--ays-legal-max-width` so the hero title block and the body
 * underneath align on the same vertical axis. */
.ays-support-container {
  max-width: var(--ays-legal-max-width);
  margin: 0 auto;
}

/* Section header — eyebrow + h3 stacked, generous spacing below
 * before the content (FAQ list or form). */
.ays-support-section-header {
  margin-bottom: 32px;
}
/* The eyebrow now uses the shared `.section-label` (ays-base.css); the
 * page-specific `.ays-support-eyebrow` rule was removed when Support's
 * eyebrows were unified onto the general class. */
.ays-light .ays-support-h2 {
  color: var(--ays-text-primary);
  margin: 0;
  font-weight: var(--fw-h3);
}

/* ── Quick answers section ── */
/* Wrapper is pure layout; per-item line-list dividers + flush-left
 * padding come from `.ays-light .faq-item` in sections/components.css.
 * `gap: 0` so the top borders read as one continuous bounded list. */
.ays-support-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* FAQ answer lines — when AysFaqItem's <slot /> renders our
 * `<p class="ays-support-faq-line">` paragraphs, give them a tight
 * stack so multi-line answers (iOS / Android sub-bullets + closing)
 * read as one unit. */
.ays-light .ays-support-faq-line {
  margin: 0;
  color: var(--ays-text-primary);
}
.ays-light .ays-support-faq-line + .ays-support-faq-line {
  margin-top: 8px;
}
.ays-light .ays-support-faq-line strong {
  font-weight: var(--fw-h3);
  color: var(--ays-text-primary);
}
.ays-light .ays-support-faq-line a {
  color: var(--ays-text-brand);
  text-decoration: underline;
}

/* Closing line below the FAQ list. */
.ays-light .ays-support-faq-link {
  margin: 32px 0 0;
  color: var(--ays-text-secondary);
}
.ays-light .ays-support-faq-link a {
  color: var(--ays-text-brand);
  text-decoration: underline;
}

/* ── Contact form wrap ──
 * `data-state="initial"` shows the form, hides the success block.
 * `data-state="success"` reverses it. The transition fades both
 * sides so the swap reads as one continuous motion when the backend
 * eventually wires submit. */
.ays-support-form-wrap {
  max-width: 600px;
  position: relative;
}
.ays-support-form-wrap[data-state="initial"] .ays-support-form {
  display: flex;
}
.ays-support-form-wrap[data-state="initial"] .ays-support-form-success {
  display: none;
}
.ays-support-form-wrap[data-state="success"] .ays-support-form {
  display: none;
}
.ays-support-form-wrap[data-state="success"] .ays-support-form-success {
  display: block;
}

/* ── Form layout ── */
.ays-support-form {
  flex-direction: column;
  gap: 24px;
}
.ays-support-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ays-light .ays-support-label {
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--ays-text-secondary);
  font-weight: var(--fw-h3);
  margin: 0;
}

/* ── Form controls — input / textarea / select ──
 * Default state uses `--ays-form-bg-enabled` (white) + `--ays-form-
 * border-enabled` (neutral.300). Border-radius 12px from
 * `--ays-theme-field-base`. Border width 1px from
 * `--ays-theme-field-border` (declared explicitly rather than relying
 * on the token for the value — the `--ays-theme-field-border` value
 * is a px length, not a literal `1px solid color`, so we set the
 * `border-width` via the token and the `border-style` / color as
 * literals + tokens). */
.ays-light .ays-support-input,
.ays-light .ays-support-select {
  font-family: var(--font-marketing-body);
  font-size: var(--fs-p2);
  line-height: var(--lh-body);
  color: var(--ays-text-primary);
  background: var(--ays-form-bg-enabled);
  border: var(--ays-theme-field-border) solid var(--ays-form-border-enabled);
  border-radius: var(--ays-theme-field-base);
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.ays-light .ays-support-textarea {
  resize: vertical;
  min-height: 144px;
  line-height: 1.55;
}

/* Placeholder copy — softer than body text. */
.ays-light .ays-support-input::placeholder {
  color: var(--ays-text-tertiary);
}

/* Filled state — when the field has a non-empty value but is NOT
 * currently focused. `:not(:placeholder-shown)` is the standard
 * CSS-only way to detect "has value". */
.ays-light .ays-support-input:not(:placeholder-shown):not(:focus) {
  border-color: var(--ays-form-border-filled);
}

/* Hover (non-focused) — slight border darkening, doesn't compete
 * with the focus state. */
.ays-light .ays-support-input:hover:not(:focus):not(:disabled),
.ays-light .ays-support-select:hover:not(:focus):not(:disabled) {
  border-color: var(--ays-form-border-filled);
}

/* Focus — primary border + a 2px outline glow (`--ays-theme-focus`).
 * `box-shadow` instead of `outline` so the ring rounds with the
 * field's border-radius. */
.ays-light .ays-support-input:focus,
.ays-light .ays-support-select:focus {
  border-color: var(--ays-form-border-active);
  box-shadow: 0 0 0 var(--ays-theme-focus) var(--ays-form-selection-focus);
}

/* Error — `:user-invalid` fires only after the user interacts with
 * the field (browser-native behavior), so the form doesn't show
 * angry red borders before anyone has touched it. Falls back to
 * `:invalid:not(:placeholder-shown)` for browsers without
 * `:user-invalid` support. */
.ays-light .ays-support-input:user-invalid,
.ays-light .ays-support-select:user-invalid {
  border-color: var(--ays-form-border-danger);
}
@supports not selector(:user-invalid) {
  .ays-light .ays-support-input:invalid:not(:placeholder-shown),
  .ays-light .ays-support-select:invalid:not(:placeholder-shown) {
    border-color: var(--ays-form-border-danger);
  }
}

/* Disabled — fired by JS when the (future) submit handler sets the
 * `disabled` attribute on inputs during submission. Pure-CSS rule
 * ready for when JS lands. */
.ays-light .ays-support-input:disabled,
.ays-light .ays-support-select:disabled {
  background: var(--ays-form-bg-disabled);
  border-color: var(--ays-form-border-disabled);
  color: var(--ays-text-disabled);
  cursor: not-allowed;
}

/* ── Select-specific: custom dropdown arrow ──
 * Native `<select>` arrows render inconsistently across platforms,
 * so we hide them (`appearance: none`) and overlay a custom chevron
 * absolutely positioned. `pointer-events: none` on the chevron
 * keeps the select itself clickable through the chevron region. */
.ays-support-select-wrap {
  position: relative;
}
.ays-light .ays-support-select {
  padding-right: 40px;
  cursor: pointer;
}
.ays-light .ays-support-select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ays-text-secondary);
  font-size: 14px;
  transition: color 0.15s ease;
}
.ays-light .ays-support-select:focus + .ays-support-select-arrow {
  color: var(--ays-form-border-active);
}

/* ── Form actions — submit button + helper note ── */
.ays-support-form-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.ays-support-submit {
  align-self: flex-start;
}
.ays-light .ays-support-form-note {
  color: var(--ays-text-secondary);
  margin: 0;
  max-width: 480px;
}
.ays-light .ays-support-form-note strong {
  color: var(--ays-text-primary);
  font-weight: var(--fw-h3);
}

/* ── Submit-error inline message ──
 * Sits hidden until `public/js/support-form.js` unhides it after a
 * failed POST to FormSpark. Uses the danger text token so the
 * message reads as the error counterpart to the success block while
 * leaving the form mounted so the visitor can retry without losing
 * their typed message. */
.ays-light .ays-support-form-error {
  color: var(--ays-text-danger);
  margin: 4px 0 0;
  max-width: 480px;
}

/* ── Success state ──
 * Hidden until the form wrapper's `data-state` flips to "success".
 * Block-level container so the markup occupies the form's footprint
 * once visible (avoids layout shift between states). Uses the
 * `Theme.comp.status.success` tokens for the same hue the design
 * system reserves for positive feedback elsewhere. */
.ays-light .ays-support-form-success {
  background: var(--ays-comp-status-success);
  border-radius: var(--ays-theme-field-base);
  padding: 24px;
  color: var(--ays-comp-status-text-success);
}
.ays-light .ays-support-form-success-title {
  margin: 0 0 8px;
  color: var(--ays-comp-status-text-success);
}
.ays-light .ays-support-form-success-body {
  margin: 0;
  color: var(--ays-comp-status-text-success);
}

/* ── Closing pull-quote ──
 * Italic serif callout below the form, sits the page off with a
 * warmer tone. Bordered on the left in `--ays-text-brand` to match
 * the rest of the brand-accent treatment without competing with
 * other purple elements on the page. */
.ays-light .ays-support-closing {
  margin: 64px 0 0;
  padding: 24px 0 24px 24px;
  border-left: 2px solid var(--ays-text-brand);
  font-style: italic;
  color: var(--ays-text-secondary);
  max-width: 600px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ays-support-section-header {
    margin-bottom: 24px;
  }
  .ays-light .ays-support-closing {
    margin-top: 48px;
  }
}