/* Global styles */
@import './reset.css';
@import './typography.css';

:root {
	/* Static palette fallbacks for browsers without color-mix(). */
	--color-primary: rgb(33, 155, 255);
	--color-primary-light: #d9efff;
	--color-primary-mid: #1874bf;
	--color-primary-dark: #0c3659;
	--color-secondary: #edf0f2;

	--font-color-primary: #000;
	--font-color-dark: #071f33;
	--font-color-mid: #165f99;
	--font-color-inactive: #60819b;

	--color-gray-50: #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-300: #d1d5db;
	--color-gray-400: #9ca3af;
	--color-gray-500: #6b7280;
	--color-gray-600: #4b5563;
	--color-gray-700: #374151;
	--color-gray-800: #1f2937;
	--color-gray-900: rgb(26, 36, 0);

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-14: 3.5rem;
	--space-16: 4rem;

	/* Border radius */
	--base-radius: 15px;
	--radius-sm: calc(var(--base-radius) * 0.125); /* 1.875px */
	--radius-md: calc(var(--base-radius) * 0.25); /* 3.75px */
	--radius-lg: calc(var(--base-radius) * 0.5); /* 7.5px */
	--radius-xl: calc(var(--base-radius) * 1); /* 15px */
	--radius-full: 9999px;

	/* Component heights */
	--nav-height: calc(
		(var(--font-size-xl) * 1.5 + 20px + 2rem) * 2.5
	); /* font-size * line-height + padding + margin */

	--footer-height: 8rem;
	--content-width: 95vw;
	--arrow-size: 4rem; /* Default static size for arrow buttons */
	--scroll-bar-width: 5px; /* Default static size for scroll bars */
	--block-margin: 4rem; /* Margin between content blocks */
}

/* Derive the palette from --color-primary while mixing in perceptual OKLab space. */
@supports (color: color-mix(in oklab, black, white)) {
	:root {
		--color-primary-light: color-mix(in oklab, var(--color-primary) 18%, white);
		--color-primary-mid: color-mix(in oklab, var(--color-primary) 72%, black);
		--color-primary-dark: color-mix(in oklab, var(--color-primary) 38%, black);
		--color-secondary: color-mix(in oklab, var(--color-primary) 4%, #f1f0ea);

		--font-color-dark: color-mix(in oklab, var(--color-primary) 22%, black);
		--font-color-mid: color-mix(in oklab, var(--color-primary) 60%, black);
		--font-color-inactive: color-mix(in oklab, var(--color-primary) 42%, #6b7280);
	}
}

/* [hidden="true"] {
	display: none !important;
} */

body {
	background-color: #fefefe; 
	position: relative;
}

body.mobile-menu-open {
	overflow: hidden;
	overscroll-behavior: none;
}

/* Helper classes */
.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

/* Article layout styles - moved from component */
main {
	max-width: var(--content-width, 1200px);
	margin-inline: auto;
}

#footnotes ol {
	padding-left: 0;
	list-style: none;
	counter-reset: footnote-counter;
}

#footnotes li {
	position: relative;
	padding-left: 2em; /* Space for the number and tab */
	text-indent: -0.5em; /* Pull the text back to create tab effect after number */
}

#footnotes li::before {
	counter-increment: footnote-counter;
	content: counter(footnote-counter);
	position: absolute;
	left: 0;
	width: 1.5em; /* Width for the number */
	display: inline-block;
}

/* #footnotes li {
	margin-bottom: var(--space-2);
} */

/* Custom Scroll bar */
/* Firefox scrollbar styling */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-gray-700) var(--color-gray-100);
}

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
	width: var(--scroll-bar-width);
}

::-webkit-scrollbar-track {
	background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
	background: var(--color-gray-700);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-gray-900);
}

@media (max-width: 768px) {
	:root {
		--nav-height: calc(
			(var(--font-size-xl) * 1.5 + 20px + 2rem) * 1.5
		); /* Adjusted for smaller screens */

		--block-margin: 2rem; /* Reduced margin between content blocks */
	}
}