/* =====================================================================
   Wayayeo Topbar — frontend styles

   Every selector is namespaced under .wayayeo-topbar. No generic class
   names, no element selectors outside the bar, no assumptions about the
   theme's markup, grid system or CSS framework.

   Values that the admin controls arrive as CSS custom properties set in
   a style attribute on .wayayeo-topbar itself, so this file is static
   and cacheable.
   ===================================================================== */

.wayayeo-topbar {
	/* Fallbacks keep the bar readable if the style attribute is ever stripped
	   by an optimisation plugin. */
	--wyt-bg: #dd3333;
	--wyt-fg: #ffffff;
	--wyt-link: #ffe08a;
	--wyt-btn-bg: #ffffff;
	--wyt-btn-fg: #c82e2e;
	--wyt-font-size: 15px;
	--wyt-font-weight: 500;
	--wyt-align: center;
	--wyt-max-width: none;
	--wyt-pad-y: 12px;
	--wyt-pad-x: 20px;
	--wyt-min-height: 0px;

	box-sizing: border-box;
	width: 100%;
	background: var(--wyt-bg);
	color: var(--wyt-fg);
	font-size: var(--wyt-font-size);
	font-weight: var(--wyt-font-weight);
	line-height: 1.5;
	text-align: var(--wyt-align);

	/* Inherit the theme's typeface rather than imposing one, but fall back to
	   the system stack if the theme sets nothing. */
	font-family: inherit;

	/* The bar is chrome, not content: never let it be selected accidentally
	   while still allowing text selection inside it. */
	margin: 0;
	padding: 0;
	border: 0;
}

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

/* ---- Sticky ---------------------------------------------------------
   Sticky rather than fixed: the bar stays in normal document flow, so it
   never overlaps the theme header on load and never needs the body to be
   padded. It pins to the top edge once the page scrolls.
   --------------------------------------------------------------------- */
.wayayeo-topbar--sticky {
	position: sticky;
	top: 0;
	/* Below WordPress's admin bar (99999) and typical theme headers, above
	   ordinary page content. */
	z-index: 99990;
}

/* ---- Sticky fallback ------------------------------------------------
   position: sticky silently does nothing when an ancestor establishes a
   scroll container — most often `overflow-x: hidden` on html or body,
   which themes set constantly to suppress horizontal scrollbars. There
   is no CSS way to detect that, so the script checks on first scroll
   whether the bar actually held its position, and swaps to this class if
   it did not. Body padding is compensated in the same frame, so the page
   does not jump.
   --------------------------------------------------------------------- */
.wayayeo-topbar--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99990;
}

/* WordPress admin bar is fixed at 32px on desktop and 46px on tablet, but
   scrolls with the page below 600px. These are core classes, not theme
   classes, so this is safe. */
@media screen and (min-width: 783px) {
	body.admin-bar .wayayeo-topbar--sticky,
	body.admin-bar .wayayeo-topbar--fixed {
		top: 32px;
	}
}

@media screen and (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .wayayeo-topbar--sticky,
	body.admin-bar .wayayeo-topbar--fixed {
		top: 46px;
	}
}

/* ---- Inner layout --------------------------------------------------- */
.wayayeo-topbar__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: var(--wyt-max-width);
	min-height: var(--wyt-min-height);
	margin: 0 auto;
	padding: var(--wyt-pad-y) var(--wyt-pad-x);
}

.wayayeo-topbar--align-left .wayayeo-topbar__inner {
	justify-content: flex-start;
}

.wayayeo-topbar--align-center .wayayeo-topbar__inner {
	justify-content: center;
}

.wayayeo-topbar--align-right .wayayeo-topbar__inner {
	justify-content: flex-end;
}

.wayayeo-topbar__content {
	/* Shrinks before the button does, and is allowed to wrap onto as many
	   lines as a long closure notice needs. */
	flex: 1 1 auto;
	min-width: 0;
}

.wayayeo-topbar--align-center .wayayeo-topbar__content {
	/* Centred text should hug the middle rather than stretch edge to edge on
	   very wide screens. */
	flex-grow: 0;
}

.wayayeo-topbar__title {
	font-weight: 700;
	margin-right: 0.4em;
}

/* The message flows inline with the title so a notice reads as one
   sentence, and wraps naturally instead of being truncated. */
.wayayeo-topbar__message {
	display: inline;
}

