/* =============================================================================
   16-badges.css
   Badge component. Global.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
/* ==========================================================================
   || BADGES 
   Small status labels. Global — usable on any page or template.

   Markup:
     <span class="badge badge_outline badge_orange badge_sm">Closing soon</span>
     <span class="badge badge_purple"><i class="bi bi-star-fill"></i> Pilot</span>

   COLOUR class && STYLE class && SIZE class
   Colour:  badge_purple  badge_blue  badge_orange  badge_yellow
            badge_grey    badge_black
   Style:   (default = solid)  badge_soft  badge_outline
   Size:    badge_sm  (default)  badge_lg
   Extra:   badge_dot  adds a leading dot <- might remove 
   ========================================================================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: "effrabold";
	font-size: 12pt;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
	padding: 5px 5px;
	margin: 5px 0px;
	/* top & bottom - left & right */
	border-radius: 30px;
	border: 1px solid transparent;
	text-decoration: none;
	/* fallback for browsers without the colour classes applied */
	background-color: var(--js-grey);
	color: var(--js-white);
}

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

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

/* --- Sizes --- */
.badge_sm {
	font-size: 10pt;
	padding: 5px 8px;
	margin: 0px 0px;
	gap: 5px;
}

.badge_lg {
	font-size: 13pt;
	padding: 10px 18px;
	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);
	/* color: var(--js-grey)  OR color: var(--js-white) */
}

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


/* --- Soft (tinted background, coloured text) ----------------------------- */
.badge_soft {
	background-color: var(--js-beige);
	color: var(--js-grey);
	border-color: transparent;
}

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

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

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

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

.badge_soft.badge_grey {
	background-color: #ececec;
	color: var(--js-grey);
}

/* --- Outline (transparent, coloured border and text) --------------------- */
.badge_outline {
	background-color: transparent;
	color: var(--js-grey);
	border-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: #0a7a74;
	/* darkened — the raw teal is light on white */
	--badge_accent: var(--js-blue);
}

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

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

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

/* When an outline badge sits inside a link, invert it to solid on hover/
   focus so the whole thing reads as clickable. Scoped to "inside an <a>"
   so it never affects a standalone/static badge label used as a tag. */
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);
}

/* a:hover .badge_soft,
a:focus-visible .badge_soft {
	background-color: var(--badge_accent, currentColor);
	border-color: var(--badge_accent, currentColor);
	color: var(--js-white);
} */

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

/* Sits neatly next to a heading */
h1>.badge,
h2>.badge,
h3>.badge,
h4>.badge {
	position: relative;
	top: -0.15em;
	margin-left: 10px;
}

/* Row of badges */
.badge_row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

/* Badge pinned to the corner of a card */
.badge_corner {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
}

@media only screen and (max-width: 650px) {
	.badge {
		font-size: 9pt;
		padding: 6px 10px;
	}

	.badge_lg {
		font-size: 10.5pt;
		padding: 8px 14px;
	}
}