/* ==========================================================================
   ShopFront — FAQ / help centre
   --------------------------------------------------------------------------
   Loaded by faq.html only. The chrome shared with about.html and
   contact.html — breadcrumb, page hero, page nav, placeholders, CTA band —
   lives in page.css, and the accordion itself (.faq-grid / .faq-item) is
   already in styles.css section 23. What follows is only what the help
   centre adds on top: the search field, the topic grid, the group headers
   and toolbar, the empty state, and the guide cards.

   Same rules as styles.css, and they are not negotiable:
     · no raw colour, no raw shadow, no off-grid spacing — tokens only;
     · logical properties throughout (dir="rtl", so inline-start = right);
     · the design is FLAT. Surfaces separate by border and tone.

   Contents
     01 · HERO SEARCH
     02 · TOPIC GRID
     03 · GROUPS & TOOLBAR
     04 · ACCORDION EXTENSIONS
     05 · EMPTY STATE
     06 · GUIDE CARDS
     07 · SUPPORT PANEL
     08 · RESPONSIVE
     09 · MOTION, CONTRAST, PRINT
   ========================================================================== */


/* ==========================================================================
   01 · HERO SEARCH
   --------------------------------------------------------------------------
   Deliberately not the header's .search combobox. That one searches the
   catalogue and returns products; this one filters the questions on this
   page and returns nothing at all if the page has no answer. Two different
   jobs, so two different controls — sharing the component would have made
   the header's suggestions appear over a page that cannot use them.
   ========================================================================== */

.faq-search {
  display: flex;
  gap: var(--gap-inline-sm);
  inline-size: 100%;
  max-inline-size: 44rem;
  margin-block-start: var(--space-2);
}

.faq-search__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  flex: 1 1 auto;
  min-inline-size: 0;
  padding-inline: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--fg-muted);
}

.faq-search__field > .icon {
  flex: none;
  font-size: var(--icon-md);
  color: var(--brand);
}

.faq-search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: var(--btn-height-lg);
  border: 0;
  background: none;
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
}
.faq-search__input::placeholder {
  color: var(--fg-subtle);
  font-weight: var(--weight-normal);
}
/* The field is the focus surface, not the bare input inside it. */
.faq-search__input:focus-visible {
  outline: none;
}
.faq-search__field:focus-within {
  box-shadow: var(--ring), 0 0 0 calc(var(--ring-width) + var(--ring-offset)) var(--ring-color-inverse);
}

/* An author `display` beats the UA's `[hidden] { display: none }`, so every
   element this page toggles with the attribute has to say so explicitly. */
.faq-search__clear[hidden] {
  display: none;
}

.faq-search__clear {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--space-8);
  block-size: var(--space-8);
  border-radius: var(--radius-circle);
  background: var(--bg-surface-3);
  color: var(--fg-muted);
  font-size: var(--icon-sm);
  transition: var(--transition-colors);
}
.faq-search__clear:hover {
  background: var(--bg-inset);
  color: var(--fg-default);
}

/* Popular questions, offered before anything is typed. */
.faq-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  font-size: var(--text-sm);
}

.faq-suggest > span {
  opacity: 0.85;
}

.faq-suggest button {
  padding: var(--space-1-5) var(--space-4);
  border: var(--border-hairline) solid var(--border-inverse);
  border-radius: var(--radius-pill);
  background: oklch(0 0 0 / 0.16);
  color: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.faq-suggest button:hover {
  background: oklch(0 0 0 / 0.28);
}


/* ==========================================================================
   02 · TOPIC GRID
   ========================================================================== */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: var(--transition-elevate), var(--transition-colors);
}
.topic-card:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

.topic-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-sm);
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

/* The count sits on the title row rather than under it: the cards are
   short, and a third line for one number stretched every card by 24px. */
.topic-card__count {
  flex: none;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  font-variant-numeric: tabular-nums;
}

.topic-card__text {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}


/* ==========================================================================
   03 · GROUPS & TOOLBAR
   ========================================================================== */

/* Every group is one .catalog child, so the vertical rhythm between them
   comes from --section-gap like every other section on the site. A group
   that the filter has emptied is hidden outright rather than left as a
   heading with nothing under it. */
.faq-group[hidden] {
  display: none;
}

.faq-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-md);
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
}

.faq-group__title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
}

.faq-group__count {
  margin-inline-start: auto;
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Sticky row above the groups: live result count on one side, the two
   bulk controls on the other. */
.faq-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  padding: var(--space-3) var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
}

