/* =============================================================================
   ClavionX DLS — Ghost Blog Theme Override (v2)
   Always dark-canvas. Applies the ClavionX Design Language System.
   Loaded after screen.css so these rules take precedence.
   ============================================================================= */

/* 1. DLS Design Tokens
/* --------------------------------------------------------------------------- */

:root {
  /* Neutral scale */
  --dls-n-0:    oklch(99.5% 0.003 250);
  --dls-n-50:   oklch(96.8% 0.005 250);
  --dls-n-100:  oklch(94.2% 0.006 250);
  --dls-n-150:  oklch(91.0% 0.007 250);
  --dls-n-200:  oklch(87.0% 0.008 250);
  --dls-n-300:  oklch(78.0% 0.010 250);
  --dls-n-400:  oklch(64.0% 0.012 250);
  --dls-n-500:  oklch(50.0% 0.014 250);
  --dls-n-600:  oklch(40.0% 0.014 250);
  --dls-n-700:  oklch(30.0% 0.013 250);
  --dls-n-800:  oklch(22.0% 0.012 250);
  --dls-n-900:  oklch(15.0% 0.010 250);
  --dls-n-950:  oklch(11.0% 0.008 250);
  --dls-n-1000: oklch( 7.5% 0.006 250);

  /* Accent: electric violet */
  --dls-hue: 282;
  --dls-a-50:  oklch(96.5% 0.025 var(--dls-hue));
  --dls-a-100: oklch(92.0% 0.060 var(--dls-hue));
  --dls-a-200: oklch(85.0% 0.115 var(--dls-hue));
  --dls-a-300: oklch(74.0% 0.165 var(--dls-hue));
  --dls-a-400: oklch(64.0% 0.195 var(--dls-hue));
  --dls-a-500: oklch(58.0% 0.210 var(--dls-hue));
  --dls-a-600: oklch(50.0% 0.215 var(--dls-hue));
  --dls-a-700: oklch(42.0% 0.190 var(--dls-hue));
  --dls-a-800: oklch(32.0% 0.150 var(--dls-hue));
  --dls-a-900: oklch(24.0% 0.095 var(--dls-hue));

  /* AI accent (teal) */
  --dls-ai-200: oklch(83.0% 0.110 195);
  --dls-ai-300: oklch(72.0% 0.140 195);
  --dls-ai-400: oklch(64.0% 0.135 195);
  --dls-ai-500: oklch(58.0% 0.130 195);

  /* Dark canvas surfaces */
  --dls-canvas:  oklch(11.0% 0.012 252);
  --dls-surface: oklch(14.0% 0.013 252);
  --dls-raised:  oklch(17.0% 0.013 252);
  --dls-sunken:  oklch( 9.0% 0.008 250);

  /* Semantic tokens */
  --dls-fg:        oklch(96.8% 0.005 250);
  --dls-fg-body:   oklch(91.0% 0.007 250);
  --dls-fg-muted:  oklch(78.0% 0.010 250);
  --dls-fg-subtle: oklch(64.0% 0.012 250);
  --dls-border:    oklch(100% 0 0 / 0.07);
  --dls-border-md: oklch(100% 0 0 / 0.12);

  /* Typography */
  --dls-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --dls-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --dls-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dls-fast: 120ms;
  --dls-base: 180ms;
}

/* 2. Ghost Source theme variable overrides
   These override Ghost's built-in CSS custom properties.
   Applied globally (always dark) and also scoped to both text classes.
/* --------------------------------------------------------------------------- */

:root,
:root.has-light-text,
:root.has-dark-text {
  /* Font overrides — Ghost uses --font-sans, --font-serif, --font-mono internally.
     Override all three so no theme setting can reintroduce EB Garamond. */
  --font-sans:       "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:      "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gh-font-body:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gh-font-heading: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Color overrides */
  --color-primary-text:   oklch(96.8% 0.005 250);
  --color-secondary-text: oklch(78.0% 0.010 250);
  --color-darker-gray:    oklch(96.8% 0.005 250);
  --color-dark-gray:      oklch(64.0% 0.012 250);
  --color-mid-gray:       oklch(30.0% 0.013 250);
  --color-light-gray:     oklch(22.0% 0.012 250);
  --color-lighter-gray:   oklch(100% 0 0 / 0.05);
  --color-border:         oklch(100% 0 0 / 0.07);
  --color-dark-border:    oklch(100% 0 0 / 0.12);
  --ghost-accent-color:   oklch(58.0% 0.210 282);
  --background-color:     #0d0f12;
}

/* 3. Content width
   Ghost Source uses --content-width inside .gh-canvas to set article column width.
   Set ONLY on .gh-canvas — not :root — so the footer's .gh-inner stays wide.
/* --------------------------------------------------------------------------- */

