.af-text {
	padding: 8px;
}

.af-text-spacer { 
	clear:both;
	height:20px;
}

/* Base placeholder */
.af-placeholder {
	border: solid 1px #888;
	text-align: center;
	display: flex;
	flex-direction: column; /* stack children vertically */
	align-items: center;
	justify-content: top;
	font-size: 1.4em;
	font-weight: 400;
	color: #222;
	text-transform: capitalize;
	min-height: 100px;
	margin: 0px;
	transition: 0.25s;
	line-height:1.5em;
	padding:15px 20px;
}

.af-placeholder .subtitle { 
	font-size:0.75em;
	color: #666;
	text-transform:none;
}

/* Remove underline and link colors */
a.link-placeholder {
	text-decoration: none;
	color: inherit;
	display: block; /* make the link cover the div */
}

	/* Hover only for link placeholders */
	a.link-placeholder:hover .af-placeholder {
		filter: brightness(90%); /* reduces brightness */
		cursor: pointer;
	}

/* Non-link placeholders → no hover */

.af-button {
	background-color: var(--btn-bg);
	display: inline-block;
	padding: 10px 18px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 500;
	transition: background-color 0.2s ease, transform 0.1s ease;
	margin-right:10px;
	margin-bottom:10px;
}

	.af-button:hover {
		background-color: color-mix(in srgb, var(--btn-bg), black 15%);
	}

	.af-button:active {
		background-color: color-mix(in srgb, var(--btn-bg), black 25%);
		transform: translateY(1px);
	}