/* ============================================================
   MODERN PATENT LAW — AURUM THEME (Obsidian Publish + App)
   Goal: premium dark mode with gold accents + highly readable light mode
   ============================================================ */

/* -----------------------------
   0) Fonts
------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Prata&family=Raleway:wght@300;400;600;700&display=swap');

/* -----------------------------
   1) Brand tokens (shared)
   Keep these stable; everything else should reference them.
------------------------------ */
:root {
  /* Brand palette */
  --mpl-gold: #d4af37;
  --mpl-gold-bright: #f4d03f;
  --mpl-gold-muted: #9b8b3f;

  /* Typography */
  --mpl-font-serif: 'Prata', Georgia, serif;
  --mpl-font-sans: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mpl-font-mono: 'Monaco', 'Menlo', 'Consolas', monospace;

  /* Layout rhythm */
  --mpl-body-size: 16px;
  --mpl-line-height: 1.8;
  --mpl-block-gap: 24px;

  /* UI */
  --mpl-focus-ring: 2px;
}
/* ============================================================
   GT VARIABLE ANCHOR (CRITICAL)
   Ensures tags + links resolve correctly in Publish
   ============================================================ */

/* Dark mode anchor */
body.theme-dark {
  --text-accent: #f4d03f;
  --text-accent-hover: #f4d03f;

  --link-color: #f4d03f;
  --link-color-hover: #f4d03f;
  --link-unresolved-color: #9b8b3f;
}

/* Light mode anchor */
body.theme-light {
  --text-accent: #d4af37;
  --text-accent-hover: #9b8b3f;

  --link-color: #d4af37;
  --link-color-hover: #9b8b3f;
  --link-unresolved-color: #b8a864;
}

/* -----------------------------
   2) Theme variables (Obsidian tokens)
   These map brand tokens into Obsidian’s variable system.
------------------------------ */
body.theme-dark {
  --background-primary: #1a1a1a;
  --background-primary-alt: #2b2b2b;
  --background-secondary: #1a1a1a;
  --background-secondary-alt: #2b2b2b;

  --text-normal: #F5F5DC;
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-faint: rgba(255, 255, 255, 0.5);

  /* Accent + links */
  --text-accent: var(--mpl-gold-bright);
  --text-accent-hover: var(--mpl-gold-bright);
  --link-color: var(--mpl-gold-bright);
  --link-color-hover: var(--mpl-gold-bright);
  --link-unresolved-color: var(--mpl-gold-muted);

  /* Code */
  --code-background: #2b2b2b;
  --code-normal: var(--mpl-gold);

  /* Borders */
  --background-modifier-border: rgba(212, 175, 55, 0.2);

  /* Callouts */
  --callout-border-width: 4px;
  --callout-border-opacity: 1;
  --callout-padding: 24px;
}

body.theme-light {
  --background-primary: #FAF8F3;
  --background-primary-alt: #F5E6D3;
  --background-secondary: #FAF8F3;
  --background-secondary-alt: #F5E6D3;

  --text-normal: #000000;
  --text-muted: rgba(0, 0, 0, 0.7);
  --text-faint: rgba(0, 0, 0, 0.5);

  /* Accent + links */
  --text-accent: var(--mpl-gold-muted);
  --text-accent-hover: var(--mpl-gold);
  --link-color: var(--mpl-gold);
  --link-color-hover: var(--mpl-gold-muted);
  --link-unresolved-color: #b8a864;

  /* Code */
  --code-background: #F5E6D3;
  --code-normal: var(--mpl-gold-muted);

  /* Borders */
  --background-modifier-border: rgba(155, 139, 63, 0.2);

  /* Callouts */
  --callout-border-width: 4px;
  --callout-border-opacity: 1;
  --callout-padding: 24px;
}

/* -----------------------------
   3) Global typography defaults
------------------------------ */
body {
  --font-text: var(--mpl-font-sans);
  --font-text-theme: var(--mpl-font-sans);
  --font-interface: var(--mpl-font-sans);
  --font-monospace: var(--mpl-font-mono);

  --font-text-size: var(--mpl-body-size);
  --line-height-normal: 1.7;
}

