/* ==========================================================================
   Meadow Breeze section styles
   Loaded only on Meadow Breeze page templates. Mobile first.

   Palette: Patriot Blue for type and structure, MB Orange (and tones) for
   buttons, accents and warm tints, MB Green only for small highlights.
   Colors read from lca.edu computed styles on 2026-10-26:
   - MB Orange #f68735: #main-header on /summer/, .et_pb_button_3 on
     /summer/, .et_pb_button_0 on /mbdc-faqs/, and the "meadow" script in
     meadowbreeze-new-png.png. Matches the print-spec MB Orange row.
   - MB Green #6ea322: .et_pb_button_2 ("Summer jobs") on /summer/.
   - MB Yellow #f4cd31: "BREEZE" in meadowbreeze-new-png.png. The /summer/
     #top-header uses a near match, #ffc527.
   - The darker #f07430 on every page's QUESTIONS / SCHEDULE / APPLY band
     is site-wide LCA orange, not Meadow Breeze, so it is not used here.
   Contrast (WCAG 2.x): Patriot Blue on MB Orange 4.9:1 (AA for all text),
   white on MB Orange 2.5:1 (fails), deep orange on white 6.1:1, deep
   orange on the soft tint 5.5:1, MB Green on white 3.0:1 (non-text only),
   Patriot Blue on white 12.1:1.
   ========================================================================== */

/* Gotham faces. Divi only prints Book and Black on pages whose Divi modules
   use them, and these templates have no modules, so declare them here.
   Same family names and files Divi registers (Divi > Theme Options custom
   fonts), so nothing downloads twice. Each file is a single weight, so set
   font-weight: normal when using them or browsers fake a bolder weight.
   The site has no "Gotham Bold"; Gotham Medium is its bold. */
@font-face { font-family: 'Gotham Book';   src: url('/wp-content/uploads/et-fonts/Gotham-Book.otf') format('opentype');   font-display: swap; }
@font-face { font-family: 'Gotham Medium'; src: url('/wp-content/uploads/et-fonts/Gotham-Medium.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Gotham Black';  src: url('/wp-content/uploads/et-fonts/Gotham-Black.otf') format('opentype');  font-display: swap; }

/* Billy Ohio ships with this theme (lca.edu has no web copy of it). LCA's
   license covers web use. */
@font-face { font-family: 'Billy Ohio'; src: url('fonts/BillyOhio.otf') format('opentype'); font-display: swap; }

.mb {
	--mb-blue:         #003471;  /* Patriot Blue */
	--mb-orange:       #f68735;  /* MB Orange, buttons and accents */
	--mb-on-orange:    #003471;  /* type on orange buttons, 4.9:1. White is only 2.5:1 */
	--mb-orange-deep:  #9c4c11;  /* MB Orange darkened, for text, links and focus rings on light backgrounds */
	--mb-orange-mid:   #fbc59d;  /* borders on warm boxes */
	--mb-orange-soft:  #fef0e7;  /* warm tint */
	--mb-warm:         #fff9f5;  /* section wash */
	--mb-green:        #6ea322;  /* MB Green, small highlights only */
	--mb-yellow:       #f4cd31;  /* MB Yellow, from the logo. Not used yet */
	--mb-ink:          #003471;
	--mb-text:         #2b3440;
	--mb-text-soft:    #56606c;
	--mb-line:         #e7e1d8;
	--mb-white:        #ffffff;

	--mb-font-body:    'Gotham Book', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--mb-font-bold:    'Gotham Medium', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--mb-font-head:    'Gotham Black', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--mb-font-script:  'Billy Ohio', 'Brush Script MT', cursive;

	--mb-radius: 12px;
	--mb-gutter: 16px;
	--mb-max:    1120px;

	background: var(--mb-white);
	color: var(--mb-text);
	font-family: var(--mb-font-body);
	font-size: 17px;
	line-height: 1.6;
}

/* ---- Resets against Divi's global type rules --------------------------- */
.mb h1, .mb h2, .mb h3, .mb p, .mb ul, .mb ol, .mb dl, .mb dd, .mb table {
	margin: 0;
	padding: 0;
}
.mb ul, .mb ol { list-style: none; }
.mb h1, .mb h2, .mb h3 { color: var(--mb-ink); line-height: 1.15; }
.mb h1, .mb h2, .mb h3, .mb th, .mb dt, .mb summary { font-weight: normal; }
.mb strong, .mb b { font-family: var(--mb-font-bold); font-weight: normal; }
.mb p + p { margin-top: 1em; }
.mb a { color: var(--mb-orange-deep); text-underline-offset: 3px; }
.mb a:hover { color: var(--mb-blue); }
.mb a:focus-visible, .mb summary:focus-visible, .mb button:focus-visible {
	outline: 3px solid var(--mb-orange-deep);
	outline-offset: 2px;
	border-radius: 4px;
}
.mb .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- Layout ------------------------------------------------------------ */
.mb-wrap {
	max-width: var(--mb-max);
	margin: 0 auto;
	padding: 0 var(--mb-gutter);
	box-sizing: border-box;
}
.mb-narrow { max-width: 760px; }
.mb-section-block { padding: 48px 0; }
.mb-section-block--tint { background: var(--mb-warm); }

/* ---- Type -------------------------------------------------------------- */
.mb .mb-eyebrow {
	font-family: var(--mb-font-bold);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mb-orange-deep);
	margin-bottom: 12px;
}
.mb .mb-h2 {
	font-family: var(--mb-font-head);
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 26px;
	margin-bottom: 24px;
}
.mb .mb-h3 {
	font-family: var(--mb-font-bold);
	font-size: 18px;
	margin-bottom: 12px;
}
.mb .mb-lead { font-size: 19px; max-width: 640px; }
.mb .mb-intro { max-width: 720px; margin-bottom: 28px; }
.mb .mb-fine { font-size: 14px; color: var(--mb-text-soft); margin-top: 16px; }
.mb .mb-link { font-family: var(--mb-font-bold); }

