/* === sholuv.net site theme ===
   One look for every page, taken from /recon and /gitwho:
   GitHub-dark surfaces, Grinx yellow accent, system sans, the avatar as the "o"
   in wordmarks, and Grinx docked bottom right (js/grinx.js).

   Load this AFTER a page's own stylesheet. It remaps each page's older variables
   (teal, AI purple, dashboard accent) onto the shared tokens below, so the page
   layouts stay as they are and only the palette and chrome change. */

/* --- Shared tokens (dark default) --- */
html:root,
html:root[data-theme="dark"] {
  --gx-bg: #0d1117;
  --gx-bg-2: #161b22;
  --gx-bg-3: #21262d;
  --gx-hover: #30363d;
  --gx-border: #30363d;
  --gx-text: #e6edf3;
  --gx-text-2: #8b949e;
  --gx-muted: #6e7681;
  --gx-accent: #f5c518;           /* text and borders */
  --gx-accent-dim: rgba(245, 197, 24, 0.14);
  --gx-fill: #f5c518;             /* button backgrounds */
  --gx-on-fill: #0d1117;          /* text on a yellow fill */
  --gx-red: #f85149;
  --gx-orange: #d29922;
  --gx-shadow: rgba(0, 0, 0, 0.35);
  --gx-nav-bg: rgba(13, 17, 23, 0.94);
  --gx-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --gx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Source Code Pro", monospace;
  color-scheme: dark;
}

html:root[data-theme="light"] {
  --gx-bg: #ffffff;
  --gx-bg-2: #f6f8fa;
  --gx-bg-3: #eaeef2;
  --gx-hover: #d0d7de;
  --gx-border: #d0d7de;
  --gx-text: #1f2328;
  --gx-text-2: #656d76;
  --gx-muted: #8b949e;
  --gx-accent: #8a6a00;           /* dark gold: yellow text is unreadable on white */
  --gx-accent-dim: rgba(245, 197, 24, 0.18);
  --gx-fill: #f5c518;
  --gx-on-fill: #1f2328;
  --gx-red: #cf222e;
  --gx-orange: #9a6700;
  --gx-shadow: rgba(0, 0, 0, 0.1);
  --gx-nav-bg: rgba(255, 255, 255, 0.94);
  color-scheme: light;
}

/* --- Remap each page's own variables onto the tokens --- */
html:root,
html:root[data-theme="dark"],
html:root[data-theme="light"] {
  /* css/brand.css (work, speaking, ai) and css/style.css (portfolio) */
  --bg: var(--gx-bg);
  --bg-secondary: var(--gx-bg-2);
  --bg-tertiary: var(--gx-bg-3);
  --bg-hover: var(--gx-hover);
  --text: var(--gx-text);
  --text-muted: var(--gx-text-2);
  --text-dim: var(--gx-muted);
  --accent-teal: var(--gx-accent);
  --accent-teal-dim: var(--gx-accent-dim);
  --accent-green: var(--gx-accent);
  --border: var(--gx-border);
  --border-light: var(--gx-hover);
  --shadow: var(--gx-shadow);
  --card-hover-shadow: var(--gx-accent-dim);
  --nav-bg: var(--gx-nav-bg);
  --cert-inactive-border: var(--gx-border);
  /* ai.html purple */
  --accent-ai: var(--gx-accent);
  --accent-ai-dim: var(--gx-accent-dim);
  /* dashboard/css/dashboard.css */
  --surface: var(--gx-bg-2);
  --surface-2: var(--gx-bg-3);
  --accent: var(--gx-accent);
  --accent-dim: var(--gx-accent-dim);
}

/* --- Base --- */
body {
  font-family: var(--gx-sans);
  background-color: var(--gx-bg);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--gx-sans); }
::selection { background: var(--gx-fill); color: var(--gx-on-fill); }
:focus-visible { outline: 2px solid var(--gx-fill); outline-offset: 2px; }

