/*
 * Custom overrides for emmanuel.oladokun.co.uk
 * Layered on top of Prologue (HTML5 UP)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Typography ─────────────────────────────────────────── */

body {
	font-family: 'Inter', 'Source Sans Pro', sans-serif;
	font-size: 17pt;
	color: #555;
	background: #f8f8f8;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	color: #222;
}

h2 { letter-spacing: -0.5px; }
h3 { font-size: 1.2em; margin-bottom: 0.6em; color: #333; }

strong, b { font-weight: 600; color: #333; }

/* ── Sidebar ─────────────────────────────────────────────── */

#header {
	background: #0f0f13;
	border-right: none;
}

#header .top #logo h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 1.1em;
	color: #fff;
	letter-spacing: -0.3px;
}

#header .top #logo p {
	color: #888;
	font-size: 0.65em;
	line-height: 1.5em;
	font-weight: 400;
}

#header .top nav ul li a {
	color: #aaa;
	font-size: 0.75em;
	font-weight: 400;
	border-bottom: none;
	transition: color 0.2s ease;
}

#header .top nav ul li a:hover,
#header .top nav ul li a.active {
	color: #fff;
}

#header .top nav ul li a span {
	color: inherit;
}

/* Demo link highlight in sidebar */
#header .top nav ul li a.demo-link {
	color: #6ee7b7;
}

#header .top nav ul li a.demo-link:hover {
	color: #a7f3d0;
}

#header .bottom .icons a {
	color: #666;
	border-bottom: none;
	transition: color 0.2s ease;
}

#header .bottom .icons a:hover {
	color: #fff;
}

/* ── Main content area ───────────────────────────────────── */

#main {
	background: #f8f8f8;
}

/* ── Intro section ───────────────────────────────────────── */

#top.cover {
	background: #0f0f13;
}

#top.cover header h2.alt {
	color: #ccc;
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	line-height: 1.5em;
}

#top.cover header h2.alt strong {
	color: #fff;
	font-weight: 600;
}

#top.cover header > p {
	color: #888;
	font-size: 0.85em;
}

/* ── Buttons ─────────────────────────────────────────────── */

.button {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff !important;
	border-radius: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 0.8em;
	font-weight: 500;
	letter-spacing: 0.05em;
	padding: 0.7em 2em;
	transition: background 0.2s ease, border-color 0.2s ease;
	border-bottom: 1px solid rgba(255,255,255,0.25) !important;
}

.button:hover {
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.5);
	color: #fff !important;
}

.button.demo-cta {
	background: #18181b;
	border: 1px solid #3f3f46;
	color: #e4e4e7 !important;
	border-bottom: 1px solid #3f3f46 !important;
	font-size: 0.75em;
	padding: 0.6em 1.5em;
	border-radius: 6px;
}

.button.demo-cta:hover {
	background: #27272a;
	border-color: #71717a;
	color: #fff !important;
}

/* ── Sections ────────────────────────────────────────────── */

section.two {
	background: #f8f8f8;
}

section.three {
	background: #fff;
}

/* ── Projects list ───────────────────────────────────────── */

.projects-list {
	list-style: none;
	padding: 0;
	margin-bottom: 1.5em;
}

.projects-list li {
	padding: 0.75em 1em;
	margin-bottom: 0.5em;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 0.82em;
	line-height: 1.6em;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.projects-list li:hover {
	border-color: #d1d5db;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.projects-list li a {
	border-bottom: none;
}

.projects-list li a strong {
	color: #111;
	font-weight: 600;
}

.project-desc {
	color: #6b7280;
}

.projects-column-title {
	font-size: 0.85em;
	font-weight: 600;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.75em;
}

/* Live demo badge */
.live-badge {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72em;
	font-weight: 500;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	border-radius: 9999px;
	padding: 0.1em 0.55em;
	margin-left: 0.4em;
	vertical-align: middle;
	text-decoration: none;
	white-space: nowrap;
}

.live-badge:hover {
	background: #d1fae5;
	border-color: #6ee7b7;
	color: #065f46 !important;
}

/* Demo callout box */
.demo-callout {
	background: #18181b;
	border: 1px solid #3f3f46;
	border-radius: 10px;
	padding: 1.25em 1.5em;
	margin: 1.5em 0 2em 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	flex-wrap: wrap;
	gap: 1em;
}

.demo-callout p {
	margin: 0;
	color: #a1a1aa;
	font-size: 0.78em;
	line-height: 1.5em;
}

.demo-callout strong {
	color: #e4e4e7;
	font-weight: 600;
}

/* ── Research summary (publications-summary mirrors projects-list styling) ── */

#publications-summary li a {
	border-bottom: none;
}

