:root{
  --faq-bg: #0b1b2c;
  --faq-row: #0f2741;
  --faq-border: #1b3f67;
  --faq-text: #dbe7ff;
  --faq-muted: #9fb7d9;
  --radius: 12px;
}

/* H2 heading above the block */
.faq__title{
  color: var(--faq-text);
  margin: 24px 0 10px;
  font-size: 28px;
  font-weight: 700;
}

/* Container */
.faq{
  width: 100%;
  max-width: 1874px;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto 30px;
  padding: 8px;
  background: var(--faq-bg);
  border-radius: var(--radius);
}

/* Item */
.faq__item{
  background: var(--faq-row);
  border: 1px solid var(--faq-border);
  border-radius: 10px;
  margin: 12px 0;
  overflow: hidden;
}

/* Question row */
.faq__summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 54px 14px 20px;
  position: relative;
  outline: none;
  user-select: none;
}
.faq__summary::-webkit-details-marker{ display:none; }

/* H3 heading inside summary — styling */
.faq__h3{
  margin: 0;
  color: var(--faq-text);
  font-size: 18px;
  font-weight: 700;
}

/* Plus/minus icon */
.faq__summary::after{
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
  color: var(--faq-muted);
  transition: transform .2s ease;
}
.faq__item[open] .faq__summary::after{ content: "–"; }

/* Hover/focus states */
.faq__summary:hover{ background: rgba(255,255,255,.03); }
.faq__summary:focus-visible{
  box-shadow: 0 0 0 3px rgba(77,151,255,.35) inset;
}

/* Content + smooth expand */
.faq__content{
  color: var(--faq-muted);
  padding: 0 20px 16px 20px;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease, padding-top .25s ease;
}
.faq__item[open] .faq__content{
  grid-template-rows: 1fr;
  padding-top: 6px;
}
.faq__content > *{ min-height: 0; }

@media (prefers-reduced-motion: reduce){
  .faq__summary::after, .faq__content{ transition: none; }
}

/* Force FAQ typography so it doesn't depend on surrounding styles */
.faq .faq__title{
  margin: 24px 0 12px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--faq-text);
}
.faq .faq__h3{
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--faq-text);
}

/* Slightly more compact on narrow screens */
@media (max-width: 640px){
  .faq .faq__title{ font-size: 24px; }
  .faq .faq__h3{ font-size: 16px; }
}

