/*
 * Stirred By Grace - recipe card components.
 *
 * The card shell, type and layout live in the WP Recipe Maker template so the
 * Template Editor can still edit them. This file styles the four pieces WPRM
 * has no knowledge of: cook mode, the share sheet, the servings stepper and
 * the card rating stars.
 *
 * Colours fall back to the flair tokens where the flair layer is loaded.
 */

.sbg-share-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ---------- buttons ---------- */

.wprm-recipe .sbg-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	font-family: var(--sf-head, "Bricolage Grotesque", sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.wprm-recipe .sbg-btn-ghost {
	border: 1px solid var(--sf-line, #C6BEAA);
	background: transparent;
	color: var(--sf-olive, #4B5A2E);
}

.wprm-recipe .sbg-btn-ghost:hover,
.wprm-recipe .sbg-btn-ghost:focus-visible {
	border-color: var(--sf-olive, #4B5A2E);
	background: rgba(75, 90, 46, .06);
}

.wprm-recipe .sbg-btn-solid {
	border: 1px solid var(--sf-olive, #4B5A2E);
	background: var(--sf-olive, #4B5A2E);
	color: var(--sf-cream, #F1EDE3);
}

.wprm-recipe .sbg-btn-solid:hover,
.wprm-recipe .sbg-btn-solid:focus-visible {
	border-color: var(--sf-deep, #303520);
	background: var(--sf-deep, #303520);
	color: var(--sf-cream, #F1EDE3);
}

.wprm-recipe .sbg-btn:focus-visible,
.wprm-recipe .sbg-step:focus-visible,
.wprm-recipe .sbg-rate-star:focus-visible,
.sbg-share-panel a:focus-visible,
.sbg-share-panel button:focus-visible {
	outline: 2px solid var(--sf-olive, #4B5A2E);
	outline-offset: 2px;
}

.sbg-i {
	flex-shrink: 0;
}

/* ---------- cook mode ---------- */

.sbg-cook-note:empty {
	display: none;
}

/* Takes a line of its own rather than sitting beside the button, so switching
   cook mode on never reflows the action row. order:99 keeps it last in both
   the flex row and the phone grid — in DOM order it sits before Share, and a
   full-width item there would push Share onto a row by itself. */
.sbg-cook-note {
	order: 99;
	/* width:0 keeps this out of the action group's intrinsic width, so turning
	   cook mode on cannot widen it and bump the whole row below the rating;
	   min-width:100% then makes it fill a line of its own once laid out. */
	flex: 0 0 auto;
	width: 0;
	min-width: 100%;
	margin: 2px 0 0 0;
	font-family: var(--sf-head, "Bricolage Grotesque", sans-serif);
	font-size: 12px;
	line-height: 1.45;
	color: #5C5648;
}

/* ---------- share sheet ---------- */

.sbg-share-sheet {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(33, 30, 25, .55);
}

.sbg-share-sheet[hidden] {
	display: none;
}

.sbg-share-panel {
	width: 100%;
	max-width: 412px;
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var(--sf-line, #C6BEAA);
	border-radius: 10px;
	background: var(--sf-paper, #F7F3EA);
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 90vh;
	overflow-y: auto;
}

.sbg-share-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.wprm-recipe .sbg-share-title,
.sbg-share-panel .sbg-share-title {
	margin: 0;
	font-family: var(--sf-head, "Bricolage Grotesque", sans-serif);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sf-ink, #211E19);
}

.sbg-share-close {
	-webkit-appearance: none;
	appearance: none;
	width: 44px;
	height: 44px;
	margin: -10px -10px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #5C5648;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Four marks across one row. With no labels there is nothing to wrap, so the
   row holds at every width the panel reaches. */
.sbg-share-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.sbg-share-dest {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 64px;
	padding: 0 8px;
	border: 1px solid var(--sf-line, #C6BEAA);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--sf-olive, #4B5A2E);
	font-family: var(--sf-head, "Bricolage Grotesque", sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

/*
 * Brand marks.
 *
 * A fixed 24px box with object-fit is what makes every mark read as the same
 * size: the official files come with different viewBoxes and aspect ratios
 * (Pinterest's is square, X's is not), so sizing the <img> alone would leave
 * them visually mismatched. Nothing here recolours or reshapes a mark, which
 * every platform's brand guidelines forbid.
 */
.sbg-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.sbg-brand img,
.sbg-brand svg {
	display: block;
	width: 26px;
	height: 26px;
	max-width: 26px;
	max-height: 26px;
	object-fit: contain;
}

/* The share glyph is stroked, not filled, so it needs a heavier line to carry
   the same weight as the solid brand marks beside it. */
.sbg-share-native .sbg-brand svg {
	stroke-width: 2;
}

/*
 * Optical sizing.
 *
 * Pinterest and Facebook are supplied as filled circular badges; X is a bare
 * glyph. Matched by bounding box the X reads too large, because its strokes
 * run corner to corner and its diagonal is half again the width of a circle
 * of the same box. Trimming it to 24px makes the three read as one set.
 * This is scale only — no recolouring or reshaping, which the brand
 * guidelines forbid.
 */
.sbg-dest-x .sbg-brand img,
.sbg-dest-x .sbg-brand svg {
	width: 24px;
	height: 24px;
	max-width: 24px;
	max-height: 24px;
}

.sbg-dest-label {
	display: inline-block;
}

/* The OS share sheet is the primary route, so it leads the grid visually. */
.sbg-share-dest.sbg-share-native {
	border-color: var(--sf-olive, #4B5A2E);
	background: var(--sf-olive, #4B5A2E);
	color: var(--sf-cream, #F1EDE3);
}

.sbg-share-dest.sbg-share-native:hover,
.sbg-share-dest.sbg-share-native:focus-visible,
.sbg-share-dest.sbg-share-native.is-done {
	border-color: var(--sf-deep, #303520);
	background: var(--sf-deep, #303520);
	color: var(--sf-cream, #F1EDE3);
}

/* Copy fallback failed (no clipboard access): nudge, don't shout. */
.sbg-share-dest.sbg-share-native.is-failed {
	border-color: var(--sf-sage, #6B7550);
	background: var(--sf-sage, #6B7550);
}

.sbg-share-dest:hover,
.sbg-share-dest:focus-visible {
	border-color: var(--sf-olive, #4B5A2E);
	background: var(--sf-cream, #F1EDE3);
	color: var(--sf-olive, #4B5A2E);
}

/* Copy link sits on its own, centred under the grid. */
.sbg-share-more {
	display: flex;
	justify-content: center;
}

.sbg-share-more .sbg-btn {
	flex: 0 1 auto;
	min-width: 190px;
}

.sbg-share-more .sbg-btn[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.sbg-share-sheet {
		align-items: flex-end;
		padding: 0;
	}

	/* The extra bottom room keeps Copy link clear of Grow's floating heart and
	   share buttons, which dock in the bottom-right corner. */
	.sbg-share-panel {
		max-width: none;
		border-width: 1px 0 0 0;
		border-radius: 10px 10px 0 0;
		padding: 20px 16px calc(96px + env(safe-area-inset-bottom, 0px)) 16px;
	}

	/* Stays centred; the panel's bottom padding is what clears the overlay. */
	.sbg-share-more .sbg-btn {
		flex: 0 1 auto;
		min-width: 0;
		width: 100%;
		max-width: 220px;
	}
}

/* ---------- servings stepper ---------- */

.sbg-servings {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sbg-servings-ctl {
	display: flex;
	align-items: center;
	gap: 4px;
}

.wprm-recipe .sbg-step {
	-webkit-appearance: none;
	appearance: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--sf-line, #C6BEAA);
	border-radius: 999px;
	background: transparent;
	color: var(--sf-olive, #4B5A2E);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.wprm-recipe .sbg-step:hover {
	border-color: var(--sf-olive, #4B5A2E);
	background: rgba(75, 90, 46, .06);
}

.sbg-servings-value {
	min-width: 26px;
	text-align: center;
	font-family: var(--sf-head, "Bricolage Grotesque", sans-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--sf-ink, #211E19);
	font-variant-numeric: tabular-nums;
}

.sbg-servings-unit {
	font-family: var(--sf-head, "Bricolage Grotesque", sans-serif);
	font-size: 13px;
	color: #5C5648;
	margin-left: 4px;
}

.sbg-servings.is-changed .sbg-servings-value {
	color: var(--sf-olive, #4B5A2E);
}

/* ---------- card rating stars ---------- */

.sbg-rate {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.wprm-recipe .sbg-rate-star {
	-webkit-appearance: none;
	appearance: none;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
	color: var(--sf-line, #C6BEAA);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color .12s ease, transform .12s ease;
}

.wprm-recipe .sbg-rate-star svg {
	width: 30px;
	height: 30px;
}

.wprm-recipe .sbg-rate-star.is-on {
	color: var(--sf-olive, #4B5A2E);
}

.wprm-recipe .sbg-rate-star:hover {
	transform: translateY(-1px);
}

.sbg-rate-status {
	margin: 4px 0 0 0;
	font-family: var(--sf-head, "Bricolage Grotesque", sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: var(--sf-olive, #4B5A2E);
}

.sbg-rate-status:empty {
	display: none;
}

/* ---------- ingredient checkboxes ---------- */

.wprm-recipe .wprm-recipe-ingredient {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.wprm-recipe .sbg-ing-check {
	-webkit-appearance: auto;
	appearance: auto;
	width: 18px;
	height: 18px;
	margin: 3px 0 0 0;
	flex-shrink: 0;
	accent-color: var(--sf-olive, #4B5A2E);
	cursor: pointer;
}

.wprm-recipe .sbg-ing-label {
	cursor: pointer;
	flex: 1 1 auto;
}

.wprm-recipe .wprm-recipe-ingredient.is-checked .sbg-ing-label {
	opacity: .42;
	text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
	.wprm-recipe .sbg-btn,
	.wprm-recipe .sbg-rate-star,
	.sbg-share-dest {
		transition: none;
	}

	.wprm-recipe .sbg-rate-star:hover {
		transform: none;
	}
}

/* Keep the share sheet and steppers out of the print view. */
@media print {
	.sbg-share-wrap,
	.sbg-cook-wrap,
	.sbg-rate,
	.sbg-rate-status,
	.sbg-servings-ctl .sbg-step {
		display: none !important;
	}
}