/*
Theme Name: CaRe-GR
Theme URI: https://care-gr.mar.aegean.gr/
Author: University of the Aegean, Department of Marine Sciences (CaRe-GR / WP6 DECO)
Author URI: https://care-gr.mar.aegean.gr/
Description: "Deep Field" — an editorial, build-free FSE block theme for CaRe-GR (Marine Caves and Reefs in Greece). A descent from sunlit reef shallows into dark caves: Fraunces display serif, Hanken Grotesk body, IBM Plex Mono field-note labels, grain texture, caustic light and depth gradients. Styling is driven by theme.json + this stylesheet (no build step).
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: care-gr
Tags: full-site-editing, block-theme, blue, editorial, custom-colors, custom-logo, accessibility-ready
*/

/* ============================================================
   CaRe-GR — "Deep Field"
   Light: sunlit shallows (foam white, ocean blue, mono notes).
   Dark : the abyss (deep navy, bioluminescent cyan glow).
   ============================================================ */

:root {
	--care-radius: 14px;
	--care-radius-lg: 22px;
	--care-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--care-rule: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--glow));
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; background-color: var(--wp--preset--color--base); }

/* optical sizing for the Fraunces display serif */
:where(h1, h2, h3, h4, h5, h6, .wp-block-site-title) { font-optical-sizing: auto; }
h1, .care-display-xl { font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }

img { height: auto; }
::selection { background: var(--wp--preset--color--glow); color: var(--wp--preset--color--abyss); }

/* fine film-grain over the whole page (texture, not noise) */
body::after {
	content: "";
	position: fixed; inset: 0;
	pointer-events: none;
	z-index: 9000;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* slim scroll-progress bar (created by header.js) */
.care-progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 0;
	z-index: 9500;
	background: var(--care-rule);
	box-shadow: 0 0 12px rgba(63, 227, 222, 0.55);
	transition: width 0.1s linear;
}

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

:where(a, button, input, textarea, select, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--glow);
	outline-offset: 3px;
	border-radius: 4px;
}

:where(h1, h2, h3, [id]) { scroll-margin-top: 7rem; }

/* ============================================================
   Mono "field-note" labels & editorial section headings
   ============================================================ */

.care-eyebrow,
.care-hero__eyebrow,
.care-objective__kicker,
.care-wp-card__num,
.care-stat__label,
.site-footer__heading {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.care-eyebrow { color: var(--wp--preset--color--secondary-dark); display: inline-flex; align-items: center; gap: 0.6rem; }
.care-eyebrow::before {
	content: ""; width: 1.6rem; height: 1px;
	background: var(--wp--preset--color--accent);
	display: inline-block;
}
.has-text-align-center.care-eyebrow { justify-content: center; }

/* section heading: big Fraunces + a short gradient rule with a glow node */
.care-section-heading { position: relative; padding-bottom: 0.85rem; font-feature-settings: "ss01"; }
.care-section-heading::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 3.4rem; height: 3px; border-radius: 3px;
	background: var(--care-rule);
	transition: width 0.85s var(--care-ease) 0.15s;
}
.care-section-heading::before {
	content: ""; position: absolute; left: 3.4rem; bottom: 0.5px;
	width: 7px; height: 7px; margin-left: -3px; border-radius: 50%;
	background: var(--wp--preset--color--glow);
	box-shadow: 0 0 10px rgba(63, 227, 222, 0.8);
	transform: translateY(2px);
}
.has-text-align-center.care-section-heading::after { left: 50%; transform: translateX(-50%); }
.has-text-align-center.care-section-heading::before { left: 50%; margin-left: calc(1.7rem - 3px); }
.care-section-heading.is-inverse::after { background: linear-gradient(90deg, var(--wp--preset--color--glow), var(--wp--preset--color--secondary-light)); }
/* underline "draws" itself when the heading is revealed on scroll */
html.has-reveal .care-section-heading::after { width: 0; }
.care-section-heading.is-in::after { width: 3.4rem; }
.has-text-align-center.care-section-heading.is-in::after { width: 3.4rem; }
html.has-reveal .care-section-heading::before { opacity: 0; transition: opacity 0.4s var(--care-ease) 0.75s; }
.care-section-heading.is-in::before { opacity: 1; }