/* Makes the FAQ panel consistent everywhere, not only on .home */
.games-info__cnt {
  background: linear-gradient(180deg,#0f1f33,#0d1b2b); /* same as on the homepage */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  margin: 24px auto;
}

/* Prevent "double background": make the inner section transparent */
.games-info__cnt .faq {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Unified heading spacing inside the panel */
.games-info__cnt .faq__title {
  margin: 0 0 12px;
}

/* === FAQ (details) — soft glow + animation === */
:root{
  --faq-accent: #00a3ff;                    /* blue accent */
  --faq-glow: rgba(0,163,255,.45);          /* outer glow */
  --faq-border: rgba(255,255,255,.16);      /* default border */
  --faq-bg: rgba(255,255,255,.03);          /* card background */
}

.faq { max-width: 900px; margin: 0 auto; }
.faq__title { margin: 30px 0 16px; }

/* Question card */
.faq__item{
  border: 1px solid var(--faq-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--faq-bg);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

/* Hover/focus — subtle highlight */
.faq__item:hover,
.faq__item:focus-within{
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 16px 0 var(--faq-glow);
}

/* Open card — stronger border + glow */
.faq__item[open]{
  border-color: var(--faq-accent);
  box-shadow:
    0 0 0 1px var(--faq-accent) inset,
    0 0 22px 2px var(--faq-glow);
  background: rgba(0,163,255,.06);
}

/* Question header */
.faq__q{
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hide default browser marker */
.faq__q::-webkit-details-marker{ display:none; }

/* + / – icon (text) */
.faq__q::after{
  content:"+";
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  margin-left: 12px;
  transform: translateY(-1px);
}
.faq__item[open] .faq__q::after{ content:"–"; }

/* Answer content — smooth expand */
.faq__a{
  margin-top: 10px;
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;                /* required for animation */
  overflow: hidden;
  transition:
    max-height .35s ease,
    opacity .25s ease,
    transform .35s ease;
  will-change: max-height, opacity, transform;
}

/* Show when opened */
.faq__item[open] .faq__a{
  opacity: 1;
  transform: translateY(0);
  max-height: 700px;            /* ↑ increase if answers are longer */
}

@media (max-width: 768px){
  .faq{ padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce){
  .faq__a{ transition: none; }
  .faq__item{ transition: none; }
}

/* h3 inside summary — reset default margins */
.faq__q h3{
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* FAQ container on inner pages */
.entry-content .faq,
.page .faq,
.single .faq {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 1874px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If wrap FAQ into .games-info__cnt */
.entry-content .games-info__cnt,
.page .games-info__cnt,
.single .games-info__cnt {
  box-sizing: border-box;
  max-width: 1874px;
  margin: 0 auto;
  padding: 0 12px; /* optional, like on the homepage */
}

/* === FAQ: compact like on the homepage (for inner pages) === */
.entry-content .faq,
.page .faq,
.single .faq{
  box-sizing: border-box;
  width: 100%;
  max-width: 1874px !important;   /* If the main page has a different width, set the same number */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Reset extra Gutenberg outer margins around headings and inside the answer */
.faq__title{ margin: 24px 0 12px; }
.faq__q h3{ margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.faq__a > *:first-child{ margin-top: 0; }
.faq__a > *:last-child{ margin-bottom: 0; }

/* Compact vertical rhythm */
.faq--compact .faq__item{
  padding: 12px 16px;           /* was larger — make it tighter */
  margin-bottom: 10px;          /* reduced spacing between cards */
  border-radius: 12px;
}
.faq--compact .faq__q{ line-height: 1.25; }
.faq--compact .faq__q::after{
  font-size: 18px;              /* slightly smaller plus */
  margin-left: 10px;
}
.faq--compact .faq__a{
  margin-top: 8px;
  max-height: 640px;            /* for animation; increase if answers are longer */
}

/* If parent is flex/grid, prevent stretching to full width */
.entry-content .faq{ flex: 0 1 1874px; align-self: center; }

/* Sometimes Gutenberg wrappers add inner padding — remove it when FAQ is inside */
.entry-content .wp-block-group:has(.faq){ padding-left: 0; padding-right: 0; }

/* Fallback if :has isn't supported — add a class manually in the editor (Additional class: faq-wrap) */
.entry-content .wp-block-group.faq-wrap{ padding-left: 0; padding-right: 0; }

/* Remove extra Gutenberg padding around FAQ */
.wp-block-group:has(.faq) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* If you add a class manually to the Gutenberg container */
.wp-block-group.faq-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.faq--compact {
  margin-top: 35px;
  margin-bottom: 35px;
}

/* — make FAQ rows more compact — */
.faq--compact .faq__item{
  padding: 10px 14px;            /* was 12–14+ → reduce */
  margin-bottom: 8px;            /* spacing between questions */
}

/* header row: tighter */
.faq--compact .faq__q{
  line-height: 1.15;             /* was 1.25 */
}

/* smaller plus icon to reduce row height */
.faq--compact .faq__q::after{
  font-size: 16px;               /* was 18–20 */
  margin-left: 8px;
}

/* key fix: do not keep outer margin when the answer is collapsed */
.faq--compact .faq__a{
  margin-top: 0;                  /* previously +10px consumed space even when collapsed */
}
.faq--compact .faq__item[open] .faq__a{
  margin-top: 8px;                /* add spacing ONLY when opened */
}

/* if use h3 inside summary — reset just in case */
.faq--compact .faq__q h3{
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* --- Compact FAQ (internal pages) --- */
.games-info__cnt .faq.faq--compact .faq__item{
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
}

.games-info__cnt .faq.faq--compact .faq__q{
  line-height: 1.12;
}

.games-info__cnt .faq.faq--compact .faq__q h3{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.12;
}

.games-info__cnt .faq.faq--compact .faq__q::after{
  font-size: 14px;
  margin-left: 8px;
}

.games-info__cnt .faq.faq--compact .faq__a{
  margin-top: 0;
}
.games-info__cnt .faq.faq--compact .faq__item[open] .faq__a{
  margin-top: 6px;
}