/* =============================================================
   Keynate Help — site-wide CSS
   -------------------------------------------------------------
   This file is loaded after the template, so the rules below win
   over the template's own styles on the points they cover.

   1. Navbar: plain white in the light theme
   ============================================================= */

/* -------------------------------------------------------------
   1. Navbar background — white in the light theme
   -------------------------------------------------------------
   The site opens in the light theme (branding.json → darkMode:
   "off-default"). The top bar now uses true white (#ffffff)
   instead of the template's tinted bar, so the bar and the page
   read as one clean surface.

   The dark theme is left exactly as the template draws it: every
   rule below is switched off the moment the page is dark. */

:root {
  --kn-navbar-bg: #ffffff;
  --kn-navbar-fg: var(--kn-text, #111827);
  --kn-navbar-link: var(--kn-link, var(--kn-accent, var(--kn-text, #111827)));
}

/* The bar: the site header, the app bar, or any header element
   that carries the navigation. The inner wrapper is listed too so
   a tinted inner box cannot show through the white bar. */

/* 1a. Light theme: the site is on light (the normal state) or the
     visitor picked light. This applies on every page — home,
     article pages and the /ai screen alike. */
html:is(
  :not([data-theme="dark"]):not([data-mode="dark"]):not([data-color-mode="dark"]):not([data-kn-theme="dark"]):not([data-theme="auto"]):not([data-mode="auto"]):not([data-theme="system"]):not([class*="dark"]),
  [data-theme="light"],
  [data-mode="light"],
  [data-color-mode="light"],
  .light,
  .theme-light
)
body:not([data-theme="dark"]):not([data-mode="dark"]):not([data-color-mode="dark"]):not([class*="dark"])
:is(
  header[role="banner"],
  header:has(nav),
  header:has([role="navigation"]),
  .site-header,
  .kn-header,
  .navbar,
  .nav-bar,
  .site-nav,
  .appbar,
  .app-bar,
  .topbar,
  .masthead,
  [class*="site-header"],
  [class*="navbar"],
  [class*="topbar"],
  [class*="top-bar"],
  [class*="appbar"],
  [class*="app-bar"],
  [class*="header-inner"],
  [class*="navbar-inner"],
  [class*="topbar-inner"]
) {
  background-color: var(--kn-navbar-bg);
  background-image: none;
  color: var(--kn-navbar-fg);
}

/* Links on the bar keep the site's link colour, so they stay
   readable on the now-white bar. */
html:is(
  :not([data-theme="dark"]):not([data-mode="dark"]):not([data-color-mode="dark"]):not([data-kn-theme="dark"]):not([data-theme="auto"]):not([data-mode="auto"]):not([data-theme="system"]):not([class*="dark"]),
  [data-theme="light"],
  [data-mode="light"],
  [data-color-mode="light"],
  .light,
  .theme-light
)
body:not([data-theme="dark"]):not([data-mode="dark"]):not([data-color-mode="dark"]):not([class*="dark"])
:is(
  header[role="banner"],
  header:has(nav),
  header:has([role="navigation"]),
  .site-header,
  .kn-header,
  .navbar,
  .nav-bar,
  .site-nav,
  .appbar,
  .app-bar,
  .topbar,
  .masthead,
  [class*="site-header"],
  [class*="navbar"],
  [class*="topbar"],
  [class*="top-bar"],
  [class*="appbar"],
  [class*="app-bar"],
  [class*="header-inner"],
  [class*="navbar-inner"],
  [class*="topbar-inner"]
)
a {
  color: var(--kn-navbar-link, var(--kn-color-link, #FF8A3D));
}

/* 1b. The site follows the device ("auto") and the device is on
     light — the bar goes white here too. */
@media (prefers-color-scheme: light) {
  html:is([data-theme="auto"], [data-mode="auto"], [data-theme="system"], [data-mode="system"], .auto, .system)
  body:not([data-theme="dark"]):not([data-mode="dark"]):not([class*="dark"])
  :is(
    header[role="banner"],
    header:has(nav),
    header:has([role="navigation"]),
    .site-header,
    .kn-header,
    .navbar,
    .nav-bar,
    .site-nav,
    .appbar,
    .app-bar,
    .topbar,
    .masthead,
    [class*="site-header"],
    [class*="navbar"],
    [class*="topbar"],
    [class*="top-bar"],
    [class*="appbar"],
    [class*="app-bar"],
    [class*="header-inner"],
    [class*="navbar-inner"],
    [class*="topbar-inner"]
  ) {
    background-color: var(--kn-navbar-bg);
    background-image: none;
    color: var(--kn-navbar-fg);
  }

  html:is([data-theme="auto"], [data-mode="auto"], [data-theme="system"], [data-mode="system"], .auto, .system)
  body:not([data-theme="dark"]):not([data-mode="dark"]):not([class*="dark"])
  :is(
    header[role="banner"],
    header:has(nav),
    header:has([role="navigation"]),
    .site-header,
    .kn-header,
    .navbar,
    .nav-bar,
    .site-nav,
    .appbar,
    .app-bar,
    .topbar,
    .masthead,
    [class*="site-header"],
    [class*="navbar"],
    [class*="topbar"],
    [class*="top-bar"],
    [class*="appbar"],
    [class*="app-bar"],
    [class*="header-inner"],
    [class*="navbar-inner"],
    [class*="topbar-inner"]
  )
  a {
    color: var(--kn-navbar-link, var(--kn-color-link, #FF8A3D));
  }
}

/* 1c. The /ai screen: if it draws its own bar inside the page,
     that bar goes white as well. */
html:is(
  :not([data-theme="dark"]):not([data-mode="dark"]):not([data-color-mode="dark"]):not([data-kn-theme="dark"]):not([data-theme="auto"]):not([data-mode="auto"]):not([data-theme="system"]):not([class*="dark"]),
  [data-theme="light"],
  [data-mode="light"],
  [data-color-mode="light"],
  .light,
  .theme-light
)
body:not([data-theme="dark"]):not([data-mode="dark"]):not([data-color-mode="dark"]):not([class*="dark"])
:is([data-screen="ai"], [data-page="ai"], [data-route="/ai"], .screen-ai, .ai-screen)
:is(
  header[role="banner"],
  header:has(nav),
  [class*="appbar"],
  [class*="app-bar"],
  [class*="ai-header"],
  [class*="ai-bar"]
) {
  background-color: var(--kn-navbar-bg);
  background-image: none;
  color: var(--kn-navbar-fg);
}

/* -------------------------------------------------------------
   2. /ai screen — theme-safe text and surfaces (light + dark)
   Every colour below uses the theme's --kn-color-* tokens, so
   headings, body text, muted text, links, buttons, inputs,
   cards and code blocks stay readable whether the visitor is on
   light or dark theme. Nothing is hard-coded.
   ------------------------------------------------------------- */

html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) {
  background: var(--kn-color-background);
  color: var(--kn-color-text);
}

/* headings */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) h1,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) h2,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) h3,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) h4,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) h5,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) h6 {
  color: var(--kn-color-heading);
}

/* body text */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) p,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) span,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) div,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) li,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) td,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) th {
  color: var(--kn-color-text);
}

