/* This css file contains the base of all elements used in the Godot Foundation Web Apps */
/* V1.0 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  color-scheme: light dark;
	--godot-color: #598bbb;
	--nav-height: 60px;
	--background-color: #e7e7e7;
	--text-color: #272727;
	--header-font-family: "Montserrat", sans-serif;
	--main-font-family: "Noto Sans", sans-serif;
	--panel-background: white;
	--basic-gap: 20px;
	--accent-color: #478cbf;
	--notebox-color: #d79e54;
	--notebox-text-color: #1e1e1e;
	--link-color: #2fa7ff;
	--link-color--hover: oklch(from var(--link-color) calc(l + 0.1) c h);
	--link-color-visited: oklch(from var(--link-color) l c calc(h + 30));
	--link-color-visited--hover: oklch(
		from var(--link-color-visited) calc(l + 0.1) c h
	);
	--hr-background-color: #9595951f;

	@media (prefers-color-scheme: dark) {
		--background-color: #131313;
		--text-color: white;
		--panel-background: #1e1e1e;
	}

	scroll-behavior: smooth;
	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

.mobile {
	@media (min-width: 768px) {
		display: none !important;
	}
}

.desktop {
	@media (max-width: 768px) {
		display: none !important;
	}
}

/* Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Global styles */

html {
	background: #1e1e1e;
	color: var(--text-color);
}

body {
	background: var(--background-color);
	font-family: var(--main-font-family);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-font-family);
  font-weight: 800;
}

button {
	border: 0;
	background: none;
	cursor: pointer;

	/* button.link simulates an href link. */
	&.link {
		appearance: unset;
		font-style: unset;
		font-variant-ligatures: unset;
		font-variant-caps: unset;
		font-variant-numeric: unset;
		font-variant-east-asian: unset;
		font-variant-alternates: unset;
		font-variant-position: unset;
		font-variant-emoji: unset;
		font-weight: unset;
		font-stretch: unset;
		font-size: unset;
		font-family: unset;
		font-optical-sizing: unset;
		font-size-adjust: unset;
		font-kerning: unset;
		font-feature-settings: unset;
		font-variation-settings: unset;
		font-language-override: unset;
		text-align: unset;
		text-rendering: unset;
		letter-spacing: unset;
		word-spacing: unset;
		line-height: unset;
		text-transform: unset;
		text-indent: unset;
		text-shadow: unset;
		display: inline-block;
		padding: unset;
		background: unset;
		border: unset;
		padding-block: unset;
		padding-inline: unset;
		color: unset;

		color: -webkit-link;
		cursor: pointer;
		text-decoration: underline;
	}
}

hr {
	border: 0;
  height: 1px;
  background-color: var(--hr-background-color);
  margin: 15px 0px;
}

a, button.link {
	color: var(--link-color);

	&:hover {
		color: var(--link-color--hover);
	}
}

