/* ===========================================================
   IJAR — FAQ page styles  (matches mockup 10-IJAR - FAQ)
   =========================================================== */

.fq-sec{padding:14px 0}
.fq-wrap{display:grid;grid-template-columns:1fr 330px;gap:30px;align-items:start}

/* hero title on one line + search bar */
.hero h1{font-size:34px;white-space:nowrap}
.hero-search{display:flex;max-width:560px;background:#fff;border-radius:6px;padding:4px;margin-top:20px;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.hero-search input{flex:1;border:0;outline:none;padding:9px 14px;font-family:var(--ff);font-size:14px;color:var(--text);background:transparent}
.hero-search button{background:var(--navy);color:#fff;border:0;border-radius:4px;width:46px;height:40px;display:grid;place-items:center;font-size:14px;cursor:pointer;transition:.2s}
.hero-search button:hover{background:var(--dark)}

/* category heading — plain navy glyph, gold line UNDER the icon */
.fq-cat{display:flex;align-items:center;gap:13px;margin:30px 0 18px}
.fq-cat:first-child{margin-top:0}
.fq-cat .ic{position:relative;color:var(--navy);font-size:24px;line-height:1;display:inline-flex;align-items:center;flex-shrink:0}
.fq-cat .ic::after{content:"";position:absolute;left:0;top:calc(100% + 6px);width:28px;height:3px;background:var(--gold);border-radius:2px}
.fq-cat h2{font-size:21px;font-weight:700;color:var(--navy);margin:0}

/* accordion — connected items in one container per section */
.fq-acc{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,26,77,.05)}
.fq-item{background:transparent;border:0;border-bottom:1px solid var(--border);margin:0;transition:.2s}
.fq-item:last-child{border-bottom:0}
.fq-item summary{list-style:none;cursor:pointer;padding:11px 20px;font-size:14.5px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:14px}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary::after{content:"\2b";font-family:"Font Awesome 6 Free";font-weight:900;font-size:13px;color:var(--navy);flex-shrink:0;transition:.2s}
.fq-item[open]{background:#eef4fc}
.fq-item[open] summary::after{content:"\f068"}
.fq-body{padding:0 20px 17px;font-size:13.5px;color:var(--text-2);line-height:1.7}

.fq-more{display:flex;justify-content:center;margin-top:24px}
.fq-more a{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.4px;padding:8px 26px;border-radius:7px;text-decoration:none;transition:.2s}
.fq-more a:hover{background:var(--dark)}

/* ---- sidebar ---- */
.fq-box{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:22px;box-shadow:0 2px 10px rgba(0,26,77,.05)}
.fq-box-h{background:var(--navy);color:#fff;font-size:16px;font-weight:700;padding:14px 18px}
.fq-links{list-style:none;margin:0;padding:6px 0}
.fq-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px;color:var(--text);font-size:14px;text-decoration:none;border-bottom:1px solid #f0f2f6;transition:.18s}
.fq-links li:last-child a{border-bottom:0}
.fq-links a .l{display:flex;align-items:center;gap:11px}
.fq-links a .l i{color:var(--navy);font-size:15px;width:18px;text-align:center}
.fq-links a .chev{color:var(--text-2);font-size:12px}
.fq-links a:hover{background:#f7f9fd;color:var(--navy)}

.fq-help{background:#FBF1D6;border:1px solid #F0DA92;border-radius:8px;padding:20px;text-align:left;margin-bottom:22px}
.fq-help h3{font-size:17px;color:var(--navy);margin:0 0 13px}
.fq-help-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.fq-help-row .ic{color:var(--navy);font-size:34px;line-height:1;flex-shrink:0}
.fq-help-row p{font-size:13px;color:var(--text);line-height:1.55;margin:0}
.fq-help a{display:block;width:fit-content;margin:0 auto;text-align:center;background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.4px;padding:9px 26px;border-radius:6px;text-decoration:none;transition:.2s}
.fq-help a:hover{background:var(--dark)}

.fq-cinfo{list-style:none;margin:0;padding:18px}
.fq-cinfo li{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.fq-cinfo li:last-child{margin-bottom:0}
.fq-cinfo .ic{width:38px;height:38px;border-radius:50%;background:rgba(0,43,127,.08);color:var(--navy);display:grid;place-items:center;font-size:14px;flex-shrink:0}
.fq-cinfo b{display:block;color:var(--navy);font-size:14px;font-weight:700;margin-bottom:3px}
.fq-cinfo span,.fq-cinfo a{display:block;font-size:13px;color:var(--text-2);line-height:1.55;text-decoration:none}
.fq-cinfo a:hover{color:var(--royal)}

/* stats bar */
.fq-stats{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;background:linear-gradient(135deg,#0a3072 0%,#001a4d 100%);border-radius:8px;padding:28px 18px;box-shadow:0 12px 30px rgba(0,26,77,.16)}
.fq-stat{display:flex;align-items:center;justify-content:center;gap:16px;color:#fff;position:relative}
.fq-stat:not(:first-child)::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:48px;background:rgba(255,255,255,.18)}
.fq-stat i{font-size:32px;flex-shrink:0}
.fq-stat b{font-size:25px;font-weight:500;display:block;line-height:1.1}
.fq-stat span{font-size:12.5px;color:rgba(255,255,255,.72)}

/* hero title: below the desktop two-column hero (≤992px) the .hero-copy
   column narrows, so the 34px nowrap string 'Frequently Asked Questions'
   would overflow the hero band. Allow wrapping + shrink slightly. Desktop
   (>992px, wide two-column) keeps the single-line 34px title unchanged. */
@media(max-width:992px){
  .hero h1{white-space:normal;font-size:30px}
}

@media(max-width:960px){
  .fq-wrap{grid-template-columns:1fr}
  .fq-stats{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .fq-stat:nth-child(3)::before{display:none}
}
@media(max-width:560px){.fq-stats{grid-template-columns:1fr}.fq-stat::before{display:none}}

/* ============================================================
   RESPONSIVE — faq-page.css
   Breakpoints: 768, 480, 360
   ============================================================ */

/* --- 768px -------------------------------------------------- */
@media(max-width:768px){
  /* hero search box full width */
  .hero-search{max-width:100%}

  /* hero title — allow wrapping (overrides whitespace:nowrap) */
  .hero h1{white-space:normal;font-size:26px}

  /* FAQ summary: long question text wraps, chevron stays on right */
  .fq-item summary{padding:11px 16px;font-size:14px;gap:10px}

  /* category headings */
  .fq-cat h2{font-size:18px}
  .fq-cat{gap:10px;margin:24px 0 14px}

  /* accordion body */
  .fq-body{padding:0 16px 14px;font-size:13px}

  /* sidebar contact info — long addresses wrap */
  .fq-cinfo span,.fq-cinfo a{word-break:break-word}

  /* help box */
  .fq-help{padding:16px}
  .fq-help h3{font-size:16px}
  .fq-help a{padding:8px 20px}

  /* stats */
  .fq-stat b{font-size:21px}
  .fq-stat i{font-size:26px}
}

/* --- 480px -------------------------------------------------- */
@media(max-width:480px){
  .fq-sec{padding:18px 0}

  /* hero title */
  .hero h1{font-size:22px}
  .hero-search input{font-size:13px}

  /* FAQ item summary — ensure tap target ≥40px */
  .fq-item summary{min-height:44px;padding:10px 14px;font-size:13.5px}

  /* category headings */
  .fq-cat h2{font-size:17px}

  /* stats compact */
  .fq-stat b{font-size:20px}
  .fq-stat i{font-size:24px}
  .fq-stats{padding:20px 12px}

  /* quick links: icon + text don't overflow */
  .fq-links a{padding:10px 14px;font-size:13.5px}

  /* load more button full width */
  .fq-more a{width:100%;justify-content:center}

  /* help-row icon doesn't push content out */
  .fq-help-row .ic{font-size:28px}
}

/* --- 360px -------------------------------------------------- */
@media(max-width:360px){
  .hero h1{font-size:20px}

  .fq-item summary{font-size:12.5px;padding:9px 12px}
  .fq-body{padding:0 12px 12px;font-size:12.5px}

  .fq-cat h2{font-size:15px}
  .fq-cat .ic{font-size:19px}

  .fq-links a{font-size:12.5px;padding:9px 12px}
  .fq-cinfo b{font-size:13px}
  .fq-cinfo span,.fq-cinfo a{font-size:12px}

  /* stat numbers */
  .fq-stat b{font-size:18px}
  .fq-stat i{font-size:21px}
  .fq-stats{padding:18px 10px}
}