/**
 * Peptilab — Top Banner
 *
 * Fixed announcement bar above the site header. Visible always
 * (including when the header transitions to its sticky/scrolled
 * state), so the .site-header rules below shift the header down
 * by the topbar height when body.has-pl-topbar is set.
 */

:root {
	--pl-topbar-h-min: 40px;        /* fixed baseline for min-height of the bar */
	--pl-topbar-h:    40px;        /* actual rendered height — JS keeps this in sync */
	--pl-admin-bar-h: 0px;
}

@media (max-width: 600px) {
	:root {
		--pl-topbar-h-min: 36px;
		--pl-topbar-h:    36px;
	}
}

/* WordPress admin bar offset (only set when body.admin-bar is present).
   WP itself uses 32px desktop / 46px on screens ≤782px. */
body.admin-bar {
	--pl-admin-bar-h: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--pl-admin-bar-h: 46px;
	}
}

/* Sticky topbar — pinned to the top of the viewport (just below the WP
 * admin bar if present). `-webkit-sticky` is the legacy iOS Safari prefix
 * (pre-13), keeping it as a fallback for older devices.
 *
 * Static positioning intentionally — no JS-tracked CSS vars for URL-bar
 * height etc. The browser handles fixed/sticky offsets natively against
 * the visual viewport on all modern mobile browsers. */
.pl-topbar {
	position:    -webkit-fixed;
	position:    fixed;
	top:         var(--pl-admin-bar-h, 0px);
	left:        0;
	right:       0;
	z-index:     1001; /* above .site-header (z-index in the hundreds);
	                      WP admin bar is 99999 so it always sits on top of us */
	display:     flex;
	align-items: center;
	justify-content: center;
	min-height:  var(--pl-topbar-h-min, 40px);
	padding:     8px 12px;
	background:  var(--pl-topbar-bg, #1A1A1A);
	color:       var(--pl-topbar-fg, #FFFFFF);
	font-family: var(--pl-font-body, Inter, sans-serif);
	font-size:   var(--pl-topbar-fs, 13px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	/* iOS: respect bottom safe-area insets (notch / home-indicator) — only
	 * matters if topbar visually wraps near edges. Cheap, no-op on desktop. */
	padding-left:  max(12px, env(safe-area-inset-left));
	padding-right: max(12px, env(safe-area-inset-right));
}
body:has(.pl-topbar) {
    padding-top: var(--pl-topbar-h, 0px);
}
body:has(.pl-topbar) .site-header .wp-block-navigation__responsive-container.has-modal-open  {
    top:                    var(--pl-topbar-h, 0px);
}
/* All slides share the same grid cell — the cell auto-sizes to the
   tallest slide, so the bar grows naturally for multi-line content. */
.pl-topbar__viewport {
	flex:        1;
	max-width:   900px;
	display:     grid;
	grid-template-columns: 1fr;
	text-align:  center;
}

.pl-topbar__slide {
	grid-column: 1;
	grid-row:    1;
	display:     flex;
	align-items: center;
	justify-content: center;
	padding:     0 8px;
	opacity:     0;
	transform:   translateY(6px);
	transition:  opacity .35s ease, transform .35s ease;
	pointer-events: none;
}

.pl-topbar__slide.is-active {
	opacity:        1;
	transform:      translateY(0);
	pointer-events: auto;
}

.pl-topbar__link {
	color:           inherit;
	text-decoration: none;
	border-bottom:   1px solid transparent;
	padding-bottom:  1px;
	transition:      border-color .15s ease;
}

.pl-topbar__link:hover,
.pl-topbar__link:focus-visible {
	color:               inherit;
	border-bottom-color: currentColor;
	outline:             none;
}

.pl-topbar__nav {
	flex-shrink:    0;
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	width:          28px;
	height:         28px;
	margin:         0 4px;
	padding:        0;
	background:     transparent;
	border:         0;
	border-radius:  50%;
	color:          var(--pl-topbar-arrow, var(--pl-topbar-fg, #FFFFFF));
	cursor:         pointer;
	transition:     background .15s ease, transform .15s ease;
}

.pl-topbar__nav:hover {
	background: color-mix(in srgb, var(--pl-topbar-arrow, #FFFFFF) 12%, transparent);
}

.pl-topbar__nav:focus-visible {
	outline: 2px solid var(--pl-topbar-arrow, #FFFFFF);
	outline-offset: 2px;
}

.pl-topbar__nav:active {
	transform: scale(0.92);
}

.pl-topbar__nav svg {
	display: block;
}

/* ============================================================
   Page layout offsets when banner is active
   ============================================================ */


/* On My Account the header is forced to position: relative — body
   padding-top already pushes it correctly, and a `top` offset would
   leave a phantom gap where the header reserved its in-flow slot. */
body.has-pl-topbar.woocommerce-account .site-header,
body.has-pl-topbar.woocommerce-account .site-header.is-scrolled {
	top: auto !important;
}