/* Header and footer bars: outline inset, dividers, gradients, placement. */

/* ---------- Header ---------- */
.ylb-header {
	position: relative;
	min-height: clamp(48px, 5.76vw, 83px);
	background-image: var(--ylb-grain-light), radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.24) 100%);
	box-sizing: border-box;
}

.ylb-header::before {
	content: "";
	position: absolute;
	inset: clamp(4px, 0.6vw, 9px);
	border: 1px solid rgba(190, 150, 225, 0.45);
	border-radius: clamp(6px, 0.8vw, 11px);
	pointer-events: none;
}

.ylb-header > * {
	margin-block: 0;
}

.ylb-header .wp-block-image {
	margin: 0;
	line-height: 0;
}

.ylb-header .wp-block-image img {
	height: auto;
	max-width: none;
}

.ylb-header__nav {
	margin-inline-end: clamp(14px, 2.7vw, 38px);
}

.ylb-header__nav .wp-block-navigation__container {
	gap: 0;
}

.ylb-header__nav .wp-block-navigation-item {
	position: relative;
}

.ylb-header__nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 1.6em;
	transform: translateY(-50%);
	border-left: 1px solid rgba(190, 150, 225, 0.28);
}

/* No desktop separators inside the open mobile overlay. */
.ylb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: none;
	display: none;
}

.ylb-header__nav .wp-block-navigation-item__content {
	padding: 0 clamp(12px, 2.3vw, 33px);
	text-decoration: none;
	letter-spacing: 0.01em;
}

.ylb-header__nav .wp-block-navigation-item__content:hover,
.ylb-header__nav .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--gold);
}

.ylb-header__nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--lilac-white);
}

/* ---------- Footer ---------- */
.ylb-footer {
	position: relative;
	min-height: clamp(62px, 7.42vw, 106px);
	background-image: var(--ylb-grain-light), radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.24) 100%), linear-gradient(90deg, #431f61, #4a2169 50%, #431f61);
	border-top: 1px solid rgba(190, 150, 225, 0.35);
	box-sizing: border-box;
	column-gap: clamp(14px, 2.4vw, 34px);
}

.ylb-footer::before {
	content: "";
	position: absolute;
	inset: clamp(5px, 0.8vw, 11px);
	border: 1px dashed rgba(190, 150, 225, 0.3);
	border-radius: clamp(6px, 0.8vw, 11px);
	pointer-events: none;
}

.ylb-footer > * {
	margin-block: 0;
}

.ylb-footer p {
	line-height: 1.3;
}

.ylb-footer__tagline {
	margin-inline-start: clamp(0px, 11.2vw, 160px) !important;
}

.ylb-footer__social {
	gap: clamp(8px, 1.2vw, 17px);
}

.ylb-footer__social .wp-social-link {
	width: clamp(28px, 3.32vw, 47px);
	height: clamp(28px, 3.32vw, 47px);
	border-radius: 50%;
	font-size: clamp(14px, 1.7vw, 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

/* The editor renders each icon as a button instead of a link. */
.ylb-footer__social .wp-social-link a,
.ylb-footer__social .wp-social-link .wp-block-social-link-anchor {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	background: none;
	border: 0;
	color: inherit;
}

.ylb-footer__social .wp-social-link svg {
	width: 1em;
	height: 1em;
}

.ylb-footer__social .wp-social-link-facebook {
	background: #1877f2;
}

.ylb-footer__social .wp-social-link-twitter {
	background: #1da1f2;
}

.ylb-footer__social .wp-social-link-youtube {
	background: #ff0000;
}

.ylb-footer__social .wp-social-link-instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.ylb-footer .wp-block-image.ylb-footer__books {
	z-index: 1;
	position: absolute;
	right: clamp(8px, 1.4vw, 20px);
	bottom: 0;
	margin: 0;
	line-height: 0;
}

.ylb-footer__books img {
	height: auto;
	max-width: none;
	display: block;
}

@media (max-width: 781px) {
	.ylb-footer {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding: 20px 20px 16px !important;
		row-gap: 10px;
	}

	.ylb-footer__tagline {
		margin-inline-start: 0 !important;
	}

	.ylb-footer__social {
		margin-inline-end: 0;
	}

	.ylb-footer .wp-block-image.ylb-footer__books {
		position: static;
	}
}