/* =============================================================================
   05-badges.css — small status labels. Usable on any page.

     <span class="badge badge_orange badge_outline badge_sm">Closing soon</span>

     colour  badge_purple  badge_blue  badge_orange  badge_yellow  badge_grey
     style   (none = solid)  badge_soft  badge_outline
     size    (none = base)   badge_sm  badge_lg
     extra   badge_dot       adds a leading dot

   Placement helpers at the bottom: .badge_row for a row of them, .badge_corner
   to pin one to a card, and a rule for a badge sitting beside a heading.
   ============================================================================= */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--js-font-bold);
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
	padding: 0.3125rem;
	border: 1px solid transparent;
	border-radius: 30px;
	text-decoration: none;

	/* Fallback if no colour class is added. */
	background-color: var(--js-grey);
	color: var(--js-white);
}

/* Bootstrap Icons <i> or an inline <svg> inside a badge. */
.badge i,
.badge svg {
	font-size: 1.05em;
	height: 1em;
	width: auto;
	line-height: 1;
	fill: currentColor;
}

.badge_dot::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
}

/* --- Sizes --------------------------------------------------------------- */
.badge_sm {
	font-size: 0.875rem;
	padding: 0.3125rem 0.5rem;
	gap: 5px;
}

.badge_lg {
	font-size: 1.25rem;
	gap: 8px;
	letter-spacing: 0.04em;
}

/* --- Solid (default) ------------------------------------------------------ */
.badge_purple {
	background-color: var(--js-purple);
	border-color: var(--js-purple);
	color: var(--js-white);
}

.badge_blue {
	background-color: var(--js-blue);
	border-color: var(--js-blue);
	color: var(--js-white);
}

.badge_orange {
	background-color: var(--js-orange);
	border-color: var(--js-orange);
	color: var(--js-white);
}

.badge_yellow {
	background-color: var(--js-yellow);
	border-color: var(--js-yellow);
	color: var(--js-white);
}

.badge_grey {
	background-color: var(--js-grey);
	border-color: var(--js-grey);
	color: var(--js-white);
}

/* --- Soft: tinted background, ink-coloured text ---------------------------
   color-mix(in srgb, COLOUR 14%, #fff) is "14% of the brand colour, 86%
   white" — a tint derived from the token rather than a second hex to keep in
   sync. Supported everywhere since 2023.
   -------------------------------------------------------------------------- */
.badge_soft {
	background-color: var(--js-beige);
	border-color: transparent;
	color: var(--js-grey);
}

.badge_soft.badge_purple {
	background-color: color-mix(in srgb, var(--js-purple) 14%, #fff);
	color: var(--js-purple-ink);
}

.badge_soft.badge_blue {
	background-color: color-mix(in srgb, var(--js-blue) 14%, #fff);
	color: var(--js-blue-ink);
}

.badge_soft.badge_orange {
	background-color: color-mix(in srgb, var(--js-orange) 14%, #fff);
	color: var(--js-orange-ink);
}

.badge_soft.badge_yellow {
	background-color: color-mix(in srgb, var(--js-yellow) 20%, #fff);
	color: var(--js-yellow-ink);
}

.badge_soft.badge_grey {
	background-color: var(--js-beige-tint);
	color: var(--js-grey);
}

/* --- Outline: transparent, coloured border and text -----------------------
   Text uses the ink tints: the raw brand colours are too light on white.
   --badge_accent carries the bright colour so the hover fill below can use it.
   -------------------------------------------------------------------------- */
.badge_outline {
	background-color: transparent;
	border-color: var(--js-grey);
	color: var(--js-grey);
}

.badge_outline.badge_purple {
	border-color: var(--js-purple);
	color: var(--js-purple);
	--badge_accent: var(--js-purple);
}

.badge_outline.badge_blue {
	border-color: var(--js-blue);
	color: var(--js-blue-ink);
	--badge_accent: var(--js-blue);
}

.badge_outline.badge_orange {
	border-color: var(--js-orange);
	color: var(--js-orange-ink);
	--badge_accent: var(--js-orange);
}

.badge_outline.badge_yellow {
	border-color: var(--js-yellow);
	color: var(--js-yellow-ink);
	--badge_accent: var(--js-yellow);
}

.badge_outline.badge_grey {
	border-color: var(--js-grey);
	color: var(--js-grey);
	--badge_accent: var(--js-grey);
}

/* An outline badge inside a link inverts to solid on hover, so the whole
   thing reads as clickable. Scoped to "inside an <a>" so a static badge used
   as a plain tag never moves. */
a:hover .badge_outline,
a:focus-visible .badge_outline {
	background-color: var(--badge_accent, currentColor);
	border-color: var(--badge_accent, currentColor);
	color: var(--js-white);
}

/* --- Placement ------------------------------------------------------------ */

/* Beside a heading, nudged up so it sits on the cap height rather than the
   baseline. */
h1 > .badge,
h2 > .badge,
h3 > .badge,
h4 > .badge {
	position: relative;
	top: -0.15em;
	margin-left: 0.625rem;
}

.badge_row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 0.875rem;
}

/* Needs a positioned ancestor — the card, usually. */
.badge_corner {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
}

/* ============================================================================= */

@media (max-width: 750px) {
	.badge {
		font-size: 0.75rem;
		padding: 0.375rem 0.625rem;
	}

	.badge_lg {
		font-size: 0.875rem;
		padding: 0.5rem 0.875rem;
	}
}