/*
Theme Name:   MCS Kadence Child
Theme URI:    https://alimacademy.org
Description:  Child theme for Muslim Community School / Alim Academy — built on Kadence
Author:       MCS Web Team
Author URI:   https://alimacademy.org
Template:     kadence
Version:      1.0.2
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mcs-kadence-child
*/

/* ─────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  --mcs-green:        #005C24;
  --mcs-green-deep:   #003D18;
  --mcs-green-mid:    #3A8F5A;
  --mcs-green-light:  #EFF7F2;
  --mcs-green-border: #C8E4D0;
  --mcs-orange:       #D95F1A;
  --mcs-orange-h:     #B84D12;
  --mcs-text:         #1c2b1e;
  --mcs-muted:        #556B5E;
  --mcs-radius:       12px;
  --mcs-max:          1160px;
  --mcs-shadow-sm:    0 2px 8px rgba(0,0,0,.07);
  --mcs-shadow-md:    0 6px 24px rgba(0,0,0,.10);
  --mcs-shadow-lg:    0 12px 40px rgba(0,0,0,.13);
}

/* ─────────────────────────────────────────────
   GLOBAL TYPOGRAPHY
───────────────────────────────────────────── */
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--mcs-text);
  -webkit-font-smoothing: antialiased;
  /* Kadence maps global-palette4 (#EFF7F2) to body background — force white */
  background-color: #fff !important;
}
/* Belt-and-suspenders: cover Kadence's page/content wrappers too */
.site,
#page,
.site-content,
.site-main,
.hentry,
.entry-content {
  background-color: #fff !important;
}

h1, h2, h3, h4, h5 {
  font-family: 'DM Serif Display', serif;
  line-height: 1.2;
  color: var(--mcs-text);
}

/* ─────────────────────────────────────────────
   ANNOUNCEMENT BAR
───────────────────────────────────────────── */
.mcs-announce {
  background: var(--mcs-green-deep);
  color: #fff;
  text-align: center;
  padding: 10px 24px;
  font-size: .82rem;
  font-weight: 500;
}
.mcs-announce a {
  color: #8fd4a8;
  text-decoration: underline;
  margin-left: 8px;
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   HIDE KADENCE'S AUTO PAGE-TITLE BANNER
   All our pages use .mcs-pg-hero — the Kadence
   "Calendar / About / Admissions …" title bar
   above content is redundant and must be hidden.
───────────────────────────────────────────── */

/* Kadence renders the auto-title in .entry-hero / .hero-section */
body.page  .entry-hero,
body.page  .hero-section,
body.page  .page-hero-section,
body.single .entry-hero,
body.single .hero-section { display: none !important; }

/* Belt-and-suspenders: hide any Kadence-generated .entry-header on pages */
body.page .entry-header { display: none !important; }

/* ─────────────────────────────────────────────
   SUB-PAGE HERO GAP FIX
   Both wp:group heroes (.wp-block-group.mcs-pg-hero)
   and raw-HTML heroes (plain div.mcs-pg-hero) receive
   Kadence's content-area top margin (80px) +
   entry-content-wrap padding (32px), creating a
   112px white gap above the green hero. Remove both
   when our hero is the first block.
───────────────────────────────────────────── */
.entry-content-wrap:has(> .entry-content > .mcs-pg-hero:first-child) {
  padding-top: 0 !important;
}
.content-area:has(.mcs-pg-hero) {
  margin-top: 0 !important;
}

/* ─────────────────────────────────────────────
   SUB-PAGE HERO FULL-WIDTH BREAKOUT
   Raw-HTML heroes (Admissions, Calendar) live inside
   the entry-content column (~1160px). Break them out
   to 100vw so they span edge-to-edge like wp:group
   alignfull heroes do on all other pages.
───────────────────────────────────────────── */
.entry-content .mcs-pg-hero:not(.alignfull) {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ─────────────────────────────────────────────
   KADENCE HEADER OVERRIDES
───────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid #E4EDE7;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

/* Logo height */
.site-header .site-logo img,
.kadence-logo img {
  max-height: 56px;
  width: auto;
}

/* Hide site title text — logo image only */
.site-title,
.site-branding .site-title,
.header-site-title {
  display: none !important;
}

/* Nav links — force dark text regardless of Kadence palette
   Multiple selectors needed because Kadence injects its own
   colour CSS via <style> in <head> with high specificity.   */
.site-header nav a,
.site-header nav .nav-link-text,
.site-header nav span.nav-link-text,
.main-navigation a,
.main-navigation .nav-link-text,
#primary-navigation .nav-link-text,
.kadence-navigation .menu-item > a,
.kadence-navigation .menu-item > .nav-link-container > a,
.kadence-navigation .nav-link-text,
header .kadence-navigation a,
.header-navigation a,
.site-header a.nav-drop-title,
.site-header .nav-link-text,
body .site-header .menu-item > a {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .87rem !important;
  font-weight: 500 !important;
  color: var(--mcs-text) !important;
  text-decoration: none !important;
}
.site-header nav a:hover,
.main-navigation a:hover,
.kadence-navigation .menu-item:hover > a,
.main-navigation .current-menu-item > a,
body .site-header .menu-item:hover > a {
  color: var(--mcs-green) !important;
  background: var(--mcs-green-light) !important;
  border-radius: 7px;
}

/* Dropdown */
.main-navigation .sub-menu,
.kadence-navigation .sub-menu {
  border: 1px solid var(--mcs-green-border) !important;
  border-radius: var(--mcs-radius) !important;
  box-shadow: var(--mcs-shadow-lg) !important;
  background: #fff !important;
}
.main-navigation .sub-menu a,
.kadence-navigation .sub-menu a,
.kadence-navigation .sub-menu .nav-link-text {
  color: var(--mcs-text) !important;
  background: transparent !important;
}
.main-navigation .sub-menu a:hover,
.kadence-navigation .sub-menu .menu-item:hover > a {
  color: var(--mcs-green) !important;
  background: var(--mcs-green-light) !important;
}

/* Quick-access bar label */
.mcs-qbar-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mcs-muted);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.wp-block-button__link,
.kb-button {
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  transition: all .18s;
}

/* Primary (green) */
.is-style-primary .wp-block-button__link,
.kb-btn-global-outline {
  background: var(--mcs-green);
  color: #fff;
  border-color: var(--mcs-green);
}
.is-style-primary .wp-block-button__link:hover {
  background: var(--mcs-green-deep);
  border-color: var(--mcs-green-deep);
}

/* Accent (orange) */
.is-style-accent .wp-block-button__link {
  background: var(--mcs-orange);
  color: #fff;
  border-color: var(--mcs-orange);
}
.is-style-accent .wp-block-button__link:hover {
  background: var(--mcs-orange-h);
  border-color: var(--mcs-orange-h);
}

/* ─────────────────────────────────────────────
   SECTION UTILITIES (usable via Kadence "Additional CSS Class")
───────────────────────────────────────────── */
.mcs-sec-alt {
  background: var(--mcs-green-light);
}

.mcs-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mcs-green);
  margin-bottom: 14px;
}

.mcs-chip {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: #b6e4c8;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.2);
}

/* ─────────────────────────────────────────────
   HERO SECTION  (home page full-bleed cover)
   Matches preview.html exactly:
     min-height:    600px
     content col:   max-width 680px, padding 60px top/bottom
     description p: max-width 520px, margin-bottom 34px
───────────────────────────────────────────── */
.mcs-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  overflow: hidden;
}
.mcs-hero-body {
  padding: 60px 0;
}
/* 3-class specificity beats Kadence's .wp-block-cover.alignfull (2-class)
   which sets min-height:100vh on full-width cover blocks */
.wp-block-cover.alignfull.mcs-hero {
  min-height: 600px !important;
  height: auto !important;
}
.mcs-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0,40,15,.90) 0%, rgba(0,60,22,.78) 52%, rgba(0,40,15,.50) 100%);
}

