/* ================= FAQ / HELP CENTER PAGE ================= */
/* Loads after styles.css — reuses the same CSS variables (--navy, --gold, etc.) */

/* ---------- Nav Active Highlighting ------------- */
.nav-links a.active{
  color: var(--gold);
  font-weight:600;
}
.nav-links a.active::after{
  width:100%;
  background:var(--gold);
}

/* ---------- PAGE HERO ---------- */
.page-hero{
  padding:72px 0 44px;
  background:linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:var(--warm-white);
}
.page-hero .eyebrow{color:var(--gold-soft);}
.page-hero h1{
  color:var(--warm-white);
  font-size:clamp(30px,4vw,44px);
  margin-top:14px;
  max-width:640px;
}
.page-hero p.sub{
  color:rgba(250,250,248,0.65);
  font-size:16px;
  margin-top:16px;
  max-width:600px;
}

/* ---------- SEARCH BAR ---------- */
.faq-search{
  position:relative;
  max-width:560px;
  margin-top:32px;
  display:flex;
  align-items:center;
  background:rgba(250,250,248,0.06);
  border:1px solid rgba(250,250,248,0.18);
  border-radius:8px;
  padding:0 16px;
  transition:border-color 0.25s ease, background 0.25s ease;
}
.faq-search:focus-within{
  border-color:var(--gold);
  background:rgba(250,250,248,0.09);
}
.faq-search-icon{flex-shrink:0;}
.faq-search input[type="search"]{
  flex:1;
  border:none;
  background:none;
  outline:none;
  color:var(--warm-white);
  font-family:'Inter';
  font-size:15px;
  padding:15px 12px;
}
.faq-search input[type="search"]::placeholder{color:rgba(250,250,248,0.42);}
/* Remove native search-field chrome (webkit) so our custom clear button is the only control */
.faq-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;}
.faq-search-clear{
  flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  background:var(--warm-white);
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.15s ease;
}
.faq-search-clear:hover{transform:scale(1.08);}
.faq-search-meta{
  margin-top:14px;
  font-family:'Manrope'; font-size:13px; font-weight:600;
  color:rgba(250,250,248,0.55);
  min-height:1.4em;
}

/* ---------- QUICK-JUMP CONTENTS ---------- */
.toc{
  background:var(--warm-white);
  border-bottom:1px solid var(--line);
  position:sticky; top:78px; z-index:90;
}
.toc .wrap{
  display:flex; gap:28px; flex-wrap:wrap;
  padding:16px 32px; justify-content:center;
}
.toc a{
  font-family:'Manrope', sans-serif;
  font-size:15px; font-weight:600;
  color:var(--charcoal-soft);
  white-space:nowrap;
  transition:color 0.25s ease;
}
.toc a:hover{color:var(--gold);}
.toc a.active{color:var(--gold);}

/* ---------- SECTION LABELING ---------- */
.section-num{
  font-family:'Manrope'; font-weight:800; font-size:13px;
  color:var(--gold); letter-spacing:0.08em; margin-bottom:8px; display:block;
}
.faq-section{border-bottom:1px solid var(--line);}
.faq-section:last-of-type{border-bottom:none;}

/* ---------- CATEGORY OVERVIEW CARDS ---------- */
.faq-overview{padding-top:56px;}
.faq-cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.faq-cat-card{
  background:var(--warm-white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  display:flex; flex-direction:column;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.faq-cat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(13,27,61,0.18);
  border-color:transparent;
}
.faq-cat-icon{
  width:42px; height:42px; border-radius:8px;
  background:var(--ivory); display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.faq-cat-card h3{font-size:15.5px; margin-bottom:8px; line-height:1.3;}
.faq-cat-card p{color:var(--charcoal-soft); font-size:13px; margin-bottom:18px; flex-grow:1;}
.faq-cat-count{
  font-family:'Manrope'; font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--sage);
}

/* ---------- NO RESULTS ---------- */
.faq-no-results{margin:0 auto 8px;}
.faq-no-results .doc-text a{color:var(--navy); font-weight:600; text-decoration:underline;}

/* Document placeholder card (shared visual language with compliance.html) */
.doc-placeholder{
  border:1.5px dashed var(--pale-blue);
  border-radius:var(--radius);
  padding:26px 28px;
  display:flex; align-items:center; gap:18px;
  background:rgba(198,210,222,0.12);
  margin:36px 0;
}
.doc-placeholder .doc-icon{
  width:42px; height:42px; border-radius:8px; background:var(--warm-white);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.doc-placeholder .doc-text strong{display:block; color:var(--navy); font-family:'Manrope'; font-size:14.5px; margin-bottom:4px;}
.doc-placeholder .doc-text span{font-size:13.5px; color:var(--charcoal-soft);}

/* ---------- FAQ ACCORDION ---------- */
.faq-list{
  max-width:820px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--warm-white);
  overflow:hidden;
}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:none;}

.faq-question{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  text-align:left;
  background:none; border:none; cursor:pointer;
  padding:20px 26px;
  font-family:'Manrope'; font-weight:600; font-size:15px;
  color:var(--navy);
  transition:background 0.2s ease;
}
.faq-question:hover{background:var(--ivory);}
.faq-question:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}

/* Plus/minus icon, drawn with CSS (consistent with the site's other hand-drawn icons) */
.faq-icon{
  position:relative;
  width:16px; height:16px;
  flex-shrink:0;
}
.faq-icon::before, .faq-icon::after{
  content:''; position:absolute; background:var(--gold);
  border-radius:2px; transition:transform 0.25s ease;
}
.faq-icon::before{top:50%; left:0; width:100%; height:2px; margin-top:-1px;}
.faq-icon::after{left:50%; top:0; height:100%; width:2px; margin-left:-1px;}
.faq-item.open .faq-icon::after{transform:rotate(90deg); opacity:0;}

.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.3s ease;
}
.faq-answer > div{overflow:hidden;}
.faq-item.open .faq-answer{grid-template-rows:1fr;}
.faq-answer p{
  padding:0 26px 22px;
  font-size:14.5px; color:var(--charcoal-soft);
  max-width:640px;
}
.faq-answer p.placeholder{font-style:italic;}
.faq-answer a{color:var(--navy); font-weight:600; text-decoration:underline;}

/* Search filtering hides non-matching items/categories without removing them from the DOM */
.faq-item[hidden]{display:none;}
.faq-section[hidden]{display:none;}
.faq-list[data-empty="true"]{display:none;}

/* ---------- SCROLL REVEAL (matches script.js .reveal / .in) ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .faq-cat-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:980px){
  .toc .wrap{
    padding:14px 32px;
    gap:18px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    justify-content:flex-start;
  }
  .toc .wrap::-webkit-scrollbar{display:none;}
  .toc a{flex-shrink:0;}
  section{padding:56px 0;}
}
@media (max-width:720px){
  .faq-cat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .faq-cat-grid{grid-template-columns:1fr;}
  .faq-question{padding:16px 18px; font-size:14.5px;}
  .faq-answer p{padding:0 18px 18px;}
  .faq-search input[type="search"]{font-size:14px;}
}