/* Overrides for Furo theme */

/* ============================================================ *
   SETTINGS

   The Settings layer contains definitions for colours, fonts,
   layouts, typography and anything that can be later used within
   a style. This layer is a configuration for the CSS project.
   No CSS should be outputted from this layer.
 * ============================================================ */

:root {
    /* -------------------- FONTS ----------------------------- */
    --font-weight-light: 200;
    --font-weight-bolder: 400;
    --font-weight-semibold: 500;
    --font-weight-bold: 600;
    --font-weight-extra-bold: 700;
    --font-weight-black: 800;
    --line-height: 1.6;
    --letter-spacing-base: 0.1em;
    --letter-spacing-strong: 0.05em;
    --letter-spacing-uppercase: 0.2em;
    --content-max-width: 75rem;
    --sidebar-width: 15rem;
}

/* ============================================================ *
   OBJECTS / LAYOUT

   The Objects layer targets elements by their class name only.
   Also, styles in this layer should only be of a layout nature
   -- such as height, width, padding, margin, etc -- and not apply
   any decoration -- such as colours, font-size, etc.
   If an object happens to add anything other than layout, then
   it would be moved to the next layer, Components.
 * ============================================================ */

/* -------------------- LAYOUT -------------------------------- */
.main {
    flex: 0 1 var(--content-max-width);
}

.content {
    flex: 1;
}

.toc-drawer {
    min-width: 15em;
}

.sidebar-drawer {
    max-width: calc((100vw - var(--content-max-width) - var(--sidebar-width)) / 2 + var(--sidebar-width));
}

/* -------------------- TYPOGRAPHY ---------------------------- */

/* Set the base for fluid typography sizes */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    --min-font-size-px: 12;
    --max-font-size-px: calc(var(--min-font-size-px) * 1.25);
    --min-viewport-px: 400;
    --max-viewport-px: 1800;
    --min-fs: var(--min-font-size-px) / 16;
    --max-fs: var(--max-font-size-px) / 16;
    --min-vw: var(--min-viewport-px) / 16;
    --max-vw: var(--max-viewport-px) / 16;
    --min-font-size-rem: calc(var(--min-fs) * 1rem);
    --max-font-size-rem: calc(var(--max-fs) * 1rem);
    --min-vw-rem: calc(var(--min-vw) * 1rem);
    --slope: calc((var(--max-fs) - var(--min-fs)) * (100vw - var(--min-vw-rem)) / (var(--max-vw) - var(--min-vw)));

    font-size: clamp(var(--min-font-size-rem), var(--min-font-size-rem) + var(--slope), var(--max-font-size-rem));
}

p {
    --min-font-size-px: 14;
    --max-font-size-px: 16;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    --font-weight: var(--font-weight-extra-bold);

    line-height: 1.3;
    color: var(--color-headings);
    font-weight: var(--font-weight);
    margin-bottom: 0;
}

h1 {
    --min-font-size-px: 36;
    --font-weight: var(--font-weight-light);

    margin-bottom: 3rem;
}

h2 {
    --min-font-size-px: 24;
    --font-weight: var(--font-weight-extra-bolder);

    letter-spacing: 0.0125em;
}

h3 {
    --min-font-size-px: 16;
    --font-weight: var(--font-weight-extra-bold);

    margin-bottom: 0;
}

h4 {
    --min-font-size-px: 14;
    --font-weight: var(--font-weight-extra-bold);
}

h5 {
    --min-font-size-px: 12;
    --font-weight: var(--font-weight-extra-bold);

    letter-spacing: 0.025em;
}

h6 {
    --min-font-size-px: 10;
    --font-weight: var(--font-weight-extra-bold);

    text-transform: uppercase;
    letter-spacing: 0.125em;
}

/* Select headings that follow headings */
:not(:is(h1, h2, h3, h4, h5, h6) + section) > :is(h1, h2, h3, h4, h5, h6) {
    margin-top: min(2em, 3rem, 8vw);
}

:is(h1, h2, h3, h4, h5, h6) strong {
    font-weight: var(--font-weight-semibold);
}

ul {
    margin-top: 0;
}

a {
    text-underline-offset: 0.25em;
    transition: all ease 300ms;
}

a:visited,
a:visited:hover {
    color: var(--color-link);
}

article {
    line-height: var(--line-height);
}

/* ============================================================ *
   COMPONENTS

   The Components layer targets elements by their class name.
   The Components layer can contain layout AND decoration styles.
 * ============================================================ */

img[src$=".jpg"],
img[src$=".png"] {
    border: 1px dotted var(--color-background-border);
}

