/* Benecaster Recipes — index page + [benecaster_recipe] inline shortcode.
 * The singular /recipes/{slug}/ template is rendered by the benecaster-theme;
 * its .benecaster-recipe-page__* rules are gone. Shared selectors on badges
 * and code blocks retain the -page__ prefix out of laziness — they still
 * match the .benecaster-recipe__ and .benecaster-recipe-card__ variants
 * emitted by the shortcode and the index cards, respectively.
 */

.benecaster-recipes-index {
	max-width: 980px;
	margin: 2rem auto;
	padding: 0 1rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.benecaster-recipe-page__header,
.benecaster-recipes-index__header {
	margin-bottom: 1.25rem;
}
.benecaster-recipe-page__title,
.benecaster-recipes-index__header h1 {
	margin: 0 0 0.5rem 0;
	font-size: 2rem;
}
.benecaster-recipes-index__subtitle {
	color: #555;
	margin: 0;
}

/* ── Inline embed ([benecaster_recipe], `full` display) ─────────────────────
 * A bounding card + eyebrow label, so an embed inside a hook's own
 * description reads as a separate recipe rather than another of the host
 * page's own examples — see RecipeShortcodes::render_single_html().
 */
.benecaster-recipe--full {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: #f8f9fb;
	border: 1px solid #e1e4ea;
	border-left: 3px solid #1f4ea1;
	border-radius: 6px;
}
.benecaster-recipe__eyebrow {
	margin: 0 0 0.25rem 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1f4ea1;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.benecaster-recipe-page__badges,
.benecaster-recipe__badges,
.benecaster-recipe-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.5rem 0;
}
.benecaster-recipe-page__badge,
.benecaster-recipe__badge,
.benecaster-recipe-card__badge {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: #eef1f5;
	color: #333;
	text-transform: none;
}
.benecaster-recipe-page__badge--free,
.benecaster-recipe__badge--free,
.benecaster-recipe-card__badge--free {
	background: #e1f5e6;
	color: #1b6b30;
}
.benecaster-recipe-page__badge--premium,
.benecaster-recipe__badge--premium,
.benecaster-recipe-card__badge--premium {
	background: #fff0d6;
	color: #7a4d00;
}
.benecaster-recipe-page__badge--difficulty,
.benecaster-recipe__badge--difficulty,
.benecaster-recipe-card__badge--difficulty {
	background: #e6efff;
	color: #1f4ea1;
}
.benecaster-recipe-page__badge--addon,
.benecaster-recipe__badge--addon,
.benecaster-recipe-card__badge--addon {
	background: #f5e8ff;
	color: #5d2a8a;
}

/* ── Code block — retained for the [benecaster_recipe] inline shortcode. */
.benecaster-recipe__code {
	background: #0f172a;
	color: #f1f5f9;
	padding: 1rem;
	border-radius: 6px;
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* ── Index / grid ────────────────────────────────────────────────────────── */
.benecaster-recipes-index__filters {
	margin: 1.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background: #f8f9fb;
	border-radius: 8px;
	border: 1px solid #e1e4ea;
}
.benecaster-recipes-index__filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.benecaster-recipes-index__filter-label {
	font-weight: 600;
	margin-right: 0.25rem;
}
.benecaster-recipes-index__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.benecaster-recipes-index__chip,
.benecaster-recipes-index__toggle-btn {
	border: 1px solid #ccd0d8;
	background: #fff;
	color: #333;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.875rem;
}
.benecaster-recipes-index__chip--active,
.benecaster-recipes-index__toggle-btn--active {
	background: #1f4ea1;
	color: #fff;
	border-color: #1f4ea1;
}
.benecaster-recipes-index__difficulty {
	padding: 0.3rem 0.5rem;
	border: 1px solid #ccd0d8;
	border-radius: 6px;
	background: #fff;
}
.benecaster-recipes-index__grid,
.benecaster-recipes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}
.benecaster-recipes-grid[data-columns="1"] { grid-template-columns: 1fr; }
.benecaster-recipes-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.benecaster-recipes-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }

.benecaster-recipe-card {
	background: #fff;
	border: 1px solid #e3e3eb;
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.benecaster-recipe-card--hidden {
	display: none;
}
.benecaster-recipe-card__title {
	margin: 0;
	font-size: 1.125rem;
}
.benecaster-recipe-card__title a {
	color: inherit;
	text-decoration: none;
}
.benecaster-recipe-card__title a:hover {
	text-decoration: underline;
}
.benecaster-recipe-card__excerpt {
	color: #555;
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
}
.benecaster-recipes-index__no-matches {
	margin: 2rem 0;
	color: #555;
	font-style: italic;
	text-align: center;
}
.benecaster-recipes-index__empty {
	margin: 2rem 0;
	color: #555;
	font-style: italic;
	text-align: center;
}

/* ⚠⚠ **RESTORES `hidden` ON THIS PAGE'S OWN MARKUP, BECAUSE THE BROWSER'S RULE
 * CAN BE BEATEN BY A SINGLE LINE IN A THEME.** `[hidden] { display: none }` is a
 * *user-agent* rule, so ANY author rule setting `display` on the same element
 * outranks it outright and the element renders with the attribute still set.
 * The theme's `.bc-page .bc-form__field { display: flex }` did exactly that on
 * `/checkout/`, painting four empty boxes onto a live payment page; see the long
 * note in `checkout.css` for that instance.
 *
 * ⚠⚠ **THIS PAGE IS NOT AFFECTED TODAY, AND THAT IS WHY THE RULE IS HERE.** Its
 * toggled elements (the "no recipes match" line) happen to carry classes the theme does not
 * style — which is luck, not design, and one class rename away from the same
 * defect. **There is no runtime signal when it happens**: nothing throws, no
 * PHP test can observe computed style, and there is no vitest config in this
 * repository, so the only way it surfaces is somebody looking at the page.
 *
 * ⚠ **`!important` is deliberate.** Our selector and a theme's can have
 * identical specificity, so the winner would otherwise be decided by stylesheet
 * order between a theme and a plugin — which neither side controls and which
 * changes silently. `hidden` means *not rendered in any presentation*, so there
 * is no legitimate rule for this to override.
 *
 * ⚠ **Pinned by `tests/Architecture/HiddenAttributeRestoredTest.php`**, which
 * fails the build if this rule goes, and which also fails on a NEW page of this
 * plugin's own that hides markup without carrying the same line. **Do not delete
 * it if the theme is ever fixed** — this is what stops the plugin-side rules
 * being dropped as redundant, which would put the whole thing back the moment a
 * theme is changed or replaced. */
.benecaster-recipes-index [hidden] {
	display: none !important;
}