/* =========================================================================
   Funding Xperts — Theme Stylesheet
   -------------------------------------------------------------------------
   Organisation:
     1. Reset / base
     2. Accessibility helpers (skip link, focus states, visually-hidden)
     3. Layout primitives (container, grid)
     4. Typography
     5. Buttons & links
     6. Site header & navigation
     7. Hero
     8. Cards (benefit / eligibility)
     9. Funding-use grid
    10. CTA band
    11. Forms
    12. Accordion (FAQ)
    13. Site footer
    14. 404 / search
    15. Utilities & responsive helpers
    16. Reduced motion

   All colours/spacing come from assets/css/tokens.css custom properties —
   do not add new hard-coded hex values here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Reset / base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchor-jump targets (skip link, FAQ deep links, in-page CTAs)
     from landing underneath the sticky header — see .fx-header. ~84px
     comfortably covers the header's actual height across breakpoints;
     adjust if the header's real rendered height changes noticeably. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--fx-font-base);
  font-size: var(--fx-font-size-base);
  line-height: var(--fx-line-height-base);
  color: var(--fx-color-text);
  background-color: var(--fx-color-bg);
  overflow-x: hidden;
}

img, svg, video {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fx-font-display);
  font-weight: 700;
  line-height: var(--fx-line-height-heading);
  letter-spacing: var(--fx-tracking-heading);
  text-wrap: balance;
  margin: 0 0 var(--fx-space-sm);
  color: var(--fx-color-heading); /* sampled brand navy, see tokens.css */
}

h1 { font-size: var(--fx-font-size-xlarge); }
h2 { font-size: var(--fx-font-size-large); }
h3 { font-size: var(--fx-font-size-medium); }

p { margin: 0 0 var(--fx-space-sm); }

ul, ol { padding-left: 1.25rem; }

/* Links use navy (--fx-color-link), NOT the brand cyan. Cyan text on white
   measures 1.95:1 and fails AA outright — see the rule at the top of
   tokens.css. Navy is 12.52:1. */
a {
  color: var(--fx-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover { color: var(--fx-color-link-hover); }

button { font-family: inherit; }

/* -------------------------------------------------------------------------
   2. Accessibility helpers
   ------------------------------------------------------------------------- */
.fx-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  /* Navy ground, white text (12.52:1). A cyan ground with white text would
     be 1.95:1 — unreadable, and this is an accessibility affordance. */
  background: var(--fx-color-secondary);
  color: #fff;
  padding: var(--fx-space-xs) var(--fx-space-sm);
  border-radius: var(--fx-radius-sm);
  text-decoration: none;
}

.fx-skip-link:focus {
  left: var(--fx-space-sm);
  top: var(--fx-space-sm);
}

.fx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: -1px;
}

/* Visible, high-contrast focus ring on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--fx-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--fx-radius-sm);
}

/* -------------------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------------------- */
.fx-container {
  width: 100%;
  max-width: var(--fx-container-max);
  margin-inline: auto;
  padding-inline: var(--fx-space-md);
}

.fx-container--narrow {
  max-width: var(--fx-content-max);
}

.fx-section {
  padding-block: var(--fx-space-xl);
}

.fx-section--alt {
  background-color: var(--fx-color-bg-alt);
}

.fx-grid {
  display: grid;
  gap: var(--fx-space-md);
}

@media (min-width: 640px) {
  .fx-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .fx-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .fx-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.fx-section-heading {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--fx-space-lg);
}

/* -------------------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------------------- */
/* Section eyebrow. Set in the mono face at label size with wide tracking —
   it reads as a system label rather than as small shouting body copy.
   Deep cyan (#0097E8) is 3.19:1 on white: acceptable for a non-essential
   label, and the heading beneath always repeats the meaning. */
.fx-eyebrow {
  display: block;
  font-family: var(--fx-font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--fx-tracking-label);
  text-transform: uppercase;
  color: var(--fx-color-brand-cyan-deep);
  margin-bottom: var(--fx-space-xs);
}

