/*
Theme Name: ImmuniFact
Theme URI: https://immunifact.eu
Author: ImmuniFact partnership (CDJ Territorial, Backslash, Udruga Zaželi)
Author URI: https://immunifact.eu
Description: A clean, modern, accessibility-first WordPress block theme (Full Site Editing) for the ImmuniFact Erasmus+ KA210-YOU cooperation project. Built with theme.json, HTML block templates and reusable patterns. Indigo/teal palette with a coral accent, fully editable in the Site Editor, Polylang-ready for FR/ES/HR, and tuned for WCAG 2.1 AA.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: immunifact
Tags: full-site-editing, block-patterns, accessibility-ready, translation-ready, custom-colors, custom-menu, blog, education, two-columns, block-styles, wide-blocks
*/

/*
 * Most styling lives in theme.json (presets, layout, block styles) so everything
 * stays editable in the Site Editor without touching code. This file only holds
 * a few progressive-enhancement rules that theme.json cannot express yet:
 * accessibility helpers (visible focus, skip link, screen-reader text) and a
 * couple of small responsive niceties.
 */

/* --- Accessibility: strong, visible keyboard focus on every interactive element --- */
:where(a, button, input, select, textarea, summary, .wp-block-button__link, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--coral-strong, #c9442b);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Fallback for browsers without :focus-visible */
:where(a, button, .wp-block-button__link):focus {
	outline: 3px solid var(--wp--preset--color--coral-strong, #c9442b);
	outline-offset: 2px;
}

/* --- Skip-to-content link: hidden until focused --- */
.skip-link.screen-reader-text {
	background-color: #fff;
	color: var(--wp--preset--color--indigo, #1f3a6e);
	display: block;
	font-weight: 700;
	left: 0;
	padding: 1rem 1.5rem;
	position: fixed;
	top: -100px;
	text-decoration: underline;
	z-index: 100000;
	transition: top 0.2s ease-in-out;
}

.skip-link.screen-reader-text:focus {
	top: 0;
	outline: 3px solid var(--wp--preset--color--coral-strong, #c9442b);
	outline-offset: -3px;
}

/* --- Screen-reader-only utility (matches WP core) --- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--indigo, #1f3a6e);
	display: block;
	height: auto;
	left: 5px;
	padding: 15px 23px 14px;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* --- Eyebrow / badge styling (the small pill above the hero H1) --- */
.is-style-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	line-height: 1.2;
	background-color: var(--wp--preset--color--indigo-light, #eef2fa);
	color: var(--wp--preset--color--indigo, #1f3a6e);
	padding: 0.4em 0.9em;
	border-radius: 999px;
}

/* --- Stat / "at a glance" number emphasis --- */
.is-style-stat-number {
	font-weight: 800;
	line-height: 1.05;
	color: var(--wp--preset--color--teal-dark, #12857a);
}

/* --- Cards: subtle lift, consistent rounding (purely cosmetic, still editable) --- */
.is-style-card {
	border-radius: 14px;
}

/* --- Footer partner logos: keep them tidy and aligned regardless of source size --- */
.immunifact-partner-logo img {
	max-height: 64px;
	max-width: 190px;
	width: auto;
	object-fit: contain;
}

/* --- Make sure images never overflow their column on small screens --- */
.wp-block-image img {
	height: auto;
}

/* --- Rounded, lifted section images (cosmetic; keeps image blocks clean & editable) --- */
.immunifact-rounded img {
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(31, 58, 110, 0.10);
}

/* --- "Project at a glance" facts list --- */
.immunifact-facts {
	margin: 0;
	border: 1px solid #e2e0d6;
	border-radius: 12px;
	overflow: hidden;
}

.immunifact-facts > div {
	display: grid;
	grid-template-columns: minmax(8rem, 32%) 1fr;
}

.immunifact-facts > div:nth-child(odd) {
	background-color: #f7f4ed;
}

.immunifact-facts dt {
	font-weight: 700;
	color: var(--wp--preset--color--indigo, #1f3a6e);
	padding: 0.85rem 1rem;
}

.immunifact-facts dd {
	margin: 0;
	padding: 0.85rem 1rem;
}

@media (max-width: 600px) {
	.immunifact-facts > div {
		grid-template-columns: 1fr;
	}
	.immunifact-facts dd {
		padding-top: 0;
	}
}

/* --- Header brand lockup --- */
.immunifact-brand {
	gap: 0.6rem;
}

/* --- Language switcher (placeholder; Polylang can replace the markup later) --- */
.immunifact-lang-switcher {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	font-weight: 600;
}

.immunifact-lang-switcher .immunifact-lang-current {
	color: var(--wp--preset--color--indigo, #1f3a6e);
	font-weight: 700;
	padding: 0.15em 0.5em;
	border-radius: 6px;
	background-color: var(--wp--preset--color--indigo-light, #eef2fa);
}

.immunifact-lang-switcher a {
	color: var(--wp--preset--color--indigo, #1f3a6e);
	text-decoration: none;
}

.immunifact-lang-switcher a:hover,
.immunifact-lang-switcher a:focus {
	text-decoration: underline;
	color: var(--wp--preset--color--coral-strong, #c9442b);
}

/* --- Result status badges (extend the eyebrow pill) --- */
.immunifact-status-soon {
	background-color: #fde7e2;
	color: var(--wp--preset--color--coral-strong, #c9442b);
}

.immunifact-status-progress {
	background-color: #d9f1ee;
	color: var(--wp--preset--color--teal-dark, #12857a);
}

/* --- Accessible contact form --- */
.immunifact-contact-form {
	margin-top: var(--wp--preset--spacing--20, 1rem);
}

.immunifact-form-note {
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	margin-bottom: 1.25rem;
}

.immunifact-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.immunifact-field label {
	font-weight: 600;
	color: var(--wp--preset--color--indigo, #1f3a6e);
}

.immunifact-optional {
	font-weight: 400;
	color: #5a6172;
}

.immunifact-field input[type="text"],
.immunifact-field input[type="email"],
.immunifact-field textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-size: var(--wp--preset--font-size--medium, 1.0625rem);
	font-family: inherit;
	color: var(--wp--preset--color--contrast, #1a2238);
	background-color: #fff;
	border: 2px solid #c4cbd8;
	border-radius: 10px;
}

.immunifact-field input:focus,
.immunifact-field textarea:focus {
	border-color: var(--wp--preset--color--indigo, #1f3a6e);
	outline: 3px solid var(--wp--preset--color--coral-strong, #c9442b);
	outline-offset: 1px;
}

.immunifact-consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
}

.immunifact-consent input {
	margin-top: 0.3rem;
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
}

.immunifact-consent label {
	font-weight: 400;
	color: var(--wp--preset--color--contrast, #1a2238);
}

.immunifact-submit {
	cursor: pointer;
	border: 0;
}

/* =========================================================================
   HOME PAGE DESIGN ENHANCEMENTS (v1.1.0)
   Decorative graphics use CSS + inline SVG only — no extra image files.
   ========================================================================= */

/* --- 1) HERO: hero.png as a full-width background with a light text scrim --- */
.immunifact-hero {
	position: relative;
	min-height: 540px;
	display: flex;
	align-items: center;
	background-color: var(--wp--preset--color--cream, #f7f4ed);
	/* Top layer: cream scrim that is strong on the left (text side) and fades
	   to clear on the right so the illustration's faces stay visible.
	   Bottom layer: the hero illustration anchored to the right. */
	/* Strong cream scrim held across the whole text column (left ~58%), fading
	   to clear on the right so the central faces stay visible. Keeping it strong
	   under the text guarantees AA contrast for the dark text regardless of the
	   illustration pixels beneath. */
	background-image:
		linear-gradient(
			92deg,
			rgba(247, 244, 237, 0.98) 0%,
			rgba(247, 244, 237, 0.96) 46%,
			rgba(247, 244, 237, 0.92) 54%,
			rgba(247, 244, 237, 0.78) 60%,
			rgba(247, 244, 237, 0.35) 73%,
			rgba(247, 244, 237, 0) 88%
		),
		url(assets/images/hero.png);
	background-repeat: no-repeat, no-repeat;
	background-position: center center, right center;
	background-size: cover, cover;
}

/* Pin the text block to the LEFT (over the lighter left side of the image),
   left-aligned. WordPress's constrained-layout rule centres children with
   `margin-left:auto !important; margin-right:auto !important`, so we must use
   !important here to win. The margin-left lines the column up with the left
   edge of the 1180px page band on wide screens — calc(50% - 590px) equals
   (content-box - 1180px) / 2 — and falls back to the normal page padding on
   narrower screens via max(). */
.immunifact-hero > .immunifact-hero-content {
	box-sizing: border-box;
	max-width: 600px;
	margin-left: max(var(--wp--preset--spacing--30, 1.5rem), calc(50% - 590px)) !important;
	margin-right: auto !important;
	text-align: left;
}

/* Tablet & mobile: drop the illustration, fall back to a simple tint so the
   text is always legible (below this width there isn't room for text + image),
   and let the text use the full content width at the normal page padding. */
@media (max-width: 960px) {
	.immunifact-hero {
		min-height: 0;
		background-image: linear-gradient(160deg, #f7f4ed 0%, #eef2fa 100%);
	}
	.immunifact-hero > .immunifact-hero-content {
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* --- Shared: gentle hover life on cards (disabled under reduced-motion below) --- */
.is-style-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-style-card:hover,
.is-style-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(31, 58, 110, 0.14);
}

/* --- Inline-SVG icon chips --- */
.immunifact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	margin-bottom: 0.85rem;
}

.immunifact-icon svg {
	width: 28px;
	height: 28px;
}

.immunifact-icon-indigo {
	background-color: rgba(31, 58, 110, 0.12);
	color: var(--wp--preset--color--indigo, #1f3a6e);
}

.immunifact-icon-teal {
	background-color: rgba(26, 168, 155, 0.16);
	color: var(--wp--preset--color--teal-dark, #12857a);
}

.immunifact-icon-coral {
	background-color: rgba(232, 89, 60, 0.14);
	color: var(--wp--preset--color--coral-strong, #c9442b);
}

/* --- 2) "What is" + "The challenge": colourful tints with soft brand blobs --- */
.immunifact-intro {
	background-color: var(--wp--preset--color--cream, #f7f4ed);
	background-image:
		radial-gradient(38rem 38rem at 6% -12%, rgba(26, 168, 155, 0.12), transparent 60%),
		radial-gradient(34rem 34rem at 100% 118%, rgba(232, 89, 60, 0.09), transparent 60%);
}

.immunifact-challenge {
	background-color: var(--wp--preset--color--indigo-light, #eef2fa);
	background-image:
		radial-gradient(40rem 40rem at 96% -22%, rgba(31, 58, 110, 0.10), transparent 60%),
		radial-gradient(30rem 30rem at -8% 112%, rgba(26, 168, 155, 0.13), transparent 60%);
}

.immunifact-feature {
	height: 100%;
}

/* Stat mini-infographic ("3 in 4") */
.immunifact-stat-card {
	border-top: 4px solid var(--wp--preset--color--coral, #e8593c);
}

.immunifact-stat-card .is-style-stat-number {
	color: var(--wp--preset--color--coral-strong, #c9442b);
	line-height: 1;
}

/* --- 3) "Our approach": graphic Prebunking / Debunking cards + connector --- */
.immunifact-approach {
	background-color: var(--wp--preset--color--base, #fff);
	background-image:
		radial-gradient(36rem 36rem at 50% -34%, rgba(26, 168, 155, 0.08), transparent 60%),
		radial-gradient(30rem 30rem at 50% 134%, rgba(232, 89, 60, 0.07), transparent 60%);
}

.immunifact-prebunk {
	border-top: 4px solid var(--wp--preset--color--teal, #1aa89b);
}

.immunifact-debunk {
	border-top: 4px solid var(--wp--preset--color--coral, #e8593c);
}

/* Decorative connector ("immunity builder" link) between the two cards */
.immunifact-connector {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
}

.immunifact-connector svg {
	width: 58px;
	height: 58px;
	filter: drop-shadow(0 4px 10px rgba(31, 58, 110, 0.12));
}

@media (max-width: 781px) {
	.immunifact-connector {
		margin: 0.25rem 0;
	}
	.immunifact-connector svg {
		transform: rotate(90deg);
	}
}

/* =========================================================================
   ABOUT PAGE DESIGN ENHANCEMENTS (v1.1.3) — CSS + inline SVG only.
   ========================================================================= */

/* --- 1) "What we want to achieve": responsive equal-height/width grid --- */
/* 4 columns desktop, 2 tablet, 1 mobile. Grid items stretch to equal height. */
.immunifact-achieve-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.immunifact-achieve-card {
	height: 100%;
}

.immunifact-top-indigo {
	border-top: 4px solid var(--wp--preset--color--indigo, #1f3a6e);
}

.immunifact-top-teal {
	border-top: 4px solid var(--wp--preset--color--teal, #1aa89b);
}

.immunifact-top-coral {
	border-top: 4px solid var(--wp--preset--color--coral, #e8593c);
}

@media (max-width: 960px) {
	.immunifact-achieve-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.immunifact-achieve-grid {
		grid-template-columns: 1fr !important;
	}
}

/* --- 2) "Priorities & topics": custom chevron list markers (keeps ul/li) --- */
.immunifact-arrow-list {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.immunifact-arrow-list li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
}

.immunifact-arrow-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.34em;
	width: 1.05rem;
	height: 1.05rem;
	background: center / contain no-repeat;
}

.immunifact-arrow-list.is-priorities li::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231F3A6E'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E");
}

.immunifact-arrow-list.is-topics li::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2312857A'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E");
}

/* Small decorative icon beside the "Priorities" / "Topics" sub-headings */
.immunifact-subhead {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.immunifact-subhead::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	background: center / contain no-repeat;
}

.immunifact-subhead.is-priorities::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231F3A6E'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203v18'/%3E%3Cpath%20d='M6%204h11l-2.5%203.5L17%2011H6'/%3E%3C/svg%3E");
}

.immunifact-subhead.is-topics::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2312857A'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204L7%2020M17%204l-2%2016M4%209h16M3%2015h16'/%3E%3C/svg%3E");
}

/* =========================================================================
   PARTNERS PAGE DESIGN ENHANCEMENTS (v1.1.4) — CSS + inline SVG only.
   ========================================================================= */

/* --- 1) Page header: soft brand blobs + decorative three-node emblem --- */
.immunifact-partners-hero {
	background-color: var(--wp--preset--color--cream, #f7f4ed);
	background-image:
		radial-gradient(34rem 34rem at 6% -22%, rgba(31, 58, 110, 0.10), transparent 60%),
		radial-gradient(30rem 30rem at 98% 122%, rgba(26, 168, 155, 0.12), transparent 60%),
		radial-gradient(24rem 24rem at 62% -10%, rgba(232, 89, 60, 0.07), transparent 55%);
}

.immunifact-partners-emblem {
	display: flex;
	justify-content: center;
	margin-bottom: 0.5rem;
}

.immunifact-partners-emblem svg {
	width: 140px;
	height: auto;
}

/* --- 3) Bigger, more prominent partner logos (scoped class, not the footer one) --- */
.immunifact-plogo {
	margin: 0;
}

.immunifact-plogo img {
	width: auto;
	max-width: 100%;
	max-height: 120px;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

/* --- 4) Distinct colour accent per partner card (top border + light tint) --- */
.immunifact-pcard {
	border-top: 4px solid transparent;
}

.immunifact-pcard-indigo {
	border-top-color: var(--wp--preset--color--indigo, #1f3a6e);
	background-color: #f4f7fc;
}

.immunifact-pcard-teal {
	border-top-color: var(--wp--preset--color--teal, #1aa89b);
	background-color: #eff8f6;
}

.immunifact-pcard-coral {
	border-top-color: var(--wp--preset--color--coral, #e8593c);
	background-color: #fdf1ed;
}

/* Accent-tinted role pill per card (text stays indigo for guaranteed AA contrast) */
.immunifact-pcard-indigo .is-style-eyebrow {
	background-color: #e2e9f7;
}

.immunifact-pcard-teal .is-style-eyebrow {
	background-color: #dbefeb;
}

.immunifact-pcard-coral .is-style-eyebrow {
	background-color: #fae2d9;
}

/* =========================================================================
   RESULTS PAGE DESIGN ENHANCEMENTS (v1.1.5) — uses results-tools.png +
   CSS + inline SVG only. No new image files.
   ========================================================================= */

/* --- 1) Header: results-tools.png as a full-width background, text on the
   RIGHT (the person's face is on the left, so the scrim sits on the right). --- */
.immunifact-results-hero {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	background-color: var(--wp--preset--color--cream, #f7f4ed);
	background-image:
		linear-gradient(
			90deg,
			rgba(247, 244, 237, 0) 6%,
			rgba(247, 244, 237, 0.10) 24%,
			rgba(247, 244, 237, 0.55) 38%,
			rgba(247, 244, 237, 0.86) 48%,
			rgba(247, 244, 237, 0.96) 60%,
			rgba(247, 244, 237, 0.98) 100%
		),
		url(assets/images/results-tools.png);
	background-repeat: no-repeat, no-repeat;
	background-position: center center, left top;
	background-size: cover, cover;
}

/* Anchor the text column to the right of the 1180px band (falls back to normal
   page padding on smaller screens); WordPress centres children with
   margin auto !important, so !important is required to win. */
.immunifact-results-hero > .immunifact-results-hero-content {
	box-sizing: border-box;
	max-width: 560px;
	margin-left: auto !important;
	margin-right: max(var(--wp--preset--spacing--30, 1.5rem), calc(50% - 590px)) !important;
	text-align: left;
}

/* Tablet & mobile: drop the illustration, fall back to a legible tint, full width. */
@media (max-width: 960px) {
	.immunifact-results-hero {
		min-height: 0;
		background-image: linear-gradient(160deg, #f7f4ed 0%, #eef2fa 100%);
	}
	.immunifact-results-hero > .immunifact-results-hero-content {
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* --- 4) Uniform result grid: 2 columns desktop, 1 mobile, equal height --- */
.immunifact-results-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 781px) {
	.immunifact-results-grid {
		grid-template-columns: 1fr !important;
	}
}

/* --- 5) Result cards: flex column so the decorative icon sits at the bottom,
   plus a distinct brand colour accent (top border + light tint + icon). --- */
.immunifact-result-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-top: 4px solid transparent;
}

.immunifact-result-card > .immunifact-result-icon {
	margin-top: auto;
}

.immunifact-result-icon {
	padding-top: 1.5rem;
	line-height: 0;
}

.immunifact-result-icon svg {
	width: 42px;
	height: 42px;
}

.immunifact-accent-indigo {
	border-top-color: var(--wp--preset--color--indigo, #1f3a6e);
	background-color: #f4f7fc;
}

.immunifact-accent-teal {
	border-top-color: var(--wp--preset--color--teal, #1aa89b);
	background-color: #eff8f6;
}

.immunifact-accent-coral {
	border-top-color: var(--wp--preset--color--coral, #e8593c);
	background-color: #fdf1ed;
}

.immunifact-accent-gold {
	border-top-color: #c2922e;
	background-color: #fbf4e4;
}

.immunifact-accent-indigo .immunifact-result-icon {
	color: var(--wp--preset--color--indigo, #1f3a6e);
}

.immunifact-accent-teal .immunifact-result-icon {
	color: var(--wp--preset--color--teal-dark, #12857a);
}

.immunifact-accent-coral .immunifact-result-icon {
	color: var(--wp--preset--color--coral-strong, #c9442b);
}

.immunifact-accent-gold .immunifact-result-icon {
	color: #94701a;
}

/* =========================================================================
   NEWS PAGE DESIGN ENHANCEMENTS (v1.1.6) — CSS + inline SVG, reuses
   about-approach.png as a card placeholder. No new image files.
   ========================================================================= */

/* --- 2) Header: soft brand-coloured shapes + gentle gradient behind the band --- */
.immunifact-news-hero {
	background-color: var(--wp--preset--color--cream, #f7f4ed);
	background-image:
		linear-gradient(95deg, rgba(247, 244, 237, 0) 38%, rgba(26, 168, 155, 0.07) 78%, rgba(31, 58, 110, 0.07) 100%),
		radial-gradient(30rem 30rem at 3% -24%, rgba(31, 58, 110, 0.10), transparent 60%),
		radial-gradient(34rem 34rem at 102% 128%, rgba(26, 168, 155, 0.14), transparent 60%),
		radial-gradient(20rem 20rem at 84% -16%, rgba(232, 89, 60, 0.08), transparent 55%);
}

/* Two-part band: text left, decorative motif right */
.immunifact-news-hero-text {
	max-width: 560px;
}

.immunifact-news-motif {
	flex: 0 0 auto;
	width: clamp(220px, 30vw, 330px);
	line-height: 0;
}

.immunifact-news-motif svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Motif shrinks then hides on narrower screens so the text stays clean */
@media (max-width: 781px) {
	.immunifact-news-motif {
		display: none;
	}
	.immunifact-news-hero-text {
		max-width: none;
	}
}

/* --- 3) Inline arrow replacing the em dash in the intro line --- */
.immunifact-news-intro .immunifact-inline-arrow {
	display: inline-flex;
	vertical-align: -0.16em;
	color: var(--wp--preset--color--teal-dark, #12857a);
}

.immunifact-news-intro .immunifact-inline-arrow svg {
	width: 1.1em;
	height: 1.1em;
}

/* --- 4) Uniform, equal-height post cards in a responsive grid --- */
@media (max-width: 960px) {
	.immunifact-news-query .immunifact-news-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.immunifact-news-query .immunifact-news-template {
		grid-template-columns: 1fr !important;
	}
}

/* Make the card fill its (equal-height) grid cell so every card matches height */
.immunifact-news-query .wp-block-post {
	display: flex;
}

.immunifact-news-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* --- 5) Image at the top, with about-approach.png as a fallback placeholder --- */
.immunifact-news-card .immunifact-news-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #eef2fa url(assets/images/about-approach.png) center / cover no-repeat;
}

.immunifact-news-card .immunifact-news-thumb .wp-block-post-featured-image,
.immunifact-news-card .immunifact-news-thumb .wp-block-post-featured-image a {
	display: block;
	height: 100%;
	margin: 0;
}

.immunifact-news-card .immunifact-news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =========================================================================
   CONTACT PAGE HEADER (v1.1.8) — CSS + inline SVG only.
   ========================================================================= */
.immunifact-contact-hero {
	background-color: var(--wp--preset--color--cream, #f7f4ed);
	background-image:
		linear-gradient(95deg, rgba(247, 244, 237, 0) 40%, rgba(26, 168, 155, 0.06) 78%, rgba(31, 58, 110, 0.07) 100%),
		radial-gradient(30rem 30rem at 2% -24%, rgba(31, 58, 110, 0.10), transparent 60%),
		radial-gradient(34rem 34rem at 102% 130%, rgba(26, 168, 155, 0.13), transparent 60%),
		radial-gradient(20rem 20rem at 86% -18%, rgba(232, 89, 60, 0.08), transparent 55%);
}

.immunifact-contact-hero-text {
	max-width: 560px;
}

.immunifact-contact-motif {
	flex: 0 0 auto;
	width: clamp(200px, 28vw, 300px);
	line-height: 0;
}

.immunifact-contact-motif svg {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 781px) {
	.immunifact-contact-motif {
		display: none;
	}
	.immunifact-contact-hero-text {
		max-width: none;
	}
}

/* =========================================================================
   ACTIVITIES PAGE (v1.1.9) — uses activities.png + CSS + inline SVG only.
   ========================================================================= */

/* --- 1) Header: activities.png as a full-width background, text on the RIGHT
   (the larger group of faces is on the left/centre, so the scrim sits right). --- */
.immunifact-activities-hero {
	position: relative;
	min-height: 460px;
	display: flex;
	align-items: center;
	background-color: var(--wp--preset--color--cream, #f7f4ed);
	background-image:
		linear-gradient(
			90deg,
			rgba(247, 244, 237, 0) 6%,
			rgba(247, 244, 237, 0.12) 26%,
			rgba(247, 244, 237, 0.60) 40%,
			rgba(247, 244, 237, 0.90) 50%,
			rgba(247, 244, 237, 0.97) 62%,
			rgba(247, 244, 237, 0.985) 100%
		),
		url(assets/images/activities.png);
	background-repeat: no-repeat, no-repeat;
	background-position: center center, center center;
	background-size: cover, cover;
}

.immunifact-activities-hero > .immunifact-activities-hero-content {
	box-sizing: border-box;
	max-width: 560px;
	margin-left: auto !important;
	margin-right: max(var(--wp--preset--spacing--30, 1.5rem), calc(50% - 590px)) !important;
	text-align: left;
}

@media (max-width: 960px) {
	.immunifact-activities-hero {
		min-height: 0;
		background-image: linear-gradient(160deg, #f7f4ed 0%, #eef2fa 100%);
	}
	.immunifact-activities-hero > .immunifact-activities-hero-content {
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* --- 4) Colourful decorative background behind the phases (CSS only) --- */
.immunifact-phases-section {
	background-color: #fbfaf6;
	background-image:
		radial-gradient(28rem 28rem at -6% 4%, rgba(31, 58, 110, 0.07), transparent 60%),
		radial-gradient(30rem 30rem at 106% 28%, rgba(26, 168, 155, 0.10), transparent 60%),
		radial-gradient(26rem 26rem at 50% 108%, rgba(232, 89, 60, 0.07), transparent 60%),
		radial-gradient(circle, rgba(31, 58, 110, 0.05) 1.3px, transparent 1.4px);
	background-size: auto, auto, auto, 24px 24px;
	background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* --- 3) Per-phase accent (left border), number badge + inline-SVG icon --- */
.immunifact-phase {
	border-left: 5px solid transparent;
}

.immunifact-phase-indigo {
	border-left-color: var(--wp--preset--color--indigo, #1f3a6e);
}

.immunifact-phase-teal {
	border-left-color: var(--wp--preset--color--teal, #1aa89b);
}

.immunifact-phase-coral {
	border-left-color: var(--wp--preset--color--coral, #e8593c);
}

.immunifact-phase-head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: 0.5rem;
}

/* Number badge — coloured circle with a white digit (white-on-colour meets AA) */
.immunifact-phase-num {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.2rem;
	line-height: 1;
	color: #fff;
}

.immunifact-phase-indigo .immunifact-phase-num {
	background-color: var(--wp--preset--color--indigo, #1f3a6e);
}

.immunifact-phase-teal .immunifact-phase-num {
	background-color: var(--wp--preset--color--teal-dark, #12857a);
}

.immunifact-phase-coral .immunifact-phase-num {
	background-color: var(--wp--preset--color--coral-strong, #c9442b);
}

.immunifact-phase-icon {
	display: inline-flex;
	margin-left: auto;
	line-height: 0;
}

.immunifact-phase-icon svg {
	width: 34px;
	height: 34px;
}

.immunifact-phase-indigo .immunifact-phase-icon {
	color: var(--wp--preset--color--indigo, #1f3a6e);
}

.immunifact-phase-teal .immunifact-phase-icon {
	color: var(--wp--preset--color--teal-dark, #12857a);
}

.immunifact-phase-coral .immunifact-phase-icon {
	color: var(--wp--preset--color--coral-strong, #c9442b);
}

/* =========================================================================
   HOME PAGE ANIMATIONS (v1.2.0) — vanilla JS (IntersectionObserver) + CSS.
   All motion is subtle, slow and disabled under prefers-reduced-motion.
   ========================================================================= */

/* A) Scroll reveal — initial hidden state only applies once JS adds
   `immunifact-anim` to <html> (so no-JS / reduced-motion users see content). */
.immunifact-anim .immunifact-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	will-change: opacity, transform;
}

.immunifact-anim .immunifact-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* C) Hero accent — decorative floating shapes + a softly pulsing shield,
   layered behind the hero text (text keeps z-index above it). */
.immunifact-hero {
	position: relative;
	overflow: hidden;
}

.immunifact-hero-accent {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.immunifact-hero-accent svg {
	width: 100%;
	height: 100%;
	display: block;
}

.immunifact-hero > .immunifact-hero-content {
	position: relative;
	z-index: 1;
}

/* Tone down / disable the moving accent on small screens (hero is a flat tint there) */
@media (max-width: 781px) {
	.immunifact-hero-accent {
		display: none;
	}
}

/* Motion only when the user is happy with motion */
@media (prefers-reduced-motion: no-preference) {
	.immunifact-hero-accent .imf-float {
		animation: imfFloat 11s ease-in-out infinite alternate;
	}
	.immunifact-hero-accent .imf-f2 {
		animation-duration: 13.5s;
		animation-delay: -3s;
	}
	.immunifact-hero-accent .imf-f3 {
		animation-duration: 9.5s;
		animation-delay: -1.5s;
	}
	.immunifact-hero-accent .imf-pulse {
		transform-box: fill-box;
		transform-origin: center;
		animation: imfPulse 6.5s ease-in-out infinite alternate;
	}
}

@keyframes imfFloat {
	from {
		transform: translateY(-8px);
	}
	to {
		transform: translateY(10px);
	}
}

@keyframes imfPulse {
	from {
		transform: scale(1);
		opacity: 0.8;
	}
	to {
		transform: scale(1.05);
		opacity: 1;
	}
}

/* Safety net: never animate reveal when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
	.immunifact-anim .immunifact-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --- Respect users who prefer reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}