/* ============================================
   DESIGN TOKENS
   ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&family=Source+Sans+Pro:wght@200;300;400;600&display=swap");

:root {
	/* Core Colors */
	--color-dark: #1a1a1a;
	--color-white: #f5f5f0;

	/* Semantic Text */
	--color-text: var(--color-dark);
	--color-text-muted: rgba(26, 26, 26, 0.6);
	--color-text-secondary: rgba(26, 26, 26, 0.75);
	--color-text-white: var(--color-white);
	
	/* Backgrounds */
	--color-bg: var(--color-white);
	--color-bg-subtle: rgba(26, 26, 26, 0.04);
	--color-bg-gray-light: rgba(26, 26, 26, 0.02);
	--color-bg-gray-medium: rgba(26, 26, 26, 0.06);
	--color-bg-overlay: rgba(26, 26, 26, 0.5);
	--color-bg-overlay-light: rgba(245, 245, 240, 0.85);
	--color-bg-overlay-menu: rgba(245, 245, 240, 0.97);
	
	/* Borders */
	--color-border: rgba(26, 26, 26, 0.25);
	--color-border-light: rgba(26, 26, 26, 0.18);

	/* Typography */
	--font-body: 'Source Sans Pro', sans-serif;
	--font-heading: 'Montserrat', sans-serif;
	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.2rem;
	--font-size-xl: 1.5rem;
	--font-size-xxl: 2.5rem;
	--font-size-logo: 25px;

	/* Spacing */
	--space-xs: 5px;
	--space-sm: 10px;
	--space-md: 12px;
	--space-lg: 20px;
	--space-xl: 24px;
	--space-xxl: 30px;
	--space-gutter: 2%;
	--space-percent-md: 5%;

	/* Section Gaps */
	--section-gap-lg: clamp(80px, 12vw, 120px);
	--section-gap-md: clamp(60px, 8vw, 100px);
	
	/* Layout */
	--border-radius-sm: 5px;
	--border-radius-md: 10px;
	--border-width: 1px;
}

/* ============================================
   GLOBAL RESETS & BASE STYLES
   ============================================ */
html {
	background-color: var(--color-bg);
	scroll-behavior: smooth;
}

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

body {	
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	position: relative;
	z-index: -2;
}	

p {
	line-height: 1.5;
}

a {
	color: var(--color-dark);
	text-decoration: none;
	transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
	opacity: 0.7;
	text-decoration: none;
}

button,
input[type="button"],
input[type="submit"] {
	transition: opacity 0.2s ease, transform 0.2s ease;
}

button:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
	opacity: 0.7;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
}

#mainwrapper {
	width: 100%;
	min-height: 100vh;
	background-color: var(--color-bg);
}

body #content {
	margin-top: var(--space-lg);
	padding-right: var(--space-gutter);
	padding-left: var(--space-gutter);	
}

.topdotLogo {
	height: 50px;
}

/* Reset list styles for navigation */
nav ul {
	padding-left: 0;
	margin: 0;
}

nav ul li {
	list-style-type: none;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Breadcrumbs (used across blog + project detail pages) */
.breadcrumb-container {
	max-width: 100%;
	overflow: hidden;
	padding-left: var(--space-gutter);
	margin-top: 15px;
	margin-bottom: 15px;
}

.breadcrumb {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	font-size: 16px;
}

.breadcrumb li {
	margin-right: 10px;
}

.breadcrumb li:last-child {
	margin-right: 0;
}

.breadcrumb li a {
	color: var(--color-text-secondary);
	text-decoration: none;
}

.breadcrumb li a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.breadcrumb li span {
	color: var(--color-text-secondary);
}

/* Current page emphasis */
.breadcrumb li[aria-current="page"] span {
	color: var(--color-dark);
	border-bottom: 1px solid rgba(26, 26, 26, 0.35);
}

/* ============================================
   GRAIN TEXTURE OVERLAY
   ============================================ */
html::after {
	content: "";
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 200px 200px;
	opacity: 0.025;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 9990;
}

@media (prefers-reduced-motion: reduce) {
	html::after {
		display: none;
	}
}