/* On the navy and near-black bands the deep cyan is too dark to read, so the
   .fx-on-dark context swaps it for the pale aqua (8.98:1 on navy). */
.fx-on-dark .fx-eyebrow { color: var(--fx-color-brand-aqua); }

.fx-text-muted { color: var(--fx-color-text-muted); }
.fx-text-small { font-size: var(--fx-font-size-small); }

/* -------------------------------------------------------------------------
   5. Buttons & links
   ------------------------------------------------------------------------- */
.fx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--fx-radius-md);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--fx-transition-fast), color var(--fx-transition-fast), border-color var(--fx-transition-fast);
}

/* Primary CTA: brand cyan as a FILL with navy ink on top — 6.43:1. The
   previous white-on-cyan pairing was 1.95:1 and failed AA outright. This is
   the single most important rule in the theme; see tokens.css. */
.fx-btn--primary {
  background-color: var(--fx-color-primary);
  color: var(--fx-color-on-primary);
}
.fx-btn--primary:hover {
  background-color: var(--fx-color-primary-hover);
  color: var(--fx-color-on-primary);
}

/* Secondary CTA: outline treatment (per brand brief §4 "Buttons" — secondary
   buttons use an approved outline or neutral treatment, not a second filled
   colour). --fx-color-secondary / --fx-color-secondary-hover currently equal
   --fx-color-primary / --fx-color-primary-hover (see tokens.css) since the
   supplied logo only yields one brand hue family; kept as distinct tokens in
   case brand guidance later introduces a genuine second accent colour. */
.fx-btn--secondary {
  background-color: transparent;
  border-color: var(--fx-color-secondary);
  color: var(--fx-color-secondary);
}
.fx-btn--secondary:hover { background-color: var(--fx-color-secondary); color: #fff; }

/* Outline buttons take navy, never cyan. A cyan border on white is 1.95:1 —
   below even the 3:1 that WCAG allows for a non-text UI component, which is
   exactly the failure the live site currently ships. */
.fx-btn--outline {
  background-color: transparent;
  border-color: currentColor;
  color: var(--fx-color-secondary);
}
.fx-btn--outline:hover {
  background-color: var(--fx-color-primary);
  color: var(--fx-color-on-primary);
  border-color: var(--fx-color-primary);
}

.fx-btn--ghost-on-dark {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.fx-btn--ghost-on-dark:hover { background-color: rgba(255, 255, 255, 0.12); }

.fx-btn--block { width: 100%; }

/* -------------------------------------------------------------------------
   6. Site header & navigation
   ------------------------------------------------------------------------- */
.fx-header {
  background-color: var(--fx-color-bg);
  border-bottom: 1px solid var(--fx-color-border);
  /* Sticky per the brief's "sticky only if it does not reduce mobile
     usability" (§6): there's no separate utility bar above it any more
     (removed per request), so the sticky header alone is compact rather
     than compounding with another fixed bar — keeps more viewport height
     available on small screens. */
  position: sticky;
  top: 0;
  z-index: 100;
}

.fx-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-space-md);
  padding-block: var(--fx-space-sm);
}

/* Three selectors, not one. the_custom_logo() prints its own markup straight
   into .fx-header__branding, so a logo uploaded under Site Identity never
   matched .fx-header__logo and had no size constraint in the header at all.
   .custom-logo is the class WordPress always puts on that img.

   Sizes raised at 1.13.5 (48 -> 60 on desktop) at the client's request. The
   mobile value stays at 48: the header is sticky, so every pixel here is
   taken off the top of a phone viewport on every page. */
.fx-header__logo img,
.fx-header__logo svg,
.fx-header__branding .custom-logo {
  max-height: 48px;
  width: auto;
}

@media (min-width: 700px) {
  .fx-header__logo img,
  .fx-header__logo svg,
  .fx-header__branding .custom-logo {
    max-height: 60px;
  }
}

.fx-header__logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--fx-color-primary);
  text-decoration: none;
}

