/* Widen main content column on all devices */
.md-grid {
    max-width: 66rem;
}
/* Widen main content column and sidebars on larger screens */
@media screen and (min-width: 1220px) {
    .md-grid {
        max-width: 68rem;
    }
    .md-sidebar {
        width: 13.5rem;
    }
}

/* Adjust display of "Last updated:" element */
.md-source-file {
    margin: 2rem 0 0 0;
}
.md-source-file__fact {
    font-size: 0.6rem;
}

/* Adjust colors to match design system */
.md-nav__link--active {
    color: var(--bsr-active-fg);
    font-weight: 700;
}
.md-nav__icon:after {
    color: var(--bsr-active-fg);
}

/* Header */

.md-header__button.md-logo {
    display: none;
}

/* Default the text-based logo to hidden */
.md-header__button.md-logo-text {
    display: none;
    font-size: 1.4rem;
    font-weight: 700;
}

/*
Show the text-based logo with nav drawers and position it like mkdocs
positions an image-based logo.
*/
.md-nav.md-nav--primary .md-header__button.md-logo-text {
    display: block;
    color: var(--black);
    position: absolute;
    top: 0.6rem;
    left: 0.4rem;
    padding: 0;
}

/* Show the text-based logo on larger displays and position it like mkdocs */
@media screen and (min-width: 76.25em) {
    .md-header__button.md-logo-text {
        display: block;
    }
}

/* Line up page title with logo when it moves to header */
.md-header__topic {
    margin-top: 0.1rem;
}

/* Hide site name in header on page load */
.md-header__topic:first-child,
.md-nav__source {
    display: none;
}

/* Match header style to BSR */
.md-header {
    border-bottom: 1px solid var(--bsr-border-color);
    box-shadow: none;

    nav {
        height: 72px;
    }

    @media screen and (min-width: 76.25em) {
        /* Large screens: account for whitespace on left side of logo. */
        nav.md-header__inner {
            padding-left: 0;
        }
    }
}

.md-header .buf-button {
    margin-left: 8px;
}

.buf-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    z-index: 1;
    color: #5c5c5c;
    padding: 0.4rem 0.8rem;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.72rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(92, 92, 92, 0.2);
}

.buf-button > .created-by {
    display: none;
}
@media screen and (min-width: 38.125em) {
    .buf-button > .created-by {
        display: inline;
    }
}

.buf-button:hover {
    color: #2c2c2c;
    background: rgba(92, 92, 92, 0.05);
    border-color: rgba(92, 92, 92, 0.3);
}

.buf-logo {
    height: 16px;
    width: auto;
}

/* Hide the top-level homepage navigation */
nav.nav-home {
    display: none;
}

/* Nav */
nav.nav-home {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    align-items: center;
    justify-content: center;
}

nav.nav-home ul {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    padding: 0;
}

nav.nav-home ul a {
    color: #5c5c5c;
    text-decoration: none;
    font-size: 1.6em;
    font-weight: 500;
    transition: color 0.3s ease;
}

nav.nav-home ul a:hover {
    color: #0e5df5;
}

/* Title + Search on larger screens */
div.md-search__inner {
    padding: 0;
    width: 100%;
}

form.md-search__form {
    height: 2rem;
}

form.md-search__form .md-search__input {
    background-color: var(--docs-search-bg);
    border-radius: var(--bsr-btn-border-radius);
    border: 1px solid var(--bsr-border-color);
}

@media screen and (min-width: 76.25em) {
    /* Not scrolled: title occupies no space */
    div.md-header__title {
        flex-grow: 0;
    }
    /* Scrolled: give plenty of room for the title. */
    div.md-header__title.md-header__title--active {
        flex-grow: 4;
    }

    /* Search input occupies full width */
    div.md-search {
        flex-grow: 1;
        justify-content: center;
        display: flex;
    }

    div.md-search__inner,
    div.md-search__output,
    div.md-search__scrollwrap,
    [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
        width: 100%;
    }

    .md-search__icon[for="__search"] {
        top: 0.4rem;
    }
}

/* Search on smaller screen: consistent height/appearance with header. */
@media screen and (max-width: 76.24em) {
    .md-search-result__meta {
        background-color: var(--none);
        line-height: 1.2rem;
        border-bottom: 1px solid var(--bsr-border-color);
    }

    form.md-search__form .md-search__input {
        border: none;
    }
}

