/*
	Custom color scheme overrides for Ben T.'s portfolio
	Loaded after assets/css/main.css (Forty by HTML5 UP)
	Palette: #000000 / #0C1821 / #1B2A41 / #324A5F / #CCC9DC
*/

:root {
	--c-black: #000000;
	--c-darkest: #0C1821;
	--c-dark: #1B2A41;
	--c-mid: #324A5F;
	--c-light: #CCC9DC;
}

/* Base page */
body, html {
	background-color: var(--c-darkest);
}

#wrapper {
	background-color: var(--c-darkest);
	color: var(--c-light);
}

/* Header / nav bar */
#header,
#header.alt {
	background-color: var(--c-black);
}

/* Logo "pill" — light background behind bold text, so it needs a
   dark text color for contrast (template default text color washed
   out against the light pill). Hover effect is left as the template
   default (lightens further) since that's the behavior being kept. */
#header .logo strong {
	background-color: var(--c-light);
	color: var(--c-darkest);
}

#header .logo span {
	color: var(--c-mid);
}

#header nav a {
	color: var(--c-light);
}

/* Banner */
#banner {
	background-color: var(--c-darkest);
	background-image: none;
}

/* The template renders banner color via this overlay pseudo-element,
   not the section's own background — it was overriding our color above. */
#banner:after {
	background-color: var(--c-darkest);
	background-image: none;
	opacity: 1;
}

#banner h1,
#banner .content p {
	color: var(--c-light);
}

/* Tiles (homepage grid) */
#one.tiles article {
	background-color: var(--c-dark);
}

#one.tiles article:before {
	background-color: rgba(12, 24, 33, 0.55);
}

#one.tiles article h3,
#one.tiles article h3 a,
#one.tiles article p {
	color: var(--c-light);
}

/* General sections */
#two, #three {
	background-color: var(--c-darkest);
}

#two h2, #three h2,
#two p, #three p {
	color: var(--c-light);
}

/* Buttons */
.button {
	background-color: var(--c-mid);
	color: var(--c-light) !important;
	border: none;
}

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

.button.primary {
	background-color: var(--c-light);
	color: var(--c-darkest) !important;
}

.button.primary:hover {
	background-color: #ffffff;
}

/* Links */
a {
	color: var(--c-light);
}

/* Footer */
#footer {
	background-color: var(--c-black);
}

#footer .copyright,
#footer .copyright a,
#footer .icons a {
	color: var(--c-mid);
}

#footer .copyright {
	font-size: 0.7em;
}

#footer .icons a:hover {
	color: var(--c-light);
}

/* ==========================================================
   Off-canvas menu — right-side slide-in panel instead of the
   template's centered modal card, with its own nav styling
   ========================================================== */

#menu {
	justify-content: flex-end;
	background: rgba(6, 11, 16, 0.65);
	padding: 0;
}

#menu .inner {
	transform: translateX(100%);
	width: 21em;
	max-width: 85%;
	height: 100%;
	max-height: 100%;
	background-color: var(--c-black);
	border-left: 1px solid var(--c-mid);
	box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45);
	text-align: left;
	padding: 3.5em 2.5em 2.5em 2.5em;
}

body.is-menu-visible #menu .inner {
	transform: translateX(0);
}

#menu ul.links > li > a:not(.button) {
	position: relative;
	border-top: none;
	border-bottom: 1px solid var(--c-mid);
	font-size: 0.95em;
	letter-spacing: 0.15em;
	line-height: 3.2em;
	color: var(--c-light);
	padding-left: 0.75em;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

#menu ul.links > li:first-child > a:not(.button) {
	border-top: 1px solid var(--c-mid) !important;
}

#menu ul.links > li > a:not(.button):before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--c-light);
	transform: scaleY(0);
	transition: transform 0.2s ease;
}

#menu ul.links > li > a:not(.button):hover {
	color: #ffffff;
	padding-left: 1.25em;
}

#menu ul.links > li > a:not(.button):hover:before {
	transform: scaleY(1);
}

#menu ul.actions.stacked {
	margin-top: 1.5em;
}

