/*
Theme Name: Mahad
Theme URI: https://example.com/mahad
Author: Mahad Theme
Author URI: https://example.com
Description: Mahad is a complete education & school WordPress theme. It ships with 10 custom post types (Announcements, Events, Achievements, Gallery, Video, Facilities, Teachers, Testimonials, Partners, Downloads), a featured slider, splash screen, lightbox gallery, topbar, breadcrumbs, social share, custom widgets and a full brand colour palette system you can re-colour from the Customizer.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mahad
Tags: education, school, blog, custom-logo, custom-menu, featured-images, translation-ready, right-sidebar, left-sidebar, full-width-template, theme-options, threaded-comments, block-styles, wide-blocks
*/

/* ==========================================================================
   0. CSS Custom Properties (all values injected/overridden by the Customizer)
   ========================================================================== */
:root {
  /* Brand */
  --mh-primary: #1b6ef3;
  --mh-primary-rgb: 27, 110, 243;
  --mh-primary-dark: #1355c4;
  --mh-primary-light: #4b8df6;
  --mh-primary-soft: rgba(27, 110, 243, 0.08);
  --mh-primary-contrast: #ffffff;

  --mh-secondary: #0f2b5b;
  --mh-secondary-rgb: 15, 43, 91;
  --mh-secondary-dark: #081733;
  --mh-secondary-light: #1c4585;

  --mh-accent: #f5a623;
  --mh-accent-rgb: 245, 166, 35;
  --mh-accent-dark: #c9820f;
  --mh-accent-soft: rgba(245, 166, 35, 0.12);

  /* Text */
  --mh-heading: #0f1b2d;
  --mh-body: #4a5568;
  --mh-muted: #7c8798;
  --mh-link: #1b6ef3;
  --mh-link-hover: #1355c4;

  /* Surfaces */
  --mh-bg: #ffffff;
  --mh-bg-alt: #f5f7fb;
  --mh-bg-alt-2: #eef2f9;
  --mh-surface: #ffffff;
  --mh-border: #e4e9f2;
  --mh-border-strong: #cfd8e6;

  /* Topbar */
  --mh-topbar-bg: #0f2b5b;
  --mh-topbar-text: #cfd8ea;
  --mh-topbar-link: #ffffff;
  --mh-topbar-border: rgba(255, 255, 255, 0.12);

  /* Header */
  --mh-header-bg: #ffffff;
  --mh-header-text: #0f1b2d;
  --mh-header-link: #0f1b2d;
  --mh-header-link-hover: #1b6ef3;
  --mh-header-border: #e4e9f2;

  /* Footer */
  --mh-footer-bg: #0f2b5b;
  --mh-footer-text: #b9c5d9;
  --mh-footer-heading: #ffffff;
  --mh-footer-link: #cfd8ea;
  --mh-footer-link-hover: #ffffff;
  --mh-footer-border: rgba(255, 255, 255, 0.1);
  --mh-copyright-bg: #081733;
  --mh-copyright-text: #93a2ba;

  /* Buttons */
  --mh-btn-bg: #1b6ef3;
  --mh-btn-text: #ffffff;
  --mh-btn-hover-bg: #1355c4;
  --mh-btn-hover-text: #ffffff;

  /* Typography */
  --mh-font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mh-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mh-fs-base: 16px;
  --mh-fs-h1: 46px;
  --mh-fs-h2: 34px;
  --mh-fs-h3: 26px;
  --mh-fs-h4: 21px;
  --mh-fs-h5: 18px;
  --mh-fs-h6: 16px;
  --mh-lh-base: 1.75;
  --mh-lh-heading: 1.25;
  --mh-fw-heading: 700;

  /* Layout */
  --mh-container: 1200px;
  --mh-gutter: 24px;
  --mh-radius-sm: 6px;
  --mh-radius: 10px;
  --mh-radius-lg: 16px;
  --mh-radius-pill: 999px;

  /* Effects */
  --mh-shadow-sm: 0 2px 8px rgba(15, 27, 45, 0.06);
  --mh-shadow: 0 8px 24px rgba(15, 27, 45, 0.08);
  --mh-shadow-lg: 0 18px 50px rgba(15, 27, 45, 0.12);
  --mh-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --mh-section-pad: 84px;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--mh-bg);
  color: var(--mh-body);
  font-family: var(--mh-font-body);
  font-size: var(--mh-fs-base);
  line-height: var(--mh-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  color: var(--mh-heading);
  font-family: var(--mh-font-heading);
  font-weight: var(--mh-fw-heading);
  line-height: var(--mh-lh-heading);
  word-wrap: break-word;
}
h1 { font-size: var(--mh-fs-h1); }
h2 { font-size: var(--mh-fs-h2); }
h3 { font-size: var(--mh-fs-h3); }
h4 { font-size: var(--mh-fs-h4); }
h5 { font-size: var(--mh-fs-h5); }
h6 { font-size: var(--mh-fs-h6); }

p { margin: 0 0 1.25em; }

a { color: var(--mh-link); text-decoration: none; transition: color var(--mh-transition); }
a:hover, a:focus { color: var(--mh-link-hover); }

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

ul, ol { padding-left: 1.3em; }
blockquote {
  margin: 1.5em 0;
  padding: 1.25em 1.5em;
  border-left: 4px solid var(--mh-primary);
  background: var(--mh-primary-soft);
  border-radius: 0 var(--mh-radius) var(--mh-radius) 0;
  font-style: italic;
  color: var(--mh-heading);
}
blockquote p:last-child { margin-bottom: 0; }
code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
code { background: var(--mh-bg-alt); padding: 0.15em 0.4em; border-radius: 4px; color: var(--mh-primary-dark); }
pre { background: var(--mh-secondary); color: #e6edf7; padding: 1.25em; border-radius: var(--mh-radius); overflow: auto; }
pre code { background: none; color: inherit; padding: 0; }

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
th, td { padding: 0.75em 1em; border: 1px solid var(--mh-border); text-align: left; }
th { background: var(--mh-bg-alt); color: var(--mh-heading); font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--mh-border); margin: 2em 0; }

::selection { background: var(--mh-primary); color: var(--mh-primary-contrast); }

:focus-visible { outline: 2px solid var(--mh-primary); outline-offset: 2px; border-radius: 3px; }

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0.4em 1.5em 1.2em 0; }
.alignright { float: right; margin: 0.4em 0 1.2em 1.5em; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.alignwide { width: min(100%, 1080px); margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-block-image figcaption { font-size: 0.875rem; color: var(--mh-muted); text-align: center; margin-top: 0.5em; }
.sticky .mh-card { box-shadow: 0 0 0 2px var(--mh-primary), var(--mh-shadow); }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  word-wrap: normal !important; position: absolute !important;
}
.screen-reader-text:focus {
  background: var(--mh-surface); border-radius: var(--mh-radius-sm); box-shadow: var(--mh-shadow);
  clip: auto !important; clip-path: none; color: var(--mh-heading); display: block;
  font-size: 0.875rem; font-weight: 700; height: auto; left: 1em; line-height: normal;
  padding: 1em 1.5em; top: 1em; width: auto; z-index: 100000;
}
.skip-link { position: absolute; left: -9999px; }

/* ==========================================================================
   2. Layout helpers
   ========================================================================== */
.mh-container { width: 100%; max-width: var(--mh-container); margin: 0 auto; padding: 0 var(--mh-gutter); }
.mh-container--wide { max-width: 1440px; }
.mh-row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--mh-gutter) / -2); }
.mh-row > [class*="mh-col"] { padding: 0 calc(var(--mh-gutter) / 2); }
.mh-col-1 { width: 8.3333%; } .mh-col-2 { width: 16.6666%; } .mh-col-3 { width: 25%; }
.mh-col-4 { width: 33.3333%; } .mh-col-5 { width: 41.6666%; } .mh-col-6 { width: 50%; }
.mh-col-7 { width: 58.3333%; } .mh-col-8 { width: 66.6666%; } .mh-col-9 { width: 75%; }
.mh-col-10 { width: 83.3333%; } .mh-col-11 { width: 91.6666%; } .mh-col-12 { width: 100%; }
.mh-text-center { text-align: center; }
.mh-mb-0 { margin-bottom: 0 !important; }
.mh-hidden { display: none !important; }

.mh-layout { display: flex; gap: 48px; align-items: flex-start; padding: 64px 0; }
.mh-layout__main { flex: 1 1 auto; min-width: 0; }
.mh-layout__side { flex: 0 0 340px; max-width: 340px; }
.mh-layout--left .mh-layout__side { order: -1; }
.mh-layout--full .mh-layout__side { display: none; }
.mh-layout--full .mh-layout__main { flex: 1 1 100%; max-width: 100%; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */
.mh-btn,
button.mh-btn,
input[type="submit"],
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.8em 1.9em;
  background: var(--mh-btn-bg);
  color: var(--mh-btn-text);
  border: 2px solid var(--mh-btn-bg);
  border-radius: var(--mh-radius-pill);
  font-family: var(--mh-font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  transition: all var(--mh-transition);
}
.mh-btn:hover, .mh-btn:focus,
button.mh-btn:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
  background: var(--mh-btn-hover-bg);
  border-color: var(--mh-btn-hover-bg);
  color: var(--mh-btn-hover-text);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--mh-primary-rgb), 0.28);
}
.mh-btn--outline { background: transparent; color: var(--mh-btn-bg); }
.mh-btn--outline:hover { background: var(--mh-btn-bg); color: var(--mh-btn-text); }
.mh-btn--light { background: #fff; border-color: #fff; color: var(--mh-heading); }
.mh-btn--light:hover { background: transparent; border-color: #fff; color: #fff; box-shadow: none; }
.mh-btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.mh-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--mh-heading); }
.mh-btn--sm { padding: 0.6em 1.35em; font-size: 0.8125rem; }
.mh-btn--lg { padding: 1em 2.4em; font-size: 1rem; }
.mh-btn--block { width: 100%; }

/* ==========================================================================
   4. Topbar
   ========================================================================== */
