/*
 * Ohio theme - Header style 9 (audience switch)
 * Colors/spacing/radius are pulled from the theme's own CSS custom
 * properties (--clb-*), so changing the site's brand colors in
 * Theme Settings > Appearance restyles this header automatically.
 */

.header.header-9 .header-wrap-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--clb-spacer-2, 1rem);
}

.header.header-9 .left-part {
	display: flex;
	align-items: center;
	gap: var(--clb-spacer-3, 1.5rem);
}

.header.header-9 .right-part {
	display: flex;
	align-items: center;
	gap: var(--clb-spacer-2, 1rem);
}

/* Audience switch (pill toggle). The TRACK's height is what should match
   the header logo height - it's the element's actual visual footprint.
   Items stretch to fill it, so there's a single clean pill outline instead
   of a smaller pill floating inside a taller one. */
.header-9-switch {
	display: inline-flex;
	align-items: stretch;
	box-sizing: border-box;
	gap: 2px;
	padding: 4px;
	min-height: 48px; /* overridden per-breakpoint to match the header logo height, see inc/dynamic_css/parts/header.php */
	background-color: var(--clb-color-fill);
	border-radius: var(--clb-border-radius-large, 999px);
}

.header-9-switch-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 0 1.3rem;
	border-radius: var(--clb-border-radius-large, 999px);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--clb-text-color);
	text-decoration: none !important;
	transition: background-color var(--clb-transition-duration, 0.2s) var(--clb-transition-function, ease), color var(--clb-transition-duration, 0.2s) var(--clb-transition-function, ease);
}

.header-9-switch-icon {
	width: 1.3em;
	height: 1.3em;
	margin-right: 0.5em;
	object-fit: contain;
	flex-shrink: 0;
}

.header-9-switch-item:hover {
	color: var(--clb-color-primary);
}

.header-9-switch-item.-active,
.header-9-switch-item.-active:hover {
	background-color: var(--clb-color-button);
	color: var(--clb-color-white);
}

/* Mobile top bar: theme toggles the "-mobile" class on #masthead based on
   the configured "Mobile Menu Resolution" setting (Theme Settings > Header).
   Just logo + hamburger - the switch pill and desktop CTAs are hidden;
   the hamburger opens the mobile menu panel instead. */
.header.header-9.-mobile .left-part .header-9-switch {
	display: none;
}

.header.header-9.-mobile .header-9-ctas {
	display: none;
}

.header.header-9.-mobile .header-9-mobile-toggle {
	display: inline-flex;
}

.header.header-9:not(.-mobile) .header-9-mobile-toggle {
	display: none;
}

/* Mobile menu panel (hamburger). Hidden by default, toggled via JS. */
.header-9-mobile-panel {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999;
	overflow-y: auto;
	background-color: var(--clb-color-white);
}

.header-9-mobile-panel.-open {
	display: block;
}

body.header-9-menu-open {
	overflow: hidden;
}

.header-9-mobile-panel-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: var(--clb-spacer-4, 2rem) var(--clb-spacer-3, 1.5rem);
	gap: var(--clb-spacer-4, 2rem);
}

.header-9-mobile-close {
	position: absolute;
	top: var(--clb-spacer-2, 1rem);
	right: var(--clb-spacer-2, 1rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--clb-color-fill);
	color: var(--clb-text-color);
	cursor: pointer;
}

.header-9-mobile-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: var(--clb-spacer-1, 0.5rem);
	padding-top: var(--clb-spacer-3, 1.5rem);
}

.header-9-mobile-logo img {
	max-height: 55px;
	width: auto;
}

.header-9-mobile-tagline {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--clb-text-color);
}

.header-9-mobile-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--clb-spacer-1, 0.5rem);
}

.header-9-mobile-link {
	width: 100%;
	padding: var(--clb-spacer-1, 0.5rem) 0;
	font-size: 1.15rem;
	font-weight: 600;
	text-align: left;
	color: var(--clb-title-color, var(--clb-text-color));
	text-decoration: none !important;
	border-bottom: 1px solid var(--clb-color-border);
}

.header-9-mobile-link:hover {
	color: var(--clb-color-primary);
}

.header-9-mobile-ctas {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--clb-spacer-1, 0.5rem);
	margin-top: auto;
}

.header-9-mobile-cta.button {
	width: 100%;
	justify-content: center;
}