@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans+Mono:wght@100..900&display=swap');

:root {
	--bg-color: #ffffff; /* dark: #1e272e */
	--text-color: #282828;
	--bg-color-beige: #f8f6f1;
	--toast-bg: #ebc285;
	--hover-bg: rgba(0, 0, 0, 0.06);
	--nav-hover-bg: #ffffff33;
	--gray: #adadad;
	--card-bg: #00000015;
	/* --main-color: #337e4c; */
	--main-color: #4871e0;

	--code-bg: #1f2228;
	--code-stroke: #303541;
	--code-scrollbar: #636569;

	--nav-bg: #000000;
	--sub-color: #75757e; /* for sub text */
	--elevated: #e3e3e3; /* for buttons and tags */
	--color-allgood: #40d672;
	--color-warning: #ffd63a;
	--color-error: #f7374f;

	--dark-main-color: #4368cc;
	--dark-color-allgood: #36b661; /* TODO: Fix these dark variants */
	--dark-color-error: #da2f43;
	--dark-color-warning: #dfbc32;

	--focus-ring: solid 2px var(---main-color);
	--focus-ring-offset: -2px;

	--button-default: #f4f4f4;
	--button-default-hover: #ededed;
	--button-press: #e8e8e8;
	--button-stroke: rgba(0, 0, 0, 0.06);
	--button-box-shadow: 0 0 0 1px var(--button-stroke) inset;

	--button-elevated: #e3e3e3;
	--button-elevated-hover: #dadada;
	--button-elevated-press: #d3d3d3;

	--button-active: var(--text-color);
	--button-active-hover: #2a2a2a;

	/* Dialog styles */
	--dialog-backdrop: rgba(255, 255, 255, 0.5);
	--dialog-padding: 18px;
	--popup-bg: var(--bg-color);
	--popup-stroke: rgba(0, 0, 0, 0.1);
	--red: #f7374f;
	--white: #ffffff;
	--gray: #adadad;

	--card: var(--button);
	--card-box-shadow: var(--button-box-shadow);

	--input-box-shadow: var(--button-stroke) 0 0 0 1.5px inset;

	--navbar-lift: 1rem;
	--mobile-navbar-height: calc(64px + env(safe-area-inset-bottom));
	--navbar-inner-padding: 4px;
	--navbar-tab-padding: 10px;
	--navbar-highlight: #ffffff;
	--padding: 15px;

	/* Mobile navbar scaling variables */
	--navbar-height: 80px;
	--navbar-font-size: 11px;
	--navbar-height-mobile: calc(50px + env(safe-area-inset-bottom));
	--icon-size-mobile: 22px;
	--icon-size-desktop: 25px;
	--actions-and-stuff-ahh-transition: cubic-bezier(0.68, -0.6, 0.32, 1.6);
	--content-border-radius: 1rem;
	--grid-bg:
		linear-gradient(to right, rgba(128, 128, 128, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(128, 128, 128, 0.05) 1px, transparent 1px);
	--grid-bg-size: 15px 15px;
	--border-radius: 12px;
	font-size: 15px;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

html,
body {
	margin: 0;
	height: 100vh;
	overflow: hidden;
	overscroll-behavior-y: none;
}

* {
	font-family: "Fira Mono", monospace;
	user-select: none;
	scrollbar-width: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-smoothing: antialiased;
}

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

::-webkit-scrollbar {
	display: none;
}

::selection {
	color: var(--primary);
	background: var(--secondary);
}

a {
	color: inherit;
	text-underline-offset: 3px;
	-webkit-touch-callout: none;
}

a:visited {
	color: inherit;
}

svg,
img {
	pointer-events: none;
}
/* TEXT STYLES FROM COBALT-MAIN */

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	margin-block: 0;
}

h1 {
	font-size: 24px;
	letter-spacing: -1px;
}

h2 {
	font-size: 20px;
	letter-spacing: -1px;
}

h3 {
	font-size: 16px;
}

h4 {
	font-size: 14.5px;
}

h5 {
	font-size: 12px;
}

h6 {
	font-size: 11px;
}

.subtext {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--gray);
	line-height: 1.4;
	padding: 0 var(--padding);
	white-space: pre-line;
	user-select: text;
	-webkit-user-select: text;
}

/* BASE ELEMENT STYLES */

body {
	overflow-x: hidden;
	overflow: hidden;
	width: 100vw;
	height: 100%; /* Use small viewport height for better iOS Safari compatibility */
	background-size: cover;
	font-family:
		Fira Mono,
		monospace;
	cursor: default;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	overscroll-behavior: none;
	position: fixed;
	padding: 0;
	opacity: 0;
	animation: fadeIn 200ms forwards;
	background: var(--nav-bg); /* for cozy navbar */
	overflow: hidden;
}

html,
body {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: auto;
	-webkit-overflow-scrolling: touch; /* ✅ iOS elastic scroll */
}

h1,
h2 {
	font-weight: 500;
	padding: 6px 0;
	line-height: 1.3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
}