.mh-topbar {
  background: var(--mh-topbar-bg);
  color: var(--mh-topbar-text);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--mh-topbar-border);
  position: relative;
  z-index: 30;
}
.mh-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; }
.mh-topbar__contact { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; }
.mh-topbar__item { display: inline-flex; align-items: center; gap: 0.5em; color: var(--mh-topbar-text); }
/*
 * Icons are stroke-based line art: mahad_get_icon() and mahad_get_social_icon()
 * both emit `fill="none" stroke="currentColor"` on the <svg> root. CSS must
 * therefore never set `fill` on one of these SVGs. A `fill` declaration
 * outranks that presentation attribute *and* is inherited by every child
 * <path>/<rect>/<circle>, which floods the shapes solid so the glyph collapses
 * into a blob — the pin loses its hole, Instagram becomes a filled square,
 * YouTube a filled pill. Only genuinely solid glyphs opt in to a fill; see
 * .mh-video-play, and the per-star fill in mahad_star_rating().
 */
.mh-topbar__item svg { width: 14px; height: 14px; fill: none; stroke: currentColor; flex: none; opacity: .85; }
.mh-topbar__item a { color: var(--mh-topbar-link); }
.mh-topbar__item a:hover { color: var(--mh-accent); }
.mh-topbar__right { display: flex; align-items: center; gap: 18px; }
.mh-topbar__social { display: flex; align-items: center; gap: 4px; }
.mh-topbar__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--mh-topbar-text); background: rgba(255,255,255,.08);
  transition: all var(--mh-transition);
}
.mh-topbar__social a:hover { background: var(--mh-primary); color: #fff; }
.mh-topbar__social svg { width: 13px; height: 13px; fill: none; stroke: currentColor; }
.mh-topbar__menu { display: flex; gap: 16px; }
.mh-topbar__menu ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.mh-topbar__menu a { color: var(--mh-topbar-link); }
.mh-topbar__menu a:hover { color: var(--mh-accent); }
.mh-topbar__lang { display: flex; align-items: center; gap: 6px; }
.mh-topbar__lang a, .mh-topbar__lang span {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--mh-topbar-text); font-size: 0.75rem; letter-spacing: .03em; text-transform: uppercase;
}
.mh-topbar__lang .is-active { color: var(--mh-topbar-link); font-weight: 700; }
.mh-topbar__lang img { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }

/* ==========================================================================
   5. Header
   ========================================================================== */
.mh-header {
  background: var(--mh-header-bg);
  border-bottom: 1px solid var(--mh-header-border);
  position: relative;
  z-index: 25;
  transition: box-shadow var(--mh-transition), transform var(--mh-transition);
}
.mh-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 84px; }
.mh-header--sticky .mh-header__inner { min-height: 70px; }
.mh-header.is-stuck {
  position: fixed; top: 0; left: 0; right: 0;
  box-shadow: var(--mh-shadow);
  animation: mhSlideDown 0.35s ease;
}
@keyframes mhSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.admin-bar .mh-header.is-stuck { top: 32px; }

.mh-header__brand { display: flex; align-items: center; gap: 14px; flex: none; }
.mh-brand__logo img { width: auto; display: block; }
.mh-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.mh-brand__title {
  margin: 0; font-family: var(--mh-font-heading); font-weight: 800;
  font-size: 1.5rem; color: var(--mh-header-text); letter-spacing: -0.02em;
}
.mh-brand__title a { color: inherit; }
.mh-brand__tagline { font-size: 0.75rem; color: var(--mh-muted); letter-spacing: .06em; text-transform: uppercase; }
.mh-brand__logo img { max-height: 60px; }

/* Navigation */
.mh-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mh-nav__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 2px; }
.mh-nav__list li { position: relative; }
.mh-nav__list > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 15px; border-radius: var(--mh-radius-sm);
  color: var(--mh-header-link);
  font-family: var(--mh-font-heading);
  font-size: 0.9375rem; font-weight: 600;
  transition: all var(--mh-transition);
}
.mh-nav__list > li > a:hover,
.mh-nav__list > li.current-menu-item > a,
.mh-nav__list > li.current-menu-ancestor > a,
.mh-nav__list > li.current_page_item > a,
.mh-nav__list > li.current_page_parent > a { color: var(--mh-header-link-hover); }
.mh-nav__list > li > a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px;
  background: var(--mh-primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--mh-transition);
}
.mh-nav__list > li > a:hover::after,
.mh-nav__list > li.current-menu-item > a::after,
.mh-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.mh-nav__list > li.menu-item-has-children > a::before {
  content: ""; width: 0; height: 0; order: 2;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .6;
  transition: transform var(--mh-transition);
}
.mh-nav__list > li.menu-item-has-children:hover > a::before { transform: rotate(180deg); }

.mh-nav__list ul.sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 236px;
  list-style: none; margin: 0; padding: 10px;
  background: var(--mh-surface); border-radius: var(--mh-radius);
  box-shadow: var(--mh-shadow-lg); border: 1px solid var(--mh-border);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all var(--mh-transition); z-index: 60;
}
.mh-nav__list li:hover > ul.sub-menu,
.mh-nav__list li:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mh-nav__list ul.sub-menu li { width: 100%; }
.mh-nav__list ul.sub-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--mh-radius-sm);
  color: var(--mh-heading); font-size: 0.875rem; font-weight: 500;
}
.mh-nav__list ul.sub-menu a:hover { background: var(--mh-primary-soft); color: var(--mh-primary); }
.mh-nav__list ul.sub-menu .menu-item-has-children > a::after {
  content: ""; width: 0; height: 0; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; border-left: 5px solid currentColor; opacity: .5;
}
.mh-nav__list ul.sub-menu ul.sub-menu { top: -10px; left: 100%; }
.mh-nav__list ul.sub-menu ul.sub-menu ul.sub-menu { top: -10px; left: auto; right: 100%; }

/* Header actions */
.mh-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.mh-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--mh-bg-alt); color: var(--mh-header-text);
  cursor: pointer; transition: all var(--mh-transition);
}
.mh-icon-btn:hover { background: var(--mh-primary); color: #fff; }
.mh-icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mh-nav-toggle { display: none; }

/* Search overlay */
.mh-search-popup {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(var(--mh-secondary-rgb), 0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all var(--mh-transition);
  padding: 24px;
}
.mh-search-popup.is-open { opacity: 1; visibility: visible; }
.mh-search-popup__inner { width: 100%; max-width: 660px; text-align: center; }
.mh-search-popup__title { color: #fff; font-size: 1.5rem; margin-bottom: 1.2em; }
.mh-search-popup form { display: flex; gap: 10px; }
.mh-search-popup input[type="search"] {
  flex: 1; padding: 1em 1.4em; border: 2px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.06); border-radius: var(--mh-radius-pill);
  color: #fff; font-size: 1rem;
}
.mh-search-popup input[type="search"]::placeholder { color: rgba(255,255,255,.6); }
.mh-search-popup input[type="search"]:focus { outline: none; border-color: var(--mh-primary-light); background: rgba(255,255,255,.12); }
.mh-search-popup__close {
  position: absolute; top: 28px; right: 28px; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; transition: all var(--mh-transition);
}
.mh-search-popup__close:hover { background: var(--mh-primary); transform: rotate(90deg); }

/* Mobile drawer */
.mh-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 1000;
  background: var(--mh-surface); box-shadow: var(--mh-shadow-lg);
  transform: translateX(100%); transition: transform var(--mh-transition);
  display: flex; flex-direction: column; overflow-y: auto; padding: 0 0 32px;
}
.mh-drawer.is-open { transform: translateX(0); }
.mh-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--mh-border); }
.mh-drawer__title { font-family: var(--mh-font-heading); font-weight: 700; color: var(--mh-heading); }
.mh-drawer__close { border: 0; background: var(--mh-bg-alt); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 20px; color: var(--mh-heading); }
.mh-drawer__body { padding: 18px 22px; }
.mh-drawer ul { list-style: none; margin: 0; padding: 0; }
.mh-drawer ul li a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 0; border-bottom: 1px solid var(--mh-border);
  color: var(--mh-heading); font-family: var(--mh-font-heading); font-weight: 600; font-size: 0.9375rem;
}
.mh-drawer ul li a:hover { color: var(--mh-primary); }
.mh-drawer ul.sub-menu { padding-left: 16px; }
.mh-drawer ul.sub-menu li a { font-weight: 500; font-size: 0.875rem; color: var(--mh-body); }
.mh-drawer__extra { padding: 20px 22px; margin-top: auto; border-top: 1px solid var(--mh-border); }
.mh-drawer__contact { display: flex; flex-direction: column; gap: 10px; font-size: 0.875rem; }
.mh-drawer__contact span { display: flex; gap: 10px; align-items: flex-start; }
.mh-drawer__social { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.mh-drawer__social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 50%; background: var(--mh-bg-alt); color: var(--mh-heading); }
.mh-drawer__social a:hover { background: var(--mh-primary); color: #fff; }
.mh-drawer__social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }
.mh-overlay {
  position: fixed; inset: 0; background: rgba(8, 23, 51, .55); z-index: 999;
  opacity: 0; visibility: hidden; transition: all var(--mh-transition);
}
.mh-overlay.is-open { opacity: 1; visibility: visible; }

/* Submenu toggle button injected by JS on mobile */
.mh-submenu-toggle {
  display: none; width: 30px; height: 30px; border: 1px solid var(--mh-border);
  background: transparent; border-radius: var(--mh-radius-sm); cursor: pointer; flex: none;
  color: var(--mh-heading); font-size: 15px; line-height: 1;
}
.mh-submenu-toggle svg { width: 12px; height: 12px; margin: 0 auto; }

/* ==========================================================================
   6. Page hero / breadcrumbs
   ========================================================================== */