/* ── text colours & spacing ─── */
.mcs-hero h1     { color: #fff !important; font-size: clamp(2.1rem, 5vw, 3.5rem) !important; margin-top: 0 !important; margin-bottom: 18px; }
.mcs-hero h1 em  { font-style: italic; color: #7ecfa0 !important; }
/* Base paragraph styles — margin-bottom intentionally omitted here;
   each element gets its own spacing rule below */
.mcs-hero p      { color: rgba(255,255,255,.83) !important; font-size: 1.05rem; line-height: 1.8; }
/* Chip: enforce small font (beats .mcs-hero p specificity) + tight gap before h1 */
.mcs-hero .mcs-chip { font-size: .75rem !important; line-height: 1.4 !important; margin-bottom: 12px !important; }
/* Kill WP is-layout-constrained / is-layout-flow automatic block-gap
   between every adjacent child inside the hero inner container */
.mcs-hero .wp-block-cover__inner-container > * + * { margin-block-start: 0 !important; }
/* "Schedule a Visit" ghost button — Kadence sets green bg via !important;
   restore transparent using the absence of WP's has-background class */
.mcs-hero .wp-block-button__link:not(.has-background) {
  background: transparent !important;
}
.mcs-hero .wp-block-button__link:not(.has-background):hover {
  background: rgba(255,255,255,.1) !important;
}

/* ── stats row ─── */
.mcs-hero-stats {
  display: flex !important;
  gap: 36px;
  flex-wrap: nowrap !important; /* keep all 3 stats on one row */
  align-items: center !important;
  margin-top: 0; /* spacing comes from buttons margin-bottom:48px */
}
/* Prevent WP flex layout from stretching individual stat groups */
.mcs-hero-stats > .wp-block-group { flex: 0 0 auto !important; }
/* Kill block-gap between the num <p> and label <p> inside each stat */
.mcs-hero-stats .wp-block-group > * + * { margin-block-start: 0 !important; }
/* Cognia group: image + text side-by-side with tight gap (matches preview .hs-img) */
.mcs-hero-cognia {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.mcs-hs-num {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  color: #fff !important;
  line-height: 1;
  margin-bottom: 0 !important;
}
.mcs-hs-label {
  font-size: .75rem;
  color: rgba(255,255,255,.62) !important;
  margin-top: 3px;
  margin-bottom: 0 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ── WP cover inner-container layout ──────────
   Replaces WP's per-child margin:auto centering
   (is-layout-constrained) with:
     • horizontal centering via padding   → matches .wrap
     • 60px top/bottom padding            → matches .hero-body { padding:60px 0 }
     • 680px max-width on every child     → matches .hero-body { max-width:680px }
   Then the description paragraph gets its own
     520px max-width                      → matches .hero p { max-width:520px }
──────────────────────────────────────────── */
.mcs-hero .wp-block-cover__inner-container {
  padding-left:   max(24px, calc((100% - 1160px) / 2)) !important;
  padding-right:  max(24px, calc((100% - 1160px) / 2)) !important;
  padding-top:    60px !important;
  padding-bottom: 60px !important;
}
.mcs-hero .wp-block-cover__inner-container > * {
  max-width: 680px !important; /* = preview.html .hero-body */
  margin-left:  0 !important;
  margin-right: 0 !important;
}
/* Description paragraph: narrower + spacing (matches .hero p { max-width:520px } in preview.html) */
.mcs-hero .wp-block-cover__inner-container > .wp-block-paragraph:not(.mcs-chip) {
  max-width: 520px !important;
  margin-bottom: 34px;
}

/* ─────────────────────────────────────────────
   QUICK-ACCESS BAR
───────────────────────────────────────────── */
.mcs-qbar {
  background: #fff;
  border-bottom: 2px solid var(--mcs-green-light);
}
.mcs-qbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 12px;
  flex-wrap: wrap;
  max-width: var(--mcs-max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.mcs-qlinks { display: flex; gap: 7px; flex-wrap: wrap; }
.mcs-ql {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  border: 1.5px solid var(--mcs-green-border) !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  color: var(--mcs-green) !important;
  background: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
.mcs-ql:hover,
.mcs-ql:focus {
  background: var(--mcs-green-light) !important;
  border-color: var(--mcs-green-mid) !important;
  color: var(--mcs-green) !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────
   WHY CHOOSE US GRID
───────────────────────────────────────────── */
.mcs-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.mcs-why-grid > div {
  background: #fff;
  border-radius: 12px;
  padding: 32px 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border: 1px solid var(--mcs-green-border);
  text-align: center;
}

/* ─────────────────────────────────────────────
   CORE COMMITMENTS GRID (5-col)
───────────────────────────────────────────── */
.mcs-pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.mcs-pillars-grid > div {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  border-left: 4px solid var(--mcs-green);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

/* ─────────────────────────────────────────────
   CONTACT CTA GRID (3-col)
───────────────────────────────────────────── */
.mcs-contact-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mcs-contact-cta-grid > div {
  background: var(--mcs-green-light);
  border-radius: 12px;
  padding: 28px;
  border: 1px solid var(--mcs-green-border);
  text-align: center;
}

/* ─────────────────────────────────────────────
   PROGRAM CARDS (two-row layout)
───────────────────────────────────────────── */
.mcs-prog-row-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  margin-top: 36px;
}
.mcs-prog-row-label:first-of-type { margin-top: 0; }
.mcs-prog-row-label span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mcs-green);
  white-space: nowrap;
  background: var(--mcs-green-light);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--mcs-green-border);
}
.mcs-prog-row-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mcs-green-border);
}
/* wp:paragraph outputs plain text (no <span>) — style the label text directly */
p.mcs-prog-row-label {
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  color: var(--mcs-green) !important;
  white-space: nowrap;
}

.mcs-prog-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 8px;
}

.mcs-prog-card {
  border-radius: var(--mcs-radius);
  background: #fff;
  box-shadow: var(--mcs-shadow-sm);
  border: 1px solid var(--mcs-green-border);
  padding: 24px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
/* Kill WP is-layout-flow block-gap between every card child (adds ~24px per gap) */
.mcs-prog-card > * + * { margin-block-start: 0 !important; }
.mcs-prog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mcs-shadow-md);
  border-color: var(--mcs-green-mid);
}

.mcs-prog-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--mcs-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 14px;
  transition: background .2s;
}
.mcs-prog-card:hover .mcs-prog-icon { background: #cce8d6; }

.mcs-prog-badge {
  display: inline-block;
  background: var(--mcs-green-light);
  color: var(--mcs-green);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid var(--mcs-green-border);
}

.mcs-prog-card h3 { font-size: .97rem; margin-bottom: 4px; }
.mcs-prog-card .mcs-grades { font-size: .75rem; color: var(--mcs-green); font-weight: 600; margin-bottom: 8px; }
.mcs-prog-card p { font-size: .81rem; line-height: 1.6; margin-bottom: 14px; color: var(--mcs-muted); }

.mcs-prog-link {
  font-size: .81rem;
  font-weight: 600;
  color: var(--mcs-green);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  margin-top: auto; /* push to bottom of flex-column card */
}
/* Legacy anchor-based .mcs-prog-link arrow — suppressed for wp:button wrapper */
.mcs-prog-link::after { content: '→'; transition: transform .15s; }
.mcs-prog-card:hover .mcs-prog-link::after { transform: translateX(4px); }
/* Both the outer wp:buttons wrapper AND the inner wp:button div must NOT show a duplicate arrow.
   home.html uses className on inner wp:button; ACAD_OVR uses className on outer wp:buttons. */
.wp-block-buttons.mcs-prog-link::after,
.wp-block-button.mcs-prog-link::after { content: none !important; }

/* ─────────────────────────────────────────────
   NEWS CARDS
───────────────────────────────────────────── */
.mcs-news-card {
  border-radius: var(--mcs-radius);
  overflow: hidden;
  box-shadow: var(--mcs-shadow-sm);
  border: 1px solid var(--mcs-green-border);
  background: #fff;
  transition: transform .2s;
}
.mcs-news-card:hover { transform: translateY(-3px); box-shadow: var(--mcs-shadow-md); }
.mcs-news-thumb { height: 180px; overflow: hidden; }
.mcs-news-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mcs-news-body { padding: 20px; }
.mcs-news-tag {
  background: var(--mcs-green-light);
  color: var(--mcs-green);
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ─────────────────────────────────────────────
   PAGE HERO (inner pages)
   Padding-based centering keeps all children
   at the same left edge — avoids WP constrained
   layout's per-child margin:auto misaligning
   headings (Kadence resets margin:0 on them)
   versus paragraphs (which still get margin:auto).
───────────────────────────────────────────── */
.mcs-pg-hero {
  background: linear-gradient(120deg, var(--mcs-green-deep), var(--mcs-green));
  padding-top:    56px !important;
  padding-bottom: 48px !important;
  /* !important beats Kadence's inline padding set by the block editor */
  padding-left:  max(24px, calc((100% - 1160px) / 2)) !important;
  padding-right: max(24px, calc((100% - 1160px) / 2)) !important;
  /* Kadence sets text-align:center on .alignfull group blocks — override here
     so all heroes match the left-aligned style of the raw-HTML About hero */
  text-align: left !important;
}
/* Reset any margin/max-width Kadence or WP constrained-layout adds to direct children
   and to the inner container itself */
.mcs-pg-hero > *,
.mcs-pg-hero .wp-block-group__inner-container,
.mcs-pg-hero > .wp-block-group__inner-container > * {
  max-width: none !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
/* Kill WP block-gap between breadcrumb → h1 → paragraph */
.mcs-pg-hero > * + *,
.mcs-pg-hero > .wp-block-group__inner-container > * + * { margin-block-start: 0 !important; }
/* Headings: pin left, white, no extra margin */
.mcs-pg-hero h1,
.mcs-pg-hero .wp-block-heading {
  margin-top:    0 !important;
  margin-left:   0 !important;
  margin-right:  0 !important;
  padding-left:  0 !important;
  max-width:     none !important;
  text-align:    left !important;
  color:         #fff !important;
  margin-bottom: 12px !important;
}
/* Paragraphs: pin left */
.mcs-pg-hero p,
.mcs-pg-hero .wp-block-paragraph {
  margin-left:  0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  text-align:   left !important;
}
/* Keep paragraph readable width (overrides max-width:none above) */
.mcs-pg-hero p  { color: rgba(255,255,255,.78) !important; max-width: 560px !important; font-size: 1rem; line-height: 1.8; }
/* Higher specificity so this wins over .mcs-pg-hero p { color:.78 } on wp:paragraph blocks */
.mcs-pg-hero .mcs-breadcrumb,
.mcs-pg-hero p.mcs-breadcrumb,
.mcs-pg-hero .wp-block-paragraph.mcs-breadcrumb {
  color: rgba(255,255,255,.5) !important;
  font-size: .8rem !important;
  margin-bottom: 14px !important;
  max-width: none !important;
}
.mcs-breadcrumb { font-size: .8rem; color: rgba(255,255,255,.5) !important; margin-bottom: 14px; max-width: none !important; }
.mcs-breadcrumb a,
.mcs-pg-hero .mcs-breadcrumb a { color: rgba(255,255,255,.65) !important; }
.mcs-breadcrumb a:hover,
.mcs-pg-hero .mcs-breadcrumb a:hover { color: #fff !important; }

/* ─────────────────────────────────────────────
   ADMISSIONS — STEPPER
───────────────────────────────────────────── */
.mcs-stepper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 0;
  position: relative;
  margin-bottom: 32px;
}
.mcs-stepper::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 34px;
  right: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--mcs-green), var(--mcs-green-mid));
  z-index: 0;
}
.mcs-step { text-align: center; position: relative; z-index: 1; padding: 0 8px; }
.mcs-step-num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: var(--mcs-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--mcs-green-mid);
}
.mcs-step h3 { font-size: .95rem; margin-bottom: 6px; }
.mcs-step p { font-size: .82rem; }