.fx-header__actions {
  display: flex;
  align-items: center;
  gap: var(--fx-space-sm);
}

.fx-header__phone {
  display: none;
  font-weight: 700;
  color: var(--fx-color-primary);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .fx-header__phone { display: inline-flex; align-items: center; gap: 0.4rem; }
}

/* Primary nav */
.fx-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-sm);
}

.fx-nav-toggle__icon,
.fx-nav-toggle__icon::before,
.fx-nav-toggle__icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--fx-color-primary);
  position: relative;
  transition: transform var(--fx-transition-fast);
}
.fx-nav-toggle__icon::before { content: ""; position: absolute; top: -7px; }
.fx-nav-toggle__icon::after { content: ""; position: absolute; top: 7px; }

@media (min-width: 900px) {
  .fx-nav-toggle { display: none; }
}

.fx-primary-nav {
  display: none;
}

.fx-primary-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--fx-color-bg);
  border-bottom: 1px solid var(--fx-color-border);
  box-shadow: var(--fx-shadow-md);
  max-height: 80vh;
  overflow-y: auto;
}

@media (min-width: 900px) {
  .fx-primary-nav {
    display: block;
    position: static;
    box-shadow: none;
    border-bottom: none;
    max-height: none;
    overflow: visible;
  }
}

.fx-primary-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--fx-space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (min-width: 900px) {
  .fx-primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--fx-space-md);
    padding: 0;
  }
}

.fx-primary-nav__item { position: relative; }

.fx-primary-nav__link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  color: var(--fx-color-text);
  text-decoration: none;
  font-weight: 600;
}
.fx-primary-nav__link:hover,
.fx-primary-nav__link:focus-visible { color: var(--fx-color-primary); }

.fx-primary-nav__item--has-children > .fx-primary-nav__link .fx-caret {
  transition: transform var(--fx-transition-fast);
}

.fx-primary-nav__item--has-children[data-open="true"] > .fx-primary-nav__link .fx-caret {
  transform: rotate(180deg);
}

.fx-submenu {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem 1rem;
  display: none;
}

.fx-primary-nav__item--has-children[data-open="true"] > .fx-submenu {
  display: block;
}

@media (min-width: 900px) {
  .fx-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background-color: var(--fx-color-bg);
    border: 1px solid var(--fx-color-border);
    border-radius: var(--fx-radius-md);
    box-shadow: var(--fx-shadow-md);
    padding: 0.5rem 0;
  }

  .fx-primary-nav__item--has-children:hover > .fx-submenu,
  .fx-primary-nav__item--has-children[data-open="true"] > .fx-submenu,
  .fx-primary-nav__item--has-children:focus-within > .fx-submenu {
    display: block;
  }
}

.fx-submenu__link {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  color: var(--fx-color-text);
  text-decoration: none;
}
.fx-submenu__link:hover,
.fx-submenu__link:focus-visible {
  background-color: var(--fx-color-bg-alt);
  color: var(--fx-color-primary);
}

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */
.fx-hero {
  background: linear-gradient(180deg, var(--fx-color-bg-alt) 0%, var(--fx-color-bg) 100%);
  padding-block: var(--fx-space-xl);
}

.fx-hero__grid {
  display: grid;
  gap: var(--fx-space-lg);
  align-items: center;
}

@media (min-width: 900px) {
  .fx-hero__grid { grid-template-columns: 3fr 2fr; }
}

.fx-hero__title {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.fx-hero__intro {
  font-size: var(--fx-font-size-medium);
  color: var(--fx-color-text-muted);
  max-width: 46rem;
}

.fx-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-space-sm);
  margin-top: var(--fx-space-md);
}

.fx-hero__media {
  background-color: var(--fx-color-bg-alt);
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-lg);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fx-color-text-muted);
  text-align: center;
  padding: var(--fx-space-md);
}

/* -------------------------------------------------------------------------
   8. Cards (benefit / eligibility)
   ------------------------------------------------------------------------- */