.faq-toolbar__status {
  color: var(--fg-muted);
  font-size: var(--text-md);
}
.faq-toolbar__status b {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.faq-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.faq-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  min-block-size: var(--space-9);
  padding-inline: var(--space-4);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--fg-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.faq-toolbar__btn:hover {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}
.faq-toolbar__btn .icon {
  font-size: var(--icon-sm);
  color: var(--brand);
}


/* ==========================================================================
   04 · ACCORDION EXTENSIONS
   --------------------------------------------------------------------------
   .faq-item and .faq-item__q / __a come from styles.css. Only the parts the
   help centre adds are here: links and lists inside an answer, the
   cross-reference row that closes some answers, and the deep-link
   highlight.
   ========================================================================== */

.faq-item[hidden] {
  display: none;
}

.faq-item__a a {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: from-font;
}
.faq-item__a a:hover {
  color: var(--brand-hover);
}

.faq-item__list {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.faq-item__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-inline-sm);
  align-items: start;
}
.faq-item__list .icon {
  margin-block-start: 0.2em;
  color: var(--brand);
  font-size: var(--icon-sm);
}

/* Closing row of an answer: related links on one side, the two-button
   feedback control on the other. */
.faq-item__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-hairline) solid var(--border-subtle);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}

.faq-vote {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.faq-vote button {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  padding: var(--space-1) var(--space-3);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  transition: var(--transition-colors);
}
.faq-vote button:hover {
  border-color: var(--border-brand);
  color: var(--brand-text);
}
.faq-vote button[aria-pressed="true"] {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}
.faq-vote .icon {
  font-size: var(--icon-sm);
}

/* Landing from a deep link (faq.html#q-shipping-time). The brand border
   alone is the same cue an open item already carries, so the target also
   takes the subtle brand wash for a moment of orientation. */
.faq-item:target {
  border-color: var(--brand);
  background: var(--bg-brand-subtle);
}


/* ==========================================================================
   05 · EMPTY STATE
   ========================================================================== */

.faq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-14) var(--space-8);
  border: var(--border-thin) dashed var(--border-strong);
  border-radius: var(--card-radius);
  background: var(--bg-surface);
  text-align: center;
}

.faq-empty[hidden] {
  display: none;
}

.faq-empty__title {
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
}

.faq-empty__text {
  max-inline-size: 46ch;
  color: var(--fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
.faq-empty__text b {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}

.faq-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-inline-md);
}


/* ==========================================================================
   06 · GUIDE CARDS
   ========================================================================== */

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid-lg);
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  transition: var(--transition-elevate), var(--transition-colors);
}
.guide-card:hover {
  transform: translateY(var(--card-lift));
  border-color: var(--card-border-hover);
}

.guide-card__title {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.guide-card__text {
  color: var(--fg-muted);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.guide-card__go {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  color: var(--brand-text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
.guide-card:hover .guide-card__go .icon {
  transform: translateX(-4px);
}
.guide-card__go .icon {
  transition: var(--transition-transform);
}


/* ==========================================================================
   07 · SUPPORT PANEL
   --------------------------------------------------------------------------
   The last thing on the page: three ways to reach a human, on the dark
   panel so it reads as a different kind of offer from the answers above.
   ========================================================================== */

.support-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-12);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  color: var(--panel-fg);
}

.support-panel__title {
  color: inherit;
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.support-panel__text {
  margin-block-start: var(--space-3);
  color: inherit;
  opacity: 0.85;
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
}

.support-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-6);
}

.support-channels {
  display: grid;
  gap: var(--space-3);
}

.support-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-inline-md);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--border-inverse);
  border-radius: var(--radius-xl);
  background: oklch(0 0 0 / 0.16);
  color: inherit;
  transition: var(--transition-colors), var(--transition-transform);
}
.support-channel:hover {
  background: oklch(0 0 0 / 0.28);
  transform: translateX(-4px);
}

.support-channel .icon-tile {
  background: oklch(0 0 0 / 0.24);
  color: var(--brand-bright);
}

.support-channel b {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.support-channel span {
  display: block;
  opacity: 0.78;
  font-size: var(--text-sm);
}

.support-channel > .icon {
  opacity: 0.7;
}


/* ==========================================================================
   08 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1240px) {
  .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1150px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .support-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

@media (max-width: 800px) {
  .faq-search { flex-direction: column; }
  .faq-search .btn { inline-size: 100%; }

  .faq-toolbar {
    border-radius: var(--radius-xl);
    justify-content: flex-start;
  }
  .faq-toolbar__actions { inline-size: 100%; }
  .faq-toolbar__btn { flex: 1 1 auto; justify-content: center; }

  .support-panel {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-3xl);
  }
  .support-panel__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 540px) {
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-item__foot { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   09 · MOTION, CONTRAST, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .topic-card,
  .guide-card,
  .support-channel {
    transition: none;
  }
  .topic-card:hover,
  .guide-card:hover,
  .support-channel:hover {
    transform: none;
  }
  .guide-card:hover .guide-card__go .icon {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .topic-card,
  .guide-card,
  .faq-toolbar,
  .faq-empty {
    border-color: var(--fg-muted);
  }
}

@media print {
  /* Printing a help page means printing the answers, so every accordion is
     opened by app.js's beforeprint hook — but the controls that only work
     with a pointer have no business on paper. */
  .faq-search,
  .faq-suggest,
  .faq-toolbar,
  .faq-vote,
  .support-panel__actions {
    display: none;
  }
  .support-panel {
    background: none;
    color: #000;
    border: 1px solid #000;
  }
}