/**
 * HobbyPlus site navigation — clean bar, theme-friendly.
 * Injected strip + Twenty Twenty-Five header pattern share these tokens.
 */

.hlp-top-menu-strip,
.hlp-m3-header-root {
	--hlp-nav-surface: var(--wp--preset--color--base, #ffffff);
	--hlp-nav-ink: var(--wp--preset--color--contrast, #0a0a0a);
	--hlp-nav-muted: color-mix(in srgb, var(--hlp-nav-ink) 58%, transparent);
	--hlp-nav-faint: color-mix(in srgb, var(--hlp-nav-ink) 10%, transparent);
	--hlp-nav-hover: color-mix(in srgb, var(--hlp-nav-ink) 5%, transparent);
	--hlp-nav-accent: var(--wp--preset--color--accent-3, #4338ca);
	--hlp-nav-max: var(--wp--style--global--wide-size, 1280px);
}

/* -------------------------------------------------------------------------
 * One bar only: injected strip already shows title + menu — hide theme header
 * ------------------------------------------------------------------------- */
body.hlp-injected-top-menu .wp-site-blocks > header:first-child {
	display: none !important;
}

@supports selector(:has(a)) {
	body.hlp-injected-top-menu .wp-site-blocks > :first-child:has(
			.wp-block-site-title,
			.hlp-m3-header-root,
			.hlp-m3-app-bar,
			.hlp-simple-nav,
			.wp-block-navigation
		) {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Injected top bar
 * ------------------------------------------------------------------------- */
.hlp-top-menu-strip {
	position: relative;
	z-index: 99;
	margin: 0;
	padding: 0;
	padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
	background: var(--hlp-nav-surface);
	border-bottom: 1px solid var(--hlp-nav-faint);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

.hlp-top-menu-strip__inner {
	max-width: var(--hlp-nav-max);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1rem max(1.25rem, env(safe-area-inset-left, 0px)) 1rem max(1.25rem, env(safe-area-inset-right, 0px));
	box-sizing: border-box;
}

.hlp-top-menu-strip__brand {
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--hlp-nav-ink);
	text-decoration: none;
	transition: color 0.18s ease, opacity 0.18s ease;
}

.hlp-top-menu-strip__brand:hover {
	color: var(--hlp-nav-accent);
	opacity: 1;
}

.hlp-top-menu-strip__brand:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--hlp-nav-accent) 55%, transparent);
	outline-offset: 3px;
	border-radius: 4px;
}

.hlp-top-menu-strip__brand--logo {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	line-height: 1.25;
}

.hlp-top-menu-strip__logo {
	display: block;
	flex-shrink: 0;
	height: auto;
	max-height: 2.75rem;
	width: auto;
	max-width: min(220px, 52vw);
	object-fit: contain;
}

.hlp-top-menu-strip__title {
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--hlp-nav-ink);
}

.hlp-top-menu-strip__brand--logo:hover .hlp-top-menu-strip__title {
	color: var(--hlp-nav-accent);
}

.hlp-top-menu-strip .hlp-simple-nav {
	justify-content: flex-end;
	flex: 1 1 auto;
	min-width: min(100%, 14rem);
}

/* -------------------------------------------------------------------------
 * Theme header (pattern: .hlp-m3-header-root / .hlp-m3-app-bar)
 * ------------------------------------------------------------------------- */
.hlp-m3-header-root {
	box-sizing: border-box;
	padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
	padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
	padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
	background: var(--hlp-nav-surface);
	border-bottom: 1px solid var(--hlp-nav-faint);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
}

.hlp-m3-app-bar {
	box-sizing: border-box;
	max-width: var(--hlp-nav-max);
	margin-left: auto;
	margin-right: auto;
	background: transparent;
	color: var(--hlp-nav-ink);
	border: none;
	box-shadow: none;
	min-height: unset;
	width: 100%;
}

.hlp-m3-app-bar .wp-block-site-title,
.hlp-m3-app-bar .wp-block-site-title a {
	font-family: inherit;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	letter-spacing: -0.025em;
	font-size: 1.0625rem;
	line-height: 1.25;
	transition: color 0.18s ease;
}

.hlp-m3-app-bar .wp-block-site-title a:hover {
	color: var(--hlp-nav-accent);
}

.hlp-m3-app-bar .wp-block-site-title a:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--hlp-nav-accent) 55%, transparent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * Nav links — text-first, quiet hovers
 * ------------------------------------------------------------------------- */
