/* ==========================================================================
   EmailHelp — FAQ page styles (css/pages/faq.css)
   Only FAQ-specific rules live here: the hero search, sticky category pills,
   grouped accordion layout, the desktop side rail and the "no results" state.
   Everything else comes from css/style.css.
   ========================================================================== */

:root {
  --faq-subnav-h: 60px;
  --faq-anchor-pad: 0px;   /* main.js now offsets anchors by header + sticky sub-nav; kept as a tuning hook */
}

/* --------------------------------------------------------------------------
   Hero: search box, live hint, "popular" chips, trust row
   -------------------------------------------------------------------------- */
.page-hero--faq { padding-bottom: clamp(44px, 6vw, 64px); }
.page-hero--faq .page-hero__content { max-width: 820px; }
.page-hero--faq .lead { max-width: 640px; }

.faq-hero__search {
  max-width: 640px;
  margin: 34px auto 12px;
}
.faq-hero__search .icon { left: 20px; }
.faq-hero__search input {
  height: 58px;
  padding-left: 52px;
  font-size: 1.02rem;
  border-color: transparent;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);
}
.faq-hero__search input:focus {
  border-color: transparent;
  box-shadow: var(--ring), 0 24px 60px -24px rgba(0, 0, 0, .75);
}
/* The box is white, but it sits in the dark hero where the text tokens resolve to their light values —
   pin the typed text, caret, placeholder and icon to explicit light-surface colours so input stays legible. */
