/* Custom styles for logo */
.md-logo, .md-logo img {
    width: auto !important;
    height: 1.5rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.md-logo img {
    object-fit: contain !important;
}

/* Header: comfortable vertical breathing room with horizontal padding
   matching Material's default content gutter. */
.md-header__inner {
    padding: 0.65rem 1rem !important;
}

/* Subtle bottom divider so the header doesn't bleed into the content area. */
.md-header {
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    box-shadow: none;
}

/* Tighten the gap between the logo glyph and the "DSPy" wordmark.
   The SVG canvas is square (2000×2000) with internal whitespace, so without
   this the title sits noticeably far from the icon. */
.md-header__title {
    margin-left: 0.25rem;
}

/* Breathing room between the tabs row and the first content element. */
.md-main__inner {
    margin-top: 2rem;
}

/* Responsive adjustments */
@media screen and (min-width: 76.25em) {
    .md-logo {
        height: 1.8rem !important; /* Reduced from 2.2rem */
    }
    .md-logo img {
        height: 1.8rem !important; /* Reduced from 2.2rem */
    }
}

/* Dark mode specific adjustments */
[data-md-color-scheme="slate"] .md-logo img {
    filter: brightness(0.9);
}

/* Default max-width */
.md-content {
    max-width: 980px;
    margin: 0 auto;
}


/* Adjust width when a sidebar or TOC is present */
@media (min-width: 1700px) {
    /* Increase width when there's enough space (like on desktop or tablet landscape) */
    .md-content {
        min-width: 980px;
    }
}


/* Main content: left-align (ragged right) for screen readability.
   Justified text causes uneven word spacing without proper hyphenation. */
.md-content__inner p {
    text-align: left;
}

/* Grid cards already left-aligned (kept for clarity) */
.md-content__inner .grid.cards p {
    text-align: left;
}

/* Base styling for the output area */
.jp-Cell-outputWrapper .jp-OutputArea-output pre {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 15px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Light mode specific styling */
:root {
    --output-bg-light: #fafafa;
    --output-border-light: #ddd;
    --output-text-light: #333;
}

body[data-md-color-scheme="default"] .jp-Cell-outputWrapper .jp-OutputArea-output pre {
    background-color: var(--output-bg-light);
    border: 1px solid var(--output-border-light);
    color: var(--output-text-light);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

/* Dark mode specific styling */
:root {
    --output-bg-dark: #2e2e2e;
    --output-border-dark: #555;
    --output-text-dark: #e0e0e0;
}

body[data-md-color-scheme="slate"] .jp-Cell-outputWrapper .jp-OutputArea-output pre {
    background-color: var(--output-bg-dark);
    border: 1px solid var(--output-border-dark);
    color: var(--output-text-dark);
    box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.1);
}



/* Set a fixed width for the sidebar */
.md-sidebar {
    width: 235px;
}

/* Adjust search bar position */
.md-search {
    margin-left: auto;
    padding-right: 0;
}

/* If you need to adjust the width of the search bar */
.md-search__inner {
    width: 13rem;
}

/* Adjust repository button position and alignment */
.md-header__source {
    margin-left: 1rem;
    margin-right: 0;
    text-align: right;  /* Keep right alignment for container */
}

.md-header__source .md-source {
    justify-content: flex-start;  /* Change to flex-start to align text to left */
    width: auto;  /* Allow element to shrink to content */
    min-width: 0;  /* Remove minimum width constraint */
}

.md-header__source .md-source__icon {
    order: 2;  /* Keep icon on the right */
    margin-left: 0.5rem;
    margin-right: 0;
}

.md-header__source .md-source__repository {
    order: 1;  /* Keep text on the left */
    text-align: left;  /* Ensure text is left-aligned */
}

h2.doc-heading {
    font-size: 1rem;
    font-weight: 700;
}

/* Add more spacing between API sections */
.doc-heading {
    margin-top: 1em;
    border-top: 1px solid var(--md-default-fg-color--lightest);
    font-size: 0.85rem;
}

/* Make method names more prominent */
.doc-method, .doc-function {
    background-color: var(--md-code-bg-color);
    padding: 0.1em;
    margin: 0.5em 0;
    border-radius: 4px;
}

/* Make class documentation stand out */
.doc-class {
    padding: 1em;
    margin: 1em 0;
    border-left: 4px solid var(--md-primary-fg-color);
    background-color: var(--md-code-bg-color);
}

/* Style for type labels */
.doc-label {
    font-size: 0.8em;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    background-color: var(--md-code-bg-color);
    display: inline-block;
    margin: 0.2em 0;
    font-weight: 400;
    text-transform: none;  /* Prevent uppercase transformation */
    color: var(--md-code-fg-color);
}

/* Add indentation and visual cues for nested navigation items */
.md-nav__item .md-nav__item {
    padding-left: 0.3rem;
    border-left: 1px solid var(--md-primary-fg-color--light);
    margin-left: 0.2rem;
}

/* Add some spacing between items */
.md-nav__item {
    margin: 0.3em 0;  /* Reduced from 0.4em */
}

/* Optional: add hover effect */
.md-nav__item .md-nav__item:hover {
    border-left-color: var(--md-primary-fg-color);
}


/* Enhance code examples in documentation */
.highlight {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin: 1.5em 0;
    padding: 1em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] .highlight {
    background-color: #2b2b2b;
    border-color: #404040;
}

/* Add subtle left border for visual interest */
.highlight pre {
    margin: 0;
}

/* Ensure code is readable */
.highlight code {
    font-family: "Fira Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.82em;
    line-height: 1.55;
}

.highlight .linenos {
    font-size: 0.82em;
}

/* Copy button styling */
.highlight .md-clipboard {
    color: var(--md-default-fg-color--lighter);
}

.highlight .md-clipboard:hover {
    color: var(--md-accent-fg-color);
}

/* Tutorial navigation "Learn more" styling */
.learn-more-item .md-nav__link {
    font-style: italic;
    opacity: 0.85;
    font-size: 0.9em;
    transition: opacity 0.2s ease;
}

.learn-more-item .md-nav__link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ---- Use Cases hero: lede + logo wall + spotlights ---- */
.md-content__inner p.dspy-lede {
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: left;
    margin: 1rem 0 0.75rem;
    color: var(--md-default-fg-color);
}


.dspy-logo-wall {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    justify-items: center;
    gap: 1rem 1.5rem;
    padding: 1.75rem 1rem;
    border-top: 1px solid var(--md-default-fg-color--lightest);
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    margin: 1rem 0 1.5rem;
}
@media (max-width: 720px) {
    .dspy-logo-wall {
        grid-template-columns: repeat(3, 1fr);
    }
}
.dspy-logo-wall a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}
.dspy-logo-wall a:hover {
    opacity: 1;
}
.dspy-logo-wall img {
    width: auto;
    object-fit: contain;
}
/* Per-logo sizing: tuned so each wordmark has similar visual presence */
.dspy-logo-wall img.logo-shopify    { height: 30px; max-width: 130px; }
.dspy-logo-wall img.logo-databricks { height: 26px; max-width: 150px; }
.dspy-logo-wall img.logo-dropbox    { height: 26px; max-width: 150px; }
.dspy-logo-wall img.logo-jetblue    { height: 22px; max-width: 100px; }
.dspy-logo-wall img.logo-replit     { height: 28px; max-width: 32px; }
.dspy-logo-wall img.logo-aws        { height: 26px; max-width: 60px; }
[data-md-color-scheme="slate"] .dspy-logo-wall img {
    filter: brightness(0) invert(1);
}

.dspy-spotlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.dspy-spotlight {
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 6px;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--md-default-bg-color);
}
.dspy-spotlight .dspy-spotlight-logo {
    height: 36px;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
}
.dspy-spotlight .dspy-spotlight-logo img {
    width: auto;
    object-fit: contain;
}
.dspy-spotlight .dspy-spotlight-logo img.logo-shopify    { height: 34px; max-width: 150px; }
.dspy-spotlight .dspy-spotlight-logo img.logo-databricks { height: 30px; max-width: 170px; }
.dspy-spotlight .dspy-spotlight-logo img.logo-dropbox    { height: 30px; max-width: 170px; }
[data-md-color-scheme="slate"] .dspy-spotlight .dspy-spotlight-logo img {
    filter: brightness(0) invert(1);
}
.dspy-spotlight .dspy-spotlight-metric {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--md-default-fg-color);
}
.dspy-spotlight .dspy-spotlight-desc {
    color: var(--md-default-fg-color--light);
    font-size: 0.85rem;
    line-height: 1.4;
}
.dspy-spotlight .dspy-spotlight-link {
    margin-top: auto;
    font-size: 0.85rem;
}