.hlp-simple-nav,
.hlp-header-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.125rem 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: 1.4;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
}

.hlp-simple-nav--vertical,
.hlp-header-nav--vertical {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.125rem;
}

.hlp-simple-nav a,
.hlp-simple-nav__link,
.hlp-header-nav__link {
	color: var(--hlp-nav-muted);
	text-decoration: none;
	font-weight: 500;
	border-radius: 8px;
	border: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.hlp-simple-nav:not(.hlp-simple-nav--vertical) a,
.hlp-simple-nav:not(.hlp-simple-nav--vertical) .hlp-simple-nav__link,
.hlp-header-nav:not(.hlp-header-nav--vertical) .hlp-header-nav__link {
	padding: 0.5rem 0.75rem;
}

.hlp-simple-nav:not(.hlp-simple-nav--vertical) a:hover,
.hlp-simple-nav:not(.hlp-simple-nav--vertical) a:focus-visible,
.hlp-simple-nav:not(.hlp-simple-nav--vertical) .hlp-simple-nav__link:hover,
.hlp-simple-nav:not(.hlp-simple-nav--vertical) .hlp-simple-nav__link:focus-visible,
.hlp-header-nav:not(.hlp-header-nav--vertical) .hlp-header-nav__link:hover,
.hlp-header-nav:not(.hlp-header-nav--vertical) .hlp-header-nav__link:focus-visible {
	color: var(--hlp-nav-ink);
	background-color: var(--hlp-nav-hover);
}

.hlp-simple-nav--vertical a,
.hlp-simple-nav--vertical .hlp-simple-nav__link,
.hlp-header-nav--vertical .hlp-header-nav__link {
	padding: 0.45rem 0.65rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.hlp-simple-nav--vertical a:hover,
.hlp-simple-nav--vertical a:focus-visible,
.hlp-simple-nav--vertical .hlp-simple-nav__link:hover,
.hlp-simple-nav--vertical .hlp-simple-nav__link:focus-visible,
.hlp-header-nav--vertical .hlp-header-nav__link:hover,
.hlp-header-nav--vertical .hlp-header-nav__link:focus-visible {
	color: var(--hlp-nav-ink);
	background-color: var(--hlp-nav-hover);
}

.hlp-simple-nav__link--register {
	color: var(--hlp-nav-accent);
	font-weight: 600;
}

.hlp-simple-nav__link--register:hover,
.hlp-simple-nav__link--register:focus-visible {
	background-color: color-mix(in srgb, var(--hlp-nav-accent) 12%, transparent);
	color: var(--hlp-nav-accent);
}

.hlp-simple-nav__link--subscribe {
	color: var(--hlp-nav-accent);
	font-weight: 600;
}

.hlp-simple-nav__link--subscribe:hover,
.hlp-simple-nav__link--subscribe:focus-visible {
	background-color: color-mix(in srgb, var(--hlp-nav-accent) 12%, transparent);
	color: var(--hlp-nav-accent);
}

.hlp-simple-nav__link--logout,
.hlp-header-nav__link--logout {
	font-weight: 600;
}

.hlp-header-nav__link--logout:hover,
.hlp-header-nav__link--logout:focus-visible {
	color: var(--hlp-nav-ink);
}

/* Vertical strip inside footer: inherit parent color */
.hlp-top-menu-strip,
.hlp-m3-header-root {
	color: var(--hlp-nav-ink);
}