/*
 * camden-trustmarks · trustmark.css
 *
 * Brand palette (locked, do not vary without a CR-W):
 *   --cm-navy:   #061645   (deep brand background, primary text)
 *   --cm-gold:   #FFB300   (accent · hover · focus ring)
 *   --cm-cream:  #FAF7F2   (badge fill, sits well on PDP white)
 *   --cm-mute:   #4A5468   (secondary text)
 *
 * Type:
 *   Body: DM Sans (already loaded by Camden site stylesheet).
 *   Display (badge text): Cormorant Garamond — fall back gracefully if not
 *   present on a page (PDPs do load it, but isolated shortcode use may not).
 *
 * Register: sober + apothecary, not consumer-shouty. Each badge is small,
 * monochrome cream, navy icon + text, with the gold reserved for focus +
 * hover. The pattern is "trust mark not trust trophy".
 *
 * Mobile-first: badges stack to two columns on narrow viewports + collapse
 * to a single column under 360px.
 */

.cm-trustmarks {
	--cm-navy:  #061645;
	--cm-gold:  #FFB300;
	--cm-cream: #FAF7F2;
	--cm-mute:  #4A5468;

	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.25rem 0 1.75rem;
	padding: 0;
	list-style: none;
}

.cm-trustmark {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid color-mix(in srgb, var(--cm-navy) 12%, transparent);
	border-radius: 999px;
	background: var(--cm-cream);
	color: var(--cm-navy);
	font-family: "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
	font-size: 0.8125rem;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.cm-trustmark:hover,
.cm-trustmark:focus-visible {
	border-color: var(--cm-gold);
	background: color-mix(in srgb, var(--cm-cream) 92%, var(--cm-gold) 8%);
	outline: none;
	transform: translateY(-1px);
}

.cm-trustmark:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-gold) 40%, transparent);
}

.cm-trustmark__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	color: var(--cm-navy);
	flex: 0 0 auto;
}

.cm-trustmark__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.cm-trustmark__text {
	white-space: nowrap;
}

/* The MHRA Yellow Card badge gets a subtle gold left-rail to signal its
 * regulatory weight — the only badge with a permanent accent. */
.cm-trustmark--mhra-yellowcard-policy {
	border-left: 3px solid var(--cm-gold);
	padding-left: 0.55rem;
}

@media (max-width: 600px) {
	.cm-trustmarks {
		gap: 0.45rem;
	}
	.cm-trustmark {
		font-size: 0.75rem;
		padding: 0.35rem 0.6rem;
	}
}

@media (max-width: 360px) {
	.cm-trustmarks {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Reduced-motion users opt out of the lift transition. */
@media (prefers-reduced-motion: reduce) {
	.cm-trustmark {
		transition: none;
	}
	.cm-trustmark:hover,
	.cm-trustmark:focus-visible {
		transform: none;
	}
}