/* ---- Use Cases hero: alternating quote rows (Modal-style) ---- */
.dspy-quote-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.dspy-quote-row:first-of-type {
    border-top: 1px solid var(--md-default-fg-color--lightest);
}
.dspy-quote-row .dspy-quote-logo img {
    height: 28px;
    width: auto;
    max-width: 130px;
}
.dspy-quote-row .dspy-quote-logo img.logo-mono {
    filter: brightness(0);
}
[data-md-color-scheme="slate"] .dspy-quote-row .dspy-quote-logo img.logo-mono {
    filter: brightness(0) invert(1);
}
.dspy-quote-row .dspy-quote-body {
    font-size: 1rem;
    line-height: 1.5;
}
.dspy-quote-row .dspy-quote-body strong {
    font-weight: 700;
}
.dspy-quote-row .dspy-quote-link {
    font-size: 0.85rem;
    margin-top: 0.4rem;
    display: inline-block;
}

/* =========================================================================
   Readability tuning (applies site-wide)
   - Cap prose at ~70 characters per line (Bringhurst: 45–75 ideal)
   - Slight line-height bump for body text
   - Breathing room before the prev/next footer
   - Wrap plain (non-language) code blocks so long output lines don't scroll
   - Higher-contrast Pygments tokens for Python in light mode
   - Darker body text and heavier headings for stronger hierarchy
   ========================================================================= */

