/* =========================================================
   FAQs PAGE — CONTENT STYLES ONLY (FINAL — STABLE)
   ⚠️ NO LAYOUT SHIFT • NO HEADER SHAKE
========================================================= */
 /* ===============================
   CONTENT BOX ONLY
================================ */
 /* =========================================================
   PAGE HERO
========================================================= */
 body.faqs .page-hero {
   background-color: var(--primary);
   color: var(--white);
   padding: 35px 30px;
   border-radius: 12px;
   margin-top: 20px;
   margin-bottom: 25px;
   border-bottom: none;
   text-align: center;
 }

 /* SMALL LABEL */
 body.faqs .faqs-section-label {
   font-size: 15px;
   font-weight: 500;
   font-family: inherit;
   color: #ffffff;
   letter-spacing: 0.5px;
   text-transform: none;
   margin-bottom: 8px;
   line-height: 1.5;
   text-align: center;
 }

 /* HERO TITLE */
 body.faqs .page-hero h1 {
   font-size: 38px;
   color: #ffffff;
   margin-bottom: 12px;
   line-height: 1.2;
   font-weight: 700;
 }

 /* HERO TEXT */
 body.faqs .page-hero p {
   font-size: 15px;
   color: #ffffff;
   max-width: 900px;
   line-height: 1.7;
   margin: 0 auto;
   text-align: center;
 }

 /* =========================================================
   FAQS SECTION WRAPPER
========================================================= */
 body.faqs .faqs-section {
   background: #ffffff;
   padding: 60px 2rem;
   margin-bottom: 5px;
 }

 /* ===============================
   ACCORDION BASE
================================ */
 body.faqs .accordion,
 body.faqs .accordion-item {
   background: transparent;
 }

 body.faqs .accordion {
   margin-top: 0;
 }

 /* ===============================
   ACCORDION ITEM
================================ */
 body.faqs .accordion-item {
   border: 1px solid var(--folder-border);
   border-radius: 6px;
   margin-bottom: 10px;
   background-color: var(--white);
   transform: translateZ(0);

 }

 /* ===============================
   ACCORDION BUTTON
================================ */
 body.faqs .accordion-button {
   background-color: var(--folder-bg);
   border: none;
   padding: 12px 16px;
   width: 100%;
   text-align: left;
   font-weight: bold;
   font-size: 15px;
   cursor: pointer;
 }

 body.faqs .accordion-button:hover {
   background-color: var(--hover-soft);
 }

 /* =========================================================
   🔥 NEW ACCORDION ENGINE (NO LAYOUT SHIFT)
   (REPLACES max-height animation)
========================================================= */
 body.faqs .accordion-body {
   overflow: hidden;
   /* 🔥 muhimu sana */
   padding: 0 15px;
   /* 🔥 remove vertical padding */
   max-height: 0;
   /* 🔥 lock height */
   background-color: var(--panel-bg);
   opacity: 0;
   transform: scaleY(0);
   transform-origin: top;
   transition:
     transform 0.3s ease,
     opacity 0.3s ease;
 }

 /* OPEN */
 body.faqs .accordion-item.open .accordion-body {
   padding: 15px;
   /* 🔥 add back when open */
   max-height: 6000px;
   /* 🔥 ilikuwa 1000px — haitoshi kwa majibu marefu (q29, q30)
      hasa wakati wa font-zoom/magnification kubwa, hivyo
      yalikuwa yanakatwa (clipped) na overflow:hidden */
   transform: scaleY(1);
   opacity: 1;
 }

 /* OPEN STATE */
 body.faqs .accordion-item.open .accordion-body {
   transform: scaleY(1);
   opacity: 1;
 }

 /* =========================================================
   PAGE BACKGROUND (SAFE)
========================================================= */
 body.faqs main.content {
   background-color: var(--light-bg);
 }

 /* =========================================================
   🔥 STABILITY FIXES (IMPORTANT)
========================================================= */

 /* Stop scroll jump */
 main.content {
   overflow-anchor: none;
 }

 /* Keep scrollbar stable */
 html {
   overflow-y: scroll;
 }

 body {
   scrollbar-gutter: stable;
 }

 /* ===============================
   ACCORDION ICON
================================ */
 .accordion-button {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .accordion-button::after {
   content: "▾";
   font-size: 30px;
   font-weight: bold;
   color: var(--primary);
   line-height: 1;
   transition: transform 0.3s ease;
 }


 /* rotate when open */
 .accordion-item.open .accordion-button::after {
   transform: rotate(180deg);
 }

 .accordion-button {
   transition: background 0.25s ease, padding-left 0.25s ease;
 }

 /* =========================================================
   TTCL-STYLE REVEAL ANIMATION
========================================================= */

 /* INITIAL STATE */
 body.faqs .reveal-up {
   opacity: 0;
   transform: translateY(55px);
   transition:
     opacity 0.9s ease,
     transform 0.9s ease;

   will-change: transform, opacity;
 }

 /* ACTIVE */
 body.faqs .reveal-up.active {
   opacity: 1;
   transform: translateY(0);
 }

 /* DELAYS */
 body.faqs .delay-1 {
   transition-delay: 0.1s;
 }

 body.faqs .delay-2 {
   transition-delay: 0.25s;
 }

 body.faqs .delay-3 {
   transition-delay: 0.4s;
 }

 body.faqs .delay-4 {
   transition-delay: 0.55s;
 }

 body.faqs .delay-5 {
   transition-delay: 0.7s;
 }

 /* =========================================================
   HERO EFFECT
========================================================= */

 body.faqs .page-hero h1 {
   animation: faqsHeroSlide 1s ease both;
 }

 body.faqs .page-hero p {
   animation: faqsHeroFade 1.4s ease both;
 }

 @keyframes faqsHeroSlide {

   from {
     opacity: 0;
     transform: translateY(-25px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes faqsHeroFade {

   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 /* =========================================================
   ACCORDION HOVER
========================================================= */

 body.faqs .accordion-item {
   transition:
     transform 0.3s ease,
     box-shadow 0.3s ease;
 }

 body.faqs .accordion-item:hover {
   transform: translateY(-3px);

   box-shadow: 0 10px 24px rgba(11, 37, 69, 0.08);
 }

 /* BUTTON HOVER */
 body.faqs .accordion-button {
   transition:
     background 0.25s ease,
     padding-left 0.25s ease;
 }

 body.faqs .accordion-button:hover {
   padding-left: 22px;
 }

 /* SPACE BEFORE FOOTER */
 body.faqs main.content {
   padding-bottom: 20px;
 }

 /* ===============================
   FAQ LISTS
================================ */
 body.faqs .accordion-body ul {
   padding-left: 22px;
   margin-top: 10px;
 }

 body.faqs .accordion-body li {
   margin-bottom: 8px;
   line-height: 1;
 }

 /* ===============================
   FAQ RICH CONTENT (headings, text, tables)
   — inasaidia majibu yenye vichwa vidogo (h4),
     jedwali, na maandishi mazito/italiki
     (mfano q29, q30 — SW/ZH/EN sawa)
================================ */
 body.faqs .accordion-body p {
   margin: 0 0 12px;
   line-height: 1.7;
 }

 body.faqs .accordion-body p:last-child {
   margin-bottom: 0;
 }

 body.faqs .accordion-body h4 {
   font-size: 16px;
   font-weight: 700;
   color: var(--primary);
   margin: 18px 0 8px;
 }

 body.faqs .accordion-body h4:first-child {
   margin-top: 0;
 }

 body.faqs .accordion-body strong {
   font-weight: 700;
 }

 body.faqs .accordion-body em {
   font-style: italic;
   color: #555;
 }

 body.faqs .accordion-body table {
   width: 100%;
   border-collapse: collapse;
   margin: 10px 0 16px;
   font-size: 14px;
 }

 body.faqs .accordion-body th,
 body.faqs .accordion-body td {
   border: 1px solid var(--folder-border);
   padding: 8px 10px;
   text-align: left;
   vertical-align: top;
   line-height: 1.5;
 }

 body.faqs .accordion-body th {
   background-color: var(--folder-bg);
   font-weight: 700;
 }

 /* jedwali kubwa lisivunje mpangilio kwenye simu */
 body.faqs .accordion-body table {
   display: block;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }

 /* =====================================================
   FAQS-SECTION-LABEL INSIDE PAGE-HERO (FAQs)
   — Bright Black, wraps text only (inline-block fix)
===================================================== */
 body.faqs .page-hero .faqs-section-label {
   display: inline-block;
   background: #000000;
   color: #ffffff;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 4px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
   margin-bottom: 10px;
 }