/* Desktop dropdown navigation and the mobile fullscreen overlay.
   Tokens come from styles.css, which loads first. */

.dropbtn,
.dropbtn_arrow {
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--text);
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.dropbtn {
	padding: 6px 18px;
}

.dropbtn_arrow {
	padding: 6px 36px 6px 18px;
}

.dropbtn a,
.dropbtn_arrow a {
	color: inherit;
	text-decoration: none;
}

.dropdown {
	position: relative;
	display: inline-block;
	margin: 0 4px 0 0;
	background: transparent;
	border-radius: var(--radius-sm);
}

/* The panel sits 6px below the button, and that gap is not part of either
   element — crossing it with the pointer would drop :hover and close the menu
   before it can be clicked. This invisible strip bridges the gap so the
   pointer stays inside .dropdown the whole way down. Keep its height >= the
   panel's margin-top. */
.dropdown::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 8px;
}

.dropdown:hover .dropbtn,
.dropdown:hover .dropbtn_arrow,
.dropbtn:hover,
.dropbtn_arrow:hover {
	color: var(--heading);
	background: var(--surface-2);
}

/* The caret on the dropdown buttons */
.dropbtn_arrow::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	margin-top: 14px;
	margin-left: 18px;
	border-style: solid;
	border-width: 5px 4px 0 4px;
	border-color: var(--text-dim) transparent transparent transparent;
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.dropdown:hover .dropbtn_arrow::after {
	border-top-color: var(--heading);
	transform: translateY(1px);
}

/* Dropdown panel (hidden by default, shown on hover) */
.dropdown-content {
	display: none;
	position: absolute;
	min-width: 210px;
	margin-top: 6px;
	padding: 6px;
	font-size: 14px;
	font-weight: 400;
	background-color: var(--surface);
	border: 1px solid var(--border-hi);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	z-index: 30;
}

.dropdown-content a {
	display: block;
	padding: 8px 12px;
	color: var(--text);
	text-decoration: none;
	border: 0;
	border-radius: 6px;
	transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.dropdown-content a:hover {
	color: var(--heading);
	background-color: rgba(77, 139, 255, 0.16);
}

.dropdown:hover .dropdown-content {
	display: block;
	animation: dropdown-in 0.18s var(--ease) both;
}

@keyframes dropdown-in {
	from { opacity: 0; transform: translateY(-5px); }
	to   { opacity: 1; transform: none; }
}

@media screen and (max-width: 1400px) {
	.dropbtn {
		padding: 6px 12px;
		font-size: 13px;
	}

	.dropbtn_arrow {
		padding: 6px 26px 6px 12px;
		font-size: 13px;
	}

	.dropbtn_arrow::after {
		border-width: 4px 3px 0 3px;
		margin-top: 14px;
		margin-left: 8px;
	}

	.dropdown {
		margin: 0 2px 0 0;
	}
}

/* --------------------------------------------------------------------------
   Mobile fullscreen overlay
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px) {
	.dropdown-content {
		display: block;
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.dropdown-content a {
		padding: 8px;
		font-size: 22px;
		color: var(--text-dim);
	}

	.dropbtn_arrow {
		position: relative;
		left: 5px;
		top: 15px;
	}
}

.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	width: 100%;
	height: 100%;
	background-color: rgba(10, 13, 19, 0.97);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.overlay a {
	color: var(--text);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}

.overlay a:hover {
	color: var(--blue);
}

.overlay-content {
	position: relative;
	top: 0;
	width: 100%;
	margin-top: 45px;
	text-align: left;
}

.overlay-content .dropbtn {
	padding: 10px 0;
}

.overlay .closebtn {
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 60px;
	line-height: 1;
	color: var(--text-dim);
}

.overlay .closebtn:hover {
	color: var(--red);
}

.overlay-content ul {
	list-style-type: none;
	padding: 0 0 10px 25px;
	color: var(--text);
	background: none;
}

.overlay-content .nested {
	padding: 0;
}

.overlay-content ul a {
	color: var(--text);
}

.overlay-content .bigText {
	padding: 20px 0 5px 0;
	font-size: 28px;
	font-weight: 500;
	color: var(--heading);
}

.overlay-content .smallText {
	padding: 5px 0;
	font-size: 22px;
}

@media screen and (max-height: 500px) {
	.overlay a { font-size: 20px; }
	.dropbtn,
	.dropbtn a { padding: 4px 0; }

	.overlay .closebtn {
		top: 15px;
		right: 35px;
		font-size: 40px;
	}
}