/**
 * SmartHealthCompass front-end design system.
 *
 * Direction: "field instrument". The brand mark is a compass and the content
 * is research literature, so the site is set like a reference document made by
 * someone who reads papers — calibrated, quiet, and unafraid of uncertainty.
 * Deliberately not the wellness look (no leaf motifs, no soft gradients) and
 * not the affiliate look (no star ratings, no traffic-light badges).
 *
 * Three rules this file holds itself to:
 *
 * 1. Green is never decoration. #2E7D32 and #B9E6A3 appear only inside the
 *    Evidence Line's own furniture. A green badge next to "Limited" would read
 *    as endorsement, and the editorial scale has no positive/negative axis.
 * 2. Teal is links, and only links. Anything teal is clickable.
 * 3. The caveat is set at the same size as the claim. The Evidence Line's note
 *    is body-size, not fine print. That is the whole argument of the site
 *    expressed as a type decision.
 *
 * Loaded sitewide by Design\Module (unlike shc-widgets.css, which is
 * widget-scoped) because the palette, type scale and reading measure apply to
 * every page.
 */

/* ---------------------------------------------------------------------------
   Fonts
   Global styles already declares Poppins 600/700 and Source Sans 3 400/600.
   The italic is declared here because long-form editorial prose uses emphasis
   constantly, and without a real italic the browser synthesises a slanted
   roman, which is visibly worse at reading sizes.
--------------------------------------------------------------------------- */

@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3/source-sans-3-400-italic.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   Tokens
   Self-contained: shc-tokens.css is only enqueued on the SHC CPT singulars,
   so this file cannot assume it is present. Hex values are the same brand
   palette, kept in sync by hand.
--------------------------------------------------------------------------- */

:root {
	--shc-ink: #0D1B2A;
	--shc-paper: #F5F7F8;
	--shc-surface: #FFFFFF;
	--shc-rule: #DCE3E7;
	--shc-mute: #56697A;
	--shc-signal: #2E7D32;
	--shc-signal-light: #B9E6A3;
	--shc-bearing: #0097A7;

	--shc-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--shc-font-text: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--shc-font-utility: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	--shc-measure: 68ch;
}

/* ---------------------------------------------------------------------------
   Page canvas
   Pure white over a 2,000-word article is harsh; this paper is the brand navy
   at very low saturation rather than an imported cream, so the page and the
   logo belong to the same family.
--------------------------------------------------------------------------- */

body {
	background-color: var(--shc-paper);
	color: var(--shc-ink);
	font-family: var(--shc-font-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   Type scale
   Poppins is a geometric face and defaults to looking loose and generic at
   display sizes. Negative tracking and tight leading are what make it read as
   a deliberate masthead rather than a theme default.
--------------------------------------------------------------------------- */

.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4 {
	font-family: var(--shc-font-display);
	color: var(--shc-ink);
	text-wrap: balance;
}

.wp-site-blocks h1 {
	font-size: clamp(2.15rem, 1.5rem + 2.4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.028em;
	margin-bottom: 0.6em;
}

.wp-site-blocks h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.018em;
	margin-top: 2.4em;
	margin-bottom: 0.65em;
}

.wp-site-blocks h3 {
	font-size: clamp(1.18rem, 1.05rem + 0.4vw, 1.35rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin-top: 2em;
	margin-bottom: 0.5em;
}

/* :where() keeps this at single-class specificity (0,1,0) so it sets the
 * baseline for prose without outranking the component rules further down.
 * Written as `.wp-site-blocks p` it was (0,1,1) and silently won against
 * `.shc-evidence__badge` (0,1,0) — which is how the Evidence Line's headline
 * shipped at 17px body size instead of the 24–34px the clamp asks for. */
.wp-site-blocks :where(p, li) {
	font-family: var(--shc-font-text);
	font-size: 1.115rem;
	line-height: 1.72;
}

.wp-site-blocks :where(p) {
	margin-bottom: 1.35em;
}

/* Long-form reading measure. Even where the layout container is wider, prose
   stops at ~68 characters — past that the eye loses the line return. */
.shc-article .wp-block-post-content > p,
.shc-article .wp-block-post-content > ul,
.shc-article .wp-block-post-content > ol,
.shc-article .wp-block-post-content > h2,
.shc-article .wp-block-post-content > h3,
.shc-article .wp-block-post-content > blockquote {
	max-width: var(--shc-measure);
}

.wp-site-blocks strong {
	font-weight: 600;
	color: var(--shc-ink);
}

/* ---------------------------------------------------------------------------
   Links — teal, and nothing else is teal.
--------------------------------------------------------------------------- */

.wp-site-blocks a:where(:not(.wp-element-button):not(.wp-block-site-logo a)) {
	color: var(--shc-bearing);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--shc-bearing) 45%, transparent);
	transition: text-decoration-color 120ms ease, color 120ms ease;
}

.wp-site-blocks a:where(:not(.wp-element-button)):hover {
	color: var(--shc-signal);
	text-decoration-color: currentColor;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--shc-bearing);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   Utility lettering — the instrument layer.
   System monospace: zero bytes over the wire, available everywhere, and the
   texture that separates measured data from prose.
--------------------------------------------------------------------------- */

/* Doubled class selectors (0,2,0) so these survive any theme or global-styles
 * rule that sets a font-size on `p` at single-class specificity. Component
 * type must not be reset by prose defaults. */
.shc-eyebrow.shc-eyebrow,
.shc-meta.shc-meta,
.shc-evidence__label.shc-evidence__label {
	font-family: var(--shc-font-utility);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.5;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Article header
--------------------------------------------------------------------------- */

/* Deliberately NOT capped at the reading measure.
 *
 * The header sits directly under the post title, and the title is sized by
 * whatever template is rendering it. Capping this block at 68ch made it stop
 * short of the title's right edge on any theme whose content column is wider
 * than the measure — on the Elementor layout the title ran to 1140px while
 * the Evidence Line stopped at 587px, which reads as a mistake rather than as
 * a choice. Letting the block fill its container keeps the two edges flush
 * everywhere; the prose inside is what carries a measure, not the slab. */
.shc-articlehead {
	width: 100%;
	margin: 0 0 2.75rem;
}

.shc-articlehead .shc-eyebrow {
	margin-bottom: 0.85rem;
}

.shc-articlehead .shc-eyebrow a {
	color: var(--shc-bearing);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--shc-bearing) 35%, transparent);
	padding-bottom: 2px;
}

