/* ─── FAQ START ─────────────────────────────── */

:root{
  --brand:#003dff;
  --brand-dk:#a01f24;
  --brand-lt:#eef8ff;;
  --ink:#1a1a1a;
  --ink2:#555;
  --ink3:#888;
  --border:#e8e8e8;
  --bg:#fff;
  --sidebar-w:270px;
  --radius:10px;
  font-size:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
 
/* ─── TOP NAV ─────────────────────────────── */
.top-nav{
  position:sticky;top:0;z-index:200;
  background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:64px;
  box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo-mark{
  width:36px;height:36px;border-radius:8px;
  background:var(--brand);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1rem;letter-spacing:-.02em;
}
.logo-text{font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.logo-text span{color:var(--brand)}
.nav-links{display:flex;gap:28px}
.nav-links a{text-decoration:none;font-size:.82rem;font-weight:500;color:var(--ink2);letter-spacing:.01em;transition:color .18s}
.nav-links a:hover{color:var(--brand)}
.nav-cta{
  background:var(--brand);color:#fff;
  font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:9px 22px;border-radius:6px;text-decoration:none;
  transition:background .18s;
}
.nav-cta:hover{background:var(--brand-dk)}
 
/* ─── HERO ────────────────────────────────── */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)), url(https://www.macawpaints.com/theme/cms/assets/images/faq_banner.png) center / cover no-repeat;
    z-index: 0;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
}

.hero {
    position: relative;
    min-height: 44vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--brand-dark);
    padding: 40px;
}

.hero_mobile {
    position: relative;
    min-height: 44vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--brand-dark);
    padding: 40px;
}


.hero_mobile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)), url(https://www.macawpaints.com/theme/cms/assets/images/faq_mobile_banner.png) center / cover no-repeat;
    z-index: 0;
}


.hero_mobile {
    position: relative;
    min-height: 44vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--brand-dark);
    padding: 40px;
}


.hero_mobile::after {
    content: '';
    position: absolute;
    inset: 0;
}




.hero-inner{position:relative;z-index:1;max-width:740px}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:.78rem;color:rgba(255,255,255,.5)}
.breadcrumb a{color:rgba(255,255,255,.5);text-decoration:none}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{color:rgba(255,255,255,.3)}
.hero h1, .hero_mobile h1 {
  font-size:clamp(2rem,4vw,3.2rem);font-weight:800;
  color:#fff;line-height:1.1;letter-spacing:-.03em;margin-bottom:14px;
}
.hero h1 em, .hero_mobile h1 em {
    color: #f0a0a3;
    font-style: normal;
}
.hero p, .hero_mobile p {
    color: rgba(255, 255, 255, .65);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 520px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:100px;padding:6px 14px;
  font-size:.75rem;font-weight:600;color:#fff;
  margin-bottom:22px;letter-spacing:.04em;text-transform:uppercase;
}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#f87171;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
 
/* ─── SEARCH BAR ──────────────────────────── */
.search-section{
  background:#f7f7f7;border-bottom:1px solid var(--border);
  padding:18px 48px;
  justify-content: center;
  display: flex;
}
.search-wrap{
  position:relative;
  width: 560px;
}
.search-wrap input{
  width:100%;border:1.5px solid var(--border);border-radius:8px;
  background:#fff;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.92rem;color:var(--ink);padding:11px 16px 11px 42px;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.search-wrap input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(200,40,46,.1)}
.search-wrap input::placeholder{color:var(--ink3)}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:1.05rem;pointer-events:none}
 
/* ─── LAYOUT ──────────────────────────────── */
.page-body{
  /* display:grid;
  grid-template-columns:var(--sidebar-w) 1fr; */
  max-width:1200px;margin:0 auto;
  padding:0 48px 80px;
  gap:45px;
  align-items:start;
  position: relative !important;
  display: flex !important;
}
 
/* ─── SIDEBAR ─────────────────────────────── */

.sidebar-title{
  font-size:.7rem;font-weight:700;color:var(--ink3);
  letter-spacing:.14em;text-transform:uppercase;
  padding:0 16px 14px;
  border-bottom:1px solid var(--border);margin-bottom:8px;
}
.sidebar-nav{list-style:none}
.sidebar-nav li a{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;font-size:.87rem;font-weight:500;
  color:var(--ink2);padding:9px 16px;border-radius:6px;
  transition:all .18s;position:relative;
}
.sidebar-nav li a:hover{background:var(--brand-lt);color:var(--brand)}
.sidebar-nav li a.active{
  background:var(--brand-lt);color:var(--brand);font-weight:600;
}
.sidebar-nav li a.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;border-radius:0 3px 3px 0;background:var(--brand);
}
.sidebar-nav .s-icon{font-size:.95rem;width:20px;text-align:center;flex-shrink:0}
.sidebar-count{
  margin-left:auto;background:#f0f0f0;color:var(--ink3);
  font-size:.68rem;font-weight:600;padding:2px 7px;border-radius:100px;
}
.sidebar-nav li a.active .sidebar-count{background:rgba(200,40,46,.12);color:var(--brand)}
 
/* ─── MAIN CONTENT ────────────────────────── */
/* .faq-main{padding-top:36px} */
#no-results{
  display:none;text-align:center;padding:80px 0;
  color:var(--ink3);font-size:1rem;
}
#no-results .nr-icon{font-size:3rem;display:block;margin-bottom:12px}
 
