/**
 * Mondo Size Converter Styles
 *
 * Scoped to .mondo-conv, which is rendered by assets/js/mondo-converter.js into
 * #mondo-converter at the top of post 23 (/ski-boot-mondo-sizing-guide/).
 *
 * Uses the semantic tokens from style.css rather than raw hex, so the widget follows
 * the design system. Written as plain CSS rather than Tailwind utilities because the
 * markup is generated in JS.
 *
 * @package WP_Wayfinder
 */

/* =========================================================================
   Shell
   ========================================================================= */

.mondo-conv {
	font-family: var(--font-sans);
	background: var(--color-surface-subtle);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--radius-2xl);
	padding: 1.5rem;
	margin: 0 0 2rem;
}

.mondo-conv__head {
	margin-bottom: 1.25rem;
}

.mondo-conv__title {
	font-family: var(--font-heading);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: 1.375rem;
	line-height: 1.2;
	margin: 0 0 0.375rem;
	color: var(--color-text-primary);
}

.mondo-conv__sub {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* =========================================================================
   Controls
   ========================================================================= */

.mondo-conv__controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

@media (max-width: 640px) {
	.mondo-conv__controls {
		grid-template-columns: 1fr;
	}
}

.mondo-conv__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.mondo-conv__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.mondo-conv__select,
.mondo-conv__input {
	/* Explicit, because the theme reset does not normalise number inputs: without it the
	   padding is added to the 100% width and the field overflows the card on mobile. */
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 0.875rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-text-primary);
	background: var(--color-surface-default);
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: var(--radius-md);
	transition: var(--transition-standard, border-color 0.2s ease);
}

.mondo-conv__select:focus,
.mondo-conv__input:focus {
	outline: none;
	border-color: var(--color-action-primary);
	box-shadow: 0 0 0 3px rgba(255, 101, 1, 0.15);
}

/* =========================================================================
   Result
   ========================================================================= */

.mondo-conv__results:empty {
	display: none;
}

.mondo-conv__card {
	margin-top: 1.25rem;
	padding: 1.25rem;
	background: var(--color-surface-default);
	border-radius: var(--radius-2xl);
	animation: mondoConvIn 0.35s ease-out;
}

@keyframes mondoConvIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mondo-conv__card {
		animation: none;
	}
}

.mondo-conv__card--empty {
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.mondo-conv__headline {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.mondo-conv__headline-label {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-tertiary);
}

.mondo-conv__headline-value {
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	/* Gradient text, with a safety net, because this element makes its own glyphs
	   transparent and would otherwise vanish rather than degrade.
	   The var() fallback alone is not enough: it only applies when the token is
	   UNDEFINED. A token that is defined-but-empty makes the declaration invalid at
	   computed-value time, which unsets the property and does NOT cascade back to an
	   earlier declaration of that same property. So the net has to be a different
	   property: background-color is literal and independent, and background-clip:text
	   clips whatever background actually painted. Worst case the number is solid
	   orange instead of a gradient. It is never invisible. */
	background-color: #ff6501;
	background-image: var(--color-brand-gradient, linear-gradient(90deg, #f5bd1e, #ff6501, #ed1c24, #ff1592));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.mondo-conv__note {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--color-text-tertiary);
}

.mondo-conv__group {
	margin-top: 1.125rem;
}

.mondo-conv__group-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-tertiary);
	margin: 0 0 0.5rem;
}

.mondo-conv__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.625rem;
}

.mondo-conv__grid--primary {
	margin-top: 1rem;
}

@media (max-width: 480px) {
	.mondo-conv__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mondo-conv__cell {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	padding: 0.625rem 0.75rem;
	background: var(--color-surface-muted);
	border-radius: var(--radius-md);
}

.mondo-conv__cell-label {
	font-size: 0.75rem;
	color: var(--color-text-tertiary);
	min-height: 1rem;
}

.mondo-conv__cell-value {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-text-primary);
}

/* =========================================================================
   The refusal
   =========================================================================
   Deliberately a designed moment, not a footnote disclaimer. The whole point of
   the tool is that it answers what it can answer exactly and says plainly where
   the arithmetic stops. This block is also the natural handoff to the scan.
   ========================================================================= */

.mondo-conv__refusal {
	margin-top: 1rem;
	padding: 1.25rem;
	background: var(--color-surface-inverse, #14110f);
	color: var(--color-text-on-dark, #ffffff);
	border-radius: var(--radius-2xl);
}

.mondo-conv__refusal p {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-text-on-dark-muted, rgba(255, 255, 255, 0.78));
}

.mondo-conv__refusal-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--color-text-on-dark, #ffffff) !important;
}

.mondo-conv__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 1.5rem;
	margin-top: 0.25rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--color-action-on-primary, #ffffff);
	background: var(--color-action-primary, #ff6501);
	border-radius: var(--radius-4xl);
	transition: var(--transition-standard, background-color 0.2s ease);
}

.mondo-conv__cta:hover,
.mondo-conv__cta:focus {
	background: var(--color-action-primary-hover, #e65a01);
	color: var(--color-action-on-primary, #ffffff);
}

.mondo-conv__refusal-foot {
	margin: 0.875rem 0 0 !important;
	font-size: 0.875rem !important;
}

.mondo-conv__refusal-foot a {
	color: var(--color-text-on-dark, #ffffff);
	text-decoration: underline;
}

/* =========================================================================
   Theme content styles reaching into the widget
   =========================================================================
   The widget renders inside .entry-content, whose article styles are more
   specific than the single-class block styles above and therefore win:

     .entry-content a   (0,1,1)  beats  .mondo-conv__cta        (0,1,0)
     .entry-content h4  (0,1,1)  beats  .mondo-conv__group-title (0,1,0)

   The first painted the CTA label brand orange on a brand orange button, so it
   was invisible until hover, where .mondo-conv__cta:hover reached (0,1,1), tied,
   and won on load order. The second gave the small uppercase group labels the
   article gradient-heading treatment, so "ADULT SCALES" rendered as gold display
   type instead of a muted label.

   Scoping with the block class lifts these to (0,2,0) so the widget's own intent
   wins. -webkit-text-fill-color has to be set explicitly too: the theme's
   gradient headings use it, and it overrides `color` wherever it applies.

   The h2 title is deliberately left alone. It picks up the theme's gradient
   heading treatment and that is wanted here.
   ========================================================================= */

.mondo-conv .mondo-conv__cta,
.mondo-conv .mondo-conv__cta:hover,
.mondo-conv .mondo-conv__cta:focus {
	color: var(--color-action-on-primary, #ffffff);
	/* currentColor rather than a literal, so the fill tracks the token above instead of
	   silently diverging from it if the token is ever changed. Still set explicitly,
	   because it is what beats the theme's gradient-heading fill.
	   Safe in every token state: if the token is defined-but-empty the `color`
	   declaration is invalid at computed-value time and `color` falls back to inherit,
	   which is the refusal block's own on-dark white, not something dark. Measured on
	   the live page across all three states: white on orange in each. */
	-webkit-text-fill-color: currentColor;
	text-decoration: none;
}

.mondo-conv .mondo-conv__group-title {
	background: none;
	color: var(--color-text-tertiary, #6b7280);
	-webkit-text-fill-color: var(--color-text-tertiary, #6b7280);
}