/*
Theme Name: Madeleine's Preschool Blocks
Theme URI: https://madeleinespreschool.com
Author: Monetize Consulting W.L.L.
Author URI: https://monetizebh.com
Description: Native block theme for Madeleine's Preschool (Saar campus, Manama campus and the madeleinespreschool.com location picker) - a 1:1 rebuild of the 2023 Elementor site without page-builder plugins. One theme for all three installs; the install is chosen by the option mps_campus.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: madeleines-blocks
*/

/* ================================================================ fonts (self-hosted, latin) */
@font-face { font-family: "Catamaran"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(assets/fonts/catamaran-latin.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/poppins-400.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/poppins-500.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/poppins-600.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/poppins-700.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/poppins-800.woff2) format("woff2"); }

:root {
	--mps-blue: #0070af;
	--mps-red: #db4252;
	--mps-red2: #f1454e;
	--mps-yellow: #fbad18;
	--mps-yellow2: #ffc95a;
	--mps-green: #179b67;
	--mps-cream: #fcf9f4;
	--mps-text: #383838;
	--mps-grey: #939393;
	--mps-pop: "Poppins", sans-serif;
	--mps-cat: "Catamaran", sans-serif;
}

/* ================================================================ base (Astra + Elementor kit defaults of the old site) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--mps-grey); font-family: var(--mps-cat); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--mps-yellow2); text-decoration: none; transition: color .2s; }
a:hover { color: var(--mps-red2); }
p { margin: 0 0 1.75em; }
ul, ol { margin: 0 0 1.5em 3em; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--mps-cat); color: var(--mps-red2); margin: 0 0 20px; line-height: 1; }
h1 { font-size: 72px; font-weight: 800; line-height: 1.4; }
h2 { font-size: 48px; font-weight: 800; line-height: 1.3; }
h3 { font-size: 32px; font-weight: 700; line-height: 1.3; }
h4 { font-size: 24px; font-weight: 700; line-height: 1.2; }
h5 { font-size: 24px; font-weight: 700; line-height: 1.2; }
h6 { font-size: 20px; font-weight: 700; line-height: 1.25; }
@media (max-width: 767px) { h1 { font-size: 48px; } h2 { font-size: 32px; } }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
:focus-visible { outline: 2px solid var(--mps-blue); outline-offset: 2px; }
.wp-site-blocks, .mps-main, .entry-content, .wp-block-post-content { margin: 0; padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-group { margin: 0; }
.alignfull { width: 100%; max-width: none; }

/* ================================================================ Elementor layout model (generated pages) */
.mps-sec, .mps-isec { position: relative; }
.mps-row { --g: 10px; display: flex; flex-wrap: nowrap; position: relative; max-width: 1140px; margin: 0 auto; width: 100%; }
.mps-isec > .mps-row { max-width: none; }
.mps-col { position: relative; display: flex; min-height: 1px; width: 100%; }
.mps-cw { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; width: 100%; padding: var(--g); }
.mps-cw > * { width: 100%; }
.mps-cw > .mps-w, .mps-ctr > .mps-w, .mps-ctr-in > .mps-w { margin: 0; }
.mps-ov { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.mps-ov + .mps-row, .mps-ov ~ * { position: relative; }
@media (max-width: 1024px) { .mps-row { flex-wrap: wrap; } }
@media (max-width: 767px) { .mps-col { width: 100%; } }

/* flexbox containers */
.mps-ctr { --w: 100%; display: flex; flex-direction: column; gap: 20px; padding: 10px; position: relative; }
.mps-ctr-b { display: block; }
.mps-ctr-b > .mps-ctr-in { display: flex; flex-direction: column; gap: 20px; max-width: 1140px; width: 100%; margin: 0 auto; }
.mps-ctr .mps-ctr { width: var(--w); flex: 0 1 auto; max-width: 100%; }
.mps-ctr > .mps-w, .mps-ctr-in > .mps-w { max-width: 100%; }
/* Elementor: on phones every flex container wraps and nested containers take the full width */
@media (max-width: 767px) { .mps-ctr, .mps-ctr-b > .mps-ctr-in { flex-wrap: wrap; } .mps-ctr .mps-ctr { --w: 100%; width: 100%; } }

/* hide per device (Elementor breakpoints: phones <= 767, tablets 768-1024) */
@media (min-width: 1025px) { .mps-hide-d { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .mps-hide-t { display: none !important; } }
@media (max-width: 767px) { .mps-hide-m { display: none !important; } }

/* ================================================================ widgets */
.mps-h { margin: 0; padding: 0; }
.mps-h a { color: inherit; }
.mps-text ul, .mps-text ol { margin: 0 0 1.5em 3em; }
.mps-text a { color: inherit; text-decoration: underline; }
.mps-text .mps-empty { min-height: 1em; }
/* WordPress' flow layout zeroes the last child's bottom margin; Elementor kept it (1.75em after every paragraph) */
:root .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; } /* no block-gap spacing: the old layout had none */
.mps-w.mps-text > p, .mps-jb-desc.wp-block-group > p { margin-block-end: 1.75em; }
.mps-w.mps-text > ul, .mps-w.mps-text > ol { margin-block-end: 1.5em; margin-inline-start: 3em; }
.mps-w.mps-text > p.mps-raw { margin: 0; }
.mps-img { text-align: center; margin: 0; line-height: 0; }
.mps-img img { display: inline-block; }
.mps-img a { display: inline-block; vertical-align: top; }
.wp-block-image.mps-img { margin-bottom: 0; }
.mps-spacer { height: 50px; }

/* icon box (Elementor) */
.mps-ibox { display: flex; gap: var(--ib-gap, 15px); align-items: flex-start; }
.mps-ibox.mps-ib-top { flex-direction: column; align-items: center; text-align: center; }
.mps-ibox .mps-ib-ico { width: 50px; height: 50px; flex: 0 0 auto; transition: color .3s, fill .3s; }
.mps-ib-body { flex: 1 1 auto; }
.mps-ib-title { margin: 0; }
.mps-ib-title:empty { display: none; }
.mps-ib-desc { margin: 0; }
@media (max-width: 767px) { .mps-ibox.mps-ib-left, .mps-ibox.mps-ib-right { flex-direction: column; align-items: center; text-align: center; } }

/* icon list */
.mps-ilist { list-style: none; margin: 0; padding: 0; }
.mps-ilist li { display: flex; align-items: center; margin: 0; padding: 0; }
.mps-ilist li + li { margin-top: calc(var(--il-gap, 0px) / 1); }
.mps-ilist a { display: inline-flex; align-items: center; color: inherit; }
.mps-ilist .mps-il-ico { width: 14px; height: 14px; flex: 0 0 auto; margin-right: 8px; }
.mps-il-text { transition: color .3s; }
.mps-ilist.mps-il-inline { display: flex; flex-wrap: wrap; gap: var(--il-gap, 10px); }
.mps-ilist.mps-il-inline li + li { margin-top: 0; }

/* buttons (Elementor kit: Catamaran 16 white on red, radius 30, padding 20 38) */
.mps-btns { display: flex; margin: 0; }
.mps-btns .wp-block-button { margin: 0; }
.mps-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mps-cat); font-size: 16px; font-weight: 400; line-height: 1; color: #fff; background-color: var(--mps-red2); border-radius: 30px; padding: 20px 38px; text-decoration: none; transition: all .3s; border: 0; }
.mps-btn .wp-block-button__link:hover { color: #fff; }
.mps-btn .mps-btn-ico { width: 1em; height: 1em; }

/* divider (line / line with text) */
.mps-divider { display: flex; align-items: center; gap: 10px; width: 100%; padding: var(--dv-gap, 15px) 0; line-height: 1; }
.mps-divider .mps-dv { display: block; flex: 1 1 auto; border-top: var(--dv-w, 1px) solid var(--dv-c, #000); }
.mps-divider.mps-dv-text-left .mps-dv-l { display: none; }
.mps-divider.mps-dv-text-right .mps-dv-r { display: none; }
.mps-dv-text { flex: 0 0 auto; line-height: 1; }

/* single icon */
.mps-icon { line-height: 26.4px; }
.mps-icon .mps-icon-svg { vertical-align: baseline; }
.mps-icon .mps-icon-svg { width: 50px; height: 50px; display: inline-block; }
.mps-icon a { color: inherit; display: inline-block; }

/* social squares */
.mps-social { display: flex; flex-wrap: wrap; gap: var(--so-gap, 5px); }
.mps-social.mps-so-left { justify-content: flex-start; }
.mps-social.mps-so-center { justify-content: center; }
.mps-social.mps-so-right { justify-content: flex-end; }
.mps-so { display: inline-flex; align-items: center; justify-content: center; background: var(--so-bg, #69727d); color: var(--so-fg, #fff); border-radius: var(--so-r, 10%); padding: var(--so-pad, .5em); font-size: var(--so-size, 25px); line-height: 1; transition: background .3s, transform .3s; }
.mps-so .mps-i { width: 1em; height: 1em; }
.mps-so:hover { background: var(--so-hbg, var(--so-bg)); color: var(--so-fg, #fff); transform: scale(.9); }

/* video + map embeds */
.mps-video { position: relative; flex-shrink: 0; height: 0; padding-bottom: 56.25%; background: #000; }
.mps-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mps-map iframe { display: block; width: 100%; height: 300px; border: 0; }

/* image carousel (Elementor image-carousel: 1 per view, slide 0.5 s) */
.mps-carousel { position: relative; overflow: hidden; }
.mps-carousel .mps-track { display: flex; flex-wrap: nowrap; will-change: transform; }
.mps-carousel .mps-track > * { flex: 0 0 100%; width: 100%; margin: 0; }
.mps-carousel .mps-slide img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; } /* natural size, centred (as the old swiper) */

/* jkit icon box cards ("What is Montessori?", staff names) */
.mps-jbox { display: flex; flex-direction: column; position: relative; transition: background-color .4s, box-shadow .4s; border-radius: 10px; }
.mps-jb-icowrap { display: flex; align-items: center; justify-content: center; line-height: 1; margin-left: auto; margin-right: auto; transition: transform .3s; }
.mps-jb-icowrap .mps-i { display: block; }
.mps-jbox:hover .mps-jb-icowrap { transform: translateY(-6px); }
.mps-jb-ico { width: 40px; height: 40px; }
.mps-jb-title { margin: 0; line-height: 1; }
.mps-jb-title a { color: inherit; }
.mps-jb-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mps-jb-desc p:last-child { margin-bottom: 0; }

/* staff photos (jkit team) */
.mps-team { margin: 0; }
.mps-team img { display: block; width: 100%; height: auto; }

/* testimonials (jkit / tiny-slider: 1 per view, 0.3 s) */
.mps-testimonials { overflow: hidden; position: relative; }
.mps-ts-track { display: flex; transition: transform .3s ease; }
.mps-ts-slide { flex: 0 0 calc(100% / var(--per, 1)); padding: 15px 10px; }
.mps-ts-card { background: #fff; border-radius: 5px; box-shadow: 0 3px 15px rgba(0,0,0,.16); padding: 40px 80px; text-align: center; }
.mps-ts-text { font-family: var(--mps-pop); font-size: 17px; line-height: 35px; color: var(--mps-text); margin: 0 0 10px; }
.mps-ts-name { font-family: var(--mps-pop); font-size: 15px; font-weight: 600; color: var(--mps-red); margin: 0; }
.mps-ts-role { margin: 0; color: var(--mps-grey); }
.mps-ts-dots { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.mps-ts-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--mps-red); cursor: pointer; }
.mps-ts-dot.is-active { background: var(--mps-blue); }

/* photo gallery (3 columns, overlay #ffc95a 0.7 on hover, lightbox) */
.mps-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.mps-gal-item { position: relative; display: block; height: var(--gal-h, 400px); overflow: hidden; margin: 15px; border-radius: 20px; }
.mps-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.mps-gal-ov { position: absolute; inset: 0; background: #ffc95a; opacity: 0; transition: opacity .4s; }
.mps-gal-item:hover .mps-gal-ov, .mps-gal-item:focus-visible .mps-gal-ov { opacity: .7; }
.mps-gal-more { display: none; }
.mps-gal-loadmore { text-align: center; margin-top: 30px; }
.mps-gal-btn { font-family: var(--mps-pop); font-size: 15px; font-weight: 500; color: #fff; background: var(--mps-red); border: 0; border-radius: 8px; padding: 16px 38px; cursor: pointer; transition: background .3s; }
.mps-gal-btn:hover { background: var(--mps-yellow); }
@media (max-width: 1024px) { .mps-gal-item { height: 260px; margin: 10px; } }
@media (max-width: 767px) { .mps-gal-item { height: 118px; margin: 15px; } }

/* video button (About Us) */
.mps-vbtn-wrap { line-height: 0; }
/* the old About/Our Story play button sat 40px above the photo's bottom-left corner (its offset relied on the 256px eyebrow gap, which is not copied) */
.mps-cw > .mps-vbtn-wrap { z-index: 5; }
@media (min-width: 1025px) { .mps-page-about-us .mps-cw > .mps-vbtn-wrap, .mps-page-our-story .mps-cw > .mps-vbtn-wrap { top: auto !important; bottom: 60px; } }
.mps-vbtn { --s: var(--vb-size, 70px); display: inline-flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--vb-bg, var(--mps-red2)); color: #fff; box-shadow: 0 0 0 0 var(--vb-bg, var(--mps-red2)); animation: mps-glow 2s infinite; }
.mps-vbtn .mps-i { width: 28px; height: 28px; margin-left: 4px; }
.mps-vbtn:hover { color: #fff; }
@keyframes mps-glow { 0% { box-shadow: 0 0 0 0 rgba(241,69,78,.6); } 70% { box-shadow: 0 0 0 18px rgba(241,69,78,0); } 100% { box-shadow: 0 0 0 0 rgba(241,69,78,0); } }

/* modal: lightbox + video popup */
.mps-modal-open { overflow: hidden; }
.mps-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 50px 15px; }
.mps-modal-x { position: absolute; top: 10px; right: 15px; width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; z-index: 2; }
.mps-lb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mps-lb img { max-width: calc(100% - 120px); max-height: 100%; object-fit: contain; }
.mps-lb-count { position: fixed; top: 18px; left: 20px; color: #fff; font-size: 14px; font-family: var(--mps-pop); }
.mps-lb-prev, .mps-lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 70px; border: 0; background: none; color: #fff; font-size: 54px; cursor: pointer; }
.mps-lb-prev { left: 0; }
.mps-lb-next { right: 0; }
.mps-vpop { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; }
.mps-vpop iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) { .mps-lb img { max-width: 100%; } }

/* entrance animations (Elementor animate.css subset; hidden only when JS runs) */
.mps-js .mps-anim:not(.is-in) { opacity: 0; }
.mps-anim.is-in { animation-duration: 1.25s; animation-fill-mode: both; }
.mps-anim.mps-slow.is-in { animation-duration: 2s; }
.mps-anim.mps-fast.is-in { animation-duration: .75s; }
.mps-a-fadeIn.is-in { animation-name: mps-fadeIn; }
.mps-a-fadeInUp.is-in { animation-name: mps-fadeInUp; }
.mps-a-fadeInDown.is-in { animation-name: mps-fadeInDown; }
.mps-a-fadeInLeft.is-in { animation-name: mps-fadeInLeft; }
.mps-a-fadeInRight.is-in { animation-name: mps-fadeInRight; }
.mps-a-zoomIn.is-in { animation-name: mps-zoomIn; }
.mps-d-200.is-in { animation-delay: .2s; } .mps-d-300.is-in { animation-delay: .3s; } .mps-d-400.is-in { animation-delay: .4s; }
.mps-d-500.is-in { animation-delay: .5s; } .mps-d-600.is-in { animation-delay: .6s; } .mps-d-800.is-in { animation-delay: .8s; }
@keyframes mps-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mps-fadeInUp { from { opacity: 0; transform: translate3d(0,100%,0); } to { opacity: 1; transform: none; } }
@keyframes mps-fadeInDown { from { opacity: 0; transform: translate3d(0,-100%,0); } to { opacity: 1; transform: none; } }
@keyframes mps-fadeInLeft { from { opacity: 0; transform: translate3d(-100%,0,0); } to { opacity: 1; transform: none; } }
@keyframes mps-fadeInRight { from { opacity: 0; transform: translate3d(100%,0,0); } to { opacity: 1; transform: none; } }
@keyframes mps-zoomIn { from { opacity: 0; transform: scale3d(.3,.3,.3); } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mps-js .mps-anim:not(.is-in) { opacity: 1; } .mps-anim.is-in { animation: none; } .mps-vbtn { animation: none; } }

/* inline SVG icons */
.mps-i { display: inline-block; width: 1em; height: 1em; vertical-align: middle; fill: currentColor; }

/* ================================================================ header */
.mps-site-header { position: relative; z-index: 20; }
.mps-header { position: relative; }
.mps-hd { padding: 20px 0 15px; position: relative; z-index: 1; }
.mps-hcard { display: flex; align-items: center; max-width: 1195px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 15px 20px; min-height: 102px; }
.mps-logo { display: block; flex: 0 0 auto; line-height: 0; }
.mps-logo img { width: 208px; height: auto; }
.mps-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.mps-nav-list { display: flex; list-style: none; margin: 0; padding: 0; }
.mps-nav-item { position: relative; margin: 0; }
.mps-nav-link { display: flex; align-items: center; font-family: var(--mps-pop); font-size: 15px; font-weight: 600; line-height: 26px; color: var(--mps-blue); padding: 0 35px 0 0; transition: color .4s; }
.mps-nav .mps-nav-chev { width: 15px; height: 15px; margin-left: 5px; }
.mps-nav-link:hover, .mps-nav-item.is-current > .mps-nav-link, .mps-nav-item:hover > .mps-nav-link { color: var(--mps-red); }
.mps-nav-link:focus { outline: none; }
.mps-nav-link:focus-visible { outline: 2px solid var(--mps-red); outline-offset: 2px; }
.mps-sub { position: absolute; left: 0; top: 100%; width: 220px; list-style: none; margin: 0; padding: 10px 0; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(45,45,45,.2); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; z-index: 30; }
.mps-nav .has-sub:hover > .mps-sub, .mps-nav .has-sub.is-open > .mps-sub, .mps-nav .has-sub:focus-within > .mps-sub { opacity: 1; visibility: visible; }
.mps-nav .has-sub.is-closed > .mps-sub { opacity: 0; visibility: hidden; }
.mps-sub-item { margin: 0; }
.mps-sub-item a { display: block; font-family: var(--mps-pop); font-size: 15px; font-weight: 600; line-height: 26px; color: var(--mps-blue); padding: 10px 10px 10px 20px; transition: color .4s; }
.mps-sub-item a:hover, .mps-sub-item.is-current a { color: var(--mps-red); }
.mps-apply { flex: 0 0 auto; margin: 0 5px 0 6px; display: inline-block; font-family: var(--mps-pop); font-size: 15px; font-weight: 500; line-height: 15px; color: #fff; background: var(--mps-red); border-radius: 8px; padding: 18px 38px; transition: all .3s; }
.mps-apply:hover, .mps-apply:focus { color: #fff; }
.mps-burger { display: none; border: 0; background: none; padding: 0 10px 0 0; cursor: pointer; line-height: 0; border-radius: 30px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.mps-burger .mps-i { width: 30px; height: 30px; }
.mps-burger--grey { color: #575a5f; }
.mps-burger--white { color: #fff; }
.mps-hm { display: none; }

/* slide-in menu (from the left, 360px, 0.6 s, no dim layer) */
.mps-panel { position: fixed; top: 0; left: -360px; width: 360px; max-width: 100%; height: 100%; background: #fff; z-index: 1000; overflow-y: auto; transition: left .6s cubic-bezier(.6,.1,.68,.53), visibility 0s .6s; visibility: hidden; }
.mps-panel.is-open { left: 0; visibility: visible; transition: left .6s cubic-bezier(.6,.1,.68,.53), visibility 0s; }
.mps-panel-top { position: relative; padding: 30px 20px 30px; }
.mps-panel-top img { width: 240px; height: auto; }
.mps-close { position: absolute; top: 22px; right: 12px; width: 45px; height: 27px; border: 0; background: none; color: var(--mps-blue); cursor: pointer; padding: 0; line-height: 0; }
.mps-close .mps-i { width: 26px; height: 26px; }
.mps-mnav .mps-nav-list { display: block; }
.mps-mnav .mps-nav-link { justify-content: space-between; padding: 0 20px 10px; line-height: 26px; }
.mps-mnav .mps-nav-chev { width: 15px; height: 15px; transition: transform .3s; }
.mps-mnav .has-sub.is-open > .mps-nav-link .mps-nav-chev { transform: rotate(90deg); }
.mps-mnav .mps-sub { position: static; width: auto; opacity: 1; visibility: visible; box-shadow: none; border-radius: 0; padding: 0 0 0 20px; display: none; background: none; }
.mps-mnav .has-sub.is-open > .mps-sub { display: block; }
.mps-mnav .mps-sub-item a { padding: 0 20px 10px; }

@media (max-width: 1024px) {
	/* tablet header as the old one: card inset 10px, 97px tall, logo 193x67, burger at x750, Apply Now 155x38 at x785 */
	.mps-nav { display: none; }
	.mps-hd { padding-bottom: 20px; }
	.mps-hcard { margin: 0 10px; min-height: 0; }
	.mps-logo img { width: 193px; }
	.mps-burger--grey { display: block; margin-left: auto; margin-right: 3px; padding: 0 10px 0 0; width: 32px; height: 24px; overflow: visible; }
	.mps-burger--grey .mps-i { width: 22px; height: 24px; }
	.mps-apply { font-size: 14px; line-height: 14px; padding: 12px 40px; margin: 0 54px 0 0; }
}
@media (max-width: 767px) {
	.mps-hd { display: none; }
	.mps-hm { display: flex; align-items: center; justify-content: space-between; padding: 20px 10px; position: relative; z-index: 7; }
	.mps-hm .mps-burger { display: block; padding: 0; width: 30px; height: 31px; }
	.mps-hm .mps-burger .mps-i { width: 30px; height: 31px; }
	.mps-logo-m img { width: 185px; height: auto; }
}

/* ================================================================ inner-page title banner (yellow, slides under the header) */
.mps-main .mps-banner, .mps-banner { position: relative; background: var(--mps-yellow); margin-top: -140px; padding: 200px 0 80px; text-align: center; }
.mps-banner .mps-banner-title, .mps-banner .wp-block-post-title, .mps-banner .wp-block-query-title { font-family: var(--mps-pop); font-size: 48px; font-weight: 800; line-height: 48px; color: #fff; margin: 0 auto; max-width: 1140px; padding: 0 10px; text-align: center; }
.mps-banner--red { background: var(--mps-red2); }
.mps-banner--blue { background: var(--mps-blue); }
.mps-main .mps-banner--tall { margin-top: -141px; }
.mps-banner--tall .mps-banner-title { line-height: 62.4px; }
.mps-banner--cream .mps-banner-title { color: var(--mps-cream); }
@media (max-width: 767px) {
	.mps-banner .mps-banner-title, .mps-banner .wp-block-post-title, .mps-banner .wp-block-query-title { font-size: 32px; line-height: 1; }
	.mps-main .mps-banner--tall { margin-top: -181px; }
}

/* ================================================================ home */
.mps-main .mps-hero, .mps-hero { position: relative; margin-top: -175px; height: 100vh; min-height: 600px; overflow: hidden; background: #fff; }
.mps-hvid { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.mps-hvid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mps-hvid iframe { position: absolute; top: 50%; left: 50%; width: 120vw; height: 67.5vw; min-height: 120%; min-width: 213.3vh; transform: translate(-50%,-50%); border: 0; pointer-events: none; }
.mps-hvid--m { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.mps-hvid--m { overflow: hidden; }
.mps-hvid--m iframe { top: 50%; left: 50%; width: 140%; height: 140%; min-width: 0; min-height: 0; transform: translate(-50%,-50%); }
@media (max-width: 767px) { .mps-hero { display: none; } }
/* home top cards: the whole card is a link (as on the old site) */
.mps-page-home .mps-cw:has(> .mps-h a) { cursor: pointer; }
.mps-page-home .mps-cw > .mps-h a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* ================================================================ PDF viewer (replaces dFlip) */
.mps-pdf { position: relative; }
.mps-pdf-frame { display: block; width: 100%; height: 900px; border: 0; background: #525659; border-radius: 0; }
.mps-pdf-open { display: none; }
@media (max-width: 767px) {
	.mps-pdf-frame { display: none; }
	.mps-pdf-open { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 180px; padding: 30px; border: 2px dashed var(--mps-blue); border-radius: 10px; font-family: var(--mps-pop); font-weight: 600; color: var(--mps-blue); }
	.mps-pdf-open .mps-i { width: 40px; height: 40px; }
}

/* ================================================================ forms */
.mps-form { display: flex; flex-wrap: wrap; gap: 20px 30px; font-family: var(--mps-pop); }
.mps-field { flex: 1 1 100%; display: flex; flex-direction: column; min-width: 0; border: 0; margin: 0; padding: 0; }
.mps-field.mps-half { flex: 1 1 calc(50% - 15px); }
.mps-field label, .mps-field legend { font-family: var(--mps-pop); font-size: 14px; font-weight: 500; color: #0d1427; margin: 0 0 8px; padding: 0; }
.mps-req { color: var(--mps-red); }
.mps-field input[type=text], .mps-field input[type=email], .mps-field input[type=date], .mps-field input[type=time], .mps-field textarea { width: 100%; font-family: var(--mps-pop); font-size: 16px; color: var(--mps-text); background: #f6f7fa; border: 0; border-radius: 10px; padding: 12px 16px; min-height: 50px; }
.mps-field textarea { min-height: 150px; resize: vertical; }
.mps-field input::placeholder, .mps-field textarea::placeholder { color: #8e8e93; opacity: 1; }
.mps-field input:focus, .mps-field textarea:focus { outline: 2px solid var(--mps-blue); outline-offset: 0; }
.mps-field input[type=file] { font-family: var(--mps-pop); font-size: 14px; color: var(--mps-text); }
.mps-field input[type=file]::file-selector-button { font-family: var(--mps-pop); font-size: 14px; font-weight: 500; color: #fff; background: var(--mps-red); border: 0; border-radius: 5px; padding: 12px 18px; margin-right: 12px; cursor: pointer; }
.mps-help { font-size: 12px; color: var(--mps-grey); margin-top: 6px; }
.mps-radios { display: flex; gap: 20px; }
.mps-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--mps-text); font-weight: 400 !important; }
.mps-submit { font-family: var(--mps-pop); font-size: 15px; font-weight: 500; color: #fff; background: var(--mps-red); border: 0; border-radius: 8px; padding: 17px 32px; cursor: pointer; transition: background .3s; align-self: flex-start; }
.mps-submit:hover, .mps-submit:focus-visible { background: var(--mps-yellow); }
.mps-form--vacancy .mps-submit { border-radius: 5px; font-size: 16px; padding: 15px 20px; }
.mps-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mps-form-error { flex: 1 1 100%; margin: 0; padding: 12px 16px; border-left: 4px solid var(--mps-red); background: #fdf0f1; color: var(--mps-text); }
.mps-form-done p { margin: 0; padding: 16px 20px; border-left: 4px solid var(--mps-green); background: #eef8f3; color: var(--mps-text); font-family: var(--mps-pop); }
@media (max-width: 767px) { .mps-field.mps-half { flex-basis: 100%; } }

/* ================================================================ blogs page */
.mps-pblock { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 30px; }
.mps-pcard-img { position: relative; display: block; height: 240px; overflow: hidden; border-radius: 20px; }
.mps-pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.mps-pcard-cat { position: absolute; left: 15px; bottom: 15px; background: #fff; color: var(--mps-text); font-size: 12px; padding: 4px 10px; border-radius: 5px; }
.mps-pcard-title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 15px 0 8px; color: var(--mps-red2); }
.mps-pcard-title a { color: inherit; }
.mps-pcard-date { font-size: 13px; color: var(--mps-grey); margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.mps-pcard-ex { font-size: 14px; margin: 0 0 10px; }
.mps-pcard-more { display: inline-flex; gap: 8px; align-items: center; color: var(--mps-red2); font-size: 14px; }
.mps-plist { list-style: none; margin: 0; padding: 0; }
.mps-plist li + li { margin-top: 20px; }
.mps-plist a { display: flex; gap: 15px; align-items: center; color: var(--mps-yellow2); font-family: var(--mps-pop); font-weight: 600; font-size: 14px; }
.mps-plist-img img { width: 115px; height: 77px; object-fit: cover; border-radius: 5px; }
.mps-cats { list-style: none; margin: 0; padding: 0; }
.mps-cats a { display: flex; gap: 13px; align-items: center; color: #fff; font-family: var(--mps-pop); font-weight: 600; }
.mps-noposts { margin: 0; }
@media (max-width: 767px) { .mps-pblock { grid-template-columns: 1fr; } }

/* ================================================================ templates: single post, archive, search, 404 */
.mps-wrap { max-width: 1140px; margin: 0 auto; padding: 90px 10px; }
.mps-prose { color: var(--mps-text); }
.mps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; list-style: none; margin: 0; padding: 0; }
.mps-cards img { border-radius: 20px; }
.mps-card-title { font-size: 20px; margin: 15px 0 8px; }
.mps-card-title a, .mps-result-title a { color: var(--mps-red2); }
.mps-results { list-style: none; margin: 30px 0 0; padding: 0; }
.mps-results li + li { margin-top: 30px; }
.mps-result-title { font-size: 24px; margin: 0 0 8px; }
.mps-searchform .wp-block-search__input { border: 0; background: #f6f7fa; border-radius: 10px; padding: 12px 16px; font-family: var(--mps-pop); }
.mps-searchform .wp-block-search__button { background: var(--mps-red); color: #fff; border: 0; border-radius: 8px; font-family: var(--mps-pop); padding: 12px 24px; }
.mps-404-in { text-align: center; color: var(--mps-text); }
.mps-404-btns { justify-content: center; }
.mps-404-btns .wp-block-button__link { background: var(--mps-red); border-radius: 8px; font-family: var(--mps-pop); font-size: 15px; font-weight: 500; padding: 18px 38px; }
@media (max-width: 767px) { .mps-cards { grid-template-columns: 1fr; } .mps-wrap { padding: 50px 15px; } }

/* ================================================================ footer + back to top */
.mps-footer .mps-sec { margin: 0; }
.mps-credit { display: block; }
/* the added credit line must not make the footer taller than the old one */
.mps-footer .mps-w.mps-text > p:has(.mps-credit) { margin-block-end: 0; }
@media (max-width: 767px) { .mps-footer .mps-w.mps-text > p:has(.mps-credit) { margin-block-end: 10px; } }
.mps-credit a { color: inherit; text-decoration: underline; }
.mps-credit a:hover { color: var(--mps-yellow); }
.mps-top { position: fixed; right: 29px; bottom: 29px; width: 32px; height: 32px; border-radius: 2px; background: var(--mps-blue); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 99; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.mps-top.is-on { opacity: 1; visibility: visible; }
.mps-top:hover, .mps-top:focus { color: #fff; }
.mps-top .mps-i { width: 14px; height: 14px; }
.mps-top[hidden] { display: none; }

/* ================================================================ apex: location picker
   (geometry measured on the old Elementor page: 1440 / tablet <=1024 / phone <=767) */
.mps-campus-apex .mps-main { min-height: 100vh; }
.mps-picker { position: relative; min-height: 100vh; overflow: hidden; color: #fff; font-family: var(--mps-pop); }
.mps-pk-bg, .mps-pk-ov { position: absolute; inset: 0; }
.mps-pk-slide { position: absolute; inset: 0; background-size: cover; background-position: center center; opacity: 0; transition: opacity .5s; transform: scale(1); }
.mps-pk-slide.is-active { opacity: 1; animation: mps-kenburns 20s linear forwards; }
@keyframes mps-kenburns { from { transform: scale(1); } to { transform: scale(1.3); } }
.mps-pk-ov { background-image: linear-gradient(89deg, #db4252 32%, #fbad18 100%); opacity: .65; }
.mps-pk-in { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; min-height: calc(100vh - 30px); margin-top: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.mps-pk-bar { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.88); border-radius: 20px; height: 97px; padding: 0 30px 0 10px; }
.mps-pk-logo { display: block; line-height: 0; }
.mps-pk-logo img { width: 220px; height: auto; display: block; }
.mps-pk-social { display: flex; gap: 12px; }
.mps-pk-social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--mps-yellow); color: #fff; border-radius: 10%; transition: background .3s, transform .3s; }
.mps-pk-social a:hover { background: var(--mps-red); color: #fff; transform: scale(.9); }
.mps-pk-social .mps-i { width: 20px; height: 20px; }
.mps-pk-cards { display: flex; gap: 20px; }
.mps-pk-card { position: relative; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; height: 200px; padding: 30px; background: rgba(255,255,255,.4); border-radius: 20px; color: #fff; }
.mps-pk-card:hover { color: #fff; }
.mps-pk-row { display: flex; align-items: center; gap: 22px; }
.mps-pk-pin { flex: 0 0 auto; width: 80px; height: 80px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: background .3s; }
.mps-pk-pin .mps-i { width: 40px; height: 40px; }
.mps-pk-manama .mps-pk-pin { background: var(--mps-yellow); }
.mps-pk-saar .mps-pk-pin { background: var(--mps-red); }
.mps-pk-card:hover .mps-pk-pin { background: var(--mps-blue); }
.mps-pk-text { display: block; }
.mps-pk-h { display: block; font-size: 24px; font-weight: 600; line-height: 31.2px; margin-bottom: 2px; }
.mps-pk-p { display: block; font-size: 16px; line-height: 26.4px; color: #fcfcfc; }
.mps-pk-gorow { display: flex; justify-content: flex-end; height: 37px; }
.mps-pk-go { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: var(--mps-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.mps-pk-go .mps-i { width: 20px; height: 20px; }
.mps-pk-foot { position: relative; height: 152px; display: flex; flex-direction: column; align-items: center; }
.mps-pk-foot img { width: 250px; height: auto; display: block; }
.mps-pk-copy { margin: 16px 0 0; font-size: 14px; line-height: 15px; color: #fff; text-align: center; }
/* the added credit line hangs below the copyright, so the old layout is unchanged */
.mps-pk-credit { position: absolute; left: 0; right: 0; top: 100%; margin: -30px 0 0; font-size: 12px; line-height: 15px; text-align: center; color: #fff; }
.mps-pk-credit a { color: #fff; text-decoration: underline; }
@media (max-width: 1024px) {
	.mps-picker { padding: 0 20px; }
	.mps-pk-bar { height: 83px; padding: 10px 20px; }
	.mps-pk-logo img { width: 180px; }
	.mps-pk-social a { width: 36px; height: 36px; }
	.mps-pk-social .mps-i { width: 18px; height: 18px; }
	.mps-pk-card { height: 150px; padding: 20px; }
	.mps-pk-row { gap: 20px; }
	.mps-pk-pin { width: 60px; height: 60px; }
	.mps-pk-pin .mps-i { width: 30px; height: 30px; }
	.mps-pk-gorow { height: 27px; }
	.mps-pk-go { width: 30px; height: 30px; }
	.mps-pk-go .mps-i { width: 15px; height: 15px; }
	.mps-pk-foot { height: 153px; padding-top: 10px; }
	.mps-pk-foot img { width: 200px; }
	.mps-pk-copy { margin-top: 20px; line-height: 18.2px; }
	.mps-pk-credit { margin-top: -35px; }
}
@media (max-width: 767px) {
	.mps-pk-bar { height: 72px; padding: 10px 24px 10px 20px; margin-bottom: 30px; }
	.mps-pk-logo img { width: 148px; }
	.mps-pk-social a { width: 30px; height: 30px; }
	.mps-pk-social .mps-i { width: 15px; height: 15px; }
	.mps-pk-cards { flex-direction: column; }
	.mps-pk-card { flex: none; height: auto; padding: 20px; }
	.mps-pk-saar .mps-pk-row { padding-bottom: 10px; } /* the old Saar card was 10px taller */
	.mps-pk-row { flex-direction: column; align-items: center; gap: 5px; text-align: center; }
	.mps-pk-h { font-size: 18.24px; line-height: 23.712px; }
	.mps-pk-gorow { height: auto; padding: 10px 0 6px; }
	.mps-pk-foot { height: 163px; padding: 41px 0 0; }
	.mps-pk-foot img { width: 180px; }
	.mps-pk-copy { margin-top: 15px; }
	.mps-pk-credit { margin-top: -25px; }
}

/* jkit icon box "read more" button (Manama Apply Now page) */
.mps-jb-btns { justify-content: center; margin-top: 0; }
.mps-jb-more .wp-block-button__link { font-family: var(--mps-pop); font-size: 14px; font-weight: 500; line-height: 1; color: #fff; background: #0058e6; border-radius: 5px; padding: 15px 30px; transition: all .3s; }
.mps-jb-more .wp-block-button__link:hover { background: var(--mps-red); color: #fff; }
.mps-map-embed iframe { height: 450px; }
/* keep the added credit on one line so the footer stays as tall as the old one */
@media (max-width: 1024px) { .mps-footer .mps-credit { font-size: 12px; line-height: 14px; white-space: nowrap; } }
.wp-site-blocks { overflow-x: clip; } /* like the old body overflow-x:hidden, also for scrollWidth */
/* text editor bottom margin collapses with its last paragraph's margin (Elementor inner container) */
.mps-w.mps-text > p:last-child { margin-block-end: max(1.75em, var(--mb, 0px)); }
.mps-w.mps-text > p.mps-raw:last-child { margin-block-end: var(--mb, 0px); }
.mps-w.mps-text > ul:last-child, .mps-w.mps-text > ol:last-child { margin-block-end: max(1.5em, var(--mb, 0px)); }
.mps-w.mps-text > .wp-block-heading:last-child, .mps-w.mps-text > div:last-child { margin-block-end: var(--mb, 0px); }
/* QC2 */
.mps-cw.mps-cw-empty { padding: 0; }
.mps-ts-text { margin: 30px 0 15px; }
.mps-ts-name { font-size: 16px; line-height: 27px; min-height: 55px; }
.mps-ts-dots { height: 26px; margin-top: 0; align-items: center; }
.mps-gal-btn { padding: 16px 32px; line-height: 21px; }
.mps-gal-loadmore { margin: 25px 0 -12px; } /* the old button hung 12px out of its widget */
/* map embeds typed into a text editor: inline iframe on a 26.4px line (+ paragraph margin when it sat in a <p>) */
.mps-map-embed { line-height: 26.4px; }
.mps-map-embed iframe { display: inline-block; vertical-align: baseline; }
.mps-w.mps-text > div.mps-map-p, .mps-w.mps-text > div.mps-map-p:last-child { margin-block-end: max(28px, var(--mb, 0px)); }
/* About / Our Story play button: re-anchored to the photo only on desktop (tablet keeps the old offsets) */
.mps-spacer { flex-shrink: 0; }
@media (max-width: 767px) { .mps-ibox.mps-ib-left > .wp-block-html, .mps-ibox.mps-ib-right > .wp-block-html { line-height: 0; } .mps-ibox.mps-ib-left .mps-ib-ico, .mps-ibox.mps-ib-right .mps-ib-ico { margin-bottom: 9px; } } /* the old stacked icon sat on a text line (60 + 9) */