/* ---- Buttons: MB Orange with Patriot Blue type ------------------------- */
.mb .mb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--mb-orange);
	border: 2px solid var(--mb-orange);
	color: var(--mb-on-orange);
	font-family: var(--mb-font-bold);
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mb .mb-btn:hover { background: var(--mb-blue); border-color: var(--mb-blue); color: var(--mb-white); }
.mb .mb-btn--ghost { background: var(--mb-blue); border-color: var(--mb-blue); color: var(--mb-white); }
.mb .mb-btn--ghost:hover { background: var(--mb-orange-deep); border-color: var(--mb-orange-deep); color: var(--mb-white); }
.mb .mb-btn--light { background: var(--mb-white); border-color: var(--mb-white); color: var(--mb-blue); }
.mb .mb-btn--light:hover { background: var(--mb-orange-soft); border-color: var(--mb-orange-soft); color: var(--mb-blue); }
.mb .mb-btn--small { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.mb .mb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.mb .mb-actions .mb-btn { flex: 1 1 220px; }

/* ---- Registration countdown (stands in for the Register button) ------- */
.mb [hidden] { display: none !important; }  /* .mb-btn's display would otherwise win */
.mb .mb-countdown--full {
	display: block;
	flex: 1 1 100%;
	max-width: 520px;
	padding: 18px 20px 20px;
	border-radius: var(--mb-radius);
	background: var(--mb-blue);
	color: var(--mb-white);
	text-align: center;
}
.mb .mb-countdown__heading { display: block; font-family: var(--mb-font-bold); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--mb-orange); }
.mb .mb-countdown__clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.mb .mb-countdown__unit { display: flex; flex-direction: column; align-items: center; }
.mb .mb-countdown__num { font-family: var(--mb-font-head); font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mb .mb-countdown__label { margin-top: 2px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.mb .mb-countdown__note { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.mb .mb-countdown--small {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-height: 40px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--mb-blue);
	color: var(--mb-white);
	font-family: var(--mb-font-bold);
	font-size: 14px;
	white-space: nowrap;
}

/* ---- Video hero (welcome page) ----------------------------------------- */
.mb-hero--video {
	box-sizing: border-box;  /* padding counts inside the height and max-height below */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 78vh;
	min-height: 78svh;
	padding: 120px 0 40px;
	background: var(--mb-blue);
	color: var(--mb-white);
}
.mb-hero__media { position: absolute; inset: 0; z-index: -2; }
.mb .mb-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Legibility scrim. Stops measured against 12 frames of the hero video so
   every hero line passes WCAG AA (worst 2% of pixels): eyebrow and lead 4.5:1,
   "welcome" and headline 3:1. A darker video could use lighter stops;
   re-measure if the video changes. */
.mb-hero--video::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 25, 60, 0.4) 0%, rgba(0, 25, 60, 0.74) 15%, rgba(0, 25, 60, 0.88) 100%);
}
.mb-hero--video .mb-hero__inner { width: 100%; }
.mb .mb-hero--video .mb-eyebrow { color: var(--mb-white); }  /* orange would need about 85% scrim */
.mb .mb-hero--video .mb-hero__headline,
.mb .mb-hero--video .mb-lead { color: var(--mb-white); }
.mb .mb-hero--video .mb-script { color: var(--mb-orange); }
.mb .mb-hero--video .mb-reg-line { color: rgba(255, 255, 255, 0.88); }
.mb .mb-hero--video .mb-lead { text-shadow: 0 1px 12px rgba(0, 20, 50, 0.4); }

