/**
 * Alert Banner Manager — Frontend Styles
 *
 * The banner surface (colors, spacing, min-height, justification) is a
 * core/group styled with native block supports; this stylesheet only
 * handles the wrapper concerns: positioning, sticky stacking, dismissal.
 * It also loads in the editor canvas to provide the alert-color presets.
 *
 * @package LaunchpadPro
 */

/* Alert color presets — injected into the lp_banner editor palette only
   (see ensureAlertPalette in banner-manager-editor.js), so theme.json never
   carries them and core generates no CSS for them. Mirror core's preset rules. */
:root {
	--wp--preset--color--lp-alert-yellow: #ffd500;
	--wp--preset--color--lp-alert-red: #dc2626;
}

.has-lp-alert-yellow-background-color {
	background-color: var(--wp--preset--color--lp-alert-yellow) !important;
}

.has-lp-alert-yellow-color {
	color: var(--wp--preset--color--lp-alert-yellow) !important;
}

.has-lp-alert-red-background-color {
	background-color: var(--wp--preset--color--lp-alert-red) !important;
}

.has-lp-alert-red-color {
	color: var(--wp--preset--color--lp-alert-red) !important;
}

/* --- Wrapper --- */

.lp-banner {
	position: relative;
	width: 100%;
}

.lp-banner[hidden] {
	display: none !important;
}

.lp-banner--dismissing {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* The bar group fills the wrapper; kill any stray root margins so the
   sticky box hugs the viewport edge. */
.lp-banner__content > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Outline CTA inside a banner: the theme.json outline variation pins resting
   text/border to primary, which clashes with colored banner surfaces (purple
   on Alert Yellow). Inherit the bar's own text color instead, with the
   border following — unless the author explicitly sets either (:not guards
   keep author choices in charge, like core's own outline rules).
   Hover mirrors the theme-wide button hover system (button-styles.css /
   button-hover.js): fill with the measured border color, luminance-picked
   text; restated here because the rest rules above out-rank the global
   hover selectors. */
.lp-banner .is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: inherit;
}

.lp-banner .is-style-outline .wp-block-button__link:not(.has-border-color) {
	border-color: currentColor;
}

.lp-banner .is-style-outline .wp-block-button__link:hover,
.lp-banner .is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--lp-btn-hover-bg, var(--wp--preset--color--primary));
	border-color: var(--lp-btn-hover-bg, var(--wp--preset--color--primary)) !important;
	color: var(--lp-btn-hover-text, var(--wp--preset--color--surface)) !important;
}

.lp-banner__close {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
}

.lp-banner__close:hover,
.lp-banner__close:focus {
	background: rgba(0, 0, 0, 0.5);
}

/* --- Top banner: sticky, below the admin bar when logged in --- */

.lp-banner--top {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Mobile admin bar (< 783px) is 46px tall */
.admin-bar .lp-banner--top {
	top: 46px;
}

/* Desktop admin bar (>= 783px) is 32px tall */
@media screen and (min-width: 783px) {
	.admin-bar .lp-banner--top {
		top: 32px;
	}
}

/* --- Bottom banner: fixed to the viewport --- */

.lp-banner--bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* Reserve space so the fixed bottom banner never hides footer content.
   --lp-banner-bottom-offset is kept in sync with the rendered height by JS. */
body:has(.lp-banner--bottom:not([hidden])) {
	padding-bottom: var(--lp-banner-bottom-offset, 48px);
}

/* --- Sticky-header stacking: the header sticks below the top banner.
   --lp-banner-top-offset is kept in sync with the rendered height by JS,
   and the :has() guards drop the offset as soon as the banner is dismissed. --- */

body:has(.lp-banner--top:not([hidden])) header.site-header:has(.is-position-sticky) {
	top: var(--lp-banner-top-offset, 48px);
}

body.admin-bar:has(.lp-banner--top:not([hidden])) header.site-header:has(.is-position-sticky) {
	top: calc(46px + var(--lp-banner-top-offset, 48px));
}

@media screen and (min-width: 783px) {
	body.admin-bar:has(.lp-banner--top:not([hidden])) header.site-header:has(.is-position-sticky) {
		top: calc(32px + var(--lp-banner-top-offset, 48px));
	}
}