/*
 * ECDGA Site styles.
 * Colors read Divi 5 global colors first (Divi > Global Colors), so changing a color in
 * Divi updates these components too. Fallback values match the brand.
 */
:root {
	--ecd-teal: var(--gcid-ecd-teal, #35a4bb);           /* bright teal: large text, icons, accents, text on navy */
	--ecd-teal-dark: var(--gcid-ecd-teal-dark, #247b8f); /* accessible teal: buttons, small links on light backgrounds */
	--ecd-navy: var(--gcid-ecd-navy, #0c2136);           /* dark sections, top bar, footer */
	--ecd-ink: var(--gcid-ecd-ink, #0a1640);             /* headings */
	--ecd-text: var(--gcid-ecd-text, #1b2550);           /* body text */
	--ecd-muted: var(--gcid-ecd-muted, #56626c);         /* secondary text on light tint */
	--ecd-tint: var(--gcid-ecd-tint, #e6f2f4);           /* light teal section background */
	--ecd-hover: var(--gcid-ecd-hover, #e8f9f5);         /* menu hover background */
	--ecd-surface: var(--gcid-ecd-surface, #fafafa);
	--ecd-border: var(--gcid-ecd-border, #e2e6e9);
	--ecd-focus: var(--ecd-teal-dark);
	--ecd-font-ui: "DM Sans", Helvetica, Arial, sans-serif;
	--ecd-font-heading: Montserrat, Helvetica, Arial, sans-serif;
	--ecd-font-display: Outfit, Helvetica, Arial, sans-serif;
	--ecd-font-body: "Open Sans", Helvetica, Arial, sans-serif;
}

/* ---------- Utilities ---------- */
.screen-reader-text,
.ecd-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ecdga-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 18px;
	font: 600 16px/1 var(--ecd-font-ui);
	color: #fff;
	background: var(--ecd-navy);
	border-radius: 6px;
	transform: translateY(-200%);
}

.ecdga-skip-link:focus {
	transform: none;
}

/* Divi removes outlines with :focus{outline:0}. Restore a visible indicator for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.et_pb_button:focus-visible {
	outline: 3px solid var(--ecd-focus) !important;
	outline-offset: 2px;
}

.ecd-on-dark a:focus-visible,
.ecd-on-dark button:focus-visible,
.ecd-on-dark input:focus-visible,
.ecd-on-dark .et_pb_button:focus-visible {
	outline-color: #fff !important;
}

#main-content:focus {
	outline: none;
}

/* ---------- Header ---------- */
/* Whole header is sticky; the top bar scrolls away, the main menu bar stays. */
header.et-l--header {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--ecd-topbar-h, 54px));
	z-index: 9990;
}

.ecd-topbar a {
	color: #fff;
	text-decoration: none;
}

.ecd-topbar a:hover {
	text-decoration: underline;
}

.ecd-topbar-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 500 14px/1.4 var(--ecd-font-body);
}

.ecd-topbar-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
}

.ecd-topbar-links svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex: 0 0 14px;
}

.ecd-search {
	display: flex;
	margin: 0;
}

.ecd-search input[type="search"] {
	width: 200px;
	height: 36px;
	padding: 6px 12px;
	font: 400 14px/1 var(--ecd-font-body);
	color: var(--ecd-text);
	background: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
}

.ecd-search input[type="search"]::placeholder {
	color: #5f6b75;
}

.ecd-search button {
	min-width: 36px;
	height: 36px;
	margin-left: 4px;
	padding: 0 10px;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 3px;
	cursor: pointer;
}

.ecd-search button svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.ecd-mainbar .atemm {
	--atemm-font: var(--ecd-font-ui);
	--atemm-top-color: var(--ecd-ink);
	--atemm-active-bg: var(--ecd-hover);
	--atemm-active-color: var(--ecd-teal-dark);
	--atemm-sub-hover: var(--ecd-teal-dark);
	--atemm-focus: var(--ecd-teal-dark);
}

/* ---------- Section headings ---------- */
.ecd-underline::after {
	content: "";
	display: block;
	width: 63px;
	height: 4px;
	margin-top: 12px;
	background: var(--ecd-teal);
	border-radius: 2px;
}

.ecd-underline-center::after {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Event / news compact cards (on navy) ---------- */
.ate-home-cards {
	display: grid;
	gap: 32px;
}

.ate-compact-cards article {
	display: grid;
	grid-template-columns: 212px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.ate-compact-cards article > a img {
	display: block;
	width: 212px;
	height: 141px;
	object-fit: cover;
	border: 3px solid #fff;
	border-radius: 2px;
}

.ate-compact-cards h3 {
	margin: 0 0 10px;
	padding: 0;
	font: 600 15px/1.35 var(--ecd-font-ui);
	color: #fff;
}

.ate-compact-cards h3 a {
	color: #fff;
	text-decoration: none;
}

.ate-compact-cards h3 a:hover {
	text-decoration: underline;
}

.ate-compact-cards p {
	margin: 0 0 8px;
	padding: 0;
	font: 300 13px/1.6 var(--ecd-font-ui);
	color: rgba(255, 255, 255, 0.82);
}

.ate-readmore {
	font: 400 13px/2 var(--ecd-font-ui);
	color: var(--ecd-teal);
	text-decoration: none;
}

.ate-readmore:hover {
	text-decoration: underline;
}

/* ---------- Announcement cards ---------- */
.ate-news-cards {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	margin-top: 40px;
}

.ate-news-cards article {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10, 22, 64, 0.06);
	transition: box-shadow 0.2s ease;
}

.ate-news-cards article:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.ate-news-cards article > a img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ate-news-cards article > div {
	padding: 16px 20px 28px;
}

.ate-news-cards article > div::before {
	content: "News";
	display: block;
	margin-bottom: 8px;
	font: 600 11px/1 var(--ecd-font-ui);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ecd-teal-dark);
}

.ate-news-cards h3 {
	margin: 0;
	padding: 0;
	font: 700 14px/1.45 var(--ecd-font-heading);
	color: var(--ecd-ink);
}

.ate-news-cards h3 a {
	color: var(--ecd-ink);
	text-decoration: none;
}

.ate-news-cards h3 a:hover {
	color: var(--ecd-teal-dark);
	text-decoration: underline;
}

/* ---------- Concept cards (Patient, Family, Medical, Funding) ---------- */
.ecd-concept-card {
	transition: box-shadow 0.2s ease;
}

.ecd-concept-card:hover,
.ecd-concept-card:focus-within {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.two-column {
	column-count: 2;
	column-gap: 16px;
	margin-bottom: 15px;
}

.two-column a {
	display: block;
	padding: 2px 0;
	font: 500 13px/1.9 var(--ecd-font-body);
	color: var(--ecd-teal-dark);
	text-decoration: none;
	break-inside: avoid;
}

.two-column a:hover {
	text-decoration: underline;
}

/* ---------- Partners ---------- */
.ate-partners {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px 40px;
}

.ate-partners a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: 4px;
}

.ate-partners img {
	display: block;
	width: auto;
	max-width: 160px;
	height: 100px;
	object-fit: contain;
}

/* ---------- Get in touch ---------- */
.ecd-contact-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 30px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.ecd-contact-list li:last-child {
	grid-column: 1 / -1;
}

.ecd-contact-list h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	padding: 0;
	font: 500 20px/1.3 var(--ecd-font-display);
	color: var(--ecd-teal-dark);
}

.ecd-contact-list h3 svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.ecd-contact-list p,
.ecd-contact-list a {
	margin: 0;
	padding: 0;
	font: 400 16px/1.7 var(--ecd-font-ui);
	color: var(--ecd-text);
}

/* ---------- Side quick links ---------- */
.ecd-side-tabs {
	position: fixed;
	top: 180px;
	right: 0;
	z-index: 9980;
}

.ecd-side-tabs ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecd-side-tabs a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 70px;
	min-height: 80px;
	padding: 10px 4px;
	font: 500 11px/1.2 var(--ecd-font-body);
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	border-radius: 6px 0 0 6px;
}

.ecd-side-tabs svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ecd-side-tabs .tab-join { background: var(--ecd-teal-dark); }
.ecd-side-tabs .tab-donate { background: #b5232f; }
.ecd-side-tabs .tab-care { background: #5b6670; }
.ecd-side-tabs .tab-events { background: var(--ecd-navy); }

.ecd-side-tabs a:hover {
	filter: brightness(1.1);
}

.ecd-side-tabs a:focus-visible {
	outline: 3px solid var(--ecd-navy) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff;
}

/* ---------- Footer ---------- */
.ecd-footer-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecd-footer-links li {
	margin: 0 0 6px;
	padding: 0;
}

.ecd-footer-links a,
.ecd-footer address,
.ecd-footer address a {
	font: 400 14px/1.8 var(--ecd-font-body);
	font-style: normal;
	color: #fff;
	text-decoration: none;
}

.ecd-footer-links a:hover,
.ecd-footer address a:hover {
	color: var(--ecd-teal);
	text-decoration: underline;
}

.ecd-badges,
.ecd-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecd-badges img {
	display: block;
	width: auto;
	height: 48px;
}

.ecd-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
}

.ecd-social a:hover {
	color: var(--ecd-navy);
	background: var(--ecd-teal);
	border-color: var(--ecd-teal);
}

.ecd-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.ecd-credit,
.ecd-credit a {
	font: 400 13px/1.6 var(--ecd-font-body);
	color: rgba(255, 255, 255, 0.82);
}

.ecd-credit a {
	text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.ate-news-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ecd-search input[type="search"] {
		width: 150px;
	}
}

@media (max-width: 767px) {
	.ate-compact-cards article {
		grid-template-columns: 1fr;
	}

	.ate-compact-cards article > a img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.ate-news-cards,
	.ecd-contact-list {
		grid-template-columns: 1fr;
	}

	.ecd-side-tabs {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.ecd-side-tabs ul {
		flex-direction: row;
		gap: 0;
	}

	.ecd-side-tabs li {
		flex: 1 1 0;
	}

	.ecd-side-tabs a {
		width: 100%;
		min-height: 56px;
		border-radius: 0;
	}

	body {
		padding-bottom: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ate-news-cards article,
	.ecd-concept-card {
		transition: none;
	}
}