/* ============================================================
   Sticky header
   ============================================================ */

.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
	backdrop-filter: saturate(1.3) blur(14px);
	-webkit-backdrop-filter: saturate(1.3) blur(14px);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.4s var(--care-ease), border-color 0.4s var(--care-ease), background 0.4s var(--care-ease), backdrop-filter 0.4s var(--care-ease);
}
/* header is fixed (out of flow) on every page; push inner-page content below it
   (home is excluded — its hero sits full-bleed under the transparent header) */
body:not(.home) .wp-site-blocks > main { padding-top: 84px; }
@media (max-width: 600px) { body:not(.home) .wp-site-blocks > main { padding-top: 68px; } }
.site-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--hairline);
	box-shadow: 0 10px 30px -18px rgba(6, 26, 43, 0.5);
}
.site-header.is-scrolled .wp-block-group { padding-top: var(--wp--preset--spacing--20); padding-bottom: var(--wp--preset--spacing--20); }
.site-header .wp-block-group { transition: padding 0.4s var(--care-ease); }
.site-header .wp-block-site-logo img, .site-header .custom-logo { width: clamp(42px, 4.6vw, 50px); transition: width 0.3s var(--care-ease); }
.site-header.is-scrolled .wp-block-site-logo img { width: 40px; }
.site-header .wp-block-site-title a, .site-header .wp-block-navigation a, .site-header .wp-block-navigation .wp-block-navigation-item__content {
	transition: color 0.35s var(--care-ease);
}

/* --- front page: header overlays the hero, transparent -> solid on scroll --- */
body.home .site-header {
	position: fixed; top: 0; left: 0; right: 0;
	background: linear-gradient(180deg, rgba(4,16,28,0.45) 0%, rgba(4,16,28,0) 100%);
	backdrop-filter: none; -webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}
body.home .site-header:not(.is-scrolled) :is(.wp-block-site-title, .wp-block-site-title a, .wp-block-navigation, .wp-block-navigation a, .wp-block-navigation .wp-block-navigation-item__content, .wp-block-navigation__responsive-container-open) {
	color: #fff;
}
body.home .site-header.is-scrolled {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(1.3) blur(14px);
	-webkit-backdrop-filter: saturate(1.3) blur(14px);
	border-bottom-color: var(--wp--preset--color--hairline);
	animation: care-dock 0.5s var(--care-ease);
}
@keyframes care-dock { from { transform: translateY(-14px); opacity: 0.55; } to { transform: none; opacity: 1; } }

/* mono nav with a bioluminescent underline */
.site-header .wp-block-navigation a { text-decoration: none; }
.site-header .wp-block-navigation .wp-block-navigation-item__content { position: relative; padding-bottom: 3px; }
.site-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
	background: var(--wp--preset--color--glow);
	box-shadow: 0 0 8px rgba(63, 227, 222, 0.7);
	transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--care-ease);
}
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* nav submenu (Research) */
.site-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--large);
	padding: 0.4rem; min-width: 250px;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.55rem 0.75rem; border-radius: 8px; }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover { background: var(--wp--preset--color--surface); }

/* ============================================================
   Hero — immersive underwater photograph
   ============================================================ */

