/* ═══════════════════════════════════════════════════════════════════════
   kk-tokens.css — Kennerkreis design system
   Single source of truth for colors, typography, buttons, accessibility.
   Load this FIRST in every public page (before page-specific styles).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Surfaces ─────────────────────────────────────────────────────── */
  --white:          #ffffff;
  --off-white:      #f8f9fc;
  --cream:          #faf8f4;
  --cream-card:     #f4f1eb;
  --bg:             #faf8f4;        /* primary page background */
  --surface:        #ffffff;        /* elevated cards, modals */
  --border:         #e4e8f0;
  --border-dark:    #c8c0b4;        /* warmer border for cream ecosystem */

  /* ─── Text ─────────────────────────────────────────────────────────── */
  --text:           #0a1020;
  --ink:            #1f2410;        /* warm dark — used for dark CTA bg + dense body text on cream */
  --ink-mid:        #3d3830;
  --text-muted:     #5a6480;
  --text-dim:       #9aa0b8;

  /* ─── Brand olive ──────────────────────────────────────────────────── */
  --olive:          #4a5c20;
  --olive-mid:      #5a6e2a;
  --olive-light:    #8a9e4a;
  --olive-dim:      #eef2e4;
  --olive-faint:    #f6f8f0;
  --olive-avatar:   #cdd6b3;        /* light sage for K-circle avatars */
  --kk:             #4a5c20;        /* medium-olive used for K-circle logo + olive CTAs (join, apply-wizard, register) */

  /* ─── Secondary / semantic ─────────────────────────────────────────── */
  --blue:           #0d3d8a;
  --blue-mid:       #1a5fbf;
  --blue-light:     #4a8fd4;
  --blue-dim:       #eaf0fc;
  --green:          #15a360;
  --amber:          #c27c10;
  --red:            #b36060;

  /* ─── Lamborghini orange ───────────────────────────────────────────────
     Reserved for tiny, deliberate personality moments. Used for:
       1. The ADMIN badge in the admin panel top bar (visual cockpit cue)
       2. The "+" in "Enterprise+" across all marketing pages (signals
          "this is the top-tier" with a wink, without shouting)
     If you reach for this color, ask: is this a moment that earns it?
     The whole point is that it stays rare. */
  --lambo:          #e25822;        /* "Arancio Borealis"-adjacent, accessible */
  --lambo-mid:      #c84810;        /* hover/darker variant */

  /* ─── Fonts ────────────────────────────────────────────────────────── */
  --font-display:   'Lora', Georgia, serif;
  --font-body:      'DM Sans', sans-serif;
  --font-mono:      'DM Mono', monospace;
}

