/* =========================================================================
   Support page
   =========================================================================
   Loaded only on the support page (see functions.php).

   Everything here is built on the tokens already declared in base.css —
   no new colours, radii, shadows or type scale. The page is meant to read as
   the same site, not a microsite, so the only thing this file adds is layout
   and the handful of components that exist nowhere else: the search field,
   the resource/route card grids, the product picker and the form states.

   Buttons (.btn, .btn--primary, .btn--secondary), the container, the section
   heading and the accordion are all inherited from components.css and
   accordion.js and are deliberately not restyled here.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Shell
   ---------------------------------------------------------------------- */

/* The brief asks for a 1200–1320px page. --container-max is 1240px, which is
   already inside that band, so it is reused rather than overridden — a second
   width token would drift from the rest of the site. */
.support-page {
  --support-gutter: var(--space-6);

  /* Text-only accent.
     The brand accent (--color-accent, #FF6A00) measures 2.87:1 on white and
     2.74:1 on --color-surface-alt. Both are well under the WCAG AA minimum of
     4.5:1 for normal-size text, so using it for the eyebrow and card CTA
     labels would ship a known contrast failure on a page whose whole job is
     helping people who are already stuck.

     This darker tone is 4.91:1 on white and 4.70:1 on --color-surface-alt, so
     it passes AA on both surfaces this page uses, and reads as the same
     orange at label sizes.

     Scoped to .support-page deliberately: --color-accent is a site-wide brand
     token and the same failure exists on other pages and on the accent
     buttons. Fixing it globally is a brand decision, not a support-page one.
     See the accessibility notes in the handover for the full list. */
  --support-accent-text: #C24A00;
}

.support-page > * {
  margin-block: 0;
}

.support-section {
  padding-block: var(--space-10);
}

.support-section--tight {
  padding-block: var(--space-8);
}

.support-section--alt {
  background: var(--color-surface-alt);
}

.support-section__inner {
  width: min(100% - (var(--support-gutter) * 2), var(--container-max));
  margin-inline: auto;
}

/* Reading-width band for prose-heavy sections (policy, checklist, FAQ).
   Long measure is the main readability failure on support pages, which are
   mostly text. */
.support-section__inner--narrow {
  width: min(100% - (var(--support-gutter) * 2), 820px);
}

.support-section__head {
  margin-bottom: var(--space-6);
}

.support-section__head--center {
  text-align: center;
}

.support-eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--support-accent-text);
  margin-bottom: var(--space-2);
}

.support-section__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.support-section__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
  margin: 0;
  max-width: 62ch;
}

.support-section__head--center .support-section__lead {
  margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.support-hero {
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-surface) 100%);
  padding-block: var(--space-10) var(--space-8);
  text-align: center;
}

.support-hero__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

.support-hero__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
  max-width: 60ch;
  margin: 0 auto var(--space-6);
}

/* -------------------------------------------------------------------------
   Search
   ---------------------------------------------------------------------- */

.support-search {
  max-width: 680px;
  margin-inline: auto;
}

.support-search__form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  box-shadow: var(--shadow-md);
}

/* Focus lands on the input, but the ring belongs on the whole control so the
   compound field reads as one target. :focus-within is what makes that work
   without JS. */
.support-search__form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.25);
}

.support-search__icon {
  display: inline-flex;
  color: var(--color-ink-faint);
  flex-shrink: 0;
}

.support-search__input {
  flex: 1 1 auto;
  min-width: 0; /* Without this the flex item refuses to shrink below its
                   intrinsic width and the button overflows on narrow screens. */
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--color-ink);
  padding-block: var(--space-2);
}

.support-search__input:focus {
  outline: none; /* The ring is on .support-search__form via :focus-within. */
}

.support-search__input::placeholder {
  color: var(--color-ink-faint);
}

.support-search__submit {
  flex-shrink: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  transition: background var(--transition);
}

.support-search__submit:hover {
  background: var(--color-primary-dark);
}

.support-search__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--fs-sm);
}

.support-search__topics-label {
  color: var(--color-ink-soft);
}

.support-search__chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}

.support-search__chip:hover,
.support-search__chip:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------
   Card grids — resources and support routes
   ---------------------------------------------------------------------- */

/* auto-fit rather than a fixed column count: the resource list is built from
   whatever pages actually exist, so the card count is not known at authoring
   time and a hardcoded 4-up would break at 3. */
.support-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.support-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.support-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* The whole card is clickable via a stretched pseudo-element on the real
   link, so there is exactly one tab stop and one accessible name per card —
   rather than wrapping the card in a second redundant anchor. */
.support-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.support-card__link {
  color: inherit;
  text-decoration: none;
}

.support-card:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.25);
}

.support-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.support-card__title {
  font-size: var(--fs-md);
  line-height: 1.35;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

.support-card__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-4);
}

.support-card__cta {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--support-accent-text);
}

.support-card__cta::after {
  content: ' →';
}

