/* ==========================================================================
   Monsif International School - Design System (2026)
   --------------------------------------------------------------------------
   Layered ON TOP of bootstrap.min.css + style.css. Nothing here changes the
   grid; it restyles the shell, components and CMS output.

   Brand note: the palette is not new. The crest itself is drawn in
   #005040 green and #904020 copper; the old stylesheet already used
   #005e4a / #7f441f / #f8f0db. What changed is strength and hierarchy -
   the header/footer used to paint the green at 50% opacity (rgba(0,94,74,.5)),
   which washed it out to a pale sage and dropped nav contrast to 2.24:1.
   Restoring the real green takes the same colour to 7.78:1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand: green (primary) --- */
  --mis-green-900: #00382c;
  --mis-green-800: #004a3a;
  --mis-green-700: #005e4a; /* THE brand green, full strength */
  --mis-green-600: #0a7059;
  --mis-green-500: #168a6e;
  --mis-green-200: #c9e0d9;
  --mis-green-100: #e3efec;
  --mis-green-50:  #f2f8f6;

  /* --- Brand: copper (secondary, from the crest + old link colour) --- */
  --mis-copper-800: #5c2f15;
  --mis-copper-700: #6d3a1a;
  --mis-copper-600: #7f441f; /* preserved exactly */
  --mis-copper-500: #9a5528;
  --mis-copper-100: #f1e3d9;

  /* --- Brand: gold + cream (crest highlight, ticker background) --- */
  --mis-gold-600:  #a8762f;
  --mis-gold-500:  #c08a3e; /* decorative / large text only - 3.02:1 on white */
  --mis-cream-200: #f2e6c9;
  --mis-cream-100: #f8f0db; /* preserved exactly */
  --mis-cream-50:  #fdfaf2;

  /* --- Neutrals --- */
  --mis-ink:     #1b2320; /* 16.06:1 on white */
  --mis-body:    #44514c; /*  8.31:1 on white */
  --mis-muted:   #6b7a74; /*  4.51:1 on white - AA for normal text */
  --mis-border:  #dfe6e3;
  --mis-border-strong: #c4d1cc;
  --mis-surface: #ffffff;
  --mis-bg:      #ffffff;
  --mis-bg-alt:  #f6f9f8;

  /* --- Semantic --- */
  --mis-success:    #1a7f5a;
  --mis-success-bg: #e8f5ef;
  --mis-warning:    #8a5a10;
  --mis-warning-bg: #fdf3e2;
  --mis-error:      #a4231c;
  --mis-error-bg:   #fbeceb;
  --mis-info:       #1a5f7f;
  --mis-info-bg:    #e9f2f6;

  /* --- Interaction --- */
  --mis-hover:  var(--mis-green-800);
  --mis-active: var(--mis-green-900);
  --mis-focus:  #9a5528;

  /* --- Type --- */
  --mis-font-display: "Jost", "Century Gothic", "Questrial", "Futura",
                      "Trebuchet MS", sans-serif;
  --mis-font-body: "Source Sans 3", "Source Sans Pro", -apple-system,
                   BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
                   sans-serif;

  /* Fluid type - clamp() keeps big headings from hurting small screens */
  --mis-h1: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  --mis-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
  --mis-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --mis-h4: clamp(1.125rem, 1.03rem + 0.4vw, 1.3rem);
  --mis-body-size: 1.0625rem;  /* 17px - up from the old 15px */
  --mis-small: 0.875rem;

  /* --- Space / shape / depth --- */
  --mis-gutter: 1rem;
  --mis-section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --mis-measure: 68ch;  /* readable line length */

  --mis-radius-sm: 6px;
  --mis-radius:    12px;
  --mis-radius-lg: 20px;
  --mis-radius-pill: 999px;

  --mis-shadow-sm: 0 1px 2px rgba(0, 56, 44, .06),
                   0 1px 3px rgba(0, 56, 44, .08);
  --mis-shadow:    0 2px 6px rgba(0, 56, 44, .06),
                   0 8px 24px rgba(0, 56, 44, .08);
  --mis-shadow-lg: 0 4px 12px rgba(0, 56, 44, .08),
                   0 18px 48px rgba(0, 56, 44, .12);

  --mis-ease: cubic-bezier(.2, .7, .3, 1);
  --mis-header-h: 104px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

/* The nav is sticky, so anchor jumps must clear it. */
html { scroll-padding-top: calc(var(--mis-header-h) + 1rem); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--mis-font-body);
  font-size: var(--mis-body-size);
  line-height: 1.65;
  color: var(--mis-body);
  background: var(--mis-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt and braces against legacy CMS tables */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mis-font-display);
  color: var(--mis-ink);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin-top: 0;
}

h1 { font-size: var(--mis-h1); }
h2 { font-size: var(--mis-h2); }
h3 { font-size: var(--mis-h3); }
h4 { font-size: var(--mis-h4); }

a { color: var(--mis-copper-600); }
a:hover { color: var(--mis-copper-800); text-decoration: underline; }

/* Visible focus for keyboard users on every interactive thing. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--mis-focus);
  outline-offset: 2px;
  border-radius: var(--mis-radius-sm);
}

img { max-width: 100%; height: auto; }

::selection { background: var(--mis-green-200); color: var(--mis-green-900); }

/* Skip link - first tab stop on every page. */
.mis-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--mis-green-900);
  color: #fff;
  padding: .85rem 1.25rem;
  border-radius: 0 0 var(--mis-radius) 0;
  font-weight: 600;
}
.mis-skip:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
}

.mis-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
/* Grid and flex items default to min-width:auto, which means they refuse to
   shrink below their min-content width. One wide CMS table is then enough to
   push its whole column - and the page - wider than the phone, which the
   browser answers by zooming the layout out. Opting every track out of that
   is what keeps `overflow-x:auto` on the table wrapper actually working. */
.mis-layout > *,
.mis-grid > *,
.mis-hero__grid > *,
.mis-quick > *,
.mis-stats > * {
  min-width: 0;
}

.mis-section { padding-block: var(--mis-section-y); }
.mis-section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.mis-section--alt { background: var(--mis-bg-alt); }
.mis-section--cream { background: var(--mis-cream-50); }
.mis-section--green {
  background: var(--mis-green-900);
  color: #e7f1ee;
}
.mis-section--green h2,
.mis-section--green h3 { color: #fff; }

.mis-measure { max-width: var(--mis-measure); }

/* Section heading block */
.mis-head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.mis-head--center { text-align: center; margin-inline: auto; max-width: 62ch; }

.mis-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mis-font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mis-copper-600);
  margin-bottom: .6rem;
}

.mis-head p {
  color: var(--mis-muted);
  max-width: 60ch;
  margin-bottom: 0;
}
.mis-head--center p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.mis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--mis-font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .85rem 1.6rem;
  min-height: 48px;          /* touch target */
  border-radius: var(--mis-radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s var(--mis-ease),
              border-color .2s var(--mis-ease),
              color .2s var(--mis-ease),
              transform .2s var(--mis-ease),
              box-shadow .2s var(--mis-ease);
}
.mis-btn:hover { text-decoration: none; transform: translateY(-1px); }
.mis-btn:active { transform: translateY(0); }

.mis-btn--primary {
  background: var(--mis-green-700);
  border-color: var(--mis-green-700);
  color: #fff;
  box-shadow: var(--mis-shadow-sm);
}
.mis-btn--primary:hover {
  background: var(--mis-green-800);
  border-color: var(--mis-green-800);
  color: #fff;
  box-shadow: var(--mis-shadow);
}
.mis-btn--primary:active { background: var(--mis-green-900); }

.mis-btn--secondary {
  background: transparent;
  border-color: var(--mis-green-700);
  color: var(--mis-green-700);
}
.mis-btn--secondary:hover {
  background: var(--mis-green-700);
  color: #fff;
}

.mis-btn--copper {
  background: var(--mis-copper-600);
  border-color: var(--mis-copper-600);
  color: #fff;
}
.mis-btn--copper:hover {
  background: var(--mis-copper-800);
  border-color: var(--mis-copper-800);
  color: #fff;
}

/* For use on dark green backgrounds */
.mis-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--mis-green-800);
}
.mis-btn--light:hover { background: var(--mis-cream-100); color: var(--mis-green-900); }

.mis-btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.mis-btn--ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}

.mis-btn--sm { padding: .6rem 1.15rem; min-height: 40px; font-size: .9375rem; }
.mis-btn--block { width: 100%; }

