/**
 * Modivio design system — shared CSS custom properties and utilities.
 *
 * Implementation constraints (must respect):
 * - At most 3 major card visual styles (see Cards section).
 * - No CSS gradients unless explicitly specified for a feature.
 * - At most two accent colors per section (CTA orange and/or science blue/teal).
 * - No animation that conveys scientific meaning.
 * - Motion is subtle and disabled under prefers-reduced-motion.
 * - Content and navigation must remain readable/usable without JavaScript.
 * - Meaningful alt text on images; keyboard-accessible controls.
 */

/* -------------------------------------------------------------------------- */
/* Brand CSS variables (aliases to theme.json presets where possible)         */
/* -------------------------------------------------------------------------- */

:root {
	/* Named brand colors — use these in custom CSS; prefer presets in blocks */
	--color-charcoal: var(--wp--preset--color--contrast, #252525);
	--color-blue: var(--wp--preset--color--science, #176b82);
	--color-teal: var(--wp--preset--color--science-teal, #249fa8);
	--color-green: var(--wp--preset--color--life, #8bc53f);
	--color-orange: var(--wp--preset--color--action, #f47a22);
	--color-off-white: var(--wp--preset--color--base-alt, #f6f8f7);
	--color-white: var(--wp--preset--color--base, #ffffff);
	--color-text: var(--wp--preset--color--contrast-muted, #333333);
	--color-muted: var(--wp--preset--color--muted, #6b7280);

	/* Semantic aliases */
	--color-bg: var(--color-white);
	--color-bg-alt: var(--color-off-white);
	--color-surface-dark: var(--color-charcoal);
	--color-surface-science: var(--color-blue);
	--color-cta: var(--color-orange);
	--color-accent-life: var(--color-green);
	--color-border: color-mix(in srgb, var(--color-charcoal) 12%, transparent);
	--color-border-strong: color-mix(in srgb, var(--color-charcoal) 22%, transparent);
	--color-focus: var(--color-blue);

	/* Layout */
	--layout-content-max: var(--wp--custom--content-max, 1240px);
	--layout-content-narrow: 720px;
	--layout-gutter: clamp(1rem, 4vw, 2rem);
	--layout-section-space: var(--wp--custom--section-space, clamp(4rem, 8vw, 8rem));

	/* Shape */
	--radius: var(--wp--custom--radius, 8px);
	--border-subtle: var(--wp--custom--border-subtle, 1px solid var(--color-border));
	--border-on-dark: var(--wp--custom--border-on-dark, 1px solid color-mix(in srgb, var(--color-white) 16%, transparent));

	/* Motion — restrained */
	--transition: var(--wp--custom--transition, 150ms ease);

	/* Type helpers */
	--font-sans: var(--wp--preset--font-family--ibm-plex-sans, "IBM Plex Sans", system-ui, sans-serif);
	--leading-body: 1.65;
	--leading-heading: 1.2;
}

/* -------------------------------------------------------------------------- */
/* Base refinements (beyond what theme.json can express)                      */
/* -------------------------------------------------------------------------- */

html {
	/* Motion optional: no smooth-scroll by default */
	scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Skip link — accessibility (keyboard) */
.modivio-skip-link {
	position: absolute;
	left: var(--layout-gutter);
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--color-charcoal);
	color: var(--color-white);
	border-radius: var(--radius);
	transform: translateY(-120%);
	transition: transform var(--transition);
}

.modivio-skip-link:focus,
.modivio-skip-link:focus-visible {
	transform: translateY(0.5rem);
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.wp-block-button__link:focus,
.wp-block-navigation-item a:focus {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Buttons — primary (CTA orange), secondary (science), outline               */
/* -------------------------------------------------------------------------- */

.wp-block-button__link {
	transition:
		background-color var(--transition),
		border-color var(--transition),
		color var(--transition);
}

/* Primary CTA: charcoal on brand orange — ~5.6:1, keeps #F47A22 */
.wp-block-button:not(.is-style-outline):not(.is-style-modivio-secondary) .wp-block-button__link {
	color: var(--color-charcoal) !important;
}

/* Secondary: science blue fill */
.wp-block-button.is-style-modivio-secondary .wp-block-button__link,
.modivio-button-secondary {
	background-color: var(--color-blue) !important;
	border-color: var(--color-blue) !important;
	color: var(--color-white) !important;
}

.wp-block-button.is-style-modivio-secondary .wp-block-button__link:hover,
.modivio-button-secondary:hover {
	background-color: color-mix(in srgb, var(--color-blue) 88%, var(--color-charcoal)) !important;
	border-color: color-mix(in srgb, var(--color-blue) 88%, var(--color-charcoal)) !important;
}

/* Outline on light surfaces */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	border-color: var(--color-blue) !important;
	color: var(--color-blue) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--color-blue) 8%, transparent) !important;
}

/* Outline on dark panels */
.modivio-panel-dark .wp-block-button.is-style-outline .wp-block-button__link,
.modivio-panel-science .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--color-white) !important;
	color: var(--color-white) !important;
}

.modivio-panel-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.modivio-panel-science .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--color-white) 10%, transparent) !important;
}

/* -------------------------------------------------------------------------- */
/* Section / surface utilities — apply via additional CSS class on Group      */
/* -------------------------------------------------------------------------- */

.modivio-section {
	padding-block: var(--layout-section-space);
}

.modivio-section--compact {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.modivio-panel-alt,
.is-style-modivio-panel-alt {
	background-color: var(--color-off-white);
	color: var(--color-text);
}

.modivio-panel-dark,
.is-style-modivio-panel-dark {
	background-color: var(--color-charcoal);
	color: var(--color-white);
}

.modivio-panel-dark h1,
.modivio-panel-dark h2,
.modivio-panel-dark h3,
.modivio-panel-dark h4,
.modivio-panel-dark h5,
.modivio-panel-dark .wp-block-heading,
.is-style-modivio-panel-dark h1,
.is-style-modivio-panel-dark h2,
.is-style-modivio-panel-dark h3,
.is-style-modivio-panel-dark h4,
.is-style-modivio-panel-dark h5,
.is-style-modivio-panel-dark .wp-block-heading {
	color: var(--color-white);
}

.modivio-panel-dark p,
.modivio-panel-dark figcaption,
.modivio-panel-dark .has-muted-color,
.is-style-modivio-panel-dark p,
.is-style-modivio-panel-dark figcaption {
	color: color-mix(in srgb, var(--color-white) 78%, transparent);
}

.modivio-panel-science,
.is-style-modivio-panel-science {
	background-color: var(--color-blue);
	color: var(--color-white);
}

.modivio-panel-science h1,
.modivio-panel-science h2,
.modivio-panel-science h3,
.modivio-panel-science h4,
.modivio-panel-science .wp-block-heading,
.is-style-modivio-panel-science h1,
.is-style-modivio-panel-science h2,
.is-style-modivio-panel-science h3,
.is-style-modivio-panel-science h4,
.is-style-modivio-panel-science .wp-block-heading {
	color: var(--color-white);
}

.modivio-panel-teal {
	background-color: var(--color-teal);
	color: var(--color-white);
}

/* Thin technical rule (prefer over shadows) */
.modivio-rule {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin-block: var(--wp--preset--spacing--50, 2rem);
}

.modivio-rule--on-dark {
	border-top-color: color-mix(in srgb, var(--color-white) 16%, transparent);
}

/* -------------------------------------------------------------------------- */
/* Scientific imagery — evidence, not decoration                              */
/* -------------------------------------------------------------------------- */

.modivio-evidence,
.modivio-evidence img,
.wp-block-image.modivio-evidence img,
.wp-block-image.is-style-modivio-evidence img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	background-color: #000;
}

.modivio-evidence-frame {
	background-color: #000;
	border: var(--border-on-dark);
	border-radius: var(--radius);
	overflow: hidden;
	padding: 0;
}

.modivio-evidence-frame--light,
.modivio-evidence--light img {
	background-color: var(--color-white);
}

.modivio-evidence-frame--light {
	border: 1px solid var(--color-border);
	background-color: var(--color-white);
}

.modivio-evidence-frame img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.modivio-panel-dark .modivio-evidence-frame--light .modivio-evidence-caption,
.modivio-panel-dark .modivio-evidence-frame--light figcaption {
	color: var(--color-muted);
	background: var(--color-white);
	padding: 0.75rem 1rem;
	margin: 0;
}

.modivio-evidence-caption,
.modivio-evidence + figcaption,
.modivio-evidence-frame + figcaption {
	color: var(--color-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	margin-top: 0.75rem;
}

.modivio-panel-dark .modivio-evidence-caption,
.modivio-panel-dark figcaption {
	color: color-mix(in srgb, var(--color-white) 65%, transparent);
}

/* -------------------------------------------------------------------------- */
/* Cards — MAXIMUM 3 major visual styles (do not add more without review)     */
/* 1. .modivio-card              standard content card                        */
/* 2. .modivio-card--on-dark     content card on charcoal/science panels      */
/* 3. .modivio-evidence-frame    scientific figure frame (not a marketing card)*/
/* -------------------------------------------------------------------------- */

.modivio-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--wp--preset--spacing--40, 1.5rem);
	box-shadow: none;
	/* Subtle, optional UI feedback — not scientific meaning */
	transition: border-color var(--transition);
}

@media (hover: hover) {
	.modivio-card:hover {
		border-color: var(--color-border-strong);
	}
}

.modivio-card:focus-within {
	border-color: var(--color-blue);
}

.modivio-card h3,
.modivio-card .wp-block-heading {
	margin-top: 0;
}

.modivio-panel-alt .modivio-card {
	background-color: var(--color-white);
}

/* Style 2: readable card on dark panels (max 2 accents: white text + teal link) */
.modivio-card--on-dark,
.is-style-modivio-panel-dark .modivio-card--on-dark {
	background-color: color-mix(in srgb, var(--color-white) 6%, transparent);
	border-color: color-mix(in srgb, var(--color-white) 18%, transparent);
	color: var(--color-white);
}

.modivio-card--on-dark h3,
.modivio-card--on-dark .wp-block-heading,
.modivio-card--on-dark a {
	color: var(--color-white);
}

/* Accent utilities — use at most ONE of these per section besides neutrals */
.modivio-accent-life {
	color: var(--color-green);
}

.modivio-accent-bar {
	display: block;
	width: 2.5rem;
	height: 2px;
	background-color: var(--color-teal);
	border: 0;
	margin: 0 0 1rem;
}

.modivio-panel-dark .modivio-accent-bar {
	background-color: var(--color-teal);
}

/* -------------------------------------------------------------------------- */
/* Tables (radiotracer etc.)                                                  */
/* -------------------------------------------------------------------------- */

.modivio-table,
.wp-block-table.modivio-table table,
.wp-block-table.is-style-modivio-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table.modivio-table td,
.wp-block-table.modivio-table th,
.wp-block-table.is-style-modivio-table td,
.wp-block-table.is-style-modivio-table th,
.modivio-table td,
.modivio-table th {
	border: 1px solid var(--color-border);
	padding: 0.75rem 1rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table.modivio-table thead th,
.wp-block-table.is-style-modivio-table thead th,
.modivio-table thead th {
	background-color: var(--color-off-white);
	color: var(--color-charcoal);
	font-weight: 600;
}

.wp-block-table.modivio-table tbody tr:nth-child(even) td,
.wp-block-table.is-style-modivio-table tbody tr:nth-child(even) td {
	background-color: color-mix(in srgb, var(--color-off-white) 55%, transparent);
}

@media (max-width: 781px) {
	.wp-block-table.modivio-table,
	.wp-block-table.is-style-modivio-table {
		display: block;
		width: 100%;
		overflow-x: auto;
	}

	.wp-block-table.modivio-table table,
	.wp-block-table.is-style-modivio-table table,
	.modivio-table table {
		width: max-content;
		min-width: 36rem;
	}
}

/* -------------------------------------------------------------------------- */
/* Forms (Contact Form 7) — institutional, calm                               */
/* -------------------------------------------------------------------------- */

.wpcf7 form {
	max-width: 40rem;
}

.wpcf7 label {
	display: block;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	font-weight: 500;
	color: var(--color-charcoal);
	margin-bottom: 0.35rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	background-color: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--transition);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border-color: var(--color-blue);
	outline: 2px solid color-mix(in srgb, var(--color-blue) 35%, transparent);
	outline-offset: 1px;
}

.wpcf7 textarea {
	min-height: 10rem;
	resize: vertical;
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	background-color: var(--color-orange);
	border: 1px solid var(--color-orange);
	border-radius: var(--radius);
	color: var(--color-charcoal);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 600;
	padding: 0.875rem 1.5rem;
	cursor: pointer;
	box-shadow: none;
	transition: background-color var(--transition), border-color var(--transition);
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	background-color: color-mix(in srgb, var(--color-orange) 88%, var(--color-charcoal));
	border-color: color-mix(in srgb, var(--color-orange) 88%, var(--color-charcoal));
}

.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
	border-radius: var(--radius);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

/* -------------------------------------------------------------------------- */
/* Header / footer scaffolding helpers                                        */
/* -------------------------------------------------------------------------- */

.modivio-site-header {
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-white);
}

.modivio-site-header__inner {
	max-width: var(--layout-content-max);
	margin-inline: auto;
	padding-block: 1rem;
	padding-inline: var(--layout-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.modivio-site-header .wp-block-navigation {
	gap: 0.25rem 1.25rem;
}

/*
 * Navigation without JavaScript:
 * - overlayMenu is "never" in the header template (no hamburger JS dependency)
 * - Submenus open via :hover and :focus-within (keyboard accessible)
 * - All service URLs also appear on /services/ as a non-JS fallback
 */
.modivio-site-header .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
	display: none;
	position: absolute;
	z-index: 100;
	min-width: 16rem;
	padding: 0.5rem 0;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: none;
}

.modivio-site-header .wp-block-navigation .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.modivio-site-header .wp-block-navigation .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
	display: block;
}

.modivio-site-header .wp-block-navigation .wp-block-navigation-submenu {
	position: relative;
}

.modivio-site-header .wp-block-navigation .wp-block-navigation-item a {
	text-decoration: none;
}

.modivio-site-header .modivio-cta-discuss .wp-block-button__link {
	white-space: nowrap;
}

.modivio-hero .modivio-evidence-frame {
	margin: 0;
}

/* Hero accents: science blue (secondary) + orange (CTA) only — no third accent */
.modivio-hero .is-style-modivio-secondary .wp-block-button__link {
	background-color: var(--color-blue) !important;
	border-color: var(--color-blue) !important;
}

@media (max-width: 900px) {
	.modivio-site-header .wp-block-buttons {
		width: 100%;
	}

	.modivio-site-header .modivio-cta-discuss,
	.modivio-site-header .modivio-cta-discuss .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 781px) {
	.modivio-site-header__inner {
		align-items: flex-start;
	}
}

@media (max-width: 600px) {
	/*
	 * Core Navigation keeps submenus visibility:hidden / opacity:0.
	 * Reveal them without JavaScript on phones. Tablets keep :hover / :focus-within.
	 */
	.modivio-site-header .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation__submenu-container,
	.modivio-site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		position: static !important;
		left: auto !important;
		clip: auto !important;
		clip-path: none !important;
		pointer-events: auto !important;
		border: 0;
		padding-left: 0.75rem;
		min-width: 0;
		width: auto;
	}
}

