/* =========================================================================
   FF FAQ VIBE SKIN  ·  scoped to the FAQ page (body.ff-faq-skin) ONLY
   A dark vibe-kit "skin" painted over the existing Elementor page.
   The Elementor content stays 100% editable; this only recolours the output.
   Self-contained: declares --ff-* tokens locally because the canonical kit
   scopes them to [data-ff], which this page does not have.
   ========================================================================= */
body.ff-faq-skin{
  --ff-teal:#56efe0; --ff-purple:#b46cff; --ff-green:#4ae08b; --ff-orange:#fb923c;
  --ff-bg:#0b0b0d; --ff-ink:#f4f6fb;
  --ff-g1:var(--ff-teal); --ff-g2:var(--ff-purple); --ff-g3:var(--ff-orange);
  background:var(--ff-bg) !important; color:var(--ff-ink) !important;
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}

/* ── ambient layers (divs injected by the mu-plugin, sit behind everything) ── */
body.ff-faq-skin .ff-aurora{
  position:fixed; inset:0; z-index:-1; pointer-events:none; filter:blur(72px); opacity:.45;
  background:
    radial-gradient(38% 42% at 18% 22%, color-mix(in srgb, var(--ff-g1) 46%, transparent), transparent 60%),
    radial-gradient(40% 44% at 82% 28%, color-mix(in srgb, var(--ff-g2) 44%, transparent), transparent 62%),
    radial-gradient(46% 50% at 50% 90%, color-mix(in srgb, var(--ff-g3) 34%, transparent), transparent 60%);
}
body.ff-faq-skin .ff-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── strip the light backgrounds the editor baked in ── */
body.ff-faq-skin .e-con,
body.ff-faq-skin .e-con-inner,
body.ff-faq-skin .elementor-element,
body.ff-faq-skin .elementor-widget-container,
body.ff-faq-skin .page-content,
body.ff-faq-skin #content,
body.ff-faq-skin .site-main{
  background-color:transparent !important;
  background-image:none !important;
}