[data-md-color-primary="white"] .md-search__input + .md-search__icon {
    color: hsla(var(--md-hue), 0%, 0%, 0.5);
}

/* Match header buttons to BSR */
.md-header .contact-button {
    background-color: var(--bsr-btn-bg-primary);
    border-radius: var(--bsr-btn-border-radius);
    color: var(--bsr-btn-fg-primary);
    &:hover {
        background-color: var(--bsr-btn-bg-primary-hover);
    }
    &:active {
        background-color: var(--bsr-btn-bg-primary-active);
    }
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 12px;
    padding: 11px 12px;
}

/* /Header */

/* Typography */

/*
Up to the third of mkdocs-materials' breakpoints, use a full-size font. This
primarily impacts sidebar navigation, where the font is overly small on tablets
and many laptops.
*/
@media screen and (max-width: 99em) {
    font-size: 125%;
}

.md-container {
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}

/* Adjust type size down slightly */
.md-typeset {
    font-size: 0.75rem;
    line-height: 1.4;
}
.md-typeset pre,
.md-tooltip__inner {
    font-size: 0.65rem;
}

.md-typeset h1 {
    color: var(--docs-fg-emphasis);
    margin-bottom: 0;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    font-weight: 600;
}

/*
Both of these change the top margin for h2/h3 from the mkdocs default (1.6em)
to 1.2em, then "give back" the 0.4em of vertical space as padding. This appears
to help mkdocs material's positioning code when a right-side anchor is clicked.

Its behavior leads me to assume it's using innerHeight on the heading element to
determine how far from the top of the browser/below the header to scroll.
Shifting vertical space from margin to padding includes the padding distance in
innerHeight, providing for ample space between the bottom of the header and the
top of the displayed heading.

I've tried to use this same approach for removing the need to add slight top
margins to .md-main__inner at the larger breakpoints, but it doesn't help:
mkdocs still highlights the wrong sidebar item.
*/
.md-typeset h2 {
    padding-top: 0.4em;
    margin: 1.2em 0 0.64em;
}
.md-typeset h3 {
    padding-top: 0.4em;
    margin: 1.2em 0 0.8em;
}

.md-typeset p,
.md-typeset li {
    color: var(--docs-fg-emphasis);
    font-weight: 400;
}

strong {
    font-weight: 600;
}

/* Colors and styles */
.md-main {
}

.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
    background-color: var(--docs-card-bg);
    border-color: var(--docs-card-border);
}

.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
    background-color: var(--docs-card-bg-hover);
    border-color: var(--bsr-active-fg);
    box-shadow: 0px 4px 12px 0px rgba(15, 16, 77, 0.05);
}

.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
    scrollbar-color: var(--docs-scrollbar-hover);
}

/* Main sections alignment */
.md-main__inner {
    /*
    No margin top here: it causes sidebars to scroll for the height of the
    margin before content will start scrolling. If we need more vertical space
    above content or sidebars, add it to their containers.
    */
    margin-top: 0;
}
@media screen and (min-width: 100em) {
    /*
    At this breakpoint, mkdocs material increases the font size, but its
    calculation of which sidebar item is active fails! Adding a slight margin
    fixes it, at the expense of sidebars slightly scrolling before
    content scrolls independently.

    0.3rem is the smallest value that passed testing on two pages (see PR).
    */
    .md-main__inner {
        margin-top: 0.3em;
    }
}
@media screen and (min-width: 125em) {
    /*
    See prior comment: the slight margin fix has to increase. 0.6rem is the
    smallest value that passed testing on two pages (see PR).
    */
    .md-main__inner {
        margin-top: 0.6rem;
    }
}
.md-content {
    margin: 0.6rem 1rem 0;
}

.md-content__inner {
    padding-top: 0;
}

/* Links */
.md-typeset a {
    color: var(--docs-a-fg);
    text-decoration: underline;
}
.md-typeset a:hover {
    color: var(--docs-fg-emphasis);
}
/*
Permalink displayed on hover/tap for a heading: same colors as a normal link,
no underlining.
*/
.md-typeset a.headerlink {
    color: var(--docs-a-fg);
    text-decoration: none;
}
.md-typeset .headerlink:focus,
.md-typeset .headerlink:hover {
    color: var(--docs-fg-emphasis);
}

