/**
 * Recipe Card
 *
 * Front-end styling for one embedded recipe (templates/recipe-card.php).
 * Dark header band, warm parchment tones, tabs, ingredient groups, step
 * timelines, notes callout, print styles.
 *
 * --brewlab-recipes-header-bg is set inline per-recipe from the Media
 * metabox's color field, so the header can't be themed from here.
 *
 * The Google Fonts import is NOT an @import in this file — see
 * includes/enqueue.php, which wp_enqueue_style()s Playfair Display /
 * Source Sans 3 as their own stylesheet instead, so the font request loads
 * in parallel with this stylesheet rather than being discovered only after
 * it downloads.
 *
 * Every selector is scoped under .brewlab-recipes-card (two classes,
 * specificity 0,2,0) rather than a bare single class — found the hard way
 * on the Newspaper/tagDiv theme, which injects a per-block inline <style>
 * targeting plain descendant selectors like ".tdi_82 p" (0,1,1). That beats
 * a single-class rule regardless of load order, silently recoloring card
 * text to match the surrounding page. Two classes beats it without relying
 * on !important.
 */

.brewlab-recipes-wrap {
	max-width: 720px;
	margin: 2rem auto;
}

.brewlab-recipes-card {
	--c-bg: #faf8f4;
	--c-surface: #ffffff;
	--c-border: #e8e2d9;
	--c-text: #2c2a26;
	--c-muted: #7a736a;
	--c-accent: #8b6914;
	--c-accent-lt: #f5edd6;
	--c-header-fg: #faf8f4;
	--c-tab-act: #8b6914;
	--radius: 6px;
	--shadow: 0 2px 16px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
	--font-display: 'Playfair Display', Georgia, serif;
	--font-body: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif;

	font-family: var(--font-body);
	font-size: 15px;
	color: var(--c-text);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	line-height: 1.5;
}

