/**
 * Oyolloo Elements — top bar.
 *
 * Figma: node 471:1033.
 *   bar   1920x49 · black · 12px vertical padding
 *   item  24px icon + 6px gap + Caption label, uppercase
 *   list  centred, 56px between items
 * Mobile (471:3831): 42px tall, 14px icons, two items.
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-topbar__bar {
	padding-block: 12px;
	/* The bar sits on ink-strong, a shade off the pure black the dark surface
	   would otherwise give it, and its rule is far fainter than border-soft. */
	background-color: var(--oe-color-ink-strong);
	border-block-end: 1px solid rgba(255, 255, 255, 0.05);
}

.oe-topbar__text {
	font-weight: 500;
	line-height: 22px;
}

.oe-topbar__list {
	--oe-gap: 56px;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--oe-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.oe-topbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--oe-color-brand);
}

.oe-topbar__icon svg,
.oe-topbar__icon i {
	width: 100%;
	height: 100%;
	font-size: 20px;
}

/* The design's icons are stroked line art carrying their own `fill="none"`, so
   the fill has to be scoped to Elementor's font-icon SVGs: a blanket
   `fill: currentColor` on the svg beats that attribute and floods the outlines
   solid, which is the filled check/star/bolt the strip used to draw. */
.oe-topbar__icon .e-font-icon-svg {
	fill: currentColor;
}

.oe-topbar__text {
	text-transform: uppercase;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.oe-topbar__list {
		--oe-gap: var(--oe-space-md);
	}
}

@media (max-width: 767px) {
	.oe-topbar__bar {
		padding-block: 12px;
	}

	.oe-topbar__list {
		--oe-gap: var(--oe-space-sm);

		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.oe-topbar__icon {
		width: 14px;
		height: 14px;
	}

	.oe-topbar__icon svg,
	.oe-topbar__icon i {
		font-size: 14px;
	}

	.oe-topbar__text {
		font-size: 12px;
		line-height: 17px;
	}
}

/*
 * Below the design's 393px frame the strip runs out of room: at 12px the two
 * claims plus their icons measure 324, and 350 leaves only 302 between the
 * gutters — so the row hung 14px past the edge and gave the whole page a
 * sideways scroll. The gutter tightens and the caption scales with the
 * viewport, hitting exactly 12px again at 393 so the design width is untouched.
 */
@media (max-width: 392px) {
	.oe-topbar__bar .oe-container {
		--oe-gutter-inline: 16px;
	}

	.oe-topbar__list {
		--oe-gap: var(--oe-space-2xs);
	}

	.oe-topbar__text {
		font-size: clamp(10px, 3.05vw, 12px);
	}
}