.care-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; }
.care-hero :where(h1, h2, h3, p, li) { color: #fff; }
.care-hero :where(h1, h2) { text-shadow: 0 1px 28px rgba(4, 16, 28, 0.6), 0 1px 4px rgba(4, 16, 28, 0.4); }
.care-hero :where(p) { text-shadow: 0 1px 14px rgba(4, 16, 28, 0.55); }

/* full-bleed photo with parallax headroom */
.care-hero > .care-hero__img { z-index: 0; transform: scale(1.08); will-change: transform; }

/* directional depth scrim keeps the headline legible over the photo */
.care-hero__scrim {
	z-index: 1;
	background:
		linear-gradient(93deg, rgba(4,16,28,0.88) 0%, rgba(4,16,28,0.55) 32%, rgba(4,16,28,0.10) 60%, rgba(6,26,43,0.34) 100%),
		linear-gradient(180deg, rgba(4,16,28,0.55) 0%, transparent 24%, transparent 50%, rgba(3,12,22,0.80) 100%);
}
.care-hero > .wp-block-cover__inner-container { position: relative; z-index: 3; }

/* subtle caustic glints layered over the photo */
.care-hero::before {
	content: ""; position: absolute; inset: -25%; z-index: 2; pointer-events: none; mix-blend-mode: screen;
	background:
		radial-gradient(32% 26% at 15% 12%, rgba(63,227,222,0.16), transparent 70%),
		radial-gradient(28% 22% at 86% 24%, rgba(150,220,255,0.12), transparent 70%);
	filter: blur(30px);
	animation: care-caustic 24s ease-in-out infinite alternate;
}
@keyframes care-caustic {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(2%, -2%, 0) scale(1.06); }
	100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}

.care-hero__eyebrow { color: var(--wp--preset--color--glow) !important; }
.care-hero__eyebrow::before { background: var(--wp--preset--color--glow); }

/* staggered hero entrance */
.care-hero > .wp-block-cover__inner-container > * { animation: care-rise 1s var(--care-ease) both; }
.care-hero > .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: 0.10s; }
.care-hero > .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: 0.22s; }
.care-hero > .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: 0.34s; }
.care-hero > .wp-block-cover__inner-container > *:nth-child(4) { animation-delay: 0.46s; }
.care-hero > .wp-block-cover__inner-container > *:nth-child(5) { animation-delay: 0.58s; }
@keyframes care-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.care-hero h1 { text-wrap: balance; max-width: 18ch; }

/* underwater bubbles — spawned in periodic bursts by header.js, each rises once
   then is removed (--by rise distance, --bx drift, --dur duration set per bubble) */
.care-particle {
	position: absolute; z-index: 2; border-radius: 50%; pointer-events: none;
	background:
		radial-gradient(circle at 30% 27%,
			rgba(255,255,255,0.96) 0%,
			rgba(214,248,255,0.55) 12%,
			rgba(150,221,245,0.18) 38%,
			rgba(116,200,236,0.07) 62%,
			rgba(116,200,236,0) 71%);
	box-shadow: inset 0 0 5px rgba(255,255,255,0.5), inset 0 -3px 6px rgba(120,200,235,0.25), 0 0 10px rgba(120,210,255,0.3);
	border: 1px solid rgba(224,250,255,0.32);
	opacity: 0;
	will-change: transform, opacity;
	animation: care-bubble-pop var(--dur, 8s) linear forwards;
}
@keyframes care-bubble-pop {
	0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
	9%   { opacity: 0.95; }
	82%  { opacity: 0.9; }
	100% { transform: translate(var(--bx, 18px), var(--by, -240px)) scale(1.12); opacity: 0; }
}

/* scroll cue */
.care-scrollcue {
	position: absolute; left: 50%; bottom: 1.7rem; transform: translateX(-50%); z-index: 4;
	display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
	color: rgba(255,255,255,0.78); text-decoration: none;
}
.care-scrollcue::after {
	content: ""; width: 1px; height: 36px;
	background: linear-gradient(var(--wp--preset--color--glow), transparent);
	animation: care-cue 1.9s var(--care-ease) infinite;
}
@keyframes care-cue {
	0%   { transform: scaleY(0.25); transform-origin: top; opacity: 0.3; }
	50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
	51%  { transform-origin: bottom; }
	100% { transform: scaleY(0.25); transform-origin: bottom; opacity: 0.2; }
}

/* ============================================================
   Scroll reveal (gated so content always shows if JS is off)
   ============================================================ */