/* ─────────────────────────────────────────────
   TUITION TABLES
───────────────────────────────────────────── */
.mcs-tbl {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--mcs-radius);
  overflow: hidden;
  box-shadow: var(--mcs-shadow-sm);
  margin-bottom: 12px;
}
.mcs-tbl thead { background: var(--mcs-green); color: #fff; }
.mcs-tbl th, .mcs-tbl td { padding: 13px 18px; text-align: left; font-size: .87rem; }
.mcs-tbl th { font-weight: 600; letter-spacing: .02em; }
.mcs-tbl tbody tr:nth-child(even) { background: var(--mcs-green-light); }
.mcs-tbl tbody tr:hover { background: #DCF0E4; }
.mcs-tbl tfoot td { font-size: .77rem; color: var(--mcs-muted); padding: 10px 18px; background: #f8fbf8; border-top: 1px solid var(--mcs-green-border); }

/* ─────────────────────────────────────────────
   INFO / CALLOUT BOX
───────────────────────────────────────────── */
.mcs-info-box {
  background: var(--mcs-green-light);
  border-left: 4px solid var(--mcs-green);
  border-radius: 0 var(--mcs-radius) var(--mcs-radius) 0;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.mcs-info-box h5 { font-family: 'DM Serif Display', serif; font-size: .97rem; color: var(--mcs-green-deep); margin-bottom: 8px; }
.mcs-info-box p, .mcs-info-box li { font-size: .85rem; color: var(--mcs-muted); line-height: 1.7; }
.mcs-info-box li { padding-left: 14px; position: relative; margin-bottom: 4px; list-style: none; }
.mcs-info-box li::before { content: '•'; color: var(--mcs-green); position: absolute; left: 0; }
.mcs-info-box a { color: var(--mcs-green); font-weight: 600; text-decoration: underline; }

/* ─────────────────────────────────────────────
   TESTIMONIAL CARDS
───────────────────────────────────────────── */
.mcs-testi-card {
  background: #fff;
  border-radius: var(--mcs-radius);
  padding: 28px;
  box-shadow: var(--mcs-shadow-sm);
  border: 1px solid var(--mcs-green-border);
}
.mcs-testi-card blockquote {
  font-size: .9rem;
  line-height: 1.75;
  color: var(--mcs-muted);
  font-style: italic;
  margin-bottom: 20px;
}
.mcs-testi-card blockquote::before {
  content: '\201C';
  font-size: 1.8rem;
  line-height: 0;
  vertical-align: -8px;
  margin-right: 3px;
  color: var(--mcs-green-mid);
  font-family: 'DM Serif Display', serif;
}

/* ─────────────────────────────────────────────
   CTA BANNER
───────────────────────────────────────────── */
.mcs-cta-banner {
  background: linear-gradient(120deg, var(--mcs-green-deep), var(--mcs-green));
  padding: 80px 0;
  text-align: center;
}
.mcs-cta-banner h2,
.mcs-cta-banner .wp-block-heading { color: #fff !important; margin-bottom: 12px; }
.mcs-cta-banner p,
.mcs-cta-banner .wp-block-paragraph { color: rgba(255,255,255,.75) !important; max-width: 480px; margin: 0 auto; }

/* CTA Banner — outline white button (used in WP block buttons) */
.mcs-btn-outline-white .wp-block-button__link {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,.6) !important;
  color: #fff !important;
}
.mcs-btn-outline-white .wp-block-button__link:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.9) !important;
}

/* ─────────────────────────────────────────────
   HIDE KADENCE DEFAULT FOOTER
   Our custom .mcs-footer (via kadence_before_footer
   hook) replaces it entirely.
───────────────────────────────────────────── */
.site-footer { display: none !important; }

/* ─────────────────────────────────────────────
   ABOUT — TIMELINE
───────────────────────────────────────────── */
.mcs-timeline { position: relative; padding-left: 36px; margin-top: 40px; }
.mcs-timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--mcs-green), var(--mcs-green-mid));
}
.mcs-tl-item { position: relative; margin-bottom: 30px; }
.mcs-tl-dot {
  position: absolute;
  left: -32px; top: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--mcs-green);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mcs-green-mid);
}
.mcs-tl-yr { font-size: .75rem; font-weight: 700; color: var(--mcs-green); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px; }

/* ─────────────────────────────────────────────
   CALENDAR
───────────────────────────────────────────── */
.mcs-ue {
  background: #fff;
  border-radius: var(--mcs-radius);
  padding: 14px;
  box-shadow: var(--mcs-shadow-sm);
  border: 1px solid var(--mcs-green-border);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
  transition: transform .15s;
}
.mcs-ue:hover { transform: translateX(3px); }
.mcs-ue-date {
  min-width: 46px;
  text-align: center;
  background: var(--mcs-green-light);
  border-radius: 8px;
  padding: 7px 5px;
}
.mcs-ue-mo { font-size: .62rem; font-weight: 700; text-transform: uppercase; color: var(--mcs-green); letter-spacing: .06em; }
.mcs-ue-dy { font-family: 'DM Serif Display', serif; font-size: 1.35rem; color: var(--mcs-green); line-height: 1; }

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 900px) {
  .mcs-prog-row { grid-template-columns: repeat(3, 1fr); }
  .mcs-stepper { grid-auto-flow: row; }
  .mcs-stepper::before { display: none; }
  .mcs-step { text-align: left; display: flex; gap: 16px; align-items: flex-start; }
  .mcs-step-num { margin: 0; flex-shrink: 0; }
}

@media (max-width: 600px) {
  .mcs-hero { min-height: 420px; }
  .mcs-prog-row { grid-template-columns: repeat(2, 1fr); }
  .mcs-tbl th, .mcs-tbl td { padding: 10px 12px; font-size: .8rem; }
  .mcs-qbar-inner { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────
   GLOBAL COLOUR & TYPOGRAPHY NORMALISERS
   These ensure WordPress/Kadence defaults never
   override the MCS design — mirrors preview.html
   exactly so both renderings stay in sync.
───────────────────────────────────────────── */

/* Body and paragraph base — matches preview body rule */
body,
.entry-content p,
.wp-block-paragraph {
  color: var(--mcs-text);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.75;
}

/* All <p> tags use muted colour (matches preview p{color:var(--muted)}) */
p { color: var(--mcs-muted); }

/* Headings — match preview h1–h4 exactly */
h1, h2, h3, h4, h5,
.wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: 'DM Serif Display', serif;
  line-height: 1.2;
  color: var(--mcs-text);
}

/* Responsive heading sizes matching preview clamp() values */
h1, .wp-block-heading h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2, .wp-block-heading h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1rem; }

/* Links */
a { color: var(--mcs-green); }
a:hover { color: var(--mcs-green-deep); }

/* ── Inline-style colour overrides ──────────────────
   When page HTML uses hardcoded inline colours that
   match the preview, we alias them via attribute
   selectors so no manual find-replace is needed.
   These are identical to the preview tokens so they
   produce the same visual result.
──────────────────────────────────────────────────── */

/* Muted text spans written with inline color:#556B5E */
[style*="color:#556B5E"],
[style*="color: #556B5E"] {
  color: var(--mcs-muted) !important;
}