/* Stronger body text contrast (light mode).
   Material's default is hsla(0, 0%, 0%, 0.87) which renders softer than a
   solid near-black. */
[data-md-color-scheme="default"] {
    --md-default-fg-color:        #1f2328;
    --md-default-fg-color--light:  #424950;
    --md-default-fg-color--lighter:#6e7681;
    --md-typeset-color:            #1f2328;
}

/* Heavier, more solid headings. Plex Sans at 600 has presence without
   shouting; 700 for h1 sets a clear top of hierarchy. */
.md-typeset h1 { font-weight: 700; letter-spacing: -0.01em; }
.md-typeset h2 { font-weight: 600; letter-spacing: -0.005em; }
.md-typeset h3 { font-weight: 600; }
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 { font-weight: 600; }

/* Cap prose line-length for comfortable reading. Code blocks, tables, and
   admonitions keep the full content width. */
.md-content__inner > p,
.md-content__inner > ul,
.md-content__inner > ol,
.md-content__inner > blockquote,
.md-content__inner > h1,
.md-content__inner > h2,
.md-content__inner > h3,
.md-content__inner > h4,
.md-content__inner > h5,
.md-content__inner > h6 {
    max-width: 44rem;
}

/* Body text typography (Butterick: line-height 120–145%, body 15–25px).
   1.5 sits just above the upper bound for screen comfort; 17px sits a tick
   above Material's 16px default. */
.md-typeset {
    font-size: 17px;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
    letter-spacing: -0.005em;
}

.md-typeset p,
.md-typeset li {
    line-height: 1.5;
}

/* Paragraph spacing ~12pt at 17px body — inside Butterick's "4–10pt + indent
   OR 4–10pt space, not both" guidance (we use space, no indent). */
.md-typeset p {
    margin-bottom: 0.7em;
}

/* Breathing room between the last paragraph and the dark prev/next footer */
.md-content {
    padding-bottom: 3.5rem;
}

/* Wrap plain text / output blocks (no language tag).
   Python and other language-tagged blocks keep horizontal scroll. */
.md-typeset pre > code:not([class*="language-"]),
.md-typeset pre > code.language-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ----- Higher-contrast Python syntax (light mode) -----
   Inspired by GitHub Primer; all colors pass WCAG AA on white. */
[data-md-color-scheme="default"] .highlight .k,
[data-md-color-scheme="default"] .highlight .kn,
[data-md-color-scheme="default"] .highlight .kd,
[data-md-color-scheme="default"] .highlight .kr      { color: #cf222e; }              /* keyword */
[data-md-color-scheme="default"] .highlight .kc      { color: #0550ae; font-weight: 600; }  /* True / False / None */
[data-md-color-scheme="default"] .highlight .nb      { color: #6639ba; }              /* builtin (print, len) */
[data-md-color-scheme="default"] .highlight .nf,
[data-md-color-scheme="default"] .highlight .fm      { color: #8250df; }              /* function name */
[data-md-color-scheme="default"] .highlight .nc      { color: #953800; }              /* class name */
[data-md-color-scheme="default"] .highlight .nd      { color: #8250df; }              /* decorator */
[data-md-color-scheme="default"] .highlight .s,
[data-md-color-scheme="default"] .highlight .s1,
[data-md-color-scheme="default"] .highlight .s2,
[data-md-color-scheme="default"] .highlight .sb,
[data-md-color-scheme="default"] .highlight .sa      { color: #0a3069; }              /* strings */
[data-md-color-scheme="default"] .highlight .sd      { color: #57606a; font-style: italic; }  /* docstring */
[data-md-color-scheme="default"] .highlight .se      { color: #cf222e; }              /* string escape */
[data-md-color-scheme="default"] .highlight .si      { color: #0a3069; font-weight: 600; }    /* string interp */
[data-md-color-scheme="default"] .highlight .mi,
[data-md-color-scheme="default"] .highlight .mf,
[data-md-color-scheme="default"] .highlight .mh,
[data-md-color-scheme="default"] .highlight .mo      { color: #0550ae; }              /* numbers */
[data-md-color-scheme="default"] .highlight .c,
[data-md-color-scheme="default"] .highlight .c1,
[data-md-color-scheme="default"] .highlight .cm,
[data-md-color-scheme="default"] .highlight .ch      { color: #57606a; font-style: italic; }  /* comments */
[data-md-color-scheme="default"] .highlight .o,
[data-md-color-scheme="default"] .highlight .ow      { color: #24292f; }              /* operators */
[data-md-color-scheme="default"] .highlight .p       { color: #24292f; }              /* punctuation */
[data-md-color-scheme="default"] .highlight .bp      { color: #6639ba; }              /* self */
[data-md-color-scheme="default"] .highlight .n       { color: #1f2328; }              /* default identifier */