.mh-page-hero {
  position: relative;
  padding: 66px 0;
  background: linear-gradient(135deg, var(--mh-secondary) 0%, var(--mh-secondary-dark) 100%);
  color: #fff;
  overflow: hidden;
}
.mh-page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 12% 20%, rgba(var(--mh-primary-rgb), .45) 0, transparent 45%),
                    radial-gradient(circle at 88% 85%, rgba(var(--mh-accent-rgb), .28) 0, transparent 42%);
  pointer-events: none;
}
.mh-page-hero__inner { position: relative; z-index: 2; }
.mh-page-hero__title { color: #fff; margin: 0 0 0.25em; }
.mh-page-hero__subtitle { color: rgba(255,255,255,.78); margin: 0; max-width: 720px; }
.mh-page-hero--image { background-size: cover; background-position: center; }
.mh-page-hero--image::after { content: ""; position: absolute; inset: 0; background: rgba(var(--mh-secondary-rgb), .78); }
.mh-page-hero--light { background: var(--mh-bg-alt); color: var(--mh-heading); }
.mh-page-hero--light::before { display: none; }
.mh-page-hero--light .mh-page-hero__title { color: var(--mh-heading); }
.mh-page-hero--light .mh-page-hero__subtitle { color: var(--mh-body); }

.mh-breadcrumbs { font-size: 0.875rem; color: rgba(255,255,255,.72); margin-top: 14px; }
.mh-breadcrumbs a { color: rgba(255,255,255,.9); }
.mh-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.mh-breadcrumbs .mh-sep { margin: 0 0.5em; opacity: .55; }
.mh-page-hero--light .mh-breadcrumbs { color: var(--mh-muted); }
.mh-page-hero--light .mh-breadcrumbs a { color: var(--mh-primary); }
.mh-breadcrumbs--inline { margin: 0 0 22px; color: var(--mh-muted); }
.mh-breadcrumbs--inline a { color: var(--mh-primary); }

/* ==========================================================================
   7. Section headings
   ========================================================================== */
.mh-section { padding: var(--mh-section-pad) 0; position: relative; }
.mh-section--alt { background: var(--mh-bg-alt); }
.mh-section--alt2 { background: var(--mh-bg-alt-2); }
.mh-section--primary { background: var(--mh-primary); color: #fff; }
.mh-section--dark { background: var(--mh-secondary); color: var(--mh-footer-text); }
.mh-section--primary .mh-section__title, .mh-section--dark .mh-section__title { color: #fff; }
.mh-section--primary .mh-section__subtitle, .mh-section--dark .mh-section__subtitle { color: rgba(255,255,255,.8); }
.mh-section--pt-0 { padding-top: 0; }
.mh-section--pb-0 { padding-bottom: 0; }
/*
 * Two adjacent sections that each cancel their facing padding would collapse to
 * a 0px gap — which is what pushed the CTA banner flush against the partner
 * logo cards. Restore the normal section rhythm for that one combination.
 */
.mh-section--pb-0 + .mh-section--pt-0 { padding-top: var(--mh-section-pad); }

.mh-section__head { margin-bottom: 46px; }
.mh-section__head--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.mh-section__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mh-font-heading); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--mh-primary);
  margin-bottom: 12px;
}
.mh-section__eyebrow::before, .mh-section__eyebrow::after {
  content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; opacity: .5;
}
.mh-section__eyebrow:only-child::before, .mh-section__eyebrow:only-child::after { display: none; }
.mh-section__title { margin: 0 0 12px; }
.mh-section__subtitle { margin: 0; color: var(--mh-muted); font-size: 1.0625rem; }
.mh-section__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; max-width: none; text-align: left; }
.mh-section__head--split .mh-section__link { flex: none; margin-bottom: 6px; }
.mh-section__link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mh-font-heading); font-weight: 600; font-size: 0.9375rem;
  color: var(--mh-primary);
}
.mh-section__link:hover { gap: 0.9em; }
.mh-section__link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; }

.mh-grid { display: grid; gap: 28px; }
.mh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mh-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mh-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ==========================================================================
   8. Cards (generic)
   ========================================================================== */
.mh-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  overflow: hidden;
  transition: all var(--mh-transition);
  height: 100%;
}
.mh-card:hover { transform: translateY(-6px); box-shadow: var(--mh-shadow-lg); border-color: transparent; }
.mh-card__media { position: relative; overflow: hidden; background: var(--mh-bg-alt-2); aspect-ratio: 16 / 10; }
.mh-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mh-card:hover .mh-card__media img { transform: scale(1.07); }
.mh-card__media--tall { aspect-ratio: 3 / 4; }
.mh-card__media--square { aspect-ratio: 1 / 1; }
.mh-card__media--video { aspect-ratio: 16 / 9; }
.mh-card__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--mh-bg-alt-2), var(--mh-border));
  color: var(--mh-muted);
}
.mh-card__placeholder svg { width: 46px; height: 46px; opacity: .5; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mh-card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  display: inline-block; padding: 0.35em 0.85em;
  background: var(--mh-primary); color: #fff;
  border-radius: var(--mh-radius-pill);
  font-family: var(--mh-font-heading); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.5;
}
.mh-card__badge--accent { background: var(--mh-accent); color: #1b1b1b; }
.mh-card__badge--dark { background: rgba(var(--mh-secondary-rgb), .9); }
.mh-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.mh-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  font-size: 0.8125rem; color: var(--mh-muted); margin-bottom: 12px;
}
.mh-card__meta span, .mh-card__meta a { display: inline-flex; align-items: center; gap: 0.45em; color: inherit; }
.mh-card__meta a:hover { color: var(--mh-primary); }
.mh-card__meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.mh-card__title { font-size: 1.125rem; margin: 0 0 10px; line-height: 1.4; }
.mh-card__title a { color: var(--mh-heading); }
.mh-card__title a:hover { color: var(--mh-primary); }
.mh-card__excerpt { font-size: 0.9375rem; color: var(--mh-body); margin: 0 0 18px; }
.mh-card__excerpt p { margin: 0; }
.mh-card__footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--mh-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mh-card__footer--plain { border: 0; padding-top: 0; }
.mh-card__more {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mh-font-heading); font-size: 0.875rem; font-weight: 600; color: var(--mh-primary);
}
.mh-card__more:hover { gap: 0.85em; }
.mh-card__more svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.mh-card--horizontal { flex-direction: row; }
.mh-card--horizontal .mh-card__media { flex: 0 0 42%; aspect-ratio: auto; min-height: 100%; }
.mh-card--horizontal .mh-card__body { flex: 1; }
.mh-card--plain { border: 0; background: transparent; }
.mh-card--plain:hover { box-shadow: none; transform: none; }
.mh-card--plain:hover .mh-card__media img { transform: scale(1.07); }
.mh-card--plain .mh-card__body { padding: 18px 0 0; }
.mh-card--overlay { border: 0; }
.mh-card--overlay .mh-card__media { aspect-ratio: 4 / 5; }
.mh-card--overlay .mh-card__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  background: linear-gradient(to top, rgba(8,23,51,.92) 10%, rgba(8,23,51,.45) 60%, transparent 100%);
  color: #fff; padding: 28px 22px 22px;
}
.mh-card--overlay .mh-card__title, .mh-card--overlay .mh-card__title a { color: #fff; }
.mh-card--overlay .mh-card__meta { color: rgba(255,255,255,.8); margin-bottom: 8px; }

/* ==========================================================================
   9. Hero slider
   ========================================================================== */
.mh-slider { position: relative; overflow: hidden; background: var(--mh-secondary); }
.mh-slider__track { position: relative; }
.mh-slide {
  position: relative; display: none;
  min-height: 560px; align-items: center;
  background-size: cover; background-position: center;
}
.mh-slide.is-active { display: flex; animation: mhFadeIn .7s ease; }
@keyframes mhFadeIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
.mh-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,23,51,.92) 0%, rgba(8,23,51,.72) 45%, rgba(8,23,51,.28) 100%);
}
.mh-slide__inner { position: relative; z-index: 3; padding: 90px 0; max-width: 700px; }
.mh-slide__eyebrow {
  display: inline-block; padding: 0.4em 1.1em; margin-bottom: 18px;
  background: var(--mh-primary); color: #fff; border-radius: var(--mh-radius-pill);
  font-family: var(--mh-font-heading); font-size: 0.75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.mh-slide__title { color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.2rem); margin: 0 0 0.5em; line-height: 1.15; }
.mh-slide__title a { color: inherit; }
.mh-slide__text { color: rgba(255,255,255,.86); font-size: 1.0625rem; max-width: 560px; margin-bottom: 2em; }
.mh-slide__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.mh-slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--mh-transition); backdrop-filter: blur(6px);
}
.mh-slider__nav:hover { background: var(--mh-primary); border-color: var(--mh-primary); }
.mh-slider__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mh-slider__nav--prev { left: 26px; }
.mh-slider__nav--next { right: 26px; }
.mh-slider__dots {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 6;
  display: flex; justify-content: center; gap: 10px;
}
.mh-slider__dots button {
  width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,.65); background: transparent; transition: all var(--mh-transition);
}
.mh-slider__dots button.is-active { background: var(--mh-primary); border-color: var(--mh-primary); width: 30px; border-radius: var(--mh-radius-pill); }
.mh-slider--video .mh-slide { min-height: 520px; }
.mh-slide__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
}