/* ─── SECTION HEADER ──────────────────────── */
.faq-section{margin-bottom:52px;scroll-margin-top:90px}
.section-header{
  display:flex;align-items:center;gap:14px;
  margin-bottom:24px;padding-bottom:16px;
  border-bottom:1px solid var(--border);
  padding-top: 45px;
}
.section-icon{
  width:42px;height:42px;border-radius:10px;
  background:var(--brand-lt);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.section-title{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.section-count{
  margin-left:auto;font-size:.78rem;color:var(--ink3);
  background:#f5f5f5;padding:3px 10px;border-radius:100px;font-weight:500;
}
 
/* ─── ACCORDION ───────────────────────────── */
.faq-item{
  border:1.5px solid var(--border);border-radius:var(--radius);
  margin-bottom:10px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.faq-item:hover{border-color:#d0d0d0}
.faq-item.open{border-color:var(--brand);box-shadow:0 4px 20px rgba(200,40,46,.08)}
 
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;text-align:left;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1rem;font-weight:500;color:var(--ink);
  line-height:1.45;transition:background .18s,color .18s;
}
.faq-q:hover{background:var(--brand-lt);}
.faq-item.open .faq-q{background:var(--brand-lt);color:var(--brand);}
.faq-toggle {
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink3);font-size:1.6rem;font-style:normal;
  transition:all .28s cubic-bezier(.34,1.56,.64,1);
  background:#fff;
}
.faq-item.open .faq-toggle{
  transform:rotate(45deg);
  background:var(--brand);border-color:var(--brand);color:#fff;
}
 
.faq-a{
  display:none;
  padding:4px 22px 20px;
  border-top:1px solid var(--border);
  font-size:.88rem;color:var(--ink2);line-height:1.75;
}
.faq-a a{color:var(--brand);text-decoration:none;font-weight:500}
.faq-a a:hover{text-decoration:underline}
.faq-a ol,.faq-a ul{padding-left:18px;margin-top:8px}
.faq-a li{margin-bottom:6px}
.faq-a strong{color:var(--ink);font-weight:600}
 
/* ─── CONTACT STRIP ───────────────────────── */
.contact-strip{
  background:linear-gradient(135deg,var(--brand) 0%,#e83030 100%);
  border-radius:14px;padding:40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:8px;position:relative;overflow:hidden;
}
.contact-strip::after{
  content:'?';position:absolute;right:180px;top:-20px;
  font-size:160px;font-weight:800;color:rgba(255,255,255,.06);
  line-height:1;pointer-events:none;
}
.contact-strip h3{
  font-size:1.35rem;font-weight:700;color:#fff;
  letter-spacing:-.02em;margin-bottom:6px;
}
.contact-strip p{color:rgba(255,255,255,.75);font-size:.88rem}
.contact-btns{display:flex;gap:12px;flex-shrink:0}
.c-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:8px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.82rem;font-weight:600;letter-spacing:.03em;
  text-decoration:none;transition:all .18s;
}
.c-btn-white{background:#fff;color:var(--brand)}
.c-btn-white:hover{background:#ffe8e8}
.c-btn-outline{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.c-btn-outline:hover{background:rgba(255,255,255,.25)}
 
/* ─── TOPIC QUICK LINKS ───────────────────── */
.topics-bar{
  background:#f7f7f7;border-bottom:1px solid var(--border);
  padding:14px 48px;
  display:flex;
  justify-content: center;
  gap:10px;
  flex-wrap:wrap;
  align-items: center;
}

.topics-bar .tb-label{font-size:.75rem;font-weight:700;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;margin-right:4px}
.topic-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1.5px solid var(--border);border-radius:100px;
  padding:5px 14px;font-size:.78rem;font-weight:500;color:var(--ink2);
  text-decoration:none;transition:all .18s;
}
.topic-chip:hover,.topic-chip.here{background:var(--brand);border-color:var(--brand);color:#fff}

.sidebar .active{
  color: #126cb9 !important;
}

/* Scroll To Top Button */
#scrollTopBtn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  /* background: linear-gradient(135deg, #F4B21F, #401139); */
  background: #dba11b;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  display: none;
  z-index: 9999;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#scrollTopBtn:hover {
  transform: translateY(-4px);
}

#scrollTopBtn:active {
  transform: scale(0.95);
}


/* ========================================= */



.sidebar.is-fixed {
  position: fixed;
  top: 120px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  z-index: 99;
}

/* This div holds the grid column when sidebar is fixed */
.sidebar-spacer {
  display: none;
  width: var(--sidebar-w);
}
.sidebar-spacer.visible {
  display: block;
}

.hero_mobile {
    display: none;
}


.sidebar {
  position: sticky;
  height: fit-content;
  width: var(--sidebar-w);
  padding: 28px 0;
  align-self: start;
  background: #fff;
  z-index: 1;
  border-radius: 15px;
 
  
}

.topics-bar{
  display: none;
}


 
/* ─── RESPONSIVE ──────────────────────────── */
@media(max-width:800px) {
  .page-body{grid-template-columns:1fr;padding:0 20px 60px;gap:0px;}
  .sidebar{display:none}
  .top-nav{padding:0 20px}.nav-links{display:none}
  .hero{padding:48px 20px 40px}
  .search-section,.topics-bar{padding:14px 20px}
  .contact-strip{flex-direction:column;padding:28px 24px}
  .contact-btns{flex-direction:column;width:100%}
  .c-btn{justify-content:center}
  .hero_mobile {display: block!important;}
  section.hero {display: none;}

  .hero_mobile {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--brand-dark);
    padding: 40px;
}

.hero p, .hero_mobile p {font-size: .9rem;}

.topics-bar{
  display: block;
}

.faq_main {
    margin-left: 0px !important;
}

.hero_mobile {
  min-height: 60vh;
}


}



/* ─── FAQ END ─────────────────────────────── */