/* =========================
   css/mh-faq.css (Moon-Host v2.6)
   Orbit stage + SVG tether lines
   NOTE: body ambient untouched
========================= */

:root{
  --mh-bg:#07080c;
  --mh-accent-rgb: 255, 74, 74;
  --mh-blue-rgb: 130, 160, 255;
}

/* Font */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, select{
  font-family: 'Poppins', sans-serif;
}

/* Base */
html, body{
  background: var(--mh-bg) !important;
  color: rgba(255,255,255,.92) !important;
}

/* ✅ Ambient layers: ALWAYS behind (no overlay on navbar/footer) */
body{
  position: relative;
  isolation: isolate; /* creates a safe stacking context */
  background: var(--mh-bg) !important;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2; /* ✅ behind everything */
  background:
    radial-gradient(1200px 640px at 18% 25%, rgba(var(--mh-accent-rgb), .22), transparent 60%),
    radial-gradient(1000px 620px at 82% 18%, rgba(var(--mh-blue-rgb), .16), transparent 62%),
    radial-gradient(900px 520px at 50% 85%, rgba(var(--mh-accent-rgb), .10), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.86));
}

body::after{
  content:"";
  position: fixed;
  inset: -40px;
  pointer-events: none;
  z-index: -1; /* still behind everything, but above ::before */
  opacity: .70;
  background: radial-gradient(circle at 50% 35%, transparent 0 55%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.88) 100%);
}

/* ======================================================================
   FAQ + ORBIT UPGRADE (HTML unchanged, JS wraps sections)
   ====================================================================== */

/* FAQ Section */
.faq{
  padding: 100px 0;
  background: transparent !important;
  display: flex;
  justify-content: center;
}

/* IMPORTANT: container legyen block, az orbit stage kezeli a flexet */
.faq .container{
  display: block;                 /* <-- korábban flex volt */
  max-width: 1200px;
  margin: 0 auto;
}

/* Section title */
.faq .faq-section-title{
  width: 100%;
  text-align: center;
  font-size: 24px;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  margin: 40px 0 14px;
  text-transform: uppercase;
  border-bottom: 0;
  padding-bottom: 10px;
  position: relative;
}
.faq .faq-section-title::after{
  content:"";
  display:block;
  height: 2px;
  width: min(220px, 62%);
  margin: 10px auto 0;
  background: rgba(255,74,74,.95);
  box-shadow:
    0 0 0 3px rgba(255,74,74,.10),
    0 12px 30px rgba(255,74,74,.18);
}

/* ✅ Orbit stage (JS beszúrja minden title után) */
.faq .mh-faq-orbit{
  position: relative;
  width: 100%;
  margin: 10px 0 34px;
  padding-top: 44px !important;
  padding: 22px 16px 8px;
  overflow: hidden;

  /* SQUARED UI + BORDER OFF */
  border: 0 !important;
  border-radius: 0 !important;

  /* very subtle glassy panel (csak a FAQ-on belül) */
  background:
    radial-gradient(900px 420px at 18% 22%, rgba(var(--mh-accent-rgb), .10), transparent 55%),
    radial-gradient(860px 420px at 82% 18%, rgba(var(--mh-blue-rgb), .08), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42));
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  isolation: isolate; /* z-index safe */
}

/* Orbit ring (finom) */
.faq .mh-faq-orbit::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 38% !important;
  transform: translate(-50%,-50%);
  width: min(860px, 140%);
  height: min(860px, 140%);
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 60px rgba(var(--mh-accent-rgb), .08),
    0 0 70px rgba(var(--mh-blue-rgb), .06);
  opacity: .75;
  pointer-events:none;
  z-index: 0;
}

/* “Moon core” */
.faq .mh-faq-moon{
  position:absolute;
  left: 50%;
  top: 38% !important;
  transform: translate(-50%,-50%);
  width: clamp(110px, 14vw, 150px);
  height: clamp(110px, 14vw, 150px);
  border-radius: 999px;

  /* SQUARED UI mentén nincs border, de a moon lehet kerek */
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), transparent 48%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.12), rgba(0,0,0,.72));
  box-shadow:
    0 0 60px rgba(0,0,0,.55),
    0 0 50px rgba(var(--mh-accent-rgb), .12),
    0 0 50px rgba(var(--mh-blue-rgb), .08);
  opacity: .92;
  pointer-events:none;
  z-index: 0;
}

/* SVG lines layer */
.faq .mh-faq-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 1; /* moon felett, kártyák alatt */
  opacity: .95 !important;
}

/* Card group inside orbit */
.faq .mh-faq-group{
  position: relative;
  padding-top: 22px !important;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* ✅ only inside FAQ (doesn't touch bootstrap cards elsewhere) */
.faq .card{
  width: 23%;
  height: 200px;
  perspective: 1000px;

  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* “hanging” micro offset (JS beállítja) */
  transform: translateY(var(--mh-hang, 0px));
}

.faq .card-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease-in-out;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* hover + mobile pinned */
.faq .card:hover .card-inner,
.faq .card.is-flipped .card-inner{
  transform: rotateY(180deg);
}

.faq .card-front,
.faq .card-back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;

  border-radius: 0 !important;
  border: 0 !important;

  box-shadow: 0 14px 50px rgba(0,0,0,.40);
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
  text-align: center;
}

.faq .card-front{
  color: rgba(255,255,255,.92);
  font-size: 18px;
  font-weight: 900;
  overflow: hidden;
  background:
    radial-gradient(600px 280px at 18% 22%, rgba(var(--mh-accent-rgb), .18), transparent 55%),
    radial-gradient(520px 240px at 80% 18%, rgba(var(--mh-blue-rgb), .12), transparent 55%),
    rgba(0,0,0,.56) !important;
}

.faq .card-back{
  color: rgba(255,255,255,.78);
  transform: rotateY(180deg);
  overflow-y: auto;
  background:
    radial-gradient(600px 280px at 18% 22%, rgba(var(--mh-accent-rgb), .14), transparent 55%),
    radial-gradient(520px 240px at 80% 18%, rgba(var(--mh-blue-rgb), .10), transparent 55%),
    rgba(0,0,0,.64) !important;
}

.faq .card h5{
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
}
.faq .card p{
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: rgba(255,255,255,.70);
}

/* scrollbar */
.faq .card-back::-webkit-scrollbar{ width: 8px; }
.faq .card-back::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.10); }
.faq .card-back::-webkit-scrollbar-track{ background: rgba(0,0,0,.20); }

/* Responsive */
@media (max-width: 992px){
  .faq .card{ width: 45%; }
}
@media (max-width: 576px){
  .faq .card{ width: 100%; }
}

/* mobilon se legyen túl szűk */
@media (max-width: 576px){
  .faq .mh-faq-orbit{
    padding-top: 34px !important;
  }
  .faq .mh-faq-group{
    padding-top: 16px !important;
  }
}

.faq .mh-faq-lines circle{
  animation: mhNodePulse 2.6s ease-in-out infinite;
}
@keyframes mhNodePulse{
  0%,100%{ opacity: .45; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.05); }
}