/* Fonts, served by Bunny Fonts rather than Google Fonts */
@import url("https://fonts.bunny.net/css?family=inter:300,300i,400,400i,500,500i,600,600i,700,700i|jetbrains-mono:400,400i,700,700i&display=swap");

:root {
    --md-text-font: "Inter";
    --md-code-font: "JetBrains Mono";
}

/* Brand colors, taken from the logo */
[data-md-color-primary="custom"] {
    --md-primary-fg-color: #6b42d4;
    --md-primary-fg-color--light: #906df7;
    --md-primary-fg-color--dark: #5631b3;
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: #ffffffb3;
}

[data-md-color-accent="custom"] {
    --md-accent-fg-color: #906df7;
    --md-accent-fg-color--transparent: #906df71a;
    --md-accent-bg-color: #ffffff;
    --md-accent-bg-color--light: #ffffffb3;
}

[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
    --md-primary-fg-color: #906df7;
    --md-primary-fg-color--light: #b39dfa;
    --md-primary-fg-color--dark: #6b42d4;
    --md-typeset-a-color: #a88bf9;
}

/* Page width: the theme default is 61rem (~1220px including both sidebars).
   Raise this for wider content, or set it to "none" to fill the window. */
.md-grid {
    max-width: 80rem;
}

/* Text logo: wider than the default square logo, with a dark-mode variant */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
    width: auto;
    height: 1.6rem;
}

[data-md-color-scheme="slate"] .md-logo img {
    content: url("../assets/images/F13-Handbook-Text-Logo-DarkBG.svg");
}

/* The logo already spells out the site name wherever the header shows it */
@media screen and (min-width: 76.25em) {
    .md-header__topic:first-child .md-ellipsis {
        visibility: hidden;
    }
}

/* Definition lists (URL / Login / Account Info blocks) as a two-column grid */
@media screen and (min-width: 45em) {
    .md-typeset dl {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 1.5em;
        row-gap: 0.5em;
    }

    .md-typeset dl dt,
    .md-typeset dl dd {
        margin: 0;
    }

    .md-typeset dl dd > :first-child {
        margin-top: 0;
    }

    .md-typeset dl dd > :last-child {
        margin-bottom: 0;
    }
}

.md-typeset dl dt {
    font-weight: 600;
}

/* Badges, e.g. <span class="badge badge--success">recommended</span> */
.md-typeset .badge {
    display: inline-block;
    padding: 0 0.6em;
    border: 1px solid currentColor;
    border-radius: 1em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: middle;
    white-space: nowrap;
}

.md-typeset .badge--primary {
    color: var(--md-primary-fg-color);
}

.md-typeset .badge--success {
    color: #2e7d32;
}

.md-typeset .badge--danger {
    color: #c62828;
}

[data-md-color-scheme="slate"] .md-typeset .badge--success {
    color: #66bb6a;
}

[data-md-color-scheme="slate"] .md-typeset .badge--danger {
    color: #ef5350;
}

/* Custom "todo" admonition: !!! todo */
:root {
    --md-admonition-icon--todo: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M13 5h8M13 12h8M13 19h8M3 17l2 2 4-4"/><rect width="6" height="6" x="3" y="4" rx="1"/></svg>');
}

.md-typeset .admonition.todo,
.md-typeset details.todo {
    border-color: rgb(120, 120, 120);
}

.md-typeset .todo > .admonition-title,
.md-typeset .todo > summary {
    background-color: rgba(120, 120, 120, 0.1);
}

.md-typeset .todo > .admonition-title::before,
.md-typeset .todo > summary::before {
    background-color: rgb(120, 120, 120);
    -webkit-mask-image: var(--md-admonition-icon--todo);
    mask-image: var(--md-admonition-icon--todo);
}

/* Icon colors, e.g. :lucide-lock:{ .icon-violet } */
.md-typeset .icon-violet {
    color: #6e56cf;
}

.md-typeset .icon-amber {
    color: #ab6400;
}

.md-typeset .icon-pink {
    color: #d6409f;
}

[data-md-color-scheme="slate"] .md-typeset .icon-violet {
    color: #baa7ff;
}

[data-md-color-scheme="slate"] .md-typeset .icon-amber {
    color: #ffca16;
}

[data-md-color-scheme="slate"] .md-typeset .icon-pink {
    color: #ff8dcc;
}