/* =============================================================================
 * themes.css v4 — 30 themes + FOSS/GEM/cuckflared link styling
 *
 * DESIGN PRINCIPLES (learned from v3 disaster):
 *   1. NO `!important` anywhere — let each site's own style.css win.
 *   2. NO overrides of body, header, footer, forms, tables, cards.
 *   3. ONLY defines CSS variables per theme + the link underline/badge
 *      classes (.foss, .gem, .cuckflared, .cf-free).
 *   4. Each site's existing style.css can use these variables
 *      (e.g. `color: var(--fg)`) but isn't forced to.
 *
 * Theme switching is via <html data-theme="..."> set by PHP from the
 * theme cookie. No JS. Page reloads after clicking a theme link.
 * ========================================================================== */

/* ─── 30 themes (variable definitions only) ─────────────────────── */

:root,
:root[data-theme="midnight-cobalt"] {
  --bg: #080b14; --fg: #e6edf3; --card: #101622; --border: #1f2937;
  --muted: #6b7a90; --primary: #3b82f6; --primary-fg: #0b1020; --accent: #60a5fa;
  --radius: 0px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="catppuccin-latte"]   { --bg:#eff1f5;--fg:#4c4f69;--card:#e6e9ef;--border:#ccd0da;--muted:#9ca0b0;--primary:#1e66f5;--primary-fg:#eff1f5;--accent:#7287fd;--radius:6px; }
:root[data-theme="catppuccin-frappe"]  { --bg:#303446;--fg:#c6d0f5;--card:#292c3c;--border:#414559;--muted:#8caaee;--primary:#8caaee;--primary-fg:#303446;--accent:#ca9ee6;--radius:6px; }
:root[data-theme="catppuccin-macchiato"]{ --bg:#24273a;--fg:#cad3f5;--card:#1e2030;--border:#363a4f;--muted:#6e738d;--primary:#8aadf4;--primary-fg:#24273a;--accent:#c6a0f6;--radius:6px; }
:root[data-theme="catppuccin-mocha"]   { --bg:#1e1e2e;--fg:#cdd6f4;--card:#181825;--border:#313244;--muted:#6c7086;--primary:#89b4fa;--primary-fg:#1e1e2e;--accent:#cba6f7;--radius:6px; }
:root[data-theme="dracula"]            { --bg:#282a36;--fg:#f8f8f2;--card:#21222c;--border:#44475a;--muted:#6272a4;--primary:#bd93f9;--primary-fg:#282a36;--accent:#ff79c6;--radius:4px; }
:root[data-theme="nord"]               { --bg:#2e3440;--fg:#d8dee9;--card:#3b4252;--border:#434c5e;--muted:#4c566a;--primary:#88c0d0;--primary-fg:#2e3440;--accent:#81a1c1;--radius:0px; }
:root[data-theme="gruvbox-dark"]       { --bg:#282828;--fg:#ebdbb2;--card:#1d2021;--border:#3c3836;--muted:#928374;--primary:#fabd2f;--primary-fg:#282828;--accent:#fe8019;--radius:0px; }
:root[data-theme="gruvbox-light"]      { --bg:#fbf1c7;--fg:#3c3836;--card:#f2e5bc;--border:#d5c4a1;--muted:#928374;--primary:#d65d0e;--primary-fg:#fbf1c7;--accent:#cc241d;--radius:0px; }
:root[data-theme="solarized-dark"]     { --bg:#002b36;--fg:#93a1a1;--card:#073642;--border:#586e75;--muted:#657b83;--primary:#268bd2;--primary-fg:#002b36;--accent:#2aa198;--radius:0px; }
:root[data-theme="solarized-light"]    { --bg:#fdf6e3;--fg:#586e75;--card:#eee8d5;--border:#93a1a1;--muted:#839496;--primary:#268bd2;--primary-fg:#fdf6e3;--accent:#b58900;--radius:0px; }
:root[data-theme="tokyo-night"]        { --bg:#1a1b26;--fg:#a9b1d6;--card:#16161e;--border:#292e42;--muted:#565f89;--primary:#7aa2f7;--primary-fg:#1a1b26;--accent:#bb9af7;--radius:4px; }
:root[data-theme="tokyo-night-storm"]  { --bg:#24283b;--fg:#a9b1d6;--card:#1f2335;--border:#2e3244;--muted:#565f89;--primary:#7aa2f7;--primary-fg:#24283b;--accent:#bb9af7;--radius:4px; }
:root[data-theme="tokyo-night-light"]  { --bg:#d5d6db;--fg:#343b58;--card:#cbccd1;--border:#9699a3;--muted:#828588;--primary:#34548a;--primary-fg:#d5d6db;--accent:#8c4351;--radius:4px; }
:root[data-theme="one-dark"]           { --bg:#282c34;--fg:#abb2bf;--card:#21252b;--border:#3b4048;--muted:#5c6370;--primary:#61afef;--primary-fg:#282c34;--accent:#c678dd;--radius:4px; }
:root[data-theme="one-light"]          { --bg:#fafafa;--fg:#383a42;--card:#f0f0f0;--border:#e5e5e5;--muted:#909090;--primary:#4078f2;--primary-fg:#fafafa;--accent:#a626a4;--radius:4px; }
:root[data-theme="github-dark"]        { --bg:#0d1117;--fg:#c9d1d9;--card:#161b22;--border:#30363d;--muted:#8b949e;--primary:#58a6ff;--primary-fg:#0d1117;--accent:#d2a8ff;--radius:6px; }
:root[data-theme="github-light"]       { --bg:#ffffff;--fg:#24292f;--card:#f6f8fa;--border:#d0d7de;--muted:#8c959f;--primary:#0969da;--primary-fg:#ffffff;--accent:#8250df;--radius:6px; }
:root[data-theme="material-darker"]    { --bg:#1a1a1a;--fg:#cfd8dc;--card:#212121;--border:#424242;--muted:#707070;--primary:#82aaff;--primary-fg:#1a1a1a;--accent:#c792ea;--radius:0px; }
:root[data-theme="material-lighter"]   { --bg:#fafafa;--fg:#323232;--card:#ffffff;--border:#e0e0e0;--muted:#909090;--primary:#2979ff;--primary-fg:#ffffff;--accent:#aa00ff;--radius:0px; }
:root[data-theme="rose-pine"]          { --bg:#191724;--fg:#e0def4;--card:#1f1d2e;--border:#26233a;--muted:#6e6a86;--primary:#31748f;--primary-fg:#191724;--accent:#eb6f92;--radius:8px; }
:root[data-theme="rose-pine-moon"]     { --bg:#232136;--fg:#e0def4;--card:#2a273f;--border:#393552;--muted:#908caa;--primary:#3e8fb0;--primary-fg:#232136;--accent:#ea9a97;--radius:8px; }
:root[data-theme="rose-pine-dawn"]     { --bg:#faf4ed;--fg:#575279;--card:#f2e9e4;--border:#d9d2c8;--muted:#9893a5;--primary:#d7827e;--primary-fg:#faf4ed;--accent:#286983;--radius:8px; }
:root[data-theme="everforest-dark"]    { --bg:#2d353b;--fg:#d3c6aa;--card:#343f44;--border:#475258;--muted:#9da9a0;--primary:#a7c080;--primary-fg:#2d353b;--accent:#dbbc7f;--radius:4px; }
:root[data-theme="everforest-light"]   { --bg:#fdf6e3;--fg:#5c6a72;--card:#f3ead3;--border:#beae8a;--muted:#939f91;--primary:#87af87;--primary-fg:#fdf6e3;--accent:#d9bb80;--radius:4px; }
:root[data-theme="kanagawa"]           { --bg:#1f1f28;--fg:#dcd7ba;--card:#16161d;--border:#2a2a37;--muted:#727169;--primary:#7e9cd8;--primary-fg:#1f1f28;--accent:#957fb8;--radius:4px; }
:root[data-theme="papercolor-dark"]    { --bg:#1c1c1c;--fg:#d0d0d0;--card:#262626;--border:#444444;--muted:#808080;--primary:#005f87;--primary-fg:#d0d0d0;--accent:#d7005f;--radius:0px; }
:root[data-theme="papercolor-light"]   { --bg:#eeeeee;--fg:#444444;--card:#d0d0d0;--border:#b2b2b2;--muted:#808080;--primary:#005f87;--primary-fg:#eeeeee;--accent:#d7005f;--radius:0px; }
:root[data-theme="synthwave-84"]       { --bg:#262335;--fg:#f4eee4;--card:#241b2f;--border:#34294f;--muted:#6c6a83;--primary:#ff7edb;--primary-fg:#262335;--accent:#36f9f6;--radius:4px; }
:root[data-theme="pure-black"]         { --bg:#000000;--fg:#ffffff;--card:#0a0a0a;--border:#1a1a1a;--muted:#707070;--primary:#ffffff;--primary-fg:#000000;--accent:#aaaaaa;--radius:0px; }
:root[data-theme="paper-white"]        { --bg:#ffffff;--fg:#1a1a1a;--card:#f8f8f8;--border:#e0e0e0;--muted:#909090;--primary:#1a1a1a;--primary-fg:#ffffff;--accent:#606060;--radius:0px; }

/* Fallback if no data-theme attribute is set — same as midnight-cobalt */
:root:not([data-theme]) {
  --bg:#080b14;--fg:#e6edf3;--card:#101622;--border:#1f2937;
  --muted:#6b7a90;--primary:#3b82f6;--primary-fg:#0b1020;--accent:#60a5fa;
  --radius:0px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"SF Mono",Menlo,Consolas,monospace;
}

/* ─── FOSS / GEM link underlines (WORKING, no !important) ─────────
 * Uses ::after pseudo-element with linear-gradient background.
 * Works in Chrome, Firefox, Safari, Edge.
 *
 * To use: <a href="..." class="foss"> — green underline + glow
 *         <a href="..." class="gem"> — blue underline + glow
 *         <a href="..." class="foss gem"> — HALF GREEN / HALF BLUE underline
 */

a.foss:not(.gem) {
  text-decoration: none;
  position: relative;
}
a.foss:not(.gem)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #10b981;
  box-shadow: 0 0 6px #10b981, 0 0 12px #10b98188;
}
a.foss:not(.gem) {
  text-shadow: 0 0 4px #10b98155;
}

a.gem:not(.foss) {
  text-decoration: none;
  position: relative;
}
a.gem:not(.foss)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #3b82f6;
  box-shadow: 0 0 6px #3b82f6, 0 0 12px #3b82f688;
}
a.gem:not(.foss) {
  text-shadow: 0 0 4px #3b82f655;
}

/* BOTH FOSS + GEM — half green / half blue underline */
a.foss.gem {
  text-decoration: none;
  position: relative;
}
a.foss.gem::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(to right, #10b981 0%, #10b981 50%, #3b82f6 50%, #3b82f6 100%);
  box-shadow: 0 0 6px #10b98188, 0 0 6px #3b82f688;
}
a.foss.gem {
  text-shadow: 0 0 4px #10b98144, 0 0 4px #3b82f644;
}

/* ─── Cuckflared badge (orange ☁ glowing) ──────────────────── */
a.cuckflared {
  position: relative;
  padding-right: 16px;
}
a.cuckflared::before {
  content: "☁";
  position: absolute;
  top: -5px;
  right: 0;
  font-size: 10px;
  line-height: 1;
  padding: 2px 3px;
  background: #f38020;
  color: #fff;
  box-shadow: 0 0 4px #f38020, 0 0 10px #f38020aa;
  animation: cf-glow 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes cf-glow {
  0%, 100% { box-shadow: 0 0 4px #f38020, 0 0 10px #f38020aa; }
  50%      { box-shadow: 0 0 6px #f38020, 0 0 16px #f38020dd; }
}

/* ─── CF-free badge (green ✓) ────────────────────────────────── */
a.cf-free {
  position: relative;
  padding-right: 16px;
}
a.cf-free::before {
  content: "✓";
  position: absolute;
  top: -5px;
  right: 0;
  font-size: 9px;
  font-weight: bold;
  line-height: 1;
  padding: 2px 4px;
  background: #10b981;
  color: #fff;
  box-shadow: 0 0 4px #10b981, 0 0 8px #10b981aa;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  a.cuckflared::before { animation: none; }
}

/* ─── Theme switcher popup (native <details>, no JS) ───────────
 * Click "⚙ Theme: <current>" → popup opens UPWARD with two columns:
 *   Dark (list) | Light (list)
 * Current theme is highlighted. Privacy/Terms/anti-CF links below.
 * Works without JavaScript — uses native HTML <details> toggle.
 * ─────────────────────────────────────────────────────────────── */

.opseq-theme-switcher {
  border-top: 1px solid var(--border, #1f2937);
  padding: 12px 16px;
  text-align: center;
  margin-top: 32px;
  position: relative;
}

/* The clickable button */
.opseq-theme-popup {
  display: inline-block;
  position: relative;
}
.opseq-theme-popup > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--card, #101622);
  color: var(--fg, #e6edf3);
  border: 1px solid var(--border, #1f2937);
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  user-select: none;
  transition: border-color 0.15s, color 0.15s;
}
.opseq-theme-popup > summary::-webkit-details-marker { display: none; }
.opseq-theme-popup > summary:hover {
  border-color: var(--primary, #3b82f6);
  color: var(--primary, #3b82f6);
}
.opseq-theme-popup[open] > summary {
  border-color: var(--primary, #3b82f6);
  color: var(--primary, #3b82f6);
}
.opseq-theme-popup-arrow {
  font-size: 10px;
  transition: transform 0.15s;
}
.opseq-theme-popup[open] .opseq-theme-popup-arrow {
  transform: rotate(180deg);
}
.opseq-theme-popup-icon {
  font-size: 14px;
}
.opseq-theme-popup-label strong {
  color: var(--primary, #3b82f6);
}

/* The popup panel — opens UPWARD (bottom: 100%) */
.opseq-theme-popup-panel {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card, #101622);
  border: 1px solid var(--border, #1f2937);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
  padding: 16px;
  z-index: 100;
  min-width: 320px;
  max-width: 480px;
  text-align: left;
}

/* Two-column grid for Dark | Light */
.opseq-theme-popup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.opseq-theme-popup-col h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6b7a90);
  margin: 0 0 8px 0;
  font-weight: 600;
  border-bottom: 1px solid var(--border, #1f2937);
  padding-bottom: 4px;
}
.opseq-theme-popup-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.opseq-theme-popup-list a {
  display: block;
  padding: 4px 8px;
  color: var(--muted, #6b7a90);
  text-decoration: none;
  font-size: 12px;
  border-left: 2px solid transparent;
  transition: all 0.1s;
}
.opseq-theme-popup-list a:hover {
  color: var(--fg, #e6edf3);
  background: color-mix(in srgb, var(--primary, #3b82f6) 8%, transparent);
  border-left-color: var(--primary, #3b82f6);
}
.opseq-theme-popup-list a.active {
  color: var(--primary, #3b82f6);
  font-weight: bold;
  border-left-color: var(--primary, #3b82f6);
  background: color-mix(in srgb, var(--primary, #3b82f6) 12%, transparent);
}

/* Legal links at the bottom of the popup */
.opseq-theme-popup-legal {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #1f2937);
}
.opseq-theme-popup-legal a {
  color: var(--muted, #6b7a90);
  text-decoration: none;
  font-size: 11px;
}
.opseq-theme-popup-legal a:hover {
  color: var(--primary, #3b82f6);
}

/* Mobile: stack columns vertically */
@media (max-width: 480px) {
  .opseq-theme-popup-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .opseq-theme-popup-panel {
    min-width: 280px;
    max-width: 90vw;
    left: 50%;
    transform: translateX(-50%);
  }
}