/**
 * re:banner — frontend.
 *
 * Four layout variants sharing one body slot. Every colour comes in as a CSS
 * custom property set on the banner root by PHP, so this file never hard-codes
 * a banner's palette and one stylesheet covers all four.
 *
 * Everything is scoped under `.rebnr`, and layout properties are stated on our
 * own elements rather than inherited, so an opinionated theme cannot reshape a
 * banner by styling `div` or `p`. The body is authored rich text (paragraphs,
 * headings, lists, links), so the defaults below give each of those a shape;
 * per-banner overrides, when an editor set any, arrive as a separate <style>
 * with a higher-specificity selector and layer on top of these.
 *
 * @package Re_Banner
 */

.rebnr {
	--rebnr-accent: #ffffff;
	--rebnr-fg: #ffffff;
	--rebnr-bg: #0a0a0a;
	--rebnr-radius: 12px;
	--rebnr-gap: 16px;

	box-sizing: border-box;
	z-index: 99990;
	font-family: inherit;
	line-height: 1.5;
	color: var(--rebnr-fg);
	background: var(--rebnr-bg);
}

.rebnr *,
.rebnr *::before,
.rebnr *::after {
	box-sizing: border-box;
}

/* Dismissible banners stay invisible until the script has had a chance to
   check whether this visitor already closed them — otherwise a dismissed
   banner flashes on every page load before being removed. Non-dismissible
   banners paint immediately and never depend on JS. */
.rebnr[data-dismissible="1"] {
	visibility: hidden;
}

.rebnr[data-dismissible="1"].rebnr--ready {
	visibility: visible;
}

.rebnr__inner {
	display: flex;
	align-items: center;
	gap: var(--rebnr-gap);
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 20px;
}

.rebnr__media {
	flex: 0 0 auto;
	line-height: 0;
}

.rebnr__image {
	display: block;
	max-width: 100%;
	height: auto;
}

.rebnr__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Body content. A lone paragraph reads like the old description; a heading
   followed by a paragraph reads like the old title + description. The
   second-paragraph fade keeps banners migrated from 1.1 looking as they did. */

.rebnr__body > * {
	color: var(--rebnr-fg);
}

.rebnr__body > :first-child {
	margin-top: 0;
}

.rebnr__body > :last-child {
	margin-bottom: 0;
}

.rebnr__body p {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
}

.rebnr__body p + p {
	margin-top: 2px;
	opacity: 0.78;
}

.rebnr__body p:first-child:not(:only-child) strong:only-child {
	font-size: 15px;
}

