/*
 * QoT header brand pass (workstream B, 2026-09-05).
 * Root cause per 09-Reports/2026-08-29_HANDOVER_qot-header-quiz-funnel.md s5:
 * theme_mods_qot-theme carries zero header configuration, so the header
 * renders stock Kadence defaults. Per CEO ruling D3 the header follows the
 * footer precedent: child-theme CSS + render filters, never a theme_mods
 * write. This file styles what Kadence already outputs (B-route 2): navy
 * ground, brand type, WCAG AA contrast on navy, one gold CTA pill
 * (injected by functions.php section 19 as .qot-header-cta).
 * Tokens: 02-Brand/design-tokens.json via the :root vars in style.css.
 */

/* Ground: navy on both desktop and mobile header wraps. */
#masthead,
#masthead .site-header-wrap,
#masthead .site-mobile-header-wrap,
#masthead .site-main-header-wrap {
	background: var(--navy-700);
}

/* Brand: constrain the square logo, set the wordmark. */
#masthead .site-branding img.custom-logo {
	max-height: 46px;
	width: auto;
	border-radius: 6px;
}
#masthead .site-title {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 600;
	color: #f4f7fb;
	margin: 0;
}
#masthead .site-branding a.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

/* Primary nav: light links on navy, gold hover, AA contrast. */
#masthead .main-navigation .primary-menu-container > ul > li > a {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 500;
	color: #f4f7fb;
}
#masthead .main-navigation .primary-menu-container > ul > li > a:hover,
#masthead .main-navigation .primary-menu-container > ul > li > a:focus,
#masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--gold-400);
}
#masthead .main-navigation .dropdown-nav-toggle,
#masthead .main-navigation .kadence-svg-iconset {
	color: inherit;
}

/* Submenu: navy-800 panel, light links, soft border. */
#masthead .main-navigation ul.sub-menu {
	background: var(--navy-800);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(14, 31, 58, .35);
}
#masthead .main-navigation ul.sub-menu li a {
	font-family: var(--font-sans);
	font-size: 14.5px;
	color: #e5ecf3;
	background: transparent;
}
#masthead .main-navigation ul.sub-menu li a:hover,
#masthead .main-navigation ul.sub-menu li a:focus {
	color: var(--gold-400);
	background: rgba(255, 255, 255, .05);
}

/* The single conversion action: gold pill to /start-here/. */
#masthead .qot-header-cta {
	display: flex;
	align-items: center;
	margin-left: 10px;
}
#masthead .qot-header-cta > a {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--navy-900);
	background: var(--gold-500);
	border-radius: 999px;
	padding: 11px 22px;
	transition: background 140ms cubic-bezier(.2, .8, .2, 1);
}
#masthead .qot-header-cta > a:hover,
#masthead .qot-header-cta > a:focus {
	color: var(--navy-900);
	background: var(--gold-400);
}

/* One gold CTA per screen: on Start Here itself (hero leads gold), the
 * header pill downgrades to a quiet outline. */
.page-id-2458 #masthead .qot-header-cta > a {
	background: transparent;
	color: var(--gold-400);
	box-shadow: inset 0 0 0 1px rgba(212, 180, 131, .55);
}
.page-id-2458 #masthead .qot-header-cta > a:hover,
.page-id-2458 #masthead .qot-header-cta > a:focus {
	background: rgba(212, 180, 131, .12);
	color: var(--gold-300);
}

/* Mobile: toggle + drawer on navy; drawer CTA becomes a full-width button. */
#mobile-header .menu-toggle-open,
#mobile-header .search-toggle-open {
	color: #f4f7fb;
}
#mobile-drawer .drawer-inner {
	background: var(--navy-800);
}
#mobile-drawer .drawer-inner ul li a,
#mobile-drawer .drawer-header .menu-toggle-close {
	color: #f4f7fb;
}
#mobile-drawer .drawer-inner ul li a:hover,
#mobile-drawer .drawer-inner ul li a:focus {
	color: var(--gold-400);
}
#mobile-drawer .qot-header-cta {
	margin: 14px 0 4px;
}
#mobile-drawer .qot-header-cta > a {
	display: block;
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 600;
	color: var(--navy-900);
	background: var(--gold-500);
	border-radius: 999px;
	padding: 13px 22px;
}