/* ==========================================================================
   MEDS design system
   Palette sampled from the organisation's own kilim banner: madder red,
   indigo, undyed wool. Typography uses the faces the charity already had on
   the previous site (Crimson Text, Work Sans, Amiri) so nothing feels foreign.
   ========================================================================== */

:root {
	/* Wool + dye palette, sampled from the banner */
	--meds-madder:      #9e3b2e;
	--meds-madder-dark: #7c2c22;
	--meds-indigo:      #23374f;
	--meds-indigo-deep: #16222f;
	--meds-ochre:       #c08a3e;
	--meds-cream:       #f5efe3;
	--meds-cream-warm:  #ece3d2;
	--meds-paper:       #fffdf8;
	--meds-rule:        #ddd2bd;
	--meds-ink:         #23374f;
	--meds-ink-soft:    #5c6b7c;

	/* Logo blue, kept because it is theirs — used sparingly */
	--meds-sky:         #6ba0f5;

	--meds-measure:     68ch;
	--meds-serif:       'Crimson Text', Georgia, 'Times New Roman', serif;
	--meds-sans:        'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--meds-arabic:      'Amiri', 'Noto Naskh Arabic', serif;
}

/* --------------------------------------------------------------------------
   Ground + base type
   -------------------------------------------------------------------------- */

body {
	background: var(--meds-cream);
	color: var(--meds-ink);
	font-family: var(--meds-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.entry-content p,
.entry-content li {
	max-width: var(--meds-measure);
	color: var(--meds-ink);
}

.entry-content a {
	color: var(--meds-madder);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.entry-content a:hover { color: var(--meds-madder-dark); }

h1, h2, h3, h4,
.entry-title,
.site-title {
	font-family: var(--meds-serif);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.18;
	color: var(--meds-indigo);
}

h1, .entry-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-top: 2.4em; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); margin-top: 1.9em; }

/* Right-to-left passages: Kurdish (Sorani) and Arabic */
[dir="rtl"], [lang="ar"], [lang="ckb"] {
	font-family: var(--meds-arabic);
	font-size: 1.3em;
	line-height: 1.95;
	color: var(--meds-ink-soft);
}

/* --------------------------------------------------------------------------
   The woven rule — a kilim motif rebuilt in pure CSS.
   This is the signature element; it stands in for section breaks throughout.
   -------------------------------------------------------------------------- */

/* A plain hairline. The kilim motif is kept for the footer band and the
   objective markers, where it is large enough to read as a woven pattern;
   at rule height it just looks like a scribble. */
.meds-weave,
.entry-content hr.wp-block-separator,
.entry-content hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	border: 0;
	height: 1px;
	width: 100%;
	max-width: none;
	margin: 3rem auto;
	opacity: 1;
	background: linear-gradient(
		to right,
		transparent,
		var(--meds-rule) 12%,
		var(--meds-rule) 88%,
		transparent
	);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header-wrap,
.site-header {
	background: var(--meds-paper);
	border-bottom: 1px solid var(--meds-rule);
}

/* Keep the navigation reachable all the way down the page, so every page
   always has a route back to Home, the projects and Contact. */
#masthead,
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
}

.admin-bar #masthead,
.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar #masthead,
	.admin-bar .site-header { top: 46px; }
}

/* A touch more presence once the page is scrolled under it */
#masthead { box-shadow: 0 1px 0 var(--meds-rule), 0 6px 18px -14px rgba(35, 55, 79, 0.45); }

.site-title {
	font-size: clamp(1.05rem, 0.8rem + 0.9vw, 1.5rem) !important;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.site-branding img,
.site-header-item img {
	max-height: 74px;
	width: auto;
}

.header-navigation .menu-item > a,
.main-navigation .menu-item > a {
	font-family: var(--meds-sans);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--meds-indigo);
}

.header-navigation .menu-item > a:hover,
.main-navigation .menu-item > a:hover { color: var(--meds-madder); }

.header-navigation .current-menu-item > a,
.header-navigation .current_page_item > a {
	color: var(--meds-madder);
	box-shadow: inset 0 -2px 0 var(--meds-madder);
}