html.has-reveal .reveal { opacity: 0; transform: translateY(26px) scale(0.99); }
.reveal { transition: opacity 0.8s var(--care-ease), transform 0.8s var(--care-ease); will-change: opacity, transform; }
/* NOTE: must out-specify the hide rule above (html.has-reveal .reveal = 0,2,1),
   or `is-in` never wins and content stays invisible. */
html.has-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Grids & cards
   ============================================================ */

.care-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--40); }
.care-grid > * { margin: 0; }

.care-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--care-radius-lg);
	box-shadow: var(--wp--preset--shadow--subtle);
	overflow: hidden; height: 100%;
	transition: transform 0.35s var(--care-ease), box-shadow 0.35s var(--care-ease), border-color 0.35s var(--care-ease);
}
.care-card:hover { transform: translateY(-5px); box-shadow: var(--wp--preset--shadow--large); border-color: var(--wp--preset--color--primary-light); }

/* work-package cards (used as <a>) */
.care-wp-card {
	position: relative; display: flex; flex-direction: column; gap: 0.55rem;
	padding: var(--wp--preset--spacing--50);
	padding-left: calc(var(--wp--preset--spacing--50) + 8px);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--care-radius-lg);
	box-shadow: var(--wp--preset--shadow--subtle);
	text-decoration: none;
	transition: transform 0.35s var(--care-ease), box-shadow 0.35s var(--care-ease), border-color 0.35s var(--care-ease);
	flex: 1 1 320px; max-width: 372px;
}
.care-wp-card::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
	background: linear-gradient(180deg, var(--wp--preset--color--primary), var(--wp--preset--color--glow));
	border-radius: var(--care-radius-lg) 0 0 var(--care-radius-lg);
	transition: width 0.35s var(--care-ease);
}
.care-wp-card:hover { transform: translateY(-5px); box-shadow: var(--wp--preset--shadow--large); border-color: var(--wp--preset--color--primary-light); }
.care-wp-card:hover::before { width: 11px; }
.care-wp-card__num { color: var(--wp--preset--color--secondary-dark); }
.care-wp-card__title { font-family: var(--wp--preset--font-family--display); font-weight: 560; font-size: 1.4rem; line-height: 1.16; margin: 0; color: var(--wp--preset--color--contrast); }
.care-wp-card__lead { font-size: 0.95rem; color: var(--wp--preset--color--muted); margin-top: auto; }

/* objective / pillar */
.care-objective {
	flex: 1 1 280px; max-width: 350px;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--care-radius-lg);
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: transform 0.35s var(--care-ease), box-shadow 0.35s var(--care-ease);
}
.care-objective:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--medium); }
.care-objective__kicker { display: inline-block; color: var(--wp--preset--color--primary); margin-bottom: 0.5rem; }

/* team cards */
.care-team-card {
	flex: 1 1 240px; max-width: 272px; text-align: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--care-radius-lg);
	box-shadow: var(--wp--preset--shadow--subtle);
	transition: transform 0.35s var(--care-ease), box-shadow 0.35s var(--care-ease);
}
.care-team-card:hover { transform: translateY(-5px); box-shadow: var(--wp--preset--shadow--medium); }
.care-team-card img {
	width: 128px; height: 128px; object-fit: cover; border-radius: 50%;
	margin: 0 auto 0.9rem; background: var(--wp--preset--color--surface-alt);
	box-shadow: 0 0 0 3px var(--wp--preset--color--base), 0 0 0 5px var(--wp--preset--color--primary-light);
}
.care-team-card__mono {
	width: 128px; height: 128px; margin: 0 auto 0.9rem; border-radius: 50%;
	background: var(--wp--preset--gradient--deep-sea); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--display); font-weight: 560; font-size: 2.3rem;
	box-shadow: 0 0 0 3px var(--wp--preset--color--base), 0 0 0 5px var(--wp--preset--color--primary-light);
}
.care-team-card__name { font-family: var(--wp--preset--font-family--display); font-weight: 560; font-size: 1.18rem; line-height: 1.22; margin: 0; }
.care-team-card__role { font-size: 0.82rem; color: var(--wp--preset--color--muted); margin: 0.3rem 0 0; }
.care-team-card__wp {
	display: inline-block; margin-top: 0.6rem; padding: 0.18rem 0.65rem;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.06em;
	color: var(--wp--preset--color--primary-dark); background: var(--wp--preset--color--primary-light); border-radius: 999px;
}
.care-team-card__links { display: flex; gap: 0.7rem; justify-content: center; margin-top: 0.7rem; }
.care-team-card__links a { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--secondary-dark); text-decoration: none; font-size: 0.68rem; letter-spacing: 0.03em; }
.care-team-card__links a:hover { color: var(--wp--preset--color--primary); }