/* Short-form aliases for backward compat with existing about.html / how-it-works.html CSS */
:root {
  --font:           var(--font-body);
  --display:        var(--font-display);
  --mono:           var(--font-mono);
  --muted:          var(--text-muted);
  --dim:            var(--text-dim);

  /* ─── Layout ─────────────────────────────────────────────────────────
     Page-wide content cap. The site nav, footer, and every .section-inner
     / .page-inner / equivalent should center within this width on viewports
     wider than --page-max. Use the pattern:
       padding: 0 max(<gutter>, calc((100% - var(--page-max)) / 2));
     to keep backgrounds full-width while content centers.
     ─────────────────────────────────────────────────────────────────── */
  --page-max:       1280px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Global base
   ═══════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* When .kk-nav is fixed at top, push the next sibling main below it.
   Homepage uses bare <nav> (not .kk-nav) so its hero handles top spacing. */
.kk-nav ~ main { padding-top: 60px; }

/* ═══════════════════════════════════════════════════════════════════════
   Button system — five treatments, all olive-family
   Usage: <a class="btn btn--primary">Apply</a>
   ═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--primary {
  background: var(--olive);
  color: #ffffff;
  border-color: var(--olive);
}
.btn--primary:hover {
  background: var(--olive-mid);
  border-color: var(--olive-mid);
}
.btn--outline {
  background: transparent;
  color: var(--olive);
  border-color: var(--olive);
}
.btn--outline:hover {
  background: var(--olive);
  color: #ffffff;
}
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: transparent;
}
.btn--ghost:hover {
  color: var(--text);
}
.btn--subtle {
  background: var(--olive-dim);
  color: var(--olive);
  border-color: transparent;
}
.btn--subtle:hover {
  background: #e0e8cc;
}
.btn--danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn--danger:hover {
  background: var(--red);
  color: #ffffff;
}
.btn--large  { padding: 14px 28px; font-size: 14px; }
.btn--small  { padding: 7px 14px;  font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   .kk-plus — Lamborghini-orange "+" used in "Enterprise+"
   Tiny detail: the + lights up in the same orange as the ADMIN badge.
   Inherits font-size from the parent so it scales with whatever heading
   or label it's inside. Bold for visual weight; the orange does the
   "premium tier" signal without needing extra ornamentation.

   Usage:  Enterprise<span class="kk-plus">+</span>
   ═══════════════════════════════════════════════════════════════════════ */

.kk-plus {
  color: var(--lambo);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   Focus rings — keyboard accessibility
   ═══════════════════════════════════════════════════════════════════════ */

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Accessibility utilities
   ═══════════════════════════════════════════════════════════════════════ */

.skip-to-main {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 16px;
  background: var(--olive);
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform .2s;
  z-index: 9999;
  font-size: 13px;
  font-weight: 500;
}
.skip-to-main:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Logo tagline — centered under brand mark (used in nav + footer)
   ═══════════════════════════════════════════════════════════════════════ */

.nav-logo-tagline {
  font-family: var(--font-display);
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  margin-top: 1px;
  display: block;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   Active nav state — applied via aria-current="page" (current page)
   or data-section-active="true" (current section, e.g. dropdown toggle)
   ═══════════════════════════════════════════════════════════════════════ */

.nav-link[aria-current="page"],
.kk-nav-link[aria-current="page"],
.kk-nav-home-btn[aria-current="page"],
nav a[aria-current="page"] {
  color: var(--olive);
  font-weight: 600;
}

/* Dropdown items inside an open menu — when this is the current page */
.nav-dd-item[aria-current="page"] .dd-label,
.kk-dd-item[aria-current="page"] .kk-dd-label {
  color: var(--olive);
  font-weight: 600;
}

/* Dropdown toggle (the "Advisors" / "Recruiters" trigger button itself)
   gets the olive treatment when the current page belongs to that section.
   Set by /assets/kk-nav-active.js on load. */
.nav-dropdown-toggle[data-section-active="true"],
.kk-dd-toggle[data-section-active="true"] {
  color: var(--olive) !important;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive nav — covers both class systems (.nav-logo-* and .kk-nav-brand-*)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  nav { padding: 0 24px !important; }
  .nav-links, .kk-nav-links { gap: 18px !important; }
}

@media (max-width: 720px) {
  nav { padding: 0 16px !important; }
  .nav-links, .kk-nav-links { gap: 14px !important; }
  .nav-link, .kk-nav-link { font-size: 12px !important; }
}

@media (max-width: 560px) {
  /* Hide tagline on very narrow screens — keep brand mark visible */
  .nav-logo-sub, .kk-nav-brand-sub { display: none; }
  .nav-logo-name, .kk-nav-brand-name { font-size: 12px !important; letter-spacing: 1.5px !important; }
  .nav-links, .kk-nav-links { gap: 10px !important; }
  .nav-link, .kk-nav-link { font-size: 11px !important; }
}

@media (max-width: 420px) {
  /* On smallest phones — keep nav HORIZONTAL but tighten to fit.
     Previously this stacked the nav vertically — that caused
     "logo on row 1, Sign In on row 2" which is worse than tight horizontal. */
  nav { padding: 0 12px !important; }
  .nav-logo svg, .kk-nav-logo svg { width: 28px !important; height: 28px !important; }
  .nav-logo-name, .kk-nav-brand-name { font-size: 11px !important; letter-spacing: 1px !important; }
  .nav-actions { gap: 6px !important; }
  .nav-actions .btn-signin-main, .kk-nav-signin {
    padding: 6px 14px !important;
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile menu overlay fix
   Without this, the .nav-links.mobile-open list flows inline within the
   nav's flex container — items end up hidden behind hero/page content
   and have no background. This makes the dropdown a proper floating
   panel anchored under the top bar, with a solid background, shadow,
   and z-index above the page content.

   Applies on every public page (10 files share the .nav-links pattern)
   without needing to edit each one.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Make the parent nav a positioning context for the dropdown */
  nav {
    position: relative;
    /* Force single-row layout — overrides per-page `flex-wrap: wrap`
       in inline page CSS (index.html, about.html, etc.). Without this,
       Log In + hamburger fall to a second row at narrow widths, which
       looks broken. */
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* Logo block — never wrap, never shrink past content */
  .nav-logo-wrap, .kk-nav-brand {
    flex: 0 0 auto;
    min-width: 0;            /* allow text inside to truncate if needed */
  }

  /* Right-side actions container — keep on the same row, hugs the right */
  .nav-actions, .kk-nav-actions {
    margin-left: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px !important;
  }

  /* Hide nav links by default on mobile (they live in the dropdown panel) —
     a few pages forget this rule, here's the safety net. */
  .nav-links, .kk-nav-links {
    display: none;
  }
  .nav-links.mobile-open,
  .kk-nav-links.mobile-open {
    /* This rule's positioning is handled below in the dropdown overlay block. */
    display: flex;
  }

  /* When the hamburger toggles `.mobile-open`, render as a panel below
     the top bar — NOT as a flex item inside the nav row.
     Applies to BOTH nav class systems (legacy `.nav-links` and `.kk-nav-links`). */
  .nav-links.mobile-open,
  .kk-nav-links.mobile-open {
    position: absolute;
    top: 100%;            /* directly under the nav bar */
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;            /* override any inline-flow margin */
    padding: 8px 12px 14px;
    background: var(--surface, #ffffff);
    border-top: 1px solid var(--border, #e4e8f0);
    box-shadow: 0 8px 22px rgba(20, 25, 15, 0.12);
    z-index: 1000;        /* above hero, search bars, etc. */
    flex-direction: column;
    gap: 4px;
    /* Items inside still stack vertically — this is set in page-level CSS */
  }

  /* Style the items inside the kk-nav dropdown so they look like menu rows
     instead of inline-flow links squashed together. */
  .kk-nav-links.mobile-open > a,
  .kk-nav-links.mobile-open > .kk-dd,
  .kk-nav-links.mobile-open > .kk-dd > .kk-dd-toggle {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    font-size: 14px !important;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
  }
  .kk-nav-links.mobile-open > a:hover,
  .kk-nav-links.mobile-open > .kk-dd-toggle:hover {
    background: var(--olive-faint, #f6f8f0);
    color: var(--olive);
  }

  /* Backdrop body-scroll lock isn't needed; the panel is short. But make
     sure the page below doesn't bleed through visually if the panel is
     translucent for any reason. The solid background above already does
     this; this rule is a safety net for older inline overrides. */
  .nav-links.mobile-open > *,
  .kk-nav-links.mobile-open > * {
    background: transparent;  /* items stay transparent — the parent owns the bg */
  }

  /* Tighten the right-side actions so logo + Log In + hamburger all fit
     on one row even at 360px width. */
  .nav-actions .btn-signin-main,
  .kk-nav-signin {
    padding: 7px 16px !important;
    font-size: 12px !important;
    min-width: 0 !important;     /* override page rules that force min-width */
    white-space: nowrap;
  }

  /* Hamburger button — compact, always rightmost.
     Also matches the auto-injected `.kk-hamburger-btn` for kk-nav pages. */
  .hamburger-btn,
  .kk-hamburger-btn {
    flex: 0 0 auto;
    margin-left: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    border-radius: 6px;
    /* Visual order: place hamburger to the LEFT of the Log In button,
       regardless of the order they appear in the HTML. Default order
       on flex items is 0; setting Log In to 1 pushes it after the
       hamburger (which keeps the default 0). */
    order: 0;
  }

  /* Log In button always rightmost on mobile */
  .nav-actions .btn-signin-main,
  .kk-nav-actions .kk-nav-signin {
    order: 1;
  }
  .kk-hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text, #0a1020);
    border-radius: 2px;
    transition: transform .15s, opacity .15s;
  }
  .kk-hamburger-btn:hover {
    background: var(--olive-faint, #f6f8f0);
  }
  .kk-hamburger-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .kk-hamburger-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .kk-hamburger-btn[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}

/* On desktop, hide the auto-injected kk-hamburger — it's mobile-only.
   The legacy .hamburger-btn is hidden via per-page CSS already. */
@media (min-width: 768px) {
  .kk-hamburger-btn {
    display: none !important;
  }
}

@media (max-width: 380px) {
  /* On very narrow phones, drop Log In to icon-style or shrink further.
     Currently we just shrink padding more — the button still says "Log In". */
  .nav-actions .btn-signin-main,
  .kk-nav-signin {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  .nav-logo-name, .kk-nav-brand-name {
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile safety net — overflow + grid collapse
   These run on every public page to catch any responsive escapes
   (multi-column grids that the page-specific CSS forgot to override).
   ═══════════════════════════════════════════════════════════════════════ */

html, body {
  /* Prevents horizontal scroll caused by overflowing children.
     Safer than per-element fixes when we can't audit every component. */
  overflow-x: hidden;
  max-width: 100vw;
}

@media (max-width: 720px) {
  /* Force any still-uncollapsed multi-column grid into a single column.
     The :where() wrapper keeps specificity low so page-specific rules win
     when they ARE present — only naked grids get caught here. */
  :where(main section) > :where([class*="grid"], [class*="cols"], [class*="-row"]):not(.kk-nav-links):not(.nav-links):not(.hero-stats):not(.kk-site-footer-links) {
    grid-template-columns: 1fr !important;
  }
  /* Hero-style 2-column wrappers that use generic class names */
  :where(main section) .hero-content,
  :where(main section) [class$="-content"][style*="grid"] {
    grid-template-columns: 1fr !important;
  }
  /* Common card containers — make sure inner content doesn't overflow */
  :where(main) [class*="card"] {
    max-width: 100%;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Print — hide chrome, expand content for legibility
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
  nav, footer, .nav-links, .kk-nav-links,
  .skip-to-main, .cta-block, .cta-section,
  [role="banner"] [data-print-hide],
  button, .btn { display: none !important; }
  body { background: white !important; color: black !important; font-size: 11pt; }
  a { color: black !important; text-decoration: none; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  main { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Unified site footer — single source of truth for every page
   Background: dark olive (warm, brand-aligned, replaces near-black navy)
   ═══════════════════════════════════════════════════════════════════════ */

.kk-site-footer {
  background: #1f2410;
  padding: 36px max(5%, calc((100% - var(--page-max, 1280px)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.kk-site-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.kk-site-footer-brand-text {
  line-height: 1.15;
  text-align: center;
}
.kk-site-footer-brand-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: rgba(255,255,255,.78);
}
.kk-site-footer-brand-tagline {
  font-family: var(--font-display);
  font-size: 10px;
  font-style: italic;
  color: rgba(255,255,255,.42);
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.kk-site-footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.kk-site-footer-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .15s;
}
.kk-site-footer-link:hover { color: rgba(255,255,255,.9); }
.kk-site-footer-link[aria-current="page"] {
  color: rgba(205,214,179,.95);
}
.kk-site-footer-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,.32);
  letter-spacing: 0.02em;
  text-align: right;
}

@media (max-width: 900px) {
  .kk-site-footer { padding: 32px 5%; gap: 18px; }
  .kk-site-footer-links { gap: 22px; }
}
@media (max-width: 720px) {
  .kk-site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 5%;
    gap: 18px;
  }
  .kk-site-footer-links { gap: 16px; row-gap: 10px; }
  .kk-site-footer-copy { text-align: center; }
}

/* ─── Static Auth Header Slot (locked 2026-05-31) ──────────────────────
 *
 * Static-HTML auth header. Single 150px container with two children:
 *   - .kk-authslot-loggedout : shown when html.kk-logged-out
 *   - .kk-authslot-loggedin  : shown when html.kk-logged-in
 * Class on <html> is set by an inline <script> in each page's <head>
 * (synchronously reads localStorage.kk_access_token before body parses).
 *
 * The container is hidden until <html> gets `kk-authstate-known` to
 * eliminate any chance of "both visible briefly" if the inline script
 * runs slightly out-of-order with the initial paint.
 *
 * No JavaScript DOM swap after page load. The element is statically
 * sized at 150x36 from the very first paint. No flash.
 * ──────────────────────────────────────────────────────────────────── */

.kk-authslot {
  width: 150px;
  height: 36px;
  flex: 0 0 150px;
  border-radius: 8px;
  background: #4a5c20;
  color: #ffffff;
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(74,92,32,.18);
  overflow: hidden;
  align-items: stretch;
  display: inline-flex;
  visibility: hidden;
  transition: background .15s, box-shadow .15s;
}
html.kk-authstate-known .kk-authslot { visibility: visible; }
.kk-authslot:hover {
  background: #3a4818;
  box-shadow: 0 3px 10px rgba(74,92,32,.25);
}

.kk-authslot-loggedout,
.kk-authslot-loggedin {
  display: none;
  width: 100%;
  align-items: stretch;
}
html.kk-logged-out .kk-authslot .kk-authslot-loggedout { display: inline-flex; }
html.kk-logged-in  .kk-authslot .kk-authslot-loggedin  { display: inline-flex; }

/* Logged-out: single full-width "Log in" link */
.kk-authslot-loggedout {
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #ffffff;
  text-decoration: none;
  font: inherit;
}
.kk-authslot-loggedout:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* Logged-in: split pill "Workspace | logout-icon" */
.kk-authslot-loggedin {
  width: 100%;
}
.kk-authslot-workspace {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font: inherit;
  min-width: 0;
}
.kk-authslot-workspace:hover { background: rgba(255,255,255,.08); }
.kk-authslot-workspace:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}
.kk-authslot-sep {
  flex: 0 0 1px;
  width: 1px;
  background: rgba(255,255,255,.22);
  align-self: stretch;
  margin: 6px 0;
}
.kk-authslot-logout {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  background: transparent;
  border: 0;
  padding: 0;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
}
.kk-authslot-logout:hover { background: rgba(255,255,255,.12); }
.kk-authslot-logout:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* Suppress old per-page button styles that might otherwise leak into
   the .kk-authslot if a stale page still references them somehow.
   These were the styling sources for the original Log In / Log out
   buttons we replaced. */
.kk-authslot .kk-nav-signin,
.kk-authslot .btn-logout { all: unset; }