/* Buttons that sat white text on the accent now use dark text on yellow. */
.btn-primary,
.ai-hero .btn-primary {
  background: var(--gx-fill);
  border-color: var(--gx-fill);
  color: var(--gx-on-fill);
}
.btn-primary:hover,
.ai-hero .btn-primary:hover { background: transparent; color: var(--gx-accent); border-color: var(--gx-accent); }
.btn-outline:hover,
.ai-hero .btn-outline:hover { background: var(--gx-fill); border-color: var(--gx-fill); color: var(--gx-on-fill); }

/* Theme toggle button (brand.css has the same rule; this covers the blog, which doesn't load it) */
.nav-theme-toggle {
  background: none;
  border: 1px solid var(--gx-border);
  color: var(--gx-text-2);
  cursor: pointer;
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.nav-theme-toggle:hover { border-color: var(--gx-accent); color: var(--gx-accent); }
.nav-theme-toggle svg,
.site-nav-theme svg { display: block; }
/* Pages without a site header (landing, 404, dashboard, portfolio) float the toggle top right */
.theme-float {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 950;
  background: var(--gx-bg-2);
  box-shadow: 0 4px 14px var(--gx-shadow);
}

/* --- Wordmark: "sh" + avatar-as-o + yellow "luv", like repo rec(o)n and git wh(o) --- */
.gx-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--gx-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gx-text);
  text-decoration: none;
  white-space: nowrap;
}
.gx-wordmark:hover { text-decoration: none; color: var(--gx-text); }
.gx-wordmark .accent { color: var(--gx-accent); margin-left: 0.28em; }
.gx-wordmark .o,
.gx-o {
  display: inline-block;
  width: 0.66em;
  height: 0.66em;
  border-radius: 50%;
  vertical-align: -0.05em;
  margin: 0 0.03em;
  align-self: center;
  transform: translateY(0.02em);
}

/* The sh(o) luv avatar runs a little larger than a plain letter o so it reads at nav size. */
.gx-wordmark .o { width: 0.82em; height: 0.82em; vertical-align: -0.12em; }

/* --- Talk lists (work.html, speaking.html): a linked row is one big link ---
   The title link stretches over the whole row, and the row lights up on hover,
   so it reads as clickable anywhere, not just on the words. Rows without a
   link stay plain. */
.talks-list li:has(.talk-title a),
.past-talks-list li:has(.past-talk-title a) {
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
}
.talks-list .talk-title a::after,
.past-talks-list .past-talk-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.talks-list li:has(.talk-title a):hover,
.past-talks-list li:has(.past-talk-title a):hover { background: var(--gx-accent-dim); }
.talks-list li:has(.talk-title a):hover > *,
.talks-list li:has(.talk-title a):hover .talk-title a,
.past-talks-list li:has(.past-talk-title a):hover > *,
.past-talks-list li:has(.past-talk-title a):hover .past-talk-title a { color: var(--gx-accent); }
.talks-list li:has(.talk-title a:focus-visible),
.past-talks-list li:has(.past-talk-title a:focus-visible) { outline: 2px solid var(--gx-fill); outline-offset: 2px; }
.talks-list .talk-title a:focus-visible,
.past-talks-list .past-talk-title a:focus-visible { outline: none; }

/* --- "Software" menu in the site header (js/nav-menu.js) ---
   Three groups so visitors know where each link goes: Faraday Soft apps,
   web tools hosted here, and open source on GitHub. A dropdown on desktop,
   always expanded inside the phone menu. */
.nav-menu { position: relative; }
.nav-menu .nav-menu-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--gx-text-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  filter: none;
}
.nav-menu .nav-menu-btn:hover,
.nav-menu.open .nav-menu-btn,
.nav-menu .nav-menu-btn.active { color: var(--gx-accent); }
.nav-menu-caret { font-size: 10px; transition: transform 0.2s; }
.nav-menu.open .nav-menu-caret { transform: rotate(180deg); }