p {
	font-size: 1rem;
}

a:not(:has(img)):not(.button) {
	text-decoration-thickness: 5px;
	color: var(--main-color);
	transition: all 0.2s ease-in-out;
	text-decoration-skip-ink: none;
	background-color: transparent;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}

a {
	-webkit-tap-highlight-color: transparent;
	-ms-touch-action: manipulation;
}

img {
	user-select: none;
	-webkit-user-select: none; /* Safari / iOS */
	-ms-user-select: none;
	pointer-events: none;
}

code {
	font-family: Fira Mono;
	font: 0.5rem;
	color: white;
	padding: 1px 10px;
	border-radius: 6px;
	overflow-x: auto;
}

pre {
	tab-size: 4;
	white-space: pre;
	font-family: Fira Mono;
	overflow-x: auto;
	max-width: 100%;
	scrollbar-width: thin;
	padding-bottom: 0.3rem;
	scrollbar-color: var(--code-scrollbar) var(--code-bg);
}

/* .basket {
	display: flex;
	flex-direction: column;
	position: absolute;
	width: 100%;
	height: 100dvh;
	background-color: var(--bg-color);
}  */

.loaf {
	/* content of the page */
	/*border: solid red .3125rem;
   */
	overflow-y: auto;
	width: 100%;
	background-color: var(--bg-color);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	height: calc(100% - var(--navbar-height) - env(safe-area-inset-bottom));
}

.center-container {
	/* i added this because it just works idk */
	height: 100%;
	display: flex;
	width: 100%;
	position: relative;
	flex-direction: row;
	align-items: center;
	justify-content: safe center !important; /* THIS IS VERY IMPORTANT. IF YOU USE JUSTIFY CONTENT: CENTER, ELEMENTS MAY GO OFF SCREEN. ALWAYS USE SAFE CENTER AND YOUR SANITY WILL THANK YOU. */
	/* border: solid blue .0625rem */
}

.giantahhparagraph {
	font-size: 1.1875rem;
	color: var(--sub-color);
}

.bullet-title {
	font-size: 1.125rem;
}

.small-text {
	color: var(--sub-color);
	font-weight: 430;
	font-size: 0.9rem;
}

.divider {
	border-top: var(--sub-color);
	color: var(--sub-color);
	background-color: var(--sub-color);
	border: 1px;
	display: block;
	height: 1px;
	width: 70%;
	margin-top: 0.9375rem;
	margin-bottom: 0.9375rem;
}

