/* start.php — recipe type filter bar (width aligns with .tiles in rein-fein.css) */
.recipe_filter_bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	box-sizing: border-box;
	margin: 12px 10px 14px;
	justify-content: stretch;
	align-items: stretch;
}

.recipe_filter_btn {
	flex: 1 1 calc(33.333% - 8px);
	max-width: calc(33.333% - 8px);
	box-sizing: border-box;
	padding: 10px 8px;
	font-size: 0.95rem;
	font-family: inherit;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	border: 2px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #333;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.recipe_filter_btn:hover {
	border-color: orange;
}

.recipe_filter_btn.is_active {
	background-color: orange;
	border-color: orange;
	color: #000;
	font-weight: 600;
}

.recipe_filter_btn:focus-visible {
	outline: 2px solid #333;
	outline-offset: 2px;
}

.tile_general.is_filter_hidden {
	display: none !important;
}

/* Extra filters were desktop-only; now available on all viewports */
.recipe_filter_btn_pc_only {
	display: block;
}

@media screen and (max-width: 767px) {
	.recipe_filter_bar {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
		margin: 10px 8px 12px;
	}

	.recipe_filter_btn {
		flex: none;
		max-width: none;
		width: 100%;
		min-width: 0;
		padding: 6px 2px;
		font-size: 0.72rem;
		line-height: 1.15;
		border-width: 1.5px;
	}

	.recipe_filter_btn_pc_only,
	.recipe_filter_more.recipe_filter_btn_pc_only {
		display: block;
		flex: none;
		max-width: none;
		width: 100%;
		min-width: 0;
	}

	.recipe_filter_more {
		position: relative;
		flex: none;
		max-width: none;
		width: 100%;
		min-width: 0;
	}

	.recipe_filter_more .recipe_filter_more_toggle {
		width: 100%;
		height: 100%;
	}

	.recipe_filter_more_menu {
		left: 0;
		right: auto;
		min-width: 11rem;
	}
}

@media screen and (min-width: 768px) {
	.recipe_filter_bar {
		flex-wrap: nowrap;
	}

	.recipe_filter_btn_pc_only,
	.recipe_filter_more.recipe_filter_btn_pc_only {
		display: block;
	}

	.recipe_filter_btn {
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
		padding: 8px 4px;
		font-size: 0.88rem;
	}

	.recipe_filter_more {
		position: relative;
		flex: 1 1 0;
		min-width: 0;
	}

	.recipe_filter_more .recipe_filter_more_toggle {
		width: 100%;
		height: 100%;
	}
}

.recipe_filter_more_menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 200;
	min-width: 12rem;
	max-width: 18rem;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.recipe_filter_more_menu:not([hidden]) {
	display: block;
}

.recipe_filter_more_item {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	font-size: 0.88rem;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	border: none;
	background: transparent;
	color: #333;
}

.recipe_filter_more_item:hover,
.recipe_filter_more_item:focus-visible {
	background: #fdf4e3;
	outline: none;
}

.recipe_filter_more_item.is_active {
	background-color: orange;
	font-weight: 600;
}

.recipe_filter_more_toggle.is_active {
	background-color: orange;
	border-color: orange;
	color: #000;
	font-weight: 600;
}

/* Same horizontal inset as .tiles (rein-fein.css) */
@media screen and (min-width: 1301px) {
	.recipe_filter_bar {
		margin-left: 20px;
		margin-right: 20px;
	}
}

@media screen and (min-width: 1501px) {
	.recipe_filter_bar {
		margin-left: 10%;
		margin-right: 10%;
	}
}