@media (max-width: 1100px) and (min-width: 782px) {
	.modivio-services-grid .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.modivio-services-grid .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
	}
}

.modivio-site-logo img {
	display: block;
	height: 48px;
	width: auto;
}

.modivio-site-footer {
	background-color: var(--color-charcoal);
	color: color-mix(in srgb, var(--color-white) 82%, transparent);
	padding-block: var(--wp--preset--spacing--70, 4rem);
	border-top: none;
}

.modivio-site-footer .wp-block-heading {
	font-size: var(--wp--preset--font-size--large, 1.375rem);
}

.modivio-site-footer a {
	color: var(--color-white);
	text-decoration: none;
}

.modivio-site-footer a:hover,
.modivio-site-footer a:focus {
	color: var(--color-teal);
	text-decoration: underline;
}

.modivio-site-footer__inner {
	max-width: var(--layout-content-max);
	margin-inline: auto;
	padding-inline: var(--layout-gutter);
}

/* -------------------------------------------------------------------------- */
/* Publication / meta helpers                                                 */
/* -------------------------------------------------------------------------- */

.modivio-meta {
	color: var(--color-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.5;
}

.modivio-meta a {
	color: var(--color-blue);
}

/* Scientific record — bibliography, not a blog card */
.modivio-pub-list {
	max-width: 45rem;
}

.modivio-pub-record {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--color-border);
}

