@charset "UTF-8";

/* Theme Variables - matches styles.css for consistency */
:root {
	/* Light Theme (default) */
	--bg-primary: #fff;
	--bg-secondary: #eddbcd;
	--text-primary: #242424;
	--text-secondary: #3e3e3e;
	--text-tertiary: #666;
	--text-inverse: #fff;
	--accent-primary: #11a677;
	--accent-hover: #11a677;
	--border-color: #11a677;
	--border-light: #ccc;
	--shadow-color: #d1d2cf;
	--highlight-bg: #ff9;
	--highlight-text: #000;
	--link-color: #11a677;
	--link-hover: #242424;
	--header-bg: #11a677;

	/* Transition for smooth theme changes */
	transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] {
	/* Dark Theme */
	--bg-primary: #1a1a1a;
	--bg-secondary: #2d2d2d;
	--text-primary: #ffffff;
	--text-secondary: #d1d1d1;
	--text-tertiary: #b0b0b0;
	--text-inverse: #1a1a1a;
	--accent-primary: #11a677;
	--accent-hover: #0d8a5f;
	--border-color: #11a677;
	--border-light: #444;
	--shadow-color: #0a0a0a;
	--highlight-bg: #ffcc00;
	--highlight-text: #1a1a1a;
	--link-color: #11a677;
	--link-hover: #ffffff;
	--header-bg: #11a677;
}

@media screen and (min-width: 0px) and (max-width: 625px) {
	#header {
		height: 0px !important;
		margin-bottom: 0px !important;
	}
	.index_sidebar {
		position: relative !important;
		float: left !important;
		width: 100% !important;
	}
	.index_sidebar2 {
		width: 100% !important;
	}
	.index_body {
		margin-left: 0 !important;
		float: left !important;
		width: 100% !important;
	}
	#content {
		width: 90% !important;
		margin: 0 5% !important;
	}
	.index_body img {
		width: 100% !important;
	}
	.projects a {
		width: 100% !important;
		margin-bottom: 2em !important;
	}
	.projects .horiz_rule_work {
		border-top: none !important;
		padding-top: -10px !important;
		margin-top: -15px !important;
	}
	.project_left_jmc,
	.project_right_jmc {
		width: 100% !important;
	}
	.project_right_jmc {
		margin-left: 0 !important;
	}

	* {
		margin: 0;
		padding: 0;
	}
	body {
		margin: 0 auto;
		background-color: var(--bg-primary);
		background-image: url(images/bg-pattern.png);
		background-repeat: repeat-x;
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	h1 {
		font-family: "franklin-gothic-ext-comp-urw-1",
			"franklin-gothic-ext-comp-urw-2";
		font-size: 55px;
		line-height: 55px;
		text-transform: uppercase;
		margin: 0;
		padding: 0;
		color: var(--accent-primary);
	}

	p {
		font-family: mr-eaves-modern, sans-serif;
		font-size: 14px;
		line-height: 18px;
		color: var(--text-tertiary);
		padding-top: 0;
		margin-top: 5px;
		padding-bottom: 0;
		margin-bottom: 3px;
	}

	.content a {
		font-family: mr-eaves-modern, sans-serif;
		font-size: 14px;
		color: var(--link-color);
		padding-top: 0;
		margin-top: 5px;
	}

	a {
		text-decoration: none;
		color: var(--link-color);
		border: none;
	}

	img {
		border: none;
	}

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

	#content {
		width: 80%;
		margin: 0 10%;
		padding-top: 40px;
		float: left;
	}

	.index_sidebar {
		border-top: 3px solid var(--border-light);
		width: 30%;
		float: left;
		padding-top: 0px;
	}

	.index_body {
		border-top: 3px solid var(--border-light);
		width: 65%;
		margin-left: 35%;
		padding-top: 0px;
	}

	.horiz_rule {
		border-top: thin solid var(--border-color);
		padding-bottom: 14px;
	}

	h2 {
		font-family: "franklin-gothic-ext-comp-urw-1",
			"franklin-gothic-ext-comp-urw-2";
		color: var(--accent-primary);
		font-size: 35px;
		text-transform: uppercase;
		padding-bottom: 0px;
		margin-bottom: 20px;
		margin-top: 10px;
		line-height: 35px;
	}

	.project-internal img {
		width: 100%;
		margin-bottom: 15px;
	}

	.project_left_jmc {
		width: 40%;
		float: left;
	}
	.project_left_jmc img {
		width: 100%;
	}
	.project_right_jmc {
		margin-left: 40%;
		width: 60%;
	}
}

* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0 auto;
	background-color: var(--bg-primary);
	transition: background-color 0.3s ease, color 0.3s ease;
}

#header {
	background-color: var(--header-bg);
	height: 15px;
	margin-top: 0px;
	padding-top: 0px;
	margin-bottom: 15px;
}