.gh-canvas {
  --content-width: 780px;
}

/* Nav actions: Ghost's screen.css sets background-color: var(--background-color)
   on .gh-navigation-actions, which can be overridden by ghost_head to a light value.
   Force transparent so the nav's own dark backdrop always shows through. */
.gh-navigation-actions {
  background: transparent !important;
}

/* Footer: restore 3-column flex grid and strip list bullets */
.gh-footer-columns {
  display: flex !important;
  flex-wrap: wrap;
  gap: 2rem 4rem;
}
.gh-footer-col {
  flex: 1 1 140px;
}
.gh-footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.gh-footer-col li {
  margin-bottom: 0.5em;
}

/* 4. Base: rendering, typography, background
/* --------------------------------------------------------------------------- */

html,
html[data-theme="dark"] {
  background: var(--dls-canvas);
}

body {
  background: var(--dls-canvas);
  color: var(--dls-fg);
  font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* Direct font overrides — bypasses any CSS variable cascade issues */
.is-body,
.is-body p,
.is-body li,
.is-body blockquote,
.gh-content,
.gh-content p,
.gh-content li,
.gh-content blockquote,
.gh-card-excerpt,
.gh-article-excerpt,
.nav a,
.gh-footer-col a,
.gh-footer-col-title,
.gh-footer-copyright,
input, textarea, select, button {
  font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

.is-title,
h1, h2, h3, h4, h5, h6,
.gh-article-title,
.gh-card-title,
.gh-header-inner .gh-header-title,
.gh-container-title,
.gh-tag-header-title,
.gh-navigation-logo {
  font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* 4. Navigation
/* --------------------------------------------------------------------------- */

#gh-navigation {
  background: oklch(11% 0.012 252 / 0.88);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--dls-border);
}

#gh-navigation .gh-navigation-logo,
#gh-navigation .gh-navigation-logo:hover {
  color: var(--dls-fg);
  font-family: var(--dls-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}

#gh-navigation .nav a {
  color: var(--dls-fg-muted);
  transition: color var(--dls-fast) var(--dls-ease);
}
#gh-navigation .nav a:hover {
  color: var(--dls-a-300);
  opacity: 1;
}

.gh-navigation-actions .gh-button,
.gh-navigation-actions .gh-button:hover {
  background: var(--dls-a-500);
  color: #fff;
  border: none;
}
.gh-navigation-actions .gh-button:hover {
  background: var(--dls-a-400);
}

.gh-dropdown {
  background: var(--dls-surface) !important;
  border: 1px solid var(--dls-border-md) !important;
  box-shadow: 0 16px 40px oklch(0% 0 0 / 0.5) !important;
}
.gh-dropdown li a {
  color: var(--dls-n-200) !important;
}
.gh-dropdown li a:hover {
  color: var(--dls-a-300) !important;
  opacity: 1;
}

/* 5. Post cards
/* --------------------------------------------------------------------------- */

.gh-card {
  background: var(--dls-surface);
  border: 1px solid var(--dls-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--dls-base) var(--dls-ease),
              transform var(--dls-base) var(--dls-ease),
              box-shadow var(--dls-base) var(--dls-ease);
}
.gh-card:hover {
  border-color: oklch(58% 0.21 var(--dls-hue) / 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.4),
              0 0 0 1px oklch(58% 0.21 var(--dls-hue) / 0.12);
}

.gh-card-link,
.gh-card-link:hover {
  color: var(--dls-fg);
  opacity: 1;
}

.gh-card-title {
  font-family: var(--dls-sans);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--dls-fg);
  line-height: 1.25;
}

.gh-card-excerpt {
  color: var(--dls-fg-muted);
  line-height: 1.6;
}

.gh-card-meta,
.gh-card-meta * {
  color: var(--dls-fg-subtle);
}

