/**
 * Pure Recipes — Single Recipe Styles
 *
 * @package PureRecipes
 * @since   1.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
	--pure-green: #2D6A4F;
	--pure-gold: #F4C430;
	--pure-white: #FFFFFF;
	--pure-light-bg: #F9F9F6;
	--pure-dark: #1A1A1A;
	--pure-grey: #666666;
	--pure-light-green: #F0F5F2;
	--pure-radius: 16px;
	--pure-radius-sm: 8px;
}

/* ==========================================================================
   Recipe Overview Table
   ========================================================================== */

.pure-recipe-overview {
	background-color: var(--pure-light-green);
	border-radius: var(--pure-radius);
	padding: 24px;
}

.pure-recipe-overview__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--pure-dark);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pure-recipe-overview__table {
	display: flex;
	flex-direction: column;
}

.pure-recipe-overview__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pure-recipe-overview__row:last-child {
	border-bottom: none;
}

.pure-recipe-overview__row:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.pure-recipe-overview__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--pure-green);
}

.pure-recipe-overview__value {
	font-size: 14px;
	color: var(--pure-dark);
	text-align: right;
}

.pure-recipe-overview__note {
	margin: 16px 0 0;
	font-size: 12px;
	font-style: italic;
	color: var(--pure-grey);
	line-height: 1.5;
}

/* ==========================================================================
   Recipe Steps (How to Make)
   ========================================================================== */

.pure-recipe-steps {
	padding: 0;
}

.pure-recipe-steps__heading {
	position: relative;
	margin: 0 0 32px;
	padding-bottom: 12px;
	font-size: 28px;
	font-weight: 700;
	color: var(--pure-dark);
}

.pure-recipe-steps__heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background-color: var(--pure-green);
	border-radius: 2px;
}

.pure-recipe-steps__section {
	margin-bottom: 32px;
}

.pure-recipe-steps__section:last-child {
	margin-bottom: 0;
}

.pure-recipe-steps__section-title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 600;
	color: var(--pure-green);
}

.pure-recipe-steps__step {
	margin-bottom: 24px;
}

.pure-recipe-steps__step:last-child {
	margin-bottom: 0;
}

.pure-recipe-steps__step-label {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--pure-dark);
}

.pure-recipe-steps__step-content {
	font-size: 15px;
	line-height: 1.7;
	color: var(--pure-dark);
}

.pure-recipe-steps__step-content p {
	margin: 0 0 8px;
}

.pure-recipe-steps__step-content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Recipe Ingredients Panel
   Mirrors the Overview widget layout: box > title > table > rows
   ========================================================================== */

.pure-recipe-ingredients {
	background-color: var(--pure-light-green);
	border-radius: var(--pure-radius);
	padding: 24px;
}

.pure-recipe-ingredients__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--pure-dark);
	text-transform: capitalize;
	letter-spacing: 0.5px;
}

.pure-recipe-ingredients__table {
	display: flex;
	flex-direction: column;
}

.pure-recipe-ingredients__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pure-recipe-ingredients__row:last-child {
	border-bottom: none;
}

.pure-recipe-ingredients__row:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.pure-recipe-ingredients__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--pure-green);
}

.pure-recipe-ingredients__value {
	font-size: 14px;
	color: var(--pure-dark);
	text-align: right;
}

.pure-recipe-ingredients__note {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
	color: var(--pure-grey);
	text-transform: none;
}

.pure-recipe-ingredients__section-heading {
	padding: 14px 12px 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pure-green);
	font-style: italic;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin-top: 4px;
}

.pure-recipe-ingredients__section-heading:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

/* ==========================================================================
   Ingredient checklist (show_checkboxes widget option)
   ========================================================================== */

.pure-recipe-ingredients__row--checkable {
	cursor: pointer;
	user-select: none;
	margin: 0;
}

/* Within a checkable row: keep the check pinned left, expand the label to
   fill the gap so it left-aligns next to the check, and the value falls to
   the far right — preserving space-between between the text pair. */
.pure-recipe-ingredients__row--checkable .pure-recipe-ingredients__label {
	flex: 1;
	text-align: left;
}

.pure-recipe-ingredients__row--checkable .pure-recipe-ingredients__value {
	text-align: right;
	flex-shrink: 0;
}

.pure-recipe-ingredients__checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

