/* =====================================================================
   Help centre (/help-centre): ask, answer, then (only if needed) Lumie
   ===================================================================== */

/* ---------- 1. Ask ---------- */

.hc-ask { max-width: 860px; text-align: center; }
.hc-ask .lx-lede { margin: 16px auto 0; }

.hc-search {
  position: relative; display: flex; gap: 10px; margin: clamp(28px, 4vw, 40px) auto 0;
  padding: 8px; border-radius: var(--lx-radius);
  background: rgba(0, 0, 51, .7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(249, 192, 84, .45), 0 0 26px -4px rgba(249, 192, 84, .35), 0 20px 60px -30px rgba(204, 0, 102, .7);
}
.hc-search:focus-within { box-shadow: inset 0 0 0 2px var(--lx-gold), 0 0 34px -2px rgba(249, 192, 84, .5), 0 20px 60px -30px rgba(204, 0, 102, .8); }
.hc-search i { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); color: var(--lx-gold); font-size: 18px; pointer-events: none; }
.hc-search input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 16px 0 50px; border: 0; border-radius: var(--lx-btn-r);
  background: transparent; color: #fff; font: 500 clamp(1.0625rem, 1.8vw, 1.25rem)/1 var(--lx-font); letter-spacing: -0.01em;
}
.hc-search input::placeholder { color: var(--lx-ink-3); }
.hc-search input:focus { outline: none; }
.hc-search input::-webkit-search-cancel-button { filter: invert(1); }
.hc-search .lx-btn { min-height: 56px; padding: 0 26px; }

.hc-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.hc-topics a {
  padding: 9px 14px; border-radius: var(--lx-btn-r); text-decoration: none; font-size: 14px; font-weight: 500;
  color: var(--lx-ink); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--lx-line);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.hc-topics a:hover { background: var(--lx-gold); color: var(--lx-navy); box-shadow: none; }

.hc-venues { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin-top: 22px; font-size: 14px; }
.hc-venues span { color: var(--lx-ink-3); margin-right: 4px; }
.hc-venues a { padding: 6px 10px; border-radius: var(--lx-btn-r); color: var(--lx-ink-2); text-decoration: none; }
.hc-venues a:hover { color: #fff; }
.hc-venues a[aria-current="page"] { color: var(--lx-gold); box-shadow: inset 0 -2px 0 var(--lx-gold); border-radius: 0; }

.hc-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(28px, 4vw, 40px); text-align: left; }
.hc-job {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--lx-radius-sm);
  background: var(--lx-raise); color: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(249, 192, 84, .2);
  transition: box-shadow .3s var(--lx-ease), transform .3s var(--lx-ease);
}
.hc-job:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(249, 192, 84, .6), 0 0 28px -6px rgba(249, 192, 84, .4); }
.hc-job i { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--lx-btn-r); background: rgba(249, 192, 84, .14); color: var(--lx-gold); font-size: 19px; }
.hc-job strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.hc-job small { display: block; margin-top: 2px; font-size: 14px; color: var(--lx-ink-2); }
/* Phones: one search line (answers appear as you type; the keyboard's Search key submits),
   topics and trails as single swipeable rows, and the two jobs side by side */