.contact-container {
	font-size: 0.8125rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.contact-container > .small-text {
	text-align: center;
}

.icon,
img {
	object-fit: cover;
	flex-shrink: 0;
}

/* SELECTION STYLES */

::selection {
	background-color: var(--main-color);
	color: white;
}

::-moz-selection {
	background-color: var(--main-color);
	color: white;
}


@media only screen and (max-width: 600px) {
	:root {
		font-size: 14px;
		--navbar-height: var(--mobile-navbar-height);
	}
}

@media only screen and (max-height: 400px) {
	.h300::after {
		content: ' (scroll)';
	}

	:root {
		font-size: 14px;
		--navbar-height: var(--mobile-navbar-height);
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	select:focus,
	textarea:focus,
	input:focus {
		font-size: 16px;
	}
}

/* READABLE TEXT */ 
.long-text,
.long-text *:not(h1, h2, h3, h4, h5, h6) {
	font-size: 15px;
	line-height: 1.8;
	font-family: Fira Mono, monospace;
	user-select: text;
	-webkit-user-select: text;
}

.long-text,
.long-text *:not(h1, h2, h3, h4, h5, h6, strong, em, del) {
	font-weight: 400;
}

.long-text ul {
	padding-inline-start: 30px;
}

.long-text li {
	padding-left: 3px;
}

.long-text h1,
.long-text h2,
.long-text h3 {
	user-select: text;
	-webkit-user-select: text;
	letter-spacing: 0;
	margin-block-start: 1rem;
	border-bottom: 1.5px solid var(--button-default-hover);
	margin-block-end: -0.3rem;
}

.long-text h3 {
	font-size: 17px;
}

.long-text h2 {
	font-size: 19px;
}

.long-text img {
	border-radius: 6px;
}

img {
	max-width: 100%;
	height: auto;
}
table,
td,
th {
	border-spacing: 0;
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	text-align: center;
	padding: 3px 8px;
}

tr th:first-child {
	text-align: right;
}

.long-text.about section p:first-of-type {
	margin-block-start: 0.3em;
}

.long-text.about .heading-container {
	padding-top: calc(var(--padding) / 2);
}

.long-text.about section:first-of-type .heading-container {
	padding-top: 0;
}

@media screen and (max-width: 535px) {
	.long-text,
	.long-text *:not(h1, h2, h3, h4, h5, h6) {
		font-size: 14px;
	}
}

/*
BUTTON SYSTEM:
- .button--default: Base button styles
- .button--primary: Main action buttons
- .button--danger: Destructive actions
- .button--success: Success/confirmation actions
- .button--elevated: Raised appearance
- .button--link: Link-style buttons
- .button--url: URL/external link buttons
- Sizes: --small, --medium (default), --large
- States: :hover, :active, :disabled
*/

/* Global Button Styles (from cobalt-main) */
button,
.button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 13px;
	gap: 6px;
	text-decoration: none;
	border: none;
	border-radius: var(--border-radius);
	font-size: 14.5px;
	cursor: pointer;
	font-weight: 500;
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	box-shadow: var(--button-box-shadow);
}

.button--default {
	background-color: var(--button-default);
	color: var(--text-color);
}
.button--active {
	background-color: var(--button-active);
	color: var(--bg-color);
}

/* Button Variants */
.button--primary {
	background: var(--main-color);
	color: white;
}

.button--success {
	background: var(--color-allgood);
	color: white;
}

.button--danger {
	background: var(--color-error);
	color: white;
}

.button--elevated {
	background-color: var(--button-elevated);
	box-shadow: none;
}

.button--link {
	background: transparent;
	box-shadow: none;
	color: var(--main-color);
	text-decoration: underline;
}

.button--url {
	background: transparent;
	box-shadow: none;
	color: var(--text-color);
	padding: 7px 9px;
	min-width: fit-content;
	flex-basis: content;
	flex-direction: row;
	gap: 10px;
	text-decoration: none;
}

/* Button Sizes */
.button--small {
	padding: 4px 8px;
	font-size: 13px;
}

.button--large {
	padding: 8px 16px;
	font-size: 16px;
}

/* Button States */

.button--default:hover {
	background-color: var(--button-default-hover);
}
.button--primary:hover {
	background: var(--dark-main-color);
}

.button--success:hover {
	background: var(--dark-color-allgood);
}

.button--danger:hover {
	background: var(--dark-color-error);
}

.button--elevated:hover {
	background-color: var(--button-elevated-hover);
}

.button--primary:active {
	background: var(--dark-main-color);
	filter: brightness(0.9);
}

.button--success:active {
	background: var(--dark-color-allgood);
	filter: brightness(0.9);
}

.button--danger:active {
	background: var(--dark-color-error);
	filter: brightness(0.9);
}

.button--elevated:active {
	background-color: var(--button-elevated-press);
}

.button--default:active {
	background-color: var(--button-press);
}

.button--default:disabled,
button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Prevent link brightness filter from affecting button-like links */
a.button:hover {
	filter: none;
	-webkit-filter: none;
}

a:not(:has(img)):not(.button):hover {
	filter: brightness(1.25);
	-webkit-filter: brightness(1.25);
}

a.url-button {
	user-select: none;
	-webkit-user-select: none; /* Safari / iOS */
	-ms-user-select: none;
	flex-shrink: 0;
	display: flex;
	min-width: fit-content;
	flex-basis: content;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	position: relative;
	border-radius: var(--border-radius);
	padding: 7px 9px;
	width: max-content;
	text-decoration: none;
}

a.url-button:hover {
	background: var(--button-hover);
}

:focus-visible {
	outline: none;
}

button:focus-visible,
a:focus-visible,
select:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* Dialog System Styles */
:global(dialog) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: none;
	max-height: 100%;
	max-width: 100%;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	pointer-events: all;
	inset-inline-start: unset;
	inset-inline-end: unset;
	overflow: hidden;
}

:global(dialog:modal) {
	inset-block-start: 0;
	inset-block-end: 0;
}

:global(dialog:modal::backdrop) {
	display: none;
}

:global(.dialog-body) {
	--dialog-padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--popup-bg);
	box-shadow: 0 0 0 2px var(--popup-stroke) inset;
	border-radius: 29px;
	filter: drop-shadow(0 0 40px var(--button));
	padding: var(--dialog-padding);
	position: relative;
	will-change: transform, opacity, filter;
}

:global(dialog.open .dialog-body) {
	animation: modal-in 0.35s;
	animation-delay: 0.06s;
	animation-fill-mode: backwards;
}

:global(dialog.closing .dialog-body) {
	animation: modal-out 0.15s;
	opacity: 0;
}

@media screen and (max-width: 535px) {
	:global(dialog) {
		justify-content: flex-end;
	}

	:global(dialog.open .dialog-body) {
		animation: modal-in-mobile 0.4s;
	}

	:global(dialog .dialog-body) {
		margin-bottom: calc(
			var(--padding) + calc(env(safe-area-inset-bottom) - 15px * sign(env(safe-area-inset-bottom)))
		);
		box-shadow: 0 0 0 2px var(--popup-stroke) inset;
	}
}

@keyframes modal-in {
	from {
		transform: scale(0.8);
		opacity: 0;
	}
	35% {
		opacity: 1;
	}
	50% {
		transform: scale(1.01);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes modal-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		transform: scale(0.9);
		visibility: hidden;
	}
}

@keyframes modal-in-mobile {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	1% {
		transform: translateY(200px);
	}
	35% {
		opacity: 1;
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0px);
	}
}