/*
 * 1015 Brands footer badge.
 *
 * The logo is a CSS mask (the mask image URL is added inline by the plugin),
 * painted with currentColor, so it always matches the label at rest and on hover.
 * Default colors measure at least 4.5:1 on typical footers:
 *   light text #c4c4c4 / hover #ffffff on dark grounds (#000 to #334155),
 *   dark text  #4a4a4a / hover #171717 on light grounds (#fff to #d1d5db).
 * Selectors use two classes, and color/underline are !important, because theme
 * rules like ".widget a:link" or "#colophon a" would otherwise recolor the badge.
 * Phones get a tighter pill (14px padding, 8px gap, 0.12em tracking) so it stays
 * on one line in a 300px column (360px screen with 30px theme gutters);
 * the spec values come back at 640px. Below that it wraps; never nowrap.
 */

.b1015 {
	--b1015-rest: #4a4a4a;
	--b1015-hover: #171717;
	--b1015-pill: rgba(0, 0, 0, 0.03);
	--b1015-pill-hover: rgba(0, 0, 0, 0.06);
	--b1015-border: rgba(0, 0, 0, 0.08);
	--b1015-border-hover: rgba(0, 0, 0, 0.14);
	--b1015-line: rgba(0, 0, 0, 0.14);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	max-width: 100%;
	text-align: center;
}

.b1015.b1015--light {
	--b1015-rest: #c4c4c4;
	--b1015-hover: #ffffff;
	--b1015-pill: rgba(255, 255, 255, 0.03);
	--b1015-pill-hover: rgba(255, 255, 255, 0.06);
	--b1015-border: rgba(255, 255, 255, 0.06);
	--b1015-border-hover: rgba(255, 255, 255, 0.12);
	--b1015-line: rgba(255, 255, 255, 0.12);
}

.b1015.b1015--auto {
	width: 100%;
	clear: both;
	padding: 24px 16px 28px;
}

.b1015 *,
.b1015 *::before,
.b1015 *::after {
	box-sizing: border-box;
}

.b1015 .b1015-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--b1015-border);
	border-radius: 9999px;
	background: var(--b1015-pill);
	box-shadow: none;
	color: var(--b1015-rest) !important;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none !important;
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

.b1015 .b1015-badge:hover,
.b1015 .b1015-badge:focus-visible {
	border-color: var(--b1015-border-hover);
	background: var(--b1015-pill-hover);
	color: var(--b1015-hover) !important;
	text-decoration: none !important;
}

.b1015 .b1015-label {
	color: inherit !important;
	font-size: 10px;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
}

.b1015 .b1015-rule {
	flex: none;
	width: 1px;
	height: 16px;
	background-color: var(--b1015-line);
}

.b1015 .b1015-logo {
	display: block;
	flex: none;
	height: 20px;
	width: auto;
	aspect-ratio: 180 / 93;
	background-color: currentColor !important;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.b1015 .b1015-request {
	color: var(--b1015-rest) !important;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: underline !important;
	text-underline-offset: 4px;
	box-shadow: none;
	transition: color 0.3s;
}

.b1015 .b1015-request:hover,
.b1015 .b1015-request:focus-visible {
	color: var(--b1015-hover) !important;
}

@media (min-width: 640px) {
	.b1015 .b1015-badge {
		gap: 12px;
		padding: 10px 20px;
	}

	.b1015 .b1015-label {
		letter-spacing: 0.2em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.b1015 .b1015-badge,
	.b1015 .b1015-request {
		transition: none;
	}
}