/**
 * Benefit Formulas
 *
 * Styles the "Benefit Formulas" pattern (opers-child/benefits-box) and the
 * related calculation equations used on the plan-features pages. The markup
 * uses the BEM-style classes .opers-calc-table* and .opers-calculation*; this
 * file is the single source of truth for them (the previous copy lived,
 * commented out, in style.css).
 *
 * Layout mirrors opers.org's .calc-table container. The heading "tab" uses
 * OPERS Blue (--wp--preset--color--blue, #2a4b7b) instead of Sky.
 */

.opers-calc-table {
	margin: 25px auto;
}

/* Heading "tab" sitting on top of the bordered body box. */
.opers-calc-table__heading {
	box-sizing: border-box; /* keep padding inside the 95% width so the tab never exceeds the body box */
	background-color: var(--wp--preset--color--blue); /* OPERS Blue */
	color: #fff;
	margin: 0 auto;
	width: 95%;
	max-width: 400px;
	padding: 8px 15px;
	font-size: 18px;
	text-align: center;
	border-radius: 5px 5px 0 0;
}

/*
 * Body box: carries its 1px Sky border, rounded corners and white-to-pale-blue
 * gradient via inline block styles. Collapse the constrained-layout block gap so
 * the tab sits flush on top of the box.
 */
.opers-calc-table__body {
	margin-top: 0;
}

/*
 * Horizontal equation: each term is a blue button joined by operators, with its
 * caption flowing in normal document flow just BELOW the button (outside the
 * blue). Because the captions are in flow, long ones grow the row instead of
 * overflowing the container. Capped and centered so short formulas (e.g. the
 * two-term Defined Contribution formula) don't stretch across the full width.
 * The Benefit Formulas rows sit inside ~50% columns, so the cap has no effect
 * on them; they restore a more compact variant below via .opers-calc-table__body.
 */
.opers-calculation {
	align-items: flex-start;
	max-width: 520px;
	margin: 15px auto;
}

/* Neutralize the default flex-layout gap; spacing comes from the operators. */
.opers-calculation.is-layout-flex {
	gap: 0;
}

/* A term stacked above its caption. */
.opers-calculation__box {
	flex: 3;
	display: flex;
	flex-direction: column;
	padding: 0;
	background-color: transparent;
	text-align: center;
}

/*
 * Some markup sets the box background via a color class (backgroundColor:blue).
 * In the stacked layout the blue belongs to the term button, so clear the box
 * background and its global padding. Only the Defined Contribution boxes carry
 * this class; Benefit Formulas boxes get their blue from .opers-calc-table__body.
 */
.opers-calculation__box.has-blue-background-color {
	padding: 0 !important;
	background-color: transparent !important;
}

/* The term itself is the blue button. A shared min-height keeps buttons aligned. */
.opers-calculation__box > p:not(.opers-calculation__note) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25em;
	margin: 0;
	padding: 10px;
	background: var(--wp--preset--color--blue);
	border-radius: 3px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

/* Caption: hangs just below its button in OPERS Blue, outside the box. */
.opers-calculation__box .opers-calculation__note {
	margin-top: 6px;
	padding: 0 5px;
	color: var(--wp--preset--color--blue);
	font-size: 11px;
	font-style: italic;
	font-weight: 400;
}

/* Operator cells (x, +): narrow, unboxed, vertically centered on the buttons. */
.opers-calculation__operator {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25em;
	margin: 0;
	padding: 0;
	background: none;
	color: #000;
	font-weight: 700;
}

/*
 * Both the Benefit Formulas and the Defined Contribution formula use the same
 * stacked layout above: the term is the blue button and the caption flows just
 * below it on the (transparent) box. Keeping the caption out of the blue button
 * means it renders on the light container background, so the OPERS Blue caption
 * text passes color-contrast checks (an absolute caption nested inside the blue
 * button is read as blue-on-blue by accessibility tools).
 */

/*
 * On mobile the tab spans the full width of the body box and the body box drops
 * its rounded corners, so the two read as one connected full-width block. The
 * body border-radius is set inline in the markup, hence !important.
 */
@media (max-width: 600px) {
	.opers-calc-table__heading {
		width: 100%;
		max-width: none;
	}

	.opers-calc-table__body {
		border-radius: 0 !important;
	}
}