/* My Science Skills — unified header, footer and light global styling. */
:root {
	--mskc-maroon: #5E1A2A;
	--mskc-maroon-d: #3F1019;
	--mskc-gold: #C9A06A;
	--mskc-sand: #F4EBDD;
	--mskc-cream: #F8F3EC;
	--mskc-line: #E0D6C6;
	--mskc-ink: #2B1C1F;
	--mskc-muted: #6A5A5C;
	--mskc-green: #1F5A3E;
	--mskc-green-b: #2C7552;
	--mskc-pink: #F3E3E6;
	--mskc-font: 'Poppins', 'Cairo', system-ui, sans-serif;
	--mskc-font-ar: 'Cairo', 'Poppins', system-ui, sans-serif;
}

/* Hide Crio's own header, sticky header and footer when ours is shown. */
body.mskc-on .bgtfw-header,
body.mskc-on #masthead,
body.mskc-on .bgtfw-sticky-header,
body.mskc-on .bgtfw-header-stick,
body.mskc-on #colophon,
body.mskc-on .site-footer:not(.mskc-ftr),
body.mskc-on .skip-link.screen-reader-text { display: none !important; }
body.mskc-on.header-fixed .site-content,
body.mskc-on .site-content { margin-top: 0 !important; padding-top: 0; }
body.mskc-on { padding-top: 0 !important; }

.mskc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mskc-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100001; background: #fff; color: var(--mskc-maroon); padding: 10px 16px; border-radius: 10px; font: 700 15px/1.4 var(--mskc-font); text-decoration: none; }
.mskc-skip:focus { top: 12px; }

/* ---------- Header ---------- */
.mskc-hdr { position: sticky; top: 0; top: var(--wp-admin--admin-bar--height, 0px); z-index: 9990; background: var(--mskc-maroon); color: #fff; font-family: var(--mskc-font); font-size: 16px; line-height: 1.5; box-shadow: 0 2px 14px rgba(43, 28, 31, .18); }
.mskc-hdr[lang="ar"] { font-family: var(--mskc-font-ar); }
.mskc-hdr *, .mskc-hdr *::before, .mskc-hdr *::after, .mskc-ftr *, .mskc-ftr *::before, .mskc-ftr *::after { box-sizing: border-box; }
.mskc-hdr a, .mskc-hdr button, .mskc-hdr b, .mskc-ftr a, .mskc-ftr b { font-family: inherit; text-transform: none; letter-spacing: normal; font-style: normal; }
.mskc-hdr-in { max-width: 1376px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 32px; min-height: 64px; }
.mskc-logo { display: flex; align-items: center; gap: 12px; color: #fff !important; text-decoration: none !important; font-weight: 800; font-size: 20px; white-space: nowrap; font-family: 'Poppins', sans-serif; }
.mskc-logo-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--mskc-sand); display: flex; align-items: center; justify-content: center; flex: none; }
.mskc-logo-tx { font-family: 'Poppins', sans-serif; font-weight: 800; }