/* ============================================================
   Photo credits — MANDATORY, always visible
   ============================================================ */

.care-credit, figure.wp-block-image figcaption.care-credit, .care-gallery figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem; letter-spacing: 0.02em;
	color: var(--wp--preset--color--muted); margin-top: 0.45rem;
}
.care-credit::before { content: "▸ "; color: var(--wp--preset--color--accent); }
.care-cover-credit {
	position: absolute; right: 0.7rem; bottom: 0.6rem; z-index: 4;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.66rem;
	color: rgba(255,255,255,0.9); background: rgba(6, 26, 43, 0.5);
	padding: 0.2rem 0.6rem; border-radius: 999px; backdrop-filter: blur(3px);
}

/* ============================================================
   Buttons
   ============================================================ */

.wp-block-button__link { transition: transform 0.25s var(--care-ease), box-shadow 0.25s var(--care-ease), background 0.25s var(--care-ease); }
.wp-block-button:not(.is-style-outline):not(.is-style-outline-light) .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(10, 92, 168, 0.65), 0 0 0 1px rgba(63, 227, 222, 0.30); }
.wp-block-button.is-style-outline .wp-block-button__link { border-width: 1.5px; }
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.65);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: #fff; color: var(--wp--preset--color--primary-dark); box-shadow: inset 0 0 0 1.5px #fff; transform: translateY(-2px);
}

/* ============================================================
   Footer — the abyss
   ============================================================ */

.site-footer { position: relative; overflow: hidden; background: url("assets/images/contour-glow.png") center / 620px repeat, var(--wp--preset--gradient--abyss); color: var(--wp--preset--color--secondary-light); }
.site-footer :where(h1,h2,h3,h4,p,li,a) { color: var(--wp--preset--color--secondary-light); }
.site-footer::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: min(46%, 560px); aspect-ratio: 922 / 402;
	background: url("assets/images/reef-corner-bl.png") left bottom / contain no-repeat;
	opacity: 0.2; filter: brightness(0) invert(1); pointer-events: none; pointer-events: none;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__heading { color: var(--wp--preset--color--glow); display: block; margin-bottom: 0.4rem; }
.care-social { display: flex; gap: 0.85rem; align-items: center; }
.care-social a {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
	transition: background 0.25s var(--care-ease), transform 0.25s var(--care-ease), border-color 0.25s var(--care-ease);
}
.care-social a:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--glow); transform: translateY(-2px); }
.care-social svg { width: 18px; height: 18px; fill: #fff; }

/* ============================================================
   Stats, pills, gallery, placeholders, outputs
   ============================================================ */

.care-stat__num { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 3rem; line-height: 1; color: var(--wp--preset--color--primary); font-variation-settings: "opsz" 144; }
.care-stat__label { color: var(--wp--preset--color--muted); margin-top: 0.25rem; }

.care-pills { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; list-style: none; padding: 0; }
.care-pills li {
	font-family: var(--wp--preset--font-family--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em;
	color: #fff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22);
	border-radius: 999px; padding: 0.4rem 0.9rem; backdrop-filter: blur(3px);
}

.care-funding { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); align-items: center; justify-content: center; }
.care-funding img { max-height: 56px; width: auto; }

.care-media-rounded img { border-radius: var(--care-radius); box-shadow: var(--wp--preset--shadow--medium); }

.care-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--wp--preset--spacing--40); }
.care-gallery figure { margin: 0; overflow: hidden; border-radius: var(--care-radius); position: relative; }
.care-gallery figure > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.6s var(--care-ease); }
.care-gallery figure:hover > img { transform: scale(1.06); }
.care-gallery figcaption { margin-top: 0.4rem; }
/* first image spans two columns on wide screens — editorial */
@media (min-width: 900px) { .care-gallery figure:first-child { grid-column: span 2; } .care-gallery figure:first-child > img { aspect-ratio: 16 / 9; } }

