/* Header — Utility bar
 *
 * Slim strip at the top of the header: delivery USPs (left) + payment
 * icons & phone (right). Brand-tinted, compact.
 */

.bollaert-headerbar {
	background: var(--wp--preset--color--brand-bg);
	font-size: var(--wp--preset--font-size--xs);
}

.bollaert-headerbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	width: 90vw;
	max-width: 90vw;
	margin-inline: auto;
	padding: 6px 0;
}

.bollaert-headerbar__usps {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.bollaert-headerbar__usp {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--wp--preset--color--text);
	font-weight: 500;
	white-space: nowrap;
}

.bollaert-headerbar__check {
	color: var(--wp--preset--color--success);
	flex-shrink: 0;
}

.bollaert-headerbar__right {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	flex-shrink: 0;
}

/* Contact (e-mail + phone), each with a compact copy button */
.bollaert-headerbar__contact {
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
}

.bollaert-headerbar__mail {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bollaert-headerbar__mail svg { color: var(--wp--preset--color--brand); }
.bollaert-headerbar__mail:hover { color: var(--wp--preset--color--brand); }

.bollaert-headerbar__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bollaert-headerbar__copy svg { display: block; width: 13px; height: 13px; }
.bollaert-headerbar__copy:hover { background: rgba(0, 0, 0, 0.06); color: var(--wp--preset--color--brand); }
.bollaert-headerbar__copy.is-copied { color: var(--wp--preset--color--success); }

.bollaert-headerbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bollaert-headerbar__phone svg {
	color: var(--wp--preset--color--brand);
}

.bollaert-headerbar__phone:hover {
	color: var(--wp--preset--color--brand);
}

/* --- Responsive: trim on small screens to keep it one line --- */

@media (max-width: 920px) {
	.bollaert-headerbar__usp--extra {
		display: none;
	}
}

@media (max-width: 680px) {
	/* keep just the phone (with its copy button); drop the e-mail to stay on one line */
	.bollaert-headerbar__contact:first-child {
		display: none;
	}
}

@media (max-width: 480px) {
	/* keep only the first USP + phone */
	.bollaert-headerbar__usp:nth-child(n+2) {
		display: none;
	}
}