@media (max-width: 640px) {
  .hc-search { padding: 6px; }
  .hc-search .lx-btn { display: none; }
  .hc-search i { left: 22px; }
  .hc-search input { min-height: 52px; padding-left: 46px; font-size: 1.0625rem; }

  .hc-topics, .hc-venues {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(var(--lx-gutter) * -1); margin-right: calc(var(--lx-gutter) * -1); padding: 2px var(--lx-gutter);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .hc-topics::-webkit-scrollbar, .hc-venues::-webkit-scrollbar { display: none; }
  .hc-topics { margin-top: 16px; }
  .hc-topics a { flex: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
  .hc-venues { margin-top: 14px; gap: 6px; }
  .hc-venues span { flex: none; }
  .hc-venues a { flex: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--lx-btn-r); box-shadow: inset 0 0 0 1px var(--lx-line); }
  .hc-venues a[aria-current="page"] { border-radius: var(--lx-btn-r); background: var(--lx-gold); color: var(--lx-navy); box-shadow: none; }

  .hc-jobs { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
  .hc-job { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px; }
  .hc-job i { width: 40px; height: 40px; font-size: 17px; }
  .hc-job strong { font-size: 15.5px; }
  .hc-job small { display: none; }
}

/* ---------- 2. Answers ---------- */

.hc-answers { max-width: 860px; }
.hc-group + .hc-group { margin-top: clamp(40px, 5vw, 56px); }
.hc-group > .lx-h3 { margin-bottom: 14px; }
.hc-results-count { font-weight: 600; color: var(--lx-paper-ink); margin-bottom: 14px; }
.hc-list, .hc-group { border-top: 1px solid var(--lx-paper-line); }
.hc-group > .lx-h3 { padding-top: 18px; }
.hc-item { border-bottom: 1px solid var(--lx-paper-line); }
.hc-more {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 0 18px; cursor: pointer;
  border: 1px solid var(--lx-paper-line); border-radius: var(--lx-btn-r); background: var(--lx-white);
  font: 600 15px/1 var(--lx-font); color: var(--lx-paper-ink);
}
.hc-more:hover { border-color: var(--lx-paper-ink-2); }
.hc-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 0;
  font: 600 1.125rem/1.35 var(--lx-font-display); letter-spacing: -0.015em; color: var(--lx-paper-ink);
}
.hc-item summary::-webkit-details-marker { display: none; }
.hc-item summary span { flex: 1; }
.hc-item summary small {
  flex: none; font: 600 12px/1 var(--lx-font); padding: 5px 8px; border-radius: var(--lx-btn-r);
  background: rgba(204, 0, 102, .08); color: var(--lx-link-light);
}
.hc-item summary::after { content: "+"; flex: none; font: 300 26px/1 var(--lx-font); color: var(--lx-paper-ink-2); transition: transform .3s var(--lx-ease); }
.hc-item[open] summary::after { transform: rotate(45deg); }
.hc-item summary:hover span { color: var(--lx-link-light); }
.hc-item .lx-faq-body { padding: 0 0 22px; }
.hc-item .lx-faq-body p + p { margin-top: 10px; }
.hc-results > p:last-child { margin-top: 20px; }
.hc-none { padding: 22px 0 6px; color: var(--lx-paper-ink-2); }
.hc-none p { max-width: 60ch; }
.hc-none .lx-actions { margin-top: 16px; }

.hc-pick ul { list-style: none; margin: 16px 0 0; padding: 0; }
.hc-pick li { border-bottom: 1px solid var(--lx-paper-line); }
.hc-pick a { display: flex; align-items: center; gap: 12px; padding: 16px 0; text-decoration: none; color: var(--lx-paper-ink); }
.hc-pick a strong { font-weight: 600; }
.hc-pick a span { margin-left: auto; font-size: 14px; color: var(--lx-paper-ink-2); }
.hc-pick a i { color: var(--lx-link-light); transition: transform .25s var(--lx-ease); }
.hc-pick a:hover strong { color: var(--lx-link-light); }
.hc-pick a:hover i { transform: translateX(3px); }
@media (max-width: 560px) { .hc-pick a span { display: none; } }

/* ---------- 3. Last resort ---------- */

.hc-last-head { text-align: center; }
.hc-last-head .lx-lede { margin: 14px auto 0; }
.hc-last-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 860px; margin: clamp(28px, 4vw, 40px) auto 0; }
.hc-last-option {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 14px 16px; align-items: center;
  padding: 22px; border-radius: var(--lx-radius); background: var(--lx-raise); color: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(249, 192, 84, .22);
  transition: box-shadow .3s var(--lx-ease), transform .3s var(--lx-ease);
}
.hc-last-option:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(249, 192, 84, .6), 0 0 30px -6px rgba(249, 192, 84, .4); }
.hc-last-option i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--lx-btn-r); background: rgba(249, 192, 84, .14); color: var(--lx-gold); font-size: 19px; }
.hc-last-option strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.hc-last-option small { display: block; margin-top: 2px; font-size: 14px; color: var(--lx-ink-2); overflow-wrap: anywhere; }
.hc-last-option .lx-btn { grid-column: 1 / -1; width: 100%; }
.hc-last.is-pointed .hc-last-option { box-shadow: 0 0 0 2px var(--lx-gold), 0 0 36px -4px rgba(249, 192, 84, .5); }
@media (max-width: 640px) { .hc-last-options { grid-template-columns: 1fr; } }