.headerlink {
    text-decoration: none;
}

.sidebar-brand-text {
    background: var(--color-brand-content);
    padding: 0.5rem 0.5rem;
    color: var(--color-link-underline);
    font-size: 1rem;
    border-radius: 0.25rem;
}

.sidebar-logo {
    max-width: 110px;
    margin: 1rem 0 1rem;
}

.sidebar-search-container {
    background: transparent;
    border-radius: 0.25rem;
    margin-right: var(--sidebar-item-spacing-horizontal);
    margin-left: var(--sidebar-item-spacing-horizontal);
}

.sidebar-search {
    border: transparent;
    padding-left: calc(var(--sidebar-search-input-spacing-horizontal) + var(--sidebar-search-icon-size));
}

.sidebar-search-container::before {
    left: 0.25rem;
}

/* Navigation */
.toc-tree .reference {
    transition: none;
}

.sidebar-scroll {
    position: relative;
    left: 1px;
}

.sidebar-tree .caption {
    letter-spacing: var(--letter-spacing-uppercase);
    font-weight: 400;
}

.sidebar-tree .reference {
    --reference-border-color: transparent;

    transition: all ease 100ms;
    border-right: 2px solid var(--reference-border-color);
}

.sidebar-tree .reference:hover {
    --reference-border-color: var(--color-brand-content);

    color: var(--color-brand-content);
}

.sidebar-tree .current-page > .reference {
    --reference-border-color: var(--color-brand-content);

    color: var(--color-brand-content);
}

.sidebar-tree a.reference {
    line-height: 1.3;
}

.toctree-title {
    letter-spacing: 0.1em;
}

.toc-tree .reference:hover {
    color: var(--color-brand-content);
}

.toctree-wrapper {
    margin-bottom: 2rem;
}

.toc-title {
    letter-spacing: var(--letter-spacing-uppercase);
}

.theme-toggle-header {
    display: flex;
    align-items: center;
}

.topic,
.admonition {
    --color-admonition-title: var(--color-topic-title);
    --color-admonition-title-background: var(--color-topic-title-background);
    --color-link: var(--color-admonition-title-background);
    --color-link-underline: var(--color-link);

    box-shadow: none;
    background: var(--color-admonition-title);
    border-left: 0;
    max-width: var(--line-width-max);
    margin-left: 0;
}

.topic-title,
.admonition-title {
    color: var(--color-admonition-title-background);
    background: transparent !important;
    letter-spacing: 0.05em;
}

.topic-title::before,
.admonition-title::before {
    background-color: var(--color-admonition-title-background) !important;
}

.admonition {
    --color-admonition-title: inherit;
    --color-admonition-title-background: inherit;
}

.attention {
    --color-admonition-title: var(--color-admonition-title--attention);
    --color-admonition-title-background: var(--color-admonition-title-background--attention);
}

.caution {
    --color-admonition-title: var(--color-admonition-title--caution);
    --color-admonition-title-background: var(--color-admonition-title-background--caution);
}

.danger {
    --color-admonition-title: var(--color-admonition-title--danger);
    --color-admonition-title-background: var(--color-admonition-title-background--danger);
}

.error {
    --color-admonition-title: var(--color-admonition-title--error);
    --color-admonition-title-background: var(--color-admonition-title-background--error);
}

.hint {
    --color-admonition-title: var(--color-admonition-title--hint);
    --color-admonition-title-background: var(--color-admonition-title-background--hint);
}

.important {
    --color-admonition-title: var(--color-admonition-title--important);
    --color-admonition-title-background: var(--color-admonition-title-background--important);
}

.note {
    --color-admonition-title: var(--color-admonition-title--note);
    --color-admonition-title-background: var(--color-admonition-title-background--note);
}

.seealso {
    --color-admonition-title: var(--color-admonition-title--seealso);
    --color-admonition-title-background: var(--color-admonition-title-background--seealso);
}

.tip {
    --color-admonition-title: var(--color-admonition-title--tip);
    --color-admonition-title-background: var(--color-admonition-title-background--tip);
}

.admonition-todo {
    --color-admonition-title: var(--color-admonition-title--admonition-todo);
    --color-admonition-title-background: var(--color-admonition-title-background--admonition-todo);
}

.warning {
    --color-admonition-title: var(--color-admonition-title--warning);
    --color-admonition-title-background: var(--color-admonition-title-background--warning);
}

table {
    border: 1px solid var(--color-table-border);
}

table.align-default {
    margin-left: 0;
}

table.docutils th,
table.docutils td {
    white-space: pre;
}

dl.simple dt {
    font-weight: 600;
}