.fx-card {
  background-color: var(--fx-color-bg);
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-md);
  padding: var(--fx-space-md);
  box-shadow: var(--fx-shadow-sm);
  height: 100%;
}

.fx-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--fx-color-bg-alt);
  color: var(--fx-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--fx-space-sm);
}

.fx-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.fx-card__title { font-size: 1.1rem; margin-bottom: 0.4rem; }
.fx-card__body { color: var(--fx-color-text-muted); margin-bottom: 0; }

.fx-disclaimer {
  font-size: var(--fx-font-size-small);
  color: var(--fx-color-text-muted);
  margin-top: var(--fx-space-md);
  text-align: center;
}

/* -------------------------------------------------------------------------
   9. Funding-use grid
   ------------------------------------------------------------------------- */
.fx-use-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: var(--fx-space-md);
  background-color: var(--fx-color-bg);
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-md);
}

.fx-use-grid__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--fx-color-bg-alt);
  color: var(--fx-color-primary);
}

.fx-use-grid__label { font-weight: 600; font-size: var(--fx-font-size-small); }

/* -------------------------------------------------------------------------
   10. CTA band
   ------------------------------------------------------------------------- */
.fx-cta-band {
  background-color: var(--fx-color-primary);
  color: #fff;
  text-align: center;
}

.fx-cta-band a { color: #fff; }

.fx-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fx-space-sm);
  margin-top: var(--fx-space-md);
}

/* -------------------------------------------------------------------------
   11. Forms
   ------------------------------------------------------------------------- */
.fx-form { max-width: var(--fx-content-max); }

.fx-form fieldset {
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-md);
  padding: var(--fx-space-md);
  margin: 0 0 var(--fx-space-md);
}

.fx-form legend {
  font-weight: 700;
  padding: 0 0.4rem;
}

.fx-field { margin-bottom: var(--fx-space-md); }

.fx-field label,
.fx-field legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.fx-field__hint {
  display: block;
  font-size: var(--fx-font-size-small);
  color: var(--fx-color-text-muted);
  margin-bottom: 0.35rem;
}

.fx-field__error {
  display: block;
  font-size: var(--fx-font-size-small);
  color: var(--fx-color-error);
  margin-top: 0.35rem;
}

.fx-input,
.fx-select,
.fx-textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-sm);
  font-size: var(--fx-font-size-base);
  color: var(--fx-color-text);
  background-color: var(--fx-color-bg);
}

.fx-textarea { min-height: 120px; }

.fx-input:invalid[aria-invalid="true"],
.fx-field--error .fx-input,
.fx-field--error .fx-select,
.fx-field--error .fx-textarea {
  border-color: var(--fx-color-error);
}

.fx-checkbox-group,
.fx-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fx-space-sm);
}

.fx-checkbox,
.fx-radio {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 44px;
}

.fx-checkbox input,
.fx-radio input {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.fx-form-success,
.fx-form-error {
  border-radius: var(--fx-radius-md);
  padding: var(--fx-space-md);
  margin-bottom: var(--fx-space-md);
}

.fx-form-success {
  background-color: #eaf6ee;
  border: 1px solid var(--fx-color-success);
  color: #12401f;
}

.fx-form-error {
  background-color: #fbeceb;
  border: 1px solid var(--fx-color-error);
  color: #5c130f;
}

/* -------------------------------------------------------------------------
   12. Accordion (FAQ) — built on native <details>/<summary>
   ------------------------------------------------------------------------- */
/* Each entry is a card rather than a row in a ruled list (changed 1.8.3). The
   ruled version was clean but bare: with thirteen entries the page read as a
   wall of hairlines, and there was nothing to tell a closed question from an
   open one except the indicator.

   The card treatment is the theme's existing one, the same border, radius and
   shadow tokens .fx-card uses. Nothing new. */
.fx-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Applies both to the theme's own .fx-accordion__item markup AND to the
   core/details block (.wp-block-details) editors insert via the
   "FX: FAQ accordion item" pattern, so hand-written and block-editor FAQ
   entries look identical.

   overflow: hidden does two jobs. accordion.js pins an explicit pixel height
   on the <details> while it animates, so the content must not spill out
   mid-animation; and it clips the panel to the rounded corners. */
.fx-accordion__item,
.fx-accordion > .wp-block-details {
  background-color: var(--fx-color-bg);
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-md);
  list-style: none;
  overflow: hidden;
  transition: border-color var(--fx-transition-fast), box-shadow var(--fx-transition-fast);
}