/*
If the element is the target element...

  * ...and not hovered...
  * ...or the inner .headerlink is the focused element (after tap on a device)...

...hide the .headerlink.
*/
.md-typeset :target:not(:hover) > .headerlink,
.md-typeset :target > .headerlink:focus {
    display: none;
}
/*
Re-display the .headerlink again, if the element is the target element and
hovered.
*/
.md-typeset :target:hover > .headerlink {
    display: inline-block;
}

/* Navigation */
.md-sidebar {
    padding-top: 2rem;
}

/*
Mkdocs has an issue in Safari and Firefox: it tries to add space between
childless nav items with a bottom margin, but when a child nav is added,
it uses a negative margin to negate this space and then re-pads with padding
on the child nav. That only works in Firefox.

Correct this by removing all of the margin/padding, then specifically adding
it back to -only- A and LABEL elements of class .md-nav__link. (Child menus
are .div.md-nav__link; including them causes double padding at the bottom of an
expanded menu.)
 */
@media screen and (min-width: 60em) {
    .md-nav {
        margin-bottom: 0;
    }
    .md-nav__link {
        margin-top: 0;
    }
    .md-nav--primary .md-nav__list,
    .md-nav--secondary .md-nav__list {
        padding-bottom: 0;
    }
    a.md-nav__link,
    label.md-nav__link {
        padding-bottom: 0.4rem;
    }
}

[dir="ltr"] .md-sidebar__inner {
    padding-right: calc(100% - 12.8rem);
}

.md-nav__icon:after {
    color: var(--docs-fg-emphasis);
}

.md-nav__icon:hover {
    background-color: transparent;
    color: var(--bsr-active-fg);
}

.md-nav__icon {
    height: 0.7rem;
    width: 0.7rem;
    color: var(--docs-fg-emphasis);
}

.md-nav--primary .md-nav__title[for="__drawer"],
.md-nav--secondary .md-nav__title {
    color: var(--docs-fg-emphasis);

    border-bottom: 1px solid var(--docs-nav-title-border);
    margin-bottom: 16px;
    padding-bottom: 8px;
    box-shadow: none;
}

/*
Remove the double border and extra padding for the root-level mobile nav title.
*/
@media screen and (max-width: 60em) {
    .md-nav--primary .md-nav__title[for="__drawer"],
    .md-nav--secondary .md-nav__title[for="__toc"] {
        border-bottom: none;
        margin-bottom: 0;
    }
    /*
    Visually hide the duplicative "Buf Docs" nav title on non-mobile devices.
    */
    .md-nav--primary .md-nav__title[for="__drawer"] {
        color: transparent;
    }
}
/*
Remove the duplicative "Buf Docs" nav title on non-mobile devices.
*/
@media screen and (min-width: 60.01em) {
    .md-nav--primary .md-nav__title[for="__drawer"] {
        display: none;
    }
}

.md-nav--primary .md-nav__title[for="__drawer"],
.md-nav--secondary .md-nav__title {
}

.md-nav--primary .md-nav__title {
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
    color: var(--docs-fg-emphasis);
    font-weight: 700;
}

/*
Use the same style as the heading on the md-nav--secondary (right) for
navigation sections.
*/
@media screen and (min-width: 60em) {
    .md-nav__item.md-nav__item--section > .md-nav__link[for] {
        color: var(--docs-fg-emphasis);
        border-bottom: 1px solid var(--docs-nav-title-border);
        margin-bottom: 0.5rem;
        padding-bottom: 8px;
        box-shadow: none;
    }
}

.md-nav__link[for]:focus,
.md-nav__link[for]:hover,
.md-nav__link[href]:focus,
.md-nav__link[href]:hover {
    color: var(--bsr-active-fg);
}

.md-nav__link--passed {
    color: var(--docs-nav-link--passed);
}

/* Tabbed labels */
.tabbed-labels a {
    text-decoration: none;
}

/* Print view of tabs: emulate an H4 */
@media print {
    .md-typeset div.tabbed-labels > label > a {
        font-weight: 700;
        letter-spacing: -0.01em;
        padding-left: 0;
        font-size: 0.75rem;
    }
    .md-typeset .tabbed-labels > label {
        color: rgba(0, 0, 0, 0.87);
    }
}

/* Tags */
.md-typeset .md-tag {
    background: var(--docs-fg-emphasis);
    color: var(--docs-tag-fg);
    line-height: 1.2;
}

