/* ZWD Level Status: front end status bar */

/*
 * Blocksy wraps a header Text element in .entry-content.is-layout-flow, and
 * WordPress's block layout rules give every direct child of that a bottom
 * margin sized for body content. In a header row that reads as dead space.
 * The class is repeated to out-specify the theme rule without !important.
 */
.zwd-level-status.zwd-level-status {
	margin: 0;
}

/*
 * wpautop leaves an empty paragraph beside a shortcode that returns a block
 * level element. It is invisible but it still has a margin, which pads the
 * row out further.
 */
p:empty:has(+ .zwd-level-status),
.zwd-level-status + p:empty {
	display: none;
}

.zwd-level-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 46px;
	line-height: 1.2;
}

.zwd-level-status__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Linked indicators take their colour from the bar, not the theme link colour. */
.zwd-level-status__item--link,
.zwd-level-status__item--link:hover,
.zwd-level-status__item--link:focus {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.zwd-level-status__item--link:hover .zwd-level-status__label,
.zwd-level-status__item--link:focus .zwd-level-status__label {
	text-decoration: underline;
}

.zwd-level-status__item--link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.zwd-level-status__label {
	font-weight: 700;
	/* Colour and size are inherited from the theme's top bar. */
}

.zwd-level-status__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.zwd-level-status__dot {
	display: block;
	width: var(--zwd-ls-dot-size, 24px);
	height: var(--zwd-ls-dot-size, 24px);
	border-radius: 50%;
}

.zwd-level-status__dot.is-active {
	box-shadow: inset 0 0 0 max(2px, calc(var(--zwd-ls-dot-size, 24px) * 0.13)) #fff;
}

.zwd-level-status__dot--open {
	background: var(--zwd-ls-open, #4caf50);
}

.zwd-level-status__dot--caution {
	background: var(--zwd-ls-caution, #f2e34c);
}

.zwd-level-status__dot--high-caution {
	background: var(--zwd-ls-high-caution, #f0a52d);
}

.zwd-level-status__dot--closed {
	background: var(--zwd-ls-closed, #c62a1f);
}

/*
 * Two layouts.
 *
 * Inline: label, then dots, side by side. The wide screen arrangement.
 * Stacked: dots above a short label, three across. The narrow screen one.
 *
 * Both labels are in the markup and one is always hidden, so the visible
 * label and the one a screen reader announces are never different.
 */
.zwd-level-status__label--short {
	display: none;
}

.zwd-level-status--stacked {
	gap: 10px 30px;
	align-items: flex-start;
}

.zwd-level-status--stacked .zwd-level-status__item {
	flex-direction: column;
	gap: 7px;
	text-align: center;
}

.zwd-level-status--stacked .zwd-level-status__label--full {
	display: none;
}

.zwd-level-status--stacked .zwd-level-status__label--short {
	display: block;
	order: 2;
}

.zwd-level-status--stacked .zwd-level-status__dots {
	order: 1;
}

/*
 * Automatic. The breakpoint matches Blocksy's own mobile header switch, so
 * the bar changes shape at the same width the rest of the header does.
 */
@media (max-width: 999px) {
	.zwd-level-status--auto {
		gap: 10px 30px;
		align-items: flex-start;
	}

	.zwd-level-status--auto .zwd-level-status__item {
		flex-direction: column;
		gap: 7px;
		text-align: center;
	}

	.zwd-level-status--auto .zwd-level-status__label--full {
		display: none;
	}

	.zwd-level-status--auto .zwd-level-status__label--short {
		display: block;
		order: 2;
	}

	.zwd-level-status--auto .zwd-level-status__dots {
		order: 1;
	}
}

/* Visible to screen readers, invisible on screen. */
.zwd-level-status__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Switched off. The marker is invisible on its own, and the rule below hides
 * whichever theme header row it is sitting in so the row does not stay open
 * and empty. Note that this hides the whole row, including anything else
 * placed in it, which is why it is an option rather than automatic.
 */
.zwd-level-status-off {
	display: none;
}

[data-row]:has(.zwd-level-status-off),
.ct-header [data-row]:has(.zwd-level-status-off) {
	display: none;
}