/* An open entry lifts slightly, so which one you are reading is obvious even
   when the answer is long enough to push the question off the top. */
.fx-accordion__item[open],
.fx-accordion > .wp-block-details[open] {
  border-color: var(--fx-color-border-strong);
  box-shadow: var(--fx-shadow-sm);
}

.fx-accordion__item > summary,
.fx-accordion > .wp-block-details > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fx-space-md);
  padding: 1.0625rem 1.25rem;
  font-family: var(--fx-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.35;
  color: var(--fx-color-heading);
  transition: background-color var(--fx-transition-fast);
}

.fx-accordion__item > summary:hover,
.fx-accordion > .wp-block-details > summary:hover {
  background-color: var(--fx-color-bg-alt);
}

.fx-accordion__item > summary::-webkit-details-marker,
.fx-accordion > .wp-block-details > summary::-webkit-details-marker {
  display: none;
}

/* Expand/collapse indicator, drawn in CSS rather than as markup so it works
   on the theme's own .fx-accordion__item entries AND on any core/details
   block an editor inserts, neither of which carries an icon element.

   Two bars painted as background gradients inside one disc: a horizontal bar
   that is always present, and a vertical bar that collapses to nothing when
   the panel opens. So the control reads "+" closed and "−" open, and the
   change animates. Before 1.8.0 it rotated a "+" character 45°, which
   produces a "×" rather than a minus.

   The disc arrived at 1.8.3, when the brief asked for the indicator to be
   clearer. It is the theme's fill-not-ink rule applied at icon scale: the
   bars are navy on a pale aqua ground, and the ground becomes brand cyan when
   open. A bare cyan glyph on white measures 1.95:1 and was not clear at all;
   see the rule at the top of tokens.css.

   background-size is animatable, so the transition survives, and the global
   prefers-reduced-motion rule in section 16 switches it off with everything
   else. */
.fx-accordion__item > summary::after,
.fx-accordion > .wp-block-details > summary::after {
  content: "";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--fx-color-brand-aqua);
  background-color: var(--fx-color-bg-tint);
  color: var(--fx-color-secondary);
  background-image:
    linear-gradient(to right, currentColor, currentColor),
    linear-gradient(to right, currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 12px 2px, 2px 12px;
  transition:
    background-size var(--fx-transition-fast),
    background-color var(--fx-transition-fast),
    border-color var(--fx-transition-fast);
}

.fx-accordion__item[open] > summary::after,
.fx-accordion > .wp-block-details[open] > summary::after {
  background-size: 12px 2px, 2px 0;
  background-color: var(--fx-color-primary);
  border-color: var(--fx-color-primary);
}

/* The answer. A hairline above it separates it from the question without
   adding a border to the summary, which would shift the layout by a pixel
   every time an entry opened. */
.fx-accordion__panel,
.fx-accordion > .wp-block-details > :not(summary) {
  padding: 1.125rem 1.25rem 1.25rem;
  border-top: 1px solid var(--fx-color-border);
  color: var(--fx-color-text-muted);
  line-height: 1.65;
}

.fx-accordion__panel p { margin-bottom: 0.75rem; }
.fx-accordion__panel p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   12b. FAQ page furniture
   ------------------------------------------------------------------------- */
.fx-faq__intro {
  color: var(--fx-color-text-muted);
  font-size: var(--fx-font-size-medium);
  max-width: 46rem;
  margin-inline: auto;
}

