/* ------------------------------------------------------------ *\
   Block: Top Calculator Tabs

   BEM:
   - Block:    block__custom-calculators
   - Elements: block__custom-calculators-{inner|heading|tabs|nav|
               button|description|panel|cta-wrap|cta}
   - State:    .is-active  (toggled by JS for buttons & panels)

   Heading typography is intentionally NOT redeclared here — the
   global theme h2 rule already matches spec (36/1.33 desktop,
   24/1.42 mobile, Urbanist 800, $base). Same goes for description
   body font/size/colour, which inherit from the theme's body rule.
\* ------------------------------------------------------------ */

.block__custom-calculators {
	--tes-calc-green: #055e37;
	--tes-calc-text: #1f1f1f;
	--tes-calc-text-muted: #666;
	--tes-calc-surface: #f0f0f0;
	--tes-calc-card-bg: #fff;
	--tes-calc-border: #e0e0e0;
	--tes-calc-shadow-tab: 0 4px 2px rgba(0, 0, 0, 0.05);

	background-color: var(--tes-calc-surface);
	color: var(--tes-calc-text);
	padding: 60px 0;
	/* Full-bleed: escape any constrained parent container. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.block__custom-calculators-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.block__custom-calculators-heading {
	margin: 0;
	text-align: center;
}

.block__custom-calculators-tabs {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.block__custom-calculators-nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.block__custom-calculators-button {
	appearance: none;
	cursor: pointer;
	background: var(--tes-calc-card-bg);
	border: 1px solid var(--tes-calc-border);
	border-radius: 15px;
	padding: 20px;
	min-height: 74px;
	font-family: 'Urbanist', sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 34px;
	letter-spacing: 0.12px;
	color: var(--tes-calc-text-muted);
	text-align: center;
	transition:
		border-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

.block__custom-calculators-button:hover,
.block__custom-calculators-button:focus-visible {
	color: var(--tes-calc-green);
	border-color: var(--tes-calc-green);
	outline: none;
}

.block__custom-calculators-button.is-active {
	border: 2px solid var(--tes-calc-green);
	color: var(--tes-calc-green);
	box-shadow: var(--tes-calc-shadow-tab);
}

.block__custom-calculators-panel {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.block__custom-calculators-panel[hidden] {
	display: none;
}

/* Per-tab description sentence under the tab nav. */
.block__custom-calculators-panel-description {
	margin: 0;
	font-weight: 500;
	text-align: center;
}

.block__custom-calculators-panel-description a {
	color: inherit;
	text-decoration: underline;
}

.block__custom-calculators-panel-description-link {
	margin-left: 4px;
	font-weight: 700;
	text-decoration: none;
}

.block__custom-calculators-panel-description-link:hover,
.block__custom-calculators-panel-description-link:focus-visible {
	text-decoration: underline;
}

/* Note panel: lives inside the hermes calculator card (moved there by JS).
   Falls back to sitting above the card if JS is off — styling is the same. */
.block__custom-calculators-note {
	margin: 15px 20px;
	padding: 15px;
	background: #eee;
	color: var(--tes-calc-text);
	border-radius: 15px;
	text-align: center;
}

.block__custom-calculators-note p {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	font-weight: 500;
}

.block__custom-calculators-note strong {
	font-weight: 700;
}

.block__custom-calculators-note a {
	color: inherit;
	text-decoration: underline;
}

.block__custom-calculators-cta-wrap {
	display: flex;
	justify-content: center;
}

.block__custom-calculators-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 400px;
	min-width: 200px;
	padding: 15px 20px;
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	color: var(--tes-calc-text);
	background: transparent;
	border: 2px solid var(--tes-calc-text);
	border-radius: 16px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.block__custom-calculators-cta:hover,
.block__custom-calculators-cta:focus-visible {
	color: var(--tes-calc-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	outline: none;
}

.block__custom-calculators-cta:active {
	background: var(--tes-calc-surface);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Per-block currency override — !important is needed to beat the
   inline style hermes adds on each .bw-calculator at render time. */
.block__custom-calculators .bw-calculator {
	--bwcalc-currency-symbol: var(--tes-calc-currency, '$') !important;
}

.block__custom-calculators .bw-arbitrage-calculator__game-line .padded:not(:has(.bw-arbitrage-calculator__remove-button)) {
	padding-right: 0;
}

/* ------------------------------------------------------------ *\
   Responsive — breakpoints aligned with theme
   ($breakpoints.tablet = 1023px, $breakpoints.mobile = 767px)
\* ------------------------------------------------------------ */

@media (max-width: 1023px) {
	.block__custom-calculators {
		padding: 40px 0;
	}

	.block__custom-calculators-inner {
		padding: 0 40px;
	}

	.block__custom-calculators-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 15px;
	}

	.block__custom-calculators-button {
		min-height: 60px;
		padding: 15px 20px;
		font-size: 20px;
		line-height: 30px;
	}
}

@media (max-width: 767px) {
	.block__custom-calculators {
		padding: 30px 0;
	}

	.block__custom-calculators-inner {
		padding: 0 20px;
	}

	.block__custom-calculators-nav {
		grid-template-columns: 1fr;
	}

	.block__custom-calculators-cta {
		width: 100%;
	}
}