/* Text link with a moving arrow */
.mis-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mis-font-display);
  font-weight: 600;
  color: var(--mis-green-700);
  text-decoration: none;
}
.mis-link:hover { color: var(--mis-green-900); text-decoration: none; }
.mis-link .mis-link__arrow {
  transition: transform .2s var(--mis-ease);
  display: inline-block;
}
.mis-link:hover .mis-link__arrow { transform: translateX(4px); }

/* Legacy .btn-success is used across old templates - make it match. */
.btn-success,
.btn-success:not(:disabled):not(.disabled) {
  background-color: var(--mis-green-700);
  border-color: var(--mis-green-700);
  color: #fff;
  font-family: var(--mis-font-display);
  font-weight: 600;
  border-radius: var(--mis-radius-pill);
  padding: .7rem 1.5rem;
  min-height: 46px;
  box-shadow: none;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--mis-green-800);
  border-color: var(--mis-green-800);
  color: #fff;
  box-shadow: none;
}
.btn-success:focus-visible {
  outline: 3px solid var(--mis-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. UTILITY BAR + HEADER + NAV
   -------------------------------------------------------------------------- */
.mis-utility {
  background: var(--mis-green-900);
  color: #cfe3dd;
  font-size: .875rem;
}
.mis-utility a { color: #cfe3dd; text-decoration: none; }
.mis-utility a:hover { color: #fff; text-decoration: underline; }
.mis-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  flex-wrap: wrap;
}
.mis-utility__contact {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  flex-wrap: wrap;
}
.mis-utility__item { display: inline-flex; align-items: center; gap: .45rem; }
.mis-utility__social { display: flex; align-items: center; gap: .85rem; }
.mis-utility__social a {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background-color .2s var(--mis-ease);
}
.mis-utility__social a:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 991.98px) {
  .mis-utility { display: none; }
}

/* --- Header --- */
.mis-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--mis-green-700);
  transition: box-shadow .25s var(--mis-ease),
              background-color .25s var(--mis-ease);
}
.mis-header.is-stuck {
  background: var(--mis-green-800);
  box-shadow: 0 6px 24px rgba(0, 56, 44, .22);
}

.mis-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--mis-header-h);
}

.mis-brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  flex: none;
  padding: .35rem 0;
}
.mis-brand:hover { text-decoration: none; }
.mis-brand img {
  height: 82px;
  width: auto;
  transition: height .25s var(--mis-ease);
  /* the crest is dark green on transparent; a soft white disc keeps it
     legible on the green bar without altering the mark itself */
  background: #fff;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.is-stuck .mis-brand img { height: 66px; }

.mis-brand__text { line-height: 1.15; }
.mis-brand__name {
  display: block;
  font-family: var(--mis-font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: #fff;
  letter-spacing: .01em;
}
.mis-brand__tag {
  display: block;
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mis-cream-200);
}

@media (max-width: 1199.98px) {
  .mis-brand__text { display: none; }
}

/* --- Desktop nav --- */
.mis-nav { display: none; }

@media (min-width: 992px) {
  .mis-nav {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin-left: auto;
  }
  .mis-nav__item { position: relative; }

  .mis-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--mis-font-display);
    font-size: .9375rem;
    font-weight: 500;
    color: #e8f2ef;
    text-decoration: none;
    padding: .65rem .7rem;
    border-radius: var(--mis-radius-sm);
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .18s var(--mis-ease), background-color .18s var(--mis-ease);
  }
  .mis-nav__link:hover,
  .mis-nav__item:hover > .mis-nav__link,
  .mis-nav__link[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
  }
  .mis-nav__link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .10);
  }
  /* underline marker instead of the old border-bottom jump */
  .mis-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: .7rem; right: .7rem;
    bottom: .28rem;
    height: 2px;
    background: var(--mis-gold-500);
    border-radius: 2px;
  }

  .mis-nav__caret {
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s var(--mis-ease);
    flex: none;
  }
  .mis-nav__link[aria-expanded="true"] .mis-nav__caret {
    transform: rotate(-135deg) translateY(-2px);
  }

  /* --- Dropdown / mega panel --- */
  .mis-mega {
    position: absolute;
    top: calc(100% + .35rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
    background: #fff;
    border-radius: var(--mis-radius);
    box-shadow: var(--mis-shadow-lg);
    border: 1px solid var(--mis-border);
    padding: .85rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s var(--mis-ease),
                transform .18s var(--mis-ease),
                visibility .18s;
    z-index: 40;
  }
  .mis-nav__item:hover > .mis-mega,
  .mis-mega.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  /* hover bridge so the pointer can travel into the panel */
  .mis-mega::before {
    content: "";
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
  }

  .mis-mega--wide { min-width: 560px; }
  .mis-mega--wide .mis-mega__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .15rem 1rem;
  }
  /* keep the last dropdown from running off the right edge */
  .mis-nav__item:last-child .mis-mega,
  .mis-nav__item:nth-last-child(2) .mis-mega {
    left: auto; right: 0;
    transform: translateX(0) translateY(-6px);
  }
  .mis-nav__item:last-child:hover > .mis-mega,
  .mis-nav__item:nth-last-child(2):hover > .mis-mega,
  .mis-nav__item:last-child .mis-mega.is-open,
  .mis-nav__item:nth-last-child(2) .mis-mega.is-open {
    transform: translateX(0) translateY(0);
  }
}

.mis-mega__list { list-style: none; margin: 0; padding: 0; }

.mis-mega__link {
  display: block;
  padding: .6rem .8rem;
  border-radius: var(--mis-radius-sm);
  color: var(--mis-ink);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.35;
  transition: background-color .15s var(--mis-ease),
              color .15s var(--mis-ease);
}
.mis-mega__link:hover,
.mis-mega__link:focus-visible {
  background: var(--mis-green-50);
  color: var(--mis-green-800);
  text-decoration: none;
}
.mis-mega__link.is-active {
  background: var(--mis-green-50);
  color: var(--mis-green-800);
  box-shadow: inset 3px 0 0 var(--mis-gold-500);
}

.mis-mega__cta {
  margin-top: .6rem;
  padding-top: .75rem;
  border-top: 1px solid var(--mis-border);
}

/* --- Header actions --- */
.mis-header__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
}

/* --- Hamburger --- */
.mis-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--mis-radius-sm);
  cursor: pointer;
}
.mis-burger:hover { background: rgba(255, 255, 255, .24); }
.mis-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s var(--mis-ease), opacity .2s var(--mis-ease);
}
.mis-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mis-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mis-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 992px) { .mis-burger { display: none; } }

/* --------------------------------------------------------------------------
   6. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.mis-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 40, 32, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--mis-ease), visibility .25s;
  z-index: 1035;
}
.mis-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.mis-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(92vw, 400px);
  background: #fff;
  z-index: 1040;
  transform: translateX(100%);
  transition: transform .3s var(--mis-ease);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 40, 32, .25);
}
.mis-drawer.is-open { transform: translateX(0); }

.mis-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--mis-green-700);
  color: #fff;
  flex: none;
}
.mis-drawer__head img { height: 58px; width: auto; background: #fff; border-radius: 50%; padding: 3px; }
.mis-drawer__close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .15);
  border: 0;
  border-radius: var(--mis-radius-sm);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.mis-drawer__close:hover { background: rgba(255, 255, 255, .28); }

.mis-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .5rem 0 1.5rem;
}

.mis-drawer__list { list-style: none; margin: 0; padding: 0; }
.mis-drawer__item { border-bottom: 1px solid var(--mis-border); }

.mis-drawer__link,
.mis-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .95rem 1.25rem;
  min-height: 52px;
  font-family: var(--mis-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--mis-ink);
  text-align: left;
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.mis-drawer__link:hover,
.mis-drawer__toggle:hover { background: var(--mis-green-50); color: var(--mis-green-800); text-decoration: none; }
.mis-drawer__link.is-active { color: var(--mis-green-700); box-shadow: inset 4px 0 0 var(--mis-gold-500); }

.mis-drawer__toggle .mis-nav__caret {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--mis-ease);
  flex: none;
}
.mis-drawer__toggle[aria-expanded="true"] .mis-nav__caret { transform: rotate(-135deg); }

.mis-drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--mis-green-50);
  display: none;
}
.mis-drawer__sub.is-open { display: block; }
.mis-drawer__sub a {
  display: block;
  padding: .8rem 1.25rem .8rem 2.25rem;
  min-height: 48px;
  font-size: .9688rem;
  color: var(--mis-body);
  text-decoration: none;
}
.mis-drawer__sub a:hover { color: var(--mis-green-800); background: var(--mis-green-100); text-decoration: none; }
.mis-drawer__sub a.is-active { color: var(--mis-green-800); font-weight: 600; }

.mis-drawer__foot {
  flex: none;
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--mis-border);
  background: var(--mis-cream-50);
  display: grid;
  gap: .6rem;
}
.mis-drawer__contact {
  font-size: .875rem;
  color: var(--mis-muted);
  display: grid;
  gap: .3rem;
}
.mis-drawer__contact a {
  color: var(--mis-copper-600);
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

body.mis-no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. TICKER (restyled, same jquery.ticker markup)
   -------------------------------------------------------------------------- */
