/**
 * FFL UTM Message Bar — front-end styles.
 *
 * The bar starts fully collapsed (max-height: 0) and animates open once the
 * script decides it should be shown. Because the collapsed state occupies no
 * space, nothing on the page jumps (no Cumulative Layout Shift penalty).
 *
 * Colors, font-size and font-family are injected as CSS custom properties from
 * the plugin settings (see FFL_UTM_Bar_Frontend::inline_css()).
 */

.ffl-utm-bar,
.ffl-utm-bar:link,
.ffl-utm-bar:visited {
	--ffl-utm-bar-bg: #6b9560;
	--ffl-utm-bar-text: #ffffff;
	--ffl-utm-bar-font-size: 19px;
	--ffl-utm-bar-font-family: "Work Sans", sans-serif;

	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;

	background: var(--ffl-utm-bar-bg);
	color: var(--ffl-utm-bar-text) !important;
	font-family: var(--ffl-utm-bar-font-family);
	font-size: var(--ffl-utm-bar-font-size);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;

	transition:
		max-height 0.35s ease-out,
		padding 0.35s ease-out,
		opacity 0.25s ease-out;
}

.ffl-utm-bar.is-visible,
.ffl-utm-bar.show {
	max-height: 120px;
	opacity: 1;
	padding: 14px 20px;
}

.ffl-utm-bar:hover,
.ffl-utm-bar:focus {
	color: var(--ffl-utm-bar-text) !important;
	text-decoration: underline;
}

.ffl-utm-bar:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

@media (max-width: 600px) {
	.ffl-utm-bar,
	.ffl-utm-bar:link,
	.ffl-utm-bar:visited {
		font-size: calc(var(--ffl-utm-bar-font-size) * 0.85);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ffl-utm-bar {
		transition: none;
	}
}