/* Import Fira Code from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;600;700&display=swap');
/* Base typography */
html, body {
	height: 100%;
}

/* Use border-box so width + padding don't produce unexpected overflow */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
    
    place-items: center;
	margin: 0;
	font-family: 'Fira Code', monospace;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Small sensible defaults */
main {
	padding: 1rem;
}

/* Profile row: image left, centered text */
.profile-row {
  display: flex;
  align-items: center;    /* vertical alignment between image and text */
  justify-content: center; /* center the group horizontally */
  gap: 20px;
  flex-wrap: wrap;        /* stack on very narrow screens */
}

.avatar {
	width: 200px;
	height: 200px; 
	object-fit: cover;
	flex: 0 0 auto;
	border-radius: 0;
	box-shadow: 0 6px 18px rgba(0,0,0,0.7); 
	margin-left: 4rem;
}

.text-block { text-align: left; max-width: 40ch; margin: 0; }
.about-text {
	max-width: 60ch;
	margin: 1rem auto; /* center and remove forced overflow */
	padding: 0 1rem;   /* breathing room on small screens */
	text-align: left;
}

/* Buttons */
.action-buttons { display:flex; gap: 6rem; justify-content: center; margin-top: 2.5rem; }
.btn {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	text-decoration: bold;
	color: var(--primary-red);
	background: #e6e6e6; /* light gray */
	border: none; /* no border */
}

.btn.primary {
	background: #9e9e9e; /* darker gray for primary */
	color: #fff;
	border: none;
}

.btn:hover { transform: translateY(-2px); filter: brightness(0.98); }

/* legacy inline helpers (if used elsewhere) */
.inline-img { width: 64px; height: auto; }
.inline-heading { font-size: clamp(1.25rem, 3.5vw, 2rem); }
.inline-text { margin: 0; }

/* Subtle gray grid background */
:root {
	--grid-size: 32px;       /* spacing between grid lines */
	--grid-thin: 1px;       /* thin lines */
	--grid-thick: 1px;      /* thicker accent line if desired */
	--grid-color: rgba(0,0,0,0.04);
	--grid-color-2: rgba(0,0,0,0.06);
	--primary-red: #981d1d; /* light red */
}

body {
	/* combine two repeating gradients: thin lines and slightly stronger every Nth line */
	background-image:
		repeating-linear-gradient(0deg, var(--grid-color) 0, var(--grid-color) var(--grid-thin), transparent var(--grid-thin), transparent var(--grid-size)),
		repeating-linear-gradient(90deg, var(--grid-color) 0, var(--grid-color) var(--grid-thin), transparent var(--grid-thin), transparent var(--grid-size));
	background-size: var(--grid-size) var(--grid-size);
	background-attachment: fixed;
}


/* Optional: slightly stronger lines every 4 cells for visual rhythm */
@media (min-width: 600px) {
	:root { --grid-size: 36px; }
	body {
		background-image:
			repeating-linear-gradient(0deg, var(--grid-color) 0, var(--grid-color) var(--grid-thin), transparent var(--grid-thin), transparent calc(var(--grid-size) * 1)),
			repeating-linear-gradient(90deg, var(--grid-color) 0, var(--grid-color) var(--grid-thin), transparent var(--grid-thin), transparent calc(var(--grid-size) * 1));
	}
}

/* Navbar styles */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	background: #111;
	color: #fff;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	z-index: 1000;
}

.site-nav {
	width: 100%;
	background: #efefef; /* light gray background */
	padding: 1rem 2rem;
}
.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1rem;
	justify-content: left; /* center links horizontally */
}
.site-nav a {
	text-decoration: none;
	color: var(--primary-red); /* light red */
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	transition: background .15s ease, color .15s ease;
}
.site-nav a:hover,
.site-nav a:focus {
	background: rgba(214,102,102,0.08);
}

/* Social icon links (contact page) */
.social-links { display:flex; gap: 1rem; margin-top: 1rem; }
.social-link svg { width: 36px; height: 36px; display:block; color: var(--primary-red); }
.social-link:hover svg, .social-link:focus svg { filter: brightness(0.9); transform: translateY(-2px); }

/* Responsive: stack nav links on narrow viewports */
@media (max-width: 420px) {
	.site-nav ul { flex-direction: column; gap: 0.5rem; align-items: center; }
	.site-nav { padding: .75rem 1rem; }
}

/* Projects grid */
.projects-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
	justify-content: center; /* center the row */
}
.project-tile {
	display: block;
	width: 265px; /* tile matches image width exactly */
	background: rgba(255,255,255,0.6);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.project-thumb { width: 100%; height: 170px; overflow: hidden; background: #ddd; display:flex; align-items:center; justify-content:center; }
.project-thumb img { width: 265px; height: 170px; object-fit: cover; display:block; }
.project-label { padding: 0.75rem; font-weight: 600; }