/* Dark text spans written with inline color:#1c2b1e */
[style*="color:#1c2b1e"],
[style*="color: #1c2b1e"] {
  color: var(--mcs-text) !important;
}

/* Green border overrides from inline border:#C8E4D0 */
[style*="border:1px solid #C8E4D0"],
[style*="border: 1px solid #C8E4D0"],
[style*="border:1.5px solid #C8E4D0"],
[style*="border: 1.5px solid #C8E4D0"] {
  border-color: var(--mcs-green-border) !important;
}

/* Section backgrounds — green-light */
[style*="background:#EFF7F2"],
[style*="background: #EFF7F2"] {
  background: var(--mcs-green-light) !important;
}

/* ── Font loading: ensure both weights are available ─ */
/* (Kadence loads Google Fonts but may not load all    */
/*  weights. The functions.php handles this properly.) */

/* ── wp:html block container normalisation ─────────── */
.wp-block-html {
  font-family: 'DM Sans', sans-serif;
  color: var(--mcs-text);
}

/* ── Ensure DM Serif Display headings inside
      wp:html blocks render correctly ──────────────── */
.wp-block-html h1,
.wp-block-html h2,
.wp-block-html h3,
.wp-block-html h4,
.wp-block-html h5 {
  font-family: 'DM Serif Display', serif;
  color: var(--mcs-text);
  line-height: 1.2;
}
.wp-block-html p {
  font-family: 'DM Sans', sans-serif;
  color: var(--mcs-muted);
  line-height: 1.75;
}

