/* ============================================
   Obsidian Publish Theme: The Economist Style
   ============================================

   Inspired by The Economist's classic design:
   - Serif typography for elegance and readability
   - Iconic Economist red (#E3120B) as accent color
   - Clean, professional newspaper aesthetic
   - High contrast for optimal readability
   ============================================ */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Open+Sans:wght@400;600;700&display=swap');

/* ============================================
   CSS Variables
   ============================================ */

.theme-light,
.theme-dark {
  /* Vibrant orange accent color */
  --economist-red: #EE5819;
  --economist-red-dark: #D14D16;
  --economist-red-light: #FF7A3D;

  /* Typography */
  --font-text: 'Merriweather', 'Georgia', serif;
  --font-text-theme: 'Merriweather', 'Georgia', serif;
  --font-interface: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-monospace: 'Courier New', Courier, monospace;

  /* Font sizes - refined for readability */
  --font-smallest: 0.75rem;
  --font-smaller: 0.875rem;
  --font-small: 0.9375rem;
  --font-ui-small: 0.9375rem;
  --font-ui-medium: 1rem;
  --font-normal: 1.125rem;
  --font-text-size: 1.125rem;

  /* Heading sizes - elegant hierarchy */
  --h1-size: 2.5rem;
  --h1-weight: 400;
  --h1-line-height: 1.2;
  --h2-size: 1.875rem;
  --h2-weight: 700;
  --h2-line-height: 1.3;
  --h3-size: 1.5rem;
  --h3-weight: 700;
  --h3-line-height: 1.4;
  --h4-size: 1.25rem;
  --h4-weight: 600;
  --h4-line-height: 1.4;
  --h5-size: 1.125rem;
  --h5-weight: 600;
  --h6-size: 1rem;
  --h6-weight: 600;

  /* Line height and spacing */
  --line-height-normal: 1.7;
  --line-height-tight: 1.4;
  --line-width: 45rem;
  --line-width-wide: 55rem;
  --file-line-width: 45rem;

  /* Borders and radius */
  --radius-s: 2px;
  --radius-m: 3px;
  --radius-l: 4px;
  --border-width: 1px;
}

/* Light theme colors */
.theme-light {
  --background-primary: #FFFFFF;
  --background-primary-alt: #FAFAFA;
  --background-secondary: #F5F5F5;
  --background-secondary-alt: #EEEEEE;
  --background-modifier-border: #DDDDDD;
  --background-modifier-border-hover: #CCCCCC;
  --background-modifier-border-focus: #999999;

  --text-normal: #1A1A1A;
  --text-muted: #666666;
  --text-faint: #999999;
  --text-on-accent: #FFFFFF;

  --text-accent: var(--economist-red);
  --text-accent-hover: var(--economist-red-dark);
  --interactive-accent: var(--economist-red);
  --interactive-accent-hover: var(--economist-red-dark);

  --link-color: var(--economist-red);
  --link-color-hover: var(--economist-red-dark);
  --link-external-color: var(--economist-red);
  --link-unresolved-color: #999999;

  --text-selection: rgba(227, 18, 11, 0.15);
  --text-highlight-bg: rgba(255, 235, 59, 0.4);

  --code-background: #F5F5F5;
  --code-normal: #1A1A1A;
}

/* Dark theme colors */
.theme-dark {
  --background-primary: #1A1A1A;
  --background-primary-alt: #242424;
  --background-secondary: #2B2B2B;
  --background-secondary-alt: #333333;
  --background-modifier-border: #444444;
  --background-modifier-border-hover: #555555;
  --background-modifier-border-focus: #666666;

  --text-normal: #E5E5E5;
  --text-muted: #999999;
  --text-faint: #666666;
  --text-on-accent: #FFFFFF;

  --text-accent: var(--economist-red-light);
  --text-accent-hover: #FF6B60;
  --interactive-accent: var(--economist-red-light);
  --interactive-accent-hover: #FF6B60;

  --link-color: var(--economist-red-light);
  --link-color-hover: #FF6B60;
  --link-external-color: var(--economist-red-light);
  --link-unresolved-color: #777777;

  --text-selection: rgba(242, 66, 54, 0.25);
  --text-highlight-bg: rgba(255, 235, 59, 0.25);

  --code-background: #2B2B2B;
  --code-normal: #E5E5E5;
}

/* ============================================
   Typography
   ============================================ */

body {
  font-family: var(--font-text);
  font-size: var(--font-normal);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-text);
  font-weight: var(--h1-weight);
  color: var(--text-normal);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.markdown-preview-view h1,
.published-container h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--economist-red);
  padding-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.markdown-preview-view h2,
.published-container h2,
h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.markdown-preview-view h3,
.published-container h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  margin-top: 2rem;
}

.markdown-preview-view h4,
.published-container h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  margin-top: 1.75rem;
}

.markdown-preview-view h5,
.published-container h5 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  margin-top: 1.5rem;
}

