/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--color-cream);
	color: var(--color-black);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--text-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

img {
	max-width: 100%;
	display: block;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Site header ---------- */
.site-header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-gray-lightest);
}

.site-header__top {
	position: relative;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 24px 40px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
}

.site-branding {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.site-branding__signature img {
	display: block;
	max-height: 60px;
	width: auto;
}

.custom-logo-link img {
	max-height: 60px;
	width: auto;
}

.site-header__utility {
	flex-shrink: 0;
}

.mailing-list-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: var(--text-body);
	color: var(--color-black);
}

.mailing-list-link__icon {
	color: var(--color-black);
}

.mailing-list-link:hover {
	color: var(--color-purple);
}
.mailing-list-link:hover .mailing-list-link__icon {
	color: var(--color-purple);
}

/* ---------- Primary navigation ---------- */
.site-navigation {
	position: relative;
	border-top: 1px solid var(--color-gray-lightest);
}

.primary-menu {
	max-width: var(--container-width);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
}

.primary-menu > li {
	padding: 18px 0;
}

.primary-menu > li > a {
	font-size: var(--text-body);
	font-weight: 400;
	color: var(--color-black);
	transition: color 0.15s ease;
}

.primary-menu > li:hover > a,
.primary-menu > li:focus-within > a,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a {
	color: var(--color-purple);
	font-weight: 600;
}

/* Simple dropdown (e.g. "Everything Else") — positions relative to its own <li> */
.primary-menu > li.menu-item-has-children:not(:has(> ul.sub-menu > li.menu-item-has-children)) {
	position: relative;
}

.primary-menu > li.menu-item-has-children:not(:has(> ul.sub-menu > li.menu-item-has-children)) > ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--color-white);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
	padding: 10px 0;
	display: none;
	z-index: 40;
}

.primary-menu > li.menu-item-has-children:not(:has(> ul.sub-menu > li.menu-item-has-children)) > ul.sub-menu > li > a {
	display: block;
	padding: 10px 24px;
	font-size: var(--text-small);
	color: var(--color-black);
	white-space: nowrap;
}

.primary-menu > li.menu-item-has-children:not(:has(> ul.sub-menu > li.menu-item-has-children)) > ul.sub-menu > li > a:hover {
	color: var(--color-purple);
}

.primary-menu > li.menu-item-has-children:not(:has(> ul.sub-menu > li.menu-item-has-children)):hover > ul.sub-menu,
.primary-menu > li.menu-item-has-children:not(:has(> ul.sub-menu > li.menu-item-has-children)):focus-within > ul.sub-menu,
.primary-menu > li.menu-item-has-children:not(:has(> ul.sub-menu > li.menu-item-has-children)).menu-item--open > ul.sub-menu {
	display: block;
}

/*
 * Mega menu (e.g. "Every Thing") — identified as any top-level item whose
 * sub-menu contains items that themselves have children. WP core's default
 * walker only ever outputs generic "sub-menu" <ul>s at every depth, so
 * :has() is what tells the mega variant apart from a plain dropdown.
 */
.primary-menu > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) {
	/* Direct child sub-menu = the full-width dark tab bar. */
	> ul.sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		background: var(--color-nav-dark);
		display: none;
		z-index: 50;
		padding-inline: max(40px, calc((100% - var(--container-width)) / 2));

		> li {
			position: relative;
			padding: 20px 28px;

			> a {
				font-size: var(--text-small);
				font-weight: 300;
				color: var(--color-gray-lighter);
				white-space: nowrap;
			}

			&:hover > a,
			&:focus-within > a,
			&.menu-item--open > a {
				font-weight: 700;
				color: var(--color-white);
			}

			/* Grandchild sub-menu = the white flyout page list under a tab. */
			> ul.sub-menu {
				position: absolute;
				top: 100%;
				left: 0;
				min-width: 260px;
				background: var(--color-white);
				box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
				padding: 10px 0;
				display: none;

				> li > a {
					display: block;
					padding: 10px 24px;
					font-size: var(--text-small);
					font-weight: 400;
					color: var(--color-black);
					white-space: nowrap;

					&:hover {
						color: var(--color-purple);
					}
				}
			}

			&:hover > ul.sub-menu,
			&:focus-within > ul.sub-menu,
			&.menu-item--open > ul.sub-menu {
				display: block;
			}
		}
	}

	&:hover > ul.sub-menu,
	&:focus-within > ul.sub-menu,
	&.menu-item--open > ul.sub-menu {
		display: flex;
	}
}

/* ---------- Footer ---------- */
.site-footer {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 32px 40px;
	font-size: var(--text-small);
	color: var(--color-gray);
	text-align: center;
}

/* ---------- Small screens ---------- */
@media (max-width: 782px) {
	.site-header__top {
		padding: 16px 20px;
	}

	.primary-menu {
		flex-wrap: wrap;
		gap: 20px;
		justify-content: flex-start;
		padding: 0 20px;
	}

	.primary-menu > li.menu-item-has-children:has(> ul.sub-menu > li.menu-item-has-children) {
		> ul.sub-menu {
			position: static;
			flex-direction: column;
			padding-inline: 20px;

			> li > ul.sub-menu {
				position: static;
				box-shadow: none;
				background: transparent;
				padding-left: 16px;

				> li > a {
					color: var(--color-gray-lighter);
				}
			}
		}
	}
}