/*
 * Header dropdown and mega panels.
 *
 * Panels are hidden with visibility rather than the hidden attribute so they
 * can fade in; visibility:hidden still removes them from the tab order and the
 * accessibility tree, so the disclosure stays honest.
 *
 * Inside the mobile drawer the panels are static accordions instead, since a
 * full-width overlay has nothing to overlay.
 */

.nav-panel {
	background: var(--sk-white);
}

@media (min-width: 62rem) {
	.nav-panel {
		position: absolute;
		z-index: 20;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5rem);
		transition:
			opacity var(--sk-transition),
			transform var(--sk-transition),
			visibility var(--sk-transition);
	}

	.primary-nav__item.is-open > .nav-panel {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	/* Full-bleed: the containing block is .site-header, so the panel spans the
	   viewport while its contents re-align to the header container. */

	.nav-panel--divisions,
	.nav-panel--products {
		inset: 100% 0 auto;
		border-bottom: 1px solid rgb(35 31 32 / 8%);
		box-shadow: 0 1.25rem 2.5rem rgb(35 31 32 / 8%);
	}

	/*
	 * Anchored to the item, whose 100% is its padding box: the indicator border
	 * has to be added back or the dropdown covers it.
	 */

	.nav-panel--links {
		top: calc(100% + var(--sk-nav-indicator));
		left: 0;
		min-width: 15rem;
		padding-block: 0.5rem;
		box-shadow: 0 1.25rem 2.5rem rgb(35 31 32 / 12%);
	}
}

@media (max-width: 61.99rem) {
	.nav-panel {
		display: none;
		flex-basis: 100%;
		padding-bottom: 1rem;
	}

	.primary-nav__item.is-open > .nav-panel {
		display: block;
	}

	/* The item wraps so the panel can drop below the link/caret row. */
	.primary-nav__item {
		flex-wrap: wrap;
	}

	.primary-nav__item--has-panel > .primary-nav__link {
		margin-right: auto;
	}
}

/* Simple dropdown: Resources, Company, Contact. */
.nav-links {
	margin: 0;
	padding: 0;
	list-style: none;

	@media (max-width: 61.99rem) {
		padding-left: 0.75rem;
	}
}

.nav-links__link {
	display: block;
	padding: 0.5rem clamp(1rem, 1.4vw, 1.25rem);
	color: var(--sk-gray-copy);
	font-size: clamp(0.8125rem, 0.94vw, 0.9375rem);
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--sk-transition);

	&:hover,
	&:focus-visible {
		color: var(--sk-accent);
		text-decoration: none;
	}
}

/* Divisions mega panel. */
.nav-divisions {
	width: 100%;
	max-width: var(--sk-container);
	margin-inline: auto;
	padding-inline: var(--sk-gutter);
}

.nav-divisions__grid {
	display: grid;
	gap: clamp(1.25rem, 2.2vw, 2rem);
	margin: 0;
	padding-block: clamp(1.5rem, 2.2vw, 2rem) 0;
	list-style: none;

	/* Two columns only once there is room for them; the drawer runs to 62rem. */
	@media (min-width: 40rem) {
		grid-template-columns: repeat(2, 1fr);
	}

	@media (min-width: 62rem) {
		grid-template-columns: repeat(4, 1fr);
	}
}

.nav-divisions__card {
	display: block;
	text-decoration: none;

	&:hover,
	&:focus-visible {
		text-decoration: none;
	}
}

.nav-divisions__media {
	position: relative;
	display: block;
	overflow: hidden;

	/* Panoramic crop from the comp; the source images are 4:3. */
	aspect-ratio: 14 / 5;
	background: var(--sk-gray-light);

	@media (max-width: 61.99rem) {
		display: none;
	}
}

.nav-divisions__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sk-transition);
}

