/* Base Styles */
:root {

	/* SOFT HUES */
	--color-optimistic_ice: #c2edf0;
	--color-reach_for_the_sky_blue: #99d9df;
	--color-possibility_pearl: #eef3f4;
	--color-confident_cream: #f3f2b3;

	/* BRIGHT/INTENSE COLORS */
	--color-enterprise_aqua: #00c0ca;
	--color-gritty_green: #bbd153;
	--color-empowered_yellow: #e3e24f;
	--color-leadership_lime: #8fc440;

	/* MUTED/MEDIUM TONES */
	--color-resilient_turquoise: #00a0af;
	--color-transforming_teal: #008b9c;
	--color-adaptable_azure: #28708b;
	--color-boundless_blue:#285F74;
	--color-start_up_jade: #46b17b;
	--color-global_green: #009424;
	--color-sustainable_forest: #00763d;

	/* DARK TONE/TEXT */
	--color-immersive_blue_black: #22404d;

	--color-white: #ffffff;
	--color-black: #000000;

	--color-grey: #8F8F8F;
	--color-grey_middle: #8F8F8F;
	--color-grey_light: #eef3f4;
	--color-grey_dark: #3A3A3A;

	/* FONT SIZES */
	--fs-sm: clamp(0.8rem, 0.5vi + 0.67rem, 1.13rem);
	--fs-base: clamp(1rem, 0.77vi + 0.81rem, 1.5rem);
	--fs-md: clamp(1.25rem, 1.15vi + 0.96rem, 2rem);
	--fs-lg: clamp(1.56rem, 1.7vi + 1.14rem, 2.67rem);
	--fs-xl: clamp(1.95rem, 2.46vi + 1.34rem, 3.55rem);
	--fs-xxl: clamp(2.44rem, 3.53vi + 1.56rem, 4.74rem);
	--fs-xxxl: clamp(3.05rem, 5.02vi + 1.8rem, 6.31rem);

	--page-max_width: 1920px;
	--page-margin_inline: clamp(16px, calc(-16.308px + 8.077vw), 100px);

	--content-width: calc( 100% - (2 * var(--page-margin_inline)) );
	--content-max_width: 1240px;
	--content-column_width: min(var(--content-max_width), var(--content-width));
}

html {
	margin: 0;
	padding: 0;

	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: var(--fs-base);
	line-height: 1.4;
	hyphenate-limit-chars: 6 3 3;
	hyphenate-character: "—";
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--color-grey_dark);
}

video {
	width: 100%;
	height: auto;
}

#page {
	color: var(--color-black);
	background-color: var(--color-white);
	width: min(100vw, var(--page-max_width));
	margin-inline: auto;
}

.site-header,
.site-main,
.site-footer {
	display: grid;
	grid-template-columns:
		[page-start bleed-start]
		var(--page-margin_inline)
		1fr
			[content-start] var(--content-column_width) [content-end]
		1fr
		var(--page-margin_inline)
		[page-end bleed-end];
	grid-auto-rows: auto;
	gap: 0;

	& > section {
		grid-column: content;
		grid-row: auto;
		container-type: inline-size;
	}
	.bleed {
		grid-column: bleed;

		.content {
			margin-inline: auto;
			width: var(--content-column_width);
		}
	}
}

picture {
	display: block;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 0.75rem;
}
a {
	hyphens: auto;
	hyphenate-character: "";
}


hr.gradient-rule {
	border: none;
	margin-block: 0;
	width: 100%;
	height: 0.666666rem;
	background-image: linear-gradient(to right, var(--color-empowered_yellow), var(--color-adaptable_azure));

	&.thin {
		height: 0.1666666rem;
	}
}

