/*
 * Copyright (c) 2026 Angelsportverein Zeven e.V.
 * Autor: Yannik Mühlthaler
 * Alle Rechte vorbehalten.
 */

.asv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	background: #fff;
	transition: box-shadow 150ms ease, background-color 150ms ease;
}

.asv-header.asv-header--scrolled {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* WordPress blockGap (24px) nur im Header deaktivieren – Abstände per Theme-CSS. */
.asv-header .is-layout-flex {
	gap: 0;
}

.asv-header .asv-header__actions-buttons.is-layout-flex {
	gap: 1rem;
}

.asv-header__inner {
	position: relative;
	max-width: 85rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0.75rem;
}

@media (min-width: 640px) {
	.asv-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media (min-width: 1024px) {
	.asv-header__inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

.asv-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 0;
}

.asv-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.asv-header .wp-block-site-logo {
	line-height: 0;
	margin: 0;
}

.asv-header .wp-block-site-logo img {
	display: block;
	height: 2rem;
	width: auto;
	max-height: 2rem;
}

@media (min-width: 640px) {
	.asv-header .wp-block-site-logo img {
		height: 2.5rem;
		max-height: 2.5rem;
	}
}

.asv-header__nav.wp-block-navigation {
	flex: 0 1 auto;
	position: relative;
	min-width: 0;
	gap: 0;
	--asv-nav-color: #374151;
	--asv-nav-color-hover: #166534;
	--asv-nav-gap: 1rem;
}

@media (min-width: 1024px) {
	.asv-header__nav {
		--asv-nav-gap: 1.5rem;
	}
}

/* Desktop: horizontale Links zwischen Logo und Aktionen (ab sm wie React) */
@media (min-width: 640px) {
	.asv-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}

	.asv-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block;
		width: auto;
		position: static;
	}

	.asv-header__nav .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0;
	}
}

.asv-header__nav .wp-block-navigation__container,
.asv-header__nav ul.menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--asv-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.asv-header__nav .wp-block-navigation-item,
.asv-header__nav .menu-item {
	margin: 0;
	align-items: center;
}