.mb .mb-hero__pause {
	position: absolute;
	right: 16px;
	top: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.8);
	background: rgba(0, 25, 60, 0.45);
	cursor: pointer;
	padding: 0;
}
.mb .mb-hero__pause::before,
.mb .mb-hero__pause::after {
	content: "";
	position: absolute;
	top: 13px;
	width: 4px;
	height: 14px;
	background: var(--mb-white);
	border-radius: 1px;
}
.mb .mb-hero__pause::before { left: 15px; }
.mb .mb-hero__pause::after  { left: 23px; }
.mb .mb-hero__pause.is-paused::before {
	left: 16px;
	top: 12px;
	width: 0;
	height: 0;
	background: none;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--mb-white);
}
.mb .mb-hero__pause.is-paused::after { display: none; }
.mb .mb-hero__pause-label {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* ---- Shared hero type -------------------------------------------------- */
.mb .mb-hero__title { margin-bottom: 20px; }
.mb .mb-script {
	display: block;
	font-family: var(--mb-font-script);
	font-weight: 400;
	text-transform: lowercase;
	font-size: 52px;
	line-height: 1;
	color: var(--mb-orange-deep);
	margin-bottom: 4px;
}
.mb .mb-hero__headline {
	display: block;
	font-family: var(--mb-font-head);
	font-weight: normal;
	text-transform: uppercase;
	font-size: 36px;
	line-height: 1.05;
	color: var(--mb-blue);
}
.mb .mb-reg-line { margin-top: 16px; font-size: 15px; color: var(--mb-text-soft); max-width: 640px; }

/* ---- Compact hero (Dates & Rates) -------------------------------------- */
.mb-hero--compact {
	background: var(--mb-orange-soft);
	border-bottom: 4px solid var(--mb-orange);
	padding: 40px 0 32px;
}
.mb-hero--compact .mb-hero__headline { margin-bottom: 16px; }
.mb .mb-callout {
	display: inline-block;
	margin-top: 20px;
	background: var(--mb-white);
	color: var(--mb-blue);
	font-family: var(--mb-font-bold);
	padding: 10px 16px;
	border-radius: 8px;
}

/* ---- Facts band under the video --------------------------------------- */
.mb-facts-band { background: var(--mb-orange-soft); border-bottom: 1px solid var(--mb-line); }
.mb .mb-facts { display: grid; gap: 0; }
.mb .mb-facts li {
	padding: 14px 0;
	font-size: 16px;
	color: var(--mb-blue);
	border-bottom: 1px solid var(--mb-orange-mid);
}
.mb .mb-facts li:last-child { border-bottom: 0; }
.mb .mb-facts__label {
	display: block;
	font-family: var(--mb-font-bold);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mb-orange-deep);
	margin-bottom: 2px;
}

/* ---- Section nav ------------------------------------------------------- */
.mb-subnav { background: var(--mb-white); border-bottom: 1px solid var(--mb-line); }
.mb-subnav__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.mb .mb-subnav__list {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	min-width: 0;
	mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.mb .mb-subnav__list::-webkit-scrollbar { display: none; }
.mb .mb-subnav__list a {
	display: block;
	white-space: nowrap;
	padding: 8px 12px;
	border-bottom: 3px solid transparent;
	font-family: var(--mb-font-bold);
	font-size: 14px;
	color: var(--mb-blue);
	text-decoration: none;
}
.mb .mb-subnav__list a:hover { border-bottom-color: var(--mb-orange-mid); }
.mb .mb-subnav__list a[aria-current="page"] { border-bottom-color: var(--mb-green); }
.mb-subnav__inner .mb-btn { flex: 0 0 auto; }

/* ---- Jump links (Dates & Rates) --------------------------------------- */
.mb .mb-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding-top: 20px;
	font-size: 15px;
}
.mb .mb-jump a { font-family: var(--mb-font-bold); }

