/* Ported from laravel/resources/nextgenmath/sass (fluid type, display fonts,
   heading weights, nav colors). Keep this file small — most styling lives in
   theme.json and per-block attributes so it stays editable in the Site Editor. */

html {
	scroll-behavior: smooth;
	/* typography mixin: 14px @320px -> 18px @1200px */
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 320px) / 880)), 18px);
}

h1, h2, h3 {
	font-weight: 300;
}

.fredericka {
	font-family: 'Fredericka the Great', cursive;
}

.knewave {
	font-family: 'Knewave', cursive;
	color: #3987d8;
}

/* top announcement banner (Banner.vue: dark strip, centered, underlined links) */
.ngm-header-banner {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 36px;
	width: 100%;
	padding: 5px 1rem;
	background: #343a40;
	color: #fff;
	text-align: center;
	border-bottom: 1px solid #000;
	font-size: 0.95rem;
}
.ngm-header-banner p {
	margin: 0;
}
.ngm-header-banner a {
	color: #fff;
	text-decoration: underline;
}

/* navbar link color from the original sass */
.ngm-header .wp-block-navigation a {
	color: #666;
	text-decoration: none;
}
.ngm-header .wp-block-navigation a:hover {
	color: #3987d8;
}

/* chalkboard hero card (Hero.vue: #333 bg, 10px wood frame) — also available
   as the "Chalkboard card" block style on Group blocks */
.ngm-hero-card,
.is-style-ngm-chalkboard {
	background: #333;
	border: 10px solid #c27c4a;
	color: #fff;
}
.is-style-ngm-chalkboard h1, .is-style-ngm-chalkboard h2,
.is-style-ngm-chalkboard h3, .is-style-ngm-chalkboard p {
	color: #fff;
}
.ngm-hero-card .wp-block-button__link.is-style-outline,
.ngm-hero-card .is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: #fff;
}

/* tagline display words */
.ngm-tagline .fredericka {
	color: #212529;
}

.ngm-lead {
	font-size: 1.25rem;
	color: #495057;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.6;
}

.ngm-animal-svg img {
	max-width: min(100%, 350px);
	height: auto;
}

/* Bootstrap text-color utilities used throughout the ported copy, mapped to
   the brand theme ($secondary: $ngm-orange, $tertiary: $ngm-green, ...) */
