/**
 * Shared YSAP CSS file.
 *
 * The goal here is for this CSS file to be included by *any* *.ysap.sh website
 * and to override any defaults as needed.
 *
 * I may have graduated with a minor in web development but I really don't claim
 * to be good at this :p.
 *
 * # Created
 * Author: Dave Eddy <ysap@daveeddy.com>
 * Date: October 19, 2026
 * License: MIT
 *
 * # Contributors
 * - Dave Eddy <ysap@daveeddy.com>
 */

:root {
	color-scheme: dark;

	--ysap-cyan: #5fffff;
	--ysap-pink: #ff87af;
	--ysap-green: #87ff87;
	--ysap-muted: #8a938a;
	--ysap-cream: #ffd7af;
	--ysap-background: #050705;
	--ysap-surface: #0d110e;
	--ysap-surface-hover: #161c17;
	--ysap-border: #87ff874d;
	--ysap-glow: #87ff8726;

	--ysap-content-width: 52rem;
	--ysap-reading-width: 68ch;

	--ysap-space-1: 0.375rem;
	--ysap-space-2: 0.75rem;
	--ysap-space-3: 1.125rem;
	--ysap-space-4: 1.75rem;
	--ysap-space-5: 2.5rem;

	/* based on the `make-theme` ysap script */
	--color1: var(--ysap-cyan);
	--color2: var(--ysap-pink);
	--color3: var(--ysap-green);
	--color4: var(--ysap-muted);
	--color5: var(--ysap-cream);
}

a[target="_blank"]::after {
	content: " \2197";
	font-size: 0.85em;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	background: var(--ysap-background);

	/* is this needed? */
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ysap-background);
	color: var(--ysap-cream);
	font-family: "Fira Mono", monospace;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
}

code, pre {
	font-family: inherit;
}

pre, p, ul {
	margin: 0;
}

h1, h2, h3, h4, h5, h6, b, strong {
	font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
}

a, a:visited {
	color: var(--ysap-cyan);

	text-decoration-color: #5fffff99;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: #a9ffff;

	text-decoration-color: currentColor;
}

a:focus-visible, button:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--ysap-pink);
	outline-offset: 3px;
}

::selection {
	background: var(--ysap-green);
	color: var(--ysap-background);
}

#container, .ysap-container {
	position: relative;
	width: min(100%, var(--ysap-content-width));
	margin: 0 auto;
	padding: var(--ysap-space-2) var(--ysap-space-3) var(--ysap-space-4);
}

/* nav */

.site-nav, #top-nav {
	margin-bottom: var(--ysap-space-4);
	border-bottom: 1px solid var(--ysap-border);
}

.site-nav ul, #top-nav > ul {
	display: flex;
	margin: 0;
	padding: 0;

	align-items: center;
	gap: var(--ysap-space-1);
	list-style: none;
}

.site-nav li:last-child, #top-nav > ul > li.right {
	margin-left: auto;
}

.site-nav a, #top-nav a {
	display: block;
	padding: var(--ysap-space-2);
	color: var(--ysap-cream);
	text-decoration: none;
}

.site-nav a:hover, #top-nav a:hover {
	background: var(--ysap-surface-hover);
	color: var(--ysap-green);
}

.site-nav a.active, #top-nav a.active {
	color: var(--ysap-green);
}

.site-nav .site-label {
	display: block;
	padding: var(--ysap-space-2);
	color: var(--ysap-green);
	font-weight: 700;
}

/* main elements */

.title, .highlight {
	color: var(--ysap-green);
}

.title {
	margin-bottom: var(--ysap-space-4);
}

.plain-link, .plain-link:visited {
	color: inherit;
	text-decoration: none;
}

.shadow {
	border: 1px solid var(--ysap-border);
	box-shadow: 0 0 90px var(--ysap-glow);
}

.footer {
	margin-top: var(--ysap-space-5);
	color: var(--ysap-muted);

	font-size: 12px;
	line-height: 1.5;
	text-align: center;
}

.footer a {
	text-decoration: none;
}

/* utility */

.center {
	text-align: center;
}

.hidden {
	display: none;
}

.float-right {
	float: right;
}

/* phones or small devices */
@media (max-width: 650px) {
	body {
		font-size: 14px;
	}

	#container, .ysap-container {
		padding-right: var(--ysap-space-2);
		padding-left: var(--ysap-space-2);
	}

	.site-nav ul, #top-nav > ul {
		flex-wrap: wrap;
	}

	.site-nav a, #top-nav a, .site-nav .site-label {
		padding: var(--ysap-space-2) var(--ysap-space-1);
	}

	.hide-mobile {
		display: none;
	}
}

/* accessibility thing - i think this works */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}