/* ---- Program cards (welcome page) ------------------------------------- */
.mb .mb-cards { display: grid; gap: 16px; }
.mb .mb-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--mb-radius);
	padding: 20px;
	background: var(--mb-white);
}
.mb .mb-card__title { font-family: var(--mb-font-head); font-weight: normal; text-transform: uppercase; font-size: 20px; }
.mb .mb-card__title a { color: var(--mb-blue); text-decoration: none; }
.mb .mb-card__grades { font-family: var(--mb-font-bold); font-size: 14px; color: var(--mb-orange-deep); margin-top: 6px; }
.mb .mb-card__summary { margin-top: 12px; font-size: 16px; flex: 1 1 auto; }
.mb .mb-card__price { margin-top: 16px; font-family: var(--mb-font-bold); font-size: 18px; color: var(--mb-blue); }
.mb .mb-card__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 15px; font-family: var(--mb-font-bold); }

/* ---- Highlights -------------------------------------------------------- */
.mb .mb-highlights { display: grid; gap: 20px; }
.mb .mb-highlight { padding-left: 16px; border-left: 4px solid var(--mb-green); }
.mb .mb-highlight__title { font-family: var(--mb-font-bold); font-size: 18px; margin-bottom: 6px; }
.mb .mb-highlight p { font-size: 16px; }

/* ---- Split: dates + quick answers ------------------------------------- */
.mb .mb-split { display: grid; gap: 40px; }
.mb .mb-split__col > p { margin-top: 16px; }

.mb .mb-timeline { border-left: 2px solid var(--mb-line); padding-left: 20px; }
.mb .mb-timeline li { position: relative; padding-bottom: 18px; }
.mb .mb-timeline li:last-child { padding-bottom: 0; }
.mb .mb-timeline li::before {
	content: "";
	position: absolute;
	left: -27px; top: 6px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--mb-orange);
	box-shadow: 0 0 0 3px var(--mb-white);
}
.mb .mb-timeline time { display: block; font-family: var(--mb-font-bold); font-size: 16px; color: var(--mb-blue); }
.mb .mb-timeline span { display: block; font-size: 16px; color: var(--mb-text-soft); }

.mb .mb-faq details { border-bottom: 1px solid var(--mb-line); }
.mb .mb-faq details:first-child { border-top: 1px solid var(--mb-line); }
.mb .mb-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 32px 14px 0;
	font-family: var(--mb-font-bold);
	color: var(--mb-blue);
	position: relative;
}
.mb .mb-faq summary::-webkit-details-marker { display: none; }
.mb .mb-faq summary::after {
	content: "+";
	position: absolute;
	right: 4px; top: 10px;
	font-size: 22px;
	color: var(--mb-orange-deep);
}
.mb .mb-faq details[open] summary::after { content: "\2212"; }
.mb .mb-faq details p { padding: 0 0 16px; font-size: 16px; }

/* ---- Rates list (Dates & Rates) --------------------------------------- */
.mb .mb-rate-list { display: grid; border-bottom: 1px solid var(--mb-line); }
.mb .mb-rate {
	display: grid;
	gap: 16px;
	border-top: 1px solid var(--mb-line);
	padding: 24px 0;
	scroll-margin-top: 120px;
}
.mb .mb-rate__title { font-family: var(--mb-font-head); font-weight: normal; text-transform: uppercase; font-size: 20px; }
.mb .mb-rate__title a { color: var(--mb-blue); text-decoration: none; }
.mb .mb-rate__grades { font-family: var(--mb-font-bold); font-size: 14px; color: var(--mb-orange-deep); margin-top: 4px; }
.mb .mb-rate__facts { margin-top: 12px; display: grid; gap: 6px; font-size: 15px; }
.mb .mb-rate__facts dt { display: inline; font-family: var(--mb-font-bold); color: var(--mb-blue); }
.mb .mb-rate__facts dt::after { content: ": "; }
.mb .mb-rate__facts dd { display: inline; }
.mb .mb-price { font-family: var(--mb-font-head); font-weight: normal; font-size: 30px; line-height: 1; color: var(--mb-blue); }
.mb .mb-price span { font-family: var(--mb-font-body); font-weight: 400; font-size: 15px; color: var(--mb-text-soft); }
.mb .mb-price--soon { font-size: 18px; font-family: var(--mb-font-bold); color: var(--mb-text-soft); }
.mb .mb-price__note { font-size: 14px; color: var(--mb-text-soft); margin-top: 6px; }

