/*------------------------------------*\
    #NEW TUITION SUPPORT TEMPLATE
    Styles for page-new-tuition-support.php only.

    Copied from georgia-pre-k.css (hero, hero section, accordion and the
    Section Five layout), renamed with an `nts-` prefix so no other
    template shares these selectors:
      gpk-hero, gpk-hero-image-*       -> nts-hero, nts-hero-image-*
      gpk-program-*                    -> nts-program-*
      gpk-schools                      -> nts-accordion-section
      gpk-accordion, gpk-accordion__*  -> nts-accordion, nts-accordion__*
      gpk-disclaimer                   -> nts-disclaimer
    State classes (is-open) are unchanged; scripts.js toggles them and
    hooks the accordion through both the shared and nts- names.
\*------------------------------------*/

/* ===== Hero ===== */

.nts-hero {
	width: 100%;
	background-position: center;
	background-size: cover;
	margin-top: 120px;
}

@media screen and (max-width: 1024px) {
	.nts-hero {
		margin-top: 109px;
	}
}

@media screen and (max-width: 767px) {
	.nts-hero {
		box-shadow: none;
		margin-top: 87px;
	}
}

.nts-hero-image-mobile {
	display: none; /* Hide by default */
	margin: 0 auto;
}

.nts-hero-image-desktop {
	display: block; /* Show by default */
	margin: 0 auto;
}

@media (max-width: 768px) {
	.nts-hero-image-mobile {
		display: block; /* Show on mobile */
	}

	.nts-hero-image-desktop {
		display: none; /* Hide on mobile */
	}
}

/* ===== Program hero section ===== */

.nts-program-hero-section {
	display: flex;
	align-items: stretch; /* Ensures children are the same height */
	max-width: 1020px; /* Adjust to your layout */
	margin: -80px auto 0;
	padding-bottom: 20px;
}

.nts-program-image {
	align-items: center;
}

.nts-program-image,
.nts-program-text {
	flex: 1;
	display: flex;
	background-color: #7eddde;
}

.nts-program-text {
	background-color: #fcf1ed; /* Beige background color */
	color: #000000;
	flex-direction: column;
	justify-content: center;
	padding-top: 22px;
	padding-bottom: 22px;
}

.nts-program-image img {
	width: 100%;
	height: auto; /* Set to auto if you want to maintain the aspect ratio */
}

.nts-program-headline {
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #264e60;
	padding: 0px 25px;
	margin: 0;
	letter-spacing: 15%;
}

.nts-program-text p {
	font-size: 16px; /* Adjust the font size as needed */
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	padding: 0px 25px;
}

.nts-program-text ul {
	font-size: 16px; /* Adjust the font size as needed */
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	padding: 0px 25px;
	text-align: left;
	list-style: circle;
}

.nts-program-text hr {
	width: 50%;
	margin: 0 auto;
	border: 0;
	height: 1px;
	background-color: #000;
}

.nts-program-text-cta {
	display: inline-block;
	text-decoration: none;
	background-color: #fb471e;
	color: #000000;
	padding: 12px 20px;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	font-weight: bold;
	letter-spacing: 0.2em;
	width: auto;
	max-width: 100%;
	text-transform: uppercase;
	text-align: center;
	margin: 0 auto;
}

.nts-program-text-cta:hover {
	color: #ffffff;
}

@media (max-width: 992px) {
	.nts-program-hero-section {
		flex-direction: column;
		padding-bottom: 0px;
		max-width: 63%;
	}

	.nts-program-text {
		padding: 36px 20px 20px 0;
	}

	.nts-program-image img {
		width: 100%;
		height: auto;
	}
}

@media (max-width: 768px) {
	.nts-program-hero-section {
		flex-direction: column;
		padding-bottom: 0px;
		max-width: 80%;
	}
}

/* ===== Intro ===== */

/* Centered paragraph between the hero and the accordion, in the same type as
   the rest of the page's copy */
.nts-intro {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 20px 40px;
	box-sizing: border-box;
	font-size: 16px;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	color: #000000;
	text-align: center;
}

/* ===== Program sections ===== */

.nts-program-section-wrapper {
	background-color: #fcf1ed;
}

.nts-program-section-wrapper-lightblue {
	background-color: #7eddde;
	color: #000000;
}

.nts-program-section {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 0;
}

.nts-program-section-content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start; /* Aligns children to the start of the container */
	justify-content: center;
	width: 100%;
	max-width: 1020px;
	margin: auto;
}

.nts-program-section-image {
	flex: 1 1 50%; /* Flex grow, flex shrink, flex basis */
	max-width: 50%; /* Maximum width of the image container */
	height: auto;
	margin-top: 20px;
}

.nts-program-section-text {
	flex: 1 1 50%;
	max-width: 50%;
	padding: 0 20px;
	text-align: left;
}

.nts-program-section-text h2 {
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 10px;
	font-family: "Georgia Pro Condensed Light", "Helvetica", sans-serif;
	letter-spacing: 1px;
}

.nts-program-section-text h2 span {
	font-size: 40px;
	font-family: "Golden Hopes", "Helvetica", sans-serif;
	font-weight: normal;
	text-transform: lowercase;
	padding-left: 3px;
	display: inline-block;
	position: relative;
	top: 8px;
}

.nts-program-section-text h3 {
	font-size: 18px;
	font-weight: normal;
	font-family: "Georgia Pro Condensed Light", "Helvetica", sans-serif;
	letter-spacing: 1px;
	padding: 15px 0px 0px;
	text-transform: uppercase;
}

.nts-program-section-text p,
.nts-program-section-text ul,
.nts-program-section-text ol {
	font-size: 16px;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	font-weight: normal;
	margin: 20px 0;
}

