/**
 * M Chart marketing site: custom styles layered on top of Ollie.
 *
 * Brand colors are defined as theme.json presets and exposed by WordPress as
 * --wp--preset--color--<slug> custom properties, so prefer those in patterns.
 * This file is for the handful of things theme.json can't express.
 */

:root {
	--mch-brand: var( --wp--preset--color--primary, #0f64ab );
	--mch-brand-alt: var( --wp--preset--color--primary-alt, #3b93c3 );
	--mch-brand-deep: var( --wp--preset--color--primary-alt-accent, #1f4a7a );
}

/* Placeholder slot used by the chart-demo and annotation sections until the
   real M Chart embeds are added. */
.mch-chart-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 2rem;
	text-align: center;
	color: var( --wp--preset--color--secondary, #545473 );
	background: var( --wp--preset--color--tertiary, #f2f7fb );
	background-image:
		linear-gradient( 135deg, rgba( 15, 100, 171, 0.06 ) 0%, rgba( 59, 147, 195, 0.06 ) 100% );
	border: 2px dashed var( --wp--preset--color--primary-alt, #3b93c3 );
	border-radius: var( --wp--preset--border-radius--lg, 1.25rem );
}

.mch-chart-placeholder__label {
	font-weight: 600;
	color: var( --mch-brand-deep );
}

/* Smaller placeholder used inside demo-grid cards. */
.mch-chart-placeholder--mini {
	min-height: 150px;
	padding: 1rem;
	border-radius: var( --wp--preset--border-radius--md, 0.75rem );
}

.mch-chart-placeholder--mini .mch-chart-placeholder__label {
	font-size: 0.8125rem;
}

/* --- Icons & feature cards ------------------------------------------------ */

/* Feature columns rendered as cards. */
.mch-feature {
	height: 100%;
	padding: 1.75rem;
	background: var( --wp--preset--color--base, #fff );
	border: 1px solid var( --wp--preset--color--border-light, #e3e3f0 );
	border-radius: 16px;
}

/* Circular icon badge above a feature heading. */
.mch-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1rem;
	font-size: 1.4rem;
	color: var( --mch-brand );
	background: var( --wp--preset--color--primary-accent, #e3eef7 );
	border-radius: 999px;
}

/* On the Pro band (tinted background) the cards sit on white for contrast. */
.mch-feature--pro .mch-feature-icon {
	color: var( --mch-brand-deep );
	background: var( --wp--preset--color--primary-accent, #e3eef7 );
}

/* Wider container for the feature bands (capped + centered; the parent section's
   padding insets it on small screens). */
.mch-feature-band {
	max-width: 1340px;
	margin-inline: auto;
}

/* Feature grid: 4 -> 3 -> 2 -> 1 columns as the viewport shrinks. */
.mch-feature-grid {
	display: grid;
	gap: var( --wp--preset--spacing--large, 2rem );
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

/* Pro band has 3 cards. */
.mch-feature-grid--3 {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

/* Neutralize the theme's flow-layout margins on grid items. */
.mch-feature-grid > * {
	margin: 0;
}

/* Free core (4 cards): 4 -> 2 -> 1 only, so a row never leaves an orphan card.
   :not(--3) keeps these breakpoints off the 3-card Pro grid. */
@media ( max-width: 1000px ) {
	.mch-feature-grid:not( .mch-feature-grid--3 ) {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 560px ) {
	.mch-feature-grid:not( .mch-feature-grid--3 ) {
		grid-template-columns: 1fr;
	}
}

/* Pro band (3 cards): 3 -> 1 only. */
@media ( max-width: 820px ) {
	.mch-feature-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* Inline chart-type SVG icons (inherit currentColor). */
.mch-chart-icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: -0.3em;
}

/* Strip showing all 17 chart-type icons. */
.mch-chart-types-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem 1.5rem;
	margin: 0 auto;
	max-width: 760px;
	color: var( --mch-brand-alt );
}

.mch-chart-types-strip .mch-chart-icon {
	width: 34px;
	height: 34px;
	transition: color 0.15s ease, transform 0.15s ease;
}

.mch-chart-types-strip a:hover .mch-chart-icon,
.mch-chart-types-strip .mch-chart-icon:hover {
	color: var( --mch-brand );
	transform: translateY( -2px );
}

/* Hero chart-type selector pills (icon + label). */
.mch-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.mch-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --mch-brand-deep );
	background: var( --wp--preset--color--base, #fff );
	border: 1px solid var( --wp--preset--color--border-light, #e3e3f0 );
	border-radius: 999px;
}

.mch-pill .mch-chart-icon {
	width: 1.15em;
	height: 1.15em;
	color: var( --mch-brand-alt );
}

/* --- Interactive hero chart-type switcher ([mch_chart_switcher]) ------------ */
button.mch-pill {
	cursor: pointer;
	/* Inherit only the font family, not the whole `font` shorthand — otherwise the
	   button overrides .mch-pill's font-size/weight and renders larger than the
	   "See All" <a>. This keeps every pill at the same .mch-pill size (0.875rem). */
	font-family: inherit;
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Active ("on") pill. */
.mch-pill.is-active {
	background: var( --mch-brand );
	color: var( --wp--preset--color--base, #fff );
	border-color: var( --mch-brand );
}

.mch-pill.is-active .mch-chart-icon {
	color: currentColor;
}

/* "See All" call-to-action pill. */
.mch-pill--cta {
	background: var( --mch-brand-deep );
	color: var( --wp--preset--color--base, #fff );
	border-color: var( --mch-brand-deep );
	text-decoration: none;
}

.mch-pill--cta:hover,
.mch-pill--cta:focus {
	background: var( --mch-brand );
	border-color: var( --mch-brand );
	color: var( --wp--preset--color--base, #fff );
}

.mch-switcher .mch-pills {
	margin-bottom: var( --wp--preset--spacing--small, 1rem );
}

/* Only the ACTIVE chart sits in normal flow, so the box height matches the chart
   being shown. Inactive charts are absolutely positioned (out of flow → they add
   no height, so a tall type like Pie/Radar can't leave a gap under a short type
   like Line) but still width:100% of the container, so they keep real dimensions
   and size correctly on load (no Chart.js zero-size trap, no overflow). */
.mch-switcher-charts {
	position: relative;
}

.mch-switcher-chart {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.mch-switcher-chart.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}

/* Drop the chart figure's default bottom margin so the box hugs the chart. */
.mch-switcher .m-chart-container {
	margin-bottom: 0;
}

/* Review star ratings (solid SVG stars, brand-gold). */
.mch-stars {
	display: inline-flex;
	gap: 0.2rem;
	color: #f5a623;
}

.mch-stars .mch-star {
	width: 1.6rem;
	height: 1.6rem;
}

/* Reviews rendered by the [mch_reviews] shortcode (e.g. on the Pricing page). */
.mch-reviews {
	display: grid;
	gap: var( --wp--preset--spacing--large, 2rem );
	grid-template-columns: repeat( auto-fit, minmax( min( 260px, 100% ), 1fr ) );
}

.mch-review-card {
	padding: var( --wp--preset--spacing--large, 2rem );
	background: var( --wp--preset--color--base, #fff );
	border: 1px solid var( --wp--preset--color--border-light, #e3e3f0 );
	border-radius: 16px;
}

.mch-review-card .mch-stars {
	margin-bottom: 0.75rem;
}

.mch-review-text {
	font-size: var( --wp--preset--font-size--small, 0.875rem );
}

.mch-review-name {
	margin-top: 0.5rem;
	font-weight: 600;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
}

.mch-review-sub {
	margin-top: 0.1rem;
	color: var( --wp--preset--color--secondary, #545473 );
	font-size: var( --wp--preset--font-size--x-small, 0.75rem );
}

/* Footer about-me: avatar keeps its size; bio + social fill the column beside it
   (and the social icons align with the bio text). */
.mch-avatar {
	flex: 0 0 auto;
}

.mch-about-content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Chart-type icon next to a Demos card heading. */
.mch-demo-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mch-demo-heading .mch-chart-icon {
	width: 1.4em;
	height: 1.4em;
	color: var( --mch-brand );
	flex: 0 0 auto;
}

/* The demo grids are a fixed 2 columns (columnCount:2) so they stay two-up at
   full browser width; collapse to a single column before the cards get cramped.
   The home hero (text + chart) stacks at the same breakpoint — its columns carry
   the .mch-hero-columns class; the higher-specificity selector + !important beat
   WordPress's own `min-width:782px { flex-wrap:nowrap }` columns rule. */
@media ( max-width: 1080px ) {
	.mch-demo-grid {
		grid-template-columns: 1fr;
	}
	.wp-block-columns.mch-hero-columns {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.mch-hero-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* M Chart embeds (and the hero switcher that wraps them) fill their container
   even inside a constrained layout, so editing a page in the block editor can't
   shrink a chart. WordPress's constrained max-width comes from a zero-specificity
   :where() rule, so this class selector wins without !important. */
.m-chart-container,
.m-chart-image-figure,
.mch-switcher {
	max-width: none;
	width: 100%;
}

/* --- Restore list markers --------------------------------------------------
   The Legal Pages / Legal Pages Pro plugins enqueue a Tailwind "preflight"
   reset site-wide (`ol, ul, menu { list-style: none }`), which strips the
   bullets/numbers from our content lists on the front end. Re-assert standard
   markers for editor list blocks (Ollie already restores the left padding, and
   we leave its opt-in check list styles alone). */
ol.wp-block-list {
	list-style: decimal;
}

ul.wp-block-list:not( .is-style-list-check ):not( .is-style-list-check-circle ) {
	list-style: disc;
}

ul.wp-block-list ul {
	list-style: circle;
}

ul.wp-block-list ul ul {
	list-style: square;
}

/* --- Fluent Forms submit button: match the site's primary buttons ----------
   Fluent ships its own button look (lighter blue, 7px radius, larger padding).
   We recolor it through Fluent's own CSS variable and restyle the submit button
   to mirror the theme's wp-element-button: brand-primary background, white text,
   5px radius, small/500 type, and the same near-black hover the site uses. */
:root {
	--fluentform-primary: var( --wp--preset--color--primary, #0f64ab );
}

.frm-fluent-form .ff-btn-submit {
	border: 0;
	border-radius: 5px;
	padding: 0.6em 1em;
	font-size: var( --wp--preset--font-size--small, 0.875rem );
	font-weight: 500;
	line-height: 1.2;
}

form.frm-fluent-form .ff-btn-submit:not( .ff_btn_no_style ):hover,
form.frm-fluent-form .ff-btn-submit:not( .ff_btn_no_style ):focus {
	background-color: var( --wp--preset--color--main, #1e1e26 );
	color: var( --wp--preset--color--base, #ffffff );
}