/*
 * BMI Cruncher theme: the parts theme.json can't express.
 * Tokens come from theme.json presets (--wp--preset--color--*), which mirror the
 * Health Cruncher app (app/src/theme/colors.ts). Mobile first.
 */

:root {
	--bmc-radius: 16px;
	--bmc-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
	--bmc-gutter: 16px;
}
@media (min-width: 782px) { :root { --bmc-gutter: 24px; } }

body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding-left: 0; padding-right: 0; }
.bmc-main { padding: 20px var(--bmc-gutter) 56px; }
.bmc-main > * + * { margin-block-start: 20px; }

/* ---- shared pieces ---- */
.bmc-card {
	background: var(--wp--preset--color--base-2);
	border-radius: var(--bmc-radius);
	box-shadow: var(--bmc-shadow);
	padding: 20px;
}
@media (min-width: 782px) { .bmc-card { padding: 28px; } }

.bmc-eyebrow {
	margin: 0;
	font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--wp--preset--color--action);
}
.bmc-eyebrow a { color: inherit; text-decoration: none; }
.bmc-eyebrow--light { color: #7FD0EC; }
.bmc-section { padding: 0 var(--bmc-gutter); margin-top: 48px; }
.bmc-section-title { margin: 0 0 16px; font-size: 1.5rem; }

.bmc-btn, .bmc-app-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 46px; padding: 0 22px; border-radius: 999px;
	background: var(--wp--preset--color--button); color: #fff;
	font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
}
.bmc-btn:hover, .bmc-app-btn:hover { background: var(--wp--preset--color--button-dark); color: #fff; }
.bmc-btn--white { background: #fff; color: var(--wp--preset--color--navy); }
.bmc-btn--white:hover { background: #E3EEF7; color: var(--wp--preset--color--navy); }
.bmc-btn--outline { background: transparent; color: var(--wp--preset--color--contrast); box-shadow: inset 0 0 0 1.5px #D1D1D6; }
.bmc-btn--outline:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }

:where(.wp-site-blocks) :focus-visible { outline: 2px solid var(--wp--preset--color--action); outline-offset: 2px; }

/* ---- header ---- */
.bmc-header { background: #fff; border-bottom: 1px solid var(--wp--preset--color--contrast-3); padding: 12px var(--bmc-gutter); }
.bmc-header-row { gap: 20px; }
.bmc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wp--preset--color--contrast); flex-shrink: 0; }
.bmc-brand img { display: block; width: 34px; height: 34px; }
.bmc-brand span { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.bmc-nav { flex: 1; }
.bmc-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bmc-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--action); }
.bmc-nav .wp-block-navigation__submenu-container {
	border: 0 !important; border-radius: 14px; box-shadow: var(--bmc-shadow); padding: 8px; min-width: 240px !important;
}
.bmc-header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.bmc-search { display: flex; color: var(--wp--preset--color--contrast-2); }
.bmc-header .bmc-app-btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
@media (max-width: 599px) {
	/* Phone: logo on the left; a compact "Get the app" then the menu button on the right.
	   (Order swap because the menu block comes before the actions in the markup.) */
	.bmc-search { display: none; }
	.bmc-header-row { gap: 10px; }
	.bmc-header-row > .bmc-brand { margin-right: auto; }
	.bmc-header-actions { order: 2; gap: 0; }
	.bmc-header .bmc-app-btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
	.bmc-brand span { font-size: 17px; }
	.bmc-brand img { width: 30px; height: 30px; }
	.bmc-nav { flex: 0 0 auto; order: 3; }
}
/* Smallest phones: logo mark only, so the app button and menu still fit. */
@media (max-width: 359px) { .bmc-brand span { display: none; } }
@media (max-width: 599px) {
	.bmc-nav .wp-block-navigation__responsive-container-open {
		width: 40px; height: 40px; border-radius: 10px; background: var(--wp--preset--color--base);
		display: flex; align-items: center; justify-content: center;
	}
}
.bmc-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 20px var(--bmc-gutter); }
.bmc-nav .is-menu-open .wp-block-navigation-item__content { font-size: 17px; font-weight: 600; padding: 10px 0; }