/* Code blocks */
.highlight span.filename {
    background-color: var(--docs-highlight-filename-bg);
    border-left: 1px solid var(--docs-highlight-filename-border);
    border-top: 1px solid var(--docs-highlight-filename-border);
    border-right: 1px solid var(--docs-highlight-filename-border);
}
.md-typeset code {
    background-color: var(--docs-code-bg);
    color: var(--docs-fg-emphasis);
}

.md-typeset pre > code {
    /*
    Note: horizontal padding here matches the padding on the title for
    code blocks as well as admonitions.
    */
    padding: 1.772059em 1.4809em;
}

.md-feedback__icon:not(:disabled).md-icon:hover {
    color: var(--bsr-btn-bg-primary-active);
}

/*
At mkdocs mobile size, center footer content and prevent links from wrapping.
*/
@media screen and (max-width: 60em) {
    .md-footer-meta__inner.md-grid {
        justify-content: center;
    }
    .md-footer-meta__inner.md-grid > .md-copyright {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .md-footer .md-copyright > a {
        white-space: nowrap;
    }
}

/*
Within a grid, allow a card to act as a link, but visually work just like the ul/li approach with links inside
the card
*/
.grid a.card {
    text-decoration: none;
}
.grid a.card p {
    margin-bottom: 0.5em;
    margin-block-start: 0.5em;
}
.grid a.card strong {
    text-decoration: underline;
    color: var(--docs-a-fg);
}
.grid a.card:hover strong {
    color: var(--docs-fg-emphasis);
}

/* protovalidate playground iframe */
.protovalidate-playground iframe {
    /* Match the buf.build/docs background color. */
    background-color: var(--white);
    width: 100%;
    border: none;
    @media screen and (min-width: 650px) {
        border-bottom: 1px solid var(--bsr-border-color);
    }
}

/* Images */
img.off-glb.sdk-logo {
    height: 3rem;
} /* off-glb turns off the lightbox feature per-image */

/* prevent selection of prefix and output for console syntax */
.language-console .gp {
    user-select: none;
    -webkit-user-select: none; /* Chrome/Safari */
    -ms-user-select: none; /* IE10+ */
}
img {
    border-style: dotted;
    border-color: var(--docs-img-border);
    border-radius: 4px;
    border-width: 1px;
    padding: 0.4em;
}
.cards img {
    border: none;
}

/* Admonitions and quotes emulate GitHub admonitions */
.md-typeset .admonition-title,
.md-typeset summary {
    /* override all the specific types */
    background-color: var(--bsr-bg-default) !important;
    border-radius: 0 !important;
}
.md-typeset summary:hover {
    /* Default mkdocs only uses the admonition "blue" on hover. */
    background-color: var(--docs-admonition-details-bg) !important;
}
.md-typeset .admonition-title:before,
.md-typeset .admonition-title:after,
.md-typeset summary:before,
.md-typeset summary:after {
    /* correct icon vertical alignment to our font */
    top: 0.5em;
}
div.admonition > p:not(.admonition-title) {
    margin-block-start: 0;
}
/* Account for admonitions with no title */
div.admonition > p:not(.admonition-title):only-of-type {
    margin-block-start: 1em;
}
div.admonition,
.md-typeset details {
    /* override all the specific types */
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    /* GitHub style: no background, left border, 3.5px */
    border-left-width: 3.5px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Lightbox: force full-size, because SVG doesn't do so automatically. */
div.gslide-media.gslide-image {
    width: 100%;
    height: 100vh;
}

footer {
    background: #2c2c2c;
    color: white;
    padding: 1.6rem 0;
    text-align: center;
    font-size: 0.8rem;
}

footer .container {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.6rem;
    margin-bottom: 1.6rem;
}

.footer-section h4 {
    margin: 0 0 0.8rem 0;
    color: #55bcf9;
}

.footer-section a {
    color: #5c5c5c;
    text-decoration: none;
    display: block;
    margin-bottom: 0.4rem;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #55bcf9;
}

.footer-bottom {
    border-top: 1px solid #5c5c5c;
    padding: 1.6rem 0.6rem 0 0;
    color: #5c5c5c;
}

.footer-bottom p {
    margin: 0;
}

[data-md-color-scheme="default"] {
    --none: rgba(0, 0, 0, 0);
    --white: #ffffff;
    --black: #000000;

    /* Base Buf colors (from BSR) */
    --buf-colors-bufBlue900: #0c65ec;
    --buf-colors-bufBlue1000: #0358d5;
    --buf-colors-bufBlue800: #77a8fa;
    --buf-colors-grayscale1100: #676767;
    --buf-colors-grayscale400: #e7e7e7;
    --buf-colors-grayscale100: #fdfdfd;

    /* Docs-specific colors */
    --docs-colors-almost-black: #010101;
    --docs-anchor-blue: #1872cb;
    --docs-border-grey: #d3d0d0;
    --docs-border-grey--dark: #cacacb;
    --docs-almost-white: #edf9ff;
    --docs-almost-white2: #e4e9ef;
    --docs-blue-grey: #5d647e;
    --docs-blue-white: #f1f2f3;
    --docs-black-lighter: #00000052 #0000;

    --docs-admonition-blue--light: #448aff1a;
    --docs-code-purple: #905;
    --docs-code-orange: #e90;
    --docs-code-pink: #dd4a68;
    --docs-code-blue: #07a;
    --docs-code-green: #690;
    --docs-code-brown: #9a6e3a;
    --docs-code-grey: rgb(153, 153, 153);
    --docs-code-slategray: slategray;
    --docs-code-black: var(--black);

    --md-code-hl-number-color: var(--docs-code-purple);
    --md-code-hl-special-color: var(--docs-code-orange);
    --md-code-hl-function-color: var(--docs-code-pink);
    --md-code-hl-constant-color: var(--docs-code-purple);
    --md-code-hl-keyword-color: var(--docs-code-blue);
    --md-code-hl-name-color: var(--docs-code-blue);
    --md-code-hl-string-color: var(--docs-code-green);
    --md-code-hl-operator-color: var(--docs-code-brown);
    --md-code-hl-punctuation-color: var(--docs-code-grey);
    --md-code-hl-comment-color: var(--docs-code-slategray);
    --md-code-hl-generic-color: var(--docs-code-black);
    --md-code-hl-variable-color: var(--docs-code-orange);

    /*
    mkdocs-material variables

    There's no documentation (that I can find) for all of the mkdocs-material
    variables. I search within https://github.com/squidfunk/mkdocs-material/tree/9e6c0674d65a5ad5322c673707d1fda62c1a5e9d/src/templates/assets/stylesheets/main.
    */
    --md-admonition-bg-color: var(--bsr-bg-default);
    --md-footer-fg-color: var(--buf-colors-grayscale1100);
    --md-footer-fg-color--light: var(--buf-colors-grayscale1100);
    --md-footer-fg-color--lighter: var(--buf-colors-grayscale1100);
    --md-footer-bg-color: var(--bsr-bg-default);
    --md-footer-bg-color--dark: var(--bsr-bg-default);

    /* Docs-specific variables */
    --docs-search-bg: var(--white);
    --docs-fg-emphasis: var(--docs-colors-almost-black);
    --docs-a-fg: var(--docs-anchor-blue);
    --docs-admonition-details-bg: var(--docs-admonition-blue--light);
    --docs-img-border: var(--docs-border-grey);
    --docs-nav-title-border: var(--docs-border-grey--dark);
    --docs-card-bg: var(--white);
    --docs-card-bg-hover: var(--docs-almost-white);
    --docs-card-border: var(--docs-border-grey--dark);
    --docs-nav-link--passed: var(--docs-blue-grey);
    --docs-tag-fg: var(--white);
    --docs-highlight-filename-border: var(--docs-almost-white2);
    --docs-highlight-filename-bg: var(--white);
    --docs-code-bg: var(--docs-blue-white);
    --docs-scrollbar-hover: var(--docs-black-lighter);

    /* Code syntax colors matching prior docs version */

    /* Variables mimicking BSR */
    --bsr-btn-border-radius: 3px;
    --bsr-bg-default: var(--buf-colors-grayscale100);
    --bsr-active-fg: var(--buf-colors-bufBlue900);
    --bsr-btn-fg-primary: var(--white);
    --bsr-btn-bg-primary: var(--buf-colors-bufBlue900);
    --bsr-btn-bg-primary-active: var(--buf-colors-bufBlue1000);
    --bsr-btn-bg-primary-hover: var(--buf-colors-bufBlue800);

    --bsr-border-color: var(--buf-colors-grayscale400);
}