.care-placeholder {
	border: 1.5px dashed var(--wp--preset--color--hairline); border-radius: var(--care-radius-lg);
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	text-align: center; color: var(--wp--preset--color--muted);
}
.care-placeholder__icon { font-size: 2.4rem; line-height: 1; }

.care-outputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--wp--preset--spacing--40); list-style: none; padding: 0; }
.care-outputs li {
	padding: var(--wp--preset--spacing--50); background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--hairline); border-radius: var(--care-radius-lg);
	transition: transform 0.35s var(--care-ease), box-shadow 0.35s var(--care-ease);
}
.care-outputs li:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--medium); }
.care-outputs li strong { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 560; font-size: 1.15rem; color: var(--wp--preset--color--primary-dark); margin-bottom: 0.3rem; }
.care-outputs li span { font-size: 0.86rem; color: var(--wp--preset--color--muted); }

.care-section { scroll-margin-top: 7rem; }

/* body copy: ONE consistent, centred reading column on text-led pages.
   Higher specificity than WP's constrained-layout rule so headings line up
   with the prose (a :where() selector lost to it and headings ran full-width). */
.wp-block-post-content.is-layout-constrained > h2,
.wp-block-post-content.is-layout-constrained > h3,
.wp-block-post-content.is-layout-constrained > h4,
.wp-block-post-content.is-layout-constrained > p,
.wp-block-post-content.is-layout-constrained > ul,
.wp-block-post-content.is-layout-constrained > ol,
.wp-block-post-content.is-layout-constrained > .wp-block-list,
.wp-block-post-content.is-layout-constrained > blockquote {
	max-width: 47rem;
	margin-left: auto;
	margin-right: auto;
}
/* (use rem, not ch: ch scales with font-size, so big Fraunces headings would
   compute a ~2600px "74ch" and run full-width, misaligning with the prose) */

/* approach step numbers (Fraunces) */
.wp-block-columns .care-stat__num { margin-bottom: 0.3rem; }

/* ============================================================
   Bathymetric contour signature — depth-chart texture on the
   pale "surface" bands (ties to the project's mapping work, WP2)
   ============================================================ */
/* surface "chart" bands run edge-to-edge (full-bleed) even when the band itself
   is width-constrained: a 100vw pseudo carries the surface colour + contour, while
   the content stays in its normal column. body{overflow-x:clip} hides the overspill. */
.wp-block-group.has-surface-background-color {
	position: relative;
	isolation: isolate;
	background: transparent !important;
}
.wp-block-group.has-surface-background-color::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
	width: 100vw; z-index: -1; pointer-events: none;
	background: var(--wp--preset--color--surface) url("assets/images/contour-faint.png") center top / 560px auto;
}

/* ============================================================
   POLISH PASS — denser type, fuller grids, more motion
   ============================================================ */

