/*
Theme Name: Mindset Growth Hub
Theme URI: https://example.com/mindset-growth-hub
Author: Mindset Growth Hub
Description: Custom theme for Mindset Growth Hub, converted 1:1 from final.html. Arabic (RTL) and English (LTR) versions of every page: Home, About, Courses, Course details, Workshops, Workshop details and Booking. Courses and workshops (custom post types), page content, menus and contact details are editable from the WordPress admin. No page builder, no plugins required. On activation it creates the pages, courses, workshops and menus and sets the Arabic home page as the front page.
Version: 1.3.0
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mindset
Tags: rtl-language-support, translation-ready, custom-menu, featured-images, one-column
*/

/*
 * Site shell: top bar + navbar (the part of final.html outside the page frames).
 *
 * In final.html the shell lived in its own document and every page ran in an iframe below
 * it. Now everything shares one document, and the page stylesheets style bare elements
 * (header, nav, a, button...) and generic classes (.nav, .cta, .top, .tag) of their own.
 * So the shell uses its own "mgh-" class names and variables, and every rule is scoped to
 * #mgh-header: the look is exactly the original, and no page stylesheet can reach it.
 */

:root {
	--mgh-primary: #3A66AE;
	--mgh-primary-dark: #2B4F8C;
	--mgh-navy: #14244B;
	--mgh-secondary: #F6AB1C;
	--mgh-soft: #E4EFF9;
	--mgh-border: #DDE6F2;
	--mgh-top-h: 40px;
	--mgh-nav-h: 74px;
	--mgh-head-h: 114px; /* top bar + navbar */
}

body { margin: 0; --mgh-admin-h: 0px; }

/*
 * Horizontal clipping. Each original page clipped sideways overflow with
 * body { overflow-x: hidden } inside its own frame (e.g. the off-screen "skip" link at
 * left:-999px, wide decorations on phones). At the top level that is not enough: mobile
 * browsers widen the page to fit the overflow (and in RTL it becomes scrollable to the
 * left). overflow-x: clip clips the same way without creating a scroll container, so the
 * pinned header keeps working. position: relative makes the body the containing block of
 * absolutely positioned elements (only the skip link and a screen-reader heading), so the
 * clip applies to them too.
 */
@supports (overflow-x: clip) {
	html, html body { overflow-x: clip; }
	body { position: relative; }
}
body.admin-bar { --mgh-admin-h: 32px; }
@media screen and (max-width: 782px) { body.admin-bar { --mgh-admin-h: 46px; } }
@media screen and (max-width: 600px) { body.admin-bar { --mgh-admin-h: 0px; } }

/* The header stays on screen while the page scrolls, as it did above the page frame. */
#mgh-header {
	position: sticky;
	top: var(--mgh-admin-h);
	z-index: 1000;
	font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, Tahoma, sans-serif;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	color: var(--mgh-navy);
	-webkit-font-smoothing: auto;
}
#mgh-header *, #mgh-header *::before, #mgh-header *::after { box-sizing: border-box; }
#mgh-header a { color: inherit; text-decoration: none; }
#mgh-header button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; margin: 0; }
#mgh-header :focus-visible { outline: 3px solid var(--mgh-secondary); outline-offset: 3px; border-radius: 6px; }

/* ---------- Top bar ---------- */
#mgh-header .mgh-top { height: var(--mgh-top-h); background: linear-gradient(90deg, #14244B, #1B3366); color: #C9D6EE; font-size: 13px; position: relative; z-index: 21; }
#mgh-header .mgh-top-in { width: min(100% - 32px, 1200px); margin: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#mgh-header .mgh-tag { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mgh-header .mgh-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mgh-secondary); flex: none; }
#mgh-header .mgh-top-end { display: flex; align-items: center; gap: 18px; }
#mgh-header .mgh-top-end a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#mgh-header .mgh-top-end a:hover { color: #fff; }
#mgh-header .mgh-top-end svg { color: var(--mgh-secondary); flex: none; }
#mgh-header .mgh-lang { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(246,171,28,.7); color: #fff; font-size: 12.5px; font-weight: 700; transition: background .2s, color .2s; }
#mgh-header .mgh-lang:hover { background: var(--mgh-secondary); color: var(--mgh-navy); }
#mgh-header .mgh-lang svg { color: inherit; }

/* ---------- The one navbar ---------- */
#mgh-header .mgh-nav { position: relative; z-index: 20; height: var(--mgh-nav-h); background: #fff; border-bottom: 1px solid var(--mgh-border); }
#mgh-header .mgh-nav-in { width: min(100% - 32px, 1200px); margin: auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#mgh-header .mgh-nav img { height: 46px; width: auto; max-width: none; display: block; }
#mgh-header .mgh-links { display: flex; gap: 4px; }
#mgh-header .mgh-links a { padding: 10px 16px; border-radius: 999px; font-weight: 600; transition: background .2s, color .2s; }
#mgh-header .mgh-links a:hover { background: var(--mgh-soft); color: var(--mgh-primary-dark); }
#mgh-header .mgh-links a[aria-current="page"] { background: var(--mgh-primary); color: #fff; }
#mgh-header .mgh-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--mgh-secondary); color: var(--mgh-navy); font-weight: 700; padding: 11px 22px; border-radius: 999px; transition: transform .2s; }
#mgh-header .mgh-cta:hover { transform: translateY(-2px); }
#mgh-header .mgh-right { display: flex; gap: 10px; align-items: center; }
#mgh-header .mgh-m-only { display: none; }
#mgh-header .mgh-burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--mgh-soft); font-size: 22px; line-height: 1; }

@media (max-width: 900px) {
	#mgh-header .mgh-top .mgh-tag { display: none; }
	#mgh-header .mgh-top-in { justify-content: flex-end; }
}
@media (max-width: 820px) {
	#mgh-header .mgh-burger { display: block; }
	#mgh-header .mgh-cta { display: none; }
	#mgh-header .mgh-links { display: none; position: absolute; top: var(--mgh-nav-h); left: 0; right: 0; background: #fff; flex-direction: column; padding: 10px 16px 18px; border-top: 1px solid var(--mgh-border); box-shadow: 0 20px 30px -20px rgba(20,36,75,.3); }
	#mgh-header .mgh-nav.open .mgh-links { display: flex; }
	#mgh-header .mgh-links a { padding: 14px 16px; }
	#mgh-header .mgh-links a.mgh-m-only { display: block; margin-top: 6px; background: var(--mgh-secondary); color: var(--mgh-navy); text-align: center; font-weight: 700; }
}
@media (max-width: 560px) {
	#mgh-header .mgh-top-end .mgh-hide-sm { display: none; }
}

/* The home page's "skip to content" link must show above the pinned header when focused. */
.mgh-view .skip:focus { z-index: 1001; }

/* Accessible hidden text (WordPress core class). */
.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;
}