/* ---- footer ---- */
.bmc-footer { background: #fff; border-top: 1px solid var(--wp--preset--color--contrast-3); padding: 40px var(--bmc-gutter) 28px; font-size: 14px; color: var(--wp--preset--color--contrast-2); }
.bmc-footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 782px) { .bmc-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 40px; } }
.bmc-footer-brand p { margin: 10px 0 14px; color: var(--wp--preset--color--muted); }
.bmc-footer-brand .bmc-app-btn { min-height: 40px; font-size: 14px; }
.bmc-footer-col { display: flex; flex-direction: column; gap: 8px; }
.bmc-footer-col strong { color: var(--wp--preset--color--contrast); }
.bmc-footer-col a, .bmc-footer-nav a { color: var(--wp--preset--color--contrast-2); text-decoration: none; }
.bmc-footer-col a:hover, .bmc-footer-nav a:hover { color: var(--wp--preset--color--action); }
.bmc-footer-nav { gap: 8px !important; }
.bmc-footer-disclaimer p { margin: 0; color: var(--wp--preset--color--muted); line-height: 1.5; }
.bmc-footer-legal { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--contrast-3); text-align: center; color: var(--wp--preset--color--muted); font-size: 13px; }

/* ---- home ---- */
.bmc-hero { padding: 32px var(--bmc-gutter) 8px; }
@media (min-width: 782px) { .bmc-hero { padding-top: 56px; } }
.bmc-hero-cols { gap: 40px; }
.bmc-hero-title { margin: 12px 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; }
.bmc-hero-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--wp--preset--color--contrast-2); margin: 0; }
.bmc-hero-ticks { font-size: 14px; color: var(--wp--preset--color--muted); }
.bmc-hero .bmic { margin: 0; }

.bmc-calc-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 782px) { .bmc-calc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.bmc-calc-tile {
	display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px;
	background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); text-decoration: none; color: var(--wp--preset--color--contrast);
	transition: box-shadow .15s, transform .15s;
}
.bmc-calc-tile:hover { box-shadow: var(--bmc-shadow); transform: translateY(-1px); color: var(--wp--preset--color--contrast); }
.bmc-calc-ic {
	flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
}
.bmc-calc-txt { display: flex; flex-direction: column; min-width: 0; }
.bmc-calc-txt strong { font-size: 15px; }
.bmc-calc-txt span { display: none; font-size: 13px; color: var(--wp--preset--color--muted); line-height: 1.35; }
@media (min-width: 782px) {
	.bmc-calc-tile { flex-direction: column; align-items: flex-start; padding: 18px; }
	.bmc-calc-txt span { display: block; }
}