a:visited {
	color: var(--link-color-visited);

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

table {
	min-width: 100%;
	border-collapse: collapse;

	td, th {
		text-align: left;
		border: none;
		padding: calc( var(--basic-gap) / 2 );
		word-wrap: break-word;
		max-width: 150px;
	}
	tr:nth-child(even) {
		background-color: var(--panel-background);
	}
	tr:nth-child(odd) {
		background-color: var(--background-color);
	}

	td.fit-content, th.fit-content {
		width: 1%;
		white-space: nowrap;
	}
}

body > main {
	max-width: 1300px;
	margin: 0 auto;
	margin-top: var(--nav-height);
	padding: 0 var(--basic-gap);
	padding-top: var(--basic-gap);
	margin-bottom: var(--basic-gap);
}

body > footer {
	width: 100%;
	text-align: center;
	font-size: 12px;
	background: #1e1e1e;
	color: white;
	margin: 0;
	padding: calc(var(--basic-gap) + 10px) 0;
	margin-top: var(--basic-gap);

	hr {
		border: 0;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background: unset;

		&::before {
			content: "";
			display: block;
			background-color: var(--hr-background-color);
			height: 100%;
			width: clamp(30em, 30vw, 50em);
			max-width: 100%;
		}
	}
}

blockquote {
	border-left: 3px solid #aaa;
  padding: 12px;
  margin: 12px 0;
  background: #00000026;
}

textarea {
	width: 100%;
	resize: vertical;
}

ol, ul {
	padding-left: 20px;
}

input, select, textarea {
	padding: 10px;
	margin-top: 5px;
	font-family: inherit;
	border-radius: 5px;
	border: 1px solid #606060;
	margin-bottom: 9px;
	@media (prefers-color-scheme: light) {
		border-color: #e1e1e1;
	}
}

option {
	@media (prefers-color-scheme: dark) {
		background-color: #1e1e1e;
	}
}

input[type="checkbox"] {
	width: auto;
}

textarea {
	resize: vertical;
}

.button, button:not(.link), input[type="button"], input[type="submit"] {
	text-decoration: none;
	background: linear-gradient(10deg, rgb(97, 129, 255), rgb(1, 170, 187));
	max-width: 100%;
	display: inline-block;
	text-align: center;
	padding: 13px;
	border-radius: 6px;
	box-shadow: 0 7px 27px -17px black;
	font-weight: 700;
	font-size: 19px;
	margin-top: 4px;
	transition: all 0.1s ease-in-out;
	color: white;
	span.muted {
		font-weight: 500;
		opacity: 0.8;
		font-size: 16px;
	}
	&:hover {
		box-shadow: none;
	}
	&.primary {
		background: linear-gradient(10deg, rgb(96, 213, 103), rgb(134, 206, 94));
		@media (prefers-color-scheme: dark) {
			background: linear-gradient(10deg, rgb(96, 213, 103), rgb(1, 151, 88));
		}
		color: white;
	}
	&.secondary {
		background: linear-gradient(10deg, rgb(97, 129, 255), rgb(1, 170, 187));
		color: white;
	}
	&.tertiary {
		background: linear-gradient(10deg, rgb(255, 97, 97), rgb(245, 71, 71));
		color: white;
	}
	&.dim, &:disabled {
		background: linear-gradient(10deg, rgb(68, 68, 68), rgb(98, 98, 98));
		@media (prefers-color-scheme: dark) {
			background: linear-gradient(10deg, rgba(97, 129, 255, 0.1), rgba(71, 229, 245, 0.06));
		}
		color: white;
	}
	&:disabled {
		color: #cccccc;
		cursor: not-allowed;
	}
	&.small {
		padding: 6px 11px;
		font-size: 16px;
		margin: 0;
	}
}

.panel {
	background-color: var(--panel-background);
	border-radius: 8px;
	box-shadow: light-dark(0 0 10px -9px black, none);
	&.padded {
		padding: 16px;
	}

	&.note {
		background-color: var(--notebox-color);
		color: var(--notebox-text-color);
	}
	&.hoverable {
		transition: background-color 0.1s ease-in-out;
		&:hover {
			background-color: light-dark(#e0fff6, #404040);
		}
	}
}

.monospace {
	font-family: "Noto Sans Mono", monospace;
	font-optical-sizing: auto;
}

/* Keyboard inputs. */
kbd {
	/* Style took shamelessly from the <kbd> MDN article. */
	/* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd#try_it */
	--kbd-background-color: #eeeeee;
	--kbd-border-radius: 3px;
	--kbd-border: 1px solid #b4b4b4;
	--kbd-box-shadow:
		0 1px 1px rgb(0 0 0 / 0.2), 0 2px 0 0 rgb(255 255 255 / 0.7) inset;
	--kbd-color: #333333;
	--kbd-padding: 2px 4px;

	display: inline-block;
	position: relative;
	top: -3px;
	font-style: normal;
	white-space: nowrap;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1;

	background-color: var(--kbd-background-color);
	border-radius: var(--kbd-border-radius);
	border: var(--kbd-border);
	box-shadow: var(--kbd-box-shadow);
	color: var(--kbd-color);
	padding: var(--kbd-padding);

	&:has(> kbd) {
		background-color: unset;
		border-radius: unset;
		border: unset;
		box-shadow: unset;
		color: unset;
		padding: unset;
	}

	& > kbd {
		position: relative;
		top: 0;

		background-color: var(--kbd-background-color);
		border-radius: var(--kbd-border-radius);
		border: var(--kbd-border);
		box-shadow: var(--kbd-box-shadow);
		color: var(--kbd-color);
		padding: var(--kbd-padding);
	}
}