.mskc-nav { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 15px; }
.mskc-top { color: var(--mskc-pink) !important; background: transparent; border: 0; text-decoration: none !important; padding: 8px 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.mskc-top:hover, .mskc-top:focus-visible { background: rgba(255, 255, 255, .1); color: #fff !important; }
.mskc-top.is-current { color: #fff !important; box-shadow: inset 0 -2px 0 var(--mskc-gold); border-radius: 10px 10px 4px 4px; }
.mskc-top[aria-expanded="true"] { background: var(--mskc-cream); color: var(--mskc-maroon) !important; box-shadow: none; border-radius: 10px; }
.mskc-top[aria-expanded="true"] .mskc-chev { transform: rotate(180deg); }
.mskc-chev { transition: transform .15s; }
.mskc-hdr :focus-visible { outline: 3px solid var(--mskc-gold); outline-offset: 2px; }

.mskc-dd { position: relative; }
.mskc-panel { position: absolute; top: calc(100% + 10px); inset-inline-start: 50%; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); background: #fff; color: var(--mskc-ink); border: 1px solid var(--mskc-line); border-radius: 20px; box-shadow: 0 24px 60px rgba(43, 28, 31, .25); padding: 18px; z-index: 2; }
.mskc-hdr[dir="rtl"] .mskc-panel { transform: translateX(50%); }
.mskc-panel[hidden] { display: none; }
.mskc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mskc-mi { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; text-decoration: none !important; color: var(--mskc-ink) !important; }
.mskc-mi:hover, .mskc-mi:focus-visible, .mskc-mi.is-hl { background: var(--mskc-cream); }
.mskc-mi.is-current { background: var(--mskc-sand); }
.mskc-mi-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.mskc-mi-tx { display: flex; flex-direction: column; min-width: 0; }
.mskc-mi-tx b { font-size: 16px; font-weight: 700; }
.mskc-mi-tx span { font-size: 13.5px; color: var(--mskc-muted); line-height: 1.45; font-weight: 400; }
.mskc-tip { margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--mskc-sand); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.mskc-tip a { color: var(--mskc-maroon) !important; font-weight: 700; text-decoration: none !important; }

.mskc-act { display: flex; align-items: center; gap: 8px; }
.mskc-verify { color: var(--mskc-pink) !important; text-decoration: none !important; font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mskc-verify:hover { background: rgba(255, 255, 255, .1); color: #fff !important; }
.mskc-lang { color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 15px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 4px 14px; white-space: nowrap; }
.mskc-lang[lang="ar"] { font-family: 'Cairo', sans-serif; }
.mskc-lang[lang="en"] { font-family: 'Poppins', sans-serif; }
.mskc-lang:hover { background: rgba(255, 255, 255, .12); }
.mskc-login { background: var(--mskc-sand); color: var(--mskc-maroon) !important; text-decoration: none !important; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 10px; white-space: nowrap; }
.mskc-login:hover { background: #fff; }
.mskc-burger, .mskc-close { display: none; width: 44px; height: 44px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; align-items: center; justify-content: center; cursor: pointer; padding: 0; }

/* Mobile panel */
.mskc-mobile { position: fixed; inset: 0; top: var(--wp-admin--admin-bar--height, 0px); background: var(--mskc-maroon); color: #fff; display: flex; flex-direction: column; overflow-y: auto; z-index: 3; }
.mskc-mobile[hidden] { display: none; }
.mskc-mobile-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); min-height: 64px; }
.mskc-mobile-top .mskc-close { display: flex; }
.mskc-mm { flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.mskc-mm-top { color: #fff !important; text-decoration: none !important; font-weight: 700; padding: 12px; border-radius: 12px; border: 0; background: transparent; font-size: 16px; display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; text-align: start; line-height: 1.5; }
.mskc-mm-g.is-open { background: rgba(255, 255, 255, .08); border-radius: 14px; padding-bottom: 8px; }
.mskc-mm-g.is-open .mskc-chev { transform: rotate(180deg); }
.mskc-mm-list { display: flex; flex-direction: column; }
.mskc-mm-list[hidden] { display: none; }
.mskc-mm-link { color: var(--mskc-pink) !important; text-decoration: none !important; padding: 9px 20px; font-size: 15.5px; }
.mskc-mm-link.is-current { color: #fff !important; font-weight: 700; }
.mskc-badge { font-size: 12px; background: var(--mskc-gold); color: var(--mskc-maroon-d); border-radius: 999px; padding: 0 8px; font-weight: 700; }
.mskc-mobile-foot { padding: 14px 16px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.mskc-mobile-foot a { text-align: center; padding: 11px; border-radius: 12px; }
html.mskc-lock, html.mskc-lock body { overflow: hidden; }

@media (max-width: 1180px) {
	.mskc-verify span { display: none; }
	.mskc-top { padding: 8px 10px; }
}
@media (max-width: 1099px) {
	.mskc-nav, .mskc-act .mskc-verify, .mskc-act .mskc-login { display: none; }
	.mskc-burger { display: flex; }
	.mskc-hdr-in { padding: 10px 16px; }
	.mskc-logo { font-size: 18px; }
	.mskc-logo-ic { width: 38px; height: 38px; }
}
@media (max-width: 380px) {
	.mskc-act .mskc-lang { display: none; }
}

/* ---------- Footer ---------- */
.mskc-ftr { background: var(--mskc-maroon-d); color: #E8D6BE; padding: 40px 32px 24px; font-family: var(--mskc-font); font-size: 15px; line-height: 1.6; }
.mskc-ftr[lang="ar"] { font-family: var(--mskc-font-ar); }
.mskc-ftr-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; }
.mskc-ftr-brand { display: flex; flex-direction: column; gap: 8px; }
.mskc-ftr-brand b { color: #fff; font-size: 18px; font-family: 'Poppins', sans-serif; }
.mskc-ftr-brand > span { font-size: 14px; }
.mskc-soc { display: flex; gap: 10px; margin-top: 4px; }
.mskc-soc a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; color: #E8D6BE !important; }
.mskc-soc a:hover { background: rgba(255, 255, 255, .16); color: #fff !important; }
.mskc-ftr-col { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.mskc-ftr-col b { color: #fff; font-size: 15px; margin-bottom: 2px; }
.mskc-ftr-col a { color: #E8D6BE !important; text-decoration: none !important; }
.mskc-ftr-col a:hover { color: #fff !important; text-decoration: underline !important; }
.mskc-ftr-bottom { max-width: 1200px; margin: 28px auto 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
@media (max-width: 860px) {
	.mskc-ftr { padding: 32px 16px 20px; }
	.mskc-ftr-in { grid-template-columns: 1fr 1fr; }
	.mskc-ftr-brand { grid-column: 1 / -1; }
}

/* ---------- Global styling for existing pages (Post and Page Builder content) ---------- */
body.mskc-global { background-color: var(--mskc-cream) !important; color: var(--mskc-ink); }
body.mskc-global .site-content, body.mskc-global .main-wrapper, body.mskc-global .site-content .boldgrid-section:not([style*="background"]) { background-color: transparent; }
body.mskc-global .entry-content { font-family: var(--mskc-font); font-size: 17px; line-height: 1.75; color: var(--mskc-ink); }
body.mskc-global .entry-content :is(h1, h2, h3, h4, h5, h6) { font-family: var(--mskc-font) !important; font-style: normal !important; letter-spacing: normal !important; line-height: 1.3; }
body.mskc-global .entry-content :is(h1, h2, h3, h4, h5, h6):lang(ar), body.mskc-global .entry-content [dir="rtl"] :is(h1, h2, h3, h4, h5, h6) { font-family: var(--mskc-font-ar) !important; }
body.mskc-global .entry-content h1:not(:is([style*="background"], [class*="background-color"], [class*="-background"]) *) { color: var(--mskc-maroon) !important; font-weight: 800 !important; }
body.mskc-global .entry-content :is(h2, h3):not(:is([style*="background"], [class*="background-color"], [class*="-background"]) *) { color: var(--mskc-ink) !important; font-weight: 800 !important; }
body.mskc-global .entry-content :is(h4, h5, h6):not(:is([style*="background"], [class*="background-color"], [class*="-background"]) *) { color: var(--mskc-maroon) !important; font-weight: 700 !important; }
body.mskc-global .entry-content :is(p, li, td, th, blockquote, span, div) { font-family: inherit; }
body.mskc-global .entry-content :is(p, li) [style*="font-family"] { font-family: inherit !important; }
body.mskc-global .entry-content :is(p, li, td):not(:is([style*="background"], [class*="background-color"], [class*="-background"]) *):not([style*="color"]) { color: var(--mskc-ink); }
body.mskc-global .entry-content a:not(.btn):not(.button):not([class*="mskc"]):not([class*="gt_"]) { color: var(--mskc-maroon); text-decoration-color: rgba(94, 26, 42, .35); text-underline-offset: 3px; }
body.mskc-global .entry-content a:not(.btn):not(.button):not([class*="mskc"]):not([class*="gt_"]):hover { color: var(--mskc-maroon-d); text-decoration-color: currentColor; }
body.mskc-global .entry-content :is(img:not([width="16"]):not(.emoji), video, iframe, .wp-video, .mejs-container) { border-radius: 16px; max-width: 100%; }
body.mskc-global .entry-content :is(iframe, .wp-video, .mejs-container) { overflow: hidden; box-shadow: 0 10px 28px rgba(43, 28, 31, .12); }
body.mskc-global .entry-content :is(.btn, .button, .wp-block-button__link, input[type="submit"], button[type="submit"]) { font-family: var(--mskc-font) !important; font-weight: 700 !important; border-radius: 12px !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-shadow: none !important; }
body.mskc-global .entry-content :is(.btn, .button, .wp-block-button__link):not(.btn-neutral-color):not([class*="btn-color-2"]) { background: var(--mskc-green-b) !important; border-color: var(--mskc-green-b) !important; color: #fff !important; }
body.mskc-global .entry-content :is(.btn, .button, .wp-block-button__link):hover { filter: brightness(.92); }
body.mskc-global .entry-content [class*="btn-color-2"] { background: var(--mskc-maroon) !important; border-color: var(--mskc-maroon) !important; color: #fff !important; }
body.mskc-global .entry-content hr { border: 0; border-top: 1px solid var(--mskc-line); }
body.mskc-global .entry-content table { border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
body.mskc-global .entry-content :is(td, th) { border: 1px solid var(--mskc-line); padding: 8px 12px; }
body.mskc-global .entry-content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), body.mskc-global .entry-content select, body.mskc-global .entry-content textarea { border: 1px solid var(--mskc-line); border-radius: 12px; padding: 10px 12px; background: #fff; font-family: inherit; }
body.mskc-global .bgtfw-edit-button { font-family: system-ui, sans-serif; }

/* Page title band (under the header, on normal pages). */
.mskc-band { background: var(--mskc-maroon); color: #fff; position: relative; isolation: isolate; overflow: hidden; font-family: var(--mskc-font); }
.mskc-band[lang="ar"] { font-family: var(--mskc-font-ar); }
.mskc-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.6px); background-size: 24px 24px; }
.mskc-band-in { max-width: 1200px; margin: 0 auto; padding: 28px 32px 30px; display: flex; flex-direction: column; gap: 6px; }
.mskc-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: #E8D6BE; }
.mskc-crumbs a { color: #E8D6BE !important; text-decoration: none !important; }
.mskc-crumbs a:hover { color: #fff !important; text-decoration: underline !important; }
.mskc-band h1.mskc-band-title { margin: 0; font-family: inherit !important; font-size: 38px; line-height: 1.2; font-weight: 800; color: #fff !important; font-style: normal; letter-spacing: -.5px; text-transform: none; }
.mskc-band[lang="ar"] h1.mskc-band-title { letter-spacing: 0; font-weight: 900; }
@media (max-width: 640px) {
	.mskc-band-in { padding: 20px 16px 22px; }
	.mskc-band h1.mskc-band-title { font-size: 28px; }
	body.mskc-global .entry-content { font-size: 16px; }
}

/* GTranslate floating switcher: keep it off the header (bottom corner). */
body.mskc-on .gt_switcher_wrapper { top: auto !important; bottom: 16px !important; left: auto !important; right: 16px !important; z-index: 9980 !important; }
body.mskc-on .gt_switcher_wrapper .gt_switcher .gt_option { bottom: 100%; }

/* Full-screen apps inside normal pages (Academy, Takreem): keep the site
   header visible and start the app below it. The Active Class Board keeps the
   whole screen (classroom projector), so the header is hidden there. */
body.mskc-on #mskc-hdr.mskc-hdr { display: block !important; visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; }
body.mskc-on .mskc-hdr nav { visibility: visible !important; height: auto !important; max-height: none !important; overflow: visible !important; }
body.mskc-on:has(#activeClassWrapper) #mskc-hdr.mskc-hdr, body.mskc-on:has(#activeClassWrapper) .mskc-skip { display: none !important; }
body:has(#tkc-catalog) .mskc-hdr { z-index: 2147483600; }
body.mskc-on #tkc-catalog { top: calc(var(--wp-admin--admin-bar--height, 0px) + 64px) !important; bottom: 0 !important; height: auto !important; }
body.mskc-on:not(.admin-bar) #tkc-catalog { top: 64px !important; }
@media (min-width: 1100px) { body.mskc-on .mskc-hdr nav.mskc-nav { display: flex !important; } }
body.mskc-on .mskc-hdr nav.mskc-mm { display: flex !important; }
body.mskc-on #tkc-catalog [class*="overlay"] { top: calc(var(--wp-admin--admin-bar--height, 0px) + 64px) !important; }
body.mskc-on:not(.admin-bar) #tkc-catalog [class*="overlay"] { top: 64px !important; }