/* Color aliases mapped to the new palette from ./global/colors.css */
:root {
	--tea-green: var(--secondary-600);
	--beige: var(--primary-100);
	--cornsilk: var(--text-50);
	--papaya-whip: var(--background-100);
	--light-bronze: var(--primary-500);

	--tea-green-t: color-mix(in srgb, var(--secondary-600) 50%, transparent);
	--beige-t: color-mix(in srgb, var(--primary-100) 50%, transparent);
	--cornsilk-t: color-mix(in srgb, var(--text-50) 50%, transparent);
	--papaya-whip-t: color-mix(in srgb, var(--background-100) 50%, transparent);
	--light-bronze-t: color-mix(in srgb, var(--primary-500) 50%, transparent);
}

body {
	background: linear-gradient(
		to bottom right,
		var(--cornsilk),
		var(--papaya-whip)
	);
	display: flex;
	text-align: center;
	flex-wrap: wrap;
	justify-content: center;
	/*height: 100vh;
	height: 300vh;*/
	padding-bottom: 2em;
}
header {
	top: 0;
	position: fixed;
	font-size: 2rem;
	padding: 1.5rem 2rem;
	background: linear-gradient(to bottom, var(--light-bronze-t), color-mix(in srgb, var(--primary-500) 0%, transparent));
	width: 100%;
	z-index: 2;
	transition: all 0.4s ease;
	color: var(--tea-green);
	font-family: "Bakbak One"
}

header.scrolled {
	font-size: 14px;
	padding: 2px;
	background: var(--light-bronze);
	color: var(--beige)
}

@keyframes rotate {
	0% {
		rotate: 0deg;
	}
	60% {
		rotate: 90deg
	}
	100% {
		rotate: 90deg;
	}
}
#logo {
	height: 90%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: -1000;
	svg {
		color: var(--tea-green);
		height: 80%;
		width: fit-content;
		animation: rotate 4s linear infinite;
		filter: drop-shadow(0 0 2rem var(--tea-green-t));
	}
}

#content {
	display: grid;
	width: 88vw;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 200px;
	column-gap: 1em;
	row-gap: 1em;
	margin-top: 16px
}



/* offset scroll targets so the sticky navbar doesn't cover them */
#content > section {
	scroll-margin-top: calc(1.5em + 64px + 1em);
	color: var(--cornsilk);

	background: var(--light-bronze-t) !important;
	backdrop-filter: blur(16px) !important;
	box-shadow: 5px 5px 10px var(--tea-green);
	border-radius: 32px;
	padding: 1em;
	padding-top: 0.5em;
}
#content > section > h2 {
	text-shadow: 0 0 4px var(--tea-green);
	font-family: "Bakbak One";
}

nav#navbar {
	position: sticky;
	top: 1.5em;
	z-index: 2;
	margin: 80vh auto 1em auto;

	width: max-content;
	/* pill shell */
	height: 56px;
	border-radius: 9999px;
	padding: 4px;
	padding-left: 12px;
	padding-right: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	justify-content: space-evenly;

	/* layered pill appearance */
	background: linear-gradient(to bottom, color-mix(in srgb, var(--accent-800) 15%, transparent), color-mix(in srgb, var(--accent-900) 15%, transparent));
	box-shadow:
		0 8px 32px color-mix(in srgb, var(--accent-950) 30%, transparent),
		0 2px 8px color-mix(in srgb, var(--accent-950) 20%, transparent),
		inset 0 1px 0 color-mix(in srgb, var(--text-50) 12%, transparent),
		inset 0 -1px 2px color-mix(in srgb, var(--accent-950) 40%, transparent);
}

/* inner dark track */
nav#navbar::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 9999px;
	background: linear-gradient(to bottom, var(--beige), var(--papaya-whip));
	/*box-shadow:
		inset 0 2px 4px rgba(0,0,0,0.15),
		inset 0 -1px 2px rgba(255,255,255,0.4);*/
	z-index: 0;
}

/* sliding active pill */
.nav-slider {
	position: absolute;
	border-radius: 9999px;
	background: linear-gradient(to bottom, var(--light-bronze), var(--primary-700));
	box-shadow:
		0 2px 8px color-mix(in srgb, var(--accent-950) 25%, transparent),
		inset 0 2px 0 color-mix(in srgb, var(--text-50) 35%, transparent),
		inset 0 -2px 0 color-mix(in srgb, var(--accent-950) 15%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--text-50) 20%, transparent);
	transition: left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            top  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            width  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
	            height 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 1;
}