.gradient-ruled-paragraph {
	width: fit-content;
	margin-inline: auto;
	padding-bottom: 0.825rem;

	border-bottom: 0.1666666667rem solid transparent; /* Sets the width of the border */

	/* 1st gradient: Inner element background (clipped to padding) */
	/* 2nd gradient: Your actual border gradient (clipped to the outer box) */
	background:
	linear-gradient(var(--background-color, #fff), var(--background-color, #fff)) padding-box,
	linear-gradient(to right, var(--color-empowered_yellow), var(--color-adaptable_azure)) border-box;

	&.top {
		border-bottom: 0;
		border-top: 4px solid transparent;
	}
}



.grey_light-bg {
	background-color: var(--color-grey_light);
}

ul, ol {
	margin-inline: 1.5rem;
	padding-inline: 0;
}

strong {
	font-weight: 600;
}
b {
	font-weight: 700;
}
h2 {
	margin-block: 0 2rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 5%;
	color: var(--color-boundless_blue);
	text-wrap: pretty;
}
.large {
	font-size: 2.75rem;
}
.width-limit {
	width: min(100%, var(--max-width));
	margin-inline: auto;
}
.fw-medium {
	font-weight: 500;
}
.uppercase {
	text-transform: uppercase;
}
.align-center {
	margin-inline: auto;
	text-align: center;
}


.aqua { color: var(--color-enterprise_aqua); }
.turquoise { color: var(--color-resilient_turquoise); }
.teal { color: var(--color-transforming_teal); }
.azure { color: var(--color-adaptable_azure); }
.blue { color: var(--color-boundless_blue); }
.blue-black { color: var( --color-immersive_blue_black); }

form {

	.form-row {
		position: relative;
		margin-top: 1rem;
		margin-bottom: 2rem;
		border-bottom: 1px solid var(--color-base);

		&.buttons {
			border-bottom: 0;
		}

		&:has(input[type="submit"]) {
			margin-block-start: 3rem;
		}

		&:not(.buttons, .submit-result):focus-within {
			background-color: var(--color-grey_light);

			&>input,
			&>textarea,
			&>select {
				outline: none;
			}
		}

		&.submit,
		&.submit-result {
			border-bottom: none;
		}

		&.submit-result {
			padding-block: 0.625rem;
			padding-inline: 1rem;
			font-weight: var(--font-weight_medium);

			&.error {
				color: #842029;
				background-color: #f8d7da;
				border-radius: 5px;
			}
			&.success {
				color: #0f5132;
				background-color: #d1e7dd;;
				border-radius: 5px;
			}
		}
	}

	input,
	textarea,
	select {
		display: block;
		width: 100%;
		height: 2rem;
		padding-block: 0.125em;
		padding-inline: 0.125em;
		border: 1px solid var(--color-grey_middle);
		border-radius: 0.25rem;
		font-family: "Montserrat", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-size: 1rem;
	}


	@container (width > 680px) {

		.form-row {
			display: flex;
			gap: 2rem;
			align-items: top;
		}

		textarea {
			height: 12rem;
		}
	}

}

.buttons {
	margin-block: 2rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem 1.5rem;
}

.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
	display: inline-block;
	width: auto;
	height: auto;
	text-box-trim: trim-both;
	padding-block: 0.75rem;
	padding-inline: 2rem;
	flex-grow: 0;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	color: white;
	border: 0;

	cursor: pointer;

	background-color: var(--color-resilient_turquoise);
	border-radius: 0.5rem;

	&.aqua { background-color: var(--color-enterprise_aqua); }
	&.turquoise { background-color: var(--color-resilient_turquoise); }
	&.teal { background-color: var(--color-transforming_teal); }
	&.azure { background-color: var(--color-adaptable_azure); }
	&.blue { background-color: var(--color-boundless_blue); }
	&.blue-black { background-color: var( --color-immersive_blue_black); }

	&:any-link {
		text-decoration: none;
	}
	&:hover, &:focus-visible {
		text-decoration: underline;
	}
	&:active {
		text-decoration: none;
	}
}

input[type=checkbox],
input[type=radio] {
	display: block;
	width: 2em;
	height: 2em;
}
label {
	font-size: 0.874rem;
	font-weight: 400;
	text-transform: none;
}
label:has(input[type=checkbox], input[type=radio]) {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem
}

/* Site Header Styles */

.site-header {
	position: sticky;
	top: 0;
	z-index: 3;

	color: var(--color-white);
	background-color: var(--color-enterprise_aqua);

	a:any-link {
		color: var(--color-white);
		text-decoration: none;
	}
	a:hover, a:focus-visible {
		color: var(--color-gritty_green);
	}
	a:active {
		color: var(--color-start_up_jade);
	}

	line-height: 1.2;

	.main-navigation {
		padding-block: 1.25rem;
		display: grid;
		grid-template-columns: 1fr 40px;
		grid-template-areas:
			"logo toggle"
			"menu menu";
		gap: 0;

		anchor-name: --main-navigation;
	}

	.home-link {
		grid-area: logo;
		display: block;
		width: max(20%, 8rem);
		height: auto;
		justify-self: start;
		align-self: center;
	}

	.mobile-menu-toggle {
		grid-area: toggle;
		justify-self: end;
		align-self: center;
		margin: 0;
		padding: 0;
		width: 32px;
		height: 32px;
		cursor: pointer;
		background-color: transparent;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="%23e3e3e3"><path d="M140-254.62V-300h680v45.38H140Zm0-202.69v-45.38h680v45.38H140ZM140-660v-45.38h680V-660H140Z"/></svg>');
		background-position: center;
		background-size: 48px 48px;
		border: 0;

		&[hidden] {
			display: none;
			visibility: hidden;
		}
		&.close {
			background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="%23e3e3e3"><path d="m250.92-218.92-32-32L448-480 218.92-709.08l32-32L480-512l229.08-229.08 32 32L512-480l229.08 229.08-32 32L480-448 250.92-218.92Z"/></svg>');
		}
	}

	.header-menu-list {
		grid-area: menu;
		justify-self: start;

		margin: 1rem 0 0 0;
		padding: 0;
		list-style: none;

		font-size: 1rem;

		.menu-item {
			padding-block: 0.5rem;
		}
		.submenu-toggle[hidden] {
			display: none;
			visibility: hidden;
		}
	}
	.header-submenu-list {
		list-style: none;
		margin-block: 0.5rem;
		margin-inline: 1.5rem 0;
		padding: 0;
	}

	@media (width > 768px) {

		.main-navigation {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			gap: 2rem 3rem;
			white-space: nowrap;

			.header-menu-list {
				margin: 0;
				padding: 0;
				display: flex;
				gap: 2rem 2rem;
				align-items: center;
				justify-content: space-between;

				padding-block: 0;

				animation: none;

				font-size: revert;
				line-height: revert;

				.menu-item {
					position: relative;
					margin-block: 0;
				}
			}
			.submenu-toggle {
				display: inline-block;
				margin: 0;
				margin-left: 0.25rem;
				padding: 0;
				width: 1rem;
				height: 1rem;
				background-color: transparent;
				font-size: 1.5rem;
				line-height: 1;
				text-box-trim: trim-both;
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="%23e3e3e3"><path d="M480-357.85 253.85-584l32.61-32.61L480-423.08l193.54-193.53L706.15-584 480-357.85Z"/></svg>');
				background-size: 48px 48px;
				background-position: center;
				background-repeat: no-repeat;
				vertical-align: middle;
			}
			.header-submenu-list {
				margin: 0;
				padding: 0.5em;

				& *:any-link {
					color: var(--color-black);
					text-decoration: none;
				}
				& *:hover, &  *:focus-visible {
					color: var(--color-black);
					text-decoration: underline;
				}
				& *:active {
					color: var(--color-immersive_blue_black);
					text-decoration: none;
				}

				.menu-item {
					padding-block: 0.25em;
					padding-inline: 0.5em;
					color: var(--color-black);
				}
			}
			#menu-item-support-ja {
				anchor-name: --anchor-support-ja;
			}
			#subnav-support-ja[popover] {
				position: absolute;
				margin: 0.5rem 0 0 0;
				position-anchor: --anchor-support-ja;
				width: calc(anchor-size(width) + 2rem); /* Matches the anchor/parent width */
				top: anchor(bottom);
				left: anchor(left);
				position-try-fallbacks: flip-block;
				border: 0;
				box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
			}

		}
	}
}