.modivio-pub-record:first-of-type {
	padding-top: 0.5rem;
}

.modivio-pub-record__year {
	margin: 0 0 0.75rem;
	color: var(--color-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.modivio-pub-record__title {
	margin: 0 0 0.85rem;
	font-size: var(--wp--preset--font-size--large, 1.375rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--color-charcoal);
}

.modivio-pub-record__authors,
.modivio-pub-record__journal,
.modivio-pub-record__area,
.modivio-pub-record__links {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.55;
}

.modivio-pub-record__authors {
	color: var(--color-text);
}

.modivio-pub-record__journal cite {
	font-style: italic;
	color: var(--color-charcoal);
}

.modivio-pub-record__area {
	color: var(--color-muted);
}

.modivio-pub-record__links {
	margin-top: 0.65rem;
}

.modivio-pub-record__links a {
	color: var(--color-blue);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.modivio-pub-record__sep {
	color: var(--color-muted);
}

.modivio-pub-record__figure {
	margin: 1.25rem 0 0;
	max-width: 28rem;
}

.modivio-pub-more {
	margin: 2rem 0 0;
	color: var(--color-muted);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	font-style: italic;
}

/* -------------------------------------------------------------------------- */
/* Utility: max-width wrappers (if needed outside block layout)               */
/* -------------------------------------------------------------------------- */

.modivio-container {
	width: min(100% - (2 * var(--layout-gutter)), var(--layout-content-max));
	margin-inline: auto;
}

.modivio-container--narrow {
	width: min(100% - (2 * var(--layout-gutter)), var(--layout-content-narrow));
	margin-inline: auto;
}