.mb .mb-two { display: grid; gap: 32px; }

.mb .mb-table { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--mb-white); border-radius: var(--mb-radius); overflow: hidden; }
.mb .mb-table th, .mb .mb-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--mb-line); }
.mb .mb-table thead th { font-family: var(--mb-font-bold); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mb-orange-deep); background: var(--mb-white); }
.mb .mb-table tbody th { font-family: var(--mb-font-bold); font-weight: 400; color: var(--mb-blue); }
.mb .mb-table tr:last-child th, .mb .mb-table tr:last-child td { border-bottom: 0; }

.mb .mb-price-box {
	background: var(--mb-orange-soft);
	border-radius: var(--mb-radius);
	padding: 20px;
	align-self: start;
}
.mb .mb-price-box__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mb-orange-mid); }
.mb .mb-price-box__row + .mb-price-box__row { margin-top: 0; }
.mb .mb-price-box__row strong { font-family: var(--mb-font-bold); color: var(--mb-blue); white-space: nowrap; }

.mb .mb-weeks { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.mb .mb-week { background: var(--mb-white); border-radius: var(--mb-radius); padding: 14px; }
.mb .mb-week--short { background: var(--mb-orange-soft); }
.mb .mb-week__label { font-family: var(--mb-font-bold); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mb-orange-deep); }
.mb .mb-week__dates { font-family: var(--mb-font-bold); font-size: 16px; margin-top: 2px; color: var(--mb-blue); }
.mb .mb-week__programs { font-size: 14px; color: var(--mb-text-soft); margin-top: 6px; }
.mb .mb-week__note { font-size: 13px; margin-top: 8px; color: var(--mb-blue); }

/* ---- Program pages ----------------------------------------------------- */
.mb .mb-notes { margin-top: 20px; display: grid; gap: 8px; }
.mb .mb-notes li { position: relative; padding-left: 20px; font-size: 16px; }
.mb .mb-notes li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.6em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--mb-green);
}
.mb .mb-at-a-glance .mb-rate__facts { margin: 0 0 16px; }
.mb .mb-at-a-glance .mb-price { margin-top: 4px; }
.mb .mb-quotes { display: grid; gap: 16px; }
.mb .mb-quote { margin: 0; padding: 20px; background: var(--mb-warm); border-radius: var(--mb-radius); }
.mb .mb-quote blockquote { margin: 0; padding: 0; border: 0; font-size: 18px; color: var(--mb-blue); }
.mb .mb-quote figcaption { margin-top: 10px; font-family: var(--mb-font-bold); font-size: 14px; color: var(--mb-orange-deep); }

/* ---- FAQ page ---------------------------------------------------------- */
.mb .mb-faq-group + .mb-faq-group { margin-top: 48px; }
.mb .mb-faq-group { scroll-margin-top: 120px; }
.mb .mb-faq-more { margin-top: 32px; }
.mb .mb-video-link { margin-top: 20px; }

/* ---- Closing CTA ------------------------------------------------------- */
.mb-cta { background: var(--mb-orange-soft); border-top: 4px solid var(--mb-orange); padding: 44px 0 28px; }
.mb .mb-cta__inner { display: grid; gap: 24px; }
.mb .mb-cta .mb-h2 { margin-bottom: 8px; }
.mb .mb-cta__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.mb .mb-cta .mb-link { text-align: center; padding: 6px; }
.mb .mb-cta__meta { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--mb-orange-mid); font-size: 15px; }
.mb .mb-cta__meta span { margin: 0 8px; color: var(--mb-text-soft); }

/* ==========================================================================
   Larger screens
   ========================================================================== */