/* --------------------------------------------------------------------------
   Page title band — replaces Kadence's flat grey with woven cream
   -------------------------------------------------------------------------- */

.entry-hero,
.page-hero-section,
.entry-hero-container-inner {
	background: var(--meds-cream-warm);
	border-bottom: 1px solid var(--meds-rule);
	position: relative;
}

.entry-hero .entry-header,
.page-hero-section .entry-header { padding-block: clamp(2rem, 4vw, 3.4rem); }

/* A single madder hairline closing the title area — quiet, not a zigzag */
.entry-hero::after,
.page-hero-section::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--meds-madder);
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Content card
   -------------------------------------------------------------------------- */

.content-bg,
.entry-content-wrap,
.site-main .content-container > .content-wrap {
	background: var(--meds-paper);
}

.content-area { background: transparent; }

/* --------------------------------------------------------------------------
   Home: hero banner
   -------------------------------------------------------------------------- */

/* The hero is built from the kilim photograph itself, cropped away from the
   old banner's white panel and logo. The textile carries the page; the type
   sits on it under a layered scrim rather than on a flat colour block. */

.meds-hero-section {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(420px, 74vh, 760px);
	padding: clamp(3rem, 8vw, 5.5rem) 1.5rem;
	overflow: hidden;
	isolation: isolate;
	background: var(--meds-indigo-deep);
}

.meds-hero-section__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.meds-hero-section__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	display: block;
	/* Lifted at MEDS's request so the kilim colours read properly. The scrims
	   below were lightened to match, and the type carries a stronger shadow
	   to keep it legible over the brighter weave. */
	filter: brightness(1.16) saturate(1.06);
	/* Slow drift gives the weave a sense of depth without ever distracting */
	animation: meds-drift 38s ease-in-out infinite alternate;
}

@keyframes meds-drift {
	from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
	to   { transform: scale(1.12) translate3d(1.2%, -1%, 0); }
}

/* Two scrims: a vertical one for overall legibility, and a soft radial pool
   behind the type so the centre stays readable over busy patterning. */
.meds-hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(64% 60% at 50% 48%, rgba(11, 18, 25, 0.50) 0%, rgba(11, 18, 25, 0.20) 64%, rgba(11, 18, 25, 0.04) 100%),
		linear-gradient(180deg, rgba(11, 18, 25, 0.38) 0%, rgba(11, 18, 25, 0.12) 40%, rgba(11, 18, 25, 0.46) 100%);
}

.meds-hero-section__inner {
	position: relative;
	text-align: center;
	max-width: 46rem;
}

.meds-hero-section__logo {
	display: block;
	width: clamp(58px, 7vw, 84px);
	height: auto;
	margin: 0 auto 0.85rem;
	filter: drop-shadow(0 2px 14px rgba(8, 14, 20, 0.55));
}

.entry-content .meds-hero-section__org,
.meds-hero-section__org {
	margin: 0 0 0.9rem;
	max-width: none;
	font-family: var(--meds-serif);
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #fdfaf4;
	text-shadow: 0 1px 2px rgba(8, 14, 20, 0.6), 0 2px 20px rgba(8, 14, 20, 0.8);
}

/* These need to out-specify `.entry-content p`, which sets the dark body ink
   and would otherwise render the hero type almost invisible on the image. */
.entry-content .meds-hero-section__eyebrow,
.meds-hero-section__eyebrow {
	margin: 0 0 1.4rem;
	max-width: none;
	font-family: var(--meds-sans);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #edc78b;
	text-shadow: 0 1px 2px rgba(8, 14, 20, 0.7), 0 2px 18px rgba(8, 14, 20, 0.85);
}

.meds-hero-section h1 {
	margin: 0 0 0.7rem;
	font-family: var(--meds-serif);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #fffdf8;
	text-shadow: 0 1px 3px rgba(8, 14, 20, 0.55), 0 3px 30px rgba(8, 14, 20, 0.7);
}

.meds-hero-section__rule {
	width: 68px;
	height: 2px;
	margin: 1.6rem auto 1.5rem;
	background: var(--meds-ochre);
	opacity: 0.9;
}