.nts-program-section-text ul {
	padding: 0 10px;
}

/* style.css strips ol markers (ol { list-style-type: none }) and gives every
   `main li` a disc, so the numbers have to be set on the li itself */
.nts-program-section-text ol {
	list-style-type: decimal;
	padding-left: 1.5em; /* room for the outside markers */
}

.nts-program-section-text ol li {
	list-style-type: decimal;
	margin: 0 0 8px; /* drop main li's 1em indent; the ol padding handles it */
}

.nts-program-section-text a,
.nts-program-section-text a:visited {
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}

/* Bottom section small print, below the text */
.nts-program-section-text .nts-disclaimer {
	font-size: 12px;
	font-weight: normal;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	margin-top: 16px;
}

@media (max-width: 992px) {
	.nts-program-section-image,
	.nts-program-section-text {
		flex-basis: 100%; /* Take full width on smaller screens */
		max-width: 90%; /* Take full width on smaller screens */
		padding: 0 20px; /* Add some padding on smaller screens */
	}

	.nts-program-section-image {
		order: 1; /* Image goes below text on smaller screens */
	}

	.nts-program-section-text {
		order: 2; /* Text goes above image on smaller screens */
		padding: 20px; /* Add some padding */
		text-align: left; /* Center the text on smaller screens */
	}

	.nts-program-section-text ul {
		text-align: left;
	}
}

@media (max-width: 768px) {
	.nts-program-section {
		width: auto;
		padding: 20px 0; /* Less padding on very small screens */
	}
}

/* ===== Accordion ===== */

.nts-accordion-section {
	width: 100%;
	max-width: 900px;
	scroll-margin-top: 140px; /* clear the fixed header when a CTA jumps here */
}

@media screen and (max-width: 767px) {
	.nts-accordion-section {
		scroll-margin-top: 107px;
	}
}

/* H2 above the accordion: the section heading type, inset to line up with
   the item titles */
.nts-accordion-section__heading {
	font-size: 22px;
	font-weight: normal;
	font-family: "Georgia Pro Condensed Light", "Helvetica", sans-serif;
	letter-spacing: 1px;
	margin: 0 0 20px;
	padding: 0 1rem;
}

.nts-accordion-section__heading span {
	font-size: 40px;
	font-family: "Golden Hopes", "Helvetica", sans-serif;
	font-weight: normal;
	text-transform: lowercase;
	padding-left: 3px;
	display: inline-block;
	position: relative;
	top: 8px;
}

.nts-accordion-section .nts-accordion__item {
	border-top: 1px solid #e2ddd9;
}

.nts-accordion-section .nts-accordion__item:last-child {
	border-bottom: 1px solid #e2ddd9;
}

.nts-accordion-section .nts-accordion__heading {
	margin: 0;
}

.nts-accordion-section .nts-accordion__trigger {
	width: 100%;
	background: none;
	border: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	padding: 1.1rem 1rem;
	color: #000;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0.02em;
	font-size: clamp(1rem, 2.6vw, 1.25rem); /* mobile to desktop */
	cursor: pointer;
}

.nts-accordion-section a {
	color: #000;
}

.nts-accordion-section .nts-accordion__trigger::after {
	content: "+";
	font-size: 1.6rem;
	line-height: 1;
	margin-left: 1rem;
	flex: 0 0 auto;
}

.nts-accordion-section .nts-accordion__trigger[aria-expanded="true"]::after {
	content: "–";
}

.nts-accordion-section .nts-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	padding: 0 1rem;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	visibility: hidden;
	/* Clip here, not on the inner: mid-transition the fr track shrinks faster
	   than the panel's own height, so clipping at the track hides the text
	   early and leaves blank space collapsing after it */
	overflow: hidden;
	transition:
		grid-template-rows 0.35s ease,
		visibility 0s linear 0.35s;
}

.nts-accordion-section .nts-accordion__panel-inner {
	min-height: 0;
}

/* Bottom spacing as content rather than padding, so it collapses to 0 with
   the row (padding can't, and would leave a gap under closed items) */
.nts-accordion-section .nts-accordion__panel-inner::after {
	content: "";
	display: block;
	height: 1.25rem;
}

.nts-accordion-section .nts-accordion__item.is-open .nts-accordion__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows 0.35s ease,
		visibility 0s linear 0s;
}

/* Item text is WYSIWYG content: same type and list treatment as the section
   text (see the ol note above) */
.nts-accordion-section .nts-accordion__panel p,
.nts-accordion-section .nts-accordion__panel ul,
.nts-accordion-section .nts-accordion__panel ol {
	font-size: 16px;
	margin: 0 0 1em;
}

.nts-accordion-section .nts-accordion__panel ul {
	padding: 0 10px;
}

.nts-accordion-section .nts-accordion__panel ol {
	list-style-type: decimal;
	padding-left: 1.5em;
}

.nts-accordion-section .nts-accordion__panel ol li {
	list-style-type: decimal;
	margin: 0 0 8px;
}

.nts-accordion-section .nts-accordion__panel a,
.nts-accordion-section .nts-accordion__panel a:visited {
	font-weight: bold;
	text-decoration: underline;
}

.nts-accordion-section .nts-accordion__panel-inner > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nts-accordion-section .nts-accordion__panel {
		transition: none;
	}
}

.nts-accordion-section .nts-accordion__panel img,
.nts-accordion-section .nts-accordion__panel video,
.nts-accordion-section .nts-accordion__panel iframe {
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: 1rem;
}

@media (min-width: 980px) {
	.nts-accordion-section .nts-accordion__panel img {
		max-height: 560px;
	}
}