.mis-ticker-band {
  background: var(--mis-cream-100);
  border-bottom: 1px solid var(--mis-cream-200);
}
.mis-ticker-band .ticker-wrapper.has-js {
  margin: 0;
  padding: 0;
  height: 46px;
  border-radius: 0;
  background: transparent;
  font-family: var(--mis-font-body);
  font-size: .9375rem;
  display: flex;
  align-items: center;
}
.mis-ticker-band .ticker {
  background: transparent;
  height: 46px;
  flex: 1;
}
/* jquery.ticker positions the scrolling text at
   `left: $('.ticker-title').width() + 20`. jQuery .width() is content-box, so any
   padding or margin here is NOT counted and the text slides under the label.
   The outer div therefore stays a plain fixed-width box (what gets measured) and
   the pill styling lives on the inner <span> the plugin creates. */
.mis-ticker-band .ticker-title {
  padding: 0;
  margin: 0;
  width: 128px;
  background: transparent;
  display: flex;
  align-items: center;
  height: 46px;
}
.mis-ticker-band .ticker-title span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 .7rem;
  background: var(--mis-copper-600);
  color: #fff;
  font-family: var(--mis-font-display);
  font-weight: 600;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--mis-radius-pill);
  white-space: nowrap;
}
/* On the narrowest phones the label costs more than it earns. Collapsing the
   measured box to 0 also moves the text back to the left edge automatically. */
@media (max-width: 479.98px) {
  .mis-ticker-band .ticker-title { width: 0; overflow: hidden; }
}
.mis-ticker-band .ticker-content {
  background: transparent;
  color: var(--mis-green-900);
  font-weight: 600;
  margin-top: 0;
  padding-top: 0;
  height: 46px;
  line-height: 46px;
}
.mis-ticker-band .ticker-content a { color: var(--mis-green-900); }
.mis-ticker-band .ticker-swipe {
  background: var(--mis-cream-100);
  height: 46px;
  padding-top: 0;
}
.mis-ticker-band .ticker-swipe span {
  margin-top: 21px;
  background: var(--mis-copper-600);
}
.mis-ticker-band .ticker-controls { padding-top: 15px; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.mis-hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 88% -8%, var(--mis-green-100), transparent 62%),
    linear-gradient(180deg, var(--mis-cream-50), #fff 62%);
  padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
  overflow: hidden;
}

.mis-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 992px) {
  .mis-hero__grid { grid-template-columns: 1.02fr 1fr; }
}

.mis-hero__title {
  font-size: var(--mis-h1);
  color: var(--mis-green-900);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.mis-hero__lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  color: var(--mis-body);
  max-width: 54ch;
  margin-bottom: 1.75rem;
}
.mis-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.75rem;
}

/* Est. 1945 chip - heritage cue straight off the crest */
.mis-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid var(--mis-green-200);
  color: var(--mis-green-800);
  font-family: var(--mis-font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45rem 1rem;
  border-radius: var(--mis-radius-pill);
  margin-bottom: 1.1rem;
  box-shadow: var(--mis-shadow-sm);
}
.mis-hero__badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mis-gold-500);
  flex: none;
}

.mis-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--mis-border);
}
.mis-hero__fact strong {
  display: block;
  font-family: var(--mis-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--mis-green-700);
  line-height: 1.1;
}
.mis-hero__fact span {
  font-size: .8125rem;
  color: var(--mis-muted);
  letter-spacing: .04em;
}

/* Hero media - the slider sits in a framed card so slides that have text
   baked into the image stay fully legible (no crop, no overlay on top). */
.mis-hero__media {
  position: relative;
  border-radius: var(--mis-radius-lg);
  overflow: hidden;
  box-shadow: var(--mis-shadow-lg);
  background: var(--mis-green-900);
}
.mis-hero__media .carousel,
.mis-hero__media .carousel-inner,
.mis-hero__media .carousel-item { border-radius: inherit; }

.mis-hero__media .carousel-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (min-width: 576px) {
  .mis-hero__media .carousel-item img { aspect-ratio: 16 / 10; }
}

.mis-hero__media .carousel-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.5rem 1.35rem;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 40, 32, .92), rgba(0, 40, 32, 0));
}
.mis-hero__media .carousel-caption h2 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: .25rem;
}
.mis-hero__media .carousel-caption p {
  color: #dbe9e5;
  font-size: .9375rem;
  margin-bottom: 0;
}

.mis-hero__media .carousel-control-prev,
.mis-hero__media .carousel-control-next {
  width: 52px;
  opacity: 1;
}
.mis-hero__media .carousel-control-prev-icon,
.mis-hero__media .carousel-control-next-icon {
  width: 38px; height: 38px;
  background-color: rgba(0, 40, 32, .55);
  border-radius: 50%;
  background-size: 45% 45%;
  transition: background-color .2s var(--mis-ease);
}
.mis-hero__media .carousel-control-prev:hover .carousel-control-prev-icon,
.mis-hero__media .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--mis-green-700);
}
.mis-hero__media .carousel-indicators { margin-bottom: .6rem; }
.mis-hero__media .carousel-indicators li {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: 0;
}
.mis-hero__media .carousel-indicators .active { background: #fff; }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.mis-grid {
  display: grid;
  gap: clamp(1rem, .75rem + 1vw, 1.75rem);
}
.mis-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mis-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mis-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.mis-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mis-surface);
  border: 1px solid var(--mis-border);
  border-radius: var(--mis-radius);
  padding: 1.5rem;
  height: 100%;
  transition: transform .22s var(--mis-ease),
              box-shadow .22s var(--mis-ease),
              border-color .22s var(--mis-ease);
}
.mis-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--mis-shadow);
  border-color: var(--mis-green-200);
}
.mis-card h3 { font-size: 1.1875rem; margin-bottom: .45rem; }
.mis-card p {
  color: var(--mis-muted);
  font-size: .9375rem;
  margin-bottom: 0;
}
.mis-card p a { display: inline-block; padding-block: .15rem; min-height: 24px; }
.mis-card__icon {
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mis-radius-sm);
  background: var(--mis-green-50);
  color: var(--mis-green-700);
  font-size: 1.15rem;
  margin-bottom: 1rem;
  flex: none;
}
.mis-card__foot { margin-top: auto; padding-top: 1rem; }

/* whole card clickable, keeps one real link for a11y */
.mis-card--link .mis-card__stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.mis-card--link:focus-within {
  border-color: var(--mis-green-500);
  box-shadow: 0 0 0 3px var(--mis-green-100);
}