.entry-content .meds-hero-section__rtl,
.meds-hero-section__rtl {
	margin: 0.3rem auto;
	max-width: none;
	font-family: var(--meds-arabic);
	font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
	line-height: 1.9;
	color: #f0e8d8;
	text-shadow: 0 1px 2px rgba(8, 14, 20, 0.7), 0 2px 20px rgba(8, 14, 20, 0.9);
}

/* The hero must meet the header. Kadence puts 80px of margin on .content-area
   and 32px of padding on .entry-content-wrap — 112px of pale band above the
   image. Removed on the front page only, so inner pages keep their breathing
   room. */
.home .content-area { margin-top: 0; }
.home .entry-content-wrap { padding-top: 0; }
.home .entry.content-bg { background: transparent; }

/* A quiet cue that there is more below */
.meds-hero-section__cue {
	position: absolute;
	left: 50%;
	bottom: 1.6rem;
	width: 1px;
	height: 44px;
	transform: translateX(-50%);
	background: linear-gradient(to bottom, transparent, rgba(240, 232, 218, 0.75));
	animation: meds-cue 2.6s ease-in-out infinite;
}

@keyframes meds-cue {
	0%, 100% { opacity: 0.25; transform: translateX(-50%) scaleY(0.55); }
	50%      { opacity: 0.9;  transform: translateX(-50%) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.meds-hero-section__media img { animation: none; transform: scale(1.04); }
	.meds-hero-section__cue { animation: none; opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   Objectives strip
   -------------------------------------------------------------------------- */

.meds-objectives {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
	background: var(--meds-rule);
	border-block: 1px solid var(--meds-rule);
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.meds-objectives li {
	background: var(--meds-cream);
	padding: 1.7rem 1.5rem;
	margin: 0;
	max-width: none;
	font-size: 0.98rem;
	line-height: 1.55;
	position: relative;
}

.meds-objectives li::before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	margin-bottom: 0.9rem;
	background: var(--meds-madder);
}

/* --------------------------------------------------------------------------
   Project cards
   -------------------------------------------------------------------------- */

/* There are five projects. A 300px floor yields three columns on desktop
   (3 + 2) rather than four, which would strand a single card on its own row. */
.meds-projects {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.6rem;
	margin-block: 2.2rem 1rem;
}

.meds-card {
	display: flex;
	flex-direction: column;
	background: var(--meds-paper);
	border: 1px solid var(--meds-rule);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.meds-card:hover,
.meds-card:focus-visible {
	transform: translateY(-4px);
	border-color: var(--meds-madder);
	box-shadow: 0 14px 30px -18px rgba(35, 55, 79, 0.55);
}

.meds-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--meds-cream-warm);
}

.meds-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	transition: transform 500ms ease;
}

.meds-card:hover .meds-card__media img { transform: scale(1.04); }

.meds-card__body { padding: 1.15rem 1.25rem 1.4rem; }

.meds-card__body h3 {
	margin: 0 0 0.45rem;
	font-size: 1.12rem;
	line-height: 1.3;
	color: var(--meds-indigo);
}

.meds-card:hover .meds-card__body h3 { color: var(--meds-madder); }

.meds-card__body p {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--meds-ink-soft);
	max-width: none;
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.meds-cta {
	background: var(--meds-indigo);
	color: var(--meds-cream);
	text-align: center;
	padding: clamp(2.2rem, 5vw, 3.4rem) 1.5rem;
	margin-top: 3rem;
}

.meds-cta h2 { color: var(--meds-cream); margin: 0 0 0.6rem; }
.meds-cta p  { color: #cdd7e2; max-width: 54ch; margin: 0 auto 1.5rem; }

.meds-btn {
	display: inline-block;
	background: var(--meds-madder);
	color: #fff !important;
	font-family: var(--meds-sans);
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.95em 2.1em;
	border: 0;
	transition: background 200ms ease, transform 200ms ease;
}

.meds-btn:hover { background: var(--meds-madder-dark); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Featured image on project pages
   -------------------------------------------------------------------------- */

/* Show the photograph whole rather than slicing it into a letterbox band.
   Several are portrait and only ~680-1024px wide; cropping them to a
   full-width strip cut people's faces off and upscaled them into grain.
   Capping the height instead keeps faces visible and the image sharp. */
.meds-page-figure {
	margin: 0 auto 2.4rem;
	text-align: center;
}

.meds-page-figure img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 520px;
	border: 1px solid var(--meds-rule);
	background: var(--meds-cream-warm);
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.wpcf7 label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--meds-ink-soft);
	margin-bottom: 1.15rem;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	max-width: 34rem;
	margin-top: 0.4rem;
	padding: 0.72rem 0.85rem;
	font-family: var(--meds-sans);
	font-size: 1rem;
	color: var(--meds-ink);
	background: var(--meds-paper);
	border: 1px solid var(--meds-rule);
	border-radius: 0;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wpcf7 textarea { max-width: 100%; min-height: 11rem; resize: vertical; }

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--meds-madder);
	box-shadow: 0 0 0 3px rgba(158, 59, 46, 0.13);
}