.page-hero .faq-hero__search input {
  color: #0F172A;
  -webkit-text-fill-color: #0F172A;
  caret-color: var(--primary-600);
}
.page-hero .faq-hero__search input::placeholder { color: #5B6B84; -webkit-text-fill-color: #5B6B84; opacity: 1; }
.page-hero .faq-hero__search .icon { color: #5B6B84; }
.faq-hero__search input::-webkit-search-cancel-button { cursor: pointer; }

.faq-hero__hint {
  margin: 0 0 18px;
  min-height: 1.5em;
  font-size: .88rem;
  color: var(--text-muted-dark);
}

.faq-hero__try {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
}
.faq-hero__try-label {
  margin-right: 4px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.faq-hero__try button {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: .85rem;
  font-weight: 500;
  color: #E2E8F0;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.faq-hero__try button:hover {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-1px);
}
.faq-hero__try button:focus-visible { outline: none; box-shadow: var(--ring); }

.page-hero--faq .hero__trust {
  justify-content: center;
  color: var(--text-muted-dark);
}

/* --------------------------------------------------------------------------
   Sticky category pills (the shared .subnav, tuned for six labelled chips)
   -------------------------------------------------------------------------- */
.faq-subnav .subnav__list {
  justify-content: center;
  gap: 6px;
  padding: 11px 0;
}
.faq-subnav .subnav__list a {
  gap: 8px;
  height: 38px;
  padding: 0 15px;
}
.faq-subnav .subnav__list a .icon { width: 17px; height: 17px; opacity: .75; transition: opacity var(--dur-fast) ease; }
.faq-subnav .subnav__list a:hover .icon,
.faq-subnav .subnav__list a[aria-current="true"] .icon { opacity: 1; }
.faq-subnav .subnav__list a:focus-visible { outline: none; box-shadow: var(--ring); }

/* Narrow viewports: the row scrolls sideways; a fade on the right edge signals there is more,
   and the trailing padding lets the last pill scroll clear of the fade. */
@media (max-width: 900px) {
  .faq-subnav .subnav__list {
    justify-content: flex-start;
    padding-right: 48px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
}
@media (max-width: 720px) {
  :root { --faq-subnav-h: 54px; }
  .faq-subnav .subnav__list { padding: 9px 0; padding-right: 48px; }
  .faq-subnav .subnav__list a { height: 36px; font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   Layout: single reading column, plus a sticky side rail on wide screens
   -------------------------------------------------------------------------- */
.faq-section { padding-top: clamp(48px, 6vw, 72px); }
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  max-width: 860px;
  margin-inline: auto;
}
.faq-main { min-width: 0; }
.faq-aside { display: none; }

@media (min-width: 1100px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 56px;
    max-width: none;
  }
  .faq-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: calc(var(--header-h) + var(--faq-subnav-h) + 24px);
  }
}

/* --------------------------------------------------------------------------
   Grouped accordion
   -------------------------------------------------------------------------- */
#faq-list.faq { gap: 0; }
.faq__group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(48px, 6vw, 76px);
}
.faq__group:last-child { margin-bottom: 0; }
.faq__group[hidden] { display: none; }   /* search with no match in this group (display:flex above would beat the UA [hidden] rule) */

/* Anchor target for the sticky pills: the group head carries the id. Its box starts (sticky bar + 12px) above
   its content, so main.js's header-only scroll offset lands the title just below the bar while the visible
   position is unchanged. The empty padding overlaps the previous group's margin, so it must not catch clicks.
   Being a real element with text, it is also a meaningful focus target for keyboard / screen-reader users. */
.faq__group-head {
  margin-bottom: 6px;
  padding-top: var(--faq-anchor-pad);
  margin-top: calc(-1 * var(--faq-anchor-pad));
  pointer-events: none;
  outline: none;
}
.faq__group-head > * { pointer-events: auto; }
.faq__group-head:focus-visible .faq__group-title { border-radius: 8px; box-shadow: var(--ring); }
.faq__group-title {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  letter-spacing: -.015em;
}
.faq__group-lead {
  margin: 0;
  padding-left: 52px;          /* aligns with the title text (40px icon tile + 12px gap) */
  max-width: 620px;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--text-muted);
}
/* A collapsed answer still keeps an ~18px row and its inner box is shifted up 4px into the question button
   (shared .faq__a rules), so the hidden paragraph catches clicks along the button's bottom edge. Let those
   clicks reach the button instead; nothing in a closed answer is meant to be interactive anyway. */
.faq__item:not(.is-open) .faq__a { pointer-events: none; }
.faq__a-inner strong { color: var(--text); font-weight: 600; }
.faq__a-inner ol { padding-left: 1.3em; }
.faq__a-inner li { padding-left: .15em; }

/* --------------------------------------------------------------------------
   "No results" state (toggled by main.js via [data-faq-empty])
   -------------------------------------------------------------------------- */
.faq-empty {
  margin-top: 4px;
  padding: 48px 24px 44px;
  background: var(--bg-2);
  border: 1px dashed var(--border-strong);
}
.faq-empty .icon-tile { margin: 0 auto 16px; }
.faq-empty h3 { margin: 0 0 8px; font-size: 1.25rem; color: var(--text); }
.faq-empty p { max-width: 480px; margin: 0 auto 22px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Side rail (≥1100px only): specialist card + related pages
   -------------------------------------------------------------------------- */
.faq-aside__card { gap: 14px; }
.faq-aside__agent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.faq-aside__agent > div { min-width: 0; }
.faq-aside__name {
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.3;
  color: var(--text);
}
.faq-aside__role {
  margin-top: 1px;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.faq-aside__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .8rem;
  color: var(--text-muted);
}
.faq-aside__card h3 { font-size: 1.3rem; margin: 2px 0 0; }
.faq-aside__card p { font-size: .95rem; line-height: 1.6; }
.faq-aside__card .btn { margin-top: 4px; }
.faq-aside__email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
}
.faq-aside__email .icon { width: 18px; height: 18px; color: var(--primary); }
.faq-aside__email:hover { color: var(--primary-600); }
.faq-aside__card .faq-aside__hours {
  margin: -4px 0 0;
  text-align: center;
  font-size: .78rem;
  line-height: 1.5;
}

.faq-aside__links .card__title { margin: 0; font-size: 1rem; }
.faq-aside__links ul { list-style: none; margin: 0; padding: 0; }
.faq-aside__links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text);
  transition: color var(--dur-fast) ease;
}
.faq-aside__links li:first-child a { border-top: 0; padding-top: 4px; }
.faq-aside__links li:last-child a { padding-bottom: 2px; }
.faq-aside__links li a .icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}
.faq-aside__links li a:hover { color: var(--primary-600); }
.faq-aside__links li a:hover .icon { transform: translateX(3px); color: var(--primary); }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .faq-hero__search { margin-top: 28px; }
  .faq-hero__search input { height: 54px; font-size: .98rem; }
  .faq-hero__try { margin-bottom: 22px; }
  .faq__group { gap: 10px; }
  .faq__group-lead { padding-left: 0; }
  .faq-empty { padding: 36px 18px 32px; }
}
@media (max-width: 480px) {
  .faq-hero__try-label { flex-basis: 100%; text-align: center; margin: 0 0 2px; }
  .faq-empty .btn-group { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   Reduced motion / screenshot mode
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq-hero__try button,
  .faq-aside__links li a .icon { transition: none; }
  .faq-hero__try button:hover { transform: none; }
}
html.is-shot .faq-aside__status .pill__dot::after { display: none; }