/* Quick-links strip */
.mis-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.mis-quick__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.15rem 1.25rem;
  background: #fff;
  border: 1px solid var(--mis-border);
  border-radius: var(--mis-radius);
  color: var(--mis-ink);
  font-family: var(--mis-font-display);
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--mis-ease),
              box-shadow .2s var(--mis-ease),
              border-color .2s var(--mis-ease),
              background-color .2s var(--mis-ease);
}
.mis-quick__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--mis-shadow);
  border-color: var(--mis-green-200);
  background: var(--mis-green-50);
  color: var(--mis-green-800);
  text-decoration: none;
}
.mis-quick__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--mis-green-50);
  color: var(--mis-green-700);
  flex: none;
  transition: background-color .2s var(--mis-ease);
}
.mis-quick__item:hover .mis-quick__icon { background: #fff; }

/* --------------------------------------------------------------------------
   10. STATS
   -------------------------------------------------------------------------- */
.mis-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1rem, .5rem + 2vw, 2rem);
}
.mis-stat { text-align: center; padding: .5rem; }
.mis-stat__icon {
  height: 56px;
  width: auto;
  margin: 0 auto .9rem;
  display: block;
  opacity: .95;
}
.mis-stat__num {
  font-family: var(--mis-font-display);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  color: var(--mis-green-700);
  margin-bottom: .4rem;
  font-variant-numeric: tabular-nums;
}
.mis-section--green .mis-stat__num { color: var(--mis-cream-100); }
.mis-stat__label {
  font-size: .9375rem;
  color: var(--mis-muted);
  line-height: 1.45;
  max-width: 22ch;
  margin-inline: auto;
}
.mis-section--green .mis-stat__label { color: #b9d3cb; }

/* --------------------------------------------------------------------------
   11. ANNOUNCEMENTS / EVENTS / NEWS
   -------------------------------------------------------------------------- */
.mis-news-list { list-style: none; margin: 0; padding: 0; }
.mis-news-item {
  position: relative;
  display: flex;
  gap: 1.1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--mis-border);
}
.mis-news-item:first-child { padding-top: 0; }
.mis-news-item:last-child { border-bottom: 0; }

.mis-date-chip {
  flex: none;
  width: 62px;
  text-align: center;
  background: var(--mis-green-50);
  border: 1px solid var(--mis-green-100);
  border-radius: var(--mis-radius-sm);
  padding: .5rem .25rem;
  line-height: 1.1;
}
.mis-date-chip__day {
  display: block;
  font-family: var(--mis-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--mis-green-800);
}
.mis-date-chip__mon {
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mis-copper-600);
  font-weight: 600;
}
.mis-news-item__body { min-width: 0; }
.mis-news-item__title {
  font-family: var(--mis-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--mis-ink);
  line-height: 1.35;
  margin-bottom: .2rem;
}
.mis-news-item a { text-decoration: none; color: inherit; }
.mis-news-item a:hover { color: var(--mis-green-700); text-decoration: none; }
.mis-news-item__meta { font-size: .8125rem; color: var(--mis-muted); }

/* Event / gallery card with image */
.mis-media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mis-border);
  border-radius: var(--mis-radius);
  overflow: hidden;
  height: 100%;
  transition: transform .22s var(--mis-ease), box-shadow .22s var(--mis-ease);
}
.mis-media-card:hover { transform: translateY(-3px); box-shadow: var(--mis-shadow); }
.mis-media-card__figure {
  margin: 0;
  overflow: hidden;
  background: var(--mis-green-50);
  aspect-ratio: 4 / 3;
}
.mis-media-card__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--mis-ease);
}
.mis-media-card:hover .mis-media-card__figure img { transform: scale(1.05); }
.mis-media-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.mis-media-card__title {
  font-family: var(--mis-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: .3rem;
  color: var(--mis-ink);
}
.mis-media-card a { text-decoration: none; color: inherit; }
.mis-media-card a:hover { text-decoration: none; }
.mis-media-card:focus-within { box-shadow: 0 0 0 3px var(--mis-green-100); }

/* Empty state - replaces silently-collapsing sections */
.mis-empty {
  text-align: center;
  padding: 2.25rem 1.25rem;
  background: var(--mis-bg-alt);
  border: 1px dashed var(--mis-border-strong);
  border-radius: var(--mis-radius);
  color: var(--mis-muted);
}
.mis-empty__icon { font-size: 1.75rem; color: var(--mis-green-500); margin-bottom: .6rem; }
.mis-empty p { margin-bottom: .75rem; }

/* --------------------------------------------------------------------------
   12. PAGE HERO + BREADCRUMBS (inner pages)
   -------------------------------------------------------------------------- */
.mis-pagehero {
  background: var(--mis-green-800);
  color: #fff;
  padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.mis-pagehero::after {
  /* subtle crest-derived arc, purely decorative */
  content: "";
  position: absolute;
  right: -90px; top: -110px;
  width: 340px; height: 340px;
  border: 40px solid rgba(255, 255, 255, .05);
  border-radius: 50%;
  pointer-events: none;
}
.mis-pagehero__title { color: #fff; margin-bottom: .35rem; position: relative; }
.mis-pagehero__lead { color: #c4ddd5; max-width: 60ch; margin-bottom: 0; position: relative; }

.mis-crumbs { position: relative; margin-bottom: .85rem; }
.mis-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0; padding: 0;
  font-size: .8125rem;
}
.mis-crumbs li { display: inline-flex; align-items: center; gap: .4rem; }
.mis-crumbs li + li::before {
  content: "/";
  color: rgba(255, 255, 255, .45);
}
.mis-crumbs a,
.mis-crumbs li > span {
  color: #bcd7ce;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.mis-crumbs a:hover { color: #fff; text-decoration: underline; }
.mis-crumbs [aria-current] { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   13. CMS CONTENT NORMALISATION
   --------------------------------------------------------------------------
   The editor stores inline styles: Times New Roman, text-align:justify,
   font-size:18px, colour #1abc9c (2.41:1 - fails AA) and fixed px widths.
   Inline styles beat stylesheets, so these overrides need !important.
   They are scoped to .mis-cms so nothing else on the site is affected.
   -------------------------------------------------------------------------- */
.mis-cms {
  max-width: var(--mis-measure);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mis-body);
}
.mis-cms--wide { max-width: none; }

/* Neutralise the inline font stack + justification */
.mis-cms [style*="font-family"],
.mis-cms font {
  font-family: var(--mis-font-body) !important;
}
.mis-cms [style*="text-align: justify"],
.mis-cms [style*="text-align:justify"] {
  text-align: left !important;
}
/* Editor font-size soup -> inherit our scale */
.mis-cms p[style*="font-size"],
.mis-cms span[style*="font-size"],
.mis-cms div[style*="font-size"] {
  font-size: inherit !important;
  line-height: inherit !important;
}
/* The stray flat-UI turquoise - remap to the real brand green */
.mis-cms [style*="#1abc9c"],
.mis-cms [style*="rgb(26, 188, 156)"] {
  color: var(--mis-green-700) !important;
}
/* Editor background-color:white on spans creates banding over tinted panels */
.mis-cms [style*="background-color:white"],
.mis-cms [style*="background-color: white"] {
  background-color: transparent !important;
}

.mis-cms p { margin-bottom: 1.15rem; }
.mis-cms > *:last-child { margin-bottom: 0; }

.mis-cms h1, .mis-cms h2, .mis-cms h3, .mis-cms h4, .mis-cms h5, .mis-cms h6 {
  font-family: var(--mis-font-display) !important;
  color: var(--mis-green-800) !important;
  margin-top: 2.25rem;
  margin-bottom: .75rem;
  line-height: 1.25;
}
.mis-cms h1 { font-size: var(--mis-h2) !important; }
.mis-cms h2 { font-size: var(--mis-h3) !important; }
.mis-cms h3 { font-size: var(--mis-h4) !important; }
.mis-cms h4, .mis-cms h5, .mis-cms h6 { font-size: 1.0625rem !important; }
.mis-cms h1:first-child, .mis-cms h2:first-child, .mis-cms h3:first-child { margin-top: 0; }

.mis-cms a { color: var(--mis-copper-600); text-decoration: underline; text-underline-offset: 2px; }
.mis-cms a:hover { color: var(--mis-copper-800); }

.mis-cms ul, .mis-cms ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.mis-cms li { margin-bottom: .45rem; }

.mis-cms strong, .mis-cms b { color: var(--mis-ink); font-weight: 600; }

.mis-cms blockquote {
  margin: 1.75rem 0;
  padding: 1rem 0 1rem 1.35rem;
  border-left: 4px solid var(--mis-gold-500);
  background: var(--mis-cream-50);
  border-radius: 0 var(--mis-radius-sm) var(--mis-radius-sm) 0;
  font-size: 1.125rem;
  color: var(--mis-ink);
}
.mis-cms blockquote p:last-child { margin-bottom: 0; }

.mis-cms hr {
  border: 0;
  border-top: 1px solid var(--mis-border);
  margin: 2rem 0;
}

/* Images: kill the inline fixed px sizing so they behave on phones */
.mis-cms img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--mis-radius);
  box-shadow: var(--mis-shadow-sm);
}
.mis-cms img[style*="float"] {
  margin: .35rem 1.5rem 1.25rem 0 !important;
}
@media (max-width: 575.98px) {
  /* floats at phone width squeeze text into unreadable slivers */
  .mis-cms img[style*="float"] {
    float: none !important;
    display: block;
    margin: 0 auto 1.5rem !important;
    width: 100% !important;
  }
}

/* Tables: the real mobile failure. Wrapped by JS in .mis-table-scroll. */
.mis-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
  border: 1px solid var(--mis-border);
  border-radius: var(--mis-radius);
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,56,44,.14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,56,44,.14), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.mis-table-scroll:focus-visible { outline: 3px solid var(--mis-focus); outline-offset: 2px; }

/* Before the JS wrapper runs, a CMS table must never be able to push the page
   wider than the viewport: on a phone that makes the browser zoom the whole
   layout out to fit, and it stays zoomed out even after the wrapper appears.
   So the bare table is capped, and only the wrapped one gets a comfortable
   minimum width to scroll within. */
.mis-cms table {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  margin: 0;
  table-layout: auto;
}
.mis-table-scroll > table {
  border: 0;
  max-width: none;
}
/* Only genuine multi-column data tables get a comfortable scrolling width;
   single-cell layout tables just need the scroll container. */
.mis-table-scroll.has-columns > table { min-width: 480px; }
.mis-cms th, .mis-cms td {
  border: 1px solid var(--mis-border) !important;
  padding: .7rem .85rem !important;
  text-align: left;
  vertical-align: top;
  height: auto !important;
}
.mis-cms thead th,
.mis-cms tr:first-child th {
  background: var(--mis-green-50) !important;
  color: var(--mis-green-900) !important;
  font-family: var(--mis-font-display);
  font-weight: 600;
  white-space: nowrap;
}
.mis-cms tbody tr:nth-child(even) td { background: var(--mis-bg-alt); }

.mis-table-hint {
  display: none;
  font-size: .8125rem;
  color: var(--mis-muted);
  margin: -.75rem 0 1.25rem;
}
@media (max-width: 767.98px) {
  .mis-table-hint { display: block; }
}

/* iframes (maps, youtube) */
.mis-cms iframe {
  max-width: 100%;
  border-radius: var(--mis-radius);
}

/* --------------------------------------------------------------------------
   14. SIDEBAR / ASIDE CTA
   -------------------------------------------------------------------------- */
.mis-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}
@media (min-width: 992px) {
  .mis-layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
}

