/**
 * Structural announcement chrome. Colors and type come from the active theme.
 */

@property --kbd-hello-bar-height {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

@property --kbd-hello-bar-size {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

:root {
	--kbd-hello-bar-height: 0px;
	--kbd-hello-bar-size: 3.5rem;
}

.kbd-hello-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 110;
	box-sizing: border-box;
	transform: translate3d(0, -100%, 0);
	transition: transform 0.35s ease;
}

.kbd-hello-bar[hidden] {
	display: none;
}

.kbd-hello-bar.is-hidden {
	transform: translate3d(0, -100%, 0);
	pointer-events: none;
}

.kbd-hello-bar.is-in {
	transform: translate3d(0, 0, 0);
}

html.is-hello-collapsing {
	transition: --kbd-hello-bar-height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.kbd-hello-bar,
	.kbd-hello-bar.is-hidden,
	html.is-hello-collapsing {
		transition: none;
	}
}

.admin-bar .kbd-hello-bar {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .kbd-hello-bar {
		top: 46px;
	}
}

html:has(.kbd-hello-bar.is-in:not(.is-hidden)) {
	--kbd-hello-bar-height: var(--kbd-hello-bar-size);
}

body:has(.kbd-hello-bar:not([hidden])) .wp-site-blocks {
	padding-top: var(--kbd-hello-bar-height, 0px);
	transition: padding-top 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	body:has(.kbd-hello-bar:not([hidden])) .wp-site-blocks {
		transition: none;
	}
}

.kbd-hello-bar__inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 3.5rem;
	padding-block: var(--wp--preset--spacing--30, 0.75rem);
	padding-inline: var(--wp--preset--spacing--50, 1.5rem) calc(var(--wp--preset--spacing--50, 1.5rem) + 2.25rem);
}

.kbd-hello-bar__message {
	margin: 0;
}

.kbd-hello-bar__cta,
.kbd-hello-bar .wp-block-buttons {
	margin: 0;
}

.kbd-hello-bar__close {
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--40, 1rem);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	transform: translateY(-50%);
	cursor: pointer;
}

.kbd-hello-bar__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.kbd-takeover {
	box-sizing: border-box;
	padding: 0;
	overflow: hidden;
	background: transparent;
	border: 0;
	z-index: 200;
}

/*
 * Modal takeovers lock page scroll. --kbd-scrollbar-width is the classic
 * scrollbar size measured before showModal(), so overflow:hidden does not
 * shift the page when the bar appears or disappears.
 */
html:has(.kbd-takeover[open]) {
	overflow: hidden;
	padding-inline-end: var(--kbd-scrollbar-width, 0px);
}

html:has(.kbd-takeover[open]) #wpadminbar {
	width: auto;
	right: var(--kbd-scrollbar-width, 0px);
}

html:has(.kbd-takeover[open]) .kbd-hello-bar {
	right: var(--kbd-scrollbar-width, 0px);
}

.kbd-takeover[open] {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100dvh;
	padding: var(--wp--preset--spacing--50, 1.5rem);
	overflow: auto;
	background: transparent;
}

.kbd-takeover::backdrop {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast, CanvasText) 55%, transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.kbd-takeover[open]::backdrop {
	opacity: 1;
}

.kbd-takeover[open].is-closing::backdrop {
	opacity: 0;
}

.kbd-takeover__card {
	position: relative;
	box-sizing: border-box;
	width: min(48rem, 100%);
	max-height: calc(100vh - 2 * var(--wp--preset--spacing--50, 1.5rem));
	padding: var(--wp--preset--spacing--50, 1.5rem);
	overflow: auto;
	background-color: var(--wp--preset--color--base, Canvas);
	color: var(--wp--preset--color--contrast, CanvasText);
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.kbd-takeover__card:has(.kbd-takeover__layout--media) {
	width: min(64rem, 100%);
}

.kbd-takeover[open] .kbd-takeover__card {
	opacity: 1;
	transform: none;
}

.kbd-takeover[open].is-closing .kbd-takeover__card {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
}

@starting-style {
	.kbd-takeover[open] .kbd-takeover__card {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}

	.kbd-takeover[open]::backdrop {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kbd-takeover::backdrop,
	.kbd-takeover__card,
	.kbd-takeover[open] .kbd-takeover__card,
	.kbd-takeover[open].is-closing .kbd-takeover__card {
		transition: none;
		transform: none;
	}
}

.kbd-takeover__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.kbd-takeover__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.kbd-takeover__layout {
	margin: 0;
}

.kbd-takeover__layout--text {
	padding-inline: 1.5rem;
}