/**
 * FanGraphs Membership page.
 *
 * Loaded on the membership product page by fg_enqueue_membership_styles().
 * Markup: woocommerce/content-single-product-membership.php.
 *
 * Same design system as checkout/cart/product: white cards, square corners,
 * --fg-line borders, brand green actions, Lato. Scoped body.single-product for
 * the usual specificity edge over the late-loading external stylesheets.
 */

:root {
	--fg-green: #50ae26;
	--fg-green-dark: #46991f;
	--fg-ink: #1c1e21;
	--fg-muted: #6b7280;
	--fg-line: #e2e5e8;
	--fg-field: #b8bfc6;
	--fg-surface: #ffffff;
	--fg-radius: 0; /* square corners across the store, per design */
}

body.single-product .fp__woo-commerce .fg-mem {
	display: block;
	max-width: 880px;
	margin: 0 auto;
	text-align: left;
	color: var(--fg-ink);
	font-family: Lato, arial, helvetica, sans-serif;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .fg-mem__hero {
	margin: 8px 0 26px;
	text-align: center;
}

body.single-product .fp__woo-commerce .fg-mem .fg-mem__title {
	max-width: none;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fg-ink);
}

body.single-product .fp__woo-commerce .fg-mem__lede {
	max-width: 560px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.55;
	color: var(--fg-muted);
}

/* Subscribers see this above the plans: which term they hold, and that
   clicking another term is a switch. */
body.single-product .fp__woo-commerce .fg-mem__switch-note {
	margin: 0 0 18px;
	padding: 12px 16px;
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-left: 4px solid var(--fg-green);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-ink);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Plan cards
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .fg-mem__plans {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: stretch;
	justify-content: center;
}

body.single-product .fp__woo-commerce .fg-mem__plan {
	flex: 1 1 240px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	/* EVERY card is a positioning context: badges are position:absolute, and
	   with relative only on the featured card the 3-Year "Best value" badge
	   anchored to an ancestor and rendered at the top of the page. */
	position: relative;
	padding: 22px;
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	box-sizing: border-box;
}

body.single-product .fp__woo-commerce .fg-mem__plan--featured {
	border: 2px solid var(--fg-green);
}

body.single-product .fp__woo-commerce .fg-mem__badge--value {
	background: var(--fg-ink);
}

body.single-product .fp__woo-commerce .fg-mem__note {
	margin: 8px 0 16px;
	min-height: 20px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fg-green);
}

body.single-product .fp__woo-commerce .fg-mem__plan .fg-mem__note:empty {
	visibility: hidden;
}

body.single-product .fp__woo-commerce .fg-mem__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX( -50% );
	margin: 0;
	padding: 3px 12px;
	background: var(--fg-green);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.single-product .fp__woo-commerce .fg-mem .fg-mem__plan-name {
	max-width: none;
	margin: 2px 0 12px;
	padding: 0;
	border: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--fg-ink);
	text-align: left;
}

body.single-product .fp__woo-commerce .fg-mem__price {
	margin: 0 0 4px;
	line-height: 1;
	/* External blog-style.css puts overflow:auto on shop <p>s; when the price
	   is a flex column one pixel of line-height overflow paints a phantom
	   vertical scrollbar beside the amount. Same leak as the checkout
	   .form-row scrollbar. */
	overflow: visible;
}

body.single-product .fp__woo-commerce .fg-mem__amount {
	font-size: 40px;
	font-weight: 700;
	color: var(--fg-ink);
}

body.single-product .fp__woo-commerce .fg-mem__period {
	font-size: 16px;
	font-weight: 400;
	color: var(--fg-muted);
}

/* Billing frequency, spelled out under the price so "/ 3 years" is never
   left to interpretation. */
body.single-product .fp__woo-commerce .fg-mem__billing {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fg-muted);
}

body.single-product .fp__woo-commerce .fg-mem__plan:not(.fg-mem__plan--featured):first-child .fg-mem__note {
	color: var(--fg-muted);
	font-weight: 400;
}

/* "Every membership includes" -- one shared list, two columns on desktop.
   The three plans are identical; repeating the list per-card would invite
   hunting for differences that do not exist. */
body.single-product .fp__woo-commerce .fg-mem__includes {
	margin: 26px 0 0;
	padding: 22px;
	background: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
}

body.single-product .fp__woo-commerce .fg-mem .fg-mem__includes-title {
	max-width: none;
	margin: 0 0 14px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--fg-line);
	font-size: 16px;
	font-weight: 700;
	color: var(--fg-ink);
	text-align: left;
}

body.single-product .fp__woo-commerce .fg-mem__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Multi-column, not grid: grid rows are as tall as their tallest cell,
	   so one item wrapping to two lines opened a hole under every
	   single-line item beside it. Columns pack independently. Two columns
	   max: three squeezed the longest labels onto two lines; at two, every
	   item fits one line. Drops to one column below the 300px minimum. */
	columns: 2 300px;
	column-gap: 28px;
}