.mis-aside { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 992px) {
  .mis-aside { position: sticky; top: calc(var(--mis-header-h) + 1.5rem); }
}

.mis-aside__card {
  background: var(--mis-green-50);
  border: 1px solid var(--mis-green-100);
  border-radius: var(--mis-radius);
  padding: 1.35rem;
}
.mis-aside__card h3 { font-size: 1.0625rem; margin-bottom: .6rem; color: var(--mis-green-900); }
.mis-aside__card p { font-size: .9375rem; color: var(--mis-body); margin-bottom: 1rem; }
.mis-aside__card p a { display: inline-block; padding-block: .2rem; min-height: 24px; }

.mis-aside__list { list-style: none; margin: 0; padding: 0; }
.mis-aside__list li + li { border-top: 1px solid var(--mis-green-100); }
.mis-aside__list a {
  display: block;
  padding: .65rem 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--mis-ink);
  text-decoration: none;
}
.mis-aside__list a:hover { color: var(--mis-green-700); text-decoration: none; }
.mis-aside__list a.is-active { color: var(--mis-green-700); font-weight: 600; }

/* --------------------------------------------------------------------------
   15. CTA BAND
   -------------------------------------------------------------------------- */
.mis-cta {
  background:
    linear-gradient(120deg, var(--mis-green-900), var(--mis-green-700) 70%);
  color: #fff;
  border-radius: var(--mis-radius-lg);
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.mis-cta::after {
  content: "";
  position: absolute;
  right: -70px; bottom: -120px;
  width: 300px; height: 300px;
  border: 46px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
  pointer-events: none;
}
.mis-cta__inner {
  position: relative;
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .mis-cta__inner { grid-template-columns: 1fr auto; gap: 2.5rem; }
}
.mis-cta h2 { color: #fff; margin-bottom: .5rem; }
.mis-cta p { color: #c9e0d9; margin-bottom: 0; max-width: 56ch; }
.mis-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --------------------------------------------------------------------------
   16. FORMS
   -------------------------------------------------------------------------- */
.mis-form label,
.mis-form .form-label {
  display: block;
  font-family: var(--mis-font-display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--mis-ink);
  margin-bottom: .35rem;
}
.mis-form .form-control,
.mis-form input[type="text"],
.mis-form input[type="email"],
.mis-form input[type="tel"],
.mis-form input[type="date"],
.mis-form select,
.mis-form textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  font-family: var(--mis-font-body);
  font-size: 1rem;
  color: var(--mis-ink);
  background: #fff;
  border: 1px solid var(--mis-border-strong);
  border-radius: var(--mis-radius-sm);
  transition: border-color .18s var(--mis-ease), box-shadow .18s var(--mis-ease);
  height: auto;
}
.mis-form textarea { min-height: 140px; resize: vertical; }
.mis-form .form-control:focus,
.mis-form input:focus,
.mis-form select:focus,
.mis-form textarea:focus {
  border-color: var(--mis-green-500);
  box-shadow: 0 0 0 3px var(--mis-green-100);
  outline: none;
}
.mis-form .form-control::placeholder { color: #9aa8a3; }

.mis-form .has-error .form-control,
.mis-form .form-control.error {
  border-color: var(--mis-error);
  box-shadow: 0 0 0 3px var(--mis-error-bg);
}
/* jquery.validate renders <em class="help-block"> */
.mis-form em.help-block,
.mis-form label.error {
  display: block;
  font-family: var(--mis-font-body);
  font-size: .8125rem;
  font-weight: 500;
  font-style: normal;
  color: var(--mis-error);
  margin-top: .35rem;
}
/* the legacy validator injects bootstrap-3 glyphicon spans that have no font */
.mis-form .glyphicon { display: none !important; }

/* Bilingual label (English / Arabic) used on the student application.
   These used to be plain <div>s with no association to their input. */
.mis-form label.mis-label-bi,
.mis-label-bi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.mis-label-bi [lang="ar"] {
  font-weight: 500;
  color: var(--mis-muted);
  white-space: nowrap;
}

/* The legacy form uses .spacer10 divs between field rows. */
.mis-form .spacer10 { height: 1.1rem; }

.mis-form__row { display: grid; gap: 1.1rem; }
@media (min-width: 576px) {
  .mis-form__row--2 { grid-template-columns: 1fr 1fr; }
}
.mis-form__group { margin-bottom: 1.1rem; }
.mis-form__req { color: var(--mis-copper-600); }
.mis-form__hint { font-size: .8125rem; color: var(--mis-muted); margin-top: .3rem; }

.mis-form fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
.mis-form legend {
  font-family: var(--mis-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--mis-green-800);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--mis-border);
  width: 100%;
}

.mis-form-card {
  background: #fff;
  border: 1px solid var(--mis-border);
  border-radius: var(--mis-radius);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  box-shadow: var(--mis-shadow-sm);
}

/* reCAPTCHA can overflow narrow phones */
.g-recaptcha { max-width: 100%; overflow: hidden; }
@media (max-width: 359.98px) {
  .g-recaptcha { transform: scale(.87); transform-origin: 0 0; }
}

/* --------------------------------------------------------------------------
   17. ALERTS
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--mis-radius);
  border-width: 1px;
  border-left-width: 4px;
  padding: 1rem 1.15rem;
  font-size: .9375rem;
}
.alert-success {
  background: var(--mis-success-bg);
  border-color: var(--mis-success);
  color: #0f5c40;
}
.alert-danger {
  background: var(--mis-error-bg);
  border-color: var(--mis-error);
  color: #8c1c16;
}
.alert-warning {
  background: var(--mis-warning-bg);
  border-color: var(--mis-warning);
  color: #6f480c;
}

/* --------------------------------------------------------------------------
   18. PAGINATION (Pages.php emits plain <a>/<span> in a wrapper)
   -------------------------------------------------------------------------- */
.mis-pager {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-top: 2rem;
}
.mis-pager a,
.mis-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 .7rem;
  border: 1px solid var(--mis-border);
  border-radius: var(--mis-radius-sm);
  font-family: var(--mis-font-display);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--mis-ink);
  text-decoration: none;
  background: #fff;
}
.mis-pager a:hover {
  border-color: var(--mis-green-500);
  background: var(--mis-green-50);
  color: var(--mis-green-800);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   19. GALLERY
   -------------------------------------------------------------------------- */
.mis-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.mis-gallery-item {
  position: relative;
  display: block;
  border-radius: var(--mis-radius);
  overflow: hidden;
  background: var(--mis-green-50);
  border: 1px solid var(--mis-border);
  text-decoration: none;
}
.mis-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .45s var(--mis-ease);
}
.mis-gallery-item:hover img { transform: scale(1.06); }
/* Album with no cover image on record - a neutral tile beats a broken one. */
.mis-gallery-item__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--mis-green-50);
  color: var(--mis-green-500);
  font-size: 1.75rem;
}
.mis-gallery-item__cap {
  padding: .7rem .85rem;
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--mis-font-display);
  color: var(--mis-ink);
  background: #fff;
}
.mis-gallery-item:hover .mis-gallery-item__cap { color: var(--mis-green-700); }
.mis-gallery-item.is-active {
  border-color: var(--mis-green-500);
  box-shadow: 0 0 0 2px var(--mis-green-200);
}

