/* ==========================================================================
   Rise With Teagan — Save recipe button + login modal

   Button states · Figma 1517-3180 (normal) / 1517-3185 (saved)
   Rendered by [rwt_save_recipe] in mu-plugin rwt-save-recipe.php.

   Pill: full width of its container, 16px heart, 10px gap to the label,
   12/28 padding, height left to fall out of the text.

   Its own :root block rather than leaning on recipe.css — this stylesheet has
   to stand alone anywhere the button gets used (recipe cards on an archive),
   where recipe.css isn't loaded. Duplicate declarations of the same values are
   harmless.
   ========================================================================== */

/* Scoped to body, NOT :root — Elementor defines its --e-global-* vars on
   body.elementor-kit-8, so a var() reference resolved at :root silently falls
   back to the hardcoded hex and stops tracking the kit. */
body {
	--rwt-terracotta: var(--e-global-color-primary,   #BC5F50);
	--rwt-sienna:     var(--e-global-color-f220437,   #A14A3A);
	--rwt-espresso:   var(--e-global-color-text,      #3D322B);
	--rwt-taupe:      var(--e-global-color-c2248c7,   #887D78);
	--rwt-tint:       var(--e-global-color-ec00e88,   #F0D5CF);
	--rwt-warm-white: var(--e-global-color-secondary, #FFFBF8);
	--rwt-button:     var(--e-global-color-03edebf,   #C46A5A);
	--rwt-outline:    var(--e-global-color-b97e9cc,   #B6B0AD);
}

/* ------------------------------------------------------------- button -- */

/* The doubled class is deliberate, not a typo. The Elementor kit styles bare
   buttons as `.elementor-kit-8 button` — specificity (0,1,1) — which outranks a
   single class and repaints this as a solid primary button. `.rwt-save.rwt-save`
   is (0,2,0) and settles it without needing a wrapper element or !important.
   (.is-saved rules below are already two classes deep, which is why the saved
   state rendered correctly while the default state didn't.)

   Full width of whatever container Elementor gives it, and no set height — the
   height falls out of the text plus the padding, so it tracks the typography
   global if that's ever edited. */
.rwt-save.rwt-save {
	display: flex;   /* pairs with width:100%; inline-level can overflow beside stray whitespace */
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 28px;
	border: 1px solid var(--rwt-terracotta);
	border-radius: 999px;
	background: transparent;
	color: var(--rwt-terracotta);
	font-family: var( --e-global-typography-bf13d5f-font-family ), Sans-serif;
	font-size: var( --e-global-typography-bf13d5f-font-size );
	font-weight: var( --e-global-typography-bf13d5f-font-weight );
	line-height: var( --e-global-typography-bf13d5f-line-height );
	letter-spacing: var( --e-global-typography-bf13d5f-letter-spacing );
	word-spacing: var( --e-global-typography-bf13d5f-word-spacing );
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover takes the saved state's fill — only the label differs between them.
   Keyboard focus gets the same treatment as hover, plus the ring.
   The heart is deliberately NOT filled on hover of an unsaved button: a solid
   heart next to the words "Save recipe" reads as already-saved. One line to
   change if you'd rather it previewed the filled state. */
.rwt-save.rwt-save:hover,
.rwt-save.rwt-save:focus-visible {
	background: var(--rwt-tint);
	border-color: transparent;
	color: var(--rwt-terracotta);
}

.rwt-save.rwt-save:focus-visible {
	outline: 2px solid var(--rwt-terracotta);
	outline-offset: 3px;
}

.rwt-save__icon {
	display: inline-flex;
	flex: 0 0 auto;
	/* nudges the heart's optical centre onto the text baseline box */
	margin-top: -1px;
}

/* Saved: filled tint, no visible edge. The border stays at 1px and only loses
   its colour, so the pill doesn't resize by 2px as it toggles. */
.rwt-save.is-saved {
	background: var(--rwt-tint);
	border-color: transparent;
	color: var(--rwt-terracotta);
}

/* No :hover rule for the saved state on purpose — hover already resolves to
   exactly this treatment, so a saved button simply holds still under the
   cursor. (Its own rule used to shift the text to sienna; that would now
   contradict "hover matches saved".) */

/* One path for both states — filling it is the whole difference. */
.rwt-save.is-saved .rwt-save__icon svg {
	fill: currentColor;
}

.rwt-save.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* --- card variant · Figma 1437-5351 -------------------------------------
   26px tint circle with the 16px heart centred, for the corner of a listing
   card. Declared after the base rules so it wins on source order at equal
   specificity. */
.rwt-save.rwt-save--icon {
	position: relative;   /* contains the visually-hidden label */
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rwt-tint);
	color: var(--rwt-terracotta);
}

/* The label stays in the DOM rather than being dropped, so the control still
   announces "Save recipe" / "Recipe saved" — aria-pressed on its own tells a
   screen reader the state but not what it applies to. */
.rwt-save--icon .rwt-save__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Tint is already this button's resting fill, so the pill's hover treatment
   would be invisible here — it fills terracotta instead, which stays legible
   at 26px over a photograph. No hover state was specified for this one. */
.rwt-save.rwt-save--icon:hover,
.rwt-save.rwt-save--icon:focus-visible {
	background: var(--rwt-terracotta);
	color: var(--rwt-warm-white);
}

@media (prefers-reduced-motion: reduce) {
	.rwt-save.rwt-save {
		transition: none;
	}
}

/* -------------------------------------------------------------- modal -- */

.rwt-modal[hidden] {
	display: none;
}

.rwt-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;   /* over the sticky header */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.rwt-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(61, 50, 43, 0.55);   /* espresso, dimmed */
}

/* Locks the page behind the dialog. */
body.rwt-modal-is-open {
	overflow: hidden;
}

.rwt-modal__card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;   /* a short phone in landscape still reaches the button */
	padding: 40px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(61, 50, 43, 0.22);
}

.rwt-modal .rwt-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;          /* comfortably tappable, sits inside the card padding */
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--rwt-taupe);
	cursor: pointer;
}

.rwt-modal .rwt-modal__close:hover {
	color: var(--rwt-terracotta);
}

.rwt-modal .rwt-modal__close:focus-visible {
	outline: 2px solid var(--rwt-terracotta);
	outline-offset: 2px;
}

.rwt-modal .rwt-modal__title {
	margin: 0 0 8px;
	font-family: var( --e-global-typography-5193019-font-family ), Sans-serif;
	font-size: 28px;
	font-weight: var( --e-global-typography-5193019-font-weight );
	font-style: var( --e-global-typography-5193019-font-style );
	line-height: 1.2;
	color: var(--rwt-terracotta);
}

.rwt-modal .rwt-modal__lead {
	margin: 0 0 24px;
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--rwt-taupe);
}

.rwt-modal .rwt-modal__footer {
	margin: 20px 0 0;
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--rwt-taupe);
	text-align: center;
}

.rwt-modal .rwt-modal__footer a {
	color: var(--rwt-terracotta);
	font-weight: 500;
	text-decoration: underline;
}

/* --- MemberPress form inside the dialog ---------------------------------
   Hung off .mp_wrapper, not .mepr-form: MemberPress reuses .mp_wrapper across
   its login/forgot/reset states but only some of them carry .mepr-form, and
   the ones that don't would render unstyled. Same lesson as the login page. */

.rwt-modal .mp_wrapper {
	margin: 0;
}

.rwt-modal .mp_wrapper form {
	margin: 0;
}

.rwt-modal .mp_wrapper .mp-form-row {
	margin: 0 0 16px;
}

/* The "Remember Me" row is an unclassed <div>, and the spacer rows that used to
   separate these are hidden below — so space the form's own children. */
.rwt-modal .mp_wrapper form > div {
	margin-bottom: 16px;
}

.rwt-modal .mp_wrapper form > div.submit {
	margin-bottom: 0;
}

.rwt-modal .mp_wrapper label {
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--rwt-espresso);
}

/* Vendor CSS pins these labels to display:inline, so vertical margin on the
   label collapses to nothing — the label/field gap has to live on the input. */
.rwt-modal .mp_wrapper input[type="text"],
.rwt-modal .mp_wrapper input[type="email"],
.rwt-modal .mp_wrapper input[type="password"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 0 15px;
	height: 46px;
	border: 1px solid var(--rwt-outline);
	border-radius: 8px;
	background: #fff;
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: 16px;   /* under 16px iOS zooms the page on focus */
	color: var(--rwt-espresso);
}

.rwt-modal .mp_wrapper input[type="text"]:focus,
.rwt-modal .mp_wrapper input[type="email"]:focus,
.rwt-modal .mp_wrapper input[type="password"]:focus {
	border-color: var(--rwt-terracotta);
	outline: none;
}

/* MemberPress's show/hide-password toggle draws its icon from Dashicons, which
   isn't enqueued on the front end — so it renders as an empty coloured pill
   below the field. Same call as the login page: hide it. */
.rwt-modal .mp_wrapper .mp-hide-pw button {
	display: none;
}

/* Vendor markup pads these with a &nbsp; row; the spacing here is set by the
   field margins instead. */
.rwt-modal .mp_wrapper .mp-spacer {
	display: none;
}

/* Sits directly under the submit button, so centre it with the footer link
   rather than leaving it stranded against the left edge. */
.rwt-modal .mp_wrapper .mepr-login-actions {
	margin-top: 14px;
	text-align: center;
}

.rwt-modal .mp_wrapper .mepr-login-actions a {
	color: var(--rwt-taupe);
	font-size: 14px;
	text-decoration: underline;
}

.rwt-modal .mp_wrapper .mepr-login-actions a:hover {
	color: var(--rwt-terracotta);
}

.rwt-modal .mp_wrapper input[type="checkbox"] {
	margin: 0 6px 0 0;
	accent-color: var(--rwt-terracotta);
}

.rwt-modal .mp_wrapper .mepr_remember_me label,
.rwt-modal .mp_wrapper .mepr-login-actions {
	font-weight: 400;
	font-size: 14px;
	color: var(--rwt-taupe);
}

.rwt-modal .mp_wrapper input[type="submit"] {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 0 20px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--rwt-button);
	color: var(--rwt-warm-white);
	font-family: var( --e-global-typography-bf13d5f-font-family ), Sans-serif;
	font-size: var( --e-global-typography-bf13d5f-font-size );
	font-weight: var( --e-global-typography-bf13d5f-font-weight );
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.rwt-modal .mp_wrapper input[type="submit"]:hover {
	background: var(--rwt-sienna);
}

@media (prefers-reduced-motion: reduce) {
	.rwt-modal .mp_wrapper input[type="submit"] {
		transition: none;
	}
}

@media (max-width: 800px) {
	.rwt-modal__card {
		padding: 32px 24px;
	}

	.rwt-modal .rwt-modal__title {
		font-size: 24px;
	}
}