/* =========================================================
   FAQs (/faqs) — Satphone dark theme.
   Two-column split following the Contact page:
     Left  = "FREQUENTLY / ASKED" hero + orange divider + return-home button.
     Right = grouped accordion of questions.
   Unlike Contact the right column is long, so the left hero is sticky and the
   questions scroll past it rather than both columns centring on one screen.
   Reuses the global --spc-* tokens from cart-drawer.css.
   ========================================================= */

.faqs-index-index .page-wrapper {
  padding-top: 74px; min-height: 100vh; box-sizing: border-box;
  background: var(--spc-bg); color: var(--spc-fg);
}

/* ---------- Full-viewport grid at page-main ---------- */
.faqs-index-index .page-main {
  max-width: none; width: 100%; margin: 0; padding: 0; color: var(--spc-fg);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  min-height: calc(100vh - 74px); align-items: start;
}
.faqs-index-index .page-main > a { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.faqs-index-index .page-main > .page.messages,
.faqs-index-index .page-main > .messages { grid-row: 1; grid-column: 1 / -1; margin: 0; }

/* ---------- LEFT: sticky title hero ---------- */
.faqs-index-index .page-title-wrapper {
  grid-row: 2; grid-column: 1; margin: 0; box-sizing: border-box;
  position: sticky; top: 74px; /* clears the fixed header */
  min-height: calc(100vh - 74px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 3rem clamp(2rem, 6vw, 6rem);
}
.faqs-index-index .page-title-wrapper .sp-login-hero {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.faqs-index-index .page-title-wrapper .page-title {
  margin: 0; color: var(--spc-fg);
  font-family: 'Barlow', system-ui, sans-serif; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 56px); font-weight: 600; letter-spacing: 2px; line-height: 1;
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px;
}
.faqs-index-index .page-title-wrapper .page-title .sp-title-word { display: block; }
.faqs-index-index .page-title-wrapper .page-title::after {
  content: ''; display: block; width: 88px; height: 4px; margin-top: 0; background: var(--spc-accent);
}

/* ---------- Return-home button under the divider ---------- */
.faqs-index-index .page-title-wrapper .sp-return-home {
  margin-top: 2rem; align-self: flex-start; width: auto;
}
.faqs-index-index .sp-return-home .sp-btn-arrow {
  font-size: 1.05em; line-height: 0; transition: transform .18s ease;
}
.faqs-index-index .sp-return-home:hover .sp-btn-arrow { transform: translate(-2px, 0); }

/* ---------- RIGHT: questions column ---------- */
.faqs-index-index .page-main > .columns {
  grid-row: 2; grid-column: 2; min-width: 0; box-sizing: border-box;
  border-left: 1px solid var(--spc-line);
  background: #0f1e34; /* lifts the questions off the page ground */
  display: flex; flex-direction: column; align-items: center;
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
  /* the border has to run the whole scroll height, not just the hero's screen */
  min-height: calc(100vh - 74px);
}
.faqs-index-index .columns,
.faqs-index-index .column.main { max-width: none; width: 100%; margin: 0; padding: 0; }
.faqs-index-index .sp-faqs { width: 100%; max-width: 560px; margin: 0 auto; }

/* ---------- Lede ---------- */
.faqs-index-index .sp-faqs-lede {
  margin: 0 0 2.5rem; color: var(--spc-muted);
  font-size: .92rem; line-height: 1.7; letter-spacing: .01em;
}

/* ---------- Group ---------- */
.faqs-index-index .sp-faq-group { margin: 0 0 2.75rem; }
.faqs-index-index .sp-faq-group-title {
  margin: 0 0 .35rem; color: var(--spc-muted);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
/* accent rule that ties the group heading to the list below it */
.faqs-index-index .sp-faq-group-title::after {
  content: ''; display: block; width: 28px; height: 2px; margin-top: .6rem;
  background: var(--spc-accent);
}

/* ---------- Item ---------- */
.faqs-index-index .sp-faq-item { border-bottom: 1px solid var(--spc-line); }
.faqs-index-index .sp-faq-item:first-of-type { border-top: 1px solid var(--spc-line); }

/* summary is the clickable question row; the native marker is replaced by the
   chevron span so it can be positioned and rotated */
.faqs-index-index .sp-faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  color: var(--spc-fg); font-size: .95rem; font-weight: 600; line-height: 1.5;
  transition: color .18s ease;
}
.faqs-index-index .sp-faq-q::-webkit-details-marker { display: none; }
.faqs-index-index .sp-faq-q:hover { color: var(--spc-accent); }
.faqs-index-index .sp-faq-q:focus-visible { outline: 1px solid var(--spc-accent); outline-offset: 4px; }
.faqs-index-index .sp-faq-item[open] > .sp-faq-q { color: var(--spc-accent); }

.faqs-index-index .sp-faq-ico {
  flex: 0 0 auto; line-height: 0; color: var(--spc-muted);
  margin-top: .15em; /* optically centres the chevron on the first text line */
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .18s ease;
}
.faqs-index-index .sp-faq-ico svg { width: 18px; height: 18px; display: block; }
.faqs-index-index .sp-faq-q:hover .sp-faq-ico,
.faqs-index-index .sp-faq-item[open] .sp-faq-ico { color: var(--spc-accent); }
.faqs-index-index .sp-faq-item[open] .sp-faq-ico { transform: rotate(180deg); }

/* ---------- Answer ----------
   Height is animated with grid-template-rows 0fr -> 1fr rather than max-height,
   so the panel travels exactly its own height with no guessed ceiling. The
   inner wrapper needs min-height:0 + overflow:hidden for the 0fr row to be able
   to clip it. js/faqs drives the open/close (a closed <details> hides its
   content outright, so CSS alone can't transition the first frame). */
.faqs-index-index .sp-faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.4, 0, .2, 1);
}
.faqs-index-index .sp-faq-item[open] .sp-faq-a { grid-template-rows: 1fr; }
.faqs-index-index .sp-faq-a-inner { min-height: 0; overflow: hidden; }
.faqs-index-index .sp-faq-a p {
  margin: 0 0 .9rem; color: var(--spc-muted);
  font-size: .89rem; line-height: 1.75; letter-spacing: .01em;
}
/* the padding lives on the last child so a closed panel collapses to true zero */
.faqs-index-index .sp-faq-a > .sp-faq-a-inner > :last-child { margin-bottom: 1.35rem; }