.site-main {

	z-index: 1;

	color: black;
	background-color: white;

	:is(h1, h2, h3, h4, h5, h6) {
		font-weight: 700;
		line-height: 1.2;
		hyphens: auto;
	}
}

/* Site Footer Styles */

.site-footer {
	color: var(--color-white);
	background-color: var(--color-resilient_turquoise);

	a:any-link {
		color: var(--color-white);
		text-decoration: none;
	}
	a:hover, a:focus-visible {
		color: var(--color-gritty_green);
	}
	a:active {
		color: var(--color-start_up_jade);
	}

	.content {
		padding-block: 6rem;

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"sitemap"
			"contact-info"
			"home-link";
		gap: 1.5rem;

		--item-width: min(16rem, 80%);

		@media (width > 768px) {
			grid-template-columns: 38% 38%;
			grid-template-rows: auto auto;
			grid-template-areas:
				"home-link sitemap"
				"home-link contact-info";
			gap: 1.5rem 24%;

			--item-width: 100%;
		}
	}

	.home-link {
		grid-area: home-link;
		margin-top: 2.2rem;

		width: var(--item-width);
	}
	.sitemap {
		grid-area: sitemap;
	}
	.sitemap-list {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: right;

		.sitemap-item {
			margin-bottom: 0.625em;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.contact-info {
		grid-area: contact-info;
		justify-self: end;
		border-top: 2px solid var(--color-confident_cream);
		padding-block: 1.5rem;
		text-align: right;
		white-space: nowrap;
		width: var(--item-width);
	}

	.sns {
		margin-inline: 0;
		padding: 0;
		list-style: none;

		li {
			display: inline-block;
			margin-left: 0.5rem;
		}

		svg {
			width: 1rem;
			height: 1rem;
		}
	}
}

.home {
	.introduction {
		padding-block: 1rem;
		color: var(--color-immersive_blue_black);
		text-align: center;


	}
	.why-ja, .ja-difference {
		padding-block: 1.5rem;

		h2 {
			text-align: center;
		}
	}

	.cta-gray {
		padding-block: 1rem;
		background-color: var(--color-grey_light);
	}
}

.impact {
	margin-block: 2rem;
	margin-inline: 8%;

	.figure {
		margin: 0;
		font-size: 5rem;
		font-weight: 700;
		line-height: 1;
		text-box: trim;
		color: transparent;
		background-image: linear-gradient(90deg, var(--color-transforming_teal), var(--color-resilient_turquoise));
		background-clip: text;
		-webkit-background-clip: text; /* Required for Chrome, Safari, and Edge compatibility */
	}
	details {
		font-size: 1.143rem;
		container-type: inline-size;

		summary {
			margin-bottom: 1rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 0.5rem;
			cursor: pointer;

			font-size: 1.429rem;
			font-weight: 300;
			text-transform: uppercase;

			&::marker {
				content: none;
			}
			&::after {
				width: 45px;
				min-width: 45px;
				height: 45px;
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 45 45"><defs><style>.cls-1 {fill: none;stroke: url(%23linear-gradient);stroke-miterlimit: 10;stroke-width: 4px;}.cls-2 {fill: %23eef3f4;}</style><linearGradient id="linear-gradient" x1="-980.95" y1="-5186.35" x2="-967.7" y2="-5186.35" gradientTransform="translate(5213.8104 -925.8177) rotate(-89.6985)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%238cc441"/><stop offset="1" stop-color="%231fbdc7"/></linearGradient></defs><circle class="cls-2" cx="22.5" cy="22.5" r="22.5"/><polyline class="cls-1" points="11.42 26.28 21.64 17.16 33.47 26.28"/></svg>');
				transition: transform 0.2s ease;
			}
		}
		&[open] summary::after {
			transform: rotate(180deg);
		}
		.impact-content {
			.impact-image {
				width: 100%;
				height: auto;
			}
			h3 {
				margin-block: 0;
				font-size: 1em;
				font-weight: 500;
			}
			blockquote {
				margin: 0;
			}
		}
		@container (width > 748px) {
			.impact-content {
				display: flex;
				flex-wrap: wrap;
				align-items: start;
				gap: 1rem;

				.impact-image {
					width: 40%;
				}
				.quote {
					width: calc(60% - 1rem);
				}
			}
		}
	}
}

.ja-difference {

	background-image: url(assets/media/shape-bg.svg);
	background-size: 50%;
	background-position: top left;
	background-repeat: no-repeat;

	container-type: inline-size;

	.difference {
		margin-block: 2rem 3rem;

		.difference-image {
			width: 100%;
			height: auto;
			margin-bottom: 1rem;
		}
		h3 {
			margin-block: 0 0.5rem;
			font-size: 2.5rem;
			font-weight: 600;
			text-transform: none;
			text-box-trim: trim-end;
			line-height: 1;
		}
		details {
			font-size: 1rem;

			summary {
				margin-bottom: 0.5rem;
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 0.5rem;
				cursor: pointer;

				font-size: 1rem;
				font-weight: 600;

				&::marker {
					content: none;
				}
				&::after {
					display: block;
					width: 45px;
					min-width: 45px;
					height: 45px;
					content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 45 45"><defs><style>.cls-1 {fill: none;stroke: url(%23linear-gradient);stroke-miterlimit: 10;stroke-width: 4px;}.cls-2 {fill: %23eef3f4;}</style><linearGradient id="linear-gradient" x1="-980.95" y1="-5186.35" x2="-967.7" y2="-5186.35" gradientTransform="translate(5213.8104 -925.8177) rotate(-89.6985)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%238cc441"/><stop offset="1" stop-color="%231fbdc7"/></linearGradient></defs><circle class="cls-2" cx="22.5" cy="22.5" r="22.5"/><polyline class="cls-1" points="11.42 26.28 21.64 17.16 33.47 26.28"/></svg>');
					transition: transform 0.2s ease;
				}
			}
			&[open] summary::after {
				transform: rotate(180deg);
			}
		}
	}

	@container (width > 748px) {
		.difference {
			display: flex;
			align-items: start;
			gap: 1rem;

			.difference-image {
				width: 40%;
			}
			.difference-content {
				width: calc(60% - 1rem);
			}
		}
	}
}



.connection-cta {
	padding-block: 2rem;
	background-color: var(--color-grey_light);

	h2 {
		font-size: 2.8571428571rem;
		max-width: 10ch;
		line-height: 1.25;
	}
}

.support-ja,
.ja-for-schools {

	.hero-image {
		margin-block: 0 1.5rem;
		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
	.your-investment {
		padding-block: 3rem 1.5rem;

		p:has(+ul) {
			margin-block-end: 0.5rem;
		}
		p+ul {
			margin-block: 0rem 2rem;
		}
	}

	.partner-with {
		padding-block: 3rem 1.5rem;

		background-image: url(assets/media/shape-bg.svg);
		background-size: 50%;
		background-position: top left;
		background-repeat: no-repeat;

		container-type: inline-size;

		.connection {
			margin-block: 2rem;

			img {
				grid-area: image;
				width: 100%;
				height: auto;
				margin-bottom: 1rem;
			}

			p {
				margin-top: 0;
				grid-area: copy;
			}

			@container (width > 768px) {

				display: grid;
				grid-template-columns: 1fr 14rem;
				grid-template-areas: "image copy";
				gap: 3rem;
			}
		}

		h2+.connection {
			margin-top: 4rem;
		}

	}

	.make-the-call {
		margin-block: 0;
		padding-block: 0;

		.content hr {
			margin-bottom: 3rem;
		}
	}

	.sponsor-logos-list {
		margin-block: 2.5rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 1.5rem 3rem;

		.sponsor-logo-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 150px; /* Set a consistent box width */
			height: 80px; /* Set a consistent box height */
		}

		.sponsor-logo-item img {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}
	}

	.lets-talk {
		.content {
			padding-block: 3rem;
		}

		.support-ja-form,
		.ja-for-schools-form {
			margin-inline: auto;
			width: min(1040px, 100%);
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px),
			1fr));
			gap: 1.5rem 40px;
			container-type: inline-size;
			container-name: ja-form;

			.field-label-group {
				align-self: center;
			}
			.field-label-group:has(input[type=checkbox], input[type=radio]) {
				display: flex;
				flex-wrap: wrap;
				gap: 1.5rem;

				label.radio-group {
					width: 100%;
				}
			}

			.form-buttons {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-items: center;
				gap: 1rem 1.5rem;
			}
			@container ja-form (width > 840px) {
				.field-label-group.span-2,
				.form-buttons {
					grid-column: 1/span 2;
				}
			}
		}
	}
	.organizations {
		padding-block: 3rem;

		h3 {
			text-transform: uppercase;
			font-weight: 300;
			margin-bottom: 0;
		}
		h3 + ul {
			margin-top: 0;
		}
	}
}