.bmc-app-band {
	background: var(--wp--preset--color--navy); color: #fff; border-radius: 24px;
	padding: 24px 20px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
}
@media (min-width: 782px) { .bmc-app-band { padding: 44px; gap: 40px; } }
.bmc-app-band-copy { flex: 1 1 380px; }
.bmc-app-band h2 { color: #fff; margin: 10px 0; font-size: clamp(1.5rem, 3vw, 2.125rem); }
.bmc-app-band-copy > p:not(.bmc-eyebrow) { color: #D6E2EF; margin: 0 0 18px; }
.bmc-app-band-stat {
	flex: 0 1 260px; background: #173A64; border: 1px solid #24497A; border-radius: 24px; padding: 22px;
	display: flex; flex-direction: column; gap: 10px;
}
.bmc-stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #A9BCD3; }
.bmc-stat-big { font-size: 44px; font-weight: 800; line-height: 1; }
.bmc-stat-big small { font-size: 18px; color: #A9BCD3; }
.bmc-stat-delta { font-size: 14px; font-weight: 600; color: #30D158; }
.bmc-app-band-stat hr { border: 0; height: 1px; background: #24497A; margin: 2px 0; width: 100%; }
.bmc-stat-row { display: flex; justify-content: space-between; font-size: 14px; }
.bmc-stat-row span { color: #A9BCD3; }

.bmc-about { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.bmc-about img { flex: 0 1 420px; width: 100%; max-width: 100%; height: auto; border-radius: 16px; }
.bmc-about-copy { flex: 1 1 320px; }
.bmc-about-copy h2 { margin: 8px 0 12px; }
.bmc-about-copy p:not(.bmc-eyebrow) { color: var(--wp--preset--color--contrast-2); }
.bmc-about-btns { display: flex; flex-wrap: wrap; gap: 12px; }

.bmc-guides .wp-block-post-template { gap: 20px; }
@media (max-width: 781px) { .bmc-guides .wp-block-post-template { grid-template-columns: 1fr !important; } }
.bmc-guide { padding: 0 !important; overflow: hidden; height: 100%; }
.bmc-guide .wp-block-post-featured-image { margin: 0; background: #DCEFF7; }
.bmc-guide .wp-block-post-featured-image img { border-radius: 0; }
.bmc-guide-body { padding: 16px 20px 20px; }
.bmc-guide-body > * { margin: 0 0 8px; }
.bmc-guide .wp-block-post-title { font-size: 1.125rem; line-height: 1.3; }
.bmc-guide .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bmc-guide .wp-block-post-excerpt { font-size: 15px; color: var(--wp--preset--color--muted); }
.bmc-guide .wp-block-post-excerpt__more-text { display: none; }

/* ---- articles and pages ---- */
.bmc-breadcrumbs { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.bmc-breadcrumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.bmc-breadcrumbs a:hover { color: var(--wp--preset--color--action); }
.bmc-breadcrumbs .breadcrumb_last { color: var(--wp--preset--color--contrast-2); }
.bmc-title { margin-bottom: 0; }
/* Articles: breadcrumbs + byline up top. Calculator and results pages: neither (the tool comes
   first), and the author box at the end instead. */
/* Author box: end of articles only. On calculator/results pages it competed with the save flow. */
.bmc-is-tool .bmc-author-part { display: none; }
.bmc-is-tool .bmc-breadcrumbs, .bmc-is-tool .bmc-meta { display: none; }
.bmc-byline { gap: 8px; font-size: 14px; color: var(--wp--preset--color--contrast-2); }
.bmc-byline p, .bmc-byline .wp-block-post-author-name { margin: 0; }
.bmc-byline .wp-block-avatar img { border-radius: 999px; }
.bmc-byline-name { font-weight: 700; }
.bmc-byline-name a { color: inherit; }
.bmc-author { gap: 16px; align-items: flex-start; }
.bmc-author .wp-block-avatar { flex: 0 0 auto; margin: 0; }
.bmc-author .wp-block-avatar img { border-radius: 999px; display: block; }
.bmc-author-copy > * { margin: 0; }
.bmc-author-name { margin-top: 2px !important; font-size: 1.125rem; font-weight: 700; }
.bmc-author-bio { margin-top: 6px !important; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--contrast-2); }
.bmc-author-links { margin-top: 10px !important; font-size: 14px; font-weight: 600; }
.bmc-author-links a { color: var(--wp--preset--color--action); text-decoration: none; }
@media (max-width: 599px) { .bmc-author .wp-block-avatar img { width: 56px; height: 56px; } }

.bmc-prose { font-size: 17px; line-height: 1.7; }
@media (min-width: 782px) { .bmc-prose { padding: 16px 40px 36px; } }
.bmc-prose h2 { margin-top: 2em; }

/* Articles: one card per H2 section (functions.php splits the content). */
.bmc-sections > * + * { margin-block-start: 20px; }
.bmc-section { margin-left: 0; margin-right: 0; max-width: none; }
@media (min-width: 782px) { .bmc-section { padding: 32px 40px; } }
.bmc-section > :first-child, .bmc-section > h2:first-child { margin-top: 0; }
.bmc-section--tool, .bmc-section--tool.bmc-section { padding: 0; background: none; box-shadow: none; }
.bmc-section > :last-child { margin-bottom: 0; }
/* Section cards aren't a WP layout container (and classic content doesn't load the image block's
   CSS), so restore the alignment rules core layout normally gives. */
.bmc-prose .aligncenter { margin-left: auto !important; margin-right: auto !important; }
.bmc-prose img.aligncenter { display: block; }
.bmc-prose .wp-block-image.aligncenter, .bmc-prose figure.aligncenter { display: table; }
.bmc-prose .wp-block-image.aligncenter > figcaption { display: table-caption; caption-side: bottom; }
.bmc-prose .alignleft { float: left; margin: .3em 1.5em 1em 0; }
.bmc-prose .alignright { float: right; margin: .3em 0 1em 1.5em; }
.bmc-section::after { content: ""; display: table; clear: both; }
.bmc-sections > .bmc-ad, .bmc-sections > .adsense-manual-placed { margin: 20px 0; }
.bmc-prose h3 { margin-top: 1.6em; }
.bmc-prose img { border-radius: 12px; height: auto; }
/* Tables. !important where the site's older custom CSS (th { #007bff }, table { width: 95% },
   th, td { border !important }) would otherwise still win. */
.bmc-prose .wp-block-table { border: 1px solid var(--wp--preset--color--contrast-3); border-radius: 12px; overflow-x: auto; margin: 24px 0; }
.bmc-prose table { width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: collapse; font-family: inherit !important; font-size: 16px; }
.bmc-prose th { background: #007BFF !important; color: #fff !important; font-weight: 700; text-align: left; }
.bmc-prose th, .bmc-prose td { padding: 12px 16px !important; border: 0 !important; border-top: 1px solid var(--wp--preset--color--contrast-3) !important; text-align: left; }
.bmc-prose thead th { border-top: 0 !important; }
.bmc-prose thead th + th { border-left: 1px solid rgba(255, 255, 255, .2) !important; }
.bmc-prose tbody tr:first-child td, .bmc-prose tbody tr:first-child th { border-top: 0 !important; }
.bmc-prose tbody tr:nth-child(even) { background: #F7F9FB; }
.bmc-prose .wp-block-table figcaption { margin: 0; padding: 8px 16px; font-size: 13px; color: var(--wp--preset--color--muted); border-top: 1px solid var(--wp--preset--color--contrast-3); }

/* Quotes: a callout in the article's own type, not the parent theme's big serif italic. */
.bmc-prose .wp-block-quote, .bmc-prose blockquote {
	margin: 24px 0; padding: 16px 20px; border: 0; border-left: 4px solid var(--wp--preset--color--brand, #3BADD6);
	border-radius: 0 12px 12px 0; background: #F0F8FC;
	font-family: inherit; font-size: 18px; font-style: normal; font-weight: 500; line-height: 1.55;
	color: var(--wp--preset--color--contrast);
}
.bmc-prose blockquote p { margin: 0 0 .6em; }
.bmc-prose blockquote > :last-child { margin-bottom: 0; }
.bmc-prose blockquote cite { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; color: var(--wp--preset--color--muted); }
/* Ads inside prose break out to the card edge on phones, so they read as ads, not text. */
.bmc-ad { margin: 28px 0; min-height: 250px; }
@media (max-width: 599px) { .bmc-prose .bmc-ad { margin-left: -20px; margin-right: -20px; } }

/* Calculator and results posts: the plugin card is the page, so no outer prose card padding fights it. */
.bmc-is-calculator .bmc-title, .bmc-is-results .bmc-title { text-align: center; }
.bmc-is-calculator .bmc-breadcrumbs { text-align: center; }

.bmc-related .bmc-calc-grid { margin-top: 0; }
/* Previous / next: two button cards side by side (stacked on phones). */
.bmc-post-nav { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .bmc-post-nav { grid-template-columns: 1fr 1fr; } }
.bmc-post-nav .wp-block-post-navigation-link { margin: 0; }
.bmc-post-nav .wp-block-post-navigation-link a {
	display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 16px 20px;
	background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	color: var(--wp--preset--color--contrast); text-decoration: none; font-weight: 600; line-height: 1.35;
	transition: box-shadow .15s, transform .15s;
}
.bmc-post-nav .wp-block-post-navigation-link a:hover { box-shadow: var(--bmc-shadow); transform: translateY(-1px); }
.bmc-post-nav .post-navigation-link__label {
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--action);
}
.bmc-nav-prev .post-navigation-link__label::before { content: "\2190\00a0"; }
.bmc-nav-next a { text-align: right; align-items: flex-end; }
.bmc-nav-next .post-navigation-link__label::after { content: "\00a0\2192"; }
@media (min-width: 600px) { .bmc-nav-next { grid-column: 2; } }

/* Calculators category: the app's ten as big tiles, then the other calculator pages. */
.bmc-calc-grid--lg { gap: 12px; }
@media (min-width: 782px) { .bmc-calc-grid--lg { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } }
.bmc-calc-grid--lg .bmc-calc-tile { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
.bmc-calc-grid--lg .bmc-calc-ic { flex-basis: 52px; width: 52px; height: 52px; border-radius: 14px; font-size: 15px; }
.bmc-calc-grid--lg .bmc-calc-txt strong { font-size: 18px; }
.bmc-calc-grid--lg .bmc-calc-txt span { display: block; font-size: 14px; margin-top: 2px; }
/* "More calculators": one panel of rows, so it reads as secondary to the tiles above it. */
/* Top/bottom only: the constrained layout centres children with auto side margins. */
.bmc-calculators .bmc-section-title.wp-block-heading { margin-top: 48px !important; margin-bottom: 14px !important; font-size: 1.25rem; }
.bmc-calc-grid.bmc-calc-list {
	display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 0; margin-bottom: 0; box-sizing: border-box;
	background: #fff; border-radius: 16px; padding: 4px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
@media (min-width: 782px) { .bmc-calc-grid.bmc-calc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding: 6px 24px; } }
.bmc-calc-list .bmc-calc-tile {
	flex-direction: row !important; align-items: center !important; gap: 14px; padding: 14px 0 !important;
	background: none; border-radius: 0; box-shadow: none !important; transform: none !important;
	border-bottom: 1px solid #E5E5EA;
}
.bmc-calc-list .bmc-calc-tile:last-child { border-bottom: 0; }
@media (min-width: 782px) {
	/* Two columns: the second-to-last cell never has a row under it (even count: it is the last
	   row's left cell; odd count: it is the right cell above the empty slot). */
	.bmc-calc-list .bmc-calc-tile:nth-last-child(2) { border-bottom: 0; }
}
.bmc-calc-list .bmc-calc-tile::after { content: "›"; margin-left: auto; font-size: 22px; line-height: 1; color: #C7C7CC; }
.bmc-calc-list .bmc-calc-tile:hover strong { color: #1F7FA6; }
.bmc-calc-list .bmc-calc-ic { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; font-size: 13px; }
.bmc-calc-list .bmc-calc-txt strong { font-size: 16px; }
.bmc-calc-list .bmc-calc-txt span { display: block; font-size: 13px; margin-top: 1px; }

/* Formulas (code blocks in posts): a readable formula card, not a monospace terminal. */
.bmc-prose pre.wp-block-code, .bmc-prose pre {
	margin: 20px 0; padding: 18px 20px; border: 1px solid #D6ECF6; border-radius: 14px; background: #F0F8FC;
	white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--contrast);
}
.bmc-prose pre code {
	font-family: var(--wp--preset--font-family--body, Inter, sans-serif); font-size: inherit; font-weight: 500;
	background: none; padding: 0; color: inherit;
}
/* Bold inside a formula is the answer or the term being defined: full size, just bolder and blue. */
.bmc-prose pre strong { font-size: inherit; font-weight: 800; letter-spacing: 0; text-transform: none; color: #1F7FA6; }

/* TT4's asterisk heading style sat on the card's top edge: it becomes the same brand bar as
   every other section heading (below). */
.bmc-prose h2.is-style-asterisk::before {
	content: "" !important; display: block !important; width: 48px !important; height: 5px !important;
	-webkit-mask: none !important; mask: none !important; clip-path: none !important; /* TT4 cuts the asterisk with clip-path */
	background: #3BADD6 !important; border-radius: 3px;
	margin: 0 0 14px !important;
}
.bmc-prose h2.is-style-asterisk.has-text-align-center::before { margin: 0 auto 14px !important; }
.bmc-prose :not(pre) > code { font-size: .9em; padding: 2px 6px; border-radius: 6px; background: var(--wp--preset--color--base); }

/* GTM's fixed top adhesion ad: keep it off the header (height measured in functions.php). */
.wp-site-blocks { padding-top: var(--bmc-adhesion-top, 0px); }
/* Let the bar grow to the creative (the old CSS fixes it at 60px; leaderboards are 90px), and
   sit it under the admin bar when logged in, which otherwise covers its top 32px. */
.adsense-manual-adhesion-top { height: auto !important; min-height: 60px; padding-bottom: 6px; box-sizing: border-box; }
.admin-bar .adsense-manual-adhesion-top { top: 32px !important; }
@media (max-width: 782px) { .admin-bar .adsense-manual-adhesion-top { top: 46px !important; } }

/* ---- comments: core blocks, threaded ---- */
.bmc-comments .wp-block-comments-title { margin-top: 0; font-size: 1.5rem; }
.bmc-comments ol.wp-block-comment-template { list-style: none; margin: 0; padding: 0; }
.bmc-comments ol.wp-block-comment-template li { margin: 0 0 20px; }
.bmc-comments ol.children, .bmc-comments ol ol {
	list-style: none; margin: 16px 0 0 6px; padding: 0 0 0 14px;
	border-left: 2px solid var(--wp--preset--color--contrast-3);
}
@media (min-width: 782px) { .bmc-comments ol.children { margin-left: 20px; padding-left: 20px; } }
.bmc-comment { gap: 12px; }
.bmc-comment .wp-block-avatar img { border-radius: 999px; }
.bmc-comment-body { flex: 1; min-width: 0; }
.bmc-comment-head { gap: 4px 10px; align-items: baseline; }
.bmc-comment-head .wp-block-comment-author-name { font-weight: 700; font-size: 15px; }
.bmc-comment-head .wp-block-comment-author-name a { color: inherit; text-decoration: none; }
.bmc-comment-head .wp-block-comment-date { font-size: 13px; color: var(--wp--preset--color--muted); }
.bmc-comment-head .wp-block-comment-date a { color: inherit; text-decoration: none; }
.bmc-comment .wp-block-comment-content { margin: 4px 0 8px; font-size: 16px; line-height: 1.6; }
.bmc-comment .wp-block-comment-content p { margin: 0 0 8px; }
.bmc-comment-actions { gap: 10px; }
.bmc-comment-actions a {
	display: inline-block; font-size: 13px; font-weight: 600; text-decoration: none;
	padding: 5px 12px; border-radius: 999px; background: var(--wp--preset--color--tint); color: var(--wp--preset--color--action);
}
/* "Author" tag on replies by the post author. */
.bmc-comments .bypostauthor > .bmc-comment .wp-block-comment-author-name::after {
	content: "Author"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px;
	font-size: 11px; font-weight: 700; background: var(--wp--preset--color--tint); color: var(--wp--preset--color--action);
}
.bmc-comments .comment-respond { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--contrast-3); }
.bmc-comments .comment-reply-title { font-size: 1.1875rem; margin: 0 0 12px; }
.bmc-comments .comment-form { display: flex; flex-direction: column; gap: 12px; }
.bmc-comments .comment-form p { margin: 0; }
.bmc-comments .comment-form label { display: block; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--contrast-2); margin-bottom: 6px; }
.bmc-comments .comment-form input[type="text"], .bmc-comments .comment-form input[type="email"],
.bmc-comments .comment-form input[type="url"], .bmc-comments .comment-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base); border: 1.5px solid transparent; border-radius: 12px; padding: 12px 14px;
}
.bmc-comments .comment-form input:focus, .bmc-comments .comment-form textarea:focus { outline: none; border-color: var(--wp--preset--color--action); background: #fff; }
.bmc-comments .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; }
.bmc-comments .comment-form-cookies-consent label { font-weight: 400; margin: 0; }
.bmc-comments .form-submit .submit, .bmc-comments .wp-block-button__link {
	border: 0; border-radius: 999px; min-height: 48px; padding: 0 24px; cursor: pointer;
	background: var(--wp--preset--color--button); color: #fff; font: inherit; font-weight: 600;
}

/* ---- search ---- */
.bmc-searchform .wp-block-search__input { border-radius: 12px; border: 1.5px solid var(--wp--preset--color--contrast-3); padding: 10px 14px; font-size: 16px; }
.bmc-searchform .wp-block-search__button { border-radius: 999px; }

/* ------------------------------------------------------------------------
 * The old hand-coded calculators (until each moves to the plugin): restyled to
 * match the plugin's cards. Their own <style> blocks sit in post content and
 * some use !important, hence the specificity and !important here.
 * --------------------------------------------------------------------- */
.bmc-sections .calculator {
	max-width: none !important; width: 100% !important; margin: 0 0 20px !important; padding: 22px !important;
	background: #fff !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .05) !important;
	font-size: 16px; line-height: 1.4; box-sizing: border-box;
}
.bmc-sections .calculator label { display: block; font-size: 14px !important; font-weight: 600 !important; color: #3A3A3C !important; margin: 14px 0 6px !important; }
.bmc-sections .calculator #gender, .bmc-sections .calculator .date-inputs { display: flex !important; gap: 8px; margin: 0 !important; }
.bmc-sections .calculator #gender label { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 0 0 !important; font-weight: 500 !important; color: #1C1C1E !important; }
.bmc-sections .calculator input[type="number"], .bmc-sections .calculator input[type="text"], .bmc-sections .calculator select {
	width: 100% !important; box-sizing: border-box; height: 48px; margin: 0 !important; padding: 0 14px !important;
	border: 0 !important; border-radius: 12px !important; background: #F2F2F7 !important; color: #1C1C1E !important;
	font: inherit; font-size: 17px !important; appearance: auto;
}
.bmc-sections .calculator .date-inputs select { flex: 1; min-width: 0; }
.bmc-sections .calculator input::placeholder { color: #C7C7CC; }
.bmc-sections .calculator input:focus, .bmc-sections .calculator select:focus { outline: 2px solid #3BADD6; outline-offset: 0; }
/* Imperial / Metric: two buttons that read as a segmented control */
.bmc-sections .calculator button.imperial, .bmc-sections .calculator button.metric {
	display: inline-flex !important; align-items: center; justify-content: center; width: calc(50% - 8px) !important; height: 40px; margin: 0 0 4px !important; vertical-align: top;
	border: 0 !important; border-radius: 10px !important; background: #36ACE2 !important; color: #fff !important;
	font: inherit; font-size: 15px !important; font-weight: 600 !important; cursor: pointer;
}
.bmc-sections .calculator button.imperial + button.metric { margin-left: 4px !important; }
.bmc-sections .calculator button.inactive { background: #F2F2F7 !important; color: #8E8E93 !important; }
/* Calculate button (link or button; GTM targets #calculateButton, so only looks change) */
.bmc-sections .calculator a.button, .bmc-sections .calculator #calculateButton, .bmc-sections .calculator button[type="submit"] {
	display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 52px; box-sizing: border-box;
	margin: 20px 0 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 14px !important;
	background: #36ACE2 !important; color: #fff !important; font: inherit; font-size: 17px !important; font-weight: 600 !important;
	text-decoration: none !important; cursor: pointer; box-shadow: none !important;
}
.bmc-sections .calculator a.button:hover, .bmc-sections .calculator #calculateButton:hover { background: #2593BC !important; }

/* Old results output */
.bmc-sections #result:not(:empty), .bmc-sections .results:not([style*="none"]) {
	max-width: none; width: 100%; margin: 0 0 20px !important; padding: 22px !important; box-sizing: border-box;
	background: #fff !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .05) !important;
	text-align: left; font-size: 16px; line-height: 1.55;
}
.bmc-sections #result p.bigResult, .bmc-sections .results h2, .bmc-sections .congratulations h2 {
	margin: 0 0 10px !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1.15; color: #1C1C1E !important; text-align: left !important;
}
.bmc-sections #result p.resultAmount { margin: 4px 0 !important; font-size: 40px !important; font-weight: 800 !important; color: #1F7FA6 !important; }
.bmc-sections #result p.result, .bmc-sections .congratulations p { font-size: 16px !important; color: #3A3A3C !important; text-align: left !important; font-style: normal !important; margin: 12px 0 0 !important; }
.bmc-sections .congratulations p strong { color: #1F7FA6 !important; }
.bmc-sections #result p.note { font-size: 14px !important; color: #6E6E73 !important; margin: 14px 0 0 !important; font-style: normal !important; }
.bmc-sections #result .highlight-box, .bmc-sections .congratulations { background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; text-align: left !important; }
.bmc-sections #result .promo, .bmc-sections #result .product-box, .bmc-sections #result .bundle-box {
	margin: 16px 0 0 !important; padding: 14px 16px !important; border-radius: 14px !important; background: #F0F8FC !important; border: 1px solid #D6ECF6 !important;
}
.bmc-sections #result a.button { display: inline-flex !important; width: auto !important; min-height: 46px; padding: 0 20px !important; border-radius: 999px !important; background: #36ACE2 !important; color: #fff !important; text-decoration: none !important; font-weight: 600; }

.bmc-sections .results table, .bmc-sections #result table { width: 100% !important; max-width: 100%; table-layout: fixed; margin: 12px 0 0 !important; }
.bmc-sections .results th, .bmc-sections .results td, .bmc-sections #result th, .bmc-sections #result td { padding: 10px 12px !important; overflow-wrap: anywhere; }
.bmc-sections .results h2, .bmc-sections .results h3 { text-align: left !important; }
/* A second heading in a results box (e.g. ovulation's "Important Dates") needs air above it. */
.bmc-sections .results * + h2, .bmc-sections .results * + h3, .bmc-sections #result * + h2, .bmc-sections #result * + h3 { margin-top: 28px !important; }
.bmc-sections .results .wp-block-separator, .bmc-sections .results h2.is-style-asterisk::before { display: none; }

/* ---- [bmicruncher_app more="1"]: the app band with features, e.g. on About ---- */
.bmc-btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); white-space: normal; text-align: center; }
.bmc-btn--ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; }
.bmc-app-band-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.bmc-app-feats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.bmc-app-feats li { position: relative; padding-left: 28px; color: #D6E2EF; font-size: 15px; line-height: 1.5; }
.bmc-app-feats li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 99px; background: #3BADD6; color: #0B2A4F; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.bmc-app-feats strong { color: #fff; }
/* Inside a page/article card: break out a little, and undo prose rules. */
.bmc-prose .bmc-app-band { margin: 2em 0; }
.bmc-prose .bmc-app-band h2 { margin: 10px 0 !important; }
.bmc-prose .bmc-app-band a { text-decoration: none !important; }
.bmc-prose .bmc-app-band-stat { flex-basis: 220px; }
.bmc-prose .bmc-app-band--more .bmc-app-band-stat { display: none; } /* the list says it better at 760px */

/* ---- [bmicruncher_calculators] inside a page card: two columns of grey rows ---- */
.bmc-prose .bmc-calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin: 1em 0 1.5em; }
.bmc-prose .bmc-calc-tile {
	flex-direction: row !important; align-items: center !important; padding: 12px !important;
	background: #F2F2F7; box-shadow: none; text-decoration: none !important; line-height: 1.3;
}
.bmc-prose .bmc-calc-tile:hover { background: #E9EEF4; box-shadow: none; }
.bmc-prose .bmc-calc-txt strong { font-size: 15px; }
.bmc-prose .bmc-calc-txt span { display: none !important; }
@media (min-width: 600px) { .bmc-prose .bmc-calc-txt span { display: block !important; } }
.bmc-prose .bmc-calc-grid.bmc-calc-list { grid-template-columns: 1fr !important; gap: 0 !important; background: #F2F2F7; padding: 2px 16px; box-shadow: none; }
@media (min-width: 782px) { .bmc-prose .bmc-calc-grid.bmc-calc-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 28px !important; } }
.bmc-prose .bmc-calc-list .bmc-calc-tile { border-bottom-color: #E0E0E6; }
.bmc-prose .bmc-calc-list .bmc-calc-tile { background: none; padding: 12px 0 !important; }

/* ---- WPForms (contact): match the calculator forms ---- */
.wpforms-container.wpforms-container-full { margin: 1.25em 0 0 !important; }
.wpforms-container .wpforms-field { padding: 0 0 18px !important; }
.wpforms-container .wpforms-field-label { font-size: 14px !important; font-weight: 600 !important; color: #3A3A3C !important; margin: 0 0 6px !important; }
.wpforms-container .wpforms-required-label { color: #FF3B30 !important; }
.wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container textarea {
	box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: 50px !important;
	background: #F2F2F7 !important; border: 1.5px solid transparent !important; border-radius: 12px !important;
	padding: 0 14px !important; font: inherit !important; font-size: 17px !important; color: #1C1C1E !important; box-shadow: none !important;
}
.wpforms-container textarea { height: 160px !important; padding: 12px 14px !important; line-height: 1.5 !important; resize: vertical; }
.wpforms-container input:focus, .wpforms-container textarea:focus { border-color: #3BADD6 !important; background: #fff !important; outline: 0 !important; }
.wpforms-container .wpforms-submit-container { padding: 4px 0 0 !important; }
.wpforms-container button.wpforms-submit {
	width: 100% !important; min-height: 52px !important; height: auto !important; padding: 0 20px !important;
	border: 0 !important; border-radius: 14px !important; background: #36ACE2 !important; color: #fff !important;
	font: inherit !important; font-size: 17px !important; font-weight: 600 !important; box-shadow: none !important; cursor: pointer;
}
.wpforms-container button.wpforms-submit:hover { background: #2593BC !important; }
.wpforms-container label.wpforms-error, .wpforms-container em.wpforms-error { color: #FF3B30 !important; font-size: 13px !important; }
.wpforms-container .wpforms-field input.wpforms-error, .wpforms-container .wpforms-field textarea.wpforms-error { border-color: #FF3B30 !important; }
.wpforms-confirmation-container-full { background: #E8F8EC !important; border: 0 !important; border-radius: 12px !important; color: #1C1C1E !important; padding: 16px 18px !important; }

/* Article cards on mobile: the home page's `.bmc-section { padding: 0 … }` (same specificity,
   earlier) was zeroing the card's top/bottom padding below 782px. */
.bmc-card.bmc-section { padding: 26px 20px 24px; }
@media (min-width: 782px) { .bmc-card.bmc-section { padding: 32px 40px; } }

/* Section marker (replaces TT4's asterisk): a short brand bar above each card's heading. */
.bmc-card.bmc-section > h2:first-child::before {
	content: ""; display: block; width: 48px; height: 5px; border-radius: 3px;
	background: #3BADD6; margin: 0 0 14px;
}
.bmc-card.bmc-section > h2.has-text-align-center:first-child::before { margin: 0 auto 14px; }

/* The old results pages' "‹ Run Again" (#calculateButton outside the calculator box, and not the
   plugin's own #calculateButton, which keeps the #36ACE2 blue; GTM's
   click trigger, so only the look changes): a solid navy pill, centred, so it reads as the next step. */
.bmc-sections a#calculateButton.button:not(.calculator a):not(#result a):not(.bmic a) {
	display: flex !important; align-items: center; justify-content: center; gap: 6px;
	width: 100% !important; max-width: 340px; min-height: 52px; margin: 24px auto 16px !important; padding: 0 24px !important;
	background: #0B2A4F !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
	box-shadow: 0 4px 14px rgba(11, 42, 79, .25) !important; font-size: 17px !important; font-weight: 700 !important;
	text-decoration: none !important; box-sizing: border-box;
}
.bmc-sections a#calculateButton.button:not(.calculator a):not(#result a):not(.bmic a):hover { background: #173A64 !important; }

/* The header leaderboard (#top-leaderboard, filled by GTM/AdSense under the header): room above
   and below so it doesn't butt against the nav or the page. Empty slot = no gap. */
#top-leaderboard:not(:empty) { padding: 16px var(--bmc-gutter) 8px; box-sizing: border-box; }
#top-leaderboard:not(:empty) + * { margin-top: 8px; }

/* Signup page template (templates/page-signup.html): logo only, centred column. */
.bmc-signup { padding: 28px var(--bmc-gutter) 48px; }
.bmc-signup-brand { display: flex; justify-content: center; margin: 0 auto 28px; }
.bmc-signup .wp-block-post-content > p:empty { display: none; }

/* .bmc-header carries has-base-background-color only so Publift's hideSelector matches (see
   patterns/header.php); base is the grey page colour, so keep the header white. */
.bmc-header.has-base-background-color { background-color: #fff !important; }
/* Publift's top sticky ad ships with z-index 0, so header text could show through it. If it's
   ever on screen with the header, the ad sits fully on top instead of mixing with the nav. */
.publift-widget-sticky_header-container { z-index: 1000 !important; }