/* ghost hover track */
.nav-hover-track {
	position: absolute;
	border-radius: 9999px;
	background: color-mix(in srgb, var(--primary-500) 25%, transparent);
	transition: width 0.2s ease, left 0.2s ease;
	z-index: 1;
	pointer-events: none;
	height: 46px;
	top: 50%;
	transform: translateY(-50%);
	left: 8px;
}

button.nav-item {
	position: relative;
	padding: 10px 24px;
	border-radius: 9999px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

button.nav-item span {
	font-size: 15px;
	font-weight: 500;
	transition: color 0.25s ease;
	color: var(--tea-green);
	user-select: none;
}

button.nav-item.active span {
	color: var(--cornsilk);
}


#overview {
	grid-column: span 2;
	grid-row: span 1;
	p {
		margin: 1px;
		text-align: justify;
	}
	h2 {
		margin: 2px
	}
}

#team {
	grid-column: span 4;
	grid-row: span 3;
	display: flex;
	flex-wrap: wrap;
	gap: 1%;
	justify-content: center;
	h2 {
		width: 100%;
		display: block;
	}
	div.team-member {
		height: 125px;
		background: var(--tea-green-t);
		border-radius: 16px;
		padding: 8px;
		height: fit-content;
		width: fit-content;
		min-width: 150px;

		i {
			font-size: 2em;
			margin-top: 4px
		}
	}
}

.zoom {
	transition: transform 0.3s ease;
}.zoom:hover {
	transform: scale(1.1);
}


#contact {
	grid-column: span 2;
	grid-row: span 2;
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: center;
		justify-content: center;
		/*height: 100%;*/
		li {
			background: var(--tea-green-t);
			border-radius: 8px;
			width: 95%;
			padding: 8px;
			text-align: left;
			display: grid;
			grid-template-rows: 1fr 1fr;
			grid-template-columns: 1fr 4fr;
			a {
				font-size: 80%;
				color: var(--cornsilk);
				grid-row: span 1
			}
			span {
				grid-row: span 1;
			}
			i {
				grid-row: span 2;
				grid-column: span 1;
				height: 100%;
				width: 100%;
				font-size: 1.5em;
			}
		}
	}
}
#plans {
	grid-column: span 6;
	/*grid-row: span 3;*/
	display: flex;
	flex-direction: row;
	gap: 16px;
	flex-wrap: wrap;
	text-shadow: 0 0 0 0;
	align-items: stretch;
	height: fit-content;
	padding-top: 24px;
	padding-bottom: 24px
}
#plans > div.card {
	background: var(--beige);
	border-radius: 16px;
	flex: 1;
	min-width: 150px;
	padding: 16px;
	color: var(--tea-green);
	font-family: 'Segoe UI', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	h2 {
		font-size: 1.3em;
		margin-top: 8px;
	}
	h6 {
		font-size: 0.85em;
		margin-top: 4px;
		min-height: 1.4em;
	}
	h1 {
		text-align: left;
		margin-top: 12px;
		width: 100%;
		span {
			font-size: 60%;
		}
	}
	p {
		text-align: left;
		font-size: 0.9em;
		margin-top: 8px;
		width: 100%;
	}
	ul {
		list-style: none;
		padding: 0;
		margin: 12px 0 0 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	ul li {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 0.88em;
		color: var(--tea-green);
		background: color-mix(in srgb, var(--beige) 60%, var(--papaya-whip));
		border: 1px solid color-mix(in srgb, var(--light-bronze) 30%, transparent);
		border-radius: 8px;
		padding: 7px 10px;
		text-align: left;
	}
	ul li::before {
		content: "✓";
		flex-shrink: 0;
		width: 18px;
		height: 18px;
		background: var(--light-bronze);
		color: var(--cornsilk);
		border-radius: 50%;
		font-size: 0.75em;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	i {
		display: inline-block;
		margin-top: 12px;
		font-size: 1.5em;
	}
}

@media (max-width: 768px) {
	/* ── Body & layout ── */
	body {
		padding-bottom: 100px; /* room for fixed bottom nav */
	}

	/* ── Header: smaller on mobile ── */
	header {
		font-size: 1.3rem;
		padding: 1rem 1.2rem;
	}

	/* ── Background logo: smaller so it doesn't overwhelm ── */
	#logo svg {
		height: 55%;
		opacity: 0.6;
	}

	/* ── Content grid: single column stack ── */
	#content {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		width: 94vw;
		margin-top: 80vh;
	}

	/* ── Every section: full width, auto height ── */
	#overview,
	#team,
	#contact,
	#plans {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
	}

	/* ── Overview: comfortable reading ── */
	#overview {
		font-size: 0.95rem;
		line-height: 1.6;

		h2 {
			margin: 0
		}
	}

	/* ── Team: wrap nicely in a row ── */
	#team {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: center;
		align-items: start;
	}
	#team div.team-member {
		/*min-width: 130px;
		flex: 1 1 130px;
		max-width: 160px;
		font-size: 0.85rem;*/
		display: grid;
		grid-template-columns: 1fr 4fr;
		grid-template-rows: 1fr 1fr;
		width: 100%;
		text-align: left;

		i {
			grid-row: span 2;
			grid-column: span 1;
			font-size: 1.8em;
			margin-top: 4px;
		}
		h3 {
			grid-row: 1;
			grid-column: 2;
			font-size: 1em;
			margin: 0;
		}
		p {
			grid-row: 2;
			grid-column: 2;
			font-size: 0.85em;
			margin: 0;
		}
	}

	/* ── Contact: full-width items, larger tap targets ── */
	#contact ul li {
		width: 100%;
		padding: 10px 8px;
		font-size: 0.9rem;
	}
	#contact ul li a {
		font-size: 85%;
		word-break: break-all;
	}

	/* ── Plans: single column, full-width cards ── */
	#plans {
		flex-direction: column !important;
		gap: 12px;
	}
	#plans > div.card {
		min-width: unset;
		/*width: 100%;*/
		flex: none;
		padding: 16px 14px;
	}

	/* ── Disable hover zoom on touch (avoids sticky hover state) ── */
	.zoom:hover {
		transform: none;
	}
}