@media (min-width: 640px) {
	.mb { --mb-gutter: 24px; }
	.mb .mb-facts { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.mb .mb-facts li { border-bottom: 0; padding: 18px 0; }
	.mb .mb-actions .mb-btn { flex: 0 0 auto; }
	.mb .mb-cards { grid-template-columns: repeat(2, 1fr); }
	.mb .mb-quotes { grid-template-columns: repeat(2, 1fr); }
	.mb .mb-highlights { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
	.mb .mb-weeks { grid-template-columns: repeat(4, 1fr); }
	.mb .mb-rate { grid-template-columns: 1fr auto; align-items: start; }
	.mb .mb-rate__price { text-align: right; min-width: 170px; }
	.mb .mb-cta__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.mb .mb-hero__pause { top: auto; bottom: 24px; right: 24px; }
}

@media (min-width: 981px) {
	.mb { --mb-gutter: 32px; }
	.mb .mb-countdown__num { font-size: 44px; }
	.mb-section-block { padding: 72px 0; }
	.mb-hero--video { min-height: 640px; max-height: 820px; height: 80vh; padding: 140px 0 72px; }
	.mb-hero--compact { padding: 56px 0 44px; }
	.mb .mb-script { font-size: 72px; }
	.mb .mb-hero__headline { font-size: 60px; }
	.mb .mb-h2 { font-size: 32px; }
	.mb .mb-cards { grid-template-columns: repeat(4, 1fr); }
	.mb .mb-cards--two { grid-template-columns: repeat(2, 1fr); }
	.mb .mb-two--program { grid-template-columns: 3fr 2fr; }
	.mb .mb-split { grid-template-columns: 1fr 1fr; gap: 64px; }
	.mb .mb-two { grid-template-columns: 1fr 1fr; gap: 48px; }
	.mb .mb-two--lunch { grid-template-columns: 3fr 2fr; }
	.mb .mb-cta__inner { grid-template-columns: 1fr auto; align-items: center; }
	.mb .mb-hero__pause { bottom: 32px; right: 32px; }
	.mb-hero--video::before { background: linear-gradient(180deg, rgba(0, 25, 60, 0.25) 0%, rgba(0, 25, 60, 0.72) 25%, rgba(0, 25, 60, 0.85) 100%); }
}

/* ==========================================================================
   Photography
   ========================================================================== */
/* Each photo fills a frame whose shape is set by aspect-ratio below, so tall
   and wide originals crop to the same shape. */
.mb .mb-card__media,
.mb .mb-highlight__media,
.mb .mb-gallery__list li,
.mb .mb-photo,
.mb .mb-hero__photo,
.mb .mb-rate__media { position: relative; overflow: hidden; }
.mb .mb-card__media img,
.mb .mb-highlight__media img,
.mb .mb-gallery img,
.mb .mb-photo img,
.mb .mb-hero__photo img,
.mb .mb-rate__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Program cards, option A: photo on top in place of the orange rule */
.mb .mb-card--photo { padding: 0; overflow: hidden; }
.mb .mb-card__media { aspect-ratio: 16 / 9; background: var(--mb-orange-soft); }  /* shorter on phones, 4:3 from 640px */
.mb .mb-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; }
.mb .mb-card:not(.mb-card--photo) .mb-card__body { padding: 0; }  /* text-only cards already have padding */
.mb .mb-card--photo .mb-card__title a::after { content: ""; position: absolute; inset: 0; }  /* whole card clicks through */
.mb .mb-card--photo { position: relative; transition: box-shadow .15s ease, transform .15s ease; }
.mb .mb-card--photo:hover { box-shadow: 0 8px 24px rgba(0, 52, 113, 0.14); transform: translateY(-2px); }
.mb .mb-card--photo .mb-card__links a { position: relative; z-index: 1; }

/* Program cards, option B: photo fills the card, type on a navy fade */
.mb .mb-cards--overlay .mb-card--photo { min-height: 400px; border: 0; justify-content: flex-end; }
.mb .mb-cards--overlay .mb-card__media { position: absolute; inset: 0; aspect-ratio: auto; z-index: 0; }
.mb .mb-cards--overlay .mb-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 25, 60, 0) 35%, rgba(0, 25, 60, 0.85) 62%, rgba(0, 25, 60, 0.96) 100%); }
.mb .mb-cards--overlay .mb-card__body { position: relative; z-index: 1; flex: 0 0 auto; padding: 24px 20px 20px; }
.mb .mb-cards--overlay .mb-card__title a,
.mb .mb-cards--overlay .mb-card__summary,
.mb .mb-cards--overlay .mb-card__price,
.mb .mb-cards--overlay .mb-card__links a { color: var(--mb-white); }
.mb .mb-cards--overlay .mb-card__grades { color: var(--mb-orange); }
.mb .mb-cards--overlay .mb-card__summary { display: none; }  /* too much text for a photo card; the program page carries it */

/* Highlights: small square photo beside the text on phones, photo on top on desktop */
.mb .mb-highlight--photo { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; align-content: start; padding-left: 0; border-left: 0; }
.mb .mb-highlight__media { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }

/* Photo strip: a two-column grid on phones (every photo visible, nothing to
   swipe), three across on tablets, one row of six on desktop. Edge to edge. */
