/* =========================================================
   RATNA GEMS — FAQ PAGE (scoped to .ratna-faq-container)
   Astra-first tokens with safe fallbacks
   ========================================================= */
.ratna-faq-container{
  --primary-color: var(--ast-global-color-0, #004E81);
  --secondary-color: var(--ast-global-color-2, #2E7D32);
  --accent-color: #D32F2F;

  --text-dark: var(--ast-global-color-3, #212529);
  --text-muted: #495057;

  --bg: #FFFFFF;
  --bg-alt: var(--ast-global-color-5, #F8F9FA);

  --border: #E5E7EB;
  --shadow: 0 8px 40px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);

  --pill-bg: #E6F0F7;
  --pill-text: #0F3554;

  max-width:1100px;
  margin:2rem auto;
  background:var(--bg);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* base (scoped) */
.ratna-faq-container *, 
.ratna-faq-container *::before, 
.ratna-faq-container *::after { box-sizing:border-box; }
.ratna-faq-container img, 
.ratna-faq-container svg { display:block; max-width:100%; }
.ratna-faq-container a { color:var(--primary-color); text-decoration:underline; }
.ratna-faq-container a:hover { text-decoration:none; }
.ratna-faq-container :is(a,button):focus-visible { outline:2px solid var(--secondary-color); outline-offset:2px; }

/* ---------- Hero ---------- */
.ratna-faq-hero{
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
  padding:3rem 1.5rem;
  text-align:center;
}
.ratna-faq-title{
  color:var(--primary-color);
  font-weight:800;
  line-height:1.2;
  margin:0 0 .75rem;
  font-size:clamp(2rem,5vw + 1rem,3.2rem);
}
.ratna-faq-subtitle{
  color:var(--text-muted);
  margin:0 auto; max-width:70ch;
  line-height:1.7;
  font-size:clamp(1rem,1vw + .8rem,1.1rem);
}

/* ---------- Category filters ---------- */
.ratna-faq-categories{
  display:flex; flex-wrap:wrap; gap:.65rem;
  padding:1.25rem 1rem 1.5rem;
  justify-content:center;
  border-bottom:1px solid var(--border);
  background:#fff;
}
.ratna-faq-category-btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--primary-color);
  background:var(--pill-bg);
  color:var(--pill-text);
  padding:.65rem 1.1rem;
  border-radius:999px;
  font-weight:700; font-size:.97rem; letter-spacing:.2px; line-height:1.4;
  min-height:44px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .2s ease, box-shadow .2s ease, border-color .15s ease;
}
.ratna-faq-category-btn:hover{
  background:var(--primary-color); color:#fff; border-color:var(--primary-color);
  transform:translateY(-2px);
  box-shadow:0 6px 15px rgba(0,78,129,.18);
}
.ratna-faq-category-btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(0,78,129,.28);border-color:var(--primary-color);background:var(--primary-color);color:#fff}
.ratna-faq-category-btn.active,
.ratna-faq-category-btn[aria-pressed="true"]{
  background:var(--primary-color); color:#fff; border-color:var(--primary-color);
  box-shadow:0 4px 10px rgba(0,78,129,.2);
}
@media (prefers-contrast: more){
  .ratna-faq-category-btn:hover,
  .ratna-faq-category-btn.active,
  .ratna-faq-category-btn[aria-pressed="true"]{
    box-shadow:0 0 0 3px rgba(0,78,129,.25);
  }
}

/* ---------- Sections ---------- */
.ratna-faq-sections{ padding:2rem 1.25rem 2.25rem; }
.ratna-faq-section{
  margin:0 auto 2.25rem; max-width:950px;
  border-bottom:1px solid var(--border); padding-bottom:2rem;
}
.ratna-faq-section:last-of-type{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.ratna-faq-section[hidden]{ display:none !important; } /* in case themes add display */

/* header */
.ratna-faq-section-header{
  display:flex; align-items:center; gap:.9rem; margin-bottom:1rem;
}
.ratna-faq-section-icon{
  width:44px; height:44px; border-radius:50%;
  background:#E6F0F7; border:1px solid var(--border); padding:10px;
  color:var(--primary-color); flex-shrink:0;
}
.ratna-faq-section-header h2{
  color:var(--primary-color);
  font-size:clamp(1.2rem,1.2vw + 1rem,1.6rem);
  font-weight:800; margin:0;
}

/* ---------- Items ---------- */
.ratna-faq-item{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  margin:1rem 0; overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease, border-color .2s ease;
}
.ratna-faq-item:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.08); }
.ratna-faq-item:focus-within{border-color:#bfd4e6;box-shadow:0 0 0 3px rgba(0,78,129,.18)}

/* question button */
.ratna-faq-question{
  width:100%; text-align:left;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:.75rem;
  padding:1rem 1.1rem; background:transparent; border:0; cursor:pointer;
  color:var(--text-dark); font-weight:700; font-size:1rem; line-height:1.4;
  transition:background .2s ease, color .2s ease;
}
.ratna-faq-question:hover{ color:var(--primary-color); background:#F7FAFC; }
.ratna-faq-question:focus-visible{ outline:2px solid var(--secondary-color); outline-offset:-2px; }

/* deep-link highlight */
.ratna-faq-question:target{
  box-shadow:0 0 0 3px rgba(0,78,129,.25) inset;
  border-radius:8px;
}

/* plus/minus */
.ratna-faq-icon{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--primary-color); color:#fff; font-weight:900; font-size:18px;
  user-select:none; transition:transform .25s ease, background .2s ease;
}

/* answer */
.ratna-faq-answer{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
  border-top:1px solid transparent; padding:0 1.1rem;
}
.ratna-faq-item.active{ border-color:#D9E2EC; }
.ratna-faq-item.active .ratna-faq-icon{ transform:rotate(180deg); }
.ratna-faq-item.active .ratna-faq-answer{ max-height:none; overflow:visible; border-top-color:var(--border); padding-bottom:1rem; }

.ratna-faq-answer p{ margin:.85rem 0; color:var(--text-muted); line-height:1.7; }
.ratna-faq-answer ul{ margin:.5rem 0 .75rem 1.25rem; padding:0; }
.ratna-faq-answer li{ margin:.35rem 0; color:var(--text-muted); line-height:1.6; }
.ratna-faq-answer strong{ color:var(--text-dark); }
.ratna-faq-answer a{ font-weight:600; }

/* tables inside answers */
.ratna-faq-answer table{
  width:100%; border-collapse:collapse; margin:.75rem 0;
  border:1px solid var(--border); border-radius:8px; overflow:hidden;
}
.ratna-faq-answer th,
.ratna-faq-answer td{
  padding:.625rem .75rem; border-bottom:1px solid var(--border);
  text-align:left; vertical-align:top; color:var(--text-muted); line-height:1.6;
}
.ratna-faq-answer thead tr{ background:var(--bg-alt) !important; }
.ratna-faq-answer th,
.ratna-faq-answer td{ border-color:var(--border) !important; }
.ratna-faq-answer th{ font-weight:700; color:var(--text-dark); font-size:.95em; }
.ratna-faq-answer tr:last-child td{ border-bottom:0; }
@media (max-width:600px){
  .ratna-faq-answer table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ---------- CTA (scoped) ---------- */
.ratna-faq-container .contact-section{
  text-align:center; background-color:var(--bg-alt);
  padding:2.5rem 1.5rem; border-radius:12px; margin:0 1.25rem 2.25rem;
}
.ratna-faq-container .contact-section h2{
  color:var(--primary-color); font-weight:800;
  font-size:clamp(1.3rem,1.5vw + 1rem,1.7rem); margin-bottom:.5rem;
}
.ratna-faq-container .contact-section p{
  color:var(--text-muted); margin:0 auto; max-width:70ch; line-height:1.7;
}
.ratna-faq-container .contact-buttons{
  display:flex; flex-direction:column; gap:1rem; margin:1.5rem 0 0; align-items:center;
}
.ratna-faq-container .contact-button{
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  padding:.75rem 1.5rem; border-radius:50px; font-weight:700; font-size:1rem;
  min-width:min(250px, 100%); border:2px solid transparent; color:#fff; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.ratna-faq-container .contact-button:hover{ transform:translateY(-2px); box-shadow:0 6px 15px rgba(0,0,0,.1); text-decoration:none; }
.ratna-faq-container .contact-button.email{ background-color:var(--primary-color); }
.ratna-faq-container .contact-button.whatsapp{ background-color:var(--secondary-color); }
.ratna-faq-container .contact-button svg{ width:22px; height:22px; fill:currentColor; }
.ratna-faq-container .contact-button svg path{ fill:currentColor; }
.ratna-faq-container .contact-button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(0,78,129,.28)}
.ratna-faq-container .more-info{ margin-top:1.5rem; font-size:.95rem; }

/* ---------- Responsive ---------- */
@media (min-width:768px){
  .ratna-faq-hero{ padding:4rem 2rem; }
  .ratna-faq-sections{ padding:2.5rem 2rem 3rem; }
  .ratna-faq-section-header{ margin-bottom:1.1rem; }
  .ratna-faq-container .contact-section{ margin:0 2rem 2.75rem; }
  .ratna-faq-container .contact-buttons{ flex-direction:row; justify-content:center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ratna-faq-category-btn,
  .ratna-faq-item,
  .ratna-faq-question,
  .ratna-faq-icon,
  .ratna-faq-answer,
  .ratna-faq-container .contact-button{ transition:none !important; }
  .ratna-faq-category-btn:hover,
  .ratna-faq-item:hover,
  .ratna-faq-container .contact-button:hover,
  .ratna-faq-icon,
  .ratna-faq-item.active .ratna-faq-icon{ transform:none !important; box-shadow:none !important; }
}

/* =========================================================
   FIX: Remove WordPress auto-formatting <br> tags in FAQ
   questions only (answers may use <br> for formatting, e.g. Q16 address)
   ========================================================= */
.ratna-faq-question br {
    display: none !important;
}

/* Dark mode (device preference) */
@media (prefers-color-scheme: dark) {
  .ratna-faq-container{
    --primary-color:#93c5fd;
    --secondary-color:#86efac;
    --text-dark:#f8fafc;
    --text-muted:#cbd5e1;
    --bg:#111827;
    --bg-alt:#1e293b;
    --border:#334155;
    --pill-bg:#1e293b;
    --pill-text:#dbeafe;
    background:var(--bg);
    border-color:var(--border);
  }

  .ratna-faq-hero,
  .ratna-faq-categories,
  .ratna-faq-item,
  .ratna-faq-container .contact-section {
    background: #111827;
    border-color: #334155;
  }

  .ratna-faq-question,
  .ratna-faq-answer strong,
  .ratna-faq-section-header h2 {
    color: #f8fafc;
  }

  .ratna-faq-question:hover {
    background: #1e293b;
  }

  .ratna-faq-answer p,
  .ratna-faq-answer li,
  .ratna-faq-container .contact-section p {
    color: #cbd5e1;
  }

  .ratna-faq-container .contact-button.email {
    background-color: #93c5fd;
    color: #0b1726;
  }

  .ratna-faq-container .contact-button.whatsapp {
    background-color: #86efac;
    color: #052010;
  }
}

/* FAQ CTA button text-contrast hardening in dark mode */
@media (prefers-color-scheme: dark) {
  .ratna-faq-container .contact-button.email,
  .ratna-faq-container .contact-button.email:visited {
    color: #0b1726 !important;
    text-decoration: none;
  }

  .ratna-faq-container .contact-button.whatsapp,
  .ratna-faq-container .contact-button.whatsapp:visited {
    color: #052010 !important;
    text-decoration: none;
  }

  .ratna-faq-container .contact-button svg {
    fill: currentColor;
  }
}

/* Dark mode: device preference only (Astra Pro Color Switcher not used) */