.markdown-preview-view h6,
.published-container h6 {
  font-size: var(--h6-size);
  font-weight: var(--h6-weight);
  margin-top: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Paragraphs */
p {
  margin-bottom: 1.25rem;
  margin-top: 0;
}

/* Drop cap for first paragraph after h1 - Economist style */
.markdown-preview-view h1 + p::first-letter,
.published-container h1 + p::first-letter,
.markdown-rendered h1 + p::first-letter,
h1 + p::first-letter,
article h1 + p::first-letter,
.page-content h1 + p::first-letter {
  float: left;
  font-size: 4.5rem;
  line-height: 3.5rem;
  padding-right: 0.125rem;
  padding-top: 0.25rem;
  margin-right: 0.125rem;
  font-weight: 900;
  color: var(--economist-red);
  font-family: var(--font-text);
}

/* Manual drop cap class - wrap around first letter only */
.drop-cap {
  float: left;
  font-size: 4.5rem;
  line-height: 3.5rem;
  padding-right: 0.125rem;
  padding-top: 0.25rem;
  margin-right: 0.125rem;
  font-weight: 900;
  color: var(--economist-red);
  font-family: var(--font-text);
}

/* Strong and emphasis */
strong {
  font-weight: 700;
  color: var(--text-normal);
}

em {
  font-style: italic;
}

/* ============================================
   Links
   ============================================ */

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--link-color-hover);
  text-decoration: underline;
}

.internal-link {
  color: var(--link-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.internal-link:hover {
  border-bottom-color: var(--link-color-hover);
  text-decoration: none;
}

.is-unresolved {
  color: var(--link-unresolved-color);
  opacity: 0.7;
}

.external-link {
  color: var(--link-external-color);
}

.external-link::after {
  content: ' ↗';
  font-size: 0.85em;
  opacity: 0.7;
}

/* ============================================
   Lists
   ============================================ */

ul, ol {
  padding-left: 2rem;
  margin-bottom: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
  line-height: var(--line-height-normal);
}

ul ul, ol ol, ul ol, ol ul {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Task lists */
.task-list-item {
  list-style: none;
  margin-left: -2rem;
  padding-left: 2rem;
}

input[type="checkbox"] {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--background-modifier-border);
  border-radius: 2px;
}

/* ============================================
   Blockquotes - Economist style pull quotes
   ============================================ */

blockquote {
  border-left: 4px solid var(--economist-red);
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 2rem;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-muted);
  background: transparent;
}

blockquote p {
  margin-bottom: 0.75rem;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ============================================
   Code
   ============================================ */

code {
  font-family: var(--font-monospace);
  font-size: 0.9em;
  background-color: var(--code-background);
  color: var(--code-normal);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--background-modifier-border);
}

pre {
  background-color: var(--code-background);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: 1rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  line-height: 1.5;
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.875rem;
}

/* ============================================
   Tables - Clean Economist style
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: var(--font-small);
}

thead {
  border-bottom: 2px solid var(--economist-red);
}

th {
  font-weight: 700;
  text-align: left;
  padding: 0.75rem 1rem;
  background-color: var(--background-secondary-alt);
  border-bottom: 2px solid var(--economist-red);
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--background-modifier-border);
}

tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background-color: var(--background-secondary);
}

/* ============================================
   Horizontal Rules
   ============================================ */

hr {
  border: none;
  border-top: 1px solid var(--background-modifier-border);
  margin: 2.5rem 0;
}

/* ============================================
   Content Width
   ============================================ */

.markdown-preview-sizer,
.markdown-preview-section {
  max-width: var(--line-width) !important;
}

/* ============================================
   Images
   ============================================ */

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
  margin: 1.5rem 0;
}

.markdown-preview-view img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   Navigation and UI
   ============================================ */

.site-body-left-column,
.site-body-left-column:before {
  background-color: var(--background-primary);
  border-right: 1px solid var(--background-modifier-border);
  font-family: var(--font-interface);
}

.site-body-left-column-site-name {
  font-family: var(--font-text);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--economist-red);
  padding: 1.5rem 1rem 1.5rem 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--text-normal);
}

/* Navigation folder titles - also bold like Economist */
.nav-folder-title,
.tree-item-self {
  font-family: var(--font-interface);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-normal);
  padding: 0.625rem 1rem;
  letter-spacing: 0.01em;
}

.nav-folder-title:hover,
.tree-item-self:hover {
  color: var(--economist-red);
  background-color: transparent;
}

/* File titles in navigation */
.nav-file-title {
  font-weight: 600;
  color: var(--text-normal);
  padding: 0.5rem 1rem;
}

.nav-file-title:hover {
  color: var(--economist-red);
  background-color: transparent;
}

.tree-item-inner {
  font-family: var(--font-interface);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-normal);
  padding: 0.375rem 1rem;
  border-radius: 0;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.tree-item-inner:hover {
  color: var(--economist-red);
  background-color: transparent;
}