.mis-stage {
  border-radius: var(--mis-radius-lg);
  overflow: hidden;
  background: var(--mis-green-900);
  box-shadow: var(--mis-shadow);
}
.mis-stage .carousel-item img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: var(--mis-green-900);
}
.mis-stage .carousel-item iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
}

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.mis-footer {
  background: var(--mis-green-900);
  color: #b9d3cb;
  font-size: .9375rem;
}
.mis-footer__main { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.mis-footer__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .mis-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .mis-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }

.mis-footer h2, .mis-footer h3 {
  font-family: var(--mis-font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mis-cream-200);
  margin-bottom: 1.1rem;
}
.mis-footer a { color: #b9d3cb; text-decoration: none; }
.mis-footer a:hover { color: #fff; text-decoration: underline; }

.mis-footer__brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.mis-footer__brand img {
  height: 84px; width: auto;
  background: #fff;
  border-radius: 50%;
  padding: 4px;
  flex: none;
}
.mis-footer__brand strong {
  font-family: var(--mis-font-display);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  display: block;
  line-height: 1.25;
}
.mis-footer__brand span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mis-cream-200); }

/* WCAG 2.2 target size: stacked link lists are navigation, not prose, so the
   "inline in a sentence" exemption does not apply - they need >=24px. */
.mis-footer__list { list-style: none; margin: 0; padding: 0; }
.mis-footer__list li { margin-bottom: .2rem; }
.mis-footer__list a {
  display: inline-block;
  padding-block: .3rem;
  min-height: 24px;
}

.mis-footer__contact { list-style: none; margin: 0; padding: 0; }
.mis-footer__contact li {
  display: flex;
  gap: .7rem;
  margin-bottom: .8rem;
  line-height: 1.5;
}
.mis-footer__contact a { display: inline-block; padding-block: .15rem; min-height: 24px; }
.mis-footer__contact i { color: var(--mis-gold-500); margin-top: .25rem; flex: none; width: 16px; }

.mis-footer__social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.mis-footer__social a {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font-size: 1rem;
  transition: background-color .2s var(--mis-ease), transform .2s var(--mis-ease);
}
.mis-footer__social a:hover {
  background: var(--mis-copper-600);
  transform: translateY(-2px);
  text-decoration: none;
}

.mis-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 1.25rem;
  font-size: .8125rem;
  color: #9dbdb4;
}
.mis-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   21. MOTION
   -------------------------------------------------------------------------- */
[data-mis-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--mis-ease), transform .6s var(--mis-ease);
  will-change: opacity, transform;
}
[data-mis-reveal].is-visible { opacity: 1; transform: none; }