.mb .mb-gallery { background: var(--mb-blue); }
.mb .mb-gallery__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.mb .mb-gallery__list li { aspect-ratio: 1 / 1; }

/* Small caption chip that says where a photo is from */
.mb .mb-hero__photo { margin: 0; }
.mb .mb-photo-caption { position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 999px; background: rgba(0, 25, 60, 0.82); color: var(--mb-white); font-family: var(--mb-font-body); font-size: 12px; line-height: 1.4; }
.mb .mb-cards--overlay .mb-photo-caption { top: 12px; bottom: auto; }

/* Single photos beside copy */
.mb .mb-photo { border-radius: var(--mb-radius); overflow: hidden; aspect-ratio: 4 / 3; }
.mb .mb-photo--lunch { aspect-ratio: 16 / 10; margin-bottom: 16px; }
.mb .mb-lunch__aside { align-self: start; }
.mb .mb-two--story .mb-photo--story { aspect-ratio: 3 / 2; }

/* Program page hero: photo above the title on phones, right half on desktop */
.mb .mb-hero--split { padding: 0 0 32px; }
.mb .mb-hero__photo { aspect-ratio: 16 / 10; margin-bottom: 28px; }

/* Dates & Rates rows: photo banner on phones, square thumbnail on desktop */
.mb .mb-rate__media { aspect-ratio: 16 / 7; border-radius: 10px; }

@media (min-width: 640px) {
	.mb .mb-gallery__list { grid-template-columns: repeat(3, 1fr); }
	.mb .mb-card__media { aspect-ratio: 4 / 3; }
	.mb .mb-rate--photo { grid-template-columns: 112px 1fr auto; align-items: center; }
	.mb .mb-rate__media { aspect-ratio: 1 / 1; }
}

@media (min-width: 981px) {
	.mb .mb-highlights:has(.mb-highlight--photo) { grid-template-columns: repeat(4, 1fr); gap: 28px; }
	.mb .mb-highlight--photo { grid-template-columns: 1fr; }
	.mb .mb-highlight--photo .mb-highlight__media { aspect-ratio: 4 / 3; }
	.mb .mb-gallery__list { grid-template-columns: repeat(6, 1fr); }
	.mb .mb-gallery__list li { aspect-ratio: 3 / 4; }
	.mb .mb-two--story { grid-template-columns: 1fr 1fr; align-items: center; }
	.mb .mb-two--photo { grid-template-columns: 3fr 2fr; align-items: center; }
	.mb .mb-two--photo .mb-photo { aspect-ratio: 4 / 5; }
	.mb .mb-hero--split { display: grid; grid-template-columns: 1fr 1fr; padding: 0; min-height: 460px; }
	.mb .mb-hero--split .mb-hero__photo { order: 2; aspect-ratio: auto; margin: 0; }
	.mb .mb-hero--split .mb-hero__inner { order: 1; max-width: none; margin: 0; align-self: center; padding: 48px 48px 48px max(var(--mb-gutter), calc((100vw - var(--mb-max)) / 2 + var(--mb-gutter))); }
	.mb .mb-cards--overlay .mb-card--photo { min-height: 460px; }
}

/* ==========================================================================
   Meadow Breeze header (Divi's header, restyled on camp pages only)
   Nav text is Patriot Blue: white on MB Orange is 2.5:1, Patriot Blue 4.9:1.
   ========================================================================== */