.brewlab-recipes-wrap .brewlab-recipes-credit {
	margin: 6px 0 0;
	text-align: right;
	font-size: 11px;
}
.brewlab-recipes-wrap .brewlab-recipes-credit a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--c-muted, #7a736a);
	opacity: .7;
	text-decoration: none;
}
.brewlab-recipes-wrap .brewlab-recipes-credit a:hover {
	color: var(--c-accent, #8b6914);
	opacity: 1;
	text-decoration: underline;
}
.brewlab-recipes-wrap .brewlab-recipes-credit__logo {
	display: inline-flex;
}
.brewlab-recipes-wrap .brewlab-recipes-credit__logo svg {
	display: block;
	width: 11px;
	height: 13px;
}

/* ── Header ───────────────────────────────────────────────── */
.brewlab-recipes-card .brewlab-recipes-card__header {
	background: var(--brewlab-recipes-header-bg);
	color: var(--c-header-fg);
	padding: 28px 28px 24px;
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.brewlab-recipes-card .brewlab-recipes-card__image {
	flex: 0 0 180px;
	width: 180px;
	height: 180px;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.brewlab-recipes-card .brewlab-recipes-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.brewlab-recipes-card .brewlab-recipes-card__meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.brewlab-recipes-card .brewlab-recipes-card__eyebrow {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.brewlab-recipes-card .brewlab-recipes-tag {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 3px;
	background: var(--c-accent);
	color: #fff;
}
.brewlab-recipes-card .brewlab-recipes-tag--muted {
	background: rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .75);
}

.brewlab-recipes-card .brewlab-recipes-card__title {
	font-family: var(--font-display);
	font-size: clamp(22px, 4vw, 32px);
	font-weight: 700;
	color: var(--c-header-fg);
	margin: 0;
	line-height: 1.2;
}

.brewlab-recipes-card .brewlab-recipes-card__summary {
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
	margin: 0;
	line-height: 1.55;
}

.brewlab-recipes-card .brewlab-recipes-card__author {
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
	margin: 0;
	font-style: italic;
}

/* ── Toolbar ──────────────────────────────────────────────── */
/* A neutral strip between the (per-recipe-colored) header and the stat
   strip — batch scaler, unit toggle, and print live here instead of on
   the header so they stay legible no matter what header color a recipe
   author picks. */
.brewlab-recipes-card .brewlab-recipes-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 24px;
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
}
.brewlab-recipes-card .brewlab-recipes-toolbar__left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
.brewlab-recipes-card .brewlab-recipes-toolbar__right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.brewlab-recipes-card .brewlab-recipes-unit-toggle {
	display: flex;
	align-items: center;
	gap: 3px;
}
.brewlab-recipes-card .brewlab-recipes-unit-toggle__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-right: 3px;
	white-space: nowrap;
}
.brewlab-recipes-card .brewlab-recipes-unit-btn {
	padding: 2px 8px;
	border-radius: 3px;
	border: 1px solid var(--c-border);
	background: transparent;
	color: var(--c-muted);
	cursor: pointer;
	font-size: 11px;
	font-family: sans-serif;
	font-weight: 400;
	line-height: 1.6;
	white-space: nowrap;
	transition: background .15s, color .15s, border-color .15s;
}
.brewlab-recipes-card .brewlab-recipes-unit-btn:hover {
	border-color: var(--c-accent);
	color: var(--c-text);
}
.brewlab-recipes-card .brewlab-recipes-unit-btn.is-active {
	background: var(--c-accent);
	color: #fff;
	border-color: var(--c-accent);
	font-weight: 600;
}

/* Batch scaler */
.brewlab-recipes-card .brewlab-recipes-batch-scaler {
	display: flex;
	align-items: center;
	gap: 8px;
}
.brewlab-recipes-card .brewlab-recipes-batch-scaler__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-muted);
	white-space: nowrap;
}
.brewlab-recipes-card .brewlab-recipes-batch-scaler__control {
	display: flex;
	align-items: center;
	gap: 5px;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 4px;
	padding: 4px 10px 4px 6px;
}
.brewlab-recipes-card .brewlab-recipes-batch-input {
	width: 52px;
	background: transparent;
	border: none;
	outline: none;
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	text-align: right;
	-moz-appearance: textfield;
}
.brewlab-recipes-card .brewlab-recipes-batch-input::-webkit-outer-spin-button,
.brewlab-recipes-card .brewlab-recipes-batch-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.brewlab-recipes-card .brewlab-recipes-batch-scaler__unit {
	font-size: 13px;
	color: var(--c-muted);
	white-space: nowrap;
}

.brewlab-recipes-card .brewlab-recipes-print-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: 4px;
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.brewlab-recipes-card .brewlab-recipes-print-btn:hover {
	background: var(--c-accent-lt);
	border-color: var(--c-accent);
}

/* ── Stat Strip ───────────────────────────────────────────── */
.brewlab-recipes-card .brewlab-recipes-stats {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 1px solid var(--c-border);
	background: var(--c-surface);
}

.brewlab-recipes-card .brewlab-recipes-stat {
	flex: 1 1 auto;
	min-width: 80px;
	text-align: center;
	padding: 14px 10px 12px;
	border-right: 1px solid var(--c-border);
	position: relative;
}
.brewlab-recipes-card .brewlab-recipes-stat:last-child { border-right: none; }

.brewlab-recipes-card .brewlab-recipes-stat__value {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	color: var(--c-text);
	line-height: 1;
}

.brewlab-recipes-card .brewlab-recipes-stat__label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-top: 4px;
}

.brewlab-recipes-card .brewlab-recipes-srm-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .12);
	flex-shrink: 0;
	/* A numeral's ink sits slightly below the true center of its line-height:1
	   box (cap-height, not full ascender/descender), so flex-centering it
	   against a true circle leaves the circle looking a hair high. */
	position: relative;
	top: 1px;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.brewlab-recipes-card .brewlab-recipes-tabs {
	background: var(--c-surface);
}