/* larger, more legible type across components */
.care-eyebrow, .care-hero__eyebrow, .care-objective__kicker, .care-wp-card__num, .care-stat__label, .site-footer__heading { font-size: 0.78rem; letter-spacing: 0.16em; }
.care-wp-card__title { font-size: 1.5rem; }
.care-wp-card__lead { font-size: 1.04rem; }
.care-objective p { font-size: 1.05rem; }
.care-team-card__name { font-size: 1.3rem; }
.care-team-card__role { font-size: 0.9rem; }
.care-team-card__links a { font-size: 0.76rem; }
.care-credit, figure.wp-block-image figcaption.care-credit, .care-gallery figcaption { font-size: 0.78rem; }
.care-stat__num { font-size: 3.4rem; }
.care-stat__label { font-size: 0.8rem; }
.care-pills li { font-size: 0.82rem; }
.care-outputs li strong { font-size: 1.28rem; }
.care-outputs li span { font-size: 0.94rem; }

/* fill-the-row card grids (kills the centered white rails on home) */
.care-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.care-cols-3 > * { max-width: none; width: auto; }
@media (max-width: 1100px) { .care-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .care-cols-3 { grid-template-columns: 1fr; } }
.care-grid .care-team-card { max-width: 300px; flex-basis: 250px; }

/* WP card: sliding arrow on hover */
.care-wp-card { padding-bottom: calc(var(--wp--preset--spacing--50) + 1.5rem); }
.care-wp-card::after {
	content: "\2192"; position: absolute; right: 1.4rem; bottom: 1.15rem;
	font-family: var(--wp--preset--font-family--mono); font-size: 1.15rem; color: var(--wp--preset--color--secondary-dark);
	opacity: 0; transform: translateX(-8px); transition: opacity 0.3s var(--care-ease), transform 0.3s var(--care-ease);
}
.care-wp-card:hover::after { opacity: 1; transform: translateX(0); }

/* objective: accent bar draws across on hover */
.care-objective { position: relative; overflow: hidden; }
.care-objective::after {
	content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
	background: var(--care-rule); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--care-ease);
}
.care-objective:hover::after { transform: scaleX(1); }

/* team card image zoom on hover */
.care-team-card { overflow: hidden; }
.care-team-card img { transition: transform 0.45s var(--care-ease); }
.care-team-card:hover img { transform: scale(1.06); }

/* filled-button shine sweep on hover */
.wp-block-button:not(.is-style-outline):not(.is-style-outline-light) .wp-block-button__link { position: relative; overflow: hidden; }
.wp-block-button:not(.is-style-outline):not(.is-style-outline-light) .wp-block-button__link::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,0.4) 50%, transparent 68%);
	transform: translateX(-130%); transition: transform 0.7s var(--care-ease);
}
.wp-block-button:not(.is-style-outline):not(.is-style-outline-light) .wp-block-button__link:hover::after { transform: translateX(130%); }

/* animated underline on prose links ONLY (scoped to text blocks so it doesn't
   bleed onto card-style anchors like .care-wp-card and force their padding) */
.wp-block-post-content :is(p, li) a:not(.wp-element-button) {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%; background-repeat: no-repeat; background-size: 100% 1.5px;
	padding-bottom: 1px;
	transition: background-size 0.3s var(--care-ease), color 0.3s var(--care-ease);
}
.wp-block-post-content :is(p, li) a:not(.wp-element-button):hover { background-size: 100% 3px; }

/* ============================================================
   FIXES
   ============================================================ */

/* Home header is position:fixed (out of flow); kill the block-gap margin that
   collapsed up and left a ~24px strip of page texture ABOVE the nav and stopped
   the hero sitting flush to the top. */
body.home .wp-site-blocks > main { margin-block-start: 0; }

/* no block-gap between the last section and the footer (was a 24px white line) */
.wp-site-blocks > footer { margin-block-start: 0; }

/* Hero fills the full viewport. svh avoids the mobile URL-bar height jump. */
.care-hero { min-height: 100vh; min-height: 100svh; }

/* The Research dropdown is a white panel — keep its links dark even while the
   top-level nav is white over the transparent home hero (was white-on-white). */
body.home .site-header:not(.is-scrolled) .wp-block-navigation__submenu-container :is(a, .wp-block-navigation-item, .wp-block-navigation-item__content) {
	color: var(--wp--preset--color--contrast);
}