/* ─────────────────────────────────────────────
   APPLY NOW — nav CTA button (last menu item)
───────────────────────────────────────────── */
.main-navigation .menu-item.mcs-apply-now > a,
.kadence-navigation .menu-item.mcs-apply-now > a,
.main-navigation li.mcs-apply-now > a {
  background: var(--mcs-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 9px 20px !important;
  font-weight: 600 !important;
  margin-left: 8px;
}
.main-navigation .menu-item.mcs-apply-now > a:hover,
.kadence-navigation .menu-item.mcs-apply-now > a:hover {
  background: var(--mcs-orange-h) !important;
}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.mcs-footer {
  background: #0B1A0F !important;
  color: rgba(255,255,255,.75);
  font-family: 'DM Sans', sans-serif;
  font-size: .87rem;
  line-height: 1.7;
}
.mcs-footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 24px 32px;
}
.mcs-footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mcs-footer-logo img { max-height: 60px; width: auto; margin-bottom: 14px; }
.mcs-footer-tagline { font-size: .82rem; color: rgba(255,255,255,.55); margin-bottom: 20px; }
.mcs-footer h4 {
  font-family: 'DM Serif Display', serif;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 14px;
}
.mcs-footer ul { list-style: none; padding: 0; margin: 0; }
.mcs-footer ul li { margin-bottom: 8px; }
.mcs-footer ul li a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .85rem;
  transition: color .15s;
}
.mcs-footer ul li a:hover { color: #7ecfa0; }
.mcs-footer-contact p { font-size: .85rem; color: rgba(255,255,255,.65); margin-bottom: 8px; }
.mcs-footer-contact a { color: rgba(255,255,255,.65); text-decoration: none; }
.mcs-footer-contact a:hover { color: #7ecfa0; }
.mcs-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
}
.mcs-footer-bottom a { color: rgba(255,255,255,.35); text-decoration: none; }
.mcs-footer-bottom a:hover { color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
  .mcs-footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .mcs-footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .mcs-footer-bottom { flex-direction: column; text-align: center; }
}

/* ─────────────────────────────────────────────
   KADENCE ROW LAYOUT — GLOBAL CONSTRAINTS
   Constrain all Kadence section row blocks to
   the site max-width with consistent gutters and
   vertical rhythm. The outer .wp-block-kadence-
   rowlayout stays full-width for backgrounds;
   .kb-row-layout-inner carries the max-width cap.
───────────────────────────────────────────── */

.wp-block-kadence-rowlayout {
  padding-top: 80px;
  padding-bottom: 80px;
}

.kb-row-layout-inner {
  max-width: var(--mcs-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* CTA banner already defines its own padding — keep it */
.mcs-cta-banner {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* ─────────────────────────────────────────────
   WP BLOCK EDITOR CONTEXT
   Rules for wp:group / wp:heading / wp:paragraph
   / wp:buttons when used as native blocks inside
   MCS card layouts and section containers.
───────────────────────────────────────────── */

/* Ensure DM Serif Display on WP block headings inside groups */
.wp-block-group .wp-block-heading,
.wp-block-group h2,
.wp-block-group h3 {
  font-family: 'DM Serif Display', serif;
}

/* WP block grid — equal-height card children */
.is-layout-grid .mcs-prog-card,
.is-layout-grid .mcs-news-card,
.is-layout-grid .mcs-testi-card {
  height: 100%;
}

/* Program card row labels inside WP block groups — spacing fix */
.wp-block-group .mcs-prog-row-label { margin-top: 32px; }

/* Ensure WP block paragraph inside dark CTA gets white color */
.mcs-cta-banner .has-text-align-center { text-align: center; }

/* WP block buttons group centred inside CTA banner */
.mcs-cta-banner .wp-block-buttons { justify-content: center; margin-top: 32px; }

/* ── mcs-eyebrow as wp:paragraph <p> tag ─────────────── */
p.mcs-eyebrow { display: block; margin-bottom: 14px; }

/* ── PROGRAM CARD as wp:group ─────────────────────────────
   wp:group with layout:flow adds is-layout-flow which sets
   display:block. We restore our flex-column card layout.  */
.mcs-prog-card.wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.mcs-prog-card.wp-block-group .wp-block-heading {
  font-size: .97rem !important;
  margin-bottom: 4px;
  color: var(--mcs-text);
}
.mcs-prog-card.wp-block-group p.mcs-grades {
  font-size: .75rem;
  color: var(--mcs-green);
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
}
.mcs-prog-card.wp-block-group > .wp-block-paragraph:not(.mcs-grades) {
  font-size: .81rem;
  line-height: 1.6;
  color: var(--mcs-muted);
  margin-bottom: 14px;
}
.mcs-prog-card.wp-block-group .wp-block-buttons { margin-top: auto; }
/* Link-style "Learn More" button */
.mcs-prog-card .mcs-prog-link .wp-block-button__link,
.mcs-prog-card .is-style-link .wp-block-button__link {
  background: transparent !important;
  border: none !important;
  color: var(--mcs-green) !important;
  font-size: .81rem !important;
  font-weight: 600 !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.mcs-prog-card .mcs-prog-link .wp-block-button__link::after,
.mcs-prog-card .is-style-link .wp-block-button__link::after {
  content: ' →';
  display: inline-block;
  transition: transform .15s;
}
.mcs-prog-card:hover .mcs-prog-link .wp-block-button__link::after,
.mcs-prog-card:hover .is-style-link .wp-block-button__link::after {
  transform: translateX(4px);
}

/* ── CORE COMMITMENT CARD as wp:group ─────────────────── */
.mcs-commitment-card.wp-block-group {
  background: #fff;
  border-radius: var(--mcs-radius);
  padding: 22px;
  border-left: 4px solid var(--mcs-green);
  box-shadow: var(--mcs-shadow-sm);
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  height: 100%;
}
.mcs-commitment-icon {
  font-size: 1.5rem;
  margin-bottom: 10px;
  line-height: 1;
}
.mcs-commitment-card .wp-block-heading {
  font-size: .93rem !important;
  margin-bottom: 5px;
  color: var(--mcs-text);
}
.mcs-commitment-card .wp-block-paragraph {
  font-size: .82rem;
  color: var(--mcs-muted);
  line-height: 1.6;
}

/* ── CONTACT QUICK CARD as wp:group ───────────────────── */
.mcs-contact-card.wp-block-group {
  background: var(--mcs-green-light);
  border-radius: var(--mcs-radius);
  padding: 28px;
  border: 1px solid var(--mcs-green-border);
  text-align: center;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.mcs-contact-card-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
  line-height: 1;
}
.mcs-contact-card .wp-block-heading {
  font-size: 1rem !important;
  margin-bottom: 6px;
  color: var(--mcs-text);
}
.mcs-contact-card .wp-block-paragraph {
  font-size: .84rem;
  color: var(--mcs-muted);
  margin-bottom: 16px;
}

/* ── Generic button hover for WP block buttons ─────────── */
.wp-block-button .wp-block-button__link:hover { opacity: .88; }

/* Responsive: WP block grid columns collapse naturally via
   minimumColumnWidth — no override needed. mcs-prog-row
   responsive rules stay for legacy uses of .mcs-prog-row. */

/* ─────────────────────────────────────────────
   MOBILE / HAMBURGER NAVIGATION
   Matches the regular desktop menu:
     white background · dark-green text · green borders
   Targets both the inner nav AND Kadence's outer
   panel/drawer wrapper so no black gaps appear.
───────────────────────────────────────────── */

/* Hamburger toggle button */
.menu-toggle,
.kadence-menu-toggle-wrap button,
.header-mobile-nav-toggle,
.mobile-toggle,
.header-mobile-buttons .menu-toggle {
  color: var(--mcs-green) !important;
  background: transparent !important;
  border: 1.5px solid var(--mcs-green-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
}
.menu-toggle:hover,
.kadence-menu-toggle-wrap button:hover {
  background: var(--mcs-green-light) !important;
  border-color: var(--mcs-green) !important;
}
.menu-toggle svg,
.menu-toggle .toggle-icon,
.kadence-menu-toggle-wrap button svg {
  fill: var(--mcs-green) !important;
  color: var(--mcs-green) !important;
  stroke: var(--mcs-green) !important;
}

/* ── Outer panel / drawer wrapper ─────────────
   Kadence wraps the nav in several possible
   containers depending on version/settings.
   All must be white so no black gaps show. */
.mobile-header-section-inner,
.mobile-nav-section-inner,
.site-header-mobile-nav,
.kadence-mobile-header,
.kadence-mobile-header-nav-area,
.mobile-header-section,
.header-mobile-nav-wrap,
.kadence-mobile-nav,
.kadence-mobile-navigation,
.mobile-navigation,
#mobile-menu,
.primary-navigation-mobile {
  background: #fff !important;
  color: var(--mcs-green-deep) !important;
}

/* Close (X) button inside the mobile panel */
.mobile-close-button,
.kadence-mobile-close,
.header-mobile-nav-wrap .close-mobile-nav,
.mobile-header-section-inner .close-mobile-nav,
button.close-mobile-nav {
  color: var(--mcs-green) !important;
  background: transparent !important;
}
.mobile-close-button svg,
button.close-mobile-nav svg {
  fill: var(--mcs-green) !important;
  stroke: var(--mcs-green) !important;
}

/* ── Nav link items ────────────────────────── */
.kadence-mobile-nav .menu-item > a,
.header-mobile-nav-wrap .menu-item > a,
.mobile-navigation .menu-item > a,
.kadence-mobile-navigation .menu-item > a,
#mobile-menu .menu-item > a,
.primary-navigation-mobile .menu-item a,
.kadence-mobile-nav .nav-link-text,
.header-mobile-nav-wrap a,
.kadence-mobile-nav a {
  color: var(--mcs-green-deep) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--mcs-green-border) !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  background: transparent !important;
}
.kadence-mobile-nav .menu-item > a:hover,
.header-mobile-nav-wrap .menu-item > a:hover,
.kadence-mobile-navigation .menu-item:hover > a {
  color: var(--mcs-green) !important;
  background: var(--mcs-green-light) !important;
}
/* Kadence dims parent nav items (has-children) — force same dark color */
.kadence-mobile-nav .menu-item-has-children > a,
.header-mobile-nav-wrap .menu-item-has-children > a,
.kadence-mobile-navigation .menu-item-has-children > a {
  color: var(--mcs-green-deep) !important;
}
/* Kadence wraps parent-item links inside .drawer-nav-drop-wrap (a div),
   so the link is NOT a direct child of <li>. The Kadence inline style sets
   color: var(--global-palette8) = #C8E4D0 (1.3:1 contrast) on that wrapper.
   Override both the wrapper and the <a> inside it. */
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap,
.drawer-nav-drop-wrap,
.drawer-nav-drop-wrap > a {
  color: var(--mcs-green-deep) !important;
}
.kadence-mobile-nav .current-menu-item > a,
.header-mobile-nav-wrap .current-menu-item > a {
  color: var(--mcs-green) !important;
  font-weight: 600 !important;
}

/* ── Sub-menu (expanded dropdowns) ─────────── */
.kadence-mobile-nav .sub-menu,
.header-mobile-nav-wrap .sub-menu,
.kadence-mobile-navigation .sub-menu {
  background: var(--mcs-green-light) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.kadence-mobile-nav .sub-menu a,
.header-mobile-nav-wrap .sub-menu a,
.kadence-mobile-navigation .sub-menu a {
  color: var(--mcs-green-deep) !important;
  padding-left: 32px !important;
  font-size: .88rem !important;
  border-bottom-color: rgba(0,80,30,.12) !important;
}
.kadence-mobile-nav .sub-menu a:hover,
.kadence-mobile-navigation .sub-menu a:hover {
  color: var(--mcs-green) !important;
  background: rgba(0,80,30,.08) !important;
}

/* ── Expand/collapse arrow buttons ─────────── */
.kadence-mobile-nav .dropdown-btn,
.header-mobile-nav-wrap .dropdown-btn,
.kadence-mobile-nav .dropdown-toggle {
  color: var(--mcs-green) !important;
  border-color: var(--mcs-green-border) !important;
  background: transparent !important;
}
.kadence-mobile-nav .dropdown-btn:hover,
.header-mobile-nav-wrap .dropdown-btn:hover {
  color: var(--mcs-green-deep) !important;
  background: var(--mcs-green-light) !important;
}
.kadence-mobile-nav .dropdown-btn svg,
.header-mobile-nav-wrap .dropdown-btn svg {
  fill: var(--mcs-green) !important;
  stroke: var(--mcs-green) !important;
}

/* ── Apply Now — stays orange in mobile nav ── */
.kadence-mobile-nav .menu-item.mcs-apply-now > a,
.header-mobile-nav-wrap .menu-item.mcs-apply-now > a {
  background: var(--mcs-orange) !important;
  color: #fff !important;
  border-radius: 8px !important;
  border-bottom: none !important;
  margin: 12px 16px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────
   RESPONSIVE PAGE LAYOUT FIXES
   Two-column grid layouts inside wp:html blocks
   must collapse to single column on mobile.
───────────────────────────────────────────── */

@media (max-width: 768px) {

  /* General two-column inline grid → stack */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero stats row — allow wrap on small screens so long labels don't clip */
  .mcs-hero-stats { gap: 16px; flex-wrap: wrap !important; }
  .mcs-hero-body { padding: 40px 0; }

  /* Page hero padding */
  .mcs-pg-hero { padding-top: 48px !important; padding-bottom: 36px !important; }

  /* Section padding reduction */
  section[style*="padding:88px"],
  section[style*="padding: 88px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .wp-block-group[style*="padding-top:88px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Hero h1 size — tighten for tablet/mobile */
  .mcs-pg-hero h1,
  .mcs-pg-hero .wp-block-heading {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
  }

  /* Quick-access bar — stack label + buttons on tablet/mobile */
  .mcs-qbar-inner { flex-direction: column; align-items: stretch; gap: 10px; }
  .mcs-qlinks { flex-direction: column; gap: 6px; }
  .mcs-ql {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: .83rem !important;
    border-radius: 8px !important;
  }

  /* Why Choose Us grid */
  .mcs-why-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Core Commitments grid */
  .mcs-pillars-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Contact CTA grid */
  .mcs-contact-cta-grid { grid-template-columns: 1fr !important; }

  /* About page: Who We Are image */
  div[style*="border-radius:12px;overflow:hidden;height:420px"] {
    height: 240px !important;
  }

  /* Program cards min-width override */
  .mcs-prog-row { grid-template-columns: 1fr 1fr !important; }

  /* ── Admissions page mobile fixes ─────────────────── */

  /* Stepper: keep [number]+[title] on one line; description wraps below */
  .mcs-step {
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .mcs-step h3 {
    flex: 1 !important;
    min-width: 0;
    margin-bottom: 0 !important;
  }
  .mcs-step p {
    width: 100% !important;
    padding-left: 70px !important;
    margin-top: 6px !important;
  }

  /* Eyebrow + subtitle rows: stack instead of sitting side-by-side */
  .mcs-eyebrow-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  /* Button rows: each button goes full-width on its own line */
  .mcs-btn-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .mcs-btn-row > a,
  .mcs-btn-row > button {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Tuition tables: scroll horizontally instead of overflowing */
  .mcs-tbl {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* EC green box: reduce padding so content has room to breathe */
  .mcs-ec-box {
    padding: 20px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 480px) {
  /* Single column on very small screens */
  .mcs-prog-row { grid-template-columns: 1fr !important; }
  .mcs-why-grid { grid-template-columns: 1fr !important; }
  .mcs-pillars-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mcs-contact-cta-grid { grid-template-columns: 1fr !important; }
  .mcs-hero h1 { font-size: 1.8rem !important; }
}


/* ═══════════════════════════════════════════════════════
   BLOCK CONVERSION — NEW CLASS STYLES
   All formerly wp:html content now uses native wp: blocks.
   These rules replace the old inline CSS.
═══════════════════════════════════════════════════════ */

/* ── Prog-card: paragraph-based icon & badge ───────── */
p.mcs-prog-icon {
  width: 54px; height: 54px;
  border-radius: 12px; background: var(--mcs-green-light);
  display: flex !important; align-items: center; justify-content: center;
  font-size: 1.55rem; line-height: 1;
  margin: 0 0 12px !important;
}
p.mcs-prog-badge {
  display: inline-flex !important;
  background: var(--mcs-green-light);
  border: 1px solid var(--mcs-green-border);
  border-radius: 20px; padding: 4px 12px;
  font-size: .7rem; font-weight: 700; color: var(--mcs-green);
  letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 14px !important;
}
.mcs-prog-row-label-mt { margin-top: 32px !important; }

/* ── Hero cover block styles ───────────────────────── */
.wp-block-cover.mcs-hero { text-align: left; }
.wp-block-cover.mcs-hero .wp-block-cover__inner-container { padding: 80px 0 60px; }
.mcs-hero-cognia.wp-block-group { display: flex !important; align-items: center; gap: 10px; }
.mcs-cognia-seal-img img { background: #fff !important; padding: 3px; border-radius: 50% !important; }
.mcs-hs-range.wp-block-paragraph { font-size: 1.3rem !important; line-height: 1.2 !important; }
.mcs-hs-cognia.wp-block-paragraph { font-size: 1rem !important; line-height: 1.3 !important; }
@media (max-width: 768px) {
  .wp-block-cover.mcs-hero .wp-block-cover__inner-container { padding: 48px 0 40px; }
}

/* ── Why Choose Us grid — always 4 equal columns ───── */
.mcs-why-grid.wp-block-group {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 768px) {
  .mcs-why-grid.wp-block-group { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .mcs-why-grid.wp-block-group { grid-template-columns: 1fr !important; }
}

/* ── Why Choose Us cards ───────────────────────────── */
.mcs-why-card.wp-block-group {
  background: #fff;
  border-radius: 12px; padding: 32px 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border: 1px solid var(--mcs-green-border);
  text-align: center;
  display: flex !important; flex-direction: column !important;
  align-items: center !important;
}
/* Kill WP is-layout-flow block-gap between card children */
.mcs-why-card > * + * { margin-block-start: 0 !important; }
.mcs-why-card .wp-block-heading { font-size: 1.02rem !important; margin-bottom: 8px; color: var(--mcs-text); }
.mcs-why-card .wp-block-paragraph { font-size: .85rem; color: var(--mcs-muted); margin: 0; }
p.mcs-why-icon {
  width: 66px; height: 66px;
  border-radius: 50%; background: var(--mcs-green-light);
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 auto 18px !important;
  font-size: 1.7rem; line-height: 1; text-align: center;
}
.mcs-why-cognia-wrap.wp-block-group {
  width: 66px; height: 66px;
  border-radius: 50%; background: var(--mcs-green-light);
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 auto 18px !important;
}
.mcs-why-cognia-wrap img { width: 48px !important; height: 48px !important; object-fit: contain; border-radius: 50% !important; }

/* ── Feature cards (Student Life) ──────────────────── */
.mcs-feature-card.wp-block-group {
  background: #fff;
  border-radius: 12px; padding: 32px 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  border: 1px solid var(--mcs-green-border);
  text-align: center;
  display: flex !important; flex-direction: column !important;
  align-items: center !important;
}
.mcs-feature-card .wp-block-heading { font-size: 1.02rem !important; margin-bottom: 8px; color: var(--mcs-text); }
.mcs-feature-card .wp-block-paragraph { font-size: .85rem; color: var(--mcs-muted); margin: 0; }
p.mcs-feature-icon {
  width: 66px; height: 66px;
  border-radius: 50%; background: var(--mcs-green-light);
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 auto 18px !important;
  font-size: 1.7rem; line-height: 1; text-align: center;
}

/* ── News card internal ─────────────────────────────── */
p.mcs-news-meta { font-size: .74rem !important; color: var(--mcs-muted); margin-left: 6px !important; }
.mcs-news-card.wp-block-group { display: flex !important; flex-direction: column !important; }
.mcs-news-card .mcs-news-body.wp-block-group { display: flex !important; flex-direction: column !important; flex: 1; padding: 20px; }
.mcs-news-card .mcs-news-thumb.wp-block-image { margin: 0 !important; }
.mcs-news-card .mcs-news-thumb img { width: 100%; height: 190px; object-fit: cover; display: block; }
.mcs-news-card .wp-block-heading { font-size: 1rem !important; margin-bottom: 8px !important; line-height: 1.35; color: var(--mcs-text); }
.mcs-news-card .wp-block-paragraph { font-size: .84rem; color: var(--mcs-muted); }
.wp-block-button.mcs-news-link .wp-block-button__link {
  background: transparent !important; border: none !important;
  color: var(--mcs-green) !important; padding: 0 !important;
  font-weight: 600; font-size: .83rem; box-shadow: none !important;
}

/* ── Testimonial card internal ──────────────────────── */
.mcs-testi-card.wp-block-group { display: flex !important; flex-direction: column !important; }
p.mcs-testi-stars {
  color: #F59E0B; font-size: .9rem; letter-spacing: 3px;
  margin-bottom: 14px !important; margin-top: 0 !important;
}
.mcs-testi-card .wp-block-quote {
  border: none !important; padding: 0 !important; margin: 0 !important;
}
.mcs-testi-card .wp-block-quote p {
  font-style: italic; font-size: .9rem; color: var(--mcs-muted); line-height: 1.7;
}
.mcs-testi-author.wp-block-group { display: flex !important; align-items: center; gap: 12px; margin-top: 20px !important; }
p.mcs-testi-avatar {
  width: 42px !important; height: 42px !important;
  border-radius: 50%; background: var(--mcs-green-light);
  display: inline-flex !important; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif; font-size: 1rem;
  color: var(--mcs-green); font-weight: 700; flex-shrink: 0;
  line-height: 1; text-align: center; margin: 0 !important;
}
p.mcs-testi-name { font-size: .88rem !important; font-weight: 600; color: var(--mcs-text); margin: 0 !important; }
p.mcs-testi-role { font-size: .75rem !important; color: var(--mcs-muted); margin: 0 !important; }

/* ── About page stat chips ──────────────────────────── */
.mcs-stat-chip.wp-block-group { text-align: center; }
p.mcs-stat-num {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.8rem !important; color: var(--mcs-green) !important;
  line-height: 1 !important; margin: 0 0 4px !important;
}
p.mcs-stat-label { font-size: .75rem !important; color: var(--mcs-muted) !important; font-weight: 500; margin: 0 !important; }
.mcs-stat-cognia img { display: block; margin: 0 auto 4px; }

/* ── About page photo ───────────────────────────────── */
.mcs-about-photo img { width: 100%; height: 420px; object-fit: cover; display: block; }
@media (max-width: 768px) { .mcs-about-photo img { height: 260px; } }

/* ── Tuition table inside wp:table figure ───────────── */
figure.wp-block-table.mcs-tbl { margin: 0 0 36px; overflow-x: auto; }
figure.wp-block-table.mcs-tbl table { width: 100%; border-collapse: collapse; }
figure.wp-block-table.mcs-tbl thead tr { background: var(--mcs-green-deep); color: #fff; }
figure.wp-block-table.mcs-tbl th {
  padding: 13px 16px; font-size: .8rem; font-weight: 600;
  text-align: left; letter-spacing: .03em;
}
figure.wp-block-table.mcs-tbl td {
  padding: 12px 16px; font-size: .85rem; color: var(--mcs-text);
  border-bottom: 1px solid var(--mcs-green-border);
}
figure.wp-block-table.mcs-tbl tbody tr:hover { background: var(--mcs-green-light); }
figure.wp-block-table.mcs-tbl tfoot td {
  background: #f9fef9; font-size: .78rem; color: var(--mcs-muted);
  font-style: italic; padding: 10px 16px;
}
h4.mcs-tbl-heading {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.05rem !important; color: #003D18 !important;
  margin-bottom: 16px !important; padding-bottom: 8px;
  border-bottom: 2px solid var(--mcs-green-border);
}
.mcs-tbl-divider { border-color: var(--mcs-green-border) !important; margin: 0 !important; }

/* ── Admissions stepper (native blocks) ─────────────── */
.mcs-stepper.wp-block-group { display: flex !important; flex-direction: column !important; gap: 20px; }
.mcs-step.wp-block-group {
  background: #fff; border-radius: 12px;
  padding: 24px; border: 1px solid var(--mcs-green-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  position: relative;
}
p.mcs-step-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--mcs-green); color: #fff;
  display: flex !important; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; line-height: 1;
  margin: 0 0 14px !important;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--mcs-green);
}
.mcs-step .wp-block-heading { font-size: .97rem !important; margin-bottom: 6px; color: var(--mcs-text); }
.mcs-step .wp-block-paragraph { font-size: .84rem; color: var(--mcs-muted); line-height: 1.65; margin: 0; }
.mcs-ec-track.wp-block-group { /* already styled via inline style on block */ }
p.mcs-adm-sub { font-size: .75rem; color: var(--mcs-muted); font-weight: 500; margin: 0 0 0 12px !important; }

/* ── Calendar page ──────────────────────────────────── */
.mcs-calendar-embed.wp-block-group { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
p.mcs-ical-app { font-size: .82rem !important; font-weight: 600 !important; color: var(--mcs-green) !important; margin: 0 0 3px !important; }
p.mcs-ical-hint { font-size: .76rem !important; color: var(--mcs-muted) !important; margin: 0 !important; }
.mcs-ue.wp-block-group { display: flex !important; align-items: center; gap: 14px; margin-bottom: 14px; }
.mcs-ue-date.wp-block-group { display: flex !important; flex-direction: column !important; align-items: center; min-width: 40px; }
p.mcs-ue-mo { font-size: .62rem !important; font-weight: 700; letter-spacing: .08em; color: var(--mcs-green); text-transform: uppercase; margin: 0 !important; }
p.mcs-ue-dy { font-size: 1.3rem !important; font-weight: 700; color: var(--mcs-text); line-height: 1; margin: 0 !important; }
.mcs-ue .wp-block-heading { font-size: .86rem !important; font-weight: 600 !important; margin-bottom: 3px !important; color: var(--mcs-text); }
.mcs-ue .wp-block-paragraph { font-size: .76rem !important; color: var(--mcs-muted); margin: 0 !important; }
p.mcs-ue-note { font-size: .76rem; color: var(--mcs-muted); font-style: italic; margin-top: 12px; }
p.mcs-portal-cta-icon { font-size: 1.6rem; margin-bottom: 10px !important; margin-top: 0 !important; }
.mcs-portal-cta .wp-block-heading { color: #fff !important; font-size: .95rem !important; margin-bottom: 7px !important; }
.mcs-portal-cta .wp-block-paragraph { color: rgba(255,255,255,.78) !important; font-size: .82rem !important; margin-bottom: 14px !important; }

/* ── Contact page info items ────────────────────────── */
.mcs-contact-info-item.wp-block-group { display: flex !important; }
p.mcs-cii-icon { font-size: 1.4rem; flex-shrink: 0; margin: 0 !important; padding-top: 2px; }
h5.mcs-cii-label { font-weight: 600 !important; font-size: .92rem !important; color: var(--mcs-text) !important; margin-bottom: 4px !important; }
.mcs-contact-info-item .wp-block-paragraph { font-size: .88rem; color: var(--mcs-muted); line-height: 1.7; margin: 0 !important; }
p.mcs-form-note { font-size: .75rem; color: var(--mcs-muted); text-align: center; margin-top: 8px; }

/* ── Leadership / Faculty page ─────────────────────── */
/* ── Force equal tile heights in all faculty grids ──────────────────
   Kadence / WP can resolve .is-layout-grid to align-items:start which
   lets each card shrink to its own content height. Override to stretch
   so every tile in the same row is as tall as the tallest in that row. */
.is-layout-grid:has(> .wp-block-group.mcs-faculty-card),
.is-layout-grid:has(> .wp-block-group.mcs-faculty-list-card) {
  align-items: stretch !important;
}

.mcs-faculty-card.wp-block-group {
  background: #EFF7F2; border-radius: 12px; padding: 24px;
  border: 1px solid var(--mcs-green-border);
  display: flex !important; flex-direction: column;
  height: 100%; /* fill the stretched grid cell */
}
/* Kill WP block-gap between avatar → name → role */
.mcs-faculty-card.wp-block-group > * + * { margin-block-start: 0 !important; }
p.mcs-faculty-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--mcs-green); color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem; font-weight: 700;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 0 14px !important;
  flex-shrink: 0;
}
p.mcs-faculty-name { font-weight: 700; color: var(--mcs-text); font-size: .95rem; margin: 0 0 3px !important; }
p.mcs-faculty-role { font-size: .82rem; color: var(--mcs-green); font-weight: 600; margin: 0 !important; }
.mcs-faculty-list-card.wp-block-group {
  background: #fff; border-radius: 10px; padding: 20px;
  border: 1px solid var(--mcs-green-border);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  display: flex !important; flex-direction: column;
  height: 100%; /* fill the stretched grid cell */
}
/* Kill WP block-gap between name → description */
.mcs-faculty-list-card.wp-block-group > * + * { margin-block-start: 0 !important; }
p.mcs-faculty-desc { font-size: .82rem; color: var(--mcs-muted); margin: 4px 0 0 !important; }

/* ── Subject / Enrichment / Dual-enroll boxes ──────── */
.mcs-subjects-box.wp-block-group,
.mcs-enrichment-box.wp-block-group,
.mcs-dual-box.wp-block-group {
  background: #EFF7F2; border-radius: 12px; padding: 28px; margin-bottom: 16px;
}
.mcs-subjects-box .wp-block-heading,
.mcs-enrichment-box .wp-block-heading,
.mcs-dual-box .wp-block-heading {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1rem !important; color: var(--mcs-text) !important; margin-bottom: 14px !important;
}
.mcs-subjects-box .wp-block-list {
  display: flex !important; flex-wrap: wrap; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
.mcs-subjects-box .wp-block-list li {
  background: #fff; border: 1px solid var(--mcs-green-border);
  border-radius: 20px; padding: 5px 14px;
  font-size: .8rem; color: var(--mcs-green); font-weight: 600;
}
.mcs-enrichment-box .wp-block-list li,
.mcs-dual-box .wp-block-list li { font-size: .87rem; color: var(--mcs-muted); line-height: 1.8; }
.mcs-all-grades-box.wp-block-group { margin-top: 16px; }
.mcs-all-grades-box .wp-block-heading {
  font-size: .78rem !important; font-weight: 700 !important; color: var(--mcs-text) !important;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px !important;
}
.mcs-all-grades-box .wp-block-list {
  display: flex !important; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0;
}
.mcs-all-grades-box .wp-block-list li {
  background: #fff; border: 1px solid var(--mcs-green-border);
  border-radius: 20px; padding: 4px 12px;
  font-size: .78rem; color: var(--mcs-green); font-weight: 600;
}

/* ── HS Graduation requirements ──────────────────── */
.mcs-grad-box.wp-block-group { background: #EFF7F2; border-radius: 12px; padding: 24px; margin-bottom: 16px; }
.mcs-grad-box .wp-block-heading {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1rem !important; color: var(--mcs-text) !important; margin-bottom: 12px !important;
}
.mcs-grad-req-item.wp-block-group {
  display: flex !important; justify-content: space-between; align-items: center;
  background: #fff; border-radius: 8px; padding: 12px 16px;
  border: 1px solid var(--mcs-green-border); margin-bottom: 10px;
}
.mcs-grad-req-item.wp-block-group:last-child { margin-bottom: 0; }
p.mcs-grad-label { font-size: .87rem; color: var(--mcs-text); font-weight: 600; margin: 0 !important; }
p.mcs-grad-value {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.3rem !important; color: var(--mcs-green) !important;
  margin: 0 !important; line-height: 1;
}
p.mcs-grad-note { font-size: .82rem; color: var(--mcs-muted); margin: 0 !important; }

/* ── Portal box (MS / HS right column) ───────────── */
.mcs-portal-box.wp-block-group {
  background: #fff; border-radius: 12px; padding: 36px;
  border: 1px solid var(--mcs-green-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06); text-align: center;
}
.mcs-portal-box .wp-block-heading {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.2rem !important; color: var(--mcs-text) !important; margin-bottom: 16px !important;
}
.mcs-portal-box .wp-block-paragraph { font-size: .9rem; color: var(--mcs-muted); max-width: 400px; margin: 0 auto 24px !important; }

/* ── EC mini cards (Daycare / Preschool / Pre-K / Hours) */
.mcs-ec-mini-card.wp-block-group {
  background: #EFF7F2; border-radius: 10px; padding: 18px;
  text-align: center; border: 1px solid var(--mcs-green-border);
}
p.mcs-ec-mini-icon { font-size: 1.8rem; margin: 0 0 6px !important; }
p.mcs-ec-mini-title { font-weight: 700; color: var(--mcs-text); font-size: .88rem; margin: 0 0 3px !important; }
p.mcs-ec-mini-ages { font-size: .78rem; color: var(--mcs-muted); margin: 0 !important; }

/* ── EC alert / notice box ───────────────────────── */
.mcs-alert-box.wp-block-group {
  background: #EFF7F2; border-radius: 10px; padding: 16px 20px;
  border-left: 4px solid var(--mcs-green); margin-top: 20px;
}
.mcs-alert-box .wp-block-paragraph {
  color: var(--mcs-green) !important; font-weight: 600 !important;
  font-size: .88rem !important; margin: 0 !important;
}

/* ── EC / K-12 portal CTA section ────────────────── */
.mcs-portal-section.wp-block-group { text-align: center; }
.mcs-portal-section .wp-block-heading {
  font-family: 'DM Serif Display', serif !important;
  font-size: 1.4rem !important; color: var(--mcs-text) !important; margin-bottom: 16px !important;
}
.mcs-portal-section .wp-block-paragraph {
  font-size: .9rem; color: var(--mcs-muted); max-width: 500px; margin: 0 auto 28px !important;
}

/* ── Misc helpers ─────────────────────────────────── */
p.mcs-muted-note { font-style: italic; color: var(--mcs-muted); line-height: 1.8; }
p.mcs-prog-detail-note { font-size: .78rem; color: var(--mcs-muted); margin-top: 8px !important; }
p.mcs-news-tag {
  display: inline-flex !important; background: var(--mcs-green-light);
  border: 1px solid var(--mcs-green-border); border-radius: 20px;
  padding: 3px 10px; font-size: .7rem; font-weight: 700;
  color: var(--mcs-green); letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 8px !important;
}


/* ── Calendar Layout ── */
.mcs-cal-grid{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;max-width:100%;overflow:hidden}
@media(max-width:900px){.mcs-cal-grid{grid-template-columns:1fr;gap:24px}}
.mcs-cal-wrap{min-width:0;overflow:hidden;background:#fff;border-radius:14px;border:1px solid #e2e8e4;box-shadow:0 2px 12px rgba(0,0,0,.06);padding:28px 24px;margin-bottom:24px}
.mcs-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mcs-cal-title{font-family:"DM Sans",sans-serif;font-size:1.35rem;font-weight:700;color:#1c2b1e;margin:0;min-width:200px;text-align:center}
.mcs-cal-nav{width:40px;height:40px;border-radius:50%;border:1.5px solid #d1d9d3;background:#fff;cursor:pointer;font-size:1.1rem;color:#005C24;display:flex;align-items:center;justify-content:center;transition:all .2s}
.mcs-cal-nav:hover{background:#EFF7F2;border-color:#005C24}
.mcs-cal-tabs{display:flex;gap:6px;margin-bottom:18px;background:#f3f6f4;border-radius:8px;padding:4px}
.mcs-cal-tab{flex:1;padding:9px 16px;border:none;border-radius:6px;font-family:"DM Sans",sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;background:transparent;color:#556B5E}
.mcs-cal-tab.active{background:#005C24;color:#fff;box-shadow:0 2px 6px rgba(0,92,36,.25)}
.mcs-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:6px}
.mcs-cal-dow div{font-family:"DM Sans",sans-serif;font-size:.72rem;font-weight:600;color:#8a9b8e;text-transform:uppercase;letter-spacing:.05em;padding:6px 0}
.mcs-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mcs-cal-day{position:relative;min-height:72px;padding:4px;border-radius:6px;cursor:default;transition:background .15s}
.mcs-cal-day:hover{background:#f7faf8}
.mcs-cal-day.other-month{opacity:.35}
.mcs-cal-day.today{background:#EFF7F2;box-shadow:inset 0 0 0 2px #005C24;border-radius:6px}
.mcs-day-num{font-family:"DM Sans",sans-serif;font-size:.78rem;font-weight:600;color:#3a4d3e;margin-bottom:2px;padding:2px 4px}
.mcs-day-events{display:flex;flex-direction:column;gap:1px}
.mcs-day-evt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.62rem;font-weight:600;padding:2px 4px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;line-height:1.3;transition:opacity .15s}
.mcs-day-evt:hover{opacity:.85}
.mcs-day-evt.t-holiday{background:#FDECEA;color:#D93025}
.mcs-day-evt.t-academic{background:#E8F0FE;color:#1A73E8}
.mcs-day-evt.t-event{background:#FEF3E8;color:#E8710A}
.mcs-day-evt.t-early-dismissal{background:#E6F4EA;color:#0D904F}
.mcs-day-more{font-size:.6rem;color:#8a9b8e;padding:1px 4px;cursor:pointer;font-weight:500}
.mcs-day-more:hover{color:#005C24}
.mcs-cal-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;padding-top:14px;border-top:1px solid #edf0ee}
.mcs-cal-leg-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#556B5E;font-weight:500}
.mcs-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
/* ── Event Detail Popup ── */
.mcs-cal-detail{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.35);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.mcs-cal-detail-inner{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.18);max-width:420px;width:100%;padding:28px;position:relative;animation:mcs-pop .2s ease-out}
@keyframes mcs-pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.mcs-detail-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:none;background:#f3f6f4;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;color:#556B5E;transition:all .15s}
.mcs-detail-close:hover{background:#e8ede9;color:#1c2b1e}
.mcs-detail-badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.mcs-detail-badge.t-holiday{background:#FDECEA;color:#D93025}
.mcs-detail-badge.t-academic{background:#E8F0FE;color:#1A73E8}
.mcs-detail-badge.t-event{background:#FEF3E8;color:#E8710A}
.mcs-detail-badge.t-early-dismissal{background:#E6F4EA;color:#0D904F}
.mcs-detail-title{font-family:"DM Sans",sans-serif;font-size:1.15rem;font-weight:700;color:#1c2b1e;margin-bottom:8px}
.mcs-detail-date{font-size:.85rem;color:#556B5E;margin-bottom:4px}
.mcs-detail-desc{font-size:.84rem;color:#6b7f6e;margin-top:10px;line-height:1.55}


/* ── Subscribe Section ─────────────────────────── */
.mcs-cal-subscribe {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  margin-top: 20px;
}
.mcs-cal-subscribe h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 16px;
}
.mcs-cal-sub-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mcs-cal-sub-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s;
  text-decoration: none;
  color: inherit;
}
.mcs-cal-sub-row:hover {
  background: #e8f4f8;
}
.mcs-cal-sub-row img {
  width: 28px;
  height: 28px;
}
.mcs-cal-sub-row span {
  font-size: .95rem;
  font-weight: 500;
  color: #333;
}

/* ── Sidebar ───────────────────────────────────── */
.mcs-cal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Upcoming Events ───────────────────────────── */
.mcs-cal-upcoming {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.mcs-cal-upcoming h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 16px;
}
.mcs-ue-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mcs-ue-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.mcs-ue-item:last-child {
  border-bottom: none;
}
.mcs-ue-date-box {
  min-width: 52px;
  text-align: center;
  background: #f0f4ff;
  border-radius: 8px;
  padding: 6px 8px;
  flex-shrink: 0;
}
.mcs-ue-mo {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1a5276;
  letter-spacing: .5px;
}
.mcs-ue-dy {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.1;
}
.mcs-ue-info {
  flex: 1;
  min-width: 0;
}
.mcs-ue-info h4 {
  font-size: .95rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 4px;
  line-height: 1.3;
}
.mcs-ue-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.mcs-ue-badge.t-holiday    { background:#fde8e8; color:#c0392b; }
.mcs-ue-badge.t-academic   { background:#e8f0fe; color:#1a5276; }
.mcs-ue-badge.t-event      { background:#fef3e2; color:#e67e22; }
.mcs-ue-badge.t-early-dismissal { background:#e8f8e8; color:#27ae60; }


/* ── Portal & EC Cards ─────────────────────────── */
.mcs-cal-portal-card,
.mcs-cal-ec-card {
  background: linear-gradient(135deg, #1a5276 0%, #2980b9 100%);
  border-radius: 12px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.mcs-cal-ec-card {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}
.mcs-cal-portal-card h3,
.mcs-cal-ec-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: #fff;
}
.mcs-cal-portal-card p,
.mcs-cal-ec-card p {
  font-size: .9rem;
  opacity: .9;
  margin: 0 0 16px;
  line-height: 1.5;
}
.mcs-cal-portal-card a,
.mcs-cal-ec-card a {
  display: inline-block;
  background: rgba(255,255,255,.2);
  color: #fff;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s;
}
.mcs-cal-portal-card a:hover,
.mcs-cal-ec-card a:hover {
  background: rgba(255,255,255,.35);
}

/* ── Print Calendar Button ─────────────────────── */
.mcs-cal-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #1a5276;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .1s;
  margin-top: 16px;
}
.mcs-cal-print-btn:hover {
  background: #2980b9;
  transform: translateY(-1px);
}
.mcs-cal-print-btn:active {
  transform: translateY(0);
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 768px) {
  .mcs-cal-grid {
    grid-template-columns: 1fr;
  }
  .mcs-cal-days {
    gap: 2px;
  }
  .mcs-cal-day {
    min-height: 60px;
    padding: 4px;
  }
  .mcs-cal-day .mcs-day-num {
    font-size: .75rem;
  }
  .mcs-day-evt {
    font-size: .55rem;
    padding: 1px 3px;
  }
  .mcs-cal-header h2 {
    font-size: 1.1rem;
  }
  .mcs-cal-tabs button {
    padding: 6px 14px;
    font-size: .8rem;
  }
  .mcs-cal-legend {
    gap: 8px;
  }
  .mcs-cal-leg-item {
    font-size: .7rem;
  }
}

/* ── Print Media ───────────────────────────────── */
@media print {
  .mcs-cal-sidebar,
  .mcs-cal-subscribe,
  .mcs-cal-print-btn,
  .mcs-cal-tabs,
  .mcs-cal-nav,
  .mcs-cal-detail {
    display: none !important;
  }
  .mcs-cal-grid {
    display: block;
  }
  .mcs-cal-wrap {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}