.site-header,
.main-navigation {
	background-color: var(--tww-color-midnight);
	color: var(--tww-color-parchment);
}

.site-header {
	background-image: linear-gradient(90deg, rgb(11 19 43 / 62%), rgb(11 19 43 / 35%)), url("https://thewizardworkshop.ca/wp-content/uploads/2026/08/wizard-workshop-header-v1.png");
	background-position: center;
	background-size: cover;
	border-block-end: 1px solid var(--tww-color-brass);
}

.inside-header {
	gap: var(--tww-space-4);
	padding: var(--tww-space-4) var(--tww-page-gutter);
}

.site-branding {
	min-width: 0;
}

.site-logo img {
	display: block;
	max-height: 4rem;
	width: auto;
}
.main-title {
	font-family: var(--tww-font-display);
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: var(--tww-font-weight-semibold);
	line-height: 1.1;
}

.site-header .main-title a,
.site-header .main-title a:visited,
.site-header .main-title a:hover,
.site-header .main-title a:focus,
#site-navigation .main-nav ul li a,
#site-navigation .main-nav ul li a:visited,
#site-navigation .menu-toggle,
#site-navigation .menu-toggle:hover,
#site-navigation .menu-toggle:focus,
.main-navigation.mobile-menu-control-wrapper .menu-toggle,
.main-navigation.mobile-menu-control-wrapper .menu-toggle:hover,
.main-navigation.mobile-menu-control-wrapper .menu-toggle:focus,
.main-navigation .menu-bar-items .tww-header-utility,
.main-navigation .menu-bar-items .tww-header-utility:visited {
	color: var(--tww-color-parchment);
}

.main-title a,
.main-navigation a,
.menu-toggle,
.tww-header-utility {
	text-decoration: none;
}

.main-navigation .main-nav ul li a,
.tww-header-utility {
	align-items: center;
	display: flex;
	font-family: var(--tww-font-body);
	font-weight: var(--tww-font-weight-semibold);
	min-block-size: var(--tww-target-min);
}

.main-navigation .main-nav ul li a,
.menu-toggle {
	padding-inline: var(--tww-space-4);
}

#site-navigation .main-nav ul li:hover > a,
#site-navigation .main-nav ul li:focus-within > a,
#site-navigation .main-nav ul li[class*="current-menu-"] > a,
#site-navigation .main-nav ul li[class*="current_page_"] > a {
	background-color: rgb(242 169 59 / 12%);
	color: var(--tww-color-amber);
}

.main-navigation ul ul {
	background-color: var(--tww-color-midnight);
	border: 1px solid var(--tww-color-brass);
	box-shadow: 0 var(--tww-space-2) var(--tww-space-5) rgb(11 19 43 / 35%);
}

.main-navigation ul ul li:not(:last-child) {
	border-block-end: 1px solid rgb(176 141 87 / 35%);
}

.main-navigation .menu-bar-items {
	gap: var(--tww-space-2);
}

.tww-header-utility {
	border: 1px solid var(--tww-color-brass);
	border-radius: var(--tww-radius-control);
	color: var(--tww-color-parchment);
	justify-content: center;
	padding-inline: var(--tww-space-3);
	transition:
		background-color var(--tww-motion-feedback) var(--tww-ease-standard),
		border-color var(--tww-motion-feedback) var(--tww-ease-standard),
		color var(--tww-motion-feedback) var(--tww-ease-standard);
}

.main-navigation .menu-bar-items .tww-header-utility:hover,
.main-navigation .menu-bar-items .tww-header-utility:focus-visible {
	background-color: var(--tww-color-amber);
	border-color: var(--tww-color-amber);
	color: var(--tww-color-ink);
}