.wpcf7 input[type="submit"] {
	background: var(--meds-madder);
	color: #fff;
	font-family: var(--meds-sans);
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.95em 2.4em;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--meds-madder-dark);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer,
.site-footer-wrap,
.footer-html {
	background: var(--meds-indigo-deep);
	color: #b9c4d1;
}

.site-footer a { color: #dbe3ec; }
.site-footer a:hover { color: #fff; }

.site-footer-wrap .site-container { padding-block: 2rem; }

.footer-html {
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	line-height: 1.8;
}

/* A clean band of the brand colours closing the page */
.site-footer::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(
		to right,
		var(--meds-madder) 0%,
		var(--meds-madder) 45%,
		var(--meds-ochre) 45%,
		var(--meds-ochre) 100%
	);
}

/* --------------------------------------------------------------------------
   Motion — one considered page-load reveal, and nothing more
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.meds-tagline h1,
	.meds-tagline p,
	.meds-card {
		animation: meds-rise 620ms cubic-bezier(0.22, 0.68, 0.35, 1) both;
	}
	.meds-tagline p            { animation-delay: 90ms; }
	.meds-tagline p + p        { animation-delay: 150ms; }
	.meds-card:nth-child(2)    { animation-delay: 70ms; }
	.meds-card:nth-child(3)    { animation-delay: 140ms; }
	.meds-card:nth-child(4)    { animation-delay: 210ms; }
	.meds-card:nth-child(5)    { animation-delay: 280ms; }
}

@keyframes meds-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

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

@media (max-width: 767px) {
	body { font-size: 1rem; }
	.meds-hero img { max-height: 46vh; }
	.site-branding img, .site-header-item img { max-height: 54px; }
	.meds-objectives li { padding: 1.3rem 1.2rem; }
	.entry-content p, .entry-content li { max-width: none; }
}

/* --------------------------------------------------------------------------
   Impact band
   Every figure here is drawn from MEDS's own page copy — nothing invented.
   -------------------------------------------------------------------------- */

.meds-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	background: rgba(245, 239, 227, 0.14);
	border-block: 1px solid rgba(245, 239, 227, 0.14);
}

.meds-stats__band { background: var(--meds-indigo); padding-block: 0; }

.meds-stats__item {
	background: var(--meds-indigo);
	padding: 2.1rem 1.4rem;
	text-align: center;
}

.meds-stats__figure {
	display: block;
	font-family: var(--meds-serif);
	font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
	line-height: 1;
	color: #f0c98a;
	letter-spacing: -0.02em;
}

.meds-stats__label {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.83rem;
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: #c3cedb;
}

/* --------------------------------------------------------------------------
   "More of our work" — stops project pages being dead ends
   -------------------------------------------------------------------------- */

.meds-more {
	margin-top: 3.4rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--meds-rule);
}

