/*
 * 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 {
		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;
		/*
		 * A short link list (Company) is narrower than the row, so without a
		 * full-width basis it sits beside the caret instead of wrapping under
		 * the label the way the divisions panel does.
		 */
		flex: 0 0 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);
}