/* Never let animation hide content if JS fails or is slow. */
.no-js [data-mis-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-mis-reveal] { opacity: 1 !important; transform: none !important; }
  .mis-btn:hover,
  .mis-card:hover,
  .mis-media-card:hover,
  .mis-quick__item:hover { transform: none !important; }
  .mis-media-card:hover .mis-media-card__figure img,
  .mis-gallery-item:hover img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .mis-utility, .mis-header, .mis-drawer, .mis-drawer-backdrop,
  .mis-ticker-band, .mis-cta, .mis-footer__social, .mis-aside { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .mis-cms { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --------------------------------------------------------------------------
   23. STATS BAND - tightened
   The "MIS at a glance" band was 541px tall at desktop, which is more vertical
   weight than four numbers need. These overrides bring it to roughly 80% of
   that without shrinking the numbers themselves.
   -------------------------------------------------------------------------- */
.mis-section--green {
  padding-block: clamp(2rem, 1.35rem + 2.4vw, 3.6rem);
}
.mis-section--green .mis-head {
  margin-bottom: clamp(1rem, .75rem + 1vw, 1.35rem);
}
.mis-section--green .mis-stat { padding: .25rem; }
.mis-section--green .mis-stat__icon {
  height: 42px;
  margin-bottom: .55rem;
}
.mis-section--green .mis-stat__num { margin-bottom: .25rem; }
.mis-section--green .mis-stat__label { line-height: 1.35; }

/* --------------------------------------------------------------------------
   24. CMS RHYTHM
   Spacer paragraphs are stripped server-side by mis_cms(); this sets the
   vertical rhythm that replaces them so subpages read as one document.
   -------------------------------------------------------------------------- */
.mis-cms > p { margin: 0 0 1.05em; }
.mis-cms > p:last-child { margin-bottom: 0; }

/* Headings hug the text they introduce, and breathe above it. */
.mis-cms h1, .mis-cms h2, .mis-cms h3,
.mis-cms h4, .mis-cms h5, .mis-cms h6 { margin: 2em 0 .55em; }
.mis-cms > :first-child { margin-top: 0 !important; }
.mis-cms h1 + p, .mis-cms h2 + p, .mis-cms h3 + p,
.mis-cms h4 + p, .mis-cms h5 + p, .mis-cms h6 + p { margin-top: 0; }
.mis-cms h1 + ul, .mis-cms h2 + ul, .mis-cms h3 + ul,
.mis-cms h1 + ol, .mis-cms h2 + ol, .mis-cms h3 + ol { margin-top: 0; }

/* Lists: tighter internally than between blocks. */
.mis-cms ul, .mis-cms ol { margin: 0 0 1.05em; padding-left: 1.4em; }
.mis-cms li { margin-bottom: .3em; }
.mis-cms li:last-child { margin-bottom: 0; }
.mis-cms li > p { margin-bottom: .3em; }
.mis-cms li > p:last-child { margin-bottom: 0; }
.mis-cms ul ul, .mis-cms ol ol, .mis-cms ul ol, .mis-cms ol ul { margin: .3em 0 0; }

/* A <br><br> the editor left behind should not open a full paragraph gap. */
.mis-cms br + br { line-height: .5; }

/* The editor's leftover margin-left/right:0 noise plus stray alignment. */
.mis-cms [style*="margin-left:0px"],
.mis-cms [style*="margin-left: 0px"] { margin-left: 0 !important; margin-right: 0 !important; }

.mis-cms table + p, .mis-cms .mis-table-scroll + p { margin-top: 1.05em; }

/* --------------------------------------------------------------------------
   25. DATEPICKER (bootstrap-datepicker 1.6.4)
   The script was loaded without its stylesheet, so the calendar rendered as a
   bare unstyled table. This is that missing stylesheet, in brand colours.
   Scoped to .datepicker-dropdown because the INPUT also carries .datepicker.
   -------------------------------------------------------------------------- */
.datepicker-dropdown {
  padding: .6rem;
  background: #fff;
  border: 1px solid var(--mis-border);
  border-radius: var(--mis-radius);
  box-shadow: var(--mis-shadow-lg);
  font-family: var(--mis-font-body);
  font-size: .9375rem;
  z-index: 1060;
}
.datepicker-dropdown table { width: auto; margin: 0; border-collapse: separate; border-spacing: 2px; }
.datepicker-dropdown th,
.datepicker-dropdown td {
  width: 38px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  border: 0;
  border-radius: var(--mis-radius-sm);
  font-weight: 500;
  padding: 0;
}
.datepicker-dropdown thead th.datepicker-switch,
.datepicker-dropdown thead th.prev,
.datepicker-dropdown thead th.next {
  font-family: var(--mis-font-display);
  font-weight: 600;
  color: var(--mis-green-800);
  cursor: pointer;
  user-select: none;
}
.datepicker-dropdown thead th.datepicker-switch { width: auto; padding: 0 .5rem; }
.datepicker-dropdown thead th.prev:hover,
.datepicker-dropdown thead th.next:hover,
.datepicker-dropdown thead th.datepicker-switch:hover { background: var(--mis-green-50); }
.datepicker-dropdown thead th.dow {
  font-family: var(--mis-font-display);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mis-muted);
  font-weight: 600;
  height: 28px;
}
.datepicker-dropdown tbody td.day { cursor: pointer; color: var(--mis-ink); }
.datepicker-dropdown tbody td.day:hover { background: var(--mis-green-50); color: var(--mis-green-800); }
.datepicker-dropdown tbody td.old,
.datepicker-dropdown tbody td.new { color: #b3c1bc; }
.datepicker-dropdown tbody td.today {
  background: var(--mis-cream-100);
  color: var(--mis-copper-700);
  font-weight: 600;
}
.datepicker-dropdown tbody td.active,
.datepicker-dropdown tbody td.active:hover {
  background: var(--mis-green-700) !important;
  color: #fff !important;
  font-weight: 600;
}
.datepicker-dropdown tbody td.disabled,
.datepicker-dropdown tbody td.disabled:hover {
  color: #ccd6d2;
  cursor: default;
  background: transparent;
}
.datepicker-dropdown .datepicker-months td,
.datepicker-dropdown .datepicker-years td,
.datepicker-dropdown .datepicker-decades td,
.datepicker-dropdown .datepicker-centuries td { width: auto; height: auto; padding: .35rem; }
.datepicker-dropdown span.month,
.datepicker-dropdown span.year,
.datepicker-dropdown span.decade,
.datepicker-dropdown span.century {
  display: inline-block;
  width: 23%;
  margin: 1%;
  padding: .55rem 0;
  border-radius: var(--mis-radius-sm);
  cursor: pointer;
  color: var(--mis-ink);
}
.datepicker-dropdown span.month:hover,
.datepicker-dropdown span.year:hover { background: var(--mis-green-50); color: var(--mis-green-800); }
.datepicker-dropdown span.active { background: var(--mis-green-700); color: #fff; font-weight: 600; }
.datepicker-dropdown span.old, .datepicker-dropdown span.new { color: #b3c1bc; }
.datepicker-dropdown .datepicker-switch + .next { border-radius: var(--mis-radius-sm); }
/* the little pointer arrow */
.datepicker-dropdown:before,
.datepicker-dropdown:after { display: none; }

/* Heading colour must win over .mis-cms strong/b (which sets the ink colour for
   body emphasis). Without this, a CMS heading whose text sits inside <strong>
   renders near-black while its neighbours render brand green. Forcing every
   descendant to inherit makes headings uniform whatever the editor left inline. */
.mis-cms h1 *, .mis-cms h2 *, .mis-cms h3 *,
.mis-cms h4 *, .mis-cms h5 *, .mis-cms h6 * {
  color: inherit !important;
  font-size: inherit !important;
  background: none !important;
}

/* --------------------------------------------------------------------------
   26. WELCOME (home)
   The CMS image for this block is a 1600x550 banner (2.9:1) whose subject sits
   at the far left and far right of the frame, with an empty white table across
   the middle. In a half-width column it scaled down to about 190px tall beside
   400px of copy, and cropping it to a taller box only ever framed the empty
   middle. So the picture now runs the full width of the container at its own
   aspect ratio - roughly four times the area, with the composition intact -
   and the copy sits above it as a two-column masthead.
   -------------------------------------------------------------------------- */
.mis-welcome__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.75rem, .5rem + 1.5vw, 1.75rem);
  align-items: start;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.mis-welcome__head > * { min-width: 0; }

@media (min-width: 992px) {
  .mis-welcome__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  }
}

/* the heading block is the grid item here, so its own spacing is redundant */
.mis-welcome__head .mis-head { margin-bottom: 0; }
.mis-welcome__head .mis-head h2 { margin-bottom: 0; }

.mis-welcome__copy .mis-cms { max-width: 62ch; }
.mis-welcome__actions { margin-top: 1.5rem; }

.mis-welcome__media { margin: 0; }
.mis-welcome__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 550;
  object-fit: cover;
  border-radius: var(--mis-radius-lg);
  box-shadow: var(--mis-shadow);
}

/* ===========================================================================
   ACADEMIC CALENDAR (templates/calendar-page.php)
   The calendar is rows from the Calendar module now, not a pasted table, so it
   gets real styling instead of inheriting whatever Word left behind. Scoped to
   .mis-cal so the .mis-cms table rules above are untouched.
   =========================================================================== */
.mis-cal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1rem;
}
.mis-cal__year {
  font-size: var(--mis-h4);
  color: var(--mis-green-700);
  margin: 0;
}
.mis-cal__switch {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  color: var(--mis-muted);
  margin: 0;
}
.mis-cal__switch select {
  font: inherit;
  color: var(--mis-ink);
  padding: .35rem 2rem .35rem .6rem;
  border: 1px solid var(--mis-border-strong);
  border-radius: var(--mis-radius-sm, 6px);
  background: #fff;
  min-height: 38px; /* comfortable tap target */
}
.mis-cal__switch select:focus-visible { outline: 3px solid var(--mis-focus); outline-offset: 2px; }

.mis-table-scroll > table.mis-cal { min-width: 34rem; }
.mis-cal {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  background: #fff;
}
.mis-cal thead th {
  background: var(--mis-green-700);
  color: #fff;
  font-family: var(--mis-font-display);
  font-weight: 600;
  letter-spacing: .02em;
  text-align: left;
  padding: .7rem 1rem;
  white-space: nowrap;
}
.mis-cal td,
.mis-cal tbody th {
  padding: .65rem 1rem;
  border-top: 1px solid var(--mis-border);
  vertical-align: top;
  text-align: left;
}
/* The month cell spans its group, so the rule under it marks the month change */
.mis-cal tbody tr.mis-cal__first > td,
.mis-cal tbody tr.mis-cal__first > th {
  border-top: 1px solid var(--mis-border-strong);
}
.mis-cal tbody tr:first-child > td,
.mis-cal tbody tr:first-child > th { border-top: 0; }
.mis-cal__month {
  background: var(--mis-green-50);
  font-family: var(--mis-font-display);
  font-weight: 600;
  color: var(--mis-green-800);
  white-space: nowrap;
  width: 1%;
}
.mis-cal__date {
  color: var(--mis-body);
  white-space: nowrap;
}
.mis-cal__event { color: var(--mis-ink); }
.mis-cal tbody tr:hover > td { background: var(--mis-bg-alt); }

.mis-cal__note {
  margin-top: .85rem;
  font-size: .875rem;
  color: var(--mis-muted);
}

@media (max-width: 575.98px) {
  /* The table already scrolls sideways inside .mis-table-scroll; tightening the
     padding keeps all three columns reachable without much of a swipe. */
  .mis-cal thead th,
  .mis-cal td,
  .mis-cal tbody th { padding: .55rem .7rem; }
  .mis-table-scroll > table.mis-cal { min-width: 30rem; }
}

/* ===========================================================================
   IB STATUS STRIP + LEARNER PROFILE (templates/_ib-strip.php, ib-page.php)
   The strip states the school's two IB statuses on the home page and the
   "IB at MIS" page. Authorized (Diploma Programme) and candidate (Primary
   Years Programme) are different things, so they differ in badge fill, icon
   and border style as well as wording - never by colour alone. The profile is
   a grid of ten .mis-card tiles that reuses .mis-grid and .mis-card.
   =========================================================================== */