#menu .close:before {
	background-image: none;
}

#menu .close:after {
	background-image: none;
	opacity: 1;
}

#menu .close {
	width: 3em;
	height: 3em;
	right: 0.5em;
	top: 0.5em;
	font-size: 0;
	line-height: 0;
	color: transparent;
	text-indent: 0;
	overflow: hidden;
}

#menu .close:before,
#menu .close:after {
	content: '';
	width: 22px;
	height: 3px;
	background-color: var(--c-light);
	top: 50%;
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%) rotate(45deg);
}

#menu .close:after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

#menu .close:hover:before,
#menu .close:hover:after {
	background-color: #ffffff;
}

/* Contact form (used on contact.html later) */
form input[type="text"],
form input[type="email"],
form textarea,
form select {
	background-color: var(--c-dark) !important;
	border-color: var(--c-mid) !important;
	color: var(--c-light) !important;
}

/* ==========================================================
   Header layout — logo / search / hamburger, bigger & spaced out
   ========================================================== */

#header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5em;
	padding: 0 2.5em;
	height: 4.75em;
	line-height: 4.75em;
	border-bottom: 2px solid var(--c-mid);
}

#header .logo {
	grid-column: 1;
	justify-self: start;
	min-width: 0;
}

#header nav {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	height: auto;
}

/* Kill the template's built-in text + icon on the old #menu link */
#header nav a[href="#menu"]:before,
#header nav a[href="#menu"]:after {
	content: none !important;
	background-image: none !important;
}

/* Custom hamburger — bigger, thicker lines, no "Menu" text */
#header nav a.menu-toggle {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 3.25em;
	height: 3.25em;
	padding: 0 !important;
	margin: 0;
}

.menu-toggle-line {
	display: block;
	width: 32px;
	height: 4px;
	border-radius: 2px;
	background-color: var(--c-light);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

#header nav a.menu-toggle:hover .menu-toggle-line {
	background-color: #ffffff;
}

/* ==========================================================
   Site search bar
   ========================================================== */

#site-search {
	grid-column: 2;
	justify-self: center;
	align-self: center;
	position: relative;
	width: 100%;
	max-width: 480px;
}

#search-form {
	display: flex;
	align-items: center;
	background-color: var(--c-darkest);
	border: 1px solid var(--c-mid);
	border-radius: 999px;
	padding: 0 1em;
	height: 2.1em;
	margin: 0;
	transition: border-color 0.2s ease;
}

#search-form:focus-within {
	border-color: var(--c-light);
}

/* Override the template's default blue focus glow (applied globally to
   all text inputs) just for the search box — the contact form keeps it. */
#search-input:focus {
	border-color: transparent;
	box-shadow: none;
}

#search-form .icon {
	color: var(--c-light);
	margin-right: 0.65em;
	font-size: 0.8em;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

#search-input {
	flex: 1 1 auto;
	background: transparent !important;
	border: none !important;
	color: var(--c-light) !important;
	height: 100%;
	padding: 0 !important;
	font-size: 0.8em;
	outline: none;
}

#search-input::placeholder {
	color: var(--c-mid);
}

#search-results {
	display: none;
	position: absolute;
	top: calc(100% + 0.5em);
	left: 0;
	right: 0;
	list-style: none;
	margin: 0;
	padding: 0.5em 0;
	background-color: var(--c-dark);
	border: 1px solid var(--c-mid);
	border-radius: 12px;
	overflow: hidden;
	z-index: 20;
}

#search-results.is-visible {
	display: block;
}

#search-results li a,
#search-results li.no-results {
	display: block;
	padding: 0.6em 1.1em;
	color: var(--c-light);
	font-size: 0.8em;
	text-decoration: none;
}

#search-results li a:hover {
	background-color: var(--c-mid);
	color: #ffffff;
}

#search-results li.no-results {
	color: var(--c-mid);
	font-style: italic;
}

