/* =============================================================
   Hotel The Black Gold — page-faqs.css
   Page-specific styles for faqs.html only.
   Loaded after global.css.
   Only component: the section jump-nav (.faq-jump).
   ============================================================= */

/* ── Section jump-nav ───────────────────────────────────────── */
/* A chip row linking to each of the 8 FAQ sections. Sticks below
   the header on scroll so guests can jump topics from anywhere. */
.faq-jump {
  position: sticky;
  top: 64px;                /* clears the sticky header */
  z-index: 50;
  background: rgba(17, 17, 17, .92);
  backdrop-filter: saturate(120%) blur(8px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.faq-jump-label {
  margin: 0 0 8px;
  font-family: var(--font-heading, Montserrat), sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--gold);
}

.faq-jump-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faq-jump-list li { margin: 0 }

.faq-jump-list a {
  display: inline-block;
  padding: .4rem .8rem;
  border: 1px solid #646464;
  border-radius: 999px;
  font-size: .88rem;
  color: #e9e9e9;
  white-space: nowrap;
  transition: filter .2s, border-color .2s, color .2s;
}

.faq-jump-list a:hover,
.faq-jump-list a:focus {
  color: var(--gold);
  border-color: var(--gold);
  filter: brightness(1.08);
}

/* Offset anchor scroll so section headings clear the sticky
   header + jump-nav when a chip is tapped. */
[id^="faq-"] { scroll-margin-top: 150px }

/* On small screens the jump-nav can get tall — let it scroll
   horizontally instead of stacking into a wall of chips. */
@media (max-width: 600px) {
  .faq-jump {
    top: 56px;
  }
  .faq-jump-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
}