/*
 * OpenDMI: Cross-platform DMI/SMBIOS framework
 * Copyright (c) 2025-2026, The OpenDMI contributors
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */

/*
 * Fonts of the reference manual, which the site is set in the way the PDF is:
 * the text in the serif variant of IBM Plex, the headings and everything
 * around the text in the sans one, and the code in the mono one. The semibold
 * weight is the bold one, as it is in the PDF.
 */
@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../font/ibm-plex-serif/IBMPlexSerif-Regular.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../font/ibm-plex-serif/IBMPlexSerif-Italic.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../font/ibm-plex-serif/IBMPlexSerif-SemiBold.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(../font/ibm-plex-serif/IBMPlexSerif-SemiBoldItalic.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../font/ibm-plex-sans/IBMPlexSans-Regular.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../font/ibm-plex-sans/IBMPlexSans-Italic.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../font/ibm-plex-sans/IBMPlexSans-SemiBold.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(../font/ibm-plex-sans/IBMPlexSans-SemiBoldItalic.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../font/ibm-plex-mono/IBMPlexMono-Regular.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../font/ibm-plex-mono/IBMPlexMono-Italic.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../font/ibm-plex-mono/IBMPlexMono-SemiBold.woff2) format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url(../font/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff2) format("woff2");
}

body,
button,
#search-input,
.doc .source-toolbox,
.doc .conum[data-value] {
    font-family: "IBM Plex Sans", sans-serif;
}

.doc {
    font-family: "IBM Plex Serif", serif;
}

.doc h1,
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
}

/* Parts open with their titles set in serif, as they do in the PDF */
.part .doc > h1.page {
    font-family: "IBM Plex Serif", serif;
}

code,
kbd,
pre,
.doc code,
.doc kbd,
.doc pre {
    font-family: "IBM Plex Mono", monospace;
}

/*
 * Colors of the logo, which the default UI is repainted in. The default UI has
 * no variables of its own for the colors, so the rules which use them are
 * overridden one by one. The stripes of the logo go from the lightest to the
 * darkest, and the warm colors complementary to them mark what needs care.
 */
:root {
    --opendmi-ink:        #0f1a1c;
    --opendmi-paper:      #eaf2ee;
    --opendmi-stripe-1:   #9fe3d4;
    --opendmi-stripe-2:   #4fc4b8;
    --opendmi-stripe-3:   #1fa0a3;
    --opendmi-stripe-4:   #147a8c;
    --opendmi-stripe-5:   #0f5470;

    --opendmi-text:       #1b2729;
    --opendmi-muted:      #56686a;
    --opendmi-tint:       #f2f7f5;
    --opendmi-tint-dark:  #e3eeea;
    --opendmi-border:     #d5e3de;
    --opendmi-coral:      #d8664f;
    --opendmi-amber:      #d98a2b;
    --opendmi-plum:       #8f3f67;

    --opendmi-stripes: linear-gradient(to right,
        var(--opendmi-stripe-1) 0 20%,
        var(--opendmi-stripe-2) 20% 40%,
        var(--opendmi-stripe-3) 40% 60%,
        var(--opendmi-stripe-4) 60% 80%,
        var(--opendmi-stripe-5) 80% 100%);
}

body {
    color: var(--opendmi-text);
}

/* Header */

.navbar {
    background: var(--opendmi-ink);
    color: var(--opendmi-paper);
}

.navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--opendmi-stripes);
}

.navbar-brand .navbar-item,
.navbar-end .navbar-link,
.navbar-end > .navbar-item {
    color: var(--opendmi-paper);
}

.navbar-brand .opendmi-brand img {
    display: block;
    height: 1.6rem;
    width: auto;
}

.navbar-burger span {
    background-color: var(--opendmi-paper);
}

.navbar-menu,
.navbar-dropdown {
    background: var(--opendmi-ink);
}

.navbar-menu .navbar-link:hover,
.navbar-menu a.navbar-item:hover,
.navbar-dropdown a.navbar-item:hover,
.navbar-end .navbar-item.has-dropdown:hover .navbar-link,
.navbar-end .navbar-link:hover,
.navbar-end > a.navbar-item:hover {
    background: var(--opendmi-stripe-5);
    color: #fff;
}

/*
 * Home page opens with the full logo on the colors of the header, and its
 * title, which the logo carries, is left to the readers of the screen alone
 */
.home .doc > h1.page {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Home page is short enough to go without the contents of its own */
.home .toc {
    display: none;
}

.doc .imageblock.opendmi-hero {
    position: relative;
    overflow: hidden;
    margin: 1.5rem 0 2rem;
    padding: 3rem 2.5rem 3.25rem;
    border-radius: 6px;
    background: var(--opendmi-ink);
}

.doc .imageblock.opendmi-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: var(--opendmi-stripes);
}

.doc .imageblock.opendmi-hero img {
    display: block;
    width: 100%;
    max-width: 34rem;
    height: auto;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .doc .imageblock.opendmi-hero {
        padding: 2rem 1.25rem 2.25rem;
    }
}

/* Navigation and toolbar */

.nav,
.nav-panel-explore,
.toolbar {
    background: var(--opendmi-tint);
}

.nav-menu .is-current-page > .nav-link,
.nav-menu .is-current-page > .nav-text {
    color: var(--opendmi-stripe-4);
}

