/* =========================================================================
   faqs.html — page-specific styles
   Load AFTER css/site.css. This page has its own look (Playfair Display /
   Plus Jakarta Sans, softer muted text, rounder corners), so the first block
   re-applies its values on top of the shared defaults.
   ========================================================================= */

:root{
  --bg-surface:#17120c;
  --muted:#b8aba0;
  --line:rgba(243,236,222,.1);
  --radius:12px;
  --display:'Playfair Display',serif;
  --body:'Plus Jakarta Sans',sans-serif;
}

*{margin:0;padding:0;}

body{
  overflow-x:hidden;
  -webkit-font-smoothing:auto;
}
body.menu-open{overflow:hidden;}

button,input{font-family:inherit;}

section{position:static;}  /* site.css makes every section position:relative; this page's weren't */

.wrap{
  width:100%;
  padding:0 24px;
}

/* site.css turns every .fa-solid into a 1em mask icon and only defines four shapes
   (arrow-right, chevron-down, xmark, music). Every other icon on this page is a
   normal Font Awesome glyph, so undo the mask for them. :where() keeps this at
   single-class specificity so the page's own icon rules (e.g. flex:none) still win. */
.fa-solid:where(:not(.fa-arrow-right, .fa-chevron-down, .fa-xmark, .fa-music)){
  width:auto;
  height:auto;
  background-color:transparent;
  -webkit-mask-image:none;
  mask-image:none;
  vertical-align:baseline;
  flex:0 1 auto;
}

/* ================================================================
   FAQ PAGE
   ================================================================ */

.fq-hero {
  position: relative;
  padding: 100px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(227,161,61,.2),
      transparent 65%
    );
}

.fq-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;

  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(255,90,54,.1),
      transparent 45%
    ),
    radial-gradient(
      circle at 88% 15%,
      rgba(201,182,255,.1),
      transparent 45%
    );
}

.eyebrow {
  position: relative;
  font: 12px ui-monospace, monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
  display: inline-block;
}

.fq-hero h1 {
  position: relative;
  font-family: var(--display);
  font-size: clamp(38px,6vw,64px);
  font-weight: 600;
  margin-bottom: 18px;

  background:
    linear-gradient(
      90deg,
      var(--cream),
      var(--gold-soft) 50%,
      var(--cream)
    );

  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: titleshine 6s linear infinite;
}

@keyframes titleshine {
  to {
    background-position: -200% 0;
  }
}

.fq-hero p {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  color: var(--muted);
  font-weight: 300;
}


/* Search */

.fq-search-wrap {
  position: relative;
  max-width: 560px;
  margin: 34px auto 0;
}

.fq-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(23,18,12,.7);
  border: 1px solid var(--line-strong);
  border-radius: 9999px;
  padding: 15px 24px;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.fq-search:focus-within {
  border-color: var(--gold);
  box-shadow:
    0 0 0 4px rgba(227,161,61,.12);
}

.fq-search i {
  color: var(--gold-soft);
  font-size: 15px;
  flex: none;
}

.fq-search input {
  flex: 1;
  background: none;
  border: 0;
  outline: 0;
  color: var(--cream);
  font: inherit;
  font-size: 15px;
  min-width: 0;
}

.fq-search input::placeholder {
  color: var(--muted);
}

.fq-no-results {
  display: none;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  padding: 30px 0 10px;
}

.fq-no-results.show {
  display: block;
}


/* Category filters */

.fq-filters {
  padding: 44px 0 0;
}

.fq-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 920px;
  margin: 0 auto;
}

.fq-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1px solid var(--line-strong);
  background: rgba(243,236,222,.02);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
}

.fq-pill i {
  font-size: 12px;
}

.fq-pill:hover {
  color: var(--cream);
  border-color: var(--gold-soft);
}

.fq-pill.active {

  color: #1B1206;
  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--rust)
    );
  border-color: transparent;
  box-shadow:
    0 0 18px rgba(227,161,61,.35);
}


/* FAQ groups */

.fq-body {
  padding: 60px 0 100px;
}

