/*
 * HSH Blog — [hsh_blog] shortcode.
 *
 * Toolbar (Sort By / Filter By) + Load More around the shared .hsh-posts
 * card grid (posts-grid.css is a dependency and styles the cards).
 * Overridable custom properties: --hsh-b-accent, --hsh-b-btn-color,
 * --hsh-b-control-bg, --hsh-b-control-color.
 */

.hsh-blog {
	--hsh-b-accent: #eec95c;
	--hsh-b-btn-color: #3a3a1f;
	--hsh-b-control-bg: #f3f1ec;
	--hsh-b-control-color: #5b5b5b;
}

/* ---- Toolbar ---- */

.hsh-blog__toolbar {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 34px;
}

.hsh-blog__control {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hsh-b-control-bg);
	border-radius: 8px;
	padding: 10px 14px;
	color: var(--hsh-b-control-color);
	font-size: 14px;
}

.hsh-blog__control-label {
	white-space: nowrap;
}

.hsh-blog__control select {
	appearance: auto;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding-right: 2px;
	max-width: 180px;
}

.hsh-blog__control select:focus-visible {
	outline: 2px solid var(--hsh-b-accent);
	outline-offset: 2px;
}

/* ---- Load More ---- */

.hsh-blog__footer {
	display: flex;
	justify-content: center;
	margin-top: 44px;
}

.hsh-blog button.hsh-blog__more {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	margin: 0;
	border: 0;
	background: var(--hsh-b-accent);
	color: var(--hsh-b-btn-color);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: 999px;
	padding: 16px 34px;
	cursor: pointer;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.hsh-blog button.hsh-blog__more:hover,
.hsh-blog button.hsh-blog__more:focus-visible {
	filter: brightness(0.94);
}

.hsh-blog button.hsh-blog__more[disabled] {
	opacity: 0.6;
	cursor: default;
}

.hsh-blog button.hsh-blog__more[hidden] {
	display: none;
}

/* While a filter/sort request replaces the grid. */
.hsh-blog.is-loading [data-hsh-blog-grid] {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

/* ---- Mobile ---- */

@media (max-width: 640px) {
	.hsh-blog__toolbar {
		justify-content: stretch;
	}

	.hsh-blog__control {
		flex: 1 1 100%;
		justify-content: space-between;
	}
}

/* ---- Infinite-scroll loading indicator (load_on="scroll") ---- */

.hsh-blog__loading {
	display: inline-block;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid var(--hsh-b-control-bg);
	border-top-color: var(--hsh-b-accent);
	animation: hsh-blog-spin 0.8s linear infinite;
}

.hsh-blog__loading[hidden] {
	display: none;
}

@keyframes hsh-blog-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.hsh-blog__loading {
		animation-duration: 2s;
	}
}