/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---------- ≤ 1080px ---------- */
@media (max-width: 1080px) {
	.about-grid    { grid-template-columns: 1fr; gap: 40px; }
	.skills-wrap   { grid-template-columns: 1fr; gap: 24px; }
	.contact-grid  { grid-template-columns: 1fr; }
}

/* ---------- ≤ 900px ---------- */
@media (max-width: 900px) {
	.stats-container { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤ 720px ---------- */
@media (max-width: 720px) {
	.theme-switcher { top: 12px; right: 12px; padding: 5px 7px; gap: 4px; }
	.theme-switcher button { width: 28px; height: 28px; font-size: .72rem; }

	.label-container { top: 12px; left: 12px; width: 42px; height: 42px; }
	#label-1, #label-2 { font-size: 1.15rem; }

	#toggle:checked ~ #header { width: 88vw; max-width: 340px; }

	.section { padding: 70px 0; }
	.about-facts { grid-template-columns: 1fr; }

	.stats-container { grid-template-columns: 1fr 1fr; gap: 16px; }
	.stats-item { padding: 22px 16px; }
	.stats-item .purecounter { font-size: 1.9rem; }

	#hero { padding-top: 78px; }
	.hero-actions { flex-direction: column; align-items: stretch; }
	.btn { justify-content: center; }
	.scroll-hint { display: none; }
}

/* ---------- ≤ 600px ---------- */
@media (max-width: 600px) {
	.isotope-container { grid-template-columns: 1fr; gap: 20px; padding: 0 18px; }
	.portfolio-item    { max-width: 100%; }
	.portfolio-info    { padding: 18px; }
	.portfolio-info h4 { font-size: 1.08rem; }
}

/* ---------- ≤ 480px ---------- */
@media (max-width: 480px) {
	.stats-container { grid-template-columns: 1fr; }
	.about-gallery { aspect-ratio: auto; grid-template-columns: repeat(2, 1fr); }
	.about-gallery .ag:nth-child(1) { grid-column: span 2; }
	.about-gallery .ag:nth-child(5) { grid-column: span 2; }
}

/* ============================================================
   DESKTOP — horizontal top navbar
   ============================================================ */
@media (min-width: 1000px) {

	.theme-switcher {
		top: 80px;
		left: 18px;
		right: auto;
	}

	/* 1. Full-width top bar */
	#header {
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		min-height: 68px;
		padding: 10px 24px;
		flex-direction: row;
		align-items: center;
		gap: 24px;
		border-right: 0;
		border-bottom: 1px solid var(--border);
		overflow: visible;
	}

	/* Hamburger off, content always visible */
	#toggle,
	.label-container { display: none; }
	#header > * { opacity: 1 !important; transition: none; }

	/* 2. Compact avatar */
	.profile-img { width: 42px; height: 42px; margin-bottom: 0; flex-shrink: 0; padding: 2px; }

	/* 3. Sitename */
	.sitename-a { justify-content: flex-start; flex-shrink: 0; }
	.sitename   { font-size: 1.15rem; margin: 0; }

	/* 4. Socials */
	.social-links    { margin: 0; gap: 6px; flex-shrink: 0; }
	.social-links a  { width: 32px; height: 32px; font-size: .82rem; border-radius: 9px; }

	/* 5. Horizontal nav — single flex declaration */
	#navmenu {
		display: flex;
		justify-content: center;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}
	#navmenu > ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 6px 8px;
		width: auto;
	}
	#navmenu ul li { width: auto; position: relative; }

	/* 6. Top-level links as pills */
	#navmenu ul li > a {
		padding: 8px 14px;
		border-radius: 10px;
		border-left: 0;
		font-size: .86rem;
		gap: 8px;
	}
	#navmenu ul li > a i:first-child { width: auto; font-size: .92rem; }
	#navmenu ul li > a:hover,
	#navmenu ul li > a.active {
		background: var(--surface-2);
		border-left: 0;
		color: var(--text);
		margin-left: 0;
		font-size: .86rem;
	}

	/* 7. Dropdown popovers — one z-index, one overflow */
	#navmenu ul ul,
	#navmenu ul ul ul {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		width: 250px;
		max-height: 0;
		padding: 0;
		margin: 0;
		overflow: hidden;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		box-shadow: var(--shadow-sm);
		border-left: 0;
		z-index: 500;
		transition: max-height .35s ease, opacity .25s ease;
		opacity: 0;
	}

	/* Nested submenu pops to the side */
	#navmenu ul ul ul {
		left: 100%;
		top: 0;
		margin-left: 4px;
		z-index: 600;
	}

	/* Open states — set overflow visible so nested children can escape */
	li.dropdown:has(#toggle-2:checked) > ul {
		max-height: 420px;
		padding: 8px 0;
		opacity: 1;
		overflow: visible;
	}
	li.dropdown ul li.dropdown:has(#toggle-3:checked) > ul {
		max-height: 340px;
		padding: 8px 0;
		opacity: 1;
		overflow: visible;
	}

	/* Submenu link styling */
	#navmenu ul ul li > a,
	#navmenu ul ul ul li > a {
		padding: 9px 16px;
		border-radius: 0;
		font-size: .84rem;
	}
	#navmenu ul ul ul li > a::before { left: 6px; }

	/* 8. Dropdown toggle arrows */
	.label-container-2 { top: 8px; right: 8px; }
	.label-container-3 { top: 6px; right: 8px; }
}

/* Nudge content below the fixed top bar */
@media (min-width: 1025px) {
	.main { padding-top: 68px; }
	#hero { min-height: calc(100vh - 68px); }
}