/* --- Status strip --- */
.mis-ibstrip {
  background: var(--mis-green-900);
  color: var(--mis-cream-100);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-block: .9rem;
}
.mis-ibstrip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 2rem;
}
.mis-ibstrip__inner > * { min-width: 0; }
.mis-ibstrip .mis-ibstrip__label {
  color: var(--mis-cream-200);
  margin: 0;
}
.mis-ibstrip__list {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mis-ibstrip__item {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.mis-ibstrip__text {
  color: #fff;
  font-size: .9375rem;
  font-weight: 500;
}
.mis-ibstrip__badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  font-family: var(--mis-font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: var(--mis-radius-pill);
}
/* Authorized: solid fill */
.mis-ibstrip__item--authorized .mis-ibstrip__badge {
  background: var(--mis-cream-100);
  color: var(--mis-green-900);
  border: 1px solid var(--mis-cream-100);
}
/* Candidate: outline only, dashed - not yet the same thing */
.mis-ibstrip__item--candidate .mis-ibstrip__badge {
  background: transparent;
  color: var(--mis-cream-100);
  border: 1px dashed var(--mis-cream-200);
}
.mis-ibstrip__link {
  margin-left: auto;
  color: var(--mis-cream-100);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: .35rem;
}
.mis-ibstrip__link:hover { color: #fff; }
.mis-ibstrip__link:focus-visible,
.mis-ibstrip__link:focus {
  outline: 3px solid var(--mis-cream-200);
  outline-offset: 2px;
}
.mis-ibstrip__link .fa-arrow-right { font-size: .8em; margin-left: .25rem; }

@media (max-width: 991.98px) {
  /* items may wrap under the label; a wrapped link starts at the left edge */
  .mis-ibstrip__inner { gap: .5rem 1.5rem; }
  .mis-ibstrip__link { margin-left: 0; }
}
@media (max-width: 575.98px) {
  /* phone: everything stacked, one item per row */
  .mis-ibstrip__inner,
  .mis-ibstrip__list {
    flex-direction: column;
    align-items: flex-start;
  }
  .mis-ibstrip__item {
    flex-wrap: wrap;
    gap: .35rem .65rem;
  }
}

/* --- Learner profile grid: ten tiles, 5 x 2 on wide screens --- */
.mis-profile {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.mis-profile > li { min-width: 0; }
.mis-profile .mis-card { padding: 1.25rem; }
/* These tiles are not links, so they should not lift like the clickable ones */
.mis-profile .mis-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--mis-border);
}
.mis-profile .mis-card h3 {
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}
.mis-profile .mis-card p { overflow-wrap: break-word; }

@media (max-width: 1199.98px) {
  /* ten tiles divide evenly into two columns; three would leave an orphan */
  .mis-profile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  /* phone: one column, icon beside the text so ten tiles stay compact */
  .mis-profile { grid-template-columns: minmax(0, 1fr); }
  .mis-profile .mis-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  .mis-profile .mis-card__icon { margin-bottom: 0; }
}

/* ===========================================================================
   IB PAGE EXTENSIONS + HERO CAROUSEL PAUSE CONTROL
   (templates/ib-page.php, templates/home.php, assets/js/mis-2026.js)
   Appended block - nothing above this line is changed. Reuses .mis-grid,
   .mis-card, .mis-head, .mis-eyebrow and .mis-section; only adds what they do
   not cover. Every new grid uses minmax(0, 1fr) tracks, min-width: 0 on its
   children and overflow-wrap on text, so nothing can push a 390px screen wide.
   =========================================================================== */

/* --- 1. Page-hero variant, used only by ib-page.php. A modifier on the shared
       .mis-pagehero: colour and pattern only, no logos or seals. The base rule
       and its ::after arc are untouched; this just re-tints them. ---------- */
.mis-pagehero--ib {
  background-color: var(--mis-green-900);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(242, 230, 201, .11) 1px, transparent 1.6px),
    linear-gradient(120deg, var(--mis-green-900) 0%, var(--mis-green-800) 60%, var(--mis-green-700) 100%);
  background-size: 22px 22px, auto;
  border-bottom: 3px solid var(--mis-gold-500);
}
.mis-pagehero--ib::after { border-color: rgba(242, 230, 201, .1); }
.mis-pagehero--ib .mis-pagehero__lead { color: var(--mis-cream-100); }

/* --- 2. Route through the school --- */
.mis-pathway {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mis-pathway__stage { min-width: 0; }
.mis-pathway__stage > .mis-card {
  max-width: 46rem;
  margin-inline: auto;
  height: auto;
}
.mis-pathway__stage > .mis-pathway__fork { max-width: none; }
/* decorative down-chevron between stages (shapes only, no text to announce) */
.mis-pathway__stage:not(:last-child)::after {
  content: "";
  display: block;
  width: .8rem;
  height: .8rem;
  margin: .55rem auto 1.1rem;
  border-right: 2px solid var(--mis-green-500);
  border-bottom: 2px solid var(--mis-green-500);
  transform: rotate(45deg);
}
/* these cards are not links, so they do not lift on hover */
.mis-pathway .mis-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--mis-border);
}
.mis-pathway .mis-card h3,
.mis-pathway .mis-card h4 { overflow-wrap: anywhere; }
.mis-pathway .mis-card h4 { font-size: 1.0625rem; margin-bottom: .45rem; }
.mis-pathway .mis-card p { overflow-wrap: break-word; }
.mis-pathway__grades {
  display: block;
  font-family: var(--mis-font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mis-copper-600);
  margin-bottom: .35rem;
}
/* Status badges on a LIGHT background (the strip's badges are cream-on-green).
   Authorized: solid fill + check icon. Candidate: dashed outline + hourglass
   icon. They differ in wording, icon and border style - not colour alone. */
.mis-pathway__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .6rem;
  font-family: var(--mis-font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .65rem;
  border-radius: var(--mis-radius-pill);
}
.mis-pathway__badge--authorized {
  background: var(--mis-green-700);
  color: #fff;
  border: 1px solid var(--mis-green-700);
}
.mis-pathway__badge--candidate {
  background: transparent;
  color: var(--mis-copper-700);
  border: 1px dashed var(--mis-copper-600);
}
.mis-pathway .mis-pathway__forklabel {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.25rem 0 .75rem;
  font-family: var(--mis-font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mis-green-700);
}
.mis-pathway__branches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
}
.mis-pathway__branches > li { min-width: 0; }
.mis-pathway__branches .mis-card { padding: 1.15rem; background: var(--mis-bg-alt); }
/* --mis-muted is 4.25:1 on --mis-bg-alt, under AA; use the body colour there */
.mis-pathway__branches .mis-card p,
#pathway .mis-head p { color: var(--mis-body); }
.mis-pathway__more {
  margin: 1.75rem 0 0;
  overflow-wrap: break-word;
}
@media (max-width: 767.98px) {
  .mis-pathway__branches { grid-template-columns: minmax(0, 1fr); }
}

/* --- 3. Diploma Programme core + six subject groups --- */
.mis-dp__sub {
  font-size: var(--mis-h4);
  margin: 0 0 1rem;
  overflow-wrap: break-word;
}
.mis-dp {
  list-style: none;
  margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mis-dp--groups { margin-bottom: 0; }
.mis-dp > li { min-width: 0; }
.mis-dp .mis-card { padding: 1.25rem; }
/* not links, so no lift */
.mis-dp .mis-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--mis-border);
}
.mis-dp__body { min-width: 0; }
.mis-dp .mis-card h4 {
  font-size: 1.125rem;
  margin-bottom: .45rem;
  overflow-wrap: anywhere;
}
.mis-dp .mis-card p { overflow-wrap: break-word; }
.mis-dp__num {
  display: block;
  font-family: var(--mis-font-display);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mis-copper-600);
  margin-bottom: .2rem;
}
@media (max-width: 991.98px) {
  /* six groups divide evenly into two columns; the three core cards stay in a row */
  .mis-dp--groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .mis-dp--core { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  /* phone: one column, icon beside the text */
  .mis-dp--groups { grid-template-columns: minmax(0, 1fr); }
  .mis-dp .mis-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  .mis-dp .mis-card__icon { margin-bottom: 0; }
}

/* --- 4. Hero carousel pause/play button. A real <button>; the markup carries
       the `hidden` attribute and mis-2026.js reveals it, so it is never shown
       dead. Sits top-right, clear of the 52px next-arrow column. --- */
.mis-carousel-toggle[hidden] { display: none; }
.mis-carousel-toggle {
  position: absolute;
  top: .65rem;
  right: 3.9rem;
  z-index: 16; /* above Bootstrap's indicators (15) and controls (1) */
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .4rem .85rem;
  max-width: calc(100% - 5rem);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--mis-radius-pill);
  background: rgba(0, 40, 32, .82);
  color: #fff;
  font-family: var(--mis-font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  cursor: pointer;
}
.mis-carousel-toggle:hover { background: var(--mis-green-700); }
.mis-carousel-toggle:focus-visible {
  outline: 3px solid var(--mis-cream-100);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(0, 40, 32, .9);
}
.mis-carousel-toggle .fas { font-size: .75rem; }