/* ── Theme variables ────────────────────────────────────── */
:root {
	/* Light mode (default) */
	--bg:               #ffffff;
	--bg-preload:       #ffffff;
	--surface:          rgba(255, 255, 255, 0.92);
	--close-border:     rgba(15, 46, 43, 0.45);
	--close-text:       #0f2e2b;
	--close-hover-bg:   rgba(15, 46, 43, 0.08);
	--close-active-bg:  rgba(15, 46, 43, 0.18);
}

body.dark-mode {
	--bg:               #0f2e2b;
	--bg-preload:       #0f2e2b;
	--surface:          rgba(15, 46, 43, 0.93);
	--close-border:     rgba(255, 255, 255, 0.50);
	--close-text:       #ffffff;
	--close-hover-bg:   rgba(255, 255, 255, 0.075);
	--close-active-bg:  rgba(255, 255, 255, 0.175);
}

/* ── Base theming ───────────────────────────────────────── */
body {
	background: var(--bg);
	transition: background-color 0.4s ease;
}

/* Dark mode: restore the original green gradient bg */
body.dark-mode #bg:after {
	background-image: linear-gradient(to bottom, #163a35, #0f2e2b);
}

/* Light mode: cover the bg image and dark overlay with white */
body:not(.dark-mode) #bg:before {
	background-image: none;
	background-color: #ffffff;
}

body.is-preload #bg:before {
	background-color: var(--bg-preload);
}

/* Light mode: remove dark radial vignette from behind the header */
body:not(.dark-mode) #header {
	background-image: none;
}

/* ── Light mode: text colors (override main.css white-on-dark) ── */
body:not(.dark-mode) #header .content .inner h1,
body:not(.dark-mode) #header .content .inner p,
body:not(.dark-mode) #main article h2.major,
body:not(.dark-mode) #main article p,
body:not(.dark-mode) #main article ul,
body:not(.dark-mode) #main article ol,
body:not(.dark-mode) #main article strong,
body:not(.dark-mode) #main article a { color: #0f2e2b; }

body:not(.dark-mode) #main article h2.major::after { background-color: rgba(15, 46, 43, 0.40); }

body:not(.dark-mode) #footer p,
body:not(.dark-mode) #footer a { color: #0f2e2b; }
body:not(.dark-mode) #footer a { border-bottom-color: rgba(15, 46, 43, 0.35); }

/* ── Footer social icons ────────────────────────────────── */
ul.footer-social {
	list-style: none !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 20px;
	margin: 0 0 0.75rem !important;
	padding: 0 !important;
}
ul.footer-social li {
	padding: 0 !important;
}
ul.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: rgba(255, 255, 255, 0.75) !important;
	font-size: 1rem;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	text-decoration: none;
}
@media (hover: hover) {
	ul.footer-social a:hover {
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(255, 255, 255, 0.70) !important;
		border-bottom-color: rgba(255, 255, 255, 0.70) !important;
		color: #ffffff !important;
	}
}
body:not(.dark-mode) ul.footer-social a {
	border-color: rgba(15, 46, 43, 0.35) !important;
	border-bottom-color: rgba(15, 46, 43, 0.35) !important;
	color: rgba(15, 46, 43, 0.70) !important;
}
@media (hover: hover) {
	body:not(.dark-mode) ul.footer-social a:hover {
		background: rgba(15, 46, 43, 0.08);
		border-color: rgba(15, 46, 43, 0.65) !important;
		border-bottom-color: rgba(15, 46, 43, 0.65) !important;
		color: #0f2e2b !important;
	}
}

/* ── Hide header connector lines (logo→banner, banner→nav) ── */
#header > *:before { display: none !important; }

/* ── Light mode: header decorative borders ── */
body:not(.dark-mode) #header .logo          { border-color: #0f2e2b; }
body:not(.dark-mode) #header .content       { border-color: #0f2e2b; }
body:not(.dark-mode) #header nav ul         { border-color: rgba(15, 46, 43, 0.50); }
body:not(.dark-mode) #header nav ul li      { border-left-color: rgba(15, 46, 43, 0.50);
                                              border-top-color:  rgba(15, 46, 43, 0.50); }
body:not(.dark-mode) #header nav ul li a:hover  { background-color: rgba(15, 46, 43, 0.08) !important; }
body:not(.dark-mode) #header nav ul li a:active { background-color: rgba(15, 46, 43, 0.16) !important; }

/* ── Light-mode color for the center divider line ─────────── */
body:not(.dark-mode) #header nav.use-middle:after { background: rgba(15, 46, 43, 0.50); }

/* ── Nav button colors ──────────────────────────────────── */
#header nav ul li a { white-space: nowrap; }

/* Scope/utility — light mode (default) */
nav a[href="#stack"],
nav a[href="#automation"],
nav a[href="#ai"],
nav a[href="#digital"] {
	background-color: rgba(15, 46, 43, 0.07);
	color: #0f2e2b;
}

/* Highlight buttons (Resume/Contact) — light mode */
nav a[href="/resume/"],
nav a[href="/aboutme/"] {
	background-color: rgba(15, 46, 43, 0.75);
	color: #ffffff;
}

/* Scope/utility — dark mode */
body.dark-mode nav a[href="#stack"],
body.dark-mode nav a[href="#automation"],
body.dark-mode nav a[href="#ai"],
body.dark-mode nav a[href="#digital"] {
	background-color: rgba(255, 255, 255, 0.05);
	color: #ffffff;
}

/* Highlight buttons — dark mode */
body.dark-mode nav a[href="/resume/"],
body.dark-mode nav a[href="/aboutme/"] {
	background-color: rgba(255, 255, 255, 0.50);
	color: #0f2e2b;
}

