.webao-custom-header {
	position: relative;
	z-index: 999;
	width: 100%;
}

.webao-custom-footer {
	position: relative;
	z-index: 1;
	width: 100%;
}

.webao-custom-header--sticky {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
}

.webao-custom-header--transparent {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0);
	left: 0;
}

.webao-custom-header__logo {
	display: block;
	max-width: 100%;
	height: auto;
}

.webao-custom-header__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.webao-custom-header__toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.webao-custom-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.webao-custom-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.webao-custom-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 783px) {
	.admin-bar .webao-custom-header--sticky,
	.admin-bar .webao-custom-header--transparent { --wp-admin--admin-bar--height: 32px; }
}

@media (max-width: 782px) {
	.admin-bar .webao-custom-header--sticky,
	.admin-bar .webao-custom-header--transparent { --wp-admin--admin-bar--height: 46px; }
}