/**
 * JMAA Brand Kit - site header and navigation.
 *
 * Optional, and switched on from Settings > Brand Kit. Written against the
 * block navigation markup that modern themes use, with fallbacks for classic
 * themes underneath. Colour declarations carry !important because block themes
 * inject their palette inline, which would otherwise win.
 */

/* ---------- Header bar --------------------------------------------------- */

.jmaa-brand-header header.wp-block-template-part,
.jmaa-brand-header .wp-site-blocks > header,
.jmaa-brand-header .site-header,
.jmaa-brand-header #masthead {
	background-color: var(--jmaa-black) !important;
	border-bottom: 3px solid var(--jmaa-gold);
}

/* Site name, where no logo image is set. */
.jmaa-brand-header .wp-block-site-title a,
.jmaa-brand-header .site-title a {
	color: var(--jmaa-gold) !important;
	font-family: var(--jmaa-font-head);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-decoration: none;
}
.jmaa-brand-header .wp-block-site-tagline,
.jmaa-brand-header .site-description {
	color: rgba(255, 255, 255, .62) !important;
	font-size: .82rem;
	letter-spacing: .04em;
}

/* A logo image sits comfortably on the dark bar. */
.jmaa-brand-header .wp-block-site-logo img {
	max-height: 68px;
	width: auto;
}

/* ---------- Top level menu items ----------------------------------------- */

.jmaa-brand-header .wp-block-navigation .wp-block-navigation-item__content,
.jmaa-brand-header .main-navigation a,
.jmaa-brand-header #site-navigation a {
	color: #FFFFFF !important;
	font-family: var(--jmaa-font);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 2px;
	border-bottom: 3px solid transparent;
	transition: color .18s var(--jmaa-ease), border-color .18s var(--jmaa-ease);
}

.jmaa-brand-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.jmaa-brand-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.jmaa-brand-header .main-navigation a:hover,
.jmaa-brand-header #site-navigation a:hover {
	color: var(--jmaa-gold) !important;
	border-bottom-color: var(--jmaa-gold);
}

/* The page you are on. */
.jmaa-brand-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.jmaa-brand-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.jmaa-brand-header .main-navigation .current-menu-item > a,
.jmaa-brand-header .main-navigation .current-menu-ancestor > a {
	color: var(--jmaa-gold) !important;
	border-bottom-color: var(--jmaa-gold);
}

/* Spacing between top level items. */
.jmaa-brand-header .wp-block-navigation__container > .wp-block-navigation-item {
	margin-inline: 4px;
}

/* ---------- Dropdowns ---------------------------------------------------- */
/* The association menu has three folders, so these carry real weight. */

.jmaa-brand-header .wp-block-navigation__submenu-container,
.jmaa-brand-header .main-navigation ul ul,
.jmaa-brand-header .sub-menu {
	background-color: var(--jmaa-black) !important;
	border: 1px solid rgba(255, 255, 255, .14) !important;
	border-top: 3px solid var(--jmaa-gold) !important;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
	padding-block: 6px;
	min-width: 230px;
}

.jmaa-brand-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.jmaa-brand-header .sub-menu a {
	display: block;
	width: 100%;
	padding: 10px 18px !important;
	font-size: .78rem;
	letter-spacing: .05em;
	border-bottom: 0;
	border-left: 3px solid transparent;
	white-space: normal;
}

.jmaa-brand-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.jmaa-brand-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.jmaa-brand-header .sub-menu a:hover {
	background: rgba(255, 255, 255, .07);
	border-left-color: var(--jmaa-gold);
	border-bottom-color: transparent;
	color: var(--jmaa-gold) !important;
}

/* The little arrow on a folder. */
.jmaa-brand-header .wp-block-navigation__submenu-icon svg {
	fill: var(--jmaa-gold);
}

/* ---------- Mobile ------------------------------------------------------- */

.jmaa-brand-header .wp-block-navigation__responsive-container-open svg,
.jmaa-brand-header .wp-block-navigation__responsive-container-close svg {
	fill: var(--jmaa-gold);
}

.jmaa-brand-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--jmaa-black) !important;
	padding-top: 76px;
}
.jmaa-brand-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #FFFFFF !important;
	font-size: 1.05rem;
	padding: 14px 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	border-left: 0;
}
.jmaa-brand-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	padding-left: 14px;
}

/* ---------- Footer ------------------------------------------------------- */

.jmaa-brand-header footer.wp-block-template-part,
.jmaa-brand-header .site-footer,
.jmaa-brand-header #colophon {
	background-color: var(--jmaa-black) !important;
	border-top: 3px solid var(--jmaa-gold);
	color: rgba(255, 255, 255, .72);
}
.jmaa-brand-header footer.wp-block-template-part a,
.jmaa-brand-header .site-footer a,
.jmaa-brand-header #colophon a {
	color: var(--jmaa-gold) !important;
}

@media (prefers-reduced-motion: reduce) {
	.jmaa-brand-header .wp-block-navigation-item__content,
	.jmaa-brand-header .main-navigation a { transition: none; }
}