.asv-header__nav .wp-block-navigation-item__content {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.asv-header__nav .asv-nav-item__label {
	display: block;
}

.asv-header__nav .asv-nav-item__description {
	display: none;
}

.asv-header__nav a,
.asv-header__nav .wp-block-navigation-item__content {
	text-decoration: none;
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.25;
	color: var(--asv-nav-color);
	padding: 0.5rem;
}

@media (min-width: 1024px) {
	.asv-header__nav a,
	.asv-header__nav .wp-block-navigation-item__content {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

.asv-header__nav a:hover,
.asv-header__nav a:focus-visible,
.asv-header__nav .wp-block-navigation-item__content:hover,
.asv-header__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--asv-nav-color-hover);
}

.asv-header__nav .current-menu-item > a,
.asv-header__nav .current_page_item > a,
.asv-header__nav .current-menu-item > .wp-block-navigation-item__content,
.asv-header__nav .current_page_item > .wp-block-navigation-item__content {
	color: var(--asv-nav-color-hover);
}

/* Desktop-Aktionen (rechts) */
.asv-header__actions {
	display: none;
	flex: 0 0 auto;
	align-items: center;
}

@media (min-width: 640px) {
	.asv-header__actions {
		display: flex;
		margin-left: 1.5rem;
	}
}

.asv-header__actions-buttons {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.asv-header__btn--loginout {
	display: flex;
	align-items: center;
	margin: 0;
}

/* Höhere Spezifität als .wp-block-buttons > .wp-block-button */
.asv-header__actions-buttons > .wp-block-button.asv-header__btn--dashboard {
	display: none;
}

.logged-in .asv-header__actions-buttons > .wp-block-button.asv-header__btn--dashboard {
	display: inline-block;
}

.asv-header__mobile-actions .wp-block-button.asv-header__btn--dashboard {
	display: none;
}

.logged-in .asv-header__mobile-actions .wp-block-button.asv-header__btn--dashboard {
	display: block;
}

.asv-header__actions .wp-block-button__link,
.asv-header__btn--loginout a {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	padding: 0.5rem 0.875rem;
	border-radius: 0.5rem;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.asv-header__btn--loginout a,
.asv-header__btn--loginout a:visited,
.asv-header__btn--dashboard .wp-block-button__link {
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #1f2937;
}

.asv-header__btn--loginout a:hover,
.asv-header__btn--loginout a:focus-visible,
.asv-header__btn--dashboard .wp-block-button__link:hover,
.asv-header__btn--dashboard .wp-block-button__link:focus-visible {
	background: #f9fafb;
	color: #1f2937;
}

.logged-in .asv-header__btn--loginout a,
.logged-in .asv-header__btn--loginout a:visited {
	border: 1px solid transparent;
	background: #166534;
	color: #fff;
	box-shadow: none;
}

.logged-in .asv-header__btn--loginout a:hover,
.logged-in .asv-header__btn--loginout a:focus-visible {
	background: #14532d;
	color: #fff;
}

.asv-header__btn--loginout a:focus-visible,
.asv-header__btn--dashboard .wp-block-button__link:focus-visible {
	outline: 2px solid #166534;
	outline-offset: 2px;
}

/* Mobile-Menü-Toggle (wie layout.tsx) */
.asv-header__toggle {
	display: none;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #374151;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.asv-header__toggle:hover,
.asv-header__toggle:focus-visible {
	background: #f9fafb;
	outline: 2px solid #166534;
	outline-offset: 2px;
}

.asv-header__toggle-icon {
	display: block;
	width: 1rem;
	height: 1rem;
}

.asv-header__toggle-icon--close {
	display: none;
}

.asv-header--menu-open .asv-header__toggle-icon--open {
	display: none;
}

.asv-header--menu-open .asv-header__toggle-icon--close {
	display: block;
}

/* Mobile-Panel unter der Header-Leiste */
.asv-header__mobile-panel {
	display: none;
	width: 100%;
	border-top: 1px solid #e5e7eb;
	background: #fff;
}

.asv-header__mobile-panel:not([hidden]) {
	display: block;
}

.asv-header__mobile-panel .is-layout-flex {
	gap: 0;
}

.asv-header__mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 0.75rem;
}

.asv-header__mobile-nav-item {
	margin: 0;
}

.asv-header__mobile-link {
	display: block;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	color: #111827;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
}

.asv-header__mobile-link:hover,
.asv-header__mobile-link:focus-visible {
	background: #f9fafb;
	color: #166534;
	outline: none;
}

.asv-header__mobile-label {
	display: block;
}

.asv-header__mobile-desc {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.25;
	color: #6b7280;
}

.asv-header__mobile-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	border-top: 1px solid #e5e7eb;
	padding: 1.25rem 1rem;
}

.asv-header__mobile-action {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
}

.asv-header__mobile-action--secondary {
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #1f2937;
}

.asv-header__mobile-action--secondary:hover,
.asv-header__mobile-action--secondary:focus-visible {
	background: #f9fafb;
	color: #1f2937;
}

.asv-header__mobile-action--primary {
	border: 1px solid transparent;
	background: #166534;
	color: #fff;
}

.asv-header__mobile-action--primary:hover,
.asv-header__mobile-action--primary:focus-visible {
	background: #14532d;
	color: #fff;
}

.asv-header__mobile-action:focus-visible {
	outline: 2px solid #166534;
	outline-offset: 2px;
}

/* Mobile: eigenes Menü, WP-Navigation nur Desktop */
@media (max-width: 639px) {
	.asv-header__bar {
		align-items: center;
	}

	.asv-header__brand {
		flex: 0 0 auto;
	}

	.asv-header__toggle {
		display: inline-flex;
		margin-left: auto;
	}

	.asv-header__nav,
	.asv-header__actions {
		display: none !important;
	}
}

@media (min-width: 640px) {
	.asv-header__toggle,
	.asv-header__mobile-panel {
		display: none !important;
	}
}