/* Feature boxes overlapping slider */
.mh-features {
  position: relative; z-index: 10; margin-top: -70px;
}
.mh-features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mh-feature-box {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--mh-surface); border-radius: var(--mh-radius-lg);
  padding: 28px; box-shadow: var(--mh-shadow);
  border-top: 4px solid transparent;
  transition: all var(--mh-transition);
}
.mh-feature-box:hover { transform: translateY(-6px); box-shadow: var(--mh-shadow-lg); border-top-color: var(--mh-primary); }
.mh-feature-box__icon {
  flex: none; width: 58px; height: 58px; border-radius: var(--mh-radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--mh-primary-soft); color: var(--mh-primary);
  transition: all var(--mh-transition);
}
.mh-feature-box:hover .mh-feature-box__icon { background: var(--mh-primary); color: #fff; }
.mh-feature-box__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.mh-feature-box__icon img { width: 32px; height: 32px; object-fit: contain; }
.mh-feature-box__title { font-size: 1.0625rem; margin: 0 0 6px; }
.mh-feature-box__title a { color: var(--mh-heading); }
.mh-feature-box__title a:hover { color: var(--mh-primary); }
.mh-feature-box__text { font-size: 0.875rem; margin: 0 0 10px; color: var(--mh-muted); }
.mh-feature-box__link { font-family: var(--mh-font-heading); font-size: 0.8125rem; font-weight: 700; color: var(--mh-primary); display: inline-flex; align-items: center; gap: .4em; }
.mh-feature-box--center { flex-direction: column; align-items: center; text-align: center; }

/* ==========================================================================
   10. Announcements
   ========================================================================== */
.mh-announce-list { display: flex; flex-direction: column; gap: 14px; }
.mh-announce {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  border-left: 4px solid var(--mh-primary);
  border-radius: var(--mh-radius); padding: 20px 22px;
  transition: all var(--mh-transition);
}
.mh-announce:hover { border-left-color: var(--mh-accent); box-shadow: var(--mh-shadow); transform: translateX(4px); }
.mh-announce__date {
  flex: none; width: 62px; text-align: center; border-right: 1px solid var(--mh-border); padding-right: 16px;
}
.mh-announce__day { display: block; font-family: var(--mh-font-heading); font-size: 1.6rem; font-weight: 800; color: var(--mh-primary); line-height: 1; }
.mh-announce__month { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mh-muted); margin-top: 4px; }
.mh-announce__body { flex: 1; min-width: 0; }
.mh-announce__title { font-size: 1.0625rem; margin: 0 0 8px; }
.mh-announce__title a { color: var(--mh-heading); }
.mh-announce__title a:hover { color: var(--mh-primary); }
.mh-announce__excerpt { font-size: 0.875rem; color: var(--mh-muted); margin: 0 0 10px; }
.mh-announce__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8125rem; color: var(--mh-muted); }
.mh-announce__meta span { display: inline-flex; align-items: center; gap: .4em; }
.mh-announce__meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.mh-priority {
  display: inline-block; padding: 0.2em 0.7em; border-radius: var(--mh-radius-pill);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--mh-accent-soft); color: var(--mh-accent-dark);
}
.mh-priority--urgent { background: rgba(220, 53, 69, .12); color: #c0202f; }
.mh-announce__file {
  display: inline-flex; align-items: center; gap: .45em; margin-top: 10px;
  font-size: 0.8125rem; font-weight: 600; color: var(--mh-primary);
}
.mh-announce__file svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ==========================================================================
   11. Agenda / events
   ========================================================================== */
.mh-agenda-list { display: flex; flex-direction: column; gap: 18px; }
.mh-agenda {
  display: flex; gap: 20px; align-items: stretch;
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius); overflow: hidden;
  transition: all var(--mh-transition);
}
.mh-agenda:hover { box-shadow: var(--mh-shadow); transform: translateY(-3px); border-color: transparent; }
.mh-agenda__date {
  flex: none; width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--mh-primary); color: #fff; padding: 18px 8px; text-align: center;
}
.mh-agenda__month { font-size: 0.75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.mh-agenda__day { font-family: var(--mh-font-heading); font-size: 2rem; font-weight: 800; line-height: 1.05; }
.mh-agenda__body { flex: 1; padding: 20px 22px 20px 0; min-width: 0; }
.mh-agenda__title { font-size: 1.0625rem; margin: 0 0 10px; }
.mh-agenda__title a { color: var(--mh-heading); }
.mh-agenda__title a:hover { color: var(--mh-primary); }
.mh-agenda__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.8125rem; color: var(--mh-muted); }
.mh-agenda__meta span { display: inline-flex; align-items: center; gap: .45em; }
.mh-agenda__meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.mh-agenda__countdown {
  margin-top: 12px; font-size: 0.75rem; font-weight: 700; color: var(--mh-primary);
  text-transform: uppercase; letter-spacing: .06em;
}
.mh-agenda.is-past { opacity: .68; }
.mh-agenda.is-past .mh-agenda__date { background: var(--mh-muted); }

.mh-agenda-card__date {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  width: 62px; padding: 10px 6px; text-align: center;
  background: var(--mh-primary); color: #fff; border-radius: var(--mh-radius-sm);
  box-shadow: var(--mh-shadow);
}
.mh-agenda-card__day { display: block; font-family: var(--mh-font-heading); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.mh-agenda-card__month { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .08em; opacity: .92; }

/* ==========================================================================
   12. Gallery & lightbox
   ========================================================================== */
.mh-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mh-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mh-gallery__item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--mh-radius); aspect-ratio: 1 / 1; background: var(--mh-bg-alt-2);
}
.mh-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.mh-gallery__item::after {
  content: ""; position: absolute; inset: 0; background: rgba(var(--mh-secondary-rgb), .55);
  opacity: 0; transition: opacity var(--mh-transition);
}
.mh-gallery__item:hover::after { opacity: 1; }
.mh-gallery__item:hover img { transform: scale(1.08); }
.mh-gallery__zoom {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7); transition: all var(--mh-transition); color: #fff;
}
.mh-gallery__item:hover .mh-gallery__zoom { opacity: 1; transform: scale(1); }
.mh-gallery__zoom svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; }
.mh-gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px;
  color: #fff; font-family: var(--mh-font-heading); font-weight: 600; font-size: .875rem;
  background: linear-gradient(to top, rgba(8,23,51,.85), transparent);
  opacity: 0; transform: translateY(10px); transition: all var(--mh-transition);
}
.mh-gallery__item:hover .mh-gallery__caption { opacity: 1; transform: translateY(0); }
.mh-gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.mh-gallery__item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }

.mh-lightbox {
  position: fixed; inset: 0; z-index: 1200; background: rgba(6, 14, 30, .95);
  display: flex; align-items: center; justify-content: center; padding: 40px;
  opacity: 0; visibility: hidden; transition: all var(--mh-transition);
}
.mh-lightbox.is-open { opacity: 1; visibility: visible; }
.mh-lightbox__img { max-width: 92vw; max-height: 82vh; border-radius: var(--mh-radius); box-shadow: var(--mh-shadow-lg); }
.mh-lightbox__caption { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: .9375rem; padding: 0 20px; }
.mh-lightbox__close, .mh-lightbox__nav {
  position: absolute; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1);
  color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--mh-transition);
}
.mh-lightbox__close { top: 24px; right: 24px; width: 46px; height: 46px; font-size: 22px; line-height: 1; }
.mh-lightbox__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.mh-lightbox__nav--prev { left: 24px; }
.mh-lightbox__nav--next { right: 24px; }
.mh-lightbox__close:hover, .mh-lightbox__nav:hover { background: var(--mh-primary); border-color: var(--mh-primary); }
.mh-lightbox__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mh-lightbox__counter { position: absolute; top: 34px; left: 30px; color: rgba(255,255,255,.7); font-size: .875rem; }

/* ==========================================================================
   13. Video
   ========================================================================== */
.mh-video-card .mh-card__media { position: relative; }
.mh-video-play {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.mh-video-play::before {
  content: ""; position: absolute; width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255,255,255,.95); transition: all var(--mh-transition);
  box-shadow: 0 0 0 0 rgba(255,255,255,.5); animation: mhPulse 2.4s infinite;
}
@keyframes mhPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70% { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.mh-video-play svg { position: relative; z-index: 2; width: 22px; height: 22px; fill: var(--mh-primary); margin-left: 4px; }
.mh-video-card:hover .mh-video-play::before { transform: scale(1.12); background: var(--mh-primary); }
.mh-video-card:hover .mh-video-play svg { fill: #fff; }
.mh-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.mh-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mh-video__duration {
  position: absolute; bottom: 12px; right: 12px; z-index: 4;
  background: rgba(0,0,0,.75); color: #fff; padding: 0.25em 0.65em;
  border-radius: var(--mh-radius-sm); font-size: 0.75rem; font-weight: 600;
}

/* ==========================================================================
   14. Facilities
   ========================================================================== */
.mh-facility {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--mh-radius-lg); background: var(--mh-bg-alt-2);
  aspect-ratio: 4 / 3; transition: all var(--mh-transition);
}
.mh-facility img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mh-facility::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,23,51,.9) 5%, rgba(8,23,51,.35) 55%, transparent 100%);
  transition: all var(--mh-transition);
}
.mh-facility:hover { transform: translateY(-6px); box-shadow: var(--mh-shadow-lg); }
.mh-facility:hover img { transform: scale(1.08); }
.mh-facility__body { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 24px; color: #fff; }
.mh-facility__icon {
  width: 46px; height: 46px; border-radius: var(--mh-radius); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff;
}
.mh-facility__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.mh-facility__title { color: #fff; font-size: 1.125rem; margin: 0 0 4px; }
.mh-facility__desc { font-size: .8125rem; color: rgba(255,255,255,.82); margin: 0; }
.mh-facility__meta { display: flex; gap: 14px; margin-top: 10px; font-size: .75rem; color: rgba(255,255,255,.75); }
.mh-facility__meta span { display: inline-flex; align-items: center; gap: .35em; }
.mh-facility__meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ==========================================================================
   15. Teachers (GTK)
   ========================================================================== */
.mh-teacher { text-align: center; }
.mh-teacher__media {
  position: relative; border-radius: var(--mh-radius-lg); overflow: hidden;
  aspect-ratio: 3 / 4; background: var(--mh-bg-alt-2); margin-bottom: 18px;
}
.mh-teacher__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mh-teacher:hover .mh-teacher__media img { transform: scale(1.06); }
.mh-teacher__social {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: center; gap: 8px; padding: 18px;
  background: linear-gradient(to top, rgba(8,23,51,.9), transparent);
  transform: translateY(100%); opacity: 0; transition: all var(--mh-transition);
}
.mh-teacher:hover .mh-teacher__social { transform: translateY(0); opacity: 1; }
.mh-teacher__social a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; color: var(--mh-secondary);
  transition: all var(--mh-transition);
}
.mh-teacher__social a:hover { background: var(--mh-primary); color: #fff; }
.mh-teacher__social svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }
.mh-teacher__name { font-size: 1.0625rem; margin: 0 0 4px; }
.mh-teacher__name a { color: var(--mh-heading); }
.mh-teacher__name a:hover { color: var(--mh-primary); }
.mh-teacher__position { font-size: .875rem; color: var(--mh-primary); font-weight: 600; margin: 0; }
.mh-teacher__subjects { font-size: .8125rem; color: var(--mh-muted); margin: 6px 0 0; }

.mh-teacher-profile { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.mh-teacher-profile__photo { flex: 0 0 300px; border-radius: var(--mh-radius-lg); overflow: hidden; }
.mh-teacher-profile__info { flex: 1 1 340px; min-width: 0; }
.mh-teacher-profile__position { color: var(--mh-primary); font-weight: 700; font-family: var(--mh-font-heading); margin-bottom: 14px; }
.mh-teacher-details { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.mh-teacher-details li { display: flex; gap: 10px; font-size: .9375rem; padding-bottom: 10px; border-bottom: 1px dashed var(--mh-border); }
.mh-teacher-details strong { min-width: 130px; color: var(--mh-heading); font-weight: 600; }

/* ==========================================================================
   16. Testimonials
   ========================================================================== */
.mh-testimonials { position: relative; }
.mh-testimonial {
  background: var(--mh-surface); border-radius: var(--mh-radius-lg);
  padding: 34px; border: 1px solid var(--mh-border);
  display: flex; flex-direction: column; height: 100%;
  transition: all var(--mh-transition);
}
.mh-testimonial:hover { box-shadow: var(--mh-shadow); }
.mh-testimonial__quote {
  font-size: 2.6rem; line-height: 1; color: var(--mh-primary); opacity: .22;
  font-family: Georgia, serif; margin-bottom: 6px;
}
.mh-testimonial__text { font-size: .9375rem; color: var(--mh-body); margin: 0 0 22px; font-style: italic; }
.mh-testimonial__text p { margin: 0; }
.mh-testimonial__stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--mh-accent); }
/* No `fill` here: mahad_star_rating() sets it per star so empty stars stay hollow. */
.mh-testimonial__stars svg { width: 15px; height: 15px; }
.mh-testimonial__person { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--mh-border); }
.mh-testimonial__avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: var(--mh-bg-alt-2); }
.mh-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mh-testimonial__name { font-family: var(--mh-font-heading); font-weight: 700; color: var(--mh-heading); font-size: .9375rem; margin: 0; }
.mh-testimonial__role { font-size: .8125rem; color: var(--mh-muted); margin: 0; }
.mh-testimonial--center { text-align: center; }
.mh-testimonial--center .mh-testimonial__person { flex-direction: column; text-align: center; }
.mh-testimonial--center .mh-testimonial__stars { justify-content: center; }