p {
	font-family: mr-eaves-modern, sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: var(--text-tertiary);
	padding-top: 0;
	margin-top: 5px;
	padding-bottom: 0;
	margin-bottom: 3px;
}

.content a {
	font-family: mr-eaves-modern, sans-serif;
	font-size: 14px;
	color: var(--link-color);
	padding-top: 0;
	margin-top: 5px;
}

.sidebar {
	border-top: 3px solid var(--border-light);
	width: 280px;
	float: left;
	padding-top: 0px;
}

a {
	font-family: mr-eaves-modern, sans-serif;
	text-decoration: none;
	color: var(--link-color);
	border: none;
}

img {
	border: none;
}

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

#content {
	width: 80%;
	margin: 0 10%;
	padding-top: 40px;
	float: left;
}

.index_sidebar {
	width: 30%;
	float: left;
	padding-top: 0px;
}
.index_sidebar2 {
	width: 30%;
	float: left;
	padding-top: 0px;
}
.index_sidebar2 img {
	width: 100%;
}
.index_sidebar h3 {
	padding-top: 8px;
}
.index_body {
	width: 65%;
	margin-left: 35%;
	padding-top: 0px;
}

.proj_rule {
	border-top: 3px solid var(--border-light);
	padding-top: 10px;
}
.horiz_rule {
	border-top: thin solid var(--border-color);
	padding-bottom: 14px;
}

.date_posted_rule {
	border-top: thin solid var(--border-light);
	padding-bottom: 7px;
	margin-top: 15px;
	margin-bottom: 25px;
}

.horiz_rule_work {
	border-top: thin solid var(--border-color);
	width: 100%;
	padding-top: 10px;
	margin-top: 15px;
}
.pad_ten {
	padding-bottom: 10px;
}

h2 {
	text-transform: uppercase;
	font-family: tablet-gothic-compressed, "trumpgothicpro", sans-serif;
	font-weight: bold;
	font-size: 2.5em;
	color: var(--text-primary);
}

h3 {
	font-family: tablet-gothic-compressed, "trumpgothicpro", sans-serif;
	color: var(--text-primary);
	font-size: 1.5em;
	text-transform: uppercase;
	margin-bottom: 0px;
	margin-top: 0px;
}

h4 {
	font-size: 1.2em;
	margin: 5px 0;
	color: var(--text-secondary);
	font-family: mr-eaves-modern, sans-serif;
	font-weight: 400;
}

.grey {
	font-family: mr-eaves-modern, sans-serif;
	color: var(--text-tertiary);
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 0px;
	margin-top: 5px;
}

.theme-toggle-btn {
	font-family: tablet-gothic-compressed, "trumpgothicpro", sans-serif;
	color: var(--text-primary);
	background-color: transparent;
	border: 2px solid var(--border-color);
	padding: 8px 16px;
	font-size: 1.2em;
	text-transform: uppercase;
	cursor: pointer;
	margin-top: 10px;
	transition: all 0.3s ease;
	display: inline-block;
}

.theme-toggle-btn:hover {
	background-color: var(--accent-primary);
	color: var(--text-inverse);
}

/* Lightbulb Icon Toggle for Child Pages */
.theme-toggle-icon {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.5em;
	padding: 8px;
	margin-top: 10px;
	transition: transform 0.2s ease, color 0.3s ease;
	display: inline-block;
	line-height: 1;
	color: var(--accent-primary);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.theme-toggle-icon:hover {
	transform: scale(1.15);
}

.theme-toggle-icon:active {
	transform: scale(0.95);
}

.theme-toggle-icon:focus {
	outline: none;
	box-shadow: none;
}

.theme-toggle-icon i {
	transition: color 0.3s ease;
	pointer-events: none;
}

/* When dark mode is active, the icon will have reduced opacity via JS */

.project-internal img {
	width: 100%;
	margin-bottom: 15px;
}
.project_left img,
.project_right img {
	height: 100%;
}
.project_left {
	width: 40%;
	float: left;
}
.project_left,
.project_right,
.project_left_big,
.project_right_small {
	height: 15em;
	overflow: hidden;
	margin-bottom: 15px;
	background-repeat: no-repeat;
	background-size: cover;
}
.project_left_jmc {
	width: 40%;
	float: left;
}
.project_left_jmc img {
	width: 100%;
}
.project_right_jmc {
	margin-left: 40%;
	width: 60%;
}
.project_left_cci-commons {
	width: 35%;
	float: left;
}
.project_left_cci-commons img {
	width: 100%;
}
.project_right_cci-commons {
	margin-left: 40%;
	width: 60%;
}
.cci-commons img {
	border: 1px solid var(--text-secondary);
	margin-bottom: 2em;
}
.project_right {
	width: 60%;
	border-left: 15px solid var(--bg-primary);
	float: right;
	margin-left: -15px;
}
.project_left_big {
	width: 60%;
	float: left;
}
.project_right_small {
	width: 40%;
	float: right;
	border-left: 15px solid var(--bg-primary);
	margin-left: -15px;
}