.rebnr__body h1,
.rebnr__body h2,
.rebnr__body h3,
.rebnr__body h4,
.rebnr__body h5,
.rebnr__body h6 {
	margin: 0;
	font-family: inherit;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.rebnr__body h1 { font-size: 22px; }
.rebnr__body h2 { font-size: 20px; }
.rebnr__body h3 { font-size: 17px; }
.rebnr__body h4,
.rebnr__body h5,
.rebnr__body h6 { font-size: 15px; }

.rebnr__body h1 + p,
.rebnr__body h2 + p,
.rebnr__body h3 + p,
.rebnr__body h4 + p,
.rebnr__body h5 + p,
.rebnr__body h6 + p {
	margin-top: 2px;
	opacity: 0.78;
}

.rebnr__body a {
	color: inherit;
	text-decoration: underline;
}

.rebnr__body ul,
.rebnr__body ol {
	margin: 4px 0 0;
	padding-left: 1.2em;
	font-size: 14px;
}

.rebnr__body li {
	margin: 0;
}

.rebnr__body blockquote {
	margin: 4px 0 0;
	padding-left: 12px;
	border-left: 2px solid currentColor;
	opacity: 0.85;
}

.rebnr__body hr {
	margin: 8px 0;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.3;
}

.rebnr__cta {
	flex: 0 0 auto;
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--rebnr-accent);
	border-radius: 999px;
	background: var(--rebnr-accent);
	color: var(--rebnr-bg);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.rebnr__cta:hover,
.rebnr__cta:focus {
	opacity: 0.85;
	text-decoration: none;
	color: var(--rebnr-bg);
}

.rebnr__dismiss {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--rebnr-fg);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.rebnr__dismiss:hover,
.rebnr__dismiss:focus {
	opacity: 1;
}

/* ── Alignment ─────────────────────────────────────────────────────────────
   `data-align` is the banner-level answer to "centre this" — set once, and it
   moves the image, the words and the button together, whatever element the
   words happen to be in. The row variants (bar, card) shift the whole group
   along the row and let the body shrink to its content; the column variants
   (hero, floating) move their cross-axis. The value is always emitted, so a
   banner that follows its layout's own default (hero centred, the rest left)
   simply matches the base rules above. */

.rebnr--bar[data-align="center"] .rebnr__inner,
.rebnr--card[data-align="center"] .rebnr__inner {
	justify-content: center;
	text-align: center;
}

.rebnr--bar[data-align="right"] .rebnr__inner,
.rebnr--card[data-align="right"] .rebnr__inner {
	justify-content: flex-end;
	text-align: right;
}

.rebnr--bar:not([data-align="left"]) .rebnr__body,
.rebnr--card:not([data-align="left"]) .rebnr__body {
	flex: 0 1 auto;
}

/* The close button is pinned to the banner's edge rather than riding at the
   end of the row, so centring the content does not drag it into the middle. */
.rebnr--bar .rebnr__dismiss,
.rebnr--card .rebnr__dismiss {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

.rebnr--bar[data-dismissible="1"] .rebnr__inner,
.rebnr--card[data-dismissible="1"] .rebnr__inner {
	padding-right: 52px;
}

.rebnr--hero[data-align="left"] .rebnr__inner {
	align-items: flex-start;
	text-align: left;
}

.rebnr--hero[data-align="right"] .rebnr__inner {
	align-items: flex-end;
	text-align: right;
}

.rebnr--hero:not([data-align="center"]) .rebnr__body p {
	margin-inline: 0;
}

.rebnr--floating[data-align="center"] .rebnr__inner {
	align-items: center;
	text-align: center;
}

.rebnr--floating[data-align="right"] .rebnr__inner {
	align-items: flex-end;
	text-align: right;
}

/* ── Variant: bar ──────────────────────────────────────────────────────────
   A full-width strip. Top sits in the document (above the heading, not over
   it) and sticks on scroll; bottom stays pinned to the viewport edge. */

.rebnr--bar {
	left: 0;
	right: 0;
	width: 100%;
}

.rebnr--bar[data-position="top"] {
	position: sticky;
	top: 0;
}

.rebnr--bar[data-position="bottom"] {
	position: fixed;
	bottom: 0;
}

/* ── Variant: card ─────────────────────────────────────────────────────────
   A centred panel that sits in the page flow. */

.rebnr--card {
	position: relative;
	width: calc(100% - 32px);
	max-width: var(--rebnr-site-width, calc(100% - 32px));
	margin: 24px auto;
	border-radius: var(--rebnr-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	overflow: hidden;
}

.rebnr--card .rebnr__inner {
	padding: 20px;
}

.rebnr--card .rebnr__image {
	width: 96px;
	height: 96px;
	border-radius: 10px;
	object-fit: cover;
}

.rebnr--card .rebnr__body h1 { font-size: 24px; }
.rebnr--card .rebnr__body h2 { font-size: 22px; }
.rebnr--card .rebnr__body h3 { font-size: 19px; }

/* ── Variant: hero ─────────────────────────────────────────────────────────
   A full-width band with the image behind a colour wash. */

.rebnr--hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	text-align: center;
}

/* The photo is a sibling of `.rebnr__inner`, covering the whole hero so
   the left and right of the band are image, not the fallback background. */
.rebnr--hero .rebnr__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.rebnr--hero .rebnr__image {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* A light wash plus a bottom fade so type stays readable without turning
   the photo into a flat colour. */
.rebnr--hero .rebnr__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--rebnr-bg);
	opacity: 0.32;
}

.rebnr--hero .rebnr__media::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 55%;
	background: linear-gradient(to top, var(--rebnr-bg), transparent);
	opacity: 0.5;
	pointer-events: none;
}