.mh-carousel { position: relative; }
.mh-carousel__viewport { overflow: hidden; }
.mh-carousel__track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.mh-carousel__slide { flex: 0 0 100%; padding: 0 12px; box-sizing: border-box; }
.mh-carousel--2 .mh-carousel__slide { flex-basis: 50%; }
.mh-carousel--3 .mh-carousel__slide { flex-basis: 33.3333%; }
.mh-carousel--4 .mh-carousel__slide { flex-basis: 25%; }
.mh-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; }
.mh-carousel__btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--mh-border); background: var(--mh-surface); color: var(--mh-heading);
  display: flex; align-items: center; justify-content: center; transition: all var(--mh-transition);
}
.mh-carousel__btn:hover { background: var(--mh-primary); border-color: var(--mh-primary); color: #fff; }
.mh-carousel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.mh-carousel__dots { display: flex; gap: 8px; }
.mh-carousel__dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--mh-border-strong); transition: all var(--mh-transition);
}
.mh-carousel__dots button.is-active { background: var(--mh-primary); width: 26px; border-radius: var(--mh-radius-pill); }
.mh-section--primary .mh-carousel__btn, .mh-section--dark .mh-carousel__btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
/*
 * Teachers & Staff — the shared carousel, unwound back into a grid on desktop.
 *
 * The section is the same four-up grid above 768px that it always was: from
 * 769px the track becomes the grid again, so the desktop design does not change
 * and the arrows and dots are never needed. Below 768px the default carousel
 * rules take over, turning four stacked cards — the section was 2,700px tall on
 * a 390px screen — into one swipeable card at a time.
 *
 * The track also carries `mh-grid mh-grid--4` so the desktop columns, including
 * the tablet step down to two, come from the same responsive ladder as every
 * other grid in the theme instead of being restated here.
 *
 * Scoped to this section on purpose — `.mh-grid--4` is shared with the
 * Facilities, Video and Achievements sections, and `.mh-carousel--4` with the
 * testimonials carousel, so neither may be changed globally.
 */
@media (max-width: 768px) {
  /*
   * `display` and `gap` are restated rather than inherited: the track also
   * carries `.mh-grid`, whose `display: grid` and 28px gap would otherwise break
   * the carousel. A gap would widen the track past the viewport and the
   * `translateX(-100%)` step would no longer land on a slide boundary.
   *
   * The shared carousel rules inset every slide by 12px, which would push the
   * first card out of line with the section heading above it. Pulling the track
   * out by the same amount puts the cards back on the container's edges while
   * still leaving a gutter between them as they slide past. The slide padding is
   * what makes the card come out exactly one container wide, so it must stay.
   */
  .mh-teachers-carousel .mh-carousel__track { display: flex; gap: 0; margin: 0 -12px; }
}
@media (min-width: 769px) {
  /* `visible` so a card's hover shadow is not clipped by the viewport. */
  .mh-teachers-carousel .mh-carousel__viewport { overflow: visible; }
  .mh-teachers-carousel .mh-carousel__track { display: grid; margin: 0; }
  /* Grid items get their gutter from `gap`, not from the carousel's inset. */
  .mh-teachers-carousel .mh-carousel__slide { padding: 0; }
  .mh-teachers-carousel .mh-carousel__controls { display: none; }
}

/* ==========================================================================
   17. Partners
   ========================================================================== */
.mh-partners { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: center; }
.mh-partner {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 20px;
  background: var(--mh-surface); border: 1px solid var(--mh-border); border-radius: var(--mh-radius);
  filter: grayscale(1); opacity: .85; transition: all var(--mh-transition);
}
.mh-partner:hover { filter: none; opacity: 1; box-shadow: var(--mh-shadow); border-color: transparent; transform: translateY(-4px); }
/*
 * A fixed-height logo band keeps every tile the same shape however wide the
 * artwork is. Real logos are letterboxed inside it; the bundled demo
 * placeholders fill it instead (see template-parts/content/card-mitra.php).
 */
.mh-partner__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; }
.mh-partner__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.mh-partner__logo--fill img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--mh-radius-sm); }
.mh-partner__name { font-family: var(--mh-font-heading); font-weight: 700; font-size: .9375rem; color: var(--mh-heading); text-align: center; }

/* ==========================================================================
   18. Downloads
   ========================================================================== */
.mh-download {
  display: flex; gap: 18px; align-items: center;
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius); padding: 20px 22px; transition: all var(--mh-transition);
}
.mh-download:hover { box-shadow: var(--mh-shadow); border-color: transparent; transform: translateY(-3px); }
.mh-download__icon {
  flex: none; width: 52px; height: 52px; border-radius: var(--mh-radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--mh-primary-soft); color: var(--mh-primary);
}
.mh-download__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.mh-download__body { flex: 1; min-width: 0; }
.mh-download__title { font-size: 1rem; margin: 0 0 6px; }
.mh-download__title a { color: var(--mh-heading); }
.mh-download__title a:hover { color: var(--mh-primary); }
.mh-download__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; color: var(--mh-muted); }
/*
 * The base `svg { display: block }` reset makes an icon its own line unless the
 * wrapper is a flex container, which would stack the icon above its label
 * instead of sitting it inline. Every other *__meta row does this; this one
 * was missed.
 */
.mh-download__meta span { display: inline-flex; align-items: center; gap: .4em; }
.mh-download__meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.mh-download__action { flex: none; }

/* ==========================================================================
   19. Post / single content
   ========================================================================== */
.mh-entry { min-width: 0; }
.mh-entry__thumb { border-radius: var(--mh-radius-lg); overflow: hidden; margin-bottom: 30px; }
.mh-entry__thumb img { width: 100%; }
.mh-entry__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--mh-border);
  font-size: .875rem; color: var(--mh-muted);
}
.mh-entry__meta span, .mh-entry__meta a { display: inline-flex; align-items: center; gap: .5em; color: inherit; }
.mh-entry__meta a:hover { color: var(--mh-primary); }
.mh-entry__meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.mh-entry__meta .mh-avatar { width: 30px; height: 30px; border-radius: 50%; }
.mh-entry__content { font-size: 1.0625rem; }
.mh-entry__content > *:first-child { margin-top: 0; }
.mh-entry__content h2, .mh-entry__content h3, .mh-entry__content h4 { margin-top: 1.6em; }
.mh-entry__content ul, .mh-entry__content ol { margin-bottom: 1.4em; }
.mh-entry__content ul li, .mh-entry__content ol li { margin-bottom: .5em; }
.mh-entry__content img { border-radius: var(--mh-radius); }
.mh-entry__content a { text-decoration: underline; text-underline-offset: 3px; }
/*
 * Shortcode blocks are siblings inside post and page content and carry no
 * vertical margin of their own, so a CTA banner and the grid rendered under it
 * would sit flush against each other (0px gap). Give stacked blocks the same
 * rhythm the sections use.
 */
.mh-cta + .mh-shortcode,
.mh-shortcode + .mh-cta,
.mh-shortcode + .mh-shortcode,
.mh-cta + .mh-cta { margin-top: 40px; }
.mh-entry__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.mh-entry__tags a {
  padding: .35em .95em; border-radius: var(--mh-radius-pill);
  background: var(--mh-bg-alt); color: var(--mh-body); font-size: .8125rem; font-weight: 500;
}
.mh-entry__tags a:hover { background: var(--mh-primary); color: #fff; }
.mh-entry__footer { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--mh-border); }