.fq-group {
  max-width: 800px;
  margin: 0 auto 54px;
}

.fq-group:last-child {
  margin-bottom: 0;
}

.fq-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.fq-group-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: #1B1206;
  background:
    linear-gradient(
      135deg,
      var(--gold),
      var(--rust)
    );
  box-shadow:
    0 0 16px rgba(227,161,61,.35);
}

.fq-group-head h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(23,18,12,.5);
  overflow: hidden;
  transition: border-color .25s ease;
}

.faq-item[open] {
  border-color: rgba(227,161,61,.4);
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--cream);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary i {
  flex: none;
  color: var(--gold);
  transition: transform .3s ease;
}

.faq-item[open] summary i {
  transform: rotate(45deg);
}

.faq-item .faq-answer {
  padding: 0 24px 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.faq-item .faq-answer a {
  color: var(--gold-soft);
  text-decoration: underline;
}


/* Still have questions */

.fq-help {
  padding: 0 0 110px;
}

.fq-help-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  padding: 38px 40px;
  background: rgba(243,236,222,.02);
}

.fq-help-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 280px;
}

.fq-help-icon {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  color: #1B1206;
  background:
    linear-gradient(
      135deg,
      var(--gold),
      var(--rust)
    );
  box-shadow:
    0 0 20px rgba(227,161,61,.35);
}

.fq-help-left h3 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 4px;
}

.fq-help-left p {
  color: var(--muted);
  font-size: 14.5px;
}

.fq-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.fq-help-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 9999px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gold-soft);
  border: 1px solid var(--line-strong);
  transition: all .25s ease;
}

.fq-help-link:hover {
  color: #1B1206;
  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--rust)
    );
  border-color: transparent;
}

.fq-help-link.solid {
  color: #1B1206;
  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--rust)
    );
  border-color: transparent;
}


/* CTA */

.fq-cta {
  padding: 0 0 110px;
  text-align: center;
}

.cta-box {
  background:
    linear-gradient(
      135deg,
      rgba(23,18,12,.95),
      rgba(35,26,17,.95)
    );
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 60px 40px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.5);
}

.cta-box h2 {
  font-family: var(--display);
  font-size: clamp(28px,4vw,40px);
  margin-bottom: 16px;
}

.cta-box p {
  max-width: 600px;
  margin: 0 auto 30px;
  color: var(--muted);
  font-size: 16.5px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 700;
  color: #1B1206;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      #FF5A36,
      var(--rust),
      var(--gold)
    ) 0 0/300% 100%;

  box-shadow:
    0 0 25px rgba(227,161,61,.4);

  transition:
    transform .25s ease;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
}


/* Responsive FAQ */

@media (max-width: 640px) {

  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  .brand {
    gap: 8px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand-text strong {
    font-size: 17px;
  }

  .brand-text small {
    font-size: 10px;
  }

  .eq {
    display: none;
  }

  .fq-hero {
    padding: 75px 0 45px;
  }

  .fq-hero p {
    font-size: 16px;
  }

  .fq-filters {
    padding-top: 30px;
  }

  .fq-pill-row {
    justify-content: flex-start;
  }

  .fq-pill {
    padding: 9px 14px;
    font-size: 12.5px;
  }

  .fq-body {
    padding: 45px 0 70px;
  }

  .fq-group {
    margin-bottom: 42px;
  }

  .fq-group-head h2 {
    font-size: 19px;
  }

  .faq-item summary {
    padding: 17px 18px;
    font-size: 15.5px;
  }

  .faq-item .faq-answer {
    padding: 0 18px 19px;
    font-size: 14px;
  }

  .fq-help {
    padding-bottom: 70px;
  }

  .fq-help-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
  }

  .fq-help-left {
    min-width: 0;
  }

  .fq-help-actions {
    width: 100%;
  }

  .fq-help-link {
    flex: 1;
    justify-content: center;
  }

  .cta-box {
    padding: 45px 24px;
  }

  .fq-cta {
    padding-bottom: 70px;
  }

  .footer-links {
    gap: 12px 18px;
  }
}