.meds-more__title {
	margin: 0 0 1.1rem;
	font-size: 1.15rem;
	color: var(--meds-ink-soft);
	font-family: var(--meds-sans);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.meds-more__links { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.meds-more__link {
	display: inline-block;
	padding: 0.55em 1.05em;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--meds-indigo);
	text-decoration: none;
	background: var(--meds-cream);
	border: 1px solid var(--meds-rule);
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.meds-more__link:hover {
	background: var(--meds-madder);
	border-color: var(--meds-madder);
	color: #fff;
}

.meds-more__link--home {
	background: var(--meds-indigo);
	border-color: var(--meds-indigo);
	color: #fff;
	font-weight: 500;
}

.meds-more__link--home:hover {
	background: var(--meds-indigo-deep);
	border-color: var(--meds-indigo-deep);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.meds-footer {
	background: var(--meds-indigo-deep);
	color: #b9c4d1;
	padding: clamp(2.4rem, 5vw, 3.6rem) 1.5rem clamp(1.8rem, 3vw, 2.6rem);
}

.meds-footer__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.4fr 1.2fr;
	gap: clamp(1.6rem, 3vw, 3rem);
}

.meds-footer__logo {
	width: 64px;
	height: auto;
	margin-bottom: 0.9rem;
	display: block;
}

.meds-footer__name {
	font-family: var(--meds-serif);
	font-size: 1.12rem;
	color: var(--meds-cream);
	margin: 0 0 0.55rem;
	line-height: 1.3;
}

.meds-footer__blurb {
	margin: 0;
	font-size: 0.87rem;
	line-height: 1.65;
	color: #96a4b3;
	max-width: 34ch;
}

.meds-footer__heading {
	font-family: var(--meds-sans);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #f0c98a;
	margin: 0 0 0.95rem;
}

.meds-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.89rem;
	line-height: 1.55;
}

.meds-footer__list li { margin-bottom: 0.55rem; }

.meds-footer__list a {
	color: #c3cedb;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 160ms ease, border-color 160ms ease;
}

.meds-footer__list a:hover {
	color: #fff;
	border-bottom-color: var(--meds-madder);
}

.meds-footer__reg {
	margin: 1.1rem 0 0;
	font-size: 0.79rem;
	line-height: 1.7;
	color: #8494a5;
}

/* Kadence's own credit bar sits beneath, reduced to a quiet rule */
.site-footer-wrap .site-container { padding-block: 1.1rem; }
.footer-html { font-size: 0.79rem; color: #7e8e9f; }

@media (max-width: 900px) {
	.meds-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.meds-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
	.meds-footer__blurb { max-width: none; }
}

/* --------------------------------------------------------------------------
   Scroll reveals
   Only applied once the script confirms IntersectionObserver support and that
   reduced motion is not requested — so content is never hidden without a way
   to bring it back.
   -------------------------------------------------------------------------- */

.meds-reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 700ms cubic-bezier(0.22, 0.68, 0.35, 1),
	            transform 700ms cubic-bezier(0.22, 0.68, 0.35, 1);
	will-change: opacity, transform;
}

.meds-reveal-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Cards inside a revealed group stagger in after it */
.meds-reveal-ready [data-reveal] .meds-card,
.meds-reveal-ready [data-reveal] .meds-stats__item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 0.68, 0.35, 1);
}

.meds-reveal-ready [data-reveal].is-revealed .meds-card,
.meds-reveal-ready [data-reveal].is-revealed .meds-stats__item {
	opacity: 1;
	transform: none;
}

.meds-reveal-ready [data-reveal].is-revealed .meds-card:nth-child(1),
.meds-reveal-ready [data-reveal].is-revealed .meds-stats__item:nth-child(1) { transition-delay: 60ms; }
.meds-reveal-ready [data-reveal].is-revealed .meds-card:nth-child(2),
.meds-reveal-ready [data-reveal].is-revealed .meds-stats__item:nth-child(2) { transition-delay: 140ms; }
.meds-reveal-ready [data-reveal].is-revealed .meds-card:nth-child(3),
.meds-reveal-ready [data-reveal].is-revealed .meds-stats__item:nth-child(3) { transition-delay: 220ms; }
.meds-reveal-ready [data-reveal].is-revealed .meds-card:nth-child(4),
.meds-reveal-ready [data-reveal].is-revealed .meds-stats__item:nth-child(4) { transition-delay: 300ms; }
.meds-reveal-ready [data-reveal].is-revealed .meds-card:nth-child(5) { transition-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
	.meds-reveal-ready [data-reveal],
	.meds-reveal-ready [data-reveal] .meds-card,
	.meds-reveal-ready [data-reveal] .meds-stats__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}