.nav-menu .nav-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: -16px;
  width: 330px;
  padding: 8px;
  background: var(--gx-bg-2);
  border: 1px solid var(--gx-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px var(--gx-shadow);
  z-index: 1100;
  text-align: left;
}
/* invisible bridge so the menu stays open while the mouse moves down to it */
.nav-menu .nav-menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-menu.open .nav-menu-panel { display: block; }
@media (hover: hover) and (min-width: 861px) {
  .nav-menu:hover .nav-menu-panel { display: block; }
}
.nav-menu .nav-menu-group + .nav-menu-group { border-top: 1px solid var(--gx-border); margin-top: 6px; padding-top: 6px; }
.nav-menu .nav-menu-label {
  display: block;
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gx-muted);
}
.nav-menu .nav-menu-panel a.nav-menu-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  border-bottom: 0;
  font-size: 14px;
  text-decoration: none;
  color: var(--gx-text);
}
.nav-menu .nav-menu-panel a.nav-menu-item::after { display: none; }
.nav-menu .nav-menu-panel a.nav-menu-item:hover { background: var(--gx-accent-dim); }
.nav-menu .nav-menu-panel a.nav-menu-item strong { display: block; font-weight: 600; color: var(--gx-text); }
.nav-menu .nav-menu-panel a.nav-menu-item:hover strong,
.nav-menu .nav-menu-panel a.nav-menu-item[aria-current] strong { color: var(--gx-accent); }
.nav-menu .nav-menu-panel a.nav-menu-item small { display: block; font-size: 12.5px; line-height: 1.4; color: var(--gx-text-2); margin-top: 1px; }

/* Phone menus: the groups sit inline, the button becomes a heading */
@media (max-width: 768px) {
  .nav-links .nav-menu .nav-menu-btn { pointer-events: none; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gx-muted); padding: 14px 0 4px; }
  .nav-links .nav-menu .nav-menu-caret { display: none; }
  .nav-links .nav-menu .nav-menu-panel { display: block; position: static; width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  .nav-links .nav-menu .nav-menu-panel a.nav-menu-item { padding: 10px 0; border-bottom: 1px solid var(--gx-border); border-radius: 0; }
  .nav-links .nav-menu .nav-menu-label { padding: 10px 0 0; }
  .nav-links .nav-menu .nav-menu-group + .nav-menu-group { border-top: 0; }
}
@media (max-width: 860px) {
  .site-nav .nav-menu .nav-menu-btn { pointer-events: none; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gx-muted); padding: 14px 0 4px; }
  .site-nav .nav-menu .nav-menu-caret { display: none; }
  .site-nav .nav-menu .nav-menu-panel { display: block; position: static; width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  .site-nav .nav-menu .nav-menu-panel a.nav-menu-item { padding: 10px 0; border-bottom: 1px solid var(--gx-border); border-radius: 0; }
  .site-nav .nav-menu .nav-menu-label { padding: 10px 0 0; }
  .site-nav .nav-menu .nav-menu-group + .nav-menu-group { border-top: 0; }
}

/* --- Grinx companion (injected by js/grinx.js) --- */
.gx-buddy {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--gx-sans);
  pointer-events: none;
}
.gx-buddy > * { pointer-events: auto; }
.gx-buddy .gx-say {
  background: var(--gx-bg-2);
  color: var(--gx-text);
  border: 1px solid var(--gx-border);
  border-radius: 12px 12px 2px 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  max-width: 250px;
  box-shadow: 0 6px 20px var(--gx-shadow);
  transition: opacity 0.2s, transform 0.2s;
}
.gx-buddy .gx-say.gone { opacity: 0; transform: translateY(6px); pointer-events: none; }
.gx-buddy .gx-face {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gx-fill);
  background: #0c0d0f;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 6px 20px var(--gx-shadow);
  transition: transform 0.2s;
}
.gx-buddy .gx-face:hover { transform: rotate(-8deg) scale(1.05); }
.gx-buddy .gx-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.15); display: block; }
.gx-buddy.bob .gx-face { animation: gx-bob 1s ease-in-out infinite; }
@keyframes gx-bob { 50% { transform: translateY(-6px) rotate(4deg); } }
@media (max-width: 560px) {
  /* Leave room at the end of the page so Grinx never sits on the footer */
  body:has(> .gx-buddy) { padding-bottom: 84px; }
  .gx-buddy .gx-face { width: 56px; height: 56px; }
  .gx-buddy .gx-say { max-width: 190px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-buddy .gx-face, .gx-buddy .gx-say { animation: none !important; transition: none !important; }
}
@media print { .gx-buddy { display: none !important; } }