/* muted / secondary text */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .text-muted,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) [class*="muted"],
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .kn-text-muted,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) small {
  color: var(--kn-color-text-muted);
}

/* links */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) a {
  color: var(--kn-color-link);
  text-decoration: underline;
}
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) a:hover {
  color: var(--kn-color-link-hover);
}
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) a:visited {
  color: var(--kn-color-link-visited);
}

/* inputs and text areas */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) input,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) textarea,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) select {
  background: var(--kn-color-input-bg);
  color: var(--kn-color-input-text);
  border-color: var(--kn-color-input-border);
}

/* buttons */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) button,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .kn-button,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .ai-button {
  background: var(--kn-color-button-primary-bg);
  color: var(--kn-color-button-primary-text);
  border-color: var(--kn-color-button-primary-bg);
}
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) button:hover,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .kn-button:hover,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .ai-button:hover {
  background: var(--kn-color-button-primary-hover);
}

/* cards and panels */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .kn-card,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .ai-card,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .panel,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) .ai-panel {
  background: var(--kn-color-surface);
  border-color: var(--kn-color-border);
  color: var(--kn-color-text);
}

/* code blocks */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) pre,
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) code {
  background: var(--kn-color-surface-sunken);
  color: var(--kn-color-text);
  border-color: var(--kn-color-border);
}

/* keyboard focus */
html:is([data-screen="ai"], [data-route="/ai"], .screen-ai, .ai-screen) :focus-visible {
  outline: 2px solid var(--kn-color-focus);
  outline-offset: 2px;
}

footer{background:var(--kn-color-footer-bg)!important;color:var(--kn-color-footer-text)}