.brewlab-recipes-card .brewlab-recipes-tabs__nav {
	display: flex;
	border-bottom: 2px solid var(--c-border);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.brewlab-recipes-card .brewlab-recipes-tabs__nav::-webkit-scrollbar { display: none; }

.brewlab-recipes-card .brewlab-recipes-tab-btn {
	flex: 0 0 auto;
	padding: 13px 20px;
	border: none;
	background: none;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--c-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color .15s, border-color .15s;
	white-space: nowrap;
}
.brewlab-recipes-card .brewlab-recipes-tab-btn:hover { color: var(--c-text); }
.brewlab-recipes-card .brewlab-recipes-tab-btn.is-active {
	color: var(--c-tab-act);
	border-bottom-color: var(--c-tab-act);
}

.brewlab-recipes-card .brewlab-recipes-tab-panel {
	display: none;
	padding: 0;
}
.brewlab-recipes-card .brewlab-recipes-tab-panel.is-active { display: block; }

/* ── Ingredient Groups ────────────────────────────────────── */
.brewlab-recipes-card .brewlab-recipes-group {
	margin-bottom: 0;
}
.brewlab-recipes-card .brewlab-recipes-group + .brewlab-recipes-group {
	border-top: 1px solid var(--c-border);
	padding-top: 0;
}

.brewlab-recipes-card .brewlab-recipes-group__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--c-text);
	margin: 0 0 4px;
	padding: 16px 24px 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
}
.brewlab-recipes-card .brewlab-recipes-group__subtitle {
	font-size: 13px;
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--c-muted);
	margin-left: 8px;
	font-style: italic;
	text-transform: none;
	letter-spacing: normal;
}

.brewlab-recipes-card .brewlab-recipes-subheading {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-accent);
	padding: 10px 24px 6px;
}

.brewlab-recipes-card .brewlab-recipes-list {
	display: flex;
	flex-direction: column;
}

.brewlab-recipes-card .brewlab-recipes-item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 24px;
	border-top: 1px solid var(--c-border);
	font-size: 15px;
	line-height: 1.4;
}
.brewlab-recipes-card .brewlab-recipes-item--total {
	font-weight: 700;
	color: var(--c-muted);
	font-size: 13px;
	border-top: 2px solid var(--c-border);
	justify-content: flex-end;
}
.brewlab-recipes-card .brewlab-recipes-item__total-label {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--c-muted);
	text-align: right;
	white-space: nowrap;
}

.brewlab-recipes-card .brewlab-recipes-item__amt {
	flex: 0 0 100px;
	font-weight: 700;
	color: var(--c-text);
	white-space: nowrap;
	font-size: 15px;
}
.brewlab-recipes-card .brewlab-recipes-item__name {
	flex: 1;
	color: var(--c-text);
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.brewlab-recipes-card .brewlab-recipes-item__detail {
	font-size: 13px;
	color: var(--c-muted);
	font-weight: 400;
}
.brewlab-recipes-card .brewlab-recipes-item__pct {
	flex: 0 0 44px;
	text-align: right;
	font-size: 13px;
	color: var(--c-muted);
	white-space: nowrap;
}
.brewlab-recipes-card .brewlab-recipes-item__use {
	flex: 0 0 120px;
	text-align: right;
}

.brewlab-recipes-card .brewlab-recipes-empty-tab {
	padding: 24px;
	color: var(--c-muted);
	font-size: 14px;
	font-style: italic;
	margin: 0;
}

/* ── Step timelines (mash + fermentation) ─────────────────── */
.brewlab-recipes-card .brewlab-recipes-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 24px 16px;
}

.brewlab-recipes-card .brewlab-recipes-step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--c-border);
	position: relative;
}
.brewlab-recipes-card .brewlab-recipes-step:last-child { border-bottom: none; }

.brewlab-recipes-card .brewlab-recipes-step__dot {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--c-accent);
	position: relative;
}

.brewlab-recipes-card .brewlab-recipes-step__body {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex: 1;
	gap: 16px;
}
.brewlab-recipes-card .brewlab-recipes-step__name {
	font-weight: 600;
	font-size: 14px;
}
.brewlab-recipes-card .brewlab-recipes-step__detail {
	font-size: 14px;
	color: var(--c-muted);
	white-space: nowrap;
}