body.single-product .fp__woo-commerce .fg-mem__benefit {
	list-style: none;
	position: relative;
	margin: 0 0 9px;
	padding: 0 0 0 26px;
	font-size: 14px;
	line-height: 1.45;
	break-inside: avoid;
}

body.single-product .fp__woo-commerce .fg-mem__benefit::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid var(--fg-green);
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

body.single-product .fp__woo-commerce .fg-mem__benefit--lead {
	font-weight: 700;
}

/* CTAs -- pinned to the card bottom so all three align. */
body.single-product .fp__woo-commerce .fg-mem__cta {
	margin-top: auto;
	display: block;
	width: 100%;
	padding: 15px 24px;
	border: 0;
	border-radius: var(--fg-radius);
	background-color: var(--fg-green);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

body.single-product .fp__woo-commerce .fg-mem__cta:hover {
	background-color: var(--fg-green-dark);
	color: #fff;
	opacity: 1;
}

body.single-product .fp__woo-commerce .fg-mem__cta--secondary {
	background-color: var(--fg-surface);
	border: 1px solid var(--fg-green);
	color: var(--fg-green);
}

body.single-product .fp__woo-commerce .fg-mem__cta--secondary:hover {
	background-color: var(--fg-green);
	color: #fff;
}

/* The subscriber's present term: inert marker, not a button. */
body.single-product .fp__woo-commerce .fg-mem__cta--current {
	background-color: var(--fg-surface);
	border: 1px solid var(--fg-line);
	color: var(--fg-muted);
	cursor: default;
	pointer-events: none;
}

body.single-product .fp__woo-commerce .fg-mem__plan--current {
	border-color: var(--fg-line);
}

body.single-product .fp__woo-commerce .fg-mem__alts {
	margin: 12px 0 0;
	font-size: 13px;
	text-align: center;
	color: var(--fg-muted);
}

body.single-product .fp__woo-commerce .fg-mem__alts a {
	color: var(--fg-green);
	font-weight: 700;
	text-decoration: underline;
}

body.single-product .fp__woo-commerce .fg-mem__alt-sep {
	margin: 0 6px;
}

/* -------------------------------------------------------------------------
 * Renewal line, gift pointer
 * ---------------------------------------------------------------------- */
body.single-product .fp__woo-commerce .fg-mem__renewal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 18px 0 34px;
	font-size: 13px;
	color: var(--fg-muted);
	text-align: center;
}

body.single-product .fp__woo-commerce .fg-mem__lock {
	flex: 0 0 11px;
	width: 11px;
	height: 9px;
	position: relative;
	border: 1.5px solid var(--fg-muted);
	border-radius: 2px; /* draws the padlock body, not UI rounding */
	margin-top: 3px;
}

body.single-product .fp__woo-commerce .fg-mem__lock::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -6px;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border: 1.5px solid var(--fg-muted);
	border-bottom: 0;
	border-radius: 4px 4px 0 0; /* padlock shackle */
}

body.single-product .fp__woo-commerce .fg-mem__gift {
	/* Sits directly under the plan rows -- closer to them than to the
	   benefits card below, so it reads as a fourth purchase option. */
	margin: 14px 0 0;
	font-size: 14px;
	text-align: center;
	color: var(--fg-muted);
}

