/*
Font definition for Inter Variable.
Based on <https://rsms.me/inter/inter.css>, customized to use Inter Variable
only and not the static fonts.
*/
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter/InterVariable-Italic.woff2') format('woff2');
}

@font-feature-values InterVariable {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes &amp; commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}

/*
Font definition for Iosevka Fixed.
Based on IosevkaFixed.css in the zip file, customized to use woff2, normal and
italic only, and only 400 and 700 weights.
*/
@font-face {
	font-family: 'Iosevka Fixed';
	font-display: swap;
	font-weight: 400;
	font-stretch: normal;
	font-style: normal;
	src: url('iosevka/IosevkaFixed-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Iosevka Fixed';
	font-display: swap;
	font-weight: 400;
	font-stretch: normal;
	font-style: italic;
	src: url('iosevka/IosevkaFixed-Italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Iosevka Fixed';
	font-display: swap;
	font-weight: 700;
	font-stretch: normal;
	font-style: normal;
	src: url('iosevka/IosevkaFixed-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Iosevka Fixed Web';
	font-display: swap;
	font-weight: 700;
	font-stretch: normal;
	font-style: italic;
	src: url('iosevka/IosevkaFixed-BoldItalic.woff2') format('woff2');
}

h1.claim {
	font-weight: 200;
}

/* Translate keyboard shortcut for search field. */
.md-search__button::after {
	content: "Strg+K";
}

/* Syntax highlighting customizations. */
/* Italic comments and emphasized text. */
.highlight :is(.c, .cm, .c1, .ch, .cs, .ge, .sd) {
	font-style: italic;
}
/* Bold for keywords and strong text. */
.highlight :is(.k, .gs) {
	font-weight: bold;
}

/* Use Inter Variable, and customize some flags. If the browser doesn't support
 * variable fonts, let it fall back to the alternatives MkDocs-Material
 * provides, including system fonts and "sans-serif". Flags are these:
 *   calt: contextual alternatives (e.g. 12x30 → 12×30)
 *   cv05: lower-case L with tail
 *   cv07: rounder sharp s
 *   ss01: open digits
 * Can't set font-feature-settings on :root, Zensical would override them with
 * its body rule.
 */
:root {
	--md-text-font: "InterVariable";
	--md-code-font: "Iosevka Fixed";
}
body {
	font-feature-settings: "kern", "liga", "calt" off, "cv05", "cv07", "ss01";
}

/* Let the logo take up space in the sidebar on mobile. */
.md-nav__button.md-logo {
	height: auto !important;
	width: auto !important;
}

/* Customizations to use the logo instead of the site title. */
.md-header__button.md-logo {
	opacity: 1;

	/* This is upstream's transition for visible elements. */
	transition: transform .4s cubic-bezier(.1,.7,.1,1), opacity .15s;

	/* Visibility on desktop. */
	&.for-desktop {
		display: inline-block;
	}
	&.for-mobile {
		display: none;
		/* On mobile, the logo is in the "title" component, and everything in it
		 * needs to be positioned absolutely so that the replacement works. */
		position: absolute;
	}
}

/* Don't hide the logo in the header on mobile. That hard-coded max-width value
 * is ridiculous, but it's what's used in upstream's stylesheet, and they don't
 * export CSS variables for it. */
@media screen and (max-width: 76.2344em) {
	.md-header__button.md-logo {
		/* Visibility on mobile. */
		&.for-desktop { display: none; }
		&.for-mobile { display: inline-block; }
		.md-header__title--active & {
			/* User has scrolled down, logo needs to go. */
			opacity: 0;
			pointer-events: none;
			transform: translateX(-1.25rem);
			z-index: -1;
			/* This is upstream's transition for invisible elements. */
			transition: transform .4s cubic-bezier(1,.7,.1,.1), opacity .15s;
		}
	}
}