/* ============================================================
   4) Rendered content (Publish + Reading View)
   Use .markdown-rendered as the primary scope.
   ============================================================ */

/* ---------- Headings ---------- */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6,
.inline-title {
  font-family: var(--mpl-font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.markdown-rendered h1,
.inline-title { font-size: 48px; line-height: 1.2; margin-bottom: 32px; }
.markdown-rendered h2 { font-size: 36px; line-height: 1.3; margin-top: 64px; margin-bottom: 24px; }
.markdown-rendered h3 { font-size: 24px; line-height: 1.4; margin-top: 48px; margin-bottom: 16px; }
.markdown-rendered h4 { font-size: 20px; line-height: 1.4; margin-top: 32px; margin-bottom: 12px; }
.markdown-rendered h5,
.markdown-rendered h6 { font-size: 18px; line-height: 1.4; margin-top: 24px; margin-bottom: 12px; }

/* Heading colors by mode */
body.theme-dark .markdown-rendered h1,
body.theme-dark .markdown-rendered h2,
body.theme-dark .markdown-rendered h3,
body.theme-dark .markdown-rendered h4,
body.theme-dark .markdown-rendered h5,
body.theme-dark .markdown-rendered h6,
body.theme-dark .inline-title {
  color: var(--text-accent);
}

body.theme-light .markdown-rendered h1,
body.theme-light .markdown-rendered h2,
body.theme-light .markdown-rendered h3,
body.theme-light .markdown-rendered h4,
body.theme-light .markdown-rendered h5,
body.theme-light .markdown-rendered h6,
body.theme-light .inline-title {
  color: var(--mpl-gold-muted);
}

/* ---------- Paragraphs ---------- */
.markdown-rendered p {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-body-size);
  line-height: var(--mpl-line-height);
  margin-bottom: var(--mpl-block-gap);
}

/* Lead paragraph */
.markdown-rendered > p:first-of-type {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

/* ---------- Links ---------- */
.markdown-rendered a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.markdown-rendered a:hover {
  text-decoration-style: double;
}

/* External links: dotted underline */
.markdown-rendered a.external-link {
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

/* ---------- Hover preview (popover) ---------- */
.popover .markdown-rendered,
.hover-popover .markdown-rendered {
  font-size: 0.85em;
  line-height: 1.4;
}

.popover .markdown-rendered h1,
.popover .markdown-rendered h2,
.popover .markdown-rendered h3,
.hover-popover .markdown-rendered h1,
.hover-popover .markdown-rendered h2,
.hover-popover .markdown-rendered h3 {
  font-size: 1em;
  font-family: inherit;
  font-weight: 600;
  margin: 0.4em 0;
}

.popover .markdown-rendered h1:first-child,
.hover-popover .markdown-rendered h1:first-child {
  font-size: 1em;
  letter-spacing: normal;
}

/* ---------- Blockquotes ---------- */
.markdown-rendered blockquote {
  border-left: 4px solid var(--text-accent);
  color: var(--text-normal);
  font-style: italic;
  margin: 1.5em 0;
  padding-left: 1em;
}

.markdown-rendered blockquote p {
  color: inherit;
  margin: 0;
}

/* ---------- Lists ---------- */
.markdown-rendered ul,
.markdown-rendered ol {
  font-family: var(--mpl-font-sans);
  color: var(--text-normal);
  margin-bottom: var(--mpl-block-gap);
  padding-left: 0px;
  margin-left: -10px;
}

.markdown-rendered li {
  margin-bottom: 12px;
  color: var(--text-normal);
}

/* ---------- Code ---------- */
.markdown-rendered code {
  background-color: var(--code-background);
  color: var(--code-normal);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 15px;
  font-family: var(--mpl-font-mono);
}

.markdown-rendered pre {
  background-color: var(--code-background);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 24px;
  margin: 32px 0;
  overflow-x: auto;
}

.markdown-rendered pre code {
  background: none;
  padding: 0;
}

/* ---------- Tables ---------- */
.markdown-rendered table {
  border-collapse: collapse;
  width: 100%;
  margin: 32px 0;
}

.markdown-rendered th {
  background-color: var(--background-primary-alt);
  color: var(--text-accent);
  font-family: var(--mpl-font-sans);
  font-weight: 600;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--background-modifier-border);
}

.markdown-rendered td {
  padding: 12px;
  border: 1px solid var(--background-modifier-border);
  color: var(--text-normal);
}

/* ---------- Callouts ---------- */
.markdown-rendered .callout {
  background-color: var(--background-primary-alt);
  border-left: 4px solid var(--text-accent);
  padding: 24px;
  margin: 32px 0;
  border-radius: 0;
}

.markdown-rendered .callout-title {
  font-family: var(--mpl-font-serif);
  color: var(--text-accent);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 12px;
}

.markdown-rendered .callout-content {
  color: var(--text-normal);
}


/* ---------- Horizontal rules ---------- */
.markdown-rendered hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
  margin: 48px 0;
}

/* ============================================================
   5) Publish chrome / navigation
   ============================================================ */
.site-header,
.navbar {
  background-color: #000000;
}

.site-header a,
.navbar a {
  color: #ffffff;
  font-family: var(--mpl-font-sans);
  font-weight: 600;
}

.site-header a:hover,
.navbar a:hover {
  color: var(--mpl-gold);
}

.site-body-left-column-site-name:hover::before {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* ============================================================
   6) Tags (unified; no duplicate token set)
   ============================================================ */
.markdown-rendered a.tag,
.markdown-rendered .tag {
  display: inline-block;
  font-family: var(--mpl-font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
  
}

/* Dark mode tags */
body.theme-dark .markdown-rendered a.tag,
body.theme-dark .markdown-rendered .tag {
  color: #ffffff;
  border-color: var(--mpl-gold);
  transform: translateY(-2px);
  box-shadow: 4px 5px 5px 0px rgba(212, 175, 55, 0.3);
  text-transform: uppercase;
  border: 1px solid transparent;
}

body.theme-dark .markdown-rendered a.tag:hover,
body.theme-dark .markdown-rendered .tag:hover {
  border-color: var(--mpl-gold-bright);
  transform: translateY(-4px);
  box-shadow: 5px 6px 12px 0px rgba(212, 175, 55, 0.5);
  font-weight: 700;
}

body.theme-dark .markdown-rendered a.tag:active,
body.theme-dark .markdown-rendered .tag:active {
  transform: translateY(0px);
  box-shadow: 2px 2px 3px 0px rgba(212, 175, 55, 0.3);
}

/* Light mode tags */
body.theme-light .markdown-rendered a.tag,
body.theme-light .markdown-rendered .tag {
  background-color: transparent;
  border-color: rgba(155, 139, 63, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(155, 139, 63, 0.3);
  border: 1px solid transparent;
}

body.theme-light .markdown-rendered a.tag:hover,
body.theme-light .markdown-rendered .tag:hover {
  background-color: rgba(155, 139, 63, 0.15);
  color: var(--mpl-gold-muted);
  border-color: var(--mpl-gold);
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(155, 139, 63, 0.4);
  font-weight: 700;
}

body.theme-light .markdown-rendered a.tag:active,
body.theme-light .markdown-rendered .tag:active {
  transform: translateY(0px);
  box-shadow: 0 2px 6px rgba(155, 139, 63, 0.3);
}

/* Tags in headings */
.markdown-rendered h1 .tag,
.markdown-rendered h2 .tag,
.markdown-rendered h3 .tag {
  font-size: 0.6em;
  vertical-align: middle;
  margin-left: 8px;
}

.markdown-rendered .tag + .tag {
  margin-left: 6px;
}

.markdown-rendered .tag:focus-visible,
.markdown-rendered a.tag:focus-visible {
  border-color: var(--mpl-gold-bright);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

/* ============================================================
   7) Editor parity (Obsidian app / CodeMirror 6)
   Note: header pixel sizes match your current behavior.
   If you want “normal editor” sizing, switch these to em-based.
   ============================================================ */
.markdown-source-view.mod-cm6,
.markdown-source-view.mod-cm6 .cm-scroller,
.markdown-source-view.mod-cm6 .cm-content {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-body-size);
  line-height: var(--mpl-line-height);
  color: var(--text-normal);
}

.markdown-source-view.mod-cm6 .cm-header,
.markdown-source-view.mod-cm6 .HyperMD-header {
  font-family: var(--mpl-font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}

body.theme-dark .markdown-source-view.mod-cm6 .HyperMD-header { color: var(--text-accent); }
body.theme-light .markdown-source-view.mod-cm6 .HyperMD-header { color: var(--mpl-gold-muted); }

/* Current behavior: large headers in editor */
.markdown-source-view.mod-cm6 .HyperMD-header-1 { font-size: 48px; line-height: 1.2; }
.markdown-source-view.mod-cm6 .HyperMD-header-2 { font-size: 36px; line-height: 1.3; }
.markdown-source-view.mod-cm6 .HyperMD-header-3 { font-size: 24px; line-height: 1.4; }
.markdown-source-view.mod-cm6 .HyperMD-header-4 { font-size: 20px; line-height: 1.4; }
.markdown-source-view.mod-cm6 .HyperMD-header-5 { font-size: 18px; line-height: 1.4; }
.markdown-source-view.mod-cm6 .HyperMD-header-6 { font-size: 18px; line-height: 1.4; }

.markdown-source-view.mod-cm6 .cm-line { padding-bottom: 0.35em; }

.markdown-source-view.mod-cm6 .cm-link,
.markdown-source-view.mod-cm6 .cm-url,
.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.markdown-source-view.mod-cm6 .cm-underline {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.markdown-source-view.mod-cm6 .cm-url {
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

.markdown-source-view.mod-cm6 .HyperMD-quote {
  border-left: 4px solid var(--text-accent);
  padding-left: 1em;
  margin-left: 0;
  font-style: italic;
}

.markdown-source-view.mod-cm6 span.cm-inline-code {
  background-color: var(--code-background);
  color: var(--code-normal);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 15px;
  font-family: var(--mpl-font-mono);
}

.markdown-source-view.mod-cm6 pre.HyperMD-codeblock {
  background-color: var(--code-background);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 24px;
}

/* ============================================================
   8) Utilities / fixes
   ============================================================ */

/* Fix: graph view SVG bleed (diagonal line) */
.graph-view-container,
.graph-view-wrapper,
.graph-view,
.graph-view svg {
  overflow: hidden;
}

/* IMPORTANT: remove the z-index overlay that can block graph interaction */
/* (These two lines were disabling interactivity by sitting “above” the graph) */
/*
.site-body-right-column { position: relative; z-index: 2; }
.markdown-rendered { position: relative; z-index: 3; }
*/

/* ============================================================
   9) Responsive
   ============================================================ */
@media (max-width: 767px) {
  .markdown-rendered h1,
  .inline-title { font-size: 36px; }

  .markdown-rendered h2 { font-size: 28px; }
  .markdown-rendered h3 { font-size: 24px; }

  .markdown-rendered p { font-size: 15px; }

  .markdown-rendered blockquote { font-size: 18px; }
}

@media (min-width: 1440px) {
  body { --mpl-body-size: 18px; }

  .markdown-rendered h1,
  .inline-title { font-size: 56px; }

  .markdown-rendered h2 { font-size: 42px; }
}

/* ============================================================
   10) Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

*:focus-visible {
  outline: var(--mpl-focus-ring) solid var(--text-accent);
  outline-offset: 2px;
}

/* ============================================================
   11) Print
   ============================================================ */
@media print {
  body { background: white; color: black; }

  h1, h2, h3, h4, h5, h6 {
    color: black;
    page-break-after: avoid;
  }

  p { page-break-inside: avoid; }

  a { color: black; text-decoration: underline; }

  blockquote { border-left-color: black; }
}