/* ---------- Inline link inside an answer ---------- */
.faqs-index-index .sp-faq-link {
  display: inline-flex; align-items: center; gap: .45em;
  color: var(--spc-accent); text-decoration: none;
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: border-color .18s ease;
}
.faqs-index-index .sp-faq-link:hover { border-bottom-color: var(--spc-accent); }
.faqs-index-index .sp-faq-link-arrow { font-size: 1.05em; line-height: 0; transition: transform .18s ease; }
.faqs-index-index .sp-faq-link:hover .sp-faq-link-arrow { transform: translate(2px, -2px); }

/* ---------- Closing CTA ---------- */
.faqs-index-index .sp-faqs-cta {
  margin-top: .5rem; padding: 1.75rem; box-sizing: border-box;
  background: var(--spc-bg-2); border: 1px solid var(--spc-line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
}
.faqs-index-index .sp-faqs-cta-text {
  margin: 0; color: var(--spc-fg);
  font-family: 'Barlow', system-ui, sans-serif; text-transform: uppercase;
  font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; line-height: 1.2;
}
.faqs-index-index .sp-faqs-cta-btn { align-self: flex-start; }

/* ---------- Responsive: stack ---------- */
@media (max-width: 860px) {
  .faqs-index-index .page-main { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .faqs-index-index .page-main > .page-title-wrapper {
    grid-row: auto; grid-column: 1; padding: 2.5rem 1.5rem 1.25rem;
    /* release the sticky hero — side by side is what made it worth pinning */
    position: static; min-height: 0;
  }
  .faqs-index-index .page-main > .columns {
    grid-row: auto; grid-column: 1; border-left: 0; border-top: 1px solid var(--spc-line);
    padding: 2rem 1.5rem 3rem; min-height: 0;
  }
  .faqs-index-index .sp-faqs { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faqs-index-index .sp-faq-a { transition: none; }
  .faqs-index-index .sp-faq-ico { transition: color .18s ease; }
}