/*
  Copyright (c) 2025 ADBC Drivers Contributors

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

/***********************************************************************
 * General styles
 ***********************************************************************/
:root {
    --columnar: #434343;
}

/* Sphinx Design's default card border and shadow are black in dark mode,
   making cards disappear into the Slate background. */
[data-md-color-scheme="slate"] {
    --sd-color-card-border: rgba(255, 255, 255, 0.18);
    --sd-color-shadow: rgba(255, 255, 255, 0.08);
}

/* Fixes for questionable choices in Material Design */

/* Header and drawer */
.md-header__button.md-logo {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.md-header__button.md-logo img {
    height: 2.4rem;
}

.md-header {
    background-color: var(--columnar) !important;
}

.md-hero__inner {
    margin: 0 auto;
    padding: 0 1rem;
}

.md-hero__inner p {
    color: white;
    display: inline-block;
}

.md-typeset__table {
    width: 100%;
}

.md-typeset table.data:not(.plain) {
    /* I cannot imagine why Material *doesn't* do this. */
    display: table;
}

/* It can get confusing when there are a lot of columns in a type table and some rows are split instead of merged (because different backends have different types): show cell borders in this case */
tr.row-with-cell-borders td:not([class]):not(:first-child):not(:last-child) {
    border-right: 0.05rem solid var(--md-typeset-table-color);
}

/* Make sphinx-design and sphinx-immaterial play better */
.sd-card-text .sd-btn {
    font-size: inherit;
    padding: 0;
}

/* Fix text wrapping in highlighted code blocks. Very long, unbroken strings
   will break out of their box without this.
*/
.md-typeset pre {
    overflow-x: auto;
}

/* Let the site title wrap in the drawer. Otherwise our long site title
   truncates.
*/
[for=__drawer].md-nav__title {
    text-wrap: inherit;
    line-height: inherit;
}

/* External driver documentation lives alongside the Foundry drivers in the
   primary navigation, but remains visibly distinct. */
.md-sidebar--primary .md-nav__link[href^="http://"],
.md-sidebar--primary .md-nav__link[href^="https://"] {
    gap: 0.25rem;
}

.md-sidebar--primary .md-nav__link > .external-nav-icon {
    fill: currentColor;
    flex: 0 0 0.65rem;
    height: 0.65rem;
    margin-top: 0.15rem;
    opacity: 0.65;
    width: 0.65rem;
}

.md-sidebar--primary .md-nav__link[href^="http://"] .md-ellipsis,
.md-sidebar--primary .md-nav__link[href^="https://"] .md-ellipsis {
    flex-grow: 0;
}

.md-sidebar--primary .md-nav__item:has(
    > .md-nav__link[href^="https://duckdb.org/docs/stable/clients/adbc"]
) {
    border-top: 0.05rem solid var(--md-default-fg-color--lightest);
    margin-top: 0.55rem;
    padding-top: 0.35rem;
}

/* Footer credits share the first row on wide screens. The trademark notice is
   deliberately a separate, full-width row beneath them. */
.footer-sponsor {
    align-items: center;
    color: var(--md-footer-fg-color--lighter);
    display: flex;
    font-size: 0.64rem;
    gap: 0.3rem;
    justify-content: center;
    margin: auto 0.6rem;
    padding: 0.4rem 0 0.6rem;
    white-space: nowrap;
    width: 100%;
}

.md-footer-meta .footer-trademark {
    color: var(--md-footer-fg-color--lighter);
    flex: 0 1 calc(100% - 1.2rem);
    font-size: 0.64rem;
    margin: 0 0.6rem 0.4rem;
    max-width: calc(100% - 1.2rem);
    padding: 0;
}

.md-footer-meta .footer-sponsor__link {
    color: var(--md-footer-fg-color--light);
    display: inline-flex;
    outline-offset: 0.15rem;
    transition: color 125ms;
}

.md-footer-meta .footer-sponsor__link:focus,
.md-footer-meta .footer-sponsor__link:hover {
    color: var(--md-footer-fg-color);
}

.footer-sponsor__logo {
    background-color: currentColor;
    display: block;
    height: 1.2rem;
    -webkit-mask-image: url("columnar-logo.svg");
    mask-image: url("columnar-logo.svg");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 4.8rem;
}

@media screen and (min-width: 45em) {
    .md-footer-meta__inner {
        align-items: center;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .md-footer-meta .md-copyright {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        width: auto;
    }

    .footer-sponsor {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        justify-self: end;
        width: auto;
    }

    .md-footer-meta .footer-trademark {
        align-self: flex-start;
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
    }
}

/***********************************************************************
 Custom shields.io style badges. See conf.py. sphinx-design badges are too
 simple and this lets us customize our badges exactly as we need.

 - Supports light+dark mode
 - Available styles: primary, secondary, success, warning, danger, info
 ***********************************************************************/

/* Base badge styles */
.custom-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 0.3rem;
    overflow: hidden;
    font-size: 75%;
    line-height: 1rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* Badge label (left part) */
.custom-badge .custom-badge-label {
    padding: 0.25em 0.5em;
    font-weight: 600;
}

/* Badge value (right part) */
.custom-badge .custom-badge-value {
    padding: 0.25em 0.5em;
}

/* primary material-blue-800 */
.custom-badge-primary .custom-badge-label {
    background-color: #0277BD;
    color: #ffffff;
}

.custom-badge-primary .custom-badge-value {
    background-color: #B3E5FC;
    color: #0d47a1;
}

[data-md-color-scheme="slate"] .custom-badge-primary .custom-badge-value {
    background-color: #1e3a5f;
    color: #90caf9;
}

/* secondary */
.custom-badge-secondary .custom-badge-label {
    background-color: #616161;
    color: #ffffff;
}

.custom-badge-secondary .custom-badge-value {
    background-color: #eeeeee;
    color: #424242;
}

[data-md-color-scheme="slate"] .custom-badge-secondary .custom-badge-value {
    background-color: #424242;
    color: #e0e0e0;
}

/* success */
.custom-badge-success .custom-badge-label {
    background-color: #2e7d32;
    color: #ffffff;
}

.custom-badge-success .custom-badge-value {
    background-color: #e8f5e9;
    color: #1b5e20;
}

[data-md-color-scheme="slate"] .custom-badge-success .custom-badge-value {
    background-color: #1b4d20;
    color: #a5d6a7;
}

/* warning */
.custom-badge-warning .custom-badge-label {
    background-color: #ef6c00;
    color: #ffffff;
}

.custom-badge-warning .custom-badge-value {
    background-color: #fff3e0;
    color: #e65100;
}

[data-md-color-scheme="slate"] .custom-badge-warning .custom-badge-value {
    background-color: #4d2c00;
    color: #ffcc80;
}

/* danger */
.custom-badge-danger .custom-badge-label {
    background-color: #c62828;
    color: #ffffff;
}

.custom-badge-danger .custom-badge-value {
    background-color: #ffebee;
    color: #b71c1c;
}

[data-md-color-scheme="slate"] .custom-badge-danger .custom-badge-value {
    background-color: #4d1a1a;
    color: #ef9a9a;
}

/* info */
.custom-badge-info .custom-badge-label {
    background-color: #616161;
    color: #ffffff;
}

.custom-badge-info .custom-badge-value {
    background-color: #bdbdbd80;
    color: #424242;
}

[data-md-color-scheme="slate"] .custom-badge-info .custom-badge-value {
    background-color: #bdbdbd47;
    color: #edededa0;
}

/*
  Hack because I couldn't figure out how to override og-title on the index page.

  We want the header logo to be at the top and we don't want an actual, visible
  <h1> with the site title.

  The first thing I tried was eval-rst with the documented sphinx-opengraph
  override for :og:title: but it doesn't work at all and the content gets
  rendered literally and not processed. The second thing I tried was to add a
  top level heading but hide it with CSS but sphinx-opengraph includes the class
  in the result.

  So this is slightly more complicated than that. Apparently Sphinx turns the
  top level header into an id so as long as on other page has the exact same title this should work.

  From: https://www.tpgi.com/the-anatomy-of-visually-hidden/
*/
#adbc-driver-foundry>h1,
#adbc-driver-foundry-documentation>h1 {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Customizing https://sphinx-design.readthedocs.io/en/latest/cards.html so we
can display an icon. This class is used by the class-body card option. */
.sd-card-with-icon {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    position: relative;
}

.sd-card-with-icon > * {
    margin: 0;
}

.sd-card-with-icon > :nth-child(2),
.sd-card-with-icon > :nth-child(3) {
    display: flex;
    justify-content: flex-end;
}

/* Override the align-center class margins on the image */
.sd-card-with-icon > :nth-child(2) img,
.sd-card-with-icon > :nth-child(3) img {
    margin-left: auto;
    margin-right: 0;
}

/* Vertically center */
.sd-card-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/***********************************************************************
 * Light/dark mode image utilities used for icons in cards
 ***********************************************************************/

[data-md-color-scheme="slate"] .only-light {
    display: none !important;
}

.only-dark {
    display: none !important;
}

[data-md-color-scheme="slate"] .only-dark {
    display: flex !important;
}

/* Driver header links at top of driver pages
   ┌────────────────┐┌─────────────────────────────────────────────────────┐
   │ <DRIVER H1     ││                              <-- growing   <GITHUB> │
   └────────────────┘└─────────────────────────────────────────────────────┘
*/

/* Use flexbox to position h1 and links side-by-side */
section:has(> .driver-header-links) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

/* Allow the h1 to wrap for long titles, but prevent it from pushing the icon off */
section:has(> .driver-header-links) > h1 {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 32px);
}

/* The header links stay fixed on the right */
section > .driver-header-links {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.5em;
    line-height: 0;
    margin: 0 0 1.25em auto;
}

/* Align SVG baseline with h1 text */
section > .driver-header-links svg {
    display: block;
}

/* Make sure other section children take full width on new lines */
section:has(> .driver-header-links) > *:not(h1):not(.driver-header-links) {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}

/* Let wide tables scroll on very narrow mobile viewports to avoid breaking the
layout */
section:has(> .driver-header-links) .md-typeset__scrollwrap,
section:has(> .driver-header-links) .md-typeset__table {
    max-width: 100%;
    overflow-x: auto;
}

/* Announcement card: white text and links on a primary-colored background */
.sd-card-announcement a {
    color: white !important;
    text-decoration: underline;
}

/* Color the GitHub icon - black in light mode, white in dark mode */
.driver-github-link {
    color: black !important;
}

[data-md-color-scheme="slate"] .driver-github-link {
    color: white !important;
}

/* For grids on the homepage: remove forced padding on the sides */
.grid-no-padding {
    padding-left: 0;
    padding-right: 0;
}

.homepage-intro-grid {
    padding-bottom: 0.5rem;
    row-gap: 20px;
}

/* Vertically center text of a grid item */
.grid-vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.grid-vertical-center p:last-child {
    margin-bottom: 0;
}

/***********************************************************************
 * Unified site navigation and editorial pages
 ***********************************************************************/

/* Give the native top-level tabs a little more definition while retaining
   the documentation theme's restrained, utilitarian character. */
.md-tabs {
    background-color: var(--columnar);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.md-tabs__link {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.homepage-nav {
    margin: 1.25rem 0 1rem;
}

.homepage-nav-card {
    border-top: 0.18rem solid var(--md-accent-fg-color);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.homepage-nav-card:hover {
    border-top-color: var(--md-primary-fg-color);
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.12);
    transform: translateY(-0.08rem);
}

.homepage-nav-card .sd-card-title {
    font-size: 1.05rem;
}

.text-muted {
    color: var(--md-default-fg-color--light);
}

.about-query {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.about-tagline {
    margin-top: 1.75rem;
}

/* Recent-post navigation shown throughout the blog. */
.blog-sidebar {
    padding-bottom: 1.5rem;
}

.blog-sidebar-panel {
    display: none;
}

body:has(.blog-sidebar) .md-content h1 > .headerlink {
    display: none;
}

@media screen and (min-width: 76.25em) {
    .md-sidebar.blog-sidebar-shell {
        height: auto;
    }

    .blog-sidebar-shell .md-sidebar__scrollwrap {
        backface-visibility: visible;
        overflow: visible;
    }

    .blog-sidebar-drawer {
        display: none;
    }

    .blog-sidebar-panel {
        display: block;
        padding-inline-end: 1rem;
    }
}

.blog-sidebar__header {
    border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
    margin: 0 0.6rem 0.4rem;
    padding: 0.35rem 0 0.7rem;
}

.blog-sidebar__header a,
.blog-sidebar__header span {
    display: block;
}

.blog-sidebar__header a {
    color: var(--md-default-fg-color);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.blog-sidebar__header span {
    color: var(--md-default-fg-color--light);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
    text-transform: uppercase;
}

.blog-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-sidebar__item {
    margin: 0;
}

.blog-sidebar__link {
    border-left: 0.12rem solid transparent;
    display: block;
    padding: 0.48rem 0.6rem;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.blog-sidebar__link:hover,
.blog-sidebar__link:focus-visible {
    background-color: var(--md-default-fg-color--lightest);
    border-left-color: var(--md-default-fg-color--lighter);
}

.blog-sidebar__link--active {
    background-color: var(--md-accent-fg-color--transparent);
    border-left-color: var(--md-accent-fg-color);
}

.blog-sidebar__date,
.blog-sidebar__post-title {
    display: block;
}

.blog-sidebar__date {
    color: var(--md-default-fg-color--light);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1.3;
    text-transform: uppercase;
}

.blog-sidebar__post-title {
    color: var(--md-default-fg-color);
    font-size: 0.67rem;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 0.12rem;
}

.blog-sidebar__all-posts {
    border-top: 0.05rem solid var(--md-default-fg-color--lightest);
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    margin: 0.55rem 0.6rem 0;
    padding-top: 0.7rem;
}

/* Blog index generated by ABlog. */
.blog-post-list .postlist {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.blog-post-list .postlist > .ablog-post {
    border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
    margin: 0;
    padding: 1.5rem 0;
}

.blog-post-list .postlist > .ablog-post:first-child {
    padding-top: 0.75rem;
}

.blog-post-list .postlist > .ablog-post:last-child {
    border-bottom: 0;
}

.blog-post-list .ablog-post-title,
.homepage-blog-post-date {
    color: var(--md-default-fg-color--light);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.blog-post-list .ablog-post-title a {
    color: var(--md-default-fg-color);
    display: block;
    font-size: 1.25rem;
    letter-spacing: normal;
    line-height: 1.3;
    margin-top: 0.25rem;
    text-transform: none;
}

.blog-post-list .ablog-post-excerpt {
    line-height: 1.7;
    margin: 0.75rem 0 0;
}

.blog-post-list .ablog-post-expand {
    margin: 0.6rem 0 0;
}

.blog-post-list .ablog-post-expand em {
    font-style: normal;
    font-weight: 600;
}

.blog-post-meta {
    align-items: center;
    color: var(--md-default-fg-color--light);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.35rem 0.8rem;
    letter-spacing: 0.025em;
    margin: -0.5rem 0 2rem !important;
    text-transform: uppercase;
}

.blog-post-meta .blog-post-author::before {
    content: "·";
    margin-right: 0.8rem;
}

.ablog__prev-next {
    border-top: 0.05rem solid var(--md-default-fg-color--lightest);
    display: grid;
    gap: 1.75rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 3rem;
    padding-top: 1.25rem;
    position: relative;
}

.ablog__prev-next::after {
    background-color: var(--md-default-fg-color--lightest);
    bottom: 0;
    content: "";
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 1.25rem;
    transform: translateX(-50%);
    width: 0.05rem;
}

.ablog__prev,
.ablog__next {
    display: block;
    min-width: 0;
}

.ablog__next {
    text-align: right;
}

.ablog__spacer {
    display: none;
}

/* The legacy /blog.html archive remains available for old links. */
.ablog__collection .ablog-post {
    border-bottom: 0.05rem solid var(--md-default-fg-color--lightest);
    padding: 0.75rem 0 1.5rem;
}

.ablog__collection .ablog-archive {
    color: var(--md-default-fg-color--light);
    font-size: 0.8rem;
    list-style: none;
    margin-left: 0;
}

@media screen and (max-width: 44.984375em) {
    .blog-post-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-post-meta .blog-post-author::before {
        content: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-nav-card {
        transition: none;
    }

    .homepage-nav-card:hover {
        transform: none;
    }
}