/* SEO Download Buttons — front end. Colors come from the settings page as CSS variables. */
.sdb-downloads {
	--sdb-primary: #FB5300;
	--sdb-secondary: #C24000;
	--sdb-text: #ffffff;
	--sdb-radius: 10px;
	margin-block: 2em 1em;
	clear: both;
}
.sdb-downloads .sdb-heading { margin-block: 0 0.75em; }
.sdb-downloads .sdb-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 12px;
}
.sdb-downloads .sdb-item { margin: 0; padding: 0; }
.sdb-downloads .sdb-item::before,
.sdb-downloads .sdb-item::marker { content: none; }

.sdb-downloads .sdb-btn {
	display: flex; align-items: center; gap: 14px;
	padding: 10px; padding-inline-end: 14px;
	background: var(--sdb-primary); color: var(--sdb-text);
	border-radius: var(--sdb-radius);
	text-decoration: none; line-height: 1.3;
	box-shadow: inset 0 -3px 0 var(--sdb-secondary);
	transition: background-color .18s ease, transform .18s ease;
}
.sdb-downloads .sdb-btn:hover,
.sdb-downloads .sdb-btn:focus-visible {
	background: var(--sdb-secondary); color: var(--sdb-text); text-decoration: none;
}
.sdb-downloads .sdb-btn:active { transform: translateY(1px); }
.sdb-downloads .sdb-btn:focus-visible { outline: 3px solid var(--sdb-primary); outline-offset: 3px; }

.sdb-downloads .sdb-icon {
	flex: 0 0 auto; display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: calc(var(--sdb-radius) * .75);
	background: var(--sdb-secondary); color: var(--sdb-text);
	transition: background-color .18s ease;
}
.sdb-downloads .sdb-btn:hover .sdb-icon,
.sdb-downloads .sdb-btn:focus-visible .sdb-icon { background: var(--sdb-primary); }
.sdb-downloads .sdb-svg { display: block; }

.sdb-downloads .sdb-meta {
	flex: 1 1 auto; min-width: 0;
	display: flex; flex-direction: column; gap: 2px;
}
.sdb-downloads .sdb-name { font-weight: 700; font-size: 1.02em; overflow-wrap: anywhere; }
.sdb-downloads .sdb-details {
	display: flex; flex-wrap: wrap; gap: 4px 12px;
	font-size: .85em; opacity: .85;
}
.sdb-downloads .sdb-cta {
	flex: 0 0 auto; font-weight: 600; font-size: .9em;
	padding: 7px 14px; border-radius: 999px; border: 1px solid currentColor;
}

@media (max-width: 480px) {
	.sdb-downloads .sdb-cta { display: none; } /* Whole row is the tap target. */
	.sdb-downloads .sdb-icon { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.sdb-downloads .sdb-btn, .sdb-downloads .sdb-icon { transition: none; }
	.sdb-downloads .sdb-btn:active { transform: none; }
}