/**
 * 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;
}

/* The alert backgrounds are fixed, so their default text is too: inheriting
   the contrast preset turns it near-white in dark mode, unreadable on yellow.
   An editor-picked text colour (.has-text-color) still wins. */
.has-lp-alert-yellow-background-color:not(.has-text-color) {
	color: #12141b;
}

.has-lp-alert-red-background-color:not(.has-text-color) {
	color: #fff;
}

/* Links follow the bar's text rather than the primary preset (which lightens
   in dark mode), unless the editor set a link colour. */
.has-lp-alert-yellow-background-color:not(.has-link-color) a:where(:not(.wp-element-button)),
.has-lp-alert-red-background-color:not(.has-link-color) a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: underline;
}

/* Dark mode flips every preset, including a text or link colour the editor
   picked against the light palette (contrast on yellow is the usual one),
   while the alert background stays put. Pin the surface and what's on it. */
html[data-theme="dark"] .has-lp-alert-yellow-background-color,
html[data-theme="dark"] .has-lp-alert-yellow-background-color .has-text-color:not(.has-background) {
	color: #12141b !important;
}

html[data-theme="dark"] .has-lp-alert-red-background-color,
html[data-theme="dark"] .has-lp-alert-red-background-color .has-text-color:not(.has-background) {
	color: #fff !important;
}

html[data-theme="dark"] .has-lp-alert-yellow-background-color a:where(:not(.wp-element-button)),
html[data-theme="dark"] .has-lp-alert-red-background-color a:where(:not(.wp-element-button)) {
	color: inherit !important;
	text-decoration: underline;
}

/* --- 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));
	}
}