/*------------------------------------*\
    #MILITARY CHILD CARE TEMPLATE
    Styles for page-military-child-care.php only.

    Copied from new-tuition-support.css with the `nts-` prefix renamed to
    `mcc-` so no other template shares these selectors. The accordion
    was dropped; additions to that file: the white middle section
    wrapper (.mcc-program-section-wrapper-white) and the form section
    anchor (.mcc-form-section).

    The form section at the bottom reuses the shared .final-appeal-*
    classes, styled in universal-form.css (loaded site-wide).
\*------------------------------------*/

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

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

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

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

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

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

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

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

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

.mcc-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;
}

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

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

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

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

.mcc-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%;
}

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

.mcc-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;
}

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

.mcc-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;
}

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

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

	/* Even side padding (style.css's program pages use 0 left / 20px right),
	   so the text and button sit centered in the box */
	.mcc-program-text {
		padding: 36px 0 20px;
	}

	/* Long labels wrap to the box width; keep them centered and inset to
	   line up with the 25px text padding */
	.mcc-program-text-cta {
		max-width: calc(100% - 50px);
	}

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

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

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

/* Centered H2 over left-aligned copy between the hero and the middle section,
   in the same type as the section headings and copy below */
.mcc-intro {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 20px 40px;
	box-sizing: border-box;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	color: #000000;
	text-align: center;
}

.mcc-intro-heading {
	font-size: 22px;
	font-weight: normal;
	font-family: "Georgia Pro Condensed Light", "Helvetica", sans-serif;
	letter-spacing: 1px;
	margin: 0 0 16px;
}

.mcc-intro-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;
}

.mcc-intro-text {
	text-align: left;
}

.mcc-intro-text p,
.mcc-intro-text ul,
.mcc-intro-text ol {
	font-size: 16px;
	margin: 0 0 1em;
}

/* The intro sits outside <main>, so it misses `main li`'s disc and gets
   style.css's bare ul/ol reset (no markers, no padding) */
.mcc-intro-text ul,
.mcc-intro-text ol {
	padding-left: 1.5em; /* room for the outside markers */
}

.mcc-intro-text ul li {
	list-style-type: disc;
}

.mcc-intro-text ol li {
	list-style-type: decimal;
}

.mcc-intro-text > :last-child {
	margin-bottom: 0;
}

.mcc-intro-text a,
.mcc-intro-text a:visited {
	color: #000000;
	font-weight: bold;
	text-decoration: underline;
}

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

/* Middle section, above the light blue bottom section */
.mcc-program-section-wrapper-white {
	background-color: #ffffff;
	color: #000000;
}

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

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

.mcc-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;
}

.mcc-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;
}

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

.mcc-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;
}

.mcc-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;
}

.mcc-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;
}

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

.mcc-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 */
.mcc-program-section-text ol {
	list-style-type: decimal;
	padding-left: 1.5em; /* room for the outside markers */
}

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

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

@media (max-width: 992px) {
	.mcc-program-section-image,
	.mcc-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 */
	}

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

	.mcc-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 */
	}

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

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

/* ===== Form section ===== */

/* The hero button jumps here (#mcc-form); the layout itself comes from the
   shared .final-appeal-* rules in universal-form.css */
.mcc-form-section {
	scroll-margin-top: 140px; /* clear the fixed header */
}

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

/* Wraps the white form box and the disclaimer under it. Takes over the
   form box's sizing from universal-form.css so the shared layout holds. */
.mcc-form-column {
	width: 100%;
	max-width: 670px;
}

/* The shared height: 100% would stretch the box to the column's full
   height (which includes the disclaimer) */
.mcc-form-column .final-appeal-form {
	height: auto;
}

/* Small print below the form, outside the white form box */
.mcc-form-section .mcc-disclaimer {
	font-size: 12px;
	font-weight: normal;
	font-family: "Magazine Grotesque", "Helvetica", sans-serif;
	margin: 16px 0 0;
	padding: 0 12px;
}