/* ============================================================
   CORIO - FAQ PAGE STYLES
   -----------------------------------------------------------
   Loaded on top of assets/css/base.css.
   Section 5 (the accordion) is the same markup the home page uses,
   so both stay visually identical.
   ============================================================ */

/* ============================================================
   5. FAQ ACCORDION (shared with the home page)
============================================================ */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover{ border-color:var(--orange); }
.faq-item.open{ border-color:var(--orange); box-shadow:var(--shadow-sm); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; text-align:left; font-weight:700; font-size:15.5px; color:var(--ink);
  font-family:var(--font-body);
}
.faq-q:hover{ background:var(--orange-light); }
.faq-q i{ color:var(--orange); transition:transform .3s ease; flex-shrink:0; }
.faq-item.open .faq-q i{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 24px 20px; color:var(--ink-soft); font-size:15px; }
.faq-a-inner a{ color:var(--orange-deep); font-weight:700; }

/* ============================================================
   6. FAQ HERO + SEARCH
============================================================ */
.faq-hero{
  padding:60px 0 34px;
  background:
    radial-gradient(60% 50% at 85% 0%, var(--orange-glow), transparent 70%),
    linear-gradient(180deg, var(--cream), #FFFDF9);
  text-align:center;
}
.faq-hero h1{ font-size:clamp(32px,5vw,50px); margin:16px 0 14px; }
.faq-hero p{ color:var(--ink-soft); font-size:16px; max-width:640px; margin:0 auto; }

.faq-search{ position:relative; max-width:620px; margin:30px auto 0; }
.faq-search i{
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  color:var(--ink-soft); font-size:17px; pointer-events:none;
}
.faq-search input{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line);
  border-radius:var(--r-pill); padding:18px 56px 18px 52px;
  box-shadow:var(--shadow-sm); transition:border-color .18s ease, box-shadow .18s ease;
}
.faq-search input::placeholder{ color:#9c9c9c; }
.faq-search input:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 4px var(--orange-glow);
}
.faq-search .clear-search{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; display:none;
  align-items:center; justify-content:center;
  background:var(--orange-light); color:var(--orange-deep); font-size:13px;
}
.faq-search.has-value .clear-search{ display:flex; }
.faq-search .clear-search:hover{ background:var(--orange); color:#fff; }

/* ---- Category chips ---- */
.faq-cats{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:26px auto 0; max-width:900px;
}
.faq-cats button{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:14px; font-weight:700; color:var(--ink-soft);
  background:var(--white); border:1px solid var(--line);
  padding:10px 18px; border-radius:var(--r-pill);
  transition:all .2s ease;
}
.faq-cats button i{ color:var(--orange); }
.faq-cats button:hover{ border-color:var(--orange); color:var(--orange-deep); }
.faq-cats button.is-active{ background:var(--orange); border-color:var(--orange); color:#fff; }
.faq-cats button.is-active i{ color:#fff; }

/* ============================================================
   7. FAQ PAGE LAYOUT
============================================================ */
.faq-wrap{ padding:20px 0 96px; }
.faq-group{ margin-bottom:48px; scroll-margin-top:calc(var(--header-h) + 20px); }
.faq-group[hidden]{ display:none; }
.faq-group-head{
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.faq-group-head .ico{
  width:46px; height:46px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-light); color:var(--orange-deep); font-size:19px;
}
.faq-group-head h2{ font-size:24px; }
.faq-group-head .count{
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  background:var(--cream); border:1px solid var(--line);
  padding:4px 12px; border-radius:var(--r-pill);
}

.faq-empty{
  display:none; text-align:center; padding:60px 24px;
  background:var(--white); border:1px dashed var(--line); border-radius:var(--r-lg);
}
.faq-empty.show{ display:block; }
.faq-empty i{ font-size:34px; color:var(--orange); margin-bottom:14px; }
.faq-empty h3{ font-size:20px; margin-bottom:8px; }
.faq-empty p{ color:var(--ink-soft); font-size:15px; margin:0; }
.faq-empty a{ color:var(--orange-deep); font-weight:700; }

.faq-item.is-hidden{ display:none; }

/* ---- Still need help ---- */
.faq-help{
  margin-top:56px; padding:44px;
  background:linear-gradient(135deg,var(--ink),#3a2e26);
  border-radius:var(--r-lg); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.faq-help h2{ color:#fff; font-size:24px; margin-bottom:8px; }
.faq-help p{ color:rgba(255,255,255,.75); font-size:15px; margin:0; max-width:520px; }
.faq-help .links{ display:flex; gap:12px; flex-wrap:wrap; }
.faq-help .links a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:12px 22px; border-radius:var(--r-pill);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.faq-help .links a:hover{ background:var(--orange); border-color:transparent; transform:translateY(-2px); }
.faq-help .links a.solid{ background:var(--orange); border-color:var(--orange); }
.faq-help .links a.solid:hover{ background:var(--orange-deep); }

/* ---- Related shortcuts ---- */
.faq-shortcuts{ margin-top:40px; }
.faq-shortcuts .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px; }
.faq-shortcuts a{
  display:flex; align-items:center; gap:14px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px; transition:all .2s ease;
}
.faq-shortcuts a:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.faq-shortcuts a .ico{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-light); color:var(--orange-deep);
}
.faq-shortcuts strong{ display:block; font-size:15px; }
.faq-shortcuts span{ display:block; font-size:13px; color:var(--ink-soft); }

/* ============================================================
   8. RESPONSIVE
============================================================ */
@media (max-width:860px){
  .faq-shortcuts .grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .faq-hero{ padding:42px 0 26px; }
  .faq-wrap{ padding:12px 0 64px; }
  .faq-q{ padding:17px 18px; font-size:15px; }
  .faq-a-inner{ padding:0 18px 18px; }
  .faq-help{ padding:30px 22px; }
  .faq-help .links{ width:100%; }
  .faq-help .links a{ flex:1; justify-content:center; }
}