.nav-menu .nav-link:hover {
    color: var(--opendmi-stripe-5);
}

.toolbar {
    color: var(--opendmi-muted);
}

.toc .toc-menu a {
    border-left-color: var(--opendmi-border);
}

.toc .toc-menu a:hover {
    color: var(--opendmi-stripe-4);
}

.toc .toc-menu a.is-active {
    border-left-color: var(--opendmi-stripe-3);
    color: var(--opendmi-ink);
}

/* Content */

.doc {
    color: var(--opendmi-text);
}

.doc h1,
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
    color: var(--opendmi-ink);
}

.doc h2:not(.discrete) {
    border-bottom-color: var(--opendmi-border);
}

.doc h1.sect0 {
    background: var(--opendmi-tint-dark);
}

.doc a {
    color: var(--opendmi-stripe-4);
}

.doc a:hover {
    color: var(--opendmi-stripe-5);
}

/* Sections link to themselves, which is no reason to paint them as links */
.doc h1 > a.link,
.doc h2 > a.link,
.doc h3 > a.link,
.doc h4 > a.link,
.doc h5 > a.link,
.doc h6 > a.link {
    color: inherit;
}

.doc a.unresolved {
    color: var(--opendmi-coral);
}

.doc .listingblock pre:not(.highlight),
.doc .literalblock pre,
.doc pre,
.doc .colist > table code,
.doc p code,
.doc thead code,
.doc .quoteblock,
.doc .verseblock,
.doc .admonitionblock td.content {
    background: var(--opendmi-tint);
}

.doc .listingblock pre:not(.highlight),
.doc .literalblock pre,
.doc pre {
    box-shadow: inset 0 0 1.75px var(--opendmi-border);
}

.doc .colist > table code,
.doc p code,
.doc thead code {
    color: var(--opendmi-ink);
}

.doc .quoteblock,
.doc .verseblock {
    border-left-color: var(--opendmi-stripe-3);
}

.doc .sidebarblock {
    background: var(--opendmi-tint-dark);
}

.doc table.tableblock,
.doc table.tableblock > * > tr > *,
.doc hr {
    border-color: var(--opendmi-border);
}

.doc table.stripes-all > tbody > tr,
.doc table.stripes-even > tbody > tr:nth-of-type(2n),
.doc table.stripes-odd > tbody > tr:nth-of-type(odd),
.doc table.stripes-hover > tbody > tr:hover {
    background: var(--opendmi-tint);
}

.doc .admonitionblock td.icon i.icon-note {
    background-color: var(--opendmi-stripe-4);
}

.doc .admonitionblock td.icon i.icon-tip {
    background-color: var(--opendmi-stripe-3);
}

.doc .admonitionblock td.icon i.icon-important {
    background-color: var(--opendmi-coral);
}

.doc .admonitionblock td.icon i.icon-warning {
    background-color: var(--opendmi-amber);
}

.doc .admonitionblock td.icon i.icon-caution {
    background-color: var(--opendmi-plum);
}

/* Highlighted source */

.hljs-comment,
.hljs-quote {
    color: var(--opendmi-muted);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: var(--opendmi-ink);
}

.hljs-string,
.hljs-doctag {
    color: #a3483a;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable {
    color: var(--opendmi-stripe-5);
}

.hljs-type,
.hljs-class .hljs-title,
.hljs-built_in,
.hljs-builtin-name {
    color: var(--opendmi-stripe-4);
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: var(--opendmi-stripe-5);
}

.hljs-meta {
    color: var(--opendmi-plum);
}

/* Pagination */

nav.pagination {
    border-top-color: var(--opendmi-border);
}

/* Footer */

footer.footer {
    background: var(--opendmi-ink);
    border-top: none;
    color: var(--opendmi-paper);
    position: relative;
}

footer.footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--opendmi-stripes);
}

.footer a {
    color: var(--opendmi-stripe-1);
}

/*
 * Banner asking for the consent to the cookies of the analytics, which stands
 * at the foot of the window until the choice is made. Declining is offered as
 * plainly as accepting
 */
.opendmi-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 1rem;
    overflow: hidden;
    border-radius: 6px;
    background: var(--opendmi-ink);
    color: var(--opendmi-paper);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(15, 26, 28, 0.35);
}

.opendmi-consent::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--opendmi-stripes);
}

.opendmi-consent-text {
    flex: 1 1 20rem;
    margin: 0;
}

.opendmi-consent-text a {
    color: var(--opendmi-stripe-1);
}

.opendmi-consent-actions {
    display: flex;
    gap: 0.5rem;
}

.opendmi-consent button {
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--opendmi-stripe-1);
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.5;
}

.opendmi-consent .opendmi-consent-accept {
    background: var(--opendmi-stripe-1);
    color: var(--opendmi-ink);
}

.opendmi-consent .opendmi-consent-decline {
    background: transparent;
    color: var(--opendmi-stripe-1);
}

.opendmi-consent button:hover {
    border-color: var(--opendmi-paper);
}

.opendmi-consent .opendmi-consent-accept:hover {
    background: var(--opendmi-paper);
}

.opendmi-consent .opendmi-consent-decline:hover {
    color: var(--opendmi-paper);
}