.shc-articlehead .shc-eyebrow a:hover {
	border-bottom-color: currentColor;
}

.shc-articlehead .shc-eyebrow span {
	color: var(--shc-rule);
	margin: 0 0.4em;
}

.shc-meta {
	color: var(--shc-mute);
	padding-top: 0.85rem;
	border-top: 1px solid var(--shc-rule);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
}

.shc-meta__item time {
	color: var(--shc-ink);
}

/* ---------------------------------------------------------------------------
   The Evidence Line — the signature element.
   A navy slab carrying the article's own approved rating. It is the first
   thing on the page because the site's editorial position is that the strength
   of the evidence is the finding, not a footnote to it.
--------------------------------------------------------------------------- */

.shc-evidence {
	margin: 1.75rem 0 0;
	padding: 1.5rem 1.6rem 1.6rem;
	background-color: var(--shc-ink);
	color: var(--shc-surface);
	border-radius: 3px;
}

.shc-evidence__label {
	color: var(--shc-signal-light);
	margin-bottom: 0.9rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid color-mix(in srgb, var(--shc-signal-light) 28%, transparent);
}

.shc-evidence .shc-evidence__badge {
	font-family: var(--shc-font-display);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--shc-surface);
}

/* Deliberately body-size, not fine print. See this file's header comment. */
.shc-evidence .shc-evidence__note {
	font-family: var(--shc-font-text);
	font-size: 1.06rem;
	line-height: 1.62;
	margin: 0.75rem 0 0;
	color: color-mix(in srgb, var(--shc-surface) 88%, var(--shc-ink));
	max-width: 60ch;
}

/* Framework, referral and terminology pieces review no supplement, so they
   carry no verdict. Quieter treatment marks that as a different *kind* of
   article, never as a worse one — which is also why no rating gets a colour
   the others don't have. */
.shc-evidence--none {
	background-color: transparent;
	color: var(--shc-ink);
	border: 1px solid var(--shc-rule);
	border-left: 3px solid var(--shc-mute);
}

.shc-evidence--none .shc-evidence__label {
	color: var(--shc-mute);
	border-bottom-color: var(--shc-rule);
}

/* No badge is rendered here — the label above already says there is no
   rating, so the qualifier carries the block alone and gets ink, not the
   muted grey that would make it read as fine print. */
.shc-evidence--none .shc-evidence__note {
	color: var(--shc-ink);
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Home — the health-goal index.
   Set as an index with hairline rules rather than cards: this is a directory
   of six routes into the site, and cards would add six boxes of chrome around
   information that is already a list.
--------------------------------------------------------------------------- */

.shc-home .wp-block-post-content ul {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	border-top: 1px solid var(--shc-rule);
}

.shc-home .wp-block-post-content ul li {
	border-bottom: 1px solid var(--shc-rule);
	padding: 1.05rem 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--shc-mute);
}

.shc-home .wp-block-post-content ul li a {
	font-family: var(--shc-font-display);
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: -0.012em;
	color: var(--shc-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--shc-signal-light);
	padding-bottom: 1px;
	margin-right: 0.15em;
}

.shc-home .wp-block-post-content ul li a:hover {
	color: var(--shc-signal);
	border-bottom-color: var(--shc-signal);
}

/* Deliberately NOT a two-column grid. The list items are a single run of text
   ("Sleep & Stress — magnesium, melatonin, ..."), so a grid would promote the
   em dash to the start of the second column and stretch the link's underline
   across the whole column. Flowing text with a weighted lead-in survives the
   markup as it actually is. */

/* ---------------------------------------------------------------------------
   Header and footer trim
--------------------------------------------------------------------------- */

.wp-block-template-part header .wp-block-navigation a {
	font-family: var(--shc-font-text);
	color: var(--shc-ink);
	text-decoration: none;
}

.wp-block-template-part header .wp-block-navigation a:hover {
	color: var(--shc-signal);
}

.wp-block-template-part footer a {
	text-decoration: none;
}

.wp-block-template-part footer a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* ---------------------------------------------------------------------------
   Small screens
--------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.wp-site-blocks p,
	.wp-site-blocks li {
		font-size: 1.06rem;
		line-height: 1.68;
	}

	.shc-evidence {
		padding: 1.25rem 1.15rem 1.35rem;
	}

	.shc-meta {
		gap: 0.3rem 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* Older browsers without color-mix() fall back to the solid colour rather
   than to `transparent`, which would drop the rules entirely. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.wp-site-blocks a:where(:not(.wp-element-button)) {
		text-decoration-color: var(--shc-bearing);
	}

	.shc-evidence__label {
		border-bottom-color: var(--shc-signal-light);
	}

	.shc-evidence__note {
		color: var(--shc-surface);
	}
}