/* ── Article panels ─────────────────────────────────────── */
#main article {
	background-color: var(--surface);
	border-radius: 12px;
}

/* Banner-style image: wide crop, rounded top, fades into panel */
#main article .image.main {
	position: relative;
	aspect-ratio: 16 / 6;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}
#main article .image.main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
#main article .image.main::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 55%;
	background: linear-gradient(to bottom, transparent, var(--surface));
	pointer-events: none;
}

#main article h2.major {
	max-width: 100%;
	white-space: normal;
	word-break: break-word;
}

/* ── Close button ───────────────────────────────────────── */
#main article .close {
	position: static;
	display: block;
	width: auto;
	height: auto;
	text-indent: 0;
	overflow: visible;
	white-space: normal;
	margin: 2rem auto 0;
	padding: 0.6rem 2rem;
	border: 1px solid var(--close-border);
	border-radius: 4px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 0.8rem;
	color: var(--close-text);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}
#main article .close:before { display: none; }
#main article .close:hover  { background-color: var(--close-hover-bg); }
#main article .close:active { background-color: var(--close-active-bg); }

/* ── Page transition overlay ────────────────────────────── */
#page-transition {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease-in-out;
	z-index: 9999;
}
#page-transition.active {
	opacity: 1;
	pointer-events: all;
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9998;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	background: rgba(255, 255, 255, 0.80);
	border-bottom: 1px solid rgba(15, 46, 43, 0.12);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition: background 0.4s, border-color 0.4s;
}
body.dark-mode .topbar {
	background: rgba(11, 31, 29, 0.85);
	border-bottom-color: rgba(255, 255, 255, 0.10);
}
.topbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: #0f2e2b !important;
	background: transparent;
	border: 1px solid rgba(15, 46, 43, 0.30);
	box-shadow: none;
	border-radius: 6px;
	padding: 5px 14px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
	line-height: 1;
}
body.dark-mode .topbar-btn {
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.30);
}
.topbar-btn:hover {
	background: rgba(15, 46, 43, 0.10);
	border-color: rgba(15, 46, 43, 0.55);
	transform: translateY(-1px);
}
body.dark-mode .topbar-btn:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.55);
}
.topbar-btn.active {
	background: rgba(15, 46, 43, 0.15);
	border-color: rgba(15, 46, 43, 0.55);
}
body.dark-mode .topbar-btn.active {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.55);
}

/* ── Speed up the bg-layer transition ───────────────────── */
#bg:before {
	transition-duration: 0.4s !important;
	transition-delay:    0s   !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width: 980px) {
	#header .content p br { display: inline; }
}

/* ── Mobile: single-screen layout (≤480px) ──────────────── */
@media screen and (max-width: 480px) {

	/* Lock page — no scroll on home screen */
	html { overflow-x: hidden; }
	body:not(.is-article-visible) { overflow: hidden; }

	/* Topbar — tighter, height ≈ 35px */
	.topbar { padding: 6px 16px; }

	/* Wrapper — fill space below fixed topbar, center header, footer pinned */
	#wrapper {
		min-height: 0 !important;
		height: calc(100svh - 35px) !important;  /* svh avoids Safari bottom-bar overlap */
		margin-top: 35px !important;
		padding: 0.75rem 1rem 0 !important;
		overflow: hidden !important;
		position: relative !important;
	}

	/* Center header block vertically (collapse #main so it takes no space) */
	body:not(.is-article-visible) #wrapper {
		justify-content: center !important;
	}
	body:not(.is-article-visible) #main {
		flex-grow: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
	}

	/* Re-enable article layout when a panel is open */
	body.is-article-visible #wrapper {
		height: auto !important;
		min-height: calc(100svh - 35px) !important;
		overflow: visible !important;
		justify-content: space-between !important;
	}

	/* Footer — absolute, pinned to bottom of wrapper */
	#footer {
		position: absolute !important;
		bottom: 0.6rem !important;
		left: 0 !important;
		right: 0 !important;
		margin-top: 0 !important;
	}

	/* Logo — smaller */
	#header .logo {
		width: 3.25rem !important;
		height: 3.25rem !important;
		line-height: 3.25rem !important;
	}

	/* Tighter gaps: logo→content; more space before nav */
	#header > * { margin-top: 1.4rem !important; }
	#header nav { margin-top: 8.2rem !important; }

	/* Tagline padding — keep <br> tags so words don't concatenate */
	#header .content .inner { padding: 0.8rem 0 !important; }

	/* Nav — 2-column grid instead of vertical stack */
	#header nav ul {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		min-width: unset !important;
	}

	/* Grid borders */
	#header nav ul li {
		border-left: 0 !important;
		border-top: solid 1px rgba(255, 255, 255, 0.5) !important;
	}
	#header nav ul li:nth-child(-n+2) { border-top: 0 !important; }
	#header nav ul li:nth-child(2n)   { border-left: solid 1px rgba(255, 255, 255, 0.5) !important; }

	/* Light mode: teal borders */
	body:not(.dark-mode) #header nav ul li {
		border-top-color: rgba(15, 46, 43, 0.50) !important;
	}
	body:not(.dark-mode) #header nav ul li:nth-child(2n) {
		border-left-color: rgba(15, 46, 43, 0.50) !important;
	}

	/* Button sizing */
	#header nav ul li a {
		height: 2.75rem !important;
		line-height: 2.75rem !important;
		text-align: center !important;
		padding: 0 0.4rem !important;
		min-width: 0 !important;
		width: 100% !important;
	}
}