/*
 * Forkliftoccasion Header Manager - frontend styles.
 *
 * Structure only, with CSS variables for the brand colours. Every selector is wrapped in
 * :where() so it has ZERO specificity: any Elementor setting or custom CSS overrides it
 * without needing !important. The dark navy bar itself belongs to your Elementor container.
 *
 * Override example (Elementor > Site Settings > Custom CSS):
 *   :root { --fohm-bullet-color: #ff6a00; --fohm-cta-bg: #ff6a00; }
 */

:where(.header-announcement) {
	min-width: 0;
}

:where(.header-announcement__items) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fohm-announcement-gap, 0.35em 1.75em);
	margin: 0;
	padding: 0;
}

:where(.header-announcement__item) {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	color: var(--fohm-announcement-color, inherit);
	font-weight: var(--fohm-announcement-weight, 600);
	letter-spacing: var(--fohm-announcement-spacing, 0.04em);
	line-height: 1.3;
}

:where(.header-announcement__bullet) {
	flex: 0 0 auto;
	width: var(--fohm-bullet-size, 0.5em);
	height: var(--fohm-bullet-size, 0.5em);
	border-radius: 50%;
	background: var(--fohm-bullet-color, #f26a1b);
}

:where(.header-announcement__text) {
	overflow-wrap: anywhere;
}

:where(.header-cta) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fohm-cta-gap, 0.5em);
}

:where(.header-cta__button) {
	display: inline-block;
	padding: var(--fohm-cta-padding, 0.7em 1.4em);
	border-radius: var(--fohm-cta-radius, 4px);
	/*background: var(--fohm-cta-bg, #f26a1b);*/
	background: #f5851f;
	color: var(--fohm-cta-color, #fff);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

:where(a.header-cta__button:hover),
:where(a.header-cta__button:focus-visible) {
	background: var(--fohm-cta-bg-hover, var(--fohm-cta-bg, #f26a1b));
	color: var(--fohm-cta-color, #fff);
	/*filter: brightness(0.93);*/
}

:where(.header-cta__button--disabled) {
	cursor: not-allowed;
	opacity: 0.55;
}

@media (max-width: 767px) {
	:where(.header-announcement__items) {
		gap: 0.25em 1.1em;
	}

	:where(.header-announcement__item) {
		font-size: 0.85em;
	}
}