/**
 * RPL A/B Testing Customization — sales page variant styles.
 *
 * How this ties together:
 * - public/class-rpl-ab-testing-customization-public.php adds body classes based on
 *   Nelio’s active alternative (rpl-abtc-experiment-active, rpl-abtc-experiment-active).
 * - Rules below are scoped under those body classes so only the correct arm sees changes.
 * - The base theme / page template classes (.menu-meal-plans-lt, .header-lt, etc.) are
 *   unchanged; we override only when a variant is active.
 *
 * To add a new visual variant: add a constant and body_class branch in PHP, then add
 * a new body.rpl-abtc-* block here.
 */

/* ------------------------------------------------------------------------- */
/* Orange CTA variant — body.rpl-abtc-experiment-active                        */
/* ------------------------------------------------------------------------- */

/* Shared token so the orange matches brand; tweak in one place. */
:root {
	--rpl-abtc-cta-orange: #F28221;
}

/* Main nav “Get meal plan” (text link style) — force orange text. */
body.rpl-abtc-experiment-active .menu-meal-plans-lt li.menu-item-hl-lt a {
	color: var( --rpl-abtc-cta-orange ) !important;
	border-color: var(--rpl-abtc-cta-orange) !important;
}
body.rpl-abtc-experiment-active .header-lt.sticky .menu-meal-plans-lt li.menu-item-hl-lt a {
	color: var( --rpl-abtc-cta-orange ) !important;
}

/* Secondary header CTA (filled button in nav) — orange fill + white text. */
body.rpl-abtc-experiment-active .menu-meal-plans-lt li.menu-item-hl-lt2 a {
	background-color: var( --rpl-abtc-cta-orange ) !important;
	border-color: var( --rpl-abtc-cta-orange ) !important;
	color: #fff !important;
}

/* Sticky header state can re-apply nav styles — repeat for the same CTA. */
body.rpl-abtc-experiment-active .header-lt.sticky .menu-meal-plans-lt li.menu-item-hl-lt2 a {
	background-color: var( --rpl-abtc-cta-orange ) !important;
	border-color: var( --rpl-abtc-cta-orange ) !important;
	color: #fff !important;
}

/* In-content / block CTAs using the .button-orange-lt class (Kadence, etc.). */
body.rpl-abtc-experiment-active .button-orange-lt {
	background-color: var( --rpl-abtc-cta-orange ) !important;
	border-color: var( --rpl-abtc-cta-orange ) !important;
	color: #fff !important;
}

/* ------------------------------------------------------------------------- */
/* Bigger header CTA variant — body.rpl-abtc-experiment-active         */
/* ------------------------------------------------------------------------- */

/* Slightly larger tap targets + padding in the meal-plans menu. */
body.rpl-abtc-experiment-active .menu-meal-plans-lt li a {
	padding: 11px 0 8px 0;
}
body.rpl-abtc-experiment-active .menu-meal-plans-lt li.menu-item-hl-lt a {
	padding: 10px 20px 10px 20px !important;
}
body.rpl-abtc-experiment-active .menu-meal-plans-lt li.menu-item-hl-lt2 a {
	padding: 11px 20px 11px 20px !important;
}

/* Sales page template: hero/header CTA block (Kadence button). */
body.rpl-abtc-experiment-active.page-template-template-sales-page-2025 .header-cta-lt .kb-button {
	font-size: 19px;
	height: 62px !important;
	padding: 21px 20px 21px;
	line-height: 1;
}