.mh-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.mh-share__label { font-family: var(--mh-font-heading); font-weight: 700; font-size: .875rem; color: var(--mh-heading); margin-right: 6px; }
.mh-share a {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--mh-bg-alt); color: var(--mh-heading); transition: all var(--mh-transition);
}
.mh-share a:hover { color: #fff; transform: translateY(-3px); }
.mh-share a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.mh-share .mh-share--facebook:hover { background: #1877f2; }
.mh-share .mh-share--twitter:hover { background: #111; }
.mh-share .mh-share--whatsapp:hover { background: #25d366; }
.mh-share .mh-share--telegram:hover { background: #229ed9; }
.mh-share .mh-share--linkedin:hover { background: #0a66c2; }
.mh-share .mh-share--email:hover { background: var(--mh-muted); }
.mh-share .mh-share--copy:hover { background: var(--mh-primary); }

.mh-post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.mh-post-nav__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px; border: 1px solid var(--mh-border); border-radius: var(--mh-radius);
  transition: all var(--mh-transition); background: var(--mh-surface);
}
.mh-post-nav__item:hover { border-color: var(--mh-primary); box-shadow: var(--mh-shadow); }
.mh-post-nav__item--next { text-align: right; }
.mh-post-nav__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mh-muted); display: flex; align-items: center; gap: .4em; }
.mh-post-nav__item--next .mh-post-nav__label { justify-content: flex-end; }
.mh-post-nav__title { font-family: var(--mh-font-heading); font-weight: 600; color: var(--mh-heading); font-size: .9375rem; line-height: 1.45; }
.mh-post-nav__item:hover .mh-post-nav__title { color: var(--mh-primary); }

.mh-related { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--mh-border); }
.mh-related__title { font-size: 1.375rem; margin-bottom: 28px; }

/* Comments */
.mh-comments { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--mh-border); }
.mh-comments__title { font-size: 1.25rem; margin-bottom: 26px; }
.mh-comments ol { list-style: none; margin: 0; padding: 0; }
.mh-comments ol ol { padding-left: 34px; margin-top: 22px; }
.mh-comment { margin-bottom: 22px; }
.mh-comment-body {
  background: var(--mh-bg-alt); border-radius: var(--mh-radius); padding: 22px;
  display: flex; gap: 16px;
}
.mh-comment-body .avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; }
.mh-comment-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.mh-comment-author { font-family: var(--mh-font-heading); font-weight: 700; color: var(--mh-heading); }
.mh-comment-date { font-size: .8125rem; color: var(--mh-muted); }
.mh-comment-body .comment-content p:last-child { margin-bottom: 0; }
.mh-comment-reply a { font-size: .8125rem; font-weight: 600; }
.mh-comments .bypostauthor > .mh-comment-body { box-shadow: inset 3px 0 0 var(--mh-primary); }
.mh-comments .children { list-style: none; }
.comment-respond { margin-top: 34px; }
.comment-reply-title { font-size: 1.25rem; }
.comment-form { display: grid; gap: 16px; }
.comment-form label { display: block; font-size: .875rem; font-weight: 600; color: var(--mh-heading); margin-bottom: 6px; }
.comment-form-comment { grid-column: 1 / -1; }
.comment-form p { margin: 0; }
.comment-form .form-submit { margin: 0; }
.comment-notes, .logged-in-as { font-size: .875rem; color: var(--mh-muted); grid-column: 1 / -1; }

/* Forms */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime-local"], textarea, select {
  width: 100%; padding: 0.8em 1.1em;
  background: var(--mh-surface); color: var(--mh-body);
  border: 1px solid var(--mh-border); border-radius: var(--mh-radius-sm);
  font-family: inherit; font-size: .9375rem; line-height: 1.5;
  transition: border-color var(--mh-transition), box-shadow var(--mh-transition);
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--mh-primary);
  box-shadow: 0 0 0 3px rgba(var(--mh-primary-rgb), .14);
}
::placeholder { color: var(--mh-muted); opacity: .8; }

/*
 * Search form, wherever get_search_form() is used — the 404 page and the "no
 * results" state both render it. Without this the input and the submit button
 * stack and the button keeps the browser default chrome. The search widget and
 * the footer override the colours further down.
 */
.search-form { display: flex; gap: 10px; align-items: stretch; }
.search-form input[type="search"] { flex: 1 1 auto; min-width: 0; }
.search-form button {
  flex: none; width: 54px; padding: 0; border: 0; border-radius: var(--mh-radius-sm);
  background: var(--mh-primary); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--mh-transition);
}
.search-form button:hover { background: var(--mh-primary-dark); }
.search-form button:focus-visible { outline: 2px solid var(--mh-primary); outline-offset: 2px; }
.search-form svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.mh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mh-form-grid .mh-form-full { grid-column: 1 / -1; }
.mh-form-field label { display: block; font-size: .875rem; font-weight: 600; color: var(--mh-heading); margin-bottom: 7px; }

/* ==========================================================================
   20. Sidebar & widgets
   ========================================================================== */