/* ============================================================
   ENRICHMENT — habitats, icons, approach flow, stats, news, corners
   ============================================================ */

/* --- habitats: alternating photo + text rows --- */
.care-habitats { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--70); }
.care-habitat { margin: 0 !important; }
.care-habitat__media .wp-block-image { margin: 0; }
.care-habitat__media img { width: 100%; border-radius: var(--care-radius-lg); box-shadow: var(--wp--preset--shadow--large); display: block; }
.care-habitat__media figcaption { margin-top: 0.5rem; }
.care-habitat__text h3 { font-size: var(--wp--preset--font-size--xx-large); margin: 0.25rem 0 0.7rem; }
@media (min-width: 782px) { .care-habitat.care-habitat--flip { flex-direction: row-reverse; } }

/* --- round icon chips (objectives / work packages) --- */
.care-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1rem;
	background: var(--wp--preset--color--primary-light); color: var(--wp--preset--color--primary-dark);
	transition: background 0.35s var(--care-ease), color 0.35s var(--care-ease), transform 0.35s var(--care-ease);
}
.care-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.care-objective:hover .care-icon { background: var(--wp--preset--gradient--ocean); color: #fff; transform: rotate(-4deg) scale(1.05); }
.care-wp-card .care-icon { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 0.7rem; }
.care-wp-card .care-icon svg { width: 23px; height: 23px; }
.care-wp-card:hover .care-icon { background: var(--wp--preset--gradient--ocean); color: #fff; }

/* --- approach: visual stepped flow --- */
.care-flow__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; border-radius: 50%;
	background: var(--wp--preset--gradient--ocean); color: #fff;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.55rem;
	box-shadow: 0 10px 22px -8px rgba(10,92,168,0.65); margin-bottom: 1rem; position: relative; z-index: 1;
}
.care-flow__step { position: relative; }
@media (min-width: 782px) {
	.care-flow__step:not(:last-child)::after {
		content: ""; position: absolute; top: 31px; left: calc(50% + 42px); width: calc(100% - 84px); height: 2px; z-index: 0;
		background: repeating-linear-gradient(90deg, var(--wp--preset--color--secondary) 0 7px, transparent 7px 15px);
		opacity: 0.5;
	}
}
.care-flow__step h3 { font-size: var(--wp--preset--font-size--x-large); }

/* --- stats band --- */
.care-statband { position: relative; overflow: hidden; }
.care-statband .care-stat__num { color: #fff; }
.care-statband .care-stat__label { color: var(--wp--preset--color--secondary-light); }

/* --- latest-news cards --- */
.care-newscard { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--hairline); border-radius: var(--care-radius-lg); overflow: hidden; box-shadow: var(--wp--preset--shadow--subtle); transition: transform 0.35s var(--care-ease), box-shadow 0.35s var(--care-ease); height: 100%; }
.care-newscard:hover { transform: translateY(-5px); box-shadow: var(--wp--preset--shadow--large); }
.care-newscard .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.care-newscard .wp-block-post-featured-image img { transition: transform 0.5s var(--care-ease); }
.care-newscard:hover .wp-block-post-featured-image img { transform: scale(1.05); }
.care-newscard .wp-block-post-title a { text-decoration: none; }

/* --- cave overhang on the CTA (echoes the hero) --- */
.care-cta { position: relative; overflow: hidden; }
.care-cta::before {
	content: ""; position: absolute; left: 0; top: 0; width: min(34%, 360px); aspect-ratio: 710 / 629; z-index: 0;
	background: url("assets/images/cave-corner-trim.png") left top / contain no-repeat;
	opacity: 0.1; filter: brightness(0) invert(1); pointer-events: none;
}
.care-cta > .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* more breathing room inside the work-package cards */
.care-wp-card {
	gap: 0.95rem;
	padding: 2rem;
	padding-left: 2.4rem;
	padding-bottom: 3.4rem;
}
.care-wp-card__lead { line-height: 1.6; }
.care-wp-card .care-icon { margin-bottom: 0.9rem; }