@media screen and (max-width: 736px) {
	#header {
		grid-template-columns: auto 1fr auto;
		gap: 0.75em;
		padding: 0 1em;
		height: 3.5em;
		line-height: 3.5em;
	}

	#header .logo {
		padding: 0 0.75em !important;
	}

	#header .logo strong {
		font-size: 0.8em;
	}

	#site-search {
		max-width: none;
	}

	#search-form {
		height: 2em;
		padding: 0 0.85em;
	}

	#search-input {
		font-size: 0.75em;
	}

	#header nav a.menu-toggle {
		width: 2.5em;
		height: 2.5em;
	}

	.menu-toggle-line {
		width: 26px;
		height: 3px;
	}
}

@media screen and (max-width: 480px) {
	#header {
		gap: 0.5em;
		padding: 0 0.75em;
	}

	#header .logo {
		padding: 0 0.5em !important;
	}
}

/* ==========================================================
   About page profile photo — two-column layout, text left,
   photo pinned to the right, guaranteed side-by-side.
   ========================================================== */

.about-bio {
	display: flex;
	align-items: flex-start;
	gap: 2.5em;
}

.about-text {
	flex: 1 1 auto;
	min-width: 0;
}

.about-photo {
	flex: 0 0 240px;
	width: 240px;
	border-radius: 16px;
	overflow: hidden;
	border: 3px solid var(--c-mid);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.about-photo img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 736px) {
	.about-bio {
		flex-direction: column-reverse;
		align-items: center;
		gap: 1.5em;
	}

	.about-photo {
		flex: 0 0 auto;
		width: 220px;
		max-width: 60%;
	}

	.about-text {
		width: 100%;
	}
}

/* ==========================================================
   "Beyond the Classroom" spotlight cards (about.html)
   ========================================================== */

.spotlight-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
	margin-top: 1em;
}

@media screen and (max-width: 736px) {
	.spotlight-grid {
		grid-template-columns: 1fr;
	}
}

.spotlight-card {
	background-color: var(--c-dark);
	border-radius: 12px;
	padding: 2em;
	text-align: center;
}

.spotlight-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 7em;
	margin-bottom: 1em;
}

.spotlight-image img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	border-radius: 0;
}

.spotlight-card h3 {
	color: var(--c-light);
	margin-bottom: 0.5em;
}

.spotlight-card p {
	color: var(--c-light);
	font-size: 0.9em;
	text-align: left;
	margin: 0;
}

/* ==========================================================
   Homepage tiles — alternating contrast colors, no images
   ========================================================== */

#one.tiles article {
	background-image: none !important;
}

#one.tiles article.color-a {
	background-color: #E76F51;
}

#one.tiles article.color-b {
	background-color: #2A9D8F;
}

#one.tiles article.color-c {
	background-color: #E9C46A;
}

#one.tiles article.color-d {
	background-color: #6A4C93;
}

#one.tiles article.color-e {
	background-color: #EF476F;
}

#one.tiles article.color-f {
	background-color: #118AB2;
}

#one.tiles article.color-a h3,
#one.tiles article.color-a h3 a,
#one.tiles article.color-a p,
#one.tiles article.color-b h3,
#one.tiles article.color-b h3 a,
#one.tiles article.color-b p,
#one.tiles article.color-c h3,
#one.tiles article.color-c h3 a,
#one.tiles article.color-c p,
#one.tiles article.color-d h3,
#one.tiles article.color-d h3 a,
#one.tiles article.color-d p,
#one.tiles article.color-e h3,
#one.tiles article.color-e h3 a,
#one.tiles article.color-e p,
#one.tiles article.color-f h3,
#one.tiles article.color-f h3 a,
#one.tiles article.color-f p {
	color: #ffffff;
}

/* ==========================================================
   Projects page — simple stacked project cards
   ========================================================== */

.project-list {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	margin-top: 1.5em;
}

.project-card {
	background-color: var(--c-dark);
	border-radius: 12px;
	padding: 2em;
}

.project-card h2 {
	color: var(--c-light);
	margin-bottom: 0.5em;
	font-size: 1.3em;
}

.project-card p {
	color: var(--c-light);
	margin-bottom: 1.25em;
}

.project-card .actions {
	margin-bottom: 0;
}