/* IQ Buddy — site behavior CSS on top of theme.css (design tokens stay untouched).
   Only two things live here: the JS-driven bits the old React app did inline, and a
   restored responsive hook. */

/* Robust hide: wins over inline display:flex on toggled elements (cookie banner,
   settings panel, theme icons, SPA pages). */
[hidden] { display: none !important; }

/* SPA page switching (routing is client-side, one document per language). */
.kb-page[hidden] { display: none !important; }

/* Restore the intended responsive collapse for the inline 2-column grids.
   The original markup carried a `data-kbcols` hook whose handler was lost in the
   export, so Impressum/Kontakt never collapsed on mobile. */
@media (max-width: 940px) {
  [data-kbcols] { grid-template-columns: 1fr !important; }
}

/* Language switcher: the original used <button>; we use real <a> links (SEO/nav).
   Mirror the pill styling onto the anchors. Scoped under .kb-app so the base color
   beats the generic `.kb-app a:not(.kb-btn)` link rule (equal specificity, site.css
   loads last). Declarations copied 1:1 from theme.css's `.kb-lang button` rules. */
.kb-app .kb-lang a {
  display: inline-flex;
  align-items: center;
  font: 800 12.5px var(--font-body);
  letter-spacing: .04em;
  color: var(--tx-body);
  background: transparent;
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
  transition: all .15s var(--ease-out);
}
.kb-app .kb-lang a:hover:not(.on) { color: #fff; }
.kb-app .kb-lang a.on { background: var(--elec); color: #fff; }

/* Dark-mode "white flip" bands (Use-Cases + CTA). The React version set these via
   inline styles computed from the JS theme; as a static site we drive them from the
   theme attribute. Faithful to the original render: white band + dark heading text,
   inner cards unchanged. Light theme is untouched (already light). */
.kb-app[data-theme="dark"] .kb-flip-white { background: #ffffff; }
.kb-app[data-theme="dark"] .kb-flip-white .kb-center .kb-eyebrow { color: #006fff; }
.kb-app[data-theme="dark"] .kb-flip-white .kb-center .kb-h { color: #0f1e3d; }
.kb-app[data-theme="dark"] .kb-flip-white .kb-center .kb-lead { color: #43506b; }
.kb-app[data-theme="dark"] .kb-cta { background: #ffffff; }