/* ACT4KIDS-TB Core blocks. Colours fall back to the brand values if the theme is not active. */
.a4k-illustration { --a4k-ink: var(--wp--preset--color--ink, #0D2137); }
.a4k-illustration svg { display: block; width: 100%; height: auto; }
.a4k-svg-label { font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", system-ui, sans-serif); }
.a4k-svg-label--sans { font-family: var(--wp--preset--font-family--body, "Instrument Sans", system-ui, sans-serif); }
.a4k-ill-icon { max-width: 200px; margin-inline: auto; }
.a4k-ill-wpline { height: 90px; }
.a4k-illustration--wp-line svg { height: 90px; }

/* Hero tree: overflows the bottom of the hero on large screens. */
.a4k-illustration--airway-tree { align-self: flex-end; }
@media (min-width: 900px) {
	.a4k-illustration--airway-tree svg { width: 128%; max-width: none; margin: 0 -28% -110px -6%; }
}

/* Animations */
@keyframes a4k-draw { to { stroke-dashoffset: 0; } }
@keyframes a4k-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes a4k-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes a4k-dash { to { stroke-dashoffset: -48; } }
@keyframes a4k-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
@keyframes a4k-spin { to { transform: rotate(360deg); } }
@keyframes a4k-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes a4k-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes a4k-drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -14px); } }
@keyframes a4k-drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, -18px); } }
@keyframes a4k-drift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, 20px); } }
@keyframes a4k-ticker { to { transform: translateX(-50%); } }
@keyframes a4k-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.a4k-draw path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: a4k-draw 2.6s cubic-bezier(.4, 0, .2, 1) .3s forwards; }
.a4k-pop circle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: a4k-pop .5s ease-out 2.2s forwards; }
.a4k-pop--late circle { animation: a4k-pop .5s ease-out 2.4s forwards, a4k-breathe 3.2s ease-in-out 3s infinite; }
.a4k-flow, .a4k-flow path { animation: a4k-dash 2.4s linear infinite; }
.a4k-ping { transform-box: fill-box; transform-origin: center; animation: a4k-ping 2.4s ease-out infinite; }
.a4k-ping-soft { transform-box: fill-box; transform-origin: center; animation: a4k-pulse 2.8s ease-in-out infinite; }
.a4k-spin { transform-box: view-box; transform-origin: 300px 170px; animation: a4k-spin 14s linear infinite; }
.a4k-spin-slow { transform-box: view-box; transform-origin: 80px 82px; animation: a4k-spin 12s linear infinite; }
.a4k-bob { animation: a4k-bob 4s ease-in-out infinite; }
.a4k-pulse { transform-box: fill-box; transform-origin: center; animation: a4k-pulse 3s ease-in-out infinite; }
.a4k-drift1 { animation: a4k-drift1 9s ease-in-out infinite; }
.a4k-drift2 { animation: a4k-drift2 11s ease-in-out infinite; }
.a4k-drift3 { animation: a4k-drift3 10s ease-in-out infinite; }