.tree-item-inner.is-active {
  color: var(--economist-red);
  background-color: transparent;
  font-weight: 700;
  border-bottom: 3px solid var(--economist-red);
  padding-bottom: calc(0.375rem - 3px);
}

/* ============================================
   Page Header
   ============================================ */

.page-header {
  border-bottom: 2px solid var(--economist-red);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.page-header-title {
  font-family: var(--font-text);
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-normal);
}

/* ============================================
   Backlinks
   ============================================ */

.backlinks {
  border-top: 2px solid var(--background-modifier-border);
  margin-top: 3rem;
  padding-top: 2rem;
}

.backlink-pane .tree-item-inner {
  font-size: var(--font-smaller);
}

/* ============================================
   Tags
   ============================================ */

.tag {
  background-color: transparent;
  border: 1px solid var(--background-modifier-border);
  color: var(--text-muted);
  font-family: var(--font-interface);
  font-size: var(--font-smaller);
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.tag:hover {
  background-color: var(--background-secondary);
  border-color: var(--economist-red);
  color: var(--economist-red);
}

/* ============================================
   Search
   ============================================ */

.search-input {
  font-family: var(--font-interface);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: 0.5rem 0.75rem;
  font-size: var(--font-small);
}

.search-input:focus {
  border-color: var(--economist-red);
  outline: none;
}

.search-result-file-title {
  font-family: var(--font-interface);
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-normal);
}

.search-result-file-title:hover {
  color: var(--economist-red);
}

/* ============================================
   Graph View
   ============================================ */

.graph-view.color-fill {
  color: var(--economist-red);
}

.graph-view.color-fill-tag {
  color: var(--text-muted);
}

.graph-view.color-line {
  color: var(--background-modifier-border);
}

/* ============================================
   Footnotes
   ============================================ */

.footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--background-modifier-border);
  font-size: var(--font-small);
  color: var(--text-muted);
}

.footnote-ref {
  font-size: 0.85em;
  vertical-align: super;
  color: var(--economist-red);
  text-decoration: none;
}

.footnote-ref:hover {
  text-decoration: underline;
}

/* ============================================
   Embeds
   ============================================ */

.markdown-embed {
  border-left: 2px solid var(--background-modifier-border);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
}

.markdown-embed-title {
  font-family: var(--font-interface);
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 18pt;
  }

  h3 {
    font-size: 14pt;
  }

  .site-body-left-column,
  .page-header,
  .backlinks {
    display: none;
  }
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
  :root {
    --h1-size: 2rem;
    --h2-size: 1.5rem;
    --h3-size: 1.25rem;
    --font-normal: 1rem;
  }

  .markdown-preview-view h1 + p::first-letter,
  .published-container h1 + p::first-letter {
    font-size: 3.5rem;
    line-height: 2.5rem;
  }

  blockquote {
    font-size: 1.125rem;
    padding-left: 1rem;
  }
}

/* ============================================
   Accessibility
   ============================================ */

:focus {
  outline: 2px solid var(--economist-red);
  outline-offset: 2px;
}

::selection {
  background-color: var(--text-selection);
}

/* ============================================
   Custom Economist Elements
   ============================================ */

/* Styled byline - add class "byline" to paragraph */
.byline {
  font-family: var(--font-interface);
  font-size: var(--font-small);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  font-weight: 600;
}

/* Styled dateline - add class "dateline" to paragraph */
.dateline {
  font-family: var(--font-interface);
  font-size: var(--font-small);
  color: var(--text-muted);
  font-style: normal;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

/* Pull quote - add class "pullquote" to blockquote */
.pullquote {
  border: none;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--economist-red);
  font-weight: 600;
  text-align: center;
  margin: 2.5rem 0;
  padding: 2rem;
  border-top: 3px solid var(--economist-red);
  border-bottom: 3px solid var(--economist-red);
  font-style: normal;
}

/* ============================================
   Custom Callouts
   ============================================ */

/* Map callout with network icon */
.callout[data-callout="map"] {
  --callout-color: 74, 144, 226;
  --callout-icon: lucide-network;
}

.callout[data-callout="feed"] {
  --callout-color: 74, 144, 226;
  --callout-icon: lucide-rss;
}

.callout[data-callout="book"] {
  --callout-color: 74, 144, 226;
  --callout-icon: lucide-library-big;
}

.callout[data-callout="log"] {
  --callout-color: 74, 144, 226;
  --callout-icon: lucide-logs;
}

.callout[data-callout="article"] {
  --callout-color: 74, 144, 226;
  --callout-icon: lucide-newspaper;
}

.callout[data-callout="notes"] {
  --callout-color: 74, 144, 226;
  --callout-icon: "lucide-music-3";
}

.callout[data-callout="globe"] {
  --callout-color: 74, 144, 226;
  --callout-icon: lucide-globe;
}

/* Constrain Giscus width and center it */
.giscus-wrapper {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* Optional: Make it responsive */
@media (max-width: 900px) {
    .giscus-wrapper {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Ensure the iframe doesn't overflow */
.giscus-frame {
    max-width: 100% !important;
}