/* Notification banner. Colours come from inline custom properties set in PHP. */

.s4s-nb {
	--s4s-nb-bg: #191919;
	--s4s-nb-fg: #ffffff;
	--s4s-nb-timer: #c5c9ff;
	--s4s-nb-text-size: 15px;
	--s4s-nb-timer-size: 16px;

	box-sizing: border-box;
	width: 100%;
	background: var(--s4s-nb-bg);
	color: var(--s4s-nb-fg);
	font-family: "Heebo", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: var(--s4s-nb-text-size, 15px);
	line-height: 1.4;
	position: relative;
	z-index: 9994;
}

.s4s-nb * {
	box-sizing: border-box;
}

/* Hidden until the script has moved it into position, so there is no jump. */
.s4s-nb--pending {
	display: none;
}

/*
 * Applied when the banner is placed above a fixed header. The script sets the
 * `top` offset (admin bar aware), pushes the header down and reserves the
 * matching space at the top of the document.
 */
.s4s-nb--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* One above the theme header's 9995 so the banner is never covered. */
	z-index: 9996;
}

.s4s-nb__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 20px;
}

.s4s-nb--centered .s4s-nb__inner {
	justify-content: center;
}

.s4s-nb--centered .s4s-nb__content {
	text-align: center;
}

.s4s-nb__content {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--s4s-nb-fg);
}

/*
 * The size setting has to win over theme rules that set an explicit size on
 * paragraphs and headings inside content areas.
 */
.s4s-nb__content,
.s4s-nb__content p,
.s4s-nb__content span,
.s4s-nb__content a,
.s4s-nb__content li,
.s4s-nb__content h1,
.s4s-nb__content h2,
.s4s-nb__content h3,
.s4s-nb__content h4,
.s4s-nb__label {
	font-size: inherit;
}

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

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

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

/*
 * Text pasted from Google Docs or Word carries inline background colours on
 * spans and links, which show up as white boxes over the banner. Nothing
 * inside the banner paints its own background, so override them outright —
 * !important is needed because those styles are inline.
 */
.s4s-nb__content,
.s4s-nb__content * {
	background: transparent !important;
	background-color: transparent !important;
}

.s4s-nb__aside {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.s4s-nb__label {
	font-weight: 600;
	color: var(--s4s-nb-fg);
}

.s4s-nb__timer {
	display: inline-flex;
	align-items: baseline;
	color: var(--s4s-nb-timer);
	/* The clock reads left-to-right even inside an RTL page. */
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	font-size: var(--s4s-nb-timer-size, 16px);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.s4s-nb__sep {
	padding: 0 1px;
}

@media (max-width: 782px) {
	.s4s-nb__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 10px 16px;
	}
}