.wayayeo-topbar__message p {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.wayayeo-topbar__message p + p::before {
	/* Restores a visible gap between paragraphs that were made inline. */
	content: " ";
	white-space: pre;
}

.wayayeo-topbar__message ul,
.wayayeo-topbar__message ol {
	display: inline-block;
	vertical-align: top;
	margin: 0.25em 0 0;
	padding-left: 1.25em;
	text-align: left;
}

.wayayeo-topbar__message li {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.wayayeo-topbar__message strong,
.wayayeo-topbar__title strong {
	font-weight: 700;
}

.wayayeo-topbar__message a {
	color: var(--wyt-link);
	/* Underlined, not colour-only: the link must be identifiable without
	   relying on colour perception. */
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wayayeo-topbar__message a:hover,
.wayayeo-topbar__message a:focus {
	color: var(--wyt-link);
	text-decoration-thickness: 2px;
}

/* ---- Button --------------------------------------------------------- */
.wayayeo-topbar__button {
	flex: 0 0 auto;
	display: inline-block;
	max-width: 100%;
	padding: 0.55em 1.1em;
	border-radius: 999px;
	background: var(--wyt-btn-bg);
	color: var(--wyt-btn-fg);
	/* Themes routinely restyle bare `a` and `button` elements. Every property
	   that would change the button's size or shape is stated explicitly so an
	   inherited theme rule cannot reach in. */
	font-family: inherit;
	font-size: 0.94em;
	font-weight: 700;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	/* Long button labels wrap rather than forcing the bar to overflow. */
	overflow-wrap: break-word;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.wayayeo-topbar__button:hover,
.wayayeo-topbar__button:focus {
	color: var(--wyt-btn-fg);
	text-decoration: none;
	opacity: 0.9;
}

.wayayeo-topbar__button:active {
	transform: translateY(1px);
}

/* ---- Dismiss -------------------------------------------------------- */
.wayayeo-topbar__dismiss {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 32px keeps the hit area comfortable without dominating a slim bar; the
	   mobile rule below grows it to the 44px touch guideline. */
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	/* The button holds only an icon, so zeroing the font removes any inherited
	   theme text sizing along with stray whitespace around the SVG. */
	font-size: 0;
	line-height: 0;
	letter-spacing: normal;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease, background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wayayeo-topbar__dismiss:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.12);
}

.wayayeo-topbar__dismiss-icon {
	width: 18px;
	height: 18px;
	display: block;
	pointer-events: none;
}

/* ---- Inline cutoff time ---------------------------------------------
   Part of the sentence, not a callout, so it inherits everything. Stated
   explicitly because themes sometimes restyle bare `time` elements.
   --------------------------------------------------------------------- */
.wayayeo-topbar__time {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	text-decoration: none;
}

/* ---- Dismiss animation ----------------------------------------------
   The bar rolls up instead of disappearing, so content below slides into
   place rather than jumping. The height is pinned in pixels by the
   script before this class is added, because height cannot transition
   from `auto`. overflow:hidden clips the inner padding as it closes.
   --------------------------------------------------------------------- */
.wayayeo-topbar--collapsing {
	overflow: hidden;
	/* Ease-out curve: quick to start moving, settling gently at the end. */
	transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}

/* ---- Focus ---------------------------------------------------------
   A visible, high-contrast focus ring on both surfaces. currentColor
   adapts to whatever text colour the admin picked, and the white outer
   ring guarantees contrast against dark backgrounds too.
   --------------------------------------------------------------------- */
.wayayeo-topbar a:focus-visible,
.wayayeo-topbar button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Fallback for browsers without :focus-visible support. */
.wayayeo-topbar a:focus,
.wayayeo-topbar button:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wayayeo-topbar a:focus:not(:focus-visible),
.wayayeo-topbar button:focus:not(:focus-visible) {
	outline: none;
}

/* ---- Tablet --------------------------------------------------------- */
@media screen and (max-width: 900px) {
	.wayayeo-topbar__inner {
		gap: 12px;
	}
}

/* ---- Mobile ---------------------------------------------------------
   Not a shrunken desktop layout: the bar becomes a stacked block, the
   dismiss button moves to a fixed corner position so it is always
   reachable, and the content reserves room so text never runs under it.
   --------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
	.wayayeo-topbar__inner {
		position: relative;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		/* Room for the dismiss button in the top-right corner. */
		padding-right: calc(var(--wyt-pad-x) + 28px);
		text-align: var(--wyt-align);
	}

	.wayayeo-topbar--align-left .wayayeo-topbar__inner,
	.wayayeo-topbar--align-center .wayayeo-topbar__inner,
	.wayayeo-topbar--align-right .wayayeo-topbar__inner {
		justify-content: flex-start;
	}

	.wayayeo-topbar__content {
		flex-grow: 1;
	}

	.wayayeo-topbar--align-center .wayayeo-topbar__content {
		flex-grow: 1;
	}

	.wayayeo-topbar__button {
		/* Centred and width-capped rather than stretched edge to edge, which
		   looks unbalanced on a phone. */
		align-self: center;
		width: auto;
		min-width: 160px;
		max-width: 100%;
		padding: 0.7em 1.2em;
	}

	.wayayeo-topbar--align-left .wayayeo-topbar__button {
		align-self: flex-start;
	}

	.wayayeo-topbar--align-right .wayayeo-topbar__button {
		align-self: flex-end;
	}

	.wayayeo-topbar__dismiss {
		position: absolute;
		top: 4px;
		right: 2px;
		/* Meets the 44px minimum touch target. */
		width: 44px;
		height: 44px;
	}

	.wayayeo-topbar__message ul,
	.wayayeo-topbar__message ol {
		display: block;
	}
}

/* ---- Very small screens --------------------------------------------- */
@media screen and (max-width: 380px) {
	.wayayeo-topbar__button {
		min-width: 0;
		width: 100%;
	}
}

/* ---- Motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wayayeo-topbar__button,
	.wayayeo-topbar__dismiss {
		transition: none;
	}

	.wayayeo-topbar__button:active {
		transform: none;
	}

	/* The script already removes the bar outright when reduced motion is
	   requested; this is the belt-and-braces half, in case the class is ever
	   applied by other means. */
	.wayayeo-topbar--collapsing {
		transition: none;
	}
}

/* ---- Print ----------------------------------------------------------
   A dismissible site notice is screen chrome and should not consume a
   printed page. */
@media print {
	.wayayeo-topbar {
		display: none;
	}
}