body.mb-section #page-container { padding-top: 0 !important; overflow-x: clip; }  /* the header is in the flow now, so its hidden dropdowns must not widen the page */
body.mb-section #top-header,
body.mb-section #main-header { position: relative !important; top: 0 !important; }   /* sits above the page, never over the hero */
body.mb-section #top-header,
body.mb-section #top-header.et-fixed-header { background-color: var(--mb-blue, #003471) !important; }
body.mb-section #top-header,
body.mb-section #top-header a,
body.mb-section #et-secondary-nav li a,
body.mb-section #et-info span,
body.mb-section #et-info a,
body.mb-section #et-info-phone:before,
body.mb-section #et-info-email:before { color: #ffffff !important; }
body.mb-section #main-header,
body.mb-section #main-header.et-fixed-header { background-color: #f68735 !important; box-shadow: none !important; }
body.mb-section #top-menu > li > a,
body.mb-section .et_header_style_left #et-top-navigation nav > ul > li > a,
body.mb-section #main-header.et-fixed-header #top-menu > li > a {
	color: #003471 !important;
	opacity: 1 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: 'Gotham Medium', 'Montserrat', Arial, sans-serif;
}
body.mb-section #top-menu > li > a:hover { color: #000f2b !important; }
body.mb-section #top-menu > li.current-menu-item > a,
body.mb-section #top-menu > li.current-menu-ancestor > a,
body.mb-section #top-menu > li.current-page-ancestor > a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
body.mb-section #top-menu li ul,
body.mb-section .et_mobile_menu { background-color: #ffffff !important; border-top-color: #003471 !important; }
body.mb-section #top-menu li ul a,
body.mb-section .et_mobile_menu li a { color: #003471 !important; opacity: 1 !important; }
body.mb-section .mobile_menu_bar:before { color: #003471 !important; }

/* Meadow Breeze footer */
.mb .mb-footer { background: var(--mb-blue); color: rgba(255, 255, 255, 0.86); padding: 48px 0 24px; font-size: 15px; }
.mb .mb-footer a { color: var(--mb-white); text-decoration: none; }
.mb .mb-footer a:hover { text-decoration: underline; color: var(--mb-white); }
.mb .mb-footer__grid { display: grid; gap: 32px; }
.mb .mb-footer__logo { width: 170px; margin-bottom: 16px; }
.mb .mb-footer__logo img { display: block; width: 100%; height: auto; }
.mb .mb-footer__brand p { margin: 0 0 6px; }
.mb .mb-footer__title { font-family: var(--mb-font-bold); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-orange); margin-bottom: 12px; }
.mb .mb-footer ul { display: grid; gap: 8px; }
.mb .mb-footer__fine { margin-top: 32px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 13px; color: rgba(255, 255, 255, 0.75); }
body.mb-section #main-footer,
body.mb-section #footer-bottom { background-color: #00234c !important; }
body.mb-section #footer-info,
body.mb-section #footer-info a { color: rgba(255, 255, 255, 0.8) !important; }

/* Welcome hero: logo, bigger script that tucks into the headline */
.mb .mb-hero__logo { width: 150px; aspect-ratio: 1815 / 1250; margin-bottom: 4px; }
.mb .mb-hero__logo img { display: block; width: 100%; height: auto; }
.mb .mb-hero--video .mb-script {
	position: relative;
	z-index: 1;
	font-size: 88px;
	line-height: 0.9;
	margin-bottom: -0.3em;
	transform: rotate(-5deg);
	transform-origin: left bottom;
}
.mb .mb-hero--video .mb-hero__headline { position: relative; z-index: 0; }
.mb-hero--video { padding-top: 48px; }

/* Built for working families */
.mb .mb-facts-band { padding: 28px 0 8px; }
.mb .mb-facts-band__title { font-family: var(--mb-font-head); font-size: 20px; text-transform: uppercase; color: var(--mb-blue); margin-bottom: 8px; }
.mb .mb-facts-band__title span { display: block; font-family: var(--mb-font-bold); font-size: 14px; text-transform: none; color: var(--mb-orange-deep); margin-top: 4px; }
.mb .mb-facts { grid-template-columns: 1fr 1fr; gap: 0 20px; }
.mb .mb-facts li { border-bottom: 0; padding: 12px 0 16px; }

/* Contact block (welcome page, FAQ page) */
.mb .mb-contact__list { display: grid; gap: 12px; margin-top: 20px; }
.mb .mb-contact__list dt { font-family: var(--mb-font-bold); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-orange-deep); }
.mb .mb-contact__list dd { font-size: 17px; }

/* Lunch list sits under its intro */
.mb .mb-two--lunch .mb-intro { margin-bottom: 8px; }

@media (min-width: 640px) {
	.mb .mb-footer__grid { grid-template-columns: 1.4fr 1fr; }
	.mb .mb-hero__logo { width: 190px; }
	.mb .mb-hero--video .mb-script { font-size: 112px; }
}
@media (min-width: 981px) {
	.mb .mb-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; }
	.mb .mb-facts { grid-template-columns: repeat(4, 1fr); gap: 24px; }
	.mb .mb-facts-band__title { display: flex; align-items: baseline; gap: 16px; }
	.mb .mb-facts-band__title span { display: inline; margin: 0; }
	.mb-hero--video { height: auto; max-height: none; min-height: min(80vh, 820px); padding: 56px 0 64px; }
	.mb .mb-hero__logo { width: 220px; }
	.mb .mb-hero--video .mb-script { font-size: 150px; }
}