/*
Theme Name:        Kelvinb Portfolio
Theme URI:         https://kelvinb.com
Author:            Kelvin Balongag
Author URI:        https://kelvinb.com
Description:       A personal portfolio block theme built with native WordPress FSE — no page builder, no ACF, no Tailwind.
Version:           1.0.0
Requires at least: 6.5
Tested up to:      7.0
Requires PHP:      8.2
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       kelvinb-portfolio
*/

html {
	scroll-behavior: smooth;
}

/* ── Hamburger toggle ────────────────────────────────── */
.kelvinb-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 4px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 101;
	position: relative;
}

.kelvinb-nav-toggle span {
	display: block;
	width: 22px;
	height: 1.5px;
	background-color: var(--wp--preset--color--contrast);
	transition: transform 0.3s ease, opacity 0.3s ease;
	transform-origin: center;
}

.kelvinb-nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.kelvinb-nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.kelvinb-nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile nav overlay ──────────────────────────────── */
.kelvinb-nav-mobile {
	position: fixed;
	inset: 0;
	background-color: var(--wp--preset--color--base);
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
}

.kelvinb-nav-mobile[hidden] {
	display: none;
}

.kelvinb-nav-close {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	width: 32px;
	height: 32px;
	padding: 4px;
	background: none;
	border: none;
	cursor: pointer;
}

.kelvinb-nav-close span {
	display: block;
	width: 22px;
	height: 1.5px;
	background-color: var(--wp--preset--color--contrast);
}

.kelvinb-nav-close span:nth-child(1) {
	transform: translateY(0.75px) rotate(45deg);
}

.kelvinb-nav-close span:nth-child(2) {
	transform: translateY(-0.75px) rotate(-45deg);
}

.kelvinb-nav-mobile a {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color 0.2s ease;
}

.kelvinb-nav-mobile a:hover {
	color: var(--wp--preset--color--accent);
}

/* Prevent body scroll when nav open */
body.kelvinb-nav-open {
	overflow: hidden;
}

/* ── Responsive breakpoint ───────────────────────────── */
@media (max-width: 640px) {
	.kelvinb-nav-toggle {
		display: flex;
	}
	.kelvinb-desktop-nav {
		display: none !important;
	}
}

/* ── Desktop nav (custom HTML) ───────────────────────── */
.kb-nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.kb-nav .kb-nav-link {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast-muted);
	text-decoration: none;
	line-height: 1.2;
	transition: color 0.2s ease;
}

.kb-nav .kb-nav-link:hover {
	color: var(--wp--preset--color--contrast);
}

.kb-nav-sub {
	display: block;
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	line-height: 1.4;
}

.kb-nav-sub--mobile {
	font-size: 11px;
}

/* ── Footer ──────────────────────────────────────────── */
footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* ── Sticky header with backdrop blur ───────────────── */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
}