.pure-recipe-ingredients__check {
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-right: 12px;
	border: 1.5px solid var(--pure-green, #2D6A4F);
	border-radius: 50%;
	background-color: transparent;
	position: relative;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.pure-recipe-ingredients__row--checkable:hover .pure-recipe-ingredients__check {
	background-color: rgba(45, 106, 79, 0.08);
}

.pure-recipe-ingredients__checkbox:focus-visible + .pure-recipe-ingredients__check {
	outline: 2px solid var(--pure-green, #2D6A4F);
	outline-offset: 2px;
}

.pure-recipe-ingredients__row.is-checked .pure-recipe-ingredients__check {
	background-color: var(--pure-green, #2D6A4F);
}

.pure-recipe-ingredients__row.is-checked .pure-recipe-ingredients__check::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 5px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.pure-recipe-ingredients__row.is-checked .pure-recipe-ingredients__label,
.pure-recipe-ingredients__row.is-checked .pure-recipe-ingredients__value,
.pure-recipe-ingredients__row.is-checked .pure-recipe-ingredients__note {
	opacity: 0.55;
	text-decoration: line-through;
}

/* ==========================================================================
   Related Recipes
   --------------------------------------------------------------------------
   Carousel rendering notes for Elementor compatibility:

   - Elementor's responsive `columns` control writes inline CSS like
     `.elementor-element-{ID} .pure-recipe-related__cards { grid-template-columns: ... }`
     which has higher specificity than a single class selector.
   - Elementor sections often have `overflow: hidden` set as a default which
     would clip the off-canvas peek. The parent container override below
     fixes this.
   - We use both class AND attribute selectors `[data-carousel-mode="..."]`
     so the carousel mode wins the cascade against Elementor's inline CSS.
   - `!important` is used ONLY on the layout-critical properties Elementor
     overrides (display, grid-template-columns, flex-wrap).
   ========================================================================== */

.pure-recipe-related {
	padding: 48px 0;
	position: relative;
	/* Defend against parent Elementor section overflow:hidden clipping the peek */
	overflow: visible;
}

/* Default: standard responsive grid. */
.pure-recipe-related__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.pure-recipe-related__editor-placeholder {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px 24px;
	color: var(--pure-grey);
	font-style: italic;
}

/* Prevent the off-canvas breakout from creating a horizontal page scrollbar.
   The breakout uses negative margin to extend past the parent container —
   without overflow-x: clip somewhere up the chain, this can spill out
   of the document. Apply to body as a safe default. */
body:has(.pure-recipe-related__cards[data-carousel-mode="off_canvas"]),
body:has(.pure-recipe-related__cards--off-canvas) {
	overflow-x: clip;
}

/* ==========================================================================
   Carousel Modes
   --------------------------------------------------------------------------
   Use BOTH attribute and class selectors with !important on layout-critical
   properties. This guarantees:
   - Newer renders (with data-carousel-mode attribute) get bulletproof specificity
   - Older renders (class-only) still work
   - Elementor's per-page inline CSS for "columns" can never override the layout
   ========================================================================== */

/* All carousel modes: switch from grid to flex horizontal scroll.
   Selectors target via:
   1. Inner element data attribute
   2. Parent element data attribute (catches cases where inner attribute is missing)
   3. Inner element class (legacy/editor preview)
   This triple-fallback approach guarantees the carousel layout wins regardless
   of which render path produced the HTML. */
.pure-recipe-related__cards[data-carousel-mode="always"],
.pure-recipe-related__cards[data-carousel-mode="off_canvas"],
.pure-recipe-related[data-carousel-mode="always"] > .pure-recipe-related__cards,
.pure-recipe-related[data-carousel-mode="off_canvas"] > .pure-recipe-related__cards,
.pure-recipe-related__cards.pure-recipe-related__cards--always,
.pure-recipe-related__cards.pure-recipe-related__cards--off-canvas {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: visible !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 8px;
	position: relative;
}

.pure-recipe-related__cards[data-carousel-mode="always"]::-webkit-scrollbar,
.pure-recipe-related__cards[data-carousel-mode="off_canvas"]::-webkit-scrollbar,
.pure-recipe-related__cards--always::-webkit-scrollbar,
.pure-recipe-related__cards--off-canvas::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Carousel cards: fixed flex basis so they don't stretch to fill width. */
.pure-recipe-related__cards[data-carousel-mode="always"] > .pure-recipe-card,
.pure-recipe-related__cards[data-carousel-mode="off_canvas"] > .pure-recipe-card,
.pure-recipe-related[data-carousel-mode="always"] .pure-recipe-card,
.pure-recipe-related[data-carousel-mode="off_canvas"] .pure-recipe-card,
.pure-recipe-related__cards--always > .pure-recipe-card,
.pure-recipe-related__cards--off-canvas > .pure-recipe-card {
	flex: 0 0 280px !important;
	width: 280px !important;
	max-width: 280px !important;
	scroll-snap-align: start;
}

/* ----- Off-Canvas (Netflix-style) — peek + edge fade ----- */
.pure-recipe-related__cards[data-carousel-mode="off_canvas"],
.pure-recipe-related[data-carousel-mode="off_canvas"] > .pure-recipe-related__cards,
.pure-recipe-related__cards--off-canvas {
	padding-right: 60px !important;
	/* Full-bleed breakout: extend the track to the right edge of the viewport
	   so cards visually flow off the page (Netflix pattern). The calc takes
	   the difference between the viewport width and the container's actual
	   width, then divides by 2 to get the right margin. The negative margin
	   pulls the carousel's right edge to the viewport edge. */
	margin-right: calc((100vw - 100%) / -2) !important;
}

/* Ensure parent containers don't clip the breakout. */
.pure-recipe-related,
.pure-recipe-related[data-carousel-mode="off_canvas"] {
	overflow: visible !important;
}

/* Edge fade overlay — hidden by default, enabled by edge_fade_color control. */
.pure-recipe-related__cards[data-carousel-mode="off_canvas"]::after,
.pure-recipe-related[data-carousel-mode="off_canvas"] > .pure-recipe-related__cards::after,
.pure-recipe-related__cards--off-canvas::after {
	content: '';
	display: none;
	position: sticky;
	right: 0;
	top: 0;
	bottom: 0;
	flex: 0 0 60px;
	width: 60px;
	height: auto;
	align-self: stretch;
	pointer-events: none;
	margin-left: -60px;
	z-index: 2;
}

/* When edge_fade_color is set by the user, Elementor injects the
   `display: block` and `background` properties via inline CSS. */

/* ==========================================================================
   Navigation Arrows
   --------------------------------------------------------------------------
   Elementor Pro and most themes apply heavy default button styles
   (border-radius, padding, line-height, font-size). To guarantee perfect
   circular buttons with centred icons across all themes we must:

   1. Use the Elementor widget wrapper class for higher specificity than
      generic theme `button` selectors.
   2. Use `display: grid` + `place-items: center` instead of flex —
      CSS Grid centring is immune to font-size / line-height inheritance
      that breaks flex centring on text-containing elements.
   3. Use `aspect-ratio: 1 / 1` so the button stays a perfect square even
      if a theme applies horizontal padding via `box-sizing: content-box`.
   4. Apply `!important` only to the layout-critical properties that
      themes most aggressively override (border-radius, padding, font-size).
   ========================================================================== */

.pure-recipe-related__arrows {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.elementor-widget-pure-recipe-related .pure-recipe-related__arrow,
.pure-recipe-related .pure-recipe-related__arrow {
	/* Centring — grid is immune to font-size/line-height inheritance. */
	display: inline-grid;
	place-items: center;

	/* Sizing — aspect-ratio + box-sizing keeps the button perfectly square. */
	box-sizing: border-box !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;

	/* Reset spacing — themes love to add button padding. */
	padding: 0 !important;
	margin: 0;
	border: 0 !important;

	/* Force perfect circle. */
	border-radius: 50% !important;

	/* Visual */
	background-color: var(--pure-gold);
	color: #FFFFFF;
	box-shadow: none;

	/* Reset text metrics so SVG centring is pixel-perfect. */
	font-size: 0 !important;
	line-height: 0 !important;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;

	/* Behaviour */
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Maintain box on hover/focus — themes often change border-radius on hover. */
.elementor-widget-pure-recipe-related .pure-recipe-related__arrow:hover,
.elementor-widget-pure-recipe-related .pure-recipe-related__arrow:focus,
.elementor-widget-pure-recipe-related .pure-recipe-related__arrow:active,
.pure-recipe-related .pure-recipe-related__arrow:hover,
.pure-recipe-related .pure-recipe-related__arrow:focus,
.pure-recipe-related .pure-recipe-related__arrow:active {
	border-radius: 50% !important;
	border: 0 !important;
	padding: 0 !important;
}

/* SVG icon — explicit dimensions, no inherited spacing, centred via parent grid. */
.elementor-widget-pure-recipe-related .pure-recipe-related__arrow svg,
.pure-recipe-related .pure-recipe-related__arrow svg {
	display: block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	pointer-events: none;
	/* Some themes apply vertical-align: baseline to inline SVG inside buttons. */
	vertical-align: middle;
}

/* Path styling — defend against themes targeting `svg path { fill: ... }`. */
.elementor-widget-pure-recipe-related .pure-recipe-related__arrow svg path,
.pure-recipe-related .pure-recipe-related__arrow svg path {
	stroke: currentColor;
	fill: none;
}

.pure-recipe-related .pure-recipe-related__arrow:hover:not(.is-disabled) {
	transform: scale(1.05);
}

.pure-recipe-related .pure-recipe-related__arrow.is-disabled {
	cursor: not-allowed;
	opacity: 0.4;
	transform: none;
}

.pure-recipe-related .pure-recipe-related__arrow:focus-visible {
	outline: 2px solid var(--pure-green);
	outline-offset: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.pure-recipe-related__cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.pure-recipe-steps__heading {
		font-size: 24px;
	}
}

@media (max-width: 767px) {
	.pure-recipe-related__cards {
		grid-template-columns: 1fr;
	}

	/* Mobile-only carousel mode — same behaviour as always. */
	.pure-recipe-related__cards--carousel:not(.pure-recipe-related__cards--off-canvas):not(.pure-recipe-related__cards--always) {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 16px;
		padding-bottom: 8px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.pure-recipe-related__cards--carousel:not(.pure-recipe-related__cards--off-canvas):not(.pure-recipe-related__cards--always)::-webkit-scrollbar {
		display: none;
	}

	.pure-recipe-related__cards--carousel:not(.pure-recipe-related__cards--off-canvas):not(.pure-recipe-related__cards--always) .pure-recipe-card {
		flex: 0 0 75%;
		scroll-snap-align: start;
	}

	.pure-recipe-overview {
		padding: 16px;
	}

	.pure-recipe-ingredients {
		padding: 16px;
	}

	.pure-recipe-steps__heading {
		font-size: 22px;
	}
}