/* The closing "still have a question?" panel. Same card chrome as an
   accordion entry, so it reads as the end of the same list. */
.fx-faq__cta {
  margin-top: var(--fx-space-lg);
  padding: var(--fx-space-md);
  background-color: var(--fx-color-bg-alt);
  border: 1px solid var(--fx-color-border);
  border-radius: var(--fx-radius-md);
  text-align: center;
}

.fx-faq__cta h2 {
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
}

.fx-faq__cta p {
  color: var(--fx-color-text-muted);
  margin-bottom: var(--fx-space-sm);
}

.fx-faq__cta p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   13. Site footer
   -------------------------------------------------------------------------
   One strip since 1.13.6: logo, registered details, Company, Legal and the
   social buttons on a single row, with the disclaimer spanning the full width
   on row two of the same grid. Replaces a three-column block plus a separate
   ruled legal band, and roughly halves the footer's depth.
   ------------------------------------------------------------------------- */
.fx-footer {
  background-color: var(--fx-color-bg-dark);
  color: var(--fx-color-text-on-dark);
  padding-block: var(--fx-space-lg) var(--fx-space-md);
}

.fx-footer a { color: var(--fx-color-text-on-dark); }

.fx-footer__strip {
  display: grid;
  gap: var(--fx-space-md);
}

/* Five across only above 900px. The registered line needs about 340px before
   it reads badly and the three right-hand items need roughly 350px between
   them, so below this the strip becomes a single column rather than an
   awkward middle state. */
@media (min-width: 900px) {
  .fx-footer__strip {
    grid-template-columns: auto minmax(12rem, 1fr) max-content max-content max-content;
    align-items: start;
    column-gap: 2rem;
    row-gap: 0.75rem;
  }

  /* Company, Legal and the social buttons span both rows. Without this the
     first row is as tall as the Legal list, so the disclaimer starts about
     60px lower than the logo's bottom edge and leaves a dead gap under it.
     Spanning them means row one is sized by the logo and the registered line
     alone, and the disclaimer sits directly beneath those two.

     The trade-off: if the Legal list ever grows past the height of the left
     stack, the surplus is shared between the two rows and the gap starts to
     come back. Four links is fine; watch it beyond that.

     A wrapper element around the logo, registered line and disclaimer would
     be sturdier, but it would put the registered line under the logo instead
     of beside it, which is not the layout that was signed off. */
  .fx-footer__strip > .fx-footer__group,
  .fx-footer__strip > .fx-footer__social { grid-row: 1 / 3; }

  .fx-footer__disclaimer {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}

/* width:auto matters here. Without it the height clamps while the width stays
   at the img element's declared width, which squashed the logo into a 5:1 box
   for a 2:1 image. */
.fx-footer__logo img {
  max-height: 50px;
  width: auto;
}

.fx-footer__meta,
.fx-footer__disclaimer {
  margin: 0;
  font-size: var(--fx-font-size-small);
  color: #b7c2cf;
}

.fx-footer__heading {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--fx-space-xs);
}

.fx-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.fx-footer__list a { text-decoration: none; }
.fx-footer__list a:hover { text-decoration: underline; }

.fx-footer__social {
  display: flex;
  gap: var(--fx-space-sm);
}

/* flex:none is load-bearing. Without it the track can shrink below the two
   44px circles and they are clipped at the container edge. 44px stays: it is
   the touch target, not decoration. */
.fx-footer__social a {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  text-decoration: none;
}

/* -------------------------------------------------------------------------
   14. 404 / search
   ------------------------------------------------------------------------- */
.fx-error-page {
  text-align: center;
  padding-block: var(--fx-space-xl);
}

.fx-search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
}

/* -------------------------------------------------------------------------
   15. Utilities
   ------------------------------------------------------------------------- */
.fx-mt-0 { margin-top: 0; }
.fx-mb-0 { margin-bottom: 0; }
.fx-text-center { text-align: center; }

/* -------------------------------------------------------------------------
   16. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}