.gh-card-tag {
  color: var(--dls-a-300);
  font-family: var(--dls-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gh-card-image {
  background: var(--dls-raised);
}

/* 6. Article page header
/* --------------------------------------------------------------------------- */

.gh-article-header {
  background: transparent;
}

.gh-article-tag {
  display: inline-flex;
  align-items: center;
  color: var(--dls-a-300);
  background: oklch(28% 0.10 var(--dls-hue) / 0.4);
  border: 1px solid oklch(50% 0.21 var(--dls-hue) / 0.28);
  border-radius: 999px;
  padding: 3px 12px;
  font-family: var(--dls-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--dls-fast);
}
.gh-article-tag:hover {
  background: oklch(32% 0.12 var(--dls-hue) / 0.55);
  opacity: 1;
  color: var(--dls-a-200);
}

.gh-article-title {
  font-family: var(--dls-sans);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.06;
  color: var(--dls-n-0);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
}

.gh-article-excerpt {
  color: var(--dls-fg-muted);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* Author meta */
.gh-article-author-name {
  color: var(--dls-n-150);
  font-weight: 500;
}
.gh-article-meta-date,
.gh-article-meta-length {
  color: var(--dls-fg-subtle);
  font-family: var(--dls-mono);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.gh-article-meta .bull {
  color: var(--dls-n-600);
}

/* Feature image */
.gh-article-image {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--dls-border);
}

/* 7. Article content prose
/* --------------------------------------------------------------------------- */

.gh-content {
  color: var(--dls-fg-body);
  font-size: 1.9rem;
  line-height: 1.7;
  letter-spacing: -0.008em;
}

.gh-content p {
  margin-top: 0 !important;
  margin-bottom: 1.2em;
}

/* Ghost editor emits empty <p> tags as line-break spacers — collapse them */
.gh-content p:empty {
  display: none;
}

.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
  color: var(--dls-fg);
  font-family: var(--dls-sans);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin-top: 2.5em;
  margin-bottom: 0.6em;
}

.gh-content h2 { font-size: 2.6rem; }
.gh-content h3 { font-size: 2.1rem; }
.gh-content h4 { font-size: 1.7rem; }

/* Violet left-rule on h2 to match clavionx.com section markers */
.gh-content h2 {
  padding-left: 1rem;
  border-left: 2px solid var(--dls-a-500);
  margin-left: -1rem;
}

.gh-content a {
  color: var(--dls-a-300);
  text-decoration-color: oklch(74% 0.165 var(--dls-hue) / 0.35);
  text-underline-offset: 3px;
  transition: color var(--dls-fast);
}
.gh-content a:hover {
  color: var(--dls-a-200);
  opacity: 1;
  text-decoration-color: oklch(74% 0.165 var(--dls-hue) / 0.7);
}

.gh-content blockquote {
  border-left: 3px solid var(--dls-a-500);
  background: oklch(28% 0.08 var(--dls-hue) / 0.15);
  color: var(--dls-n-200);
  padding: 1rem 1.5rem;
  border-radius: 0 8px 8px 0;
  margin-left: 0;
  margin-right: 0;
  font-style: normal;
}
.gh-content blockquote p { margin-bottom: 0; }

.gh-content code {
  font-family: var(--dls-mono);
  font-size: 0.85em;
  background: oklch(18% 0.012 252);
  color: var(--dls-ai-300);
  border: 1px solid oklch(100% 0 0 / 0.08);
  border-radius: 4px;
  padding: 2px 6px;
}

.gh-content pre {
  background: var(--dls-sunken);
  border: 1px solid oklch(100% 0 0 / 0.08);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
}
.gh-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--dls-n-200);
  font-size: 0.88rem;
}

.gh-content hr {
  border: none;
  border-top: 1px solid var(--dls-border);
  margin: 2.5em 0;
}

.gh-content ul,
.gh-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}
.gh-content li { margin-bottom: 0.4em; }

.gh-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.gh-content th {
  background: var(--dls-surface);
  color: var(--dls-n-200);
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dls-border-md);
  text-align: left;
}
.gh-content td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--dls-border);
  color: var(--dls-fg-muted);
}

/* 8. KG (Koenig) cards
/* --------------------------------------------------------------------------- */

.kg-bookmark-card {
  background: var(--dls-surface) !important;
  border: 1px solid var(--dls-border-md) !important;
  border-radius: 8px;
  transition: border-color var(--dls-fast);
}
.kg-bookmark-card:hover {
  border-color: oklch(58% 0.21 var(--dls-hue) / 0.4) !important;
}
.kg-bookmark-title { color: var(--dls-fg) !important; }
.kg-bookmark-description { color: var(--dls-fg-muted) !important; }
.kg-bookmark-metadata { color: var(--dls-fg-subtle) !important; }

.kg-callout-card {
  background: oklch(20% 0.015 252) !important;
  border: 1px solid var(--dls-border) !important;
  border-radius: 8px;
}
.kg-callout-text { color: var(--dls-fg-body) !important; }

.kg-image-card figcaption {
  color: var(--dls-fg-subtle);
  font-size: 0.85rem;
  font-family: var(--dls-mono);
}

/* 9. Publication header (homepage hero)
/* --------------------------------------------------------------------------- */

.gh-header {
  background: transparent;
  border-bottom: 1px solid var(--dls-border);
}