/* Dot grid */
.a4k-dots { max-width: 480px; }
.a4k-dots-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 12px; }
.a4k-dot { display: block; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--wp--preset--color--ink, #0D2137); }
.a4k-dot--unseen { background: transparent; border: 2.5px dashed var(--wp--preset--color--signal, #C93E22); box-sizing: border-box; animation: a4k-breathe 3.6s ease-in-out infinite; }
.a4k-dots-legend { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; font-size: 15px; color: var(--wp--preset--color--slate, #2B4966); }
.a4k-dots-legend > span { display: inline-flex; align-items: center; gap: 10px; }
.a4k-dot--key { width: 16px; height: 16px; animation: none; }
.a4k-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--muted, #5B7388); }

/* Ticker */
.a4k-ticker { overflow: hidden; padding: 22px 0; background: var(--wp--preset--color--ink, #0D2137); color: var(--wp--preset--color--marigold, #FFB300); border-top: 1px solid #2B4966; }
.a4k-tick { display: flex; width: max-content; animation: a4k-ticker 34s linear infinite; font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif); font-weight: 800; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.035em; white-space: nowrap; }
.a4k-tick-item { padding-right: 48px; }
.a4k-tick-item--alt { color: var(--wp--preset--color--paper, #F3F6F2); }
.a4k-ticker:hover .a4k-tick { animation-play-state: paused; }

/* Time to result */
.a4k-time { background: var(--wp--preset--color--paper, #F3F6F2); border-radius: 28px; padding: 40px max(24px, 3vw); }
.a4k-time-title { margin: 0 0 28px; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--forest, #0D5C4B); }
.a4k-time-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-bottom: 22px; }
.a4k-time-label { flex: 0 0 130px; font-size: 16px; font-weight: 600; }
.a4k-time-track { flex: 1 1 240px; display: flex; align-items: center; gap: 16px; }
.a4k-time-bar { display: block; height: 22px; border-radius: 999px; transform-origin: left center; animation: a4k-fill 2.4s cubic-bezier(.4, 0, .2, 1) .4s both; }
.a4k-time-bar--long { flex: 1; background: var(--wp--preset--color--ink, #0D2137); }
.a4k-time-bar--short { width: 2.4%; min-width: 14px; background: var(--wp--preset--color--marigold, #FFB300); }
.a4k-time-val { font-family: var(--wp--preset--font-family--display, "Bricolage Grotesque", sans-serif); font-weight: 700; font-size: 22px; white-space: nowrap; }

/* Funding acknowledgement */
.a4k-funding { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; padding: 28px; border-radius: 20px; border: 1.5px solid currentColor; }
.a4k-funding--dark { border-color: #2B4966; color: #9FB8CC; }
.a4k-funding--light { border-color: rgba(13, 33, 55, .25); color: var(--wp--preset--color--slate, #2B4966); background: #fff; }
.a4k-funding-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.a4k-funding-eu { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; line-height: 1.25; max-width: 220px; }
.a4k-funding--dark .a4k-funding-eu { color: #F3F6F2; }
.a4k-funding--light .a4k-funding-eu { color: var(--wp--preset--color--ink, #0D2137); }
.a4k-eu-flag { flex: none; display: block; }
.a4k-funding-gh { display: inline-block; line-height: 44px; min-height: 44px; padding: 0 16px; white-space: nowrap; border-radius: 10px; font-size: 15px; letter-spacing: .01em; border: 1.5px solid currentColor; }
.a4k-funding--dark .a4k-funding-gh { color: #F3F6F2; }
.a4k-funding-logo { max-height: 56px; width: auto; display: block; }
.a4k-funding--dark .a4k-funding-logo { background: #fff; padding: 6px 10px; border-radius: 8px; }
.a4k-funding-text { flex: 1 1 380px; }
.a4k-funding-text p { margin: 0; font-size: 14px; line-height: 1.6; }
.a4k-funding-text p + p { margin-top: 8px; }
.a4k-funding-disclaimer { font-size: 13px !important; opacity: .85; }

.a4k-editor-preview { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.a4k-illustration *, .a4k-dots *, .a4k-tick, .a4k-time-bar { animation: none !important; }
	.a4k-draw path { stroke-dashoffset: 0 !important; }
	.a4k-pop circle { opacity: 1 !important; }
}

.a4k-ticker .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

/* Official Global Health EDCTP3 logo; EU emblem rules: permitted typeface, white edge on dark backgrounds (v0.1.4) */
.a4k-funding-ghlogo { display: inline-flex; align-items: center; }
.a4k-funding-ghlogo svg { display: block; width: auto; height: 60px; }
.a4k-funding--dark .a4k-funding-ghlogo svg * { fill: #fff; }
.a4k-funding-eu > span { font-family: Arial, Helvetica, sans-serif; }
.a4k-funding--dark .a4k-eu-flag { box-shadow: 0 0 0 2px #fff; }
/* GH EDCTP3 logo at least as visible as the EU emblem (v0.1.5) */
.a4k-funding-ghlogo svg { height: 80px; }
@media (max-width: 480px) { .a4k-funding-ghlogo svg { height: 68px; } }