/**
 * plg_content_nbdonations
 *
 * Every colour is a custom property, so a template can restyle the block
 * without touching this file:
 *
 *   .nbd { --nbd-accent: #1c6e4a; --nbd-accent-text: #fff; }
 */

.nbd {
	--nbd-gap: .6rem;
	--nbd-radius: .55rem;
	--nbd-accent: #2b6cb0;
	--nbd-accent-text: #fff;
	--nbd-border: rgba(0, 0, 0, .15);
	--nbd-muted: rgba(0, 0, 0, .65);
	--nbd-logo-height: 36px;

	margin: 2rem 0 1rem;
	padding: 1.1rem 1.2rem 1.2rem;
	border: 1px solid var(--nbd-border);
	border-radius: calc(var(--nbd-radius) + .25rem);
	background: transparent;
}

.nbd-heading {
	margin: 0 0 .35rem;
	font-size: 1.05rem;
	line-height: 1.3;
	font-weight: 700;
}

.nbd-intro {
	margin: 0 0 .85rem;
	font-size: .92rem;
	color: var(--nbd-muted);
}

.nbd-intro > *:last-child {
	margin-bottom: 0;
}

/**
 * The list. Written with the wrapper in the selector so a template's own
 * "ul li" rules (bullets, indents, borders) lose to these.
 */
.nbd ul.nbd-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nbd-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nbd ul.nbd-list > li.nbd-item {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
	text-indent: 0;
}

.nbd ul.nbd-list > li.nbd-item::before,
.nbd ul.nbd-list > li.nbd-item::after {
	content: none;
	display: none;
}

.nbd ul.nbd-list > li.nbd-item::marker {
	content: '';
}

/* Inline (default): the buttons sit in one wrapping row. */
.nbd-inline ul.nbd-list {
	flex-direction: row;
}

/* Stacked: one button per line, each only as wide as it needs. */
.nbd-stacked ul.nbd-list {
	flex-direction: column;
	align-items: flex-start;
}

.nbd-align-center .nbd-list,
.nbd-align-center .nbd-heading,
.nbd-align-center .nbd-intro {
	justify-content: center;
	text-align: center;
}

.nbd-stacked.nbd-align-center ul.nbd-list {
	align-items: center;
}

.nbd-align-end .nbd-list,
.nbd-align-end .nbd-heading,
.nbd-align-end .nbd-intro {
	justify-content: flex-end;
	text-align: right;
}

.nbd-stacked.nbd-align-end ul.nbd-list {
	align-items: flex-end;
}

.nbd-btn {
	/* Resolved per button, so every service keeps its own colour. */
	--nbd-accent-ink: var(--nbd-accent);

	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .55em 1em;
	border: 1px solid transparent;
	border-radius: var(--nbd-radius);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	transition: transform .12s ease, filter .12s ease, background-color .12s ease, color .12s ease;
}

.nbd-btn:hover,
.nbd-btn:focus-visible {
	text-decoration: none;
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.nbd-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.nbd .nbd-btn {
	box-shadow: none;
}

.nbd-icon {
	flex: 0 0 auto;
}

/**
 * Logo buttons. The image carries the branding, so the button chrome goes
 * away and every logo - local file or hotlinked badge, whatever its real
 * size - is scaled to the same height.
 */
.nbd a.nbd-btn-logo {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.nbd a.nbd-btn-logo:hover,
.nbd a.nbd-btn-logo:focus-visible {
	background: none;
	filter: brightness(1.06);
}

.nbd .nbd-img {
	display: block;
	width: auto;
	height: var(--nbd-logo-height);
	max-width: 100%;
	max-height: none;
	border-radius: var(--nbd-radius);
	object-fit: contain;
}

/* Solid (default) */
.nbd-solid .nbd-btn {
	background-color: var(--nbd-accent);
	color: var(--nbd-accent-text);
}

/* Outline. Uses the ink colour, so light brand colours stay readable. */
.nbd-outline .nbd-btn {
	background-color: transparent;
	border-color: var(--nbd-accent-ink);
	color: var(--nbd-accent-ink);
}

.nbd-outline .nbd-btn:hover,
.nbd-outline .nbd-btn:focus-visible {
	background-color: var(--nbd-accent);
	color: var(--nbd-accent-text);
}

/* Plain links */
.nbd-link {
	padding: 0;
	border: 0;
}

.nbd-link .nbd-list {
	gap: 1.1rem;
}

.nbd-link .nbd-btn {
	padding: 0;
	background: none;
	color: var(--nbd-accent-ink);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.nbd-link .nbd-btn:hover,
.nbd-link .nbd-btn:focus-visible {
	transform: none;
}

/* Per service colours, used when "Service colours" is on. */
.nbd-brand .nbd-btn-paypal {
	--nbd-accent: #0070ba;
	--nbd-accent-text: #fff;
}

.nbd-brand .nbd-btn-buymeacoffee {
	--nbd-accent: #ffdd00;
	--nbd-accent-text: #1a1a1a;
	--nbd-accent-ink: #806c00;
}

.nbd-brand .nbd-btn-kofi {
	--nbd-accent: #ff5e5b;
	--nbd-accent-text: #fff;
	--nbd-accent-ink: #d63a37;
}

.nbd-brand .nbd-btn-patreon {
	--nbd-accent: #f2643f;
	--nbd-accent-text: #fff;
	--nbd-accent-ink: #cf4620;
}

.nbd-brand .nbd-btn-github {
	--nbd-accent: #db61a2;
	--nbd-accent-text: #fff;
	--nbd-accent-ink: #b83a7f;
}

.nbd-brand .nbd-btn-stripe {
	--nbd-accent: #5b54e8;
	--nbd-accent-text: #fff;
}

.nbd-brand .nbd-btn-revolut {
	--nbd-accent: #0075eb;
	--nbd-accent-text: #fff;
}

.nbd-brand .nbd-btn-bank {
	--nbd-accent: #3f4a5a;
	--nbd-accent-text: #fff;
}

.nbd-brand .nbd-btn-custom {
	--nbd-accent: #2b6cb0;
	--nbd-accent-text: #fff;
}

@media (prefers-color-scheme: dark) {
	.nbd {
		--nbd-border: rgba(255, 255, 255, .22);
		--nbd-muted: rgba(255, 255, 255, .72);
	}

	/* On a dark background the brand colours themselves read well. */
	.nbd-brand .nbd-btn {
		--nbd-accent-ink: var(--nbd-accent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nbd-btn {
		transition: none;
	}

	.nbd-btn:hover,
	.nbd-btn:focus-visible {
		transform: none;
	}
}