/* ── Mobile nav (≤ 768px): revert to old hamburger style ─────────────────── */
@media (max-width: 768px) {
	nav#navbar {
		/* reset pill appearance */
		padding: 0 1.5em;
		padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone notch support */
		justify-content: flex-start;
		background: var(--light-bronze-t);
		backdrop-filter: blur(16px);
		box-shadow: 5px 5px 10px var(--tea-green);

		/* full-width bottom bar */
		position: fixed;
		top: unset;
		bottom: 0;
		left: 0;
		right: 0;
		width: 76%;
		border-radius: 20px 20px 0 0;
		flex-direction: row;
		align-items: center;
		min-height: 56px;
	}

	/* hide pill-specific elements */
	nav#navbar::after,
	.nav-slider,
	.nav-hover-track,
	button.nav-item {
		display: none !important;
	}

	/* show mobile-only elements */
	.nav-title {
		display: block !important;
		font-size: 1.2em;
		color: var(--tea-green);
		flex: 1;
		text-align: left;
	}

	#toggleNav {
		display: block !important;
		color: var(--tea-green);
		font-size: 1.2em;
		cursor: pointer;
		padding: 0.75em 0;
	}

	input#navToggled {
		display: none;
	}

	.mobile-nav-list {
		display: flex !important;
		flex-direction: column;
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		list-style: none;
		background: var(--light-bronze);
		backdrop-filter: blur(16px);
		border-radius: 16px 16px 0 0;
		padding: 0 1.5em;
		margin: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
	}

	.mobile-nav-list li {
		height: 40px;
		display: flex;
		align-items: center;
	}

	.mobile-nav-list a {
		text-decoration: none;
		color: var(--tea-green);
		font-size: 1em;
		transition: color 0.2s;
	}

	.mobile-nav-list a:hover,
	.mobile-nav-list a.active {
		color: var(--light-bronze);
		text-decoration: underline;
	}

	input#navToggled:checked ~ .mobile-nav-list {
		max-height: 200px;
		padding: 0.75em 1.5em;
	}
	input#navToggled:checked ~ nav#navbar {
		border-radius: 0 0 0 0 !important;
	}
}

/* hide mobile-only elements on desktop */
@media (min-width: 769px) {
	.nav-title,
	#toggleNav,
	input#navToggled,
	.mobile-nav-list {
		display: none !important;
	}
}