.mh-widget {
  background: var(--mh-surface); border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg); padding: 26px; margin-bottom: 28px;
}
.mh-widget:last-child { margin-bottom: 0; }
.mh-widget__title {
  font-size: 1.0625rem; margin: 0 0 20px; padding-bottom: 14px;
  border-bottom: 2px solid var(--mh-border); position: relative;
}
.mh-widget__title::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--mh-primary);
}
.mh-widget ul { list-style: none; margin: 0; padding: 0; }
.mh-widget ul li { padding: 11px 0; border-bottom: 1px solid var(--mh-border); font-size: .9375rem; }
.mh-widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.mh-widget ul li a { color: var(--mh-body); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mh-widget ul li a:hover { color: var(--mh-primary); }
.mh-widget ul li a::before { content: ""; display: none; }
.mh-widget ul.children, .mh-widget ul.sub-menu { padding-left: 14px; margin-top: 8px; }
.mh-widget select { width: 100%; }
.mh-widget .tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-widget .tagcloud a {
  padding: .4em 1em; border-radius: var(--mh-radius-pill); background: var(--mh-bg-alt);
  color: var(--mh-body); font-size: .8125rem !important; border: 1px solid transparent;
}
.mh-widget .tagcloud a:hover { background: var(--mh-primary); color: #fff; }

/* Mini post list widget */
.mh-mini-posts { display: flex; flex-direction: column; gap: 16px; }
.mh-mini-post { display: flex; gap: 14px; align-items: flex-start; }
.mh-mini-post__thumb { flex: none; width: 76px; height: 76px; border-radius: var(--mh-radius-sm); overflow: hidden; background: var(--mh-bg-alt-2); }
.mh-mini-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mh-mini-post__body { min-width: 0; }
.mh-mini-post__title { font-size: .9375rem; margin: 0 0 5px; line-height: 1.4; font-family: var(--mh-font-heading); font-weight: 600; }
.mh-mini-post__title a { color: var(--mh-heading); }
.mh-mini-post__title a:hover { color: var(--mh-primary); }
.mh-mini-post__date { font-size: .75rem; color: var(--mh-muted); display: flex; align-items: center; gap: .4em; }
.mh-mini-post__date svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Announcement widget */
.mh-widget-announce { display: flex; flex-direction: column; gap: 14px; }
.mh-widget-announce__item { display: flex; gap: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--mh-border); }
.mh-widget-announce__item:last-child { border-bottom: 0; padding-bottom: 0; }
.mh-widget-announce__date {
  flex: none; width: 48px; height: 48px; border-radius: var(--mh-radius-sm);
  background: var(--mh-primary-soft); color: var(--mh-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.mh-widget-announce__day { font-family: var(--mh-font-heading); font-weight: 800; font-size: 1.1rem; }
.mh-widget-announce__month { font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.mh-widget-announce__title { font-size: .9375rem; font-weight: 600; font-family: var(--mh-font-heading); line-height: 1.4; margin: 0 0 4px; }
.mh-widget-announce__title a { color: var(--mh-heading); }
.mh-widget-announce__title a:hover { color: var(--mh-primary); }
.mh-widget-announce__meta { font-size: .75rem; color: var(--mh-muted); }

/* Agenda widget */
.mh-widget-agenda__item { display: flex; gap: 13px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--mh-border); }
.mh-widget-agenda__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mh-widget-agenda__date {
  flex: none; width: 48px; text-align: center; border-radius: var(--mh-radius-sm);
  background: var(--mh-secondary); color: #fff; padding: 7px 4px; line-height: 1;
}
.mh-widget-agenda__day { display: block; font-family: var(--mh-font-heading); font-weight: 800; font-size: 1.1rem; }
.mh-widget-agenda__month { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.mh-widget-agenda__title { font-size: .9375rem; font-weight: 600; font-family: var(--mh-font-heading); line-height: 1.4; margin: 0 0 5px; }
.mh-widget-agenda__title a { color: var(--mh-heading); }
.mh-widget-agenda__meta { font-size: .75rem; color: var(--mh-muted); display: flex; flex-direction: column; gap: 3px; }
.mh-widget-agenda__meta span { display: flex; align-items: center; gap: .35em; }
.mh-widget-agenda__meta svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Search widget */
.mh-widget .search-form { display: flex; gap: 8px; }
.mh-widget .search-form input[type="search"] { flex: 1; }
.mh-widget .search-form button {
  flex: none; width: 48px; border: 0; border-radius: var(--mh-radius-sm);
  background: var(--mh-primary); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mh-widget .search-form button:hover { background: var(--mh-primary-dark); }
.mh-widget .search-form svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* CTA widget */
.mh-widget--cta {
  background: linear-gradient(135deg, var(--mh-primary), var(--mh-primary-dark));
  border: 0; color: #fff; text-align: center;
}
.mh-widget--cta .mh-widget__title { color: #fff; border-color: rgba(255,255,255,.25); }
.mh-widget--cta .mh-widget__title::after { background: #fff; }
.mh-widget--cta p { color: rgba(255,255,255,.9); font-size: .9375rem; }
.mh-widget--cta svg { width: 46px; height: 46px; margin: 0 auto 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ==========================================================================
   21. Pagination
   ========================================================================== */
.mh-pagination { margin-top: 52px; display: flex; justify-content: center; }
.mh-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mh-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid var(--mh-border); border-radius: var(--mh-radius-sm);
  background: var(--mh-surface); color: var(--mh-heading);
  font-family: var(--mh-font-heading); font-weight: 600; font-size: .9375rem;
  transition: all var(--mh-transition);
}
.mh-pagination .page-numbers:hover { border-color: var(--mh-primary); color: var(--mh-primary); }
.mh-pagination .page-numbers.current { background: var(--mh-primary); border-color: var(--mh-primary); color: #fff; }
.mh-pagination .page-numbers.dots { border: 0; background: transparent; }
.mh-pagination svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }

.mh-load-more-wrap { text-align: center; margin-top: 46px; }
.mh-load-more.is-loading { opacity: .7; pointer-events: none; }
.mh-load-more__spinner {
  width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: mhSpin .7s linear infinite;
}
@keyframes mhSpin { to { transform: rotate(360deg); } }
.mh-archive__count { font-size: .875rem; color: var(--mh-muted); }

/* Archive toolbar */
.mh-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 20px; margin-bottom: 32px;
  background: var(--mh-bg-alt); border-radius: var(--mh-radius);
}
.mh-toolbar__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-toolbar__filters a {
  padding: .4em 1em; border-radius: var(--mh-radius-pill); font-size: .8125rem; font-weight: 600;
  background: var(--mh-surface); color: var(--mh-body); border: 1px solid var(--mh-border);
}
.mh-toolbar__filters a:hover, .mh-toolbar__filters a.is-active { background: var(--mh-primary); border-color: var(--mh-primary); color: #fff; }

/* ==========================================================================
   22. Footer
   ========================================================================== */
.mh-footer { background: var(--mh-footer-bg); color: var(--mh-footer-text); position: relative; }
.mh-footer a { color: var(--mh-footer-link); }
.mh-footer a:hover { color: var(--mh-footer-link-hover); }
.mh-footer__widgets { padding: 74px 0 50px; }
/*
 * Flex rather than grid. The column count varies — a brand column plus up to
 * four widget columns, and on most sites just the brand — so a fixed
 * `grid-template-columns` cannot step down for every count. The template used
 * to set that value inline, which also outranked the breakpoint rules below, so
 * the footer never stacked at all. Wrapping flex keeps the intended desktop
 * proportions and wraps on its own.
 */
.mh-footer__grid { display: flex; flex-wrap: wrap; gap: 40px; }
.mh-footer__col { flex: 1 1 240px; min-width: 0; }
.mh-footer__col--brand { flex: 1.7 1 300px; }
.mh-footer .mh-widget { background: transparent; border: 0; padding: 0; margin: 0; }
.mh-footer .mh-widget__title { color: var(--mh-footer-heading); border-bottom-color: var(--mh-footer-border); }
.mh-footer .mh-widget__title::after { background: var(--mh-primary-light); }
.mh-footer .mh-widget ul li { border-bottom-color: var(--mh-footer-border); }
.mh-footer .mh-widget ul li a { color: var(--mh-footer-link); }
.mh-footer .mh-widget ul li a:hover { color: var(--mh-footer-link-hover); }
.mh-footer .mh-widget .tagcloud a { background: rgba(255,255,255,.08); color: var(--mh-footer-link); }
.mh-footer .mh-widget .tagcloud a:hover { background: var(--mh-primary); color: #fff; }
.mh-footer .mh-mini-post__title a { color: var(--mh-footer-heading); }
.mh-footer .mh-mini-post__date { color: rgba(255,255,255,.55); }
.mh-footer .mh-widget-announce__item, .mh-footer .mh-widget-agenda__item { border-bottom-color: var(--mh-footer-border); }
.mh-footer .mh-widget-announce__title a, .mh-footer .mh-widget-agenda__title a { color: var(--mh-footer-heading); }
.mh-footer .mh-widget-announce__date { background: rgba(255,255,255,.1); color: var(--mh-primary-light); }
.mh-footer .mh-widget-agenda__date { background: var(--mh-primary); color: #fff; }
.mh-footer .search-form input[type="search"] { background: rgba(255,255,255,.08); border-color: var(--mh-footer-border); color: #fff; }
.mh-footer .search-form input[type="search"]::placeholder { color: rgba(255,255,255,.5); }

.mh-footer__about p { font-size: .9375rem; line-height: 1.8; max-width: 46ch; }
.mh-footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.mh-footer__brand img { max-height: 54px; width: auto; }
.mh-footer__brand-name { font-family: var(--mh-font-heading); font-weight: 800; font-size: 1.35rem; color: var(--mh-footer-heading); }
/* `.mh-footer a` is more specific than the rule above and would recolour the linked brand name. */
.mh-footer a.mh-footer__brand-name { color: var(--mh-footer-heading); }
.mh-footer__contact { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.mh-footer__contact li { display: flex; gap: 11px; align-items: flex-start; font-size: .9375rem; }
.mh-footer__contact svg { width: 16px; height: 16px; fill: none; stroke: var(--mh-primary-light); stroke-width: 2; flex: none; margin-top: 4px; }
.mh-footer__social { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.mh-footer__social a {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: var(--mh-footer-link); transition: all var(--mh-transition);
}
.mh-footer__social a:hover { background: var(--mh-primary); color: #fff; transform: translateY(-3px); }
.mh-footer__social svg { width: 15px; height: 15px; fill: none; stroke: currentColor; }

.mh-copyright { background: var(--mh-copyright-bg); color: var(--mh-copyright-text); font-size: .875rem; padding: 20px 0; }
.mh-copyright__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.mh-copyright a { color: var(--mh-footer-link); }
.mh-copyright a:hover { color: #fff; }
.mh-copyright__menu ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   23. Scroll to top & splash screen
   ========================================================================== */
.mh-scroll-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 900;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--mh-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--mh-shadow);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: all var(--mh-transition);
}
.mh-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.mh-scroll-top:hover { background: var(--mh-primary-dark); transform: translateY(-3px); }
.mh-scroll-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.mh-scroll-top--left { right: auto; left: 26px; }
.mh-scroll-top--progress { background: var(--mh-secondary); }

.mh-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: var(--mh-secondary); color: #fff;
  transition: opacity .5s ease, visibility .5s ease;
}
.mh-splash.is-hidden { opacity: 0; visibility: hidden; }
.mh-splash__logo { max-height: 90px; width: auto; animation: mhPulseIn 1.1s ease; }
.mh-splash__name { font-family: var(--mh-font-heading); font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
@keyframes mhPulseIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
.mh-splash__loader { display: flex; gap: 8px; }
.mh-splash__loader span {
  width: 11px; height: 11px; border-radius: 50%; background: var(--mh-primary-light);
  animation: mhBounce 1.1s infinite ease-in-out both;
}
.mh-splash__loader span:nth-child(2) { animation-delay: .16s; }
.mh-splash__loader span:nth-child(3) { animation-delay: .32s; }
@keyframes mhBounce { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.mh-splash__bar { width: 200px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.mh-splash__bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: var(--mh-primary-light); animation: mhSlideBar 1.3s infinite ease-in-out; }
@keyframes mhSlideBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }

/* ==========================================================================
   24. 404 / empty states
   ========================================================================== */
.mh-404 {
  text-align: center;
  padding: 64px 40px 60px;
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow);
}
/*
 * The number is a display element above the copy, not a watermark behind it.
 * The old rule gave it a negative bottom margin, which pulled the heading into
 * the digits so the two collided at every viewport width. The gradient fill is
 * behind an @supports guard so the number still reads if background-clip:text
 * is unavailable.
 */
.mh-404__code {
  display: block;
  font-family: var(--mh-font-heading); font-size: clamp(4.5rem, 12vw, 7.5rem); font-weight: 800;
  line-height: 1; letter-spacing: -.05em; margin-bottom: 20px;
  color: var(--mh-primary);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .mh-404__code {
    background: linear-gradient(135deg, var(--mh-primary) 0%, var(--mh-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.mh-404__title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 12px; }
.mh-404__text { max-width: 560px; margin: 0 auto; color: var(--mh-muted); }
.mh-404__search { max-width: 520px; margin: 30px auto 0; }
.mh-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.mh-404__recent { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--mh-border); }
.mh-empty { text-align: center; padding: 60px 24px; background: var(--mh-bg-alt); border-radius: var(--mh-radius-lg); }
.mh-empty svg { width: 60px; height: 60px; margin: 0 auto 20px; fill: none; stroke: var(--mh-muted); stroke-width: 1.4; opacity: .55; }
.mh-empty__title { font-size: 1.25rem; margin-bottom: 10px; }
.mh-empty p { color: var(--mh-muted); }

/* ==========================================================================
   25. Misc components
   ========================================================================== */
.mh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mh-stat { text-align: center; padding: 30px 20px; border-radius: var(--mh-radius-lg); background: var(--mh-surface); border: 1px solid var(--mh-border); }
.mh-stat__icon { width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mh-primary-soft); color: var(--mh-primary); }
.mh-stat__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.mh-stat__value { font-family: var(--mh-font-heading); font-size: 2.25rem; font-weight: 800; color: var(--mh-heading); line-height: 1; }
.mh-stat__label { font-size: .875rem; color: var(--mh-muted); margin-top: 8px; }
.mh-section--primary .mh-stat, .mh-section--dark .mh-stat { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.mh-section--primary .mh-stat__value, .mh-section--dark .mh-stat__value { color: #fff; }
.mh-section--primary .mh-stat__label, .mh-section--dark .mh-stat__label { color: rgba(255,255,255,.72); }
.mh-section--primary .mh-stat__icon, .mh-section--dark .mh-stat__icon { background: rgba(255,255,255,.14); color: #fff; }

.mh-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--mh-primary) 0%, var(--mh-primary-dark) 100%);
  border-radius: var(--mh-radius-lg); padding: 56px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
}
.mh-cta::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px;
  border-radius: 50%; background: rgba(255,255,255,.09);
}
.mh-cta::after {
  content: ""; position: absolute; right: 80px; bottom: -100px; width: 200px; height: 200px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}
.mh-cta__body { position: relative; z-index: 2; max-width: 620px; }
.mh-cta__title { color: #fff; margin: 0 0 10px; }
.mh-cta__text { color: rgba(255,255,255,.88); margin: 0; }
.mh-cta__actions { position: relative; z-index: 2; display: flex; gap: 14px; flex-wrap: wrap; }

.mh-tabs { margin-bottom: 32px; }
.mh-tabs__nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.mh-tabs__nav button {
  padding: .55em 1.4em; border-radius: var(--mh-radius-pill); cursor: pointer;
  background: var(--mh-bg-alt); border: 1px solid var(--mh-border); color: var(--mh-body);
  font-family: var(--mh-font-heading); font-weight: 600; font-size: .875rem;
  transition: all var(--mh-transition);
}
.mh-tabs__nav button:hover { border-color: var(--mh-primary); color: var(--mh-primary); }
.mh-tabs__nav button.is-active { background: var(--mh-primary); border-color: var(--mh-primary); color: #fff; }
.mh-tabs__panel { display: none; }
.mh-tabs__panel.is-active { display: block; animation: mhFadeIn .4s ease; }

.mh-info-box {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 24px; border-radius: var(--mh-radius);
  background: var(--mh-primary-soft); border-left: 4px solid var(--mh-primary);
}
.mh-info-box svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--mh-primary); stroke-width: 2; margin-top: 2px; }
.mh-info-box p:last-child { margin-bottom: 0; }

.mh-meta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mh-meta-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; }
.mh-meta-list svg { width: 17px; height: 17px; fill: none; stroke: var(--mh-primary); stroke-width: 2; flex: none; margin-top: 3px; }
/*
 * Label and value share a row: the label keeps a fixed column so values line up
 * down the list, and wraps below the label on narrow screens.
 * The inner span must be a flex container — `min-width` has no effect on a
 * non-replaced inline element, so a bare <strong> next to the value would
 * otherwise collapse into "AddressJl. Pendidikan No. 1...".
 */
.mh-meta-list li > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1 1 auto; min-width: 0; }
.mh-meta-list strong { color: var(--mh-heading); font-weight: 600; flex: 0 0 auto; min-width: 110px; }

.mh-progress { height: 7px; border-radius: 7px; background: var(--mh-bg-alt-2); overflow: hidden; }
.mh-progress span { display: block; height: 100%; background: var(--mh-primary); border-radius: 7px; }

/* Map embed + empty-state hint shown to editors only */
.mh-map { border-radius: var(--mh-radius-lg); overflow: hidden; }
.mh-map--empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 32px; border-radius: var(--mh-radius-lg);
  background: var(--mh-bg-alt); border: 2px dashed var(--mh-border);
  color: var(--mh-muted); font-size: .9375rem; line-height: 1.6;
}

/* Sticky sidebar helper */
.mh-sticky { position: sticky; top: 110px; }

/* Placeholder that reserves the space of a stuck header */
.mh-header-placeholder { width: 100%; }

/* Vertical post list (blog "list" view) */
.mh-post-list { display: flex; flex-direction: column; gap: 28px; }

/* Tab panels used by the teachers directory template */
.mh-tab-item { min-width: 0; }
.mh-tab-item[hidden] { display: none; }

/* Blank canvas page template */
.mh-blank-canvas { background: var(--mh-bg); }
.mh-blank-canvas__main { min-height: 100vh; }

/* Front-end block palette utilities (mirror the editor palette) */
.has-mahad-primary-color { color: var(--mh-primary); }
.has-mahad-primary-background-color { background-color: var(--mh-primary); }
.has-mahad-primary-dark-color { color: var(--mh-primary-dark); }
.has-mahad-primary-dark-background-color { background-color: var(--mh-primary-dark); }
.has-mahad-secondary-color { color: var(--mh-secondary); }
.has-mahad-secondary-background-color { background-color: var(--mh-secondary); }
.has-mahad-accent-color { color: var(--mh-accent); }
.has-mahad-accent-background-color { background-color: var(--mh-accent); }
.has-mahad-heading-color { color: var(--mh-heading); }
.has-mahad-heading-background-color { background-color: var(--mh-heading); }
.has-mahad-body-color { color: var(--mh-body); }
.has-mahad-body-background-color { background-color: var(--mh-body); }
.has-mahad-muted-color { color: var(--mh-muted); }
.has-mahad-muted-background-color { background-color: var(--mh-muted); }
.has-mahad-bg-alt-color { color: var(--mh-bg-alt); }
.has-mahad-bg-alt-background-color { background-color: var(--mh-bg-alt); }
.has-mahad-white-color { color: #fff; }
.has-mahad-white-background-color { background-color: #fff; }
.has-mahad-black-color { color: #0b1220; }
.has-mahad-black-background-color { background-color: #0b1220; }

/* Screen-reader only helper used by the contact form honeypot */
.mh-form-field[aria-hidden="true"] { position: absolute !important; left: -9999px !important; }


/* Animations on scroll */
.mh-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.mh-reveal.is-visible { opacity: 1; transform: translateY(0); }
.mh-reveal--delay-1 { transition-delay: .1s; }
.mh-reveal--delay-2 { transition-delay: .2s; }
.mh-reveal--delay-3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .mh-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   26. Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --mh-fs-h1: 40px; --mh-fs-h2: 30px; --mh-section-pad: 70px; }
  .mh-layout { gap: 34px; }
  .mh-layout__side { flex-basis: 300px; max-width: 300px; }
  .mh-grid--5, .mh-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mh-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  :root { --mh-fs-h1: 34px; --mh-fs-h2: 27px; --mh-fs-h3: 22px; --mh-section-pad: 58px; }

  .mh-nav-toggle { display: inline-flex; }
  .mh-nav { display: none; }
  .mh-header__inner { min-height: 70px; }
  .mh-header__actions { gap: 8px; }

  .mh-layout { flex-direction: column; padding: 48px 0; gap: 44px; }
  .mh-layout__side { flex: 1 1 auto; max-width: 100%; width: 100%; }
  .mh-layout--left .mh-layout__side { order: 0; }
  .mh-sticky { position: static; }

  .mh-grid--3, .mh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-features { margin-top: -50px; }
  .mh-slide { min-height: 460px; }
  .mh-slide__inner { padding: 70px 0; }
  .mh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-carousel--3 .mh-carousel__slide, .mh-carousel--4 .mh-carousel__slide { flex-basis: 50%; }
  .mh-cta { padding: 44px 36px; }
  .mh-footer__grid { gap: 34px; }
  .mh-footer__col, .mh-footer__col--brand { flex: 1 1 calc(50% - 17px); }
  /* Two tracks only make sense with something to put in the second one. */
  .mh-footer__grid > .mh-footer__col:only-child { flex-basis: 100%; }
  .mh-slider__nav { width: 44px; height: 44px; }
  .mh-slider__nav--prev { left: 14px; }
  .mh-slider__nav--next { right: 14px; }
  .mh-teacher-profile__photo { flex-basis: 240px; }
}

@media (max-width: 782px) {
  .admin-bar .mh-header.is-stuck { top: 46px; }
  .mh-topbar__contact .mh-topbar__hide-sm { display: none; }
  .mh-topbar__menu { display: none; }
}

@media (max-width: 768px) {
  :root { --mh-gutter: 18px; --mh-fs-h1: 29px; --mh-fs-h2: 24px; --mh-fs-h3: 20px; --mh-section-pad: 50px; }

  .mh-grid, .mh-grid--2, .mh-grid--3, .mh-grid--4, .mh-grid--5, .mh-grid--6 { grid-template-columns: 1fr; }
  .mh-grid--sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mh-features__grid { grid-template-columns: 1fr; }
  .mh-features { margin-top: 0; padding-top: 40px; }
  .mh-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
  .mh-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-carousel--2 .mh-carousel__slide, .mh-carousel--3 .mh-carousel__slide, .mh-carousel--4 .mh-carousel__slide { flex-basis: 100%; }
  .mh-footer__grid { gap: 30px; }
  .mh-footer__col, .mh-footer__col--brand { flex-basis: 100%; }
  .mh-footer__widgets { padding: 50px 0 34px; }

  .mh-section__head--split { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mh-card--horizontal { flex-direction: column; }
  .mh-card--horizontal .mh-card__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .mh-post-nav { grid-template-columns: 1fr; }
  .mh-post-nav__item--next { text-align: left; }
  .mh-post-nav__item--next .mh-post-nav__label { justify-content: flex-start; }
  .mh-form-grid { grid-template-columns: 1fr; }
  .mh-cta { padding: 34px 24px; flex-direction: column; align-items: flex-start; }
  .mh-announce { flex-direction: column; gap: 14px; }
  .mh-announce__date { width: 100%; border-right: 0; border-bottom: 1px solid var(--mh-border); padding: 0 0 12px; display: flex; align-items: baseline; gap: 8px; text-align: left; }
  .mh-announce__day { font-size: 1.2rem; }
  .mh-announce__month { margin-top: 0; }
  .mh-agenda { flex-direction: column; }
  .mh-agenda__date { width: 100%; flex-direction: row; gap: 10px; padding: 12px; }
  .mh-agenda__day { font-size: 1.35rem; }
  .mh-agenda__body { padding: 18px 20px; }
  .mh-slide { min-height: 400px; }
  .mh-slide__inner { padding: 56px 0; }
  .mh-slider__nav { display: none; }
  .mh-copyright__inner { flex-direction: column; text-align: center; }
  .mh-comment-body { flex-direction: column; }
  .mh-comments ol ol { padding-left: 0; }
  .mh-teacher-profile { flex-direction: column; }
  .mh-teacher-profile__photo { flex: 1 1 auto; width: 100%; max-width: 320px; }
  .mh-lightbox { padding: 16px; }
  .mh-lightbox__nav { width: 42px; height: 42px; }
  .mh-lightbox__nav--prev { left: 8px; }
  .mh-lightbox__nav--next { right: 8px; }
  .mh-scroll-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
  .mh-404 { padding: 44px 24px 42px; }
  .mh-404__recent { margin-top: 46px; padding-top: 36px; }
}

@media (max-width: 480px) {
  .mh-grid--sm-2 { grid-template-columns: 1fr !important; }
  /*
   * No .mh-gallery override here on purpose. It used to drop to a single column,
   * which turned the eight-photo Activity Gallery into a 3,300px scroll. Two
   * columns already work at the 481–768px step, so the phones now inherit that:
   * the wide tiles keep spanning both columns and the mosaic rhythm survives.
   */
  .mh-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-stats { grid-template-columns: 1fr; }
  .mh-brand__title { font-size: 1.2rem; }
  .mh-header__actions .mh-header-cta { display: none; }
  .mh-404 { padding: 36px 18px 34px; }
  .mh-404__actions { flex-direction: column; }
  .mh-404__actions .mh-btn { width: 100%; }
}

/* ==========================================================================
   27. Print
   ========================================================================== */
@media print {
  .mh-header, .mh-topbar, .mh-footer, .mh-scroll-top, .mh-splash, .mh-layout__side, .mh-share, .mh-post-nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; }
  .mh-layout { display: block; padding: 0; }
  .mh-container { max-width: none; padding: 0; }
}