.rebnr--hero .rebnr__inner {
	position: relative;
	z-index: 1;
	flex-direction: column;
	gap: 10px;
	padding: 48px 24px;
	text-align: center;
}

.rebnr--hero .rebnr__body h1,
.rebnr--hero .rebnr__body h2,
.rebnr--hero .rebnr__body h3 {
	letter-spacing: -0.02em;
}

.rebnr--hero .rebnr__body h1 { font-size: 28px; }
.rebnr--hero .rebnr__body h2 { font-size: 26px; }
.rebnr--hero .rebnr__body h3 { font-size: 22px; }

.rebnr--hero .rebnr__body p {
	font-size: 15px;
	max-width: 60ch;
	margin-inline: auto;
}

.rebnr--hero .rebnr__body p:first-child:not(:only-child) strong:only-child {
	font-size: 26px;
	letter-spacing: -0.02em;
}

.rebnr--hero .rebnr__cta {
	margin-top: 6px;
	padding: 12px 26px;
	font-size: 15px;
}

.rebnr--hero .rebnr__dismiss {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
}

/* ── Variant: floating ─────────────────────────────────────────────────────
   A small corner card. */

.rebnr--floating {
	position: fixed;
	right: 20px;
	width: min(360px, calc(100vw - 40px));
	border-radius: var(--rebnr-radius);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
	overflow: hidden;
}

.rebnr--floating[data-position="top"] {
	top: 20px;
}

.rebnr--floating[data-position="bottom"] {
	bottom: 20px;
}

.rebnr--floating .rebnr__inner {
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 18px;
}

.rebnr--floating .rebnr__image {
	width: 100%;
	height: auto;
	border-radius: 8px;
	object-fit: contain;
}

.rebnr--floating .rebnr__media {
	width: 100%;
}

.rebnr--floating .rebnr__cta {
	width: 100%;
	text-align: center;
}

.rebnr--floating .rebnr__dismiss {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	background: var(--rebnr-bg);
	color: var(--rebnr-fg);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	opacity: 1;
}

.rebnr--floating .rebnr__dismiss:hover,
.rebnr--floating .rebnr__dismiss:focus {
	opacity: 1;
}

/* ── Small screens ─────────────────────────────────────────────────────────
   The bar is the only variant that needs restructuring: at narrow widths a
   row of image + two lines + button + close does not fit, so it stacks and the
   CTA goes full width. */

@media (max-width: 640px) {
	.rebnr--bar .rebnr__inner,
	.rebnr--card .rebnr__inner {
		flex-wrap: wrap;
		padding: 14px 16px;
	}

	.rebnr--bar .rebnr__body,
	.rebnr--card .rebnr__body {
		flex: 1 1 100%;
		order: 2;
	}

	.rebnr--bar .rebnr__media,
	.rebnr--card .rebnr__media {
		order: 1;
	}

	.rebnr--bar .rebnr__cta,
	.rebnr--card .rebnr__cta {
		order: 3;
		width: 100%;
		text-align: center;
	}

	.rebnr--bar .rebnr__dismiss,
	.rebnr--card .rebnr__dismiss {
		top: 10px;
		right: 10px;
		transform: none;
	}

	/* Centred/right content on a narrow screen: the stacked rows each take the
	   full width, so the alignment becomes text alignment alone. */
	.rebnr--bar:not([data-align="left"]) .rebnr__body,
	.rebnr--card:not([data-align="left"]) .rebnr__body {
		flex: 1 1 100%;
	}

	.rebnr--card .rebnr__image {
		width: 64px;
		height: 64px;
	}

	.rebnr--hero .rebnr__inner {
		padding: 34px 18px;
	}

	.rebnr--hero .rebnr__body h1,
	.rebnr--hero .rebnr__body h2 {
		font-size: 21px;
	}

	.rebnr--hero .rebnr__body p:first-child:not(:only-child) strong:only-child {
		font-size: 21px;
	}
}

/* Respect a visitor who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.rebnr__cta,
	.rebnr__dismiss {
		transition: none;
	}
}