.text-secondary { color: #ff7834 !important; }
.text-tertiary  { color: #bbdf00 !important; }
.text-primary   { color: #3987d8 !important; }
.text-success   { color: #28a745 !important; }

/* MainSection slot titles: Fredericka in NGM blue (ported from MainSection.vue) */
.ngm-section-title {
	font-family: 'Fredericka the Great', cursive;
	color: #3987d8;
	font-size: clamp(30px, 4vw, 40px);
}

/* Ribbon page-title — verbatim port of RibbonBanner.vue .banner styles */
.ngm-ribbon {
	position: relative;
	margin: 2vh auto 4vh;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 85%;
	max-width: 1140px; /* .banner is also a bootstrap .container */
	height: 4.5rem;
	border: 1px solid #4d91da;
	color: #fff;
	background: #3987d8;
	border-radius: 4px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) inset, 0 6px 10px rgba(0, 0, 0, 0.15);
}
.ngm-ribbon h1 {
	color: #fff;
	margin: 0;
	text-align: center;
	/* original h1: $mod_1^4*14px -> $mod_2^4*14px fluid, weight 300 */
	font-size: clamp(20.5px, calc(20.5px + 19.5 * ((100vw - 320px) / 880)), 40px);
	font-weight: 300 !important;
}
.ngm-ribbon::before,
.ngm-ribbon::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: -4rem;
	top: 24px;
	display: block;
	width: 8vw;
	height: 0;
	border: 30px solid #3987d8;
	border-right: 20px solid #3987d8;
	border-bottom-color: #3987d8;
	border-left-color: transparent;
	transform: rotate(-5deg);
}
.ngm-ribbon::after {
	left: auto;
	right: -4rem;
	border-left: 20px solid #3987d8;
	border-right: 30px solid transparent;
	transform: rotate(5deg);
}
@media (max-width: 992px) {
	.ngm-ribbon::before {
		left: -3rem;
	}
	.ngm-ribbon::after {
		left: auto;
		right: -3rem;
	}
}
@media (max-width: 576px) {
	.ngm-ribbon::before,
	.ngm-ribbon::after {
		width: 12vw;
	}
}

/* P&S grey-section titles (GreySection.vue .title-section: 36px, weight 500) */
.ngm-grey-title {
	font-weight: 500 !important;
	font-size: 36px;
	color: #212529;
}
@media (max-width: 768px) {
	.ngm-grey-title {
		font-size: 30px;
	}
}

/* P&S service items (ProjectManagement.vue .services-column .service:
   45px green badge-check icon, 30px/500 blue title, 18px description) */
.ngm-service {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	font-size: 18px;
	color: #212529;
}
.ngm-service .ngm-service-icon {
	flex: 0 0 auto;
	margin: 0;
}
.ngm-service .ngm-service-icon img {
	width: 45px;
	height: 45px;
}
.ngm-service .ngm-service-title {
	font-size: 30px;
	font-weight: 500;
	color: #3987d8;
	margin: 0;
}
.ngm-service p {
	margin: 0;
}
.ngm-example-img {
	padding: 50px 0;
}
.ngm-example-img img {
	max-width: min(100%, 768px);
	height: auto;
}

/* gold star lists (About) */
.ngm-starlist {
	list-style: none;
	padding-left: 0;
}
.ngm-starlist li {
	margin-bottom: 0.6rem;
}
.ngm-starlist li::first-letter {
	color: #f9bf67;
}

/* PageTitle banner: thin strip, white bold title over blue-tinted equations
   background (ported from PageTitle.vue) */
.ngm-page-title {
	background:
		linear-gradient(rgba(57, 135, 216, 0.5), rgba(57, 135, 216, 0.5)),
		url("https://cdn.nextgenmath.com/images/redesign/home/hero/equations.png");
	background-position: center;
	min-height: 103px;
	display: flex;
	align-items: center;
}
.ngm-page-title h1 {
	color: #fff;
	font-weight: bold !important;
	font-size: clamp(24px, 3vw, 36px);
	margin: 0;
}

/* footer (Foot.vue): #005ec0 body, #030744 CTA/bottom, lime hover accent */
.ngm-footer a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ngm-footer a:hover {
	color: #bbdf00;
}
.ngm-footer ul {
	list-style: none;
	padding-left: 0;
}
.ngm-footer li {
	margin-bottom: 0.45rem;
}
/* pre-footer scene (Foot.vue): full-width paper plane overlapping the blue
   band and hanging into the footer below it */
.ngm-prefooter {
	position: relative;
	min-height: 10rem;
}
.ngm-paper-plane {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -200px;
	width: 100%;
	margin: 0;
	z-index: 5;
	pointer-events: none;
}
.ngm-paper-plane img {
	width: 100%;
	height: auto;
}
.ngm-footer-cta {
	position: relative;
	z-index: 6;
}
.ngm-cta-eyebrow {
	opacity: 0.65;
}
@media (max-width: 768px) {
	.ngm-paper-plane {
		bottom: -100px;
	}
	.ngm-footertop {
		padding-top: 5rem !important;
	}
}
/* hero scene */
.ngm-kevin img {
	max-width: min(100%, 412px);
	height: auto;
}
.wp-block-cover.is-light .ngm-hero-card,
.wp-block-cover.is-light .ngm-hero-card h1,
.wp-block-cover.is-light .ngm-hero-card p {
	color: #fff; /* covers force dark text on light images; the chalkboard stays white */
}

/* partner type cards (PartnerTypeButtons.vue): white cards, hover lift */
.ngm-partner-cards .wp-block-column {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 0.25rem;
	padding: 0.75rem;
	transition: transform 0.15s ease;
}
.ngm-partner-cards .wp-block-column:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.ngm-partner-cards p a {
	color: #212529;
	font-weight: 600;
	text-decoration: none;
}

/* testimonials scene foreground */
.ngm-whale-boat img {
	max-width: min(70%, 700px);
	height: auto;
}
.ngm-ocean {
	margin: -6px 0 0;
}
.ngm-ocean img {
	width: 100%;
	height: auto;
}

/* gold star rows (PartnerSuccess) */
.ngm-stars {
	color: #ffc107;
	letter-spacing: 0.3rem;
}

/* check lists (badge-check icon lists) */
.ngm-checklist {
	list-style: none;
	padding-left: 0;
}
.ngm-checklist li {
	margin-bottom: 0.5rem;
}
.ngm-checklist li::first-letter {
	color: #28a745;
}

/* orange header cards (PartnerSuccess b-card secondary variant) */
.ngm-orange-card {
	border-radius: 0.5rem;
	overflow: hidden;
	border: 1px solid #ffe0cc;
	height: 100%;
}
.ngm-orange-card-header {
	background: #ff7834;
	color: #fff;
	margin: 0;
	padding: 0.9rem 1.25rem;
	font-size: 1.15rem;
}
.ngm-orange-card-body,
.ngm-orange-card .ngm-checklist {
	background: #fff4ec;
	margin: 0;
	padding: 1.25rem 1.5rem;
}

/* detail titles (WhyNextGenMath) */
.ngm-detail-title {
	font-size: 30px;
	font-weight: 500;
}
/* shadowed media */
.ngm-shadow img {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* raised-cap intro paragraphs (FAQ / Implementation Models) */
.raised-cap::first-letter {
	color: #3987d8;
	font-weight: bold;
	font-size: 3.3rem;
	line-height: 1;
	margin-right: 0.25rem;
	float: left;
}

/* accordions (faq-model / implementation-model -> details blocks): grey card
   with the original big soft shadow, blue h2-sized title + blue plus toggle */
.ngm-accordion {
	margin: 0 auto 1.5rem;
	background: #f8f8f8;
	border: 1px solid #ebebeb;
	border-radius: 6px;
	box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.15);
	padding: 1.5rem;
}
.ngm-accordion summary {
	/* original headers are <h2>: $ngm-blue, fluid 16.9px -> 23.7px */
	font-size: clamp(16.9px, calc(16.9px + 6.8 * ((100vw - 320px) / 880)), 23.7px);
	font-weight: 500;
	color: #3987d8;
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2.25rem;
}
.ngm-accordion summary::-webkit-details-marker {
	display: none;
}
.ngm-accordion summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	color: #3987d8;
	font-size: 1.6rem;
	font-weight: 700;
}
.ngm-accordion[open] summary::after {
	content: "−";
}
.ngm-accordion > *:not(summary) {
	margin-top: 0.85rem;
}
.ngm-accordion img {
	width: 100%;
	height: auto;
}

/* free trial lead form ([ngm_free_trial], FreeTrial.vue demo-request-form:
   white card on the blue panel, orange submit) */
.ngm-ft-form {
	background: #fff;
	border-radius: 0.25rem;
	padding: 1rem 1.25rem;
	margin: 1rem 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ngm-ft-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}
@media (max-width: 576px) {
	.ngm-ft-grid {
		grid-template-columns: 1fr;
	}
}
.ngm-ft-field {
	display: block;
	margin-bottom: 0.85rem;
}
.ngm-ft-field span {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.2rem;
	color: #212529;
}
.ngm-ft-field input,
.ngm-ft-field select,
.ngm-ft-field textarea {
	width: 100%;
	padding: 0.375rem 0.75rem;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	background: #fff;
	color: #212529;
	font-size: 1rem;
}
.ngm-ft-field input:focus,
.ngm-ft-field select:focus,
.ngm-ft-field textarea:focus {
	border-color: #3987d8;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(57, 135, 216, 0.25);
}
.ngm-ft-submit {
	width: 100%;
	border: 0;
	border-radius: 0.25rem;
	padding: 0.6rem 1rem;
	background: #ff7834; /* $secondary, like the original submit button */
	color: #fff;
	font-size: 1.05rem;
	letter-spacing: 0.05rem;
	cursor: pointer;
}
.ngm-ft-submit:hover {
	background: #f06a26;
}
.ngm-ft-submit:disabled {
	opacity: 0.65;
	cursor: default;
}
.ngm-ft-error {
	color: #dc3545;
	font-weight: 600;
}
.ngm-ft-success {
	color: #28a745;
	font-size: 1.15rem;
	text-align: center;
	margin: 1rem 0;
}
.ngm-ft-notice {
	font-size: 0.8rem;
	color: #888;
	margin: 0.75rem 0 0;
	text-align: center;
}
.ngm-ft-notice a {
	color: #888;
}

/* gray "sub-menu of" heading shown above ribbon page titles (RibbonBanner.vue
   subMenuOf slot) — set per page via the "NGM: Sub-menu label" box */
.ngm-submenu {
	color: #888;
	font-size: 24px;
	font-weight: 300;
	text-align: center;
	margin: 2vh auto 0;
}

/* white social icons in the footer */
.ngm-footer .wp-block-social-links .wp-social-link a {
	color: #fff;
}

/* testimonials speech bubble (TestimonialsBubble.vue: white card + tail) —
   also available as the "Speech bubble" block style on Group blocks */
.is-style-ngm-bubble,
.ngm-bubble {
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	position: relative;
}
.is-style-ngm-bubble::after,
.ngm-bubble::after {
	content: "";
	position: absolute;
	bottom: -18px;
	left: 15%;
	width: 0;
	height: 0;
	border-right: 10px solid transparent;
	border-left: 10px solid #fff;
	border-top: 10px solid #fff;
	border-bottom: 10px solid transparent;
}
.is-style-ngm-bubble .wp-block-quote,
.ngm-bubble .wp-block-quote {
	border: none;
	margin: 0;
	color: #212529;
}

/* bubbles always read dark, even inside a Cover (which defaults text to white) */
.is-style-ngm-bubble,
.is-style-ngm-bubble p,
.is-style-ngm-bubble cite,
.ngm-bubble,
.ngm-bubble p,
.ngm-bubble cite,
.ngm-bubble .wp-block-post-content,
.ngm-bubble .wp-block-post-excerpt {
	color: #212529;
}