/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Slab:wght@400;600;700&family=Source+Code+Pro:wght@400;500&display=swap');

/* Custom styles for Furo theme */
:root {
    /* Your forge-inspired color palette */
    --dark-charcoal: #2A2A2A;
    --copper-orange: #D35400;
    --rich-brown: #5D4037;
    --ember-red: #C0392B;
    --pale-gold: #F1C40F;
    --slate-blue: #34495E;
    --light-gray: #F5F5F5;
}

/* Fix for dark mode inconsistent background */
[data-theme="dark"] {
    --color-background-primary: var(--dark-charcoal) !important;
    --color-background-secondary: #1A1A1A !important;
    --color-background: #222222 !important;
    --color-foreground-primary: var(--light-gray) !important;
    --color-foreground-secondary: #CCCCCC !important;
    
    /* Code blocks in dark mode */
    --color-code-background: #333333 !important;
    --color-code-foreground: var(--light-gray) !important;
    
    /* Admonitions in dark mode */
    --color-admonition-background: rgba(53, 53, 53, 0.8) !important;
}

/* Font family overrides */
.sidebar-brand-text, h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif !important;
}

.toc-title, .sidebar-tree .caption {
    font-family: 'Roboto Slab', serif !important;
    font-weight: 600;
}

.content {
    font-family: 'Roboto', sans-serif !important;
}

pre, code, .highlight {
    font-family: 'Source Code Pro', monospace !important;
}

/* Logo styling in sidebar */
.sidebar-brand-container {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.sidebar-logo {
    height: 32px;
    width: auto;
    margin-right: 16px;
}

/* Remove the "documentation" text */
.sidebar-brand-text::after {
    content: "" !important;
}

/* Improve code highlighting in dark mode */
[data-theme="dark"] pre {
    background-color: #333333 !important;
    border: 1px solid #444444;
}

/* Custom styling for syntax highlighting in dark mode */
[data-theme="dark"] .highlight .s1 { color: #d9a0a0; } /* Strings */
[data-theme="dark"] .highlight .nn { color: #a0d9a0; } /* Module names */
[data-theme="dark"] .highlight .nb { color: #a0a0d9; } /* Built-ins */
[data-theme="dark"] .highlight .k { color: var(--pale-gold); } /* Keywords */
[data-theme="dark"] .highlight .n { color: var(--light-gray); } /* Names */

/* Function signature styling in dark mode */
[data-theme="dark"] .sig {
    background-color: #333333 !important;
}

/* Table styling in dark mode */
[data-theme="dark"] table.docutils {
    border-color: #444444;
}

[data-theme="dark"] table.docutils thead {
    background-color: #333333;
}

[data-theme="dark"] table.docutils tbody tr:nth-child(odd) {
    background-color: #2A2A2A;
}

[data-theme="dark"] table.docutils tbody tr:nth-child(even) {
    background-color: #333333;
}


/* Theme image handling - more robust selectors */
/* For markdown-generated images with data-theme attribute */
img[data-theme="light"] {
    display: block;
  }
  
  img[data-theme="dark"] {
    display: none;
  }
  
  /* For images inside p elements with data-theme attribute */
  p[data-theme="light"] img,
  .light-theme-image {
    display: block;
  }
  
  p[data-theme="dark"] img,
  .dark-theme-image {
    display: none;
  }
  
  /* Dark theme behavior */
  [data-theme="dark"] img[data-theme="light"],
  [data-theme="dark"] p[data-theme="light"] img,
  [data-theme="dark"] .light-theme-image {
    display: none;
  }
  
  [data-theme="dark"] img[data-theme="dark"],
  [data-theme="dark"] p[data-theme="dark"] img,
  [data-theme="dark"] .dark-theme-image {
    display: block;
  }

/* Notebook cell styling */
.cell_input {
    border-left: 2px solid #2ecc71 !important;  /* Thinner bar */
}

/* Different color for dark mode */
html[data-theme="dark"] .cell_input {
    border-left-color: #27ae60;  /* Darker green for dark mode */
}

/* Blog metadata styling */
/* 
Use this in MyST with:

:::{admonition} Post Info
:class: blog-metadata

**Author:** [Name]  
**Published:** [Date]  
**Category:** [Category]  
**Tags:** `tag1` `tag2` `tag3`
:::

*/
.admonition.blog-metadata {
    background: linear-gradient(
        to right,
        var(--color-background-secondary) 0%,
        var(--color-background-primary) 100%
    );
    border-left: 2px solid var(--color-brand-secondary);
    padding: 1rem 1.5rem;
    margin: 0 0 2.5rem 0;
    font-size: 0.95rem;
}

.admonition.blog-metadata .admonition-title {
    display: none;
}

.admonition.blog-metadata p {
    margin: 0.25rem 0;
    color: var(--color-foreground-secondary);
}

.admonition.blog-metadata code {
    background: rgba(var(--color-brand-content), 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Author bio styling */
/* Use this in MyST with:

:::{admonition} About the Author
:class: blog-author-bio

[bio content here]

:::
*/
.admonition.blog-author-bio {
    background: transparent;
    border: none;
    border-top: 2px solid var(--color-background-border);
    padding: 1.5rem 0 0 0;
    margin-top: 3rem;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-foreground-secondary);
}

.admonition.blog-author-bio .admonition-title {
    display: none;
}

.admonition.blog-author-bio p:first-of-type {
    font-style: normal;
    color: var(--color-foreground-primary);
    margin-bottom: 0.5rem;
}

.admonition.blog-author-bio strong {
    font-style: normal;
}

.admonition.blog-author-bio a {
    font-style: normal;
}

/* Hide specific titles in blog posts */
.hidden-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Reduce spacing for h1 elements that only contain hidden titles */
h1:has(.hidden-title) {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}