.gh-header-inner .gh-header-title {
  color: var(--dls-fg);
  font-family: var(--dls-sans);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.gh-header-inner .gh-header-description {
  color: var(--dls-fg-muted);
}

/* 10. Sidebar
/* --------------------------------------------------------------------------- */

.gh-sidebar .gh-tags a {
  background: var(--dls-surface);
  border: 1px solid var(--dls-border);
  color: var(--dls-fg-muted);
  border-radius: 999px;
  transition: border-color var(--dls-fast), color var(--dls-fast);
}
.gh-sidebar .gh-tags a:hover {
  border-color: oklch(58% 0.21 var(--dls-hue) / 0.45);
  color: var(--dls-a-300);
  opacity: 1;
}

.gh-sidebar-title {
  color: var(--dls-fg-subtle);
  font-family: var(--dls-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 11. Footer
/* --------------------------------------------------------------------------- */

.gh-footer {
  background: var(--dls-canvas);
  border-top: 1px solid var(--dls-border);
}

.gh-footer-col-title {
  color: var(--dls-fg-subtle) !important;
  font-family: var(--dls-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gh-footer-col a {
  color: var(--dls-fg-muted) !important;
  transition: color var(--dls-fast);
}
.gh-footer-col a:hover {
  color: var(--dls-a-300) !important;
  opacity: 1;
}

.gh-footer-logo {
  color: var(--dls-fg) !important;
  font-family: var(--dls-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.gh-footer-menu a {
  color: var(--dls-fg-subtle) !important;
}
.gh-footer-menu a:hover {
  color: var(--dls-n-200) !important;
}

.gh-footer-copyright {
  color: var(--dls-fg-subtle) !important;
}

.gh-footer-bar {
  border-top: 1px solid var(--dls-border);
}

/* 12. CTAs and subscription forms
/* --------------------------------------------------------------------------- */

.gh-cta {
  background: var(--dls-surface);
  border-top: 1px solid var(--dls-border);
  border-bottom: 1px solid var(--dls-border);
}

.gh-form {
  background: oklch(100% 0 0 / 0.05);
  border: 1px solid var(--dls-border-md);
  transition: background var(--dls-fast), border-color var(--dls-fast);
}
.gh-form:focus-within {
  background: oklch(100% 0 0 / 0.07);
  border-color: oklch(58% 0.21 var(--dls-hue) / 0.5);
}

.gh-form input[type="email"] {
  color: var(--dls-fg);
  background: transparent;
}
.gh-form input[type="email"]::placeholder {
  color: var(--dls-fg-subtle);
}

.gh-button,
.gh-form button,
button[type="submit"] {
  background: var(--dls-a-500) !important;
  color: #fff !important;
  transition: background var(--dls-fast);
}
.gh-button:hover,
.gh-form button:hover,
button[type="submit"]:hover {
  background: var(--dls-a-400) !important;
}

/* 13. Pagination
/* --------------------------------------------------------------------------- */

.gh-pagination a {
  background: var(--dls-surface);
  border: 1px solid var(--dls-border-md);
  color: var(--dls-fg-muted);
  border-radius: 8px;
  transition: border-color var(--dls-fast), color var(--dls-fast);
}
.gh-pagination a:hover {
  border-color: oklch(58% 0.21 var(--dls-hue) / 0.45);
  color: var(--dls-a-300);
  opacity: 1;
}

/* 14. Reading progress bar
/* --------------------------------------------------------------------------- */

.reading-progress {
  background: var(--dls-a-500) !important;
}

/* 15. Tag pages
/* --------------------------------------------------------------------------- */

.gh-tag-header-title {
  color: var(--dls-fg);
  font-family: var(--dls-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.gh-tag-header-description {
  color: var(--dls-fg-muted);
}

/* 16. Related posts section
/* --------------------------------------------------------------------------- */

.gh-container-title {
  color: var(--dls-fg);
  font-family: var(--dls-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* 17. Featured posts section
/* --------------------------------------------------------------------------- */

.gh-featured-posts {
  background: var(--dls-surface);
  border-top: 1px solid var(--dls-border);
  border-bottom: 1px solid var(--dls-border);
}

/* 18. Ghost member portal
/* --------------------------------------------------------------------------- */

.gh-portal-triggerbtn {
  background: var(--dls-a-500) !important;
}

/* 19. Selection and focus
/* --------------------------------------------------------------------------- */

::selection {
  background: oklch(58% 0.21 var(--dls-hue) / 0.32);
  color: var(--dls-n-0);
}

:focus-visible {
  outline: 2px solid var(--dls-a-400);
  outline-offset: 2px;
}

/* 20. Scrollbar (Webkit)
/* --------------------------------------------------------------------------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--dls-canvas); }
::-webkit-scrollbar-thumb {
  background: oklch(30% 0.013 252);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: oklch(40% 0.014 252); }

/* 21. Mobile / responsive
/* --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .gh-article-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    letter-spacing: -0.022em;
  }
  .gh-content h2 {
    font-size: 2.1rem;
    padding-left: 0.8rem;
    margin-left: -0.8rem;
  }
  .gh-content h3 { font-size: 1.7rem; }
  .gh-content { font-size: 1.6rem; }
}