/* The brand wedge, repeated from the header. */
.nav-divisions__wedge {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(1.5rem, 2.2vw, 2.125rem);
	aspect-ratio: 1;
	background: var(--sk-green);
	clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.nav-divisions__name {
	display: block;
	margin-top: 0.5rem;
	color: var(--sk-black);
	font-family: var(--sk-font-display);
	font-size: clamp(0.8125rem, 0.94vw, 0.9375rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: color var(--sk-transition);

	/* Division-colored rule, tinted per card by --sk-tile. */
	&::before {
		content: "";
		display: block;
		width: 1.5rem;
		height: 3px;
		margin-bottom: 0.5625rem;
		background: var(--sk-tile);
	}
}

.nav-divisions__card:hover .nav-divisions__name,
.nav-divisions__card:focus-visible .nav-divisions__name {
	color: var(--sk-accent);
}

.nav-divisions__card:hover .nav-divisions__image {
	transform: scale(1.04);
}

.nav-divisions__links {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;

	a {
		display: block;
		padding-block: 0.125rem;
		color: var(--sk-gray-copy);
		font-size: clamp(0.8125rem, 0.94vw, 0.9375rem);
		line-height: 1.9;
		text-decoration: none;
		transition: color var(--sk-transition);

		&:hover,
		&:focus-visible {
			color: var(--sk-accent);
			text-decoration: none;
		}
	}
}

.nav-divisions__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-top: clamp(1.25rem, 2vw, 1.875rem);
	border-top: 1px solid rgb(35 31 32 / 8%);
	padding-block: clamp(1rem, 1.4vw, 1.375rem);
}

.nav-divisions__hint {
	margin: 0;
	color: var(--sk-gray);
	font-size: clamp(0.75rem, 0.82vw, 0.8125rem);
}

.nav-divisions__all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sk-accent);
	font-family: var(--sk-font-display);
	font-size: clamp(0.75rem, 0.82vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;

	&:hover,
	&:focus-visible {
		text-decoration: none;
	}

	&:hover .nav-divisions__arrow,
	&:focus-visible .nav-divisions__arrow {
		transform: translateX(0.25rem);
	}
}

.nav-divisions__arrow {
	transition: transform var(--sk-transition);
}

/*
 * Products mega panel.
 *
 * Antennas is a row of platform columns. Accessories sits beside it, because
 * those categories have no platforms of their own. In the drawer the aside
 * drops under the platforms.
 */

.nav-products {
	width: 100%;
	max-width: var(--sk-container);
	margin-inline: auto;
	padding-inline: var(--sk-gutter);

	/* In the drawer the header already supplies the gutter, and this panel is
	   not full-bleed the way it is on a desktop. */
	@media (max-width: 61.99rem) {
		padding-inline: 0;
	}
}

.nav-products__catalog {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding-block: clamp(1.5rem, 2.2vw, 2.25rem) 0;

	@media (min-width: 62rem) {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
	}
}

.nav-products__heading {
	margin: 0;
	color: var(--sk-gray);
	font-family: var(--sk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;

	&:hover,
	&:focus-visible {
		color: var(--sk-accent);
		text-decoration: none;
	}
}

.nav-products__columns {
	display: grid;
	gap: clamp(1.25rem, 2vw, 2rem) clamp(1rem, 2vw, 2.5rem);
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;

	@media (min-width: 40rem) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (min-width: 62rem) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.nav-products__columns--aside {
	@media (min-width: 40rem) and (max-width: 61.99rem) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (min-width: 62rem) {
		grid-template-columns: minmax(9rem, 1fr);
	}
}

.nav-products__title {
	display: block;
	color: var(--sk-black);
	font-family: var(--sk-font-display);
	font-size: clamp(0.8125rem, 0.94vw, 0.9375rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	transition: color var(--sk-transition);

	&::before {
		content: "";
		display: block;
		width: 1.5rem;
		height: 3px;
		margin-bottom: 0.5625rem;
		background: var(--sk-accent);
	}

	&:hover,
	&:focus-visible {
		color: var(--sk-accent);
		text-decoration: none;
	}
}

.nav-products__links {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;

	a {
		display: block;
		padding-block: 0.125rem;
		color: var(--sk-gray-copy);
		font-size: clamp(0.8125rem, 0.94vw, 0.9375rem);
		line-height: 1.9;
		text-decoration: none;
		transition: color var(--sk-transition);

		&:hover,
		&:focus-visible {
			color: var(--sk-accent);
			text-decoration: none;
		}
	}
}

.nav-products__aside {
	@media (min-width: 62rem) {
		min-width: 11rem;
		padding-left: clamp(1.5rem, 2.4vw, 2.5rem);
		border-left: 1px solid rgb(35 31 32 / 8%);
	}

	@media (max-width: 61.99rem) {
		padding-top: 1.25rem;
		border-top: 1px solid rgb(35 31 32 / 8%);
	}
}

.nav-products__footer {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(1.25rem, 2vw, 1.875rem);
	border-top: 1px solid rgb(35 31 32 / 8%);
	padding-block: clamp(1rem, 1.4vw, 1.375rem);
}

.nav-products__all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sk-accent);
	font-family: var(--sk-font-display);
	font-size: clamp(0.75rem, 0.82vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;

	&:hover,
	&:focus-visible {
		text-decoration: none;
	}

	&:hover .nav-products__arrow,
	&:focus-visible .nav-products__arrow {
		transform: translateX(0.25rem);
	}
}

.nav-products__arrow {
	transition: transform var(--sk-transition);
}