/* =====================================================================
   Kyle Sands Author Hub — theme system
   One layout, swappable skins. Each theme sets tokens via [data-theme].
   Tokens drive both our own --ks-* vars and Bootstrap's --bs-* vars so
   Bootstrap components retheme automatically.
   ===================================================================== */

:root {
  --ks-radius: 14px;
  --ks-radius-sm: 9px;
  --ks-maxw: 1140px;
  --ks-font-heading: "Playfair Display", Georgia, serif;
  --ks-font-body: "Source Serif 4", Georgia, serif;
  --ks-bg: #ffffff;
  --ks-surface: #ffffff;
  --ks-surface-2: #f5f6f8;
  --ks-text: #1d2433;
  --ks-muted: #5b6472;
  --ks-primary: #7c5cff;
  --ks-primary-rgb: 124, 92, 255;
  --ks-link: #7758f5;
  --ks-link-rgb: 119, 88, 245;
  --ks-on-primary: #ffffff;
  --ks-accent: #7c5cff;
  --ks-border: #e6e8ee;
  --ks-hero: linear-gradient(135deg, #6a3df0 0%, #9b6bff 100%);
  --ks-hero-text: #ffffff;
  --ks-shadow: 0 10px 30px rgba(20, 22, 40, .08);
}

/* ---- LITERARY (default, light) ---- */
[data-theme="literary"] {
  --ks-font-heading: "Cormorant Garamond", Georgia, serif;
  --ks-font-body: "Source Serif 4", Georgia, serif;
  --ks-bg: #ffffff;
  --ks-surface: #ffffff;
  --ks-surface-2: #f6f5f2;
  --ks-text: #1d2433;
  --ks-muted: #686f7c;
  --ks-primary: #7c5cff;
  --ks-primary-rgb: 124, 92, 255;
  --ks-link: #7758f5;
  --ks-link-rgb: 119, 88, 245;
  --ks-accent: #8b6f45;
  --ks-border: #ece9e2;
  --ks-hero: linear-gradient(135deg, #2a2540 0%, #574b7e 100%);
  --ks-hero-text: #ffffff;
}

/* ---- MIDNIGHT (dark) ---- */
[data-theme="midnight"] {
  --ks-font-heading: "Cinzel", Georgia, serif;
  --ks-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ks-bg: #0f1220;
  --ks-surface: #171a2b;
  --ks-surface-2: #1e2235;
  --ks-text: #e8e6f0;
  --ks-muted: #a6a3bd;
  --ks-primary: #c9a14a;
  --ks-primary-rgb: 201, 161, 74;
  --ks-link: #c9a14a;
  --ks-link-rgb: 201, 161, 74;
  --ks-on-primary: #1a1300;
  --ks-accent: #7aa2ff;
  --ks-border: #2a2f47;
  --ks-hero: radial-gradient(1200px 400px at 70% -10%, #2a2350 0%, #0f1220 60%);
  --ks-hero-text: #f3f1ff;
  --ks-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}

/* ---- WARM (light, playful) ---- */
[data-theme="warm"] {
  --ks-font-heading: "Fredoka", "Trebuchet MS", sans-serif;
  --ks-font-body: "Nunito", system-ui, sans-serif;
  --ks-bg: #fffaf3;
  --ks-surface: #ffffff;
  --ks-surface-2: #fdf1e3;
  --ks-text: #3a2a1f;
  --ks-muted: #816956;
  --ks-primary: #e8693b;
  --ks-primary-rgb: 232, 105, 59;
  --ks-link: #ba542f;
  --ks-link-rgb: 186, 84, 47;
  --ks-accent: #257e72;
  --ks-border: #f1e2d0;
  --ks-hero: linear-gradient(135deg, #ff8a5b 0%, #ffd166 100%);
  --ks-hero-text: #4a2310;
}

/* ---- CLASSIC (light, traditional) ---- */
[data-theme="classic"] {
  --ks-font-heading: "Playfair Display", Georgia, serif;
  --ks-font-body: "Lora", Georgia, serif;
  --ks-bg: #f7f4ee;
  --ks-surface: #fffdf8;
  --ks-surface-2: #efe9dd;
  --ks-text: #2b2622;
  --ks-muted: #6d645a;
  --ks-primary: #8a5a2b;
  --ks-primary-rgb: 138, 90, 43;
  --ks-link: #8a5a2b;
  --ks-link-rgb: 138, 90, 43;
  --ks-accent: #4a5d52;
  --ks-border: #e2d9c8;
  --ks-hero: linear-gradient(135deg, #5b4634 0%, #8a6c4a 100%);
  --ks-hero-text: #fbf7ef;
}

/* ---- Map tokens onto Bootstrap + base elements ---- */
:root,
[data-theme] {
  --bs-body-bg: var(--ks-bg);
  --bs-body-color: var(--ks-text);
  /* Primary Bootstrap components (buttons, badges, .bg/.text-primary) use the AA-safe
     --ks-link shade so white-on-primary / primary-on-light clear 4.5:1. The vivid
     --ks-primary is kept only for the decorative nav underline (no text on it). */
  --bs-primary: var(--ks-link);
  --bs-primary-rgb: var(--ks-link-rgb);
  --bs-border-color: var(--ks-border);
  --bs-link-color: var(--ks-link);
  --bs-link-color-rgb: var(--ks-link-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--ks-link), #000 15%);
  --bs-font-sans-serif: var(--ks-font-body);
}

body {
  background-color: var(--ks-bg);
  color: var(--ks-text);
  font-family: var(--ks-font-body);
  font-size: 1.05rem;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4, .display-5,
.ks-brand {
  font-family: var(--ks-font-heading);
  letter-spacing: .2px;
}

main#main .container { max-width: var(--ks-maxw); }

/* Header / nav — self-contained sticky bar (mirrors the forum's #ks-hubbar so the
   two navbars match exactly: same fixed positioning + explicit metrics). */
/* NAVBAR — shared explicit spec (the "boats way").
   Both the hub bar (this) and the forum hub bar (bridge overall_header_body_before.html)
   use IDENTICAL explicit metrics so they render the same regardless of widget/markup
   differences: a fixed 75px height with content flex-centered, and nav-links with
   ZERO vertical padding (so Bootstrap's default 0.5rem can't vary the height). Keep
   these values in sync across both files. No per-element nudges. */
.navbar.ks-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1031;
  padding: 0.75rem 0;
  background-color: var(--ks-surface);
  border-bottom: 1px solid var(--ks-border);
  backdrop-filter: saturate(1.1);
  line-height: 1.7;
}
.navbar.ks-nav .ks-brand {
  font-family: var(--ks-font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .2px;
  color: var(--ks-text);
  line-height: 1.7;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.navbar.ks-nav .ks-brand-mark { width: 30px; height: 30px; display: block; }
/* Cross-app parity nudges. The hub (Yii + its Bootstrap/CSS) and the forum (phpBB +
   scaffoldBB) render the SAME navbar markup + CSS slightly differently — the hub bar
   comes out 2px shorter and its brand/nav spread ~7px more than the forum's. These two
   transforms (visual only, no layout shift) re-center the hub to match the forum bar
   exactly (verified by screenshot). The forum side trims 2px of bottom padding to match
   the hub's 75px height. This is the irreducible cost of two rendering environments. */
.navbar.ks-nav .ks-brand { transform: translateY(7px); }
.navbar.ks-nav .navbar-nav { transform: translateY(-2px); }
.navbar.ks-nav .nav-link {
  color: var(--ks-muted);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.7;
}
.navbar.ks-nav .nav-link:hover,
.navbar.ks-nav .nav-link:focus,
.navbar.ks-nav .nav-link.active {
  color: var(--ks-link);
  background-color: transparent;
}
/* Active/hover underline accent — grows from center, no layout shift. Excludes the
   account dropdown toggle (Bootstrap uses ::after for its caret). */
.navbar.ks-nav .nav-link:not(.dropdown-toggle) {
  position: relative;
}
.navbar.ks-nav .nav-link:not(.dropdown-toggle)::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--ks-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}
.navbar.ks-nav .nav-link:not(.dropdown-toggle):hover::after,
.navbar.ks-nav .nav-link:not(.dropdown-toggle):focus::after,
.navbar.ks-nav .nav-link:not(.dropdown-toggle).active::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .navbar.ks-nav .nav-link:not(.dropdown-toggle)::after { transition: none; }
}
/* Account dropdown — inline-SVG person icon + caret (same as the forum bar), so
   suppress Bootstrap's ::after caret to avoid a double. */
.navbar.ks-nav .ks-acct-ico { vertical-align: -0.125em; }
.navbar.ks-nav .ks-caret { vertical-align: 0.08em; margin-left: 0.3em; }
.navbar.ks-nav .dropdown-toggle::after { display: none; }
/* spacer reserves the fixed bar's height (JS keeps it exact across wrap/resize) */
.ks-nav-spacer { height: 64px; }

/* Buttons — use the AA-safe --ks-link shade (white-on-bg / bg-on-light clear 4.5:1). */
.btn-primary {
  --bs-btn-bg: var(--ks-link);
  --bs-btn-border-color: var(--ks-link);
  --bs-btn-color: var(--ks-on-primary, #fff);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ks-link) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ks-link) 85%, #000);
  --bs-btn-hover-color: var(--ks-on-primary, #fff);
}
.btn-outline-primary {
  --bs-btn-color: var(--ks-link);
  --bs-btn-border-color: var(--ks-link);
  --bs-btn-hover-bg: var(--ks-link);
  --bs-btn-hover-border-color: var(--ks-link);
  --bs-btn-hover-color: var(--ks-on-primary, #fff);
}

/* Hero */
.ks-hero {
  background: var(--ks-hero);
  color: var(--ks-hero-text);
  border-radius: var(--ks-radius);
  padding: 4rem 3rem;
  box-shadow: var(--ks-shadow);
}
.ks-hero h1 { color: var(--ks-hero-text); }
.ks-hero .lead { opacity: .9; }

/* Cards / surfaces */
.ks-card {
  background: var(--ks-surface);
  border: 1px solid var(--ks-border);
  border-radius: var(--ks-radius);
  box-shadow: var(--ks-shadow);
}
.ks-section-title {
  font-family: var(--ks-font-heading);
  position: relative;
  margin-bottom: 1.5rem;
}
.ks-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ks-accent);
}
.text-muted-ks { color: var(--ks-muted) !important; }

/* Book cover placeholder */
.ks-cover {
  aspect-ratio: 1600 / 2560;
  border-radius: var(--ks-radius-sm);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ks-primary) 70%, #000) 0%,
                            color-mix(in srgb, var(--ks-accent) 60%, #000) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--ks-font-heading);
  box-shadow: var(--ks-shadow);
}

/* Footer */
.ks-footer {
  background: var(--ks-surface);
  border-top: 1px solid var(--ks-border);
  color: var(--ks-muted);
}

/* Newsletter band */
.ks-band {
  background: var(--ks-surface-2);
  border-radius: var(--ks-radius);
}