#site-navigation .menu-toggle,
.main-navigation.mobile-menu-control-wrapper .menu-toggle,
.main-navigation .menu-bar-items .tww-header-utility {
	background-color: var(--tww-color-amber);
	border: 2px solid var(--tww-color-brass);
	border-radius: var(--tww-radius-control);
	color: var(--tww-color-ink);
	font-family: var(--tww-font-body);
	font-weight: var(--tww-font-weight-semibold);
	min-block-size: var(--tww-target-min);
	transition:
		background-color var(--tww-motion-feedback) var(--tww-ease-standard),
		border-color var(--tww-motion-feedback) var(--tww-ease-standard),
		box-shadow var(--tww-motion-feedback) var(--tww-ease-standard),
		color var(--tww-motion-feedback) var(--tww-ease-standard);
}

#site-navigation .menu-toggle:hover,
#site-navigation .menu-toggle:focus-visible,
.main-navigation.mobile-menu-control-wrapper .menu-toggle:hover,
.main-navigation.mobile-menu-control-wrapper .menu-toggle:focus-visible,
.main-navigation .menu-bar-items .tww-header-utility:hover,
.main-navigation .menu-bar-items .tww-header-utility:focus-visible {
	background-color: var(--tww-color-amber);
	border-color: var(--tww-color-amber);
	box-shadow: 0 0 0 2px rgb(169 223 245 / 20%), 0 0 1rem rgb(169 223 245 / 28%);
	color: var(--tww-color-ink);
}

@media (max-width: 48rem) {
	.menu-toggle {
		align-items: center;
		display: flex;
		font-family: var(--tww-font-body);
		font-weight: var(--tww-font-weight-semibold);
		min-block-size: var(--tww-target-min);
	}

	.inside-header {
		flex-wrap: nowrap;
	}

	.site-branding {
		margin-inline-end: auto;
	}

	.main-title {
		font-size: 1.125rem;
	}

	.site-logo img {
		max-height: 3rem;
	}

	.mobile-menu-control-wrapper {
		gap: var(--tww-space-2);
	}

	.main-navigation.toggled .main-nav {
		border-block-start: 1px solid var(--tww-color-brass);
	}

	.main-navigation.toggled .main-nav > ul {
		padding-block: var(--tww-space-2);
	}

	.main-navigation.toggled .main-nav ul li a {
		padding-inline: var(--tww-page-gutter);
	}

	.tww-header-utility {
		font-size: 0.875rem;
		padding-inline: var(--tww-space-2);
	}
}

/* Arcane navigation treatment: presentation only, links and behavior unchanged. */
.main-navigation .main-nav > ul { gap: 0.25rem; }
.main-navigation .main-nav > ul > li > a {
 border-inline: 1px solid transparent;
 letter-spacing: 0.025em;
 position: relative;
 transition: background-color var(--tww-motion-feedback) var(--tww-ease-standard), border-color var(--tww-motion-feedback) var(--tww-ease-standard), box-shadow var(--tww-motion-feedback) var(--tww-ease-standard), color var(--tww-motion-feedback) var(--tww-ease-standard);
}
.main-navigation .main-nav > ul > li:not(:last-child) > a::after {
 color: var(--tww-color-brass);
 content: "✦";
 font-size: 0.65rem;
 position: absolute;
 right: -0.45rem;
 top: 50%;
 transform: translateY(-50%);
}
#site-navigation .main-nav > ul > li:hover > a,
#site-navigation .main-nav > ul > li:focus-within > a,
#site-navigation .main-nav > ul > li[class*="current-menu-"] > a,
#site-navigation .main-nav > ul > li[class*="current_page_"] > a {
 border-inline-color: var(--tww-color-brass);
 box-shadow: inset 0 -2px 0 var(--tww-color-amber), 0 0 1rem rgb(242 169 59 / 14%);
}
.main-navigation ul ul {
 background-color: rgb(11 19 43 / 97%);
 box-shadow: 0 var(--tww-space-2) var(--tww-space-5) rgb(11 19 43 / 55%), 0 0 0 1px rgb(242 169 59 / 8%);
}
@media (max-width: 48rem) {
 .main-navigation .main-nav > ul > li:not(:last-child) > a::after { display: none; }
}