body.single-product .fp__woo-commerce .fg-mem__gift a {
	color: var(--fg-green);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Narrow screens: each card becomes a compact selectable row -- plan name
 * with the badge inline, savings note beneath, price stacked on the right.
 * The "Choose X" link is stretched invisibly over the whole card (inset:0
 * against the card's position:relative), so the entire row is the tap
 * target; its text stays in the DOM as the accessible name. Rows keep DOM
 * order (Monthly / Yearly / 3-Year) -- all three fit one screen, so the
 * featured plan no longer needs to jump the queue; it reads as the
 * highlighted middle option instead.
 * ---------------------------------------------------------------------- */
@media (max-width: 760px) {
	body.single-product .fp__woo-commerce .fg-mem__hero {
		margin: 4px 0 20px;
	}

	body.single-product .fp__woo-commerce .fg-mem .fg-mem__title {
		font-size: 26px;
	}

	body.single-product .fp__woo-commerce .fg-mem__lede {
		font-size: 14px;
	}

	body.single-product .fp__woo-commerce .fg-mem__plans {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	body.single-product .fp__woo-commerce .fg-mem__plan {
		/* The base card's flex: 1 1 240px is a WIDTH basis in the desktop row
		   layout, but once the container goes column that 240px becomes a
		   HEIGHT basis -- every card inflated to ~240px tall regardless of
		   content. Rows must size to their content. */
		flex: 0 0 auto;
		max-width: none;
		display: grid;
		grid-template-columns: auto 1fr auto auto;
		grid-template-areas:
			"name    badge   price select"
			"billing billing price select"
			"note    note    price select";
		column-gap: 10px;
		row-gap: 0;
		align-items: center;
		padding: 14px 16px;
	}

	/* Visible affordance: a "Select" chip in the right column, spanning both
	   rows. It is a ::after on the card -- pseudo-elements are grid items --
	   so no markup change; the stretched link still owns the tap (positioned
	   elements paint over pseudo-element content) and keeps its accessible
	   "Choose X" name. */
	body.single-product .fp__woo-commerce .fg-mem__plan::after {
		content: "Select";
		grid-area: select;
		align-self: center;
		padding: 9px 12px;
		border: 1px solid var(--fg-green);
		color: var(--fg-green);
		font-size: 13px;
		font-weight: 700;
		line-height: 1;
	}

	body.single-product .fp__woo-commerce .fg-mem__plan--featured::after {
		background: var(--fg-green);
		color: #fff;
	}

	/* Current plan's chip: an inert "Current" marker, whatever the card
	   (after the featured rule so it wins when the current plan IS the
	   featured one). The stretched link is a <span> on this card -- nothing
	   to tap. */
	body.single-product .fp__woo-commerce .fg-mem__plan--current::after {
		content: "Current";
		background: transparent;
		border-color: var(--fg-line);
		color: var(--fg-muted);
	}

	body.single-product .fp__woo-commerce .fg-mem__plan--featured {
		background: #fdf8e7; /* the site's highlight cream, marking the pick */
	}

	body.single-product .fp__woo-commerce .fg-mem .fg-mem__plan-name {
		grid-area: name;
		margin: 0;
		font-size: 17px;
	}

	/* Badge rides inline beside the name instead of overhanging the border. */
	body.single-product .fp__woo-commerce .fg-mem__badge {
		grid-area: badge;
		position: static;
		transform: none;
		justify-self: start;
		padding: 2px 8px;
		font-size: 10px;
	}

	body.single-product .fp__woo-commerce .fg-mem__price {
		grid-area: price;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
	}

	body.single-product .fp__woo-commerce .fg-mem__amount {
		font-size: 24px;
	}

	body.single-product .fp__woo-commerce .fg-mem__period {
		font-size: 12px;
	}

	body.single-product .fp__woo-commerce .fg-mem__billing {
		grid-area: billing;
		margin: 3px 0 0;
		font-size: 11px;
	}

	body.single-product .fp__woo-commerce .fg-mem__note {
		grid-area: note;
		margin: 3px 0 0;
		min-height: 0;
		font-size: 12px;
		font-weight: 400;
		color: var(--fg-muted);
	}

	/* The row IS the button: stretch the link over the card, hide its face. */
	body.single-product .fp__woo-commerce .fg-mem__cta,
	body.single-product .fp__woo-commerce .fg-mem__cta--secondary {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		font-size: 0;
		color: transparent;
	}

	body.single-product .fp__woo-commerce .fg-mem__cta:hover,
	body.single-product .fp__woo-commerce .fg-mem__cta--secondary:hover {
		background: transparent;
	}

	/* Supporting sections: same content, less chrome. */
	body.single-product .fp__woo-commerce .fg-mem__includes {
		padding: 16px;
	}

	body.single-product .fp__woo-commerce .fg-mem__includes {
		margin-top: 20px;
	}

	body.single-product .fp__woo-commerce .fg-mem__benefit {
		margin-bottom: 7px;
		font-size: 13px;
	}

	/* On phones the message wraps to two lines, and the flex layout left the
	   padlock pinned to the card edge beside a centered paragraph -- reading
	   as misaligned. Flow the lock inline with the first line instead, and
	   give the whole line breathing room from the screen edges. */
	body.single-product .fp__woo-commerce .fg-mem__renewal {
		display: block;
		margin: 14px 0 22px;
		padding: 0 18px;
	}

	body.single-product .fp__woo-commerce .fg-mem__lock {
		display: inline-block;
		margin: 0 5px 0 0;
		vertical-align: -1px;
	}
}

/* -------------------------------------------------------------------------
 * Dark mode ("theme-fg" cookie -> body.dark-mode; the external styles turn
 * #wrapper near-black). Every rule in this file reads the tokens, so dark
 * support is this flip. Anything hardcoded light above was converted to a
 * token when this block landed -- keep it that way.
 * ---------------------------------------------------------------------- */
body.dark-mode {
	--fg-ink: #e8eaed;
	--fg-muted: #9aa1a8;
	--fg-line: #3a3d41;
	--fg-field: #5b6167;
	--fg-surface: #242628;
}

/* Dark take on the featured card's highlight cream (mobile rows). */
@media (max-width: 760px) {
	body.dark-mode.single-product .fp__woo-commerce .fg-mem__plan--featured {
		background: #212d1a;
	}
}