#publications-summary li a:hover {
	color: #E27689;
}

.overview-year {
	color: #9ca3af;
	font-size: 0.85em;
}

.overview-loading {
	color: #9ca3af;
	font-style: italic;
}

.overview-more-link {
	font-size: 0.78em;
	margin-top: -0.5em;
	margin-bottom: 1em !important;
}

.overview-more-link a {
	color: #9ca3af;
	border-bottom: none !important;
}

.overview-more-link a:hover {
	color: #555 !important;
}

/* ── Equal-height overview columns ───────────────────────── */

.overview-columns-row {
	align-items: stretch !important;
}

.overview-columns-row > [class*="col-"] {
	display: flex !important;
	flex-direction: column;
}

/* Engineering list grows to fill column height */
.projects-list--fill {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
}

/* Each engineering card expands to share the space equally */
.projects-list--fill li {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4em;
	text-align: center;
	padding-top: 0.35em;
	padding-bottom: 0.35em;
}

/* Sub-section titles within Engineering column */
.projects-subcolumn-title {
	font-size: 0.72em;
	font-weight: 600;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	flex-shrink: 0;
}

/* ── Item logos (inline) ──────────────────────────────────── */

.item-gh-icon {
	font-size: 0.85em;
	color: #374151;
	opacity: 0.7;
	flex-shrink: 0;
}

.item-logos {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	flex-shrink: 0;
}

.tool-logos,
.org-logos {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}

.logos-sep {
	color: #d1d5db;
	font-size: 0.85em;
}

.item-logo {
	height: 15px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	opacity: 0.8;
}

.item-logo--org {
	height: 13px;
	opacity: 0.7;
}

/* ── Publications list ───────────────────────────────────── */

#publications-list {
	font-size: 0.82em;
	line-height: 1.7em;
}

#publications-list li {
	padding: 0.6em 0;
	border-bottom: 1px solid #f0f0f0;
	color: #555;
}

#publications-list li:last-child {
	border-bottom: none;
}

/* ── Photo grid ──────────────────────────────────────────── */

.item {
	margin-bottom: 1.5em;
}

.item .image.fit img {
	border-radius: 8px;
}

.item header h3 {
	font-size: 0.72em;
	font-weight: 500;
	color: #6b7280;
	margin-top: 0.4em;
	text-align: center;
}

/* ── Skills ──────────────────────────────────────────────── */

.skills-text {
	font-size: 0.82em;
	line-height: 1.8em;
	color: #555;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1em 1.25em;
}

/* ── Production bullets ──────────────────────────────────── */

#portfolio ul:not(.projects-list):not(#publications-list):not(.icons) {
	list-style: none;
	padding-left: 0;
	font-size: 0.82em;
	line-height: 1.8em;
}

#portfolio ul:not(.projects-list):not(#publications-list):not(.icons) li {
	padding-left: 1em;
	position: relative;
	margin-bottom: 0.5em;
}

#portfolio ul:not(.projects-list):not(#publications-list):not(.icons) li::before {
	content: '→';
	position: absolute;
	left: 0;
	color: #9ca3af;
}

/* ── Footer ──────────────────────────────────────────────── */

#footer {
	background: #0f0f13;
	border-top: none;
}

#footer .copyright li {
	color: #555;
	font-size: 0.72em;
}

#footer .copyright a {
	color: #555;
	border-bottom: none;
}