/* ─────────────────────────────────────────────────────────────────────────────────────────────
 * THE TOP BARS (v0.3.1038) -- the ConvertBox sticky bars, brought in-house.
 *
 * Hers: "One per sales page and one per bundle on all included patterns. Its a top bar."
 * Measured off the live ones before anything was drawn (docs/planned/top-bars/README.md): a
 * `position: fixed` band at the top, OVER the page -- nothing is pushed down -- 83px tall on a
 * 1400px desktop, a 1100px row centred, words left, a 300x50 button right, a close cross; on a
 * 390px phone the two stack to 145px. The post version adds a bold lead line and a countdown.
 *
 * Its own pair, per her sitewide rule: nothing else is enqueued, and this loads only where a bar
 * targets the page. `em` throughout, against her 20px body. The colours arrive as variables on the
 * bar from the bar's own record (resolved in PHP), never as literals here.
 * ───────────────────────────────────────────────────────────────────────────────────────────── */
.jcp-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	background: var( --jcp-bar-bg, #f4d44f );
	color: var( --jcp-bar-text, #555557 );
	font-family: inherit;
	line-height: 1.3;
	padding: 0.95em 3em 0.95em 1em;   /* 83px tall at her 20px body, as measured off ConvertBox's */
	display: grid;
	grid-template-columns: minmax( 0, 27.5em ) minmax( 0, 27.5em );
	column-gap: 2em;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.12 );
	transform: translateY( -100% );
	transition: transform 0.35s ease-out;
}
.jcp-top-bar.is-shown { transform: none; }
@media ( prefers-reduced-motion: reduce ) {
	.jcp-top-bar { transition: none; }
}
.jcp-top-bar-words { text-align: center; min-width: 0; }
.jcp-top-bar-lead {
	margin: 0 0 0.15em;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.2;
}
.jcp-top-bar-text { margin: 0; font-size: 1.05em; }
.jcp-top-bar-text b { font-weight: bold; }
.jcp-top-bar-cta { display: grid; row-gap: 0.5em; justify-items: center; min-width: 0; }
/* The button is an <a>: a pin-button rule (v0.3.963) could repaint it, so it names its colours. */
.jcp-top-bar-button,
.jcp-top-bar-button:visited {
	display: inline-block;
	box-sizing: border-box;
	min-width: 15em;
	padding: 0.85em 1.5em;
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	background: var( --jcp-bar-btn-bg, #ffffff );
	color: var( --jcp-bar-btn-text, #555557 );
	border: 0;
	border-radius: 0;
}
.jcp-top-bar-button:hover,
.jcp-top-bar-button:focus {
	color: var( --jcp-bar-btn-text, #555557 );
	text-decoration: none;
	opacity: 0.92;
}
.jcp-top-bar-count { display: flex; gap: 1.8em; }
.jcp-top-bar-count b { display: block; font-size: 1.05em; line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; }
.jcp-top-bar-count span { display: block; font-size: 0.55em; letter-spacing: 0.06em; text-align: center; }
.jcp-top-bar-close {
	position: absolute;
	top: 0.4em;
	right: 0.6em;
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	font-family: inherit;
	font-size: 1.1em;
	line-height: 1.6em;
	text-align: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	opacity: 0.85;
}
.jcp-top-bar-close:hover,
.jcp-top-bar-close:focus { opacity: 1; }

/* THE ROOM AN ALWAYS-ON BAR TAKES (v0.3.1052): printed by PHP so nothing moves when the bar arrives.
   These heights are the first guess -- 83px desktop, 145px phone at her 20px body, as measured -- and
   top-bars.js sets the exact height once the bar is built. */
.jcp-top-bar-space { height: 4.15em; }

/* A PHONE: the two columns stack, as hers do, and the button runs the width of the words. */
@media ( max-width: 37.5em ) {
	.jcp-top-bar {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: 0.55em;
		padding: 0.7em 2.4em 0.8em 1em;
	}
	.jcp-top-bar-lead { font-size: 1.05em; }
	.jcp-top-bar-text { font-size: 0.92em; }
	.jcp-top-bar-button,
	.jcp-top-bar-button:visited { min-width: 0; width: 100%; }
	.jcp-top-bar-count { gap: 1.2em; }
	.jcp-top-bar-space { height: 7.25em; }
}

/* LOGGED IN, THE BAR SITS UNDER THE WORDPRESS TOOLBAR (v0.3.1109). Hers, with a phone screenshot: "Still issues with
   extra green on sales pages." The band below the bar was the toolbar's height -- 46px on a phone, 32px on a computer --
   because the reserved space starts under the toolbar while the bar was pinned to the very top, over it. Readers are
   never logged in, so this is only ever her view. On a narrow phone the toolbar scrolls away with the page, so the bar
   scrolls with it there rather than leaving a gap above itself. */
.admin-bar .jcp-top-bar { top: var( --wp-admin--admin-bar--height, 32px ); }
@media screen and ( max-width: 600px ) {
	.admin-bar .jcp-top-bar { position: absolute; }
}