/* ── Notes ────────────────────────────────────────────────── */
.brewlab-recipes-card .brewlab-recipes-notes {
	font-size: 14px;
	line-height: 1.7;
	color: var(--c-text);
	background: var(--c-accent-lt);
	border-left: 3px solid var(--c-accent);
	border-radius: 0 4px 4px 0;
	padding: 16px 18px;
	margin: 20px 24px;
}

/* ── Icons ────────────────────────────────────────────────── */
.brewlab-recipes-card .brewlab-recipes-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	flex-shrink: 0;
}

.brewlab-recipes-card .brewlab-recipes-section-heading .brewlab-recipes-icon {
	height: 1.15em;
	width: auto;
	margin-right: 6px;
	vertical-align: -0.2em;
	color: var(--c-accent);
}

/* Barley is a tall narrow SVG — keep height in sync, width follows aspect ratio */
.brewlab-recipes-card .brewlab-recipes-section-heading .brewlab-recipes-icon--barley {
	width: 0.8em;
	height: 1.15em;
	vertical-align: -0.2em;
}

/* ── Buy links on ingredient names ── */
.brewlab-recipes-card .brewlab-recipes-item__name a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--c-accent);
	text-underline-offset: 2px;
}
.brewlab-recipes-card .brewlab-recipes-item__name a:hover {
	color: var(--c-accent);
}

/* ── Print styles ─────────────────────────────────────────── */
@media print {
	.brewlab-recipes-card .brewlab-recipes-print-btn { display: none; }
	.brewlab-recipes-wrap {
		max-width: 100%;
	}
	.brewlab-recipes-wrap .brewlab-recipes-credit {
		display: none;
	}
	.brewlab-recipes-card {
		box-shadow: none;
		border: 1px solid #ccc;
		max-width: 100%;
	}
	.brewlab-recipes-card .brewlab-recipes-tab-panel { display: block !important; }
	.brewlab-recipes-card .brewlab-recipes-tabs__nav { display: none; }
	.brewlab-recipes-card .brewlab-recipes-card__header {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 520px) {
	.brewlab-recipes-card .brewlab-recipes-card__header {
		flex-direction: column;
		padding: 20px;
	}
	.brewlab-recipes-card .brewlab-recipes-card__image {
		flex: none;
		width: 100%;
		height: 200px;
	}
	.brewlab-recipes-card .brewlab-recipes-toolbar {
		padding: 10px 16px;
	}
	/* 70px + 12px padding per column doesn't leave room for all 5 stat
	   columns (ABV/OG/FG/IBU/SRM) at phone widths — they wrapped, leaving
	   SRM stranded alone on its own row. Shrunk to fit five across. */
	.brewlab-recipes-card .brewlab-recipes-stat {
		min-width: 56px;
		padding: 10px 3px;
	}
	.brewlab-recipes-card .brewlab-recipes-stat__value {
		font-size: 14px;
		gap: 3px;
	}
	.brewlab-recipes-card .brewlab-recipes-stat__label { font-size: 9px; }
	.brewlab-recipes-card .brewlab-recipes-tab-btn { padding: 12px 14px; }

	/* Every group/item/etc. below already carries its own 24px horizontal
	   padding — a flat `.tab-panel { padding: 16px }` here used to stack on
	   top of that (40px effective each side), squeezing the ingredient row
	   name column so far that ordinary names like "American Pilsen" wrapped
	   onto two lines. Narrow each of these to 16px directly instead of
	   padding the shared panel wrapper. */
	.brewlab-recipes-card .brewlab-recipes-group__title,
	.brewlab-recipes-card .brewlab-recipes-subheading,
	.brewlab-recipes-card .brewlab-recipes-item,
	.brewlab-recipes-card .brewlab-recipes-steps,
	.brewlab-recipes-card .brewlab-recipes-empty-tab {
		padding-left: 16px;
		padding-right: 16px;
	}
	.brewlab-recipes-card .brewlab-recipes-notes {
		margin-left: 16px;
		margin-right: 16px;
	}
}