/* Vinyl Cache homepage theme */
/* Extends Furo for Sphinx */

/* Fonts */

@font-face {
	font-family: "Host Grotesk";
	src: url("fonts/HostGrotesk-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Host Grotesk";
	src: url("fonts/HostGrotesk-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Literata";
	src: url("fonts/Literata-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Literata";
	src: url("fonts/Literata-Italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Literata";
	src: url("fonts/Literata-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Literata";
	src: url("fonts/Literata-SemiBoldItalic.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "DM Mono";
	src: url("fonts/DMMono-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

body {
	--font-stack: "Literata", Georgia, serif;
	--font-stack--monospace: "DM Mono", monospace;
	--font-stack--headings: "Host Grotesk", system-ui, sans-serif;
}

.toc-drawer {
	font-family: var(--font-stack--monospace);
	--toc-font-size: 0.6rem;
}

h1, h2 {
	text-wrap: balance;
}

h1 {
	font-size: 3.5em;
	margin-bottom: 1.5rem;
	line-height: 1em;
	margin-top: 2.35rem; 
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.25em;
	font-family: var(--font-stack);
}

h4 {
	font-size: 1.25em;
	font-family: var(--font-stack);
}

h5 {
	font-size: 1.125em;
}

h6 {
	font-size: 1em;
}

/* Colors */

:root {
	/* Vinyl Cache colors */
	--color-vinyl-brand: #660066;
	--color-vinyl-white: #ffffff;
	--color-vinyl-red: #ff9f8c;
	--color-vinyl-red-lighter: #ffcfc5;
	--color-vinyl-red-lightest: #ffe7e2;
	--color-vinyl-yellow: #ffee99;
	--color-vinyl-yellow-lighter: #fff6cc;
	--color-vinyl-yellow-lightest: #fffbe5;
	--color-vinyl-blue: #a6ffe1;
	--color-vinyl-blue-lighter: #d2fff0;
	--color-vinyl-blue-lightest: #e9fff7;
	accent-color: var(--color-vinyl-brand);
}

:root {
	color-scheme: light dark;
	--color-theme-main: light-dark(
		var(--color-vinyl-brand),
		color-mix(in srgb, var(--color-vinyl-brand) 40%, white 60%)
		);
	--color-theme-background: light-dark(
		white,
		color-mix(in srgb, var(--color-vinyl-brand) 40%, black 60%)
		);
	--color-theme-contrast: light-dark(
		color-mix(in srgb, var(--color-vinyl-brand) 40%, black 60%),
		color-mix(in srgb, var(--color-vinyl-brand) 10%, white 90%)
		);
	--color-theme-main-80: rgb(from var(--color-theme-main) r g b / 80%);
	--color-theme-main-60: rgb(from var(--color-theme-main) r g b / 60%);
	--color-theme-main-40: rgb(from var(--color-theme-main) r g b / 40%);
	--color-theme-main-20: rgb(from var(--color-theme-main) r g b / 20%);
	--color-theme-main-10: rgb(from var(--color-theme-main) r g b / 10%);
	--color-theme-main-05: rgb(from var(--color-theme-main) r g b / 05%);
	--color-theme-main-02: rgb(from var(--color-theme-main) r g b / 02%);
	--color-theme-main-variant-80: color-mix(in srgb, var(--color-theme-main) 80%, var(--color-theme-background) 20%);
	--color-theme-main-variant-60: color-mix(in srgb, var(--color-theme-main) 60%, var(--color-theme-background) 40%);
	--color-theme-main-variant-40: color-mix(in srgb, var(--color-theme-main) 40%, var(--color-theme-background) 60%);
	--color-theme-main-variant-20: color-mix(in srgb, var(--color-theme-main) 20%, var(--color-theme-background) 80%);
	--color-theme-main-variant-10: color-mix(in srgb, var(--color-theme-main) 10%, var(--color-theme-background) 90%);
	--color-theme-main-variant-05: color-mix(in srgb, var(--color-theme-main) 05%, var(--color-theme-background) 95%);
	--color-theme-main-variant-02: color-mix(in srgb, var(--color-theme-main) 02%, var(--color-theme-background) 98%);
}

@media (prefers-color-scheme: light) { :root {
	color-scheme: light;
}}

@media (prefers-color-scheme: dark) { :root {
	color-scheme: dark;
}}

:root:has([data-theme="light"]) {
	color-scheme: light;
}

:root:has([data-theme="dark"]) {
	color-scheme: dark;
}

body {
	--color-brand-primary: var(--color-theme-main) !important;
	--color-brand-content: var(--color-theme-main) !important;
	--color-brand-visited: var(--color-theme-main) !important;
	--color-foreground-primary: var(--color-theme-contrast) !important;
	--color-foreground-secondary: var(--color-theme-main-80) !important;
	--color-foreground-muted: var(--color-theme-main-60) !important;
	--color-foreground-border: var(--color-theme-main) !important;
	--color-background-primary: var(--color-theme-background) !important;
	--color-background-secondary: var(--color-theme-main-05) !important;
	--color-background-hover: var(--color-theme-main-05) !important; 
	--color-background-hover--transparent: transparent !important;
	--color-background-border: transparent !important; 
	--color-background-item: var(--color-theme-main-05) !important;
	--color-link: var(--color-theme-main) !important;
	--color-link-underline: var(--color-theme-main-40) !important;
	--color-link--hover: var(--color-theme-main-60) !important;
	--color-link-underline--hover: var(--color-link-underline) !important;
	--color-link--visited: var(--color-link) !important;
	--color-link-underline--visited: var(--color-link-underline) !important;
	--color-link--visited--hover: var(--color-link--hover) !important;
	--color-link-underline--visited--hover: var(--color-link-underline) !important;
	--color-table-header-background: var(--color-theme-main-10) !important;
	--color-table-border: var(--color-theme-main-20) !important;
	--color-sidebar-background: linear-gradient(90deg, var(--color-theme-main-variant-02), var(--color-theme-main-variant-05)) !important;
	--color-sidebar-background-border: transparent !important;
	--color-sidebar-search-text: var(--color-theme-main) !important;
	--color-sidebar-search-background: var(--color-theme-main-05) !important;
	--color-sidebar-search-background--focus: var(--color-theme-main-02) !important;
	--color-sidebar-search-border: transparent !important;
	--color-toc-background: var(color-theme-background) !important;
	--color-toc-title-text: var(--color-theme-main) !important;
	--color-toc-item-text: rgb(from var(--color-theme-contrast) r g b / 60%) !important;
	--color-toc-item-text--hover: rgb(from var(--color-theme-contrast) r g b / 80%) !important;
	--color-toc-item-text--active: var(--color-theme-main) !important;
	--color-header-background: var(--color-theme-main-variant-10) !important;
	--color-header-text: var(--color-theme-main) !important;
	--color-highlight-on-target: var(--color-theme-main-10) !important;
}

h1, h2 {
	color: light-dark(var(--color-theme-main), var(--color-theme-contrast));
}

h3, h4, h5, h6 {
	color: var(--color-theme-main);
}

.bottom-of-page, 
.bottom-of-page a {
	color: rgb(from var(--color-theme-contrast) r g b / 60%);
}

.sidebar-logo-container {
	background-color: light-dark(transparent, var(--color-theme-contrast));
	border-radius: .5rem;
	margin: 0;
}

li::marker {
	color: var(--color-theme-main);
}

/* Spacing */

body {
	--header-padding: 1rem;
	--sidebar-tree-space-above: .75rem;
	--sidebar-item-line-height: 1rem;
	--sidebar-item-spacing-vertical: .75rem;
	--sidebar-item-spacing-horizontal: .5rem;
	--sidebar-search-space-above: 0;
	--toc-spacing-vertical: .75rem;
	--toc-spacing-horizontal: .5rem;
	--toc-item-spacing-vertical: .25rem;
	--toc-item-spacing-horizontal: .5rem;
}

/* Elements */

/* Mascot */

:has(.mascot) {
	--mascot-min: 150px;
	--mascot-mid: 30%;
	--mascot-max: 300px;
	--mascot-width: clamp(var(--mascot-min), var(--mascot-mid), var(--mascot-max));
}

.mascot {
	--glow-color: rgba(from color-mix(in srgb, var(--color-vinyl-brand) 50%, white 50%) r g b / .75);
	--glow: drop-shadow(0 0 5px var(--glow-color)) drop-shadow(0 0 10px var(--glow-color)) drop-shadow(0 0 20px var(--glow-color)) drop-shadow(0 0 40px var(--glow-color));
	display: block;
	width: var(--mascot-width);
}

:root:has([data-theme="dark"]) {
	.mascot {
		filter: var(--glow);
	}
}

@media (prefers-color-scheme: dark) {
	.mascot {
		filter: var(--glow);
	}
}

/* Homepage introduction block */

.intro-card {
	background-color: light-dark(
		var(--color-theme-main-10),
		var(--color-vinyl-brand)
	);
	position: relative;
	overflow: hidden;
	margin-inline: -1.5rem;
	--mascot-min: 125px;
	--mascot-mid: 25%;
	--mascot-max: 250px;
	padding: 1rem calc(var(--mascot-width) + 2rem) 1rem 2rem;
	@media (width < 40em) {
		padding: 1rem 3rem calc(var(--mascot-width) - 3rem) 2rem;
	}
}

.intro-card .mascot {
	position: absolute;
	float: right;
	bottom: 0;
	right: 0;
	margin-left: 1rem;
}

.intro-card::after {
	clear: both;
	display: block;
	content: '';
}

.intro-card h2 {
	margin-top: .5rem;
}

.intro-card a {
	display: inline-block;
	background-color: var(--color-theme-main-20);
	padding: .5rem 1rem;
	margin-right: .5rem;
	font-family: var(--font-stack--monospace);
	font-size: .8rem;
	text-decoration: none;
}

.intro-card a:is(:hover, :focus) {
	background-color: var(--color-theme-main-10);
}

.intro-card a:first-of-type {
	background-color: var(--color-theme-main);
	color: var(--color-theme-background);
}

.intro-card a:first-of-type:is(:hover, :focus) {
	background-color: var(--color-theme-main-80);
}

/* custom.css | https://vinyl-cache.org/_static/custom.css */


/* Timestamps for news items */

time:has(+h3),
h3 + time,
.rubric.date {
	font-family: var(--font-stack--monospace);
	color: var(--color-theme-main);
	font-size: .8rem;
}

time + h3,
.rubric.date + h3 {
	margin-top: 0;
}

/* Admonitions */

.admonition {
	--color-admonition: var(--color-theme-main);
	--color-admonition-background: rgb(from var(--color-admonition) r g b / 15%);
	--color-admonition-heading: light-dark(var(--color-theme-main), var(--color-admonition));
	border-radius: 0;
	box-shadow: none;
	border-left: .75rem solid var(--color-admonition) !important;
	background: var(--color-admonition-background);
	padding: .75rem .75rem;
}

.admonition .admonition-title {
  --admonition-title-font-size: .9rem;
	background: transparent !important;
	color: var(--color-admonition-heading) !important;
	font-family: var(--font-stack--monospace);
	text-transform: uppercase;
	padding-block: 0 !important;
}

.admonition .admonition-title::before {
	background-color: var(--color-admonition-heading) !important;
	top: .1em;
}

.admonition.attention,
.admonition.danger,
.admonition.error {
	--color-admonition: var(--color-vinyl-red);
}

.admonition.important,
.admonition.caution,
.admonition.warning {
	--color-admonition: var(--color-vinyl-yellow);
}

.admonition.tip,
.admonition.note,
.admonition.hint {
	--color-admonition: var(--color-vinyl-blue);
}

/* Code blocks */

.highlight {
	background: light-dark(rgb(from var(--color-vinyl-yellow) r g b / 50%), var(--color-theme-main-variant-20)) !important;
}

/* Tables */

table.docutils {
  box-shadow: none;
  border: 2px solid var(--color-table-border);
}

/* Follow and sponsors sidebar */

.sidebar-scroll > div:not(.sidebar-tree) {
	margin-top: calc(2 * var(--sidebar-tree-space-above));
	margin-bottom: calc(3* var(--sidebar-tree-space-above));
	padding-inline: var(--sidebar-item-spacing-horizontal);
	font-size: .8em;
	text-wrap: balance;
}

.sidebar-scroll > div:not(.sidebar-tree):has(img) {
	font-family: var(--font-stack--headings);
}

.sidebar-scroll > div:not(.sidebar-tree):has(img) img {
	margin-bottom: 1.5em;
}

/* Layout */

section {
	margin-bottom: 1.5rem;
}

.bottom-of-page * {
	display: inline;
}