/* The routes grid holds exactly four cards with longer copy, so it gets a
   wider minimum than the resources grid — at 240px the four-up row produced
   very tall, narrow columns at 1280px. */
.support-cards--routes {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* -------------------------------------------------------------------------
   FAQ + policy links
   ---------------------------------------------------------------------- */

/* The accordion itself is styled by components.css; this only sets the space
   between the FAQ and the policy row that follows it. */
.support-policies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-6) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.support-policies__label {
  flex-basis: 100%;
}

.support-policies__link {
  color: var(--color-primary);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Product picker
   ---------------------------------------------------------------------- */

.support-picker {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.support-picker__lead {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-4);
}

.support-picker__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}

.support-picker__field {
  flex: 1 1 260px;
  min-width: 0;
  display: block;
}

.support-picker__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.support-picker__select,
.support-field__control {
  width: 100%;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  /* 44px minimum touch target. */
  min-height: 44px;
}

.support-picker__select:focus-visible,
.support-field__control:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}

/* -------------------------------------------------------------------------
   Support form states
   ---------------------------------------------------------------------- */

.support-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

/* The unconfigured state is intentionally styled as a notice rather than as a
   form. Anything that looks like a submit control here would be a lie. */
.support-form--pending {
  border-style: dashed;
  background: var(--color-surface-alt);
}

.support-form__badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-4);
}

.support-form__lead {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.support-form__detail,
.support-form__fallback {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

.support-form__detail--code code {
  font-size: 0.85em;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  /* Long PHP snippet must not force a horizontal scrollbar on mobile. */
  overflow-wrap: anywhere;
}

.support-form__fallback {
  margin-bottom: 0;
}

/* Contact Form 7 renders its own markup; these rules only bring it onto the
   theme's field styling rather than restyling the plugin wholesale. */
.support-form--live .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
}

.support-form--live .wpcf7-form-control:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.support-form--live label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

/* Navy rather than the accent orange: white on --color-accent is 2.87:1, which
   fails AA, while white on --color-primary is 13.4:1. This also matches the
   search submit button at the top of the page, so the two primary actions on
   the page look like the same control. */
.support-form--live .wpcf7-submit {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: var(--space-3) var(--space-6);
  min-height: 44px;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Coverage panel + checklist
   ---------------------------------------------------------------------- */

.support-coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.support-coverage__col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.support-coverage__title {
  font-size: var(--fs-md);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

.support-coverage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
}

/* Marks are drawn with a pseudo-element and paired with hidden text in the
   markup, so a screen reader hears "Covered"/"Not covered" rather than a
   decorative glyph. */
.support-coverage__list li {
  padding-left: 1.75rem;
  position: relative;
}

.support-coverage__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.support-coverage--yes .support-coverage__list li::before {
  content: '✓';
  color: var(--color-success);
}

.support-coverage--no .support-coverage__list li::before {
  content: '✕';
  color: var(--color-danger);
}

.support-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: support-step;
}

.support-checklist__item {
  position: relative;
  padding-left: 2.5rem;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
  counter-increment: support-step;
}

.support-checklist__item::before {
  content: counter(support-step);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.support-checklist__note {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

/* -------------------------------------------------------------------------
   Final CTA
   ---------------------------------------------------------------------- */

.support-cta {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  color: #fff;
}

.support-cta__title {
  font-size: var(--fs-xl);
  color: #fff;
  margin: 0 0 var(--space-3);
}

.support-cta__lead {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 auto var(--space-6);
  max-width: 52ch;
}

.support-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

/* Tablet — the brief's 32px side padding. */
@media (max-width: 1024px) {
  .support-page {
    --support-gutter: var(--space-6);
  }

  .support-section {
    padding-block: var(--space-8);
  }
}

@media (max-width: 782px) {
  .support-hero__title {
    font-size: var(--fs-2xl);
  }

  .support-section__title {
    font-size: var(--fs-xl);
  }

  /* Stacking the search puts the button at full width under the field, which
     is a far bigger tap target than a shrunken inline button. */
  .support-search__form {
    flex-wrap: wrap;
    border-radius: var(--radius-md);
  }

  .support-search__input {
    flex-basis: calc(100% - 3rem);
  }

  .support-search__submit {
    flex: 1 1 100%;
  }

  .support-cta {
    padding: var(--space-6);
  }

  .support-cta__actions .btn {
    width: 100%;
  }
}

/* Mobile — the brief's 20px side padding. */
@media (max-width: 600px) {
  .support-page {
    --support-gutter: var(--space-5);
  }

  .support-section {
    padding-block: var(--space-6);
  }

  .support-picker,
  .support-form,
  .support-coverage__col {
    padding: var(--space-5);
  }

  .support-picker__row {
    flex-direction: column;
    align-items: stretch;
  }

  .support-picker__go {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-card {
    transition: none;
  }

  .support-card:hover {
    transform: none;
  }
}