/* ============================================================
   10 — SUPPORT HERO
   Scope: .suph*   ·  every value resolves to a token
   ============================================================ */

.suph {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Top pad clears the 72px sticky bar, which has zero flow height. */
  padding-block: calc(var(--s-13) + var(--s-6)) var(--s-12);
  background: var(--surface-dark);
  color: var(--text-invert-body);
  text-align: center;
}

@media (min-width: 45em) {
  .suph { padding-block: calc(var(--s-14) + var(--s-2)) var(--s-13); }
}

/* Same layered wash the catalog hero uses, so the family reads. Static:
   this page is scanned, not landed on — ambient motion would be noise. */
.suph__bg {
  position: absolute;
  inset: -20% -10% -30%;
  z-index: -1;
  background:
    radial-gradient(40% 54% at 22% 20%, color-mix(in srgb, var(--c-brand) 40%, transparent), transparent 70%),
    radial-gradient(36% 48% at 80% 14%, color-mix(in srgb, var(--c-cyan) 24%, transparent), transparent 72%),
    radial-gradient(52% 60% at 58% 92%, color-mix(in srgb, var(--c-brand) 20%, transparent), transparent 74%),
    var(--grad-dark);
}

/* Diagonal foot, mirroring the homepage and catalog heroes. */
.suph::after {
  content: "";
  position: absolute;
  inset-inline: -2%;
  bottom: calc(var(--s-8) * -1);
  height: var(--s-11);
  background: var(--surface);
  transform: rotate(-1.6deg);
  transform-origin: bottom left;
}

.suph__inner { position: relative; z-index: 1; }

.suph__eyebrow { color: var(--c-teal); }

.suph__title {
  max-width: 20ch;
  margin: var(--s-4) auto 0;
  color: var(--text-invert);
}

.suph__lead {
  max-width: 56ch;
  margin: var(--s-6) auto 0;
  color: var(--text-invert-body);
}

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

.suph__search {
  --suph-field: calc(var(--s-9) + var(--s-2));   /* 56px */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  max-width: 34rem;
  margin: var(--s-9) auto 0;
  padding-inline: var(--s-5);
  min-height: var(--suph-field);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-lg);
  transition: box-shadow var(--t-base) var(--ease-out);
}

/* :focus-within, not :has() — universally supported, and the whole field
   is the affordance whether you tabbed into it or clicked it. */
.suph__search:focus-within {
  box-shadow: 0 0 0 2px var(--c-brand), var(--sh-xl);
}

.suph__glass {
  flex: none;
  width: var(--s-5);
  height: var(--s-5);
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease-out);
}
.suph__search:focus-within .suph__glass { color: var(--c-brand); }

.suph__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--suph-field);
  border: 0;
  background: none;
  color: var(--text-strong);
  font-size: var(--fs-body);
  text-align: start;
}
.suph__input::placeholder { color: var(--text-body); opacity: 1; }
/* The wrapper carries the focus ring; a second ring inside it reads as a bug. */
.suph__input:focus-visible { outline: none; }
/* Our own clear control is the one clear control. */
.suph__input::-webkit-search-cancel-button,
.suph__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.suph__clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px target, pulled into the field's own padding so the glyph still
     sits optically on the field's right edge. */
  width: calc(var(--s-9) - var(--s-1));
  height: calc(var(--s-9) - var(--s-1));
  margin-inline-end: calc(var(--s-3) * -1);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.suph__clear:hover { color: var(--text-strong); background: var(--surface-alt); }
.suph__clear svg { width: var(--s-5); height: var(--s-5); }
.suph__clear[hidden] { display: none; }

.suph__hint {
  margin: var(--s-5) auto 0;
  max-width: 44ch;
  font-size: var(--fs-sm);
  color: var(--text-invert-body);
}