/* ── body copy + links ── */
body.ff-faq-skin p,
body.ff-faq-skin li,
body.ff-faq-skin .elementor-widget-text-editor,
body.ff-faq-skin .elementor-widget-html,
body.ff-faq-skin .elementor-tab-content{
  color:rgba(244,246,251,.82) !important;
}
body.ff-faq-skin a{ color:var(--ff-teal); }
body.ff-faq-skin a:hover{ color:#eafffb; }

/* ── headings ── */
body.ff-faq-skin .elementor-heading-title{ color:var(--ff-ink) !important; }
body.ff-faq-skin h1.elementor-heading-title{
  background:linear-gradient(100deg,var(--ff-g1),var(--ff-g2) 45%,var(--ff-g3) 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  font-weight:840; letter-spacing:-.01em;
}
/* category headers (H2) get the same gradient "glam" as the page title, prominent + consistent size */
body.ff-faq-skin h2.elementor-heading-title{
  background:linear-gradient(100deg,var(--ff-g1),var(--ff-g2) 45%,var(--ff-g3) 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  font-weight:840; letter-spacing:-.01em;
  font-size:clamp(26px,4vw,38px) !important; line-height:1.15;
}
/* sub-section headers (H3) must stay clearly smaller than the H2 categories
   (Elementor had them at 30/44/22 which overtook the H2 on tablet widths) */
body.ff-faq-skin h3.elementor-heading-title{ font-size:clamp(18px,2.4vw,24px) !important; line-height:1.25; }

/* ── category-heading containers (6 of them, same IDs EN+FR) shipped a 99px "stadium"
   pill + 2px gray border + white bg from the old light theme. The search filter collapses
   their toggles, leaving big empty stadium boxes. Tame to a subtle 16px card. ── */
body.ff-faq-skin .elementor-element-1281f7a7,
body.ff-faq-skin .elementor-element-30c07514,
body.ff-faq-skin .elementor-element-32a868c1,
body.ff-faq-skin .elementor-element-42bc978f,
body.ff-faq-skin .elementor-element-4a63fd3c,
body.ff-faq-skin .elementor-element-69b5cbe6{
  border-width:1px !important;
  border-color:rgba(255,255,255,.10) !important;
  border-radius:16px !important;
  --border-radius:16px !important;
}

/* ── TOGGLE accordions -> glass cards ── */
body.ff-faq-skin .elementor-toggle .elementor-toggle-item{
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(22,26,40,.55),rgba(12,14,22,.55)) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  margin-bottom:12px; overflow:hidden;
}
body.ff-faq-skin .elementor-tab-title{
  color:var(--ff-ink) !important;
  background-color:transparent !important;
  border:0 !important; padding:16px 18px !important;
  font-weight:700; font-size:16px; line-height:1.4;
  transition:color .2s, background .2s;
}
/* some toggle groups bake white bg / dark text per-element — force clear + light */
body.ff-faq-skin .elementor-toggle-item > *,
body.ff-faq-skin .elementor-tab-title *,
body.ff-faq-skin .elementor-tab-content *{ background-color:transparent !important; }
body.ff-faq-skin .elementor-tab-title,
body.ff-faq-skin .elementor-tab-title *{ color:var(--ff-ink) !important; }
body.ff-faq-skin .elementor-tab-content,
body.ff-faq-skin .elementor-tab-content *{ color:rgba(244,246,251,.82) !important; }
body.ff-faq-skin .elementor-tab-title:hover,
body.ff-faq-skin .elementor-tab-title:hover *,
body.ff-faq-skin .elementor-tab-title.elementor-active,
body.ff-faq-skin .elementor-tab-title.elementor-active *{
  color:var(--ff-teal) !important;
}
body.ff-faq-skin .elementor-tab-title:hover,
body.ff-faq-skin .elementor-tab-title.elementor-active{
  background:rgba(86,239,224,.06) !important;
}
body.ff-faq-skin .elementor-tab-title .elementor-toggle-icon svg{
  fill:var(--ff-teal) !important; width:14px; height:14px;
}
body.ff-faq-skin .elementor-tab-content{
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  padding:16px 18px !important;
  background:transparent !important;
  line-height:1.65;
}
body.ff-faq-skin .elementor-tab-content a{ color:var(--ff-teal) !important; text-decoration:underline; }

/* ── buttons -> teal pill ── */
body.ff-faq-skin .elementor-button{
  background-color:var(--ff-teal) !important;
  color:#06231f !important;
  border:0 !important; border-radius:999px !important;
  font-weight:800 !important; letter-spacing:.02em;
  transition:transform .2s, box-shadow .3s;
}
body.ff-faq-skin .elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px -10px rgba(86,239,224,.6);
}
body.ff-faq-skin .elementor-button .elementor-button-text,
body.ff-faq-skin .elementor-button i{ color:#06231f !important; }

/* ── search box (custom HTML widget input) ── */
body.ff-faq-skin .faqInput,
body.ff-faq-skin input[type=text],
body.ff-faq-skin input[type=search]{
  background:rgba(12,14,22,.62) !important;
  color:var(--ff-ink) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.ff-faq-skin .faqInput::placeholder{ color:rgba(244,246,251,.45) !important; }
body.ff-faq-skin .faqInput:focus{ outline:none; border-color:var(--ff-teal) !important; }

/* ── hide the theme/Elementor chrome; we inject the matching dark header + footer ── */
body.ff-faq-skin [data-elementor-type="footer"],
body.ff-faq-skin [data-elementor-type="header"],
body.ff-faq-skin .elementor-location-header,
body.ff-faq-skin header.site-header,
body.ff-faq-skin [data-elementor-type="footer"],
body.ff-faq-skin .elementor-location-footer,
body.ff-faq-skin footer.site-footer{ display:none !important; }

/* =========================================================================
   INJECTED DARK CHROME — matches the Home / About templates
   (markup injected by ff-faq-skin.php; styles scoped to the FAQ page)
   ========================================================================= */
body.ff-faq-skin .ff-hd{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,48px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.ff-faq-skin .ff-hd.scrolled{
  background:linear-gradient(180deg,rgba(12,14,22,.86),rgba(12,14,22,.72));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
body.ff-faq-skin .ff-logo{ display:block; }
body.ff-faq-skin .ff-logo svg{ height:30px; width:auto; display:block; }
body.ff-faq-skin .ff-nav{ display:flex; align-items:center; gap:26px; }
body.ff-faq-skin .ff-nav a{ color:rgba(244,246,251,.78) !important; text-decoration:none; font-size:13px; letter-spacing:.06em; text-transform:uppercase; transition:color .2s; }
body.ff-faq-skin .ff-nav a:hover{ color:#eafffb !important; }
body.ff-faq-skin .ff-lang{ display:inline-flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.1em; color:rgba(244,246,251,.55); }
body.ff-faq-skin .ff-lang a{ color:rgba(244,246,251,.55); text-decoration:none; transition:color .2s; }
body.ff-faq-skin .ff-lang a:hover{ color:var(--ff-teal); }
body.ff-faq-skin .ff-lang .ff-lang-cur{ color:var(--ff-ink); font-weight:700; }
body.ff-faq-skin .ff-lang .ff-lang-sep{ color:rgba(244,246,251,.3); }
body.ff-faq-skin .ff-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.04em; text-decoration:none; border-radius:999px; padding:11px 22px; font-size:13px; text-transform:uppercase; transition:transform .2s ease,box-shadow .3s ease,background .2s; }
body.ff-faq-skin .ff-btn-primary{ background:var(--ff-teal); color:#06231f !important; box-shadow:0 10px 30px -10px rgba(86,239,224,.6); }
body.ff-faq-skin .ff-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(86,239,224,.8); }
body.ff-faq-skin .ff-btn-sm{ padding:9px 18px; font-size:12px; }

body.ff-faq-skin .ff-ft{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.08);
  padding:clamp(44px,6vw,72px) clamp(16px,4vw,48px) 36px;
  margin-top:clamp(40px,6vw,72px);
}
body.ff-faq-skin .ff-ft-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:30px; max-width:1100px; margin:0 auto; }
body.ff-faq-skin .ff-ft-col h4{ margin:0 0 14px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,246,251,.5) !important; }
body.ff-faq-skin .ff-ft-col a{ display:block; color:rgba(244,246,251,.78) !important; text-decoration:none; font-size:14px; padding:5px 0; transition:color .2s; }
body.ff-faq-skin .ff-ft-col a:hover{ color:var(--ff-teal) !important; }
body.ff-faq-skin .ff-social{ display:flex; gap:12px; margin-top:4px; flex-wrap:wrap; }
body.ff-faq-skin .ff-social a{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.16); color:rgba(244,246,251,.8) !important; transition:all .2s; }
body.ff-faq-skin .ff-social a:hover{ border-color:var(--ff-teal); color:var(--ff-teal) !important; }
body.ff-faq-skin .ff-social svg{ width:18px; height:18px; }
body.ff-faq-skin .ff-ft-legal{ max-width:1100px; margin:36px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; line-height:1.6; color:rgba(244,246,251,.45) !important; }
body.ff-faq-skin .ff-ft-legal a{ color:inherit !important; text-decoration:underline; }
body.ff-faq-skin .ff-hd-right{ display:flex; align-items:center; gap:12px; }
body.ff-faq-skin .ff-navtoggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; background:none; border:1px solid rgba(255,255,255,.18); border-radius:10px; cursor:pointer; padding:0; }
body.ff-faq-skin .ff-navtoggle span{ display:block; width:18px; height:2px; background:var(--ff-ink); margin:0 auto; transition:.25s; }
body.ff-faq-skin .ff-navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.ff-faq-skin .ff-navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
body.ff-faq-skin .ff-navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:880px){
  body.ff-faq-skin .ff-navtoggle{ display:flex; }
  body.ff-faq-skin .ff-nav{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:linear-gradient(180deg,rgba(12,14,22,.98),rgba(12,14,22,.96)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.1); padding:6px 24px 16px; }
  body.ff-faq-skin .ff-nav.open{ display:flex; }
  body.ff-faq-skin .ff-nav a{ padding:13px 0; font-size:14px; border-bottom:1px solid rgba(255,255,255,.06); }
  body.ff-faq-skin .ff-nav .ff-lang{ padding:13px 0; }
}