/* ==========================================================================
   Mouhimen Blog: component styles
   Colors, fonts, spacing and element styles come from theme.json presets.
   Everything here uses logical properties, so RTL needs no separate sheet.
   Breakpoints: 1024px (tablet), 768px (large phone), 375px (small phone).
   ========================================================================== */

:root {
	--mh-radius-sm: var(--wp--custom--radius--sm, 6px);
	--mh-radius-md: var(--wp--custom--radius--md, 10px);
	--mh-radius-lg: var(--wp--custom--radius--lg, 14px);
	--mh-radius-xl: var(--wp--custom--radius--xl, 18px);
	--mh-ease: var(--wp--custom--transition, 200ms ease);
}

/* Dark mode follows the visitor's system setting. */
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--base: #0B1413;
		--wp--preset--color--surface: #14201F;
		--wp--preset--color--surface-2: #1B2A28;
		--wp--preset--color--border: #2C3D3A;
		--wp--preset--color--border-strong: #3E524E;
		--wp--preset--color--contrast: #E6EEEC;
		--wp--preset--color--muted: #9DB0AC;
		--wp--preset--color--primary: #5FC2B5;
		--wp--preset--color--primary-dark: #86D6CB;
		--wp--preset--color--primary-soft: #12332F;
		--wp--preset--color--accent-soft: #3A2E12;
		--wp--preset--color--accent-text: #F2C766;
		--wp--preset--color--ember-soft: #3A2015;
		--wp--preset--color--ember-text: #F0A37A;
		--wp--preset--color--info: #7FB2EE;
		--wp--preset--color--info-soft: #15263A;
		--wp--preset--color--band: #06110F;
		--wp--preset--color--band-2: #0F2622;
		color-scheme: dark;
	}
	:root .wp-element-button,
	:root .wp-block-button__link { color: #06231F; }
	:root .is-style-mh-youtube .wp-block-button__link,
	:root .is-style-mh-outline-dark .wp-block-button__link { color: #fff; }
	:root .is-style-mh-accent .wp-block-button__link { color: #14201F; }
}

/* Screen-reader-only text (core and theme markup rely on it). */
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background: var(--wp--preset--color--surface); clip-path: none; color: var(--wp--preset--color--contrast); display: block; height: auto; left: 8px; top: 8px; padding: 12px 16px; width: auto; z-index: 100000; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.rtl body, body.rtl { line-height: var(--wp--custom--line-height--body-rtl, 1.85); }
.rtl :where(h1, h2, h3, h4) { line-height: 1.4; letter-spacing: 0; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--wp--preset--color--accent-soft); }
img { height: auto; max-width: 100%; }
.mh-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.rtl .mh-flip { transform: scaleX(-1); }

/* ---------- Buttons (block styles) ---------- */
.wp-block-button__link, .mh-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background-color var(--mh-ease), border-color var(--mh-ease), color var(--mh-ease); }
.mh-btn { box-sizing: border-box; max-width: 100%; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: var(--wp--preset--font-size--small); line-height: 1.2; padding: .75rem 1.25rem; border-radius: var(--mh-radius-md); border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; }
.is-style-mh-youtube .wp-block-button__link, .mh-btn--youtube { background: var(--wp--preset--color--ember); color: #fff; }
.is-style-mh-youtube .wp-block-button__link:hover, .mh-btn--youtube:hover { background: #9A3C10; color: #fff; }
.is-style-mh-youtube .wp-block-button__link::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.7 15.1V8.9l5.8 3.1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.2a3 3 0 0 0-2.1-2.1C19 4.6 12 4.6 12 4.6s-7 0-8.9.5A3 3 0 0 0 1 7.2 31 31 0 0 0 .5 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1 31 31 0 0 0 .5-4.8 31 31 0 0 0-.5-4.8zM9.7 15.1V8.9l5.8 3.1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.is-style-mh-accent .wp-block-button__link, .mh-btn--accent { background: #E0A526; color: #14201F; }
.is-style-mh-accent .wp-block-button__link:hover, .mh-btn--accent:hover { background: #F2C766; color: #14201F; }
.is-style-mh-ghost .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--border-strong); }
.is-style-mh-ghost .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.is-style-mh-outline-dark .wp-block-button__link { background: transparent; color: var(--wp--preset--color--band-text); border: 1px solid #3E5A54; }
.is-style-mh-outline-dark .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--band-mint); border-color: var(--wp--preset--color--band-mint); }

/* ---------- Header ---------- */
.mh-site-header { border-block-end: 1px solid var(--wp--preset--color--border); position: relative; z-index: 20; }
.mh-header__row { min-height: 72px; gap: 1.5rem; }
.mh-brand .wp-block-site-title { font-size: 1.1875rem; margin: 0; }
.mh-brand .wp-block-site-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.mh-brand, .mh-brand .wp-block-site-logo { flex: none; }
.mh-header__end { margin-inline-start: auto; min-width: 0; }
.mh-header__cta .wp-block-button__link { white-space: nowrap; }
.mh-nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .875rem; border-radius: 8px; text-decoration: none; color: var(--wp--preset--color--contrast); }
.mh-nav .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--surface-2); }
.mh-nav .current-menu-item > .wp-block-navigation-item__content,
.mh-nav [aria-current="page"] { color: var(--wp--preset--color--primary); box-shadow: inset 0 -2px 0 var(--wp--preset--color--primary); border-radius: 0; }
.mh-nav .wp-block-navigation__responsive-container-open,
.mh-nav .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; align-items: center; justify-content: center; }
.mh-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--surface); padding: 1.25rem; }
.mh-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; min-height: 52px; }
.mh-search .wp-block-search__button { width: 44px; height: 44px; padding: 0; margin: 0; background: transparent; color: var(--wp--preset--color--contrast); border: 0; border-radius: var(--mh-radius-md); }
.mh-search .wp-block-search__button:hover { background: var(--wp--preset--color--surface-2); }
.mh-search.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { min-height: 44px; border-radius: var(--mh-radius-md); }
.mh-lang { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .75rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--mh-radius-md); color: var(--wp--preset--color--contrast); text-decoration: none; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.mh-lang:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }

/* ---------- Terminal band (echoes the YouTube cover) ---------- */
.is-style-mh-band { background-color: var(--wp--preset--color--band); color: var(--wp--preset--color--band-text); position: relative; isolation: isolate; overflow: hidden; }
.is-style-mh-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--wp--preset--color--band-line) 1px, transparent 1px), linear-gradient(90deg, var(--wp--preset--color--band-line) 1px, transparent 1px); background-size: 40px 40px; opacity: .35; pointer-events: none; }
.is-style-mh-band :where(h1, h2, h3) { color: #fff; }
.is-style-mh-band a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--band-mint); }
.is-style-mh-band a:where(:not(.wp-element-button)):hover { color: #fff; }
.is-style-mh-prompt { font-family: var(--wp--preset--font-family--mono); font-size: .875rem; color: var(--wp--preset--color--band-mint); direction: ltr; unicode-bidi: isolate; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.is-style-mh-prompt strong { color: var(--wp--preset--color--band-yellow); font-weight: 500; }
.is-style-mh-prompt::after { content: ""; display: inline-block; width: 9px; height: 1.05em; background: currentColor; vertical-align: -3px; margin-inline-start: 4px; animation: mh-blink 1.1s steps(1) infinite; }
@keyframes mh-blink { 50% { opacity: 0; } }

.mh-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 6vw, 5.5rem); }
.mh-hero__title { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem); font-weight: 700; letter-spacing: -.01em; margin-block-start: 1rem; }
.mh-hero__lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--band-muted); max-width: 54ch; }
.mh-hero__cta { margin-block-start: 1.75rem; }

.mh-chips { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mh-chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding-inline: .875rem; border-radius: 999px; border: 1px solid #3E5A54; color: var(--wp--preset--color--band-text); text-decoration: none; font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.is-style-mh-band .mh-chip { color: var(--wp--preset--color--band-text); }
.mh-chip:hover, .is-style-mh-band .mh-chip:hover { border-color: var(--wp--preset--color--band-mint); color: var(--wp--preset--color--band-mint); }
.mh-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.mh-dot--dev { background: #5FC2B5; } .mh-dot--it { background: #F2C766; } .mh-dot--ai { background: #F0A37A; } .mh-dot--sec { background: #7FB2EE; }

/* Featured video card in the hero */
.mh-feat { background: var(--wp--preset--color--band-2); border: 1px solid var(--wp--preset--color--band-line); border-radius: 16px; overflow: hidden; }
.mh-feat .wp-block-post-template { margin: 0; }
.mh-feat .wp-block-post-featured-image { margin: 0; }
.mh-feat .wp-block-post-featured-image img { border-radius: 0; }
.mh-feat__body { padding: 1.25rem 1.375rem 1.375rem; }
.mh-feat__kicker { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--band-yellow); margin: 0; }
.rtl .mh-feat__kicker { letter-spacing: 0; font-size: .8125rem; }
.mh-feat__title { font-size: 1.375rem; margin-block: .5rem; }
.mh-feat__title a { color: #fff; text-decoration: none; }
.mh-feat__title a:hover { text-decoration: underline; }
.mh-feat__more { color: var(--wp--preset--color--band-mint); min-height: 44px; display: inline-flex; align-items: center; }
.mh-feat__empty { padding: 1.5rem; color: var(--wp--preset--color--band-muted); }

/* ---------- Sections ---------- */
.mh-section { padding-block: clamp(3rem, 6vw, 4.5rem); }
.mh-section--tight { padding-block-start: 0; }
.mh-sec-head { margin-block-end: 2rem; gap: 1rem 1.5rem; }
.mh-sec-head__text > * { margin-block: 0; }
.mh-sec-head h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem); }
.mh-sec-head__intro { color: var(--wp--preset--color--muted); margin-block-start: .5rem !important; max-width: 62ch; }
.is-style-mh-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-block-end: .5rem !important; }
.rtl .is-style-mh-eyebrow { letter-spacing: 0; font-size: .8125rem; }
.mh-more { margin: 0; }
.mh-more a { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; font-family: var(--wp--preset--font-family--display); font-weight: 500; text-decoration: none; }
.mh-more a::after { content: "→"; }
.rtl .mh-more a::after { content: "←"; }
.mh-more--ext a::after, .rtl .mh-more--ext a::after { content: "↗"; }
.mh-more a:hover { text-decoration: underline; }
.mh-empty { color: var(--wp--preset--color--muted); }

/* Topics */
.mh-topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.mh-topic { display: flex; flex-direction: column; gap: .625rem; height: 100%; padding: 1.375rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--mh-radius-lg); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); text-decoration: none; transition: border-color var(--mh-ease); }
.mh-topic:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--contrast); }
.mh-topic__ico { width: 44px; height: 44px; border-radius: var(--mh-radius-md); display: grid; place-items: center; }
.mh-topic__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.1875rem; }
.mh-topic__desc { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.mh-ico--dev { background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); }
.mh-ico--it { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent-text); }
.mh-ico--ai { background: var(--wp--preset--color--ember-soft); color: var(--wp--preset--color--ember-text); }
.mh-ico--sec { background: var(--wp--preset--color--info-soft); color: var(--wp--preset--color--info); }

/* Tags (post terms) */
.is-style-mh-tags { display: flex; flex-wrap: wrap; gap: .375rem; }
.is-style-mh-tags .wp-block-post-terms__separator { display: none; }
.is-style-mh-tags a, .mh-tag { display: inline-flex; align-items: center; padding: .125rem .625rem; border-radius: 999px; font-family: var(--wp--preset--font-family--display); font-size: .8125rem; font-weight: 600; line-height: 1.6; text-decoration: none; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); }
.is-style-mh-tags a:hover { text-decoration: underline; }
.mh-tag--it, .is-style-mh-tags a.mh-tag--it { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent-text); }
.mh-tag--ai, .is-style-mh-tags a.mh-tag--ai { background: var(--wp--preset--color--ember-soft); color: var(--wp--preset--color--ember-text); }
.mh-tag--sec, .is-style-mh-tags a.mh-tag--sec { background: var(--wp--preset--color--info-soft); color: var(--wp--preset--color--info); }
.mh-meta-row { gap: .375rem .875rem; align-items: center; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.mh-meta-row > * { margin: 0; }
.mh-meta-row--muted .wp-block-post-date, .mh-reading-time { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.mh-meta-row--muted .mh-reading-time::before { content: "·"; margin-inline-end: .875rem; }
.mh-video-badge { display: none; align-items: center; gap: .3rem; color: var(--wp--preset--color--ember-text); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; margin: 0; }
.format-video .mh-video-badge { display: inline-flex; }
.mh-video-badge::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rtl .mh-video-badge::before { transform: scaleX(-1); }

/* Thumbnails: featured images and YouTube thumbnails, 16:9, with a play mark on video posts */
.is-style-mh-thumb, .mh-thumb { position: relative; display: block; margin: 0; border-radius: var(--mh-radius-lg); overflow: hidden; background: var(--wp--preset--color--primary-dark); aspect-ratio: 16 / 9; }
.is-style-mh-thumb img, .mh-thumb img { width: 100%; height: 100% !important; object-fit: cover; display: block; transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }
.is-style-mh-thumb a:hover img, .mh-thumb:hover img { transform: scale(1.03); }
.format-video .is-style-mh-thumb::after, .mh-thumb__play { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%; pointer-events: none; background: rgb(184 74 23 / .95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: 0 8px 24px -8px rgb(0 0 0 / .6); }
.mh-thumb__play { display: block; }

/* Latest posts: lead + list */
.mh-posts { gap: 2rem; }
.mh-lead .wp-block-post-template, .mh-list .wp-block-post-template { margin: 0; padding: 0; }
.mh-lead li > * + * { margin-block-start: .875rem; }
.mh-lead .wp-block-post-title a, .mh-list .wp-block-post-title a, .mh-cards .wp-block-post-title a, .mh-vcard__title a, .mh-course__title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.mh-lead .wp-block-post-title a:hover, .mh-list .wp-block-post-title a:hover, .mh-cards .wp-block-post-title a:hover, .mh-vcard__title a:hover, .mh-course__title a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
.mh-list li { padding-block: 1.125rem; border-block-end: 1px solid var(--wp--preset--color--border); }
.mh-list li:first-child { padding-block-start: 0; }
.mh-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.125rem; align-items: start; }
.mh-row:not(:has(.wp-block-post-featured-image)) { grid-template-columns: minmax(0, 1fr); }
.mh-row .is-style-mh-thumb { border-radius: var(--mh-radius-md); }
.mh-row .is-style-mh-thumb::after { width: 34px; height: 34px; background-size: 16px; }
.mh-row__text > * { margin-block: 0 .375rem; }
.mh-row .wp-block-post-title { line-height: 1.35; }

/* Archive cards */
.mh-cards { gap: 2.5rem 1.5rem; }
.mh-cards > li { display: flex; flex-direction: column; gap: .75rem; }
.mh-cards > li > * { margin: 0; }
.mh-cards .wp-block-post-excerpt__excerpt { margin: 0; }
.wp-block-query-pagination { margin-block-start: 3rem; gap: .5rem; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; padding-inline: .5rem; border-radius: var(--mh-radius-md); border: 1px solid var(--wp--preset--color--border); text-decoration: none; }
.wp-block-query-pagination .current { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--contrast); }
.rtl .wp-block-query-pagination-previous-arrow, .rtl .wp-block-query-pagination-next-arrow { display: inline-block; transform: scaleX(-1); }

/* Video grid (channel feed, related) */
.mh-video-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.mh-video-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mh-vcard { display: flex; flex-direction: column; gap: .625rem; align-items: flex-start; }
.mh-vcard .mh-thumb { width: 100%; border-radius: var(--mh-radius-md); }
.mh-vcard__title { font-size: 1.0625rem; line-height: 1.4; margin: 0; }
.mh-vcard .mh-meta { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.mh-related h2 { margin-block: 0 1.75rem; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem); }

/* YouTube channel card */
.mh-yt-card { display: flex; align-items: center; gap: .875rem 1rem; flex-wrap: wrap; margin-block-start: 2.25rem; padding: 1.25rem 1.5rem; border: 1px solid var(--wp--preset--color--border); border-radius: var(--mh-radius-lg); background: var(--wp--preset--color--surface); }
.is-style-mh-card .mh-yt-card { margin: 0; padding: 0; border: 0; background: none; }
.mh-yt-card img { width: 52px; height: 52px; border-radius: 50%; background: var(--wp--preset--color--surface-2); }
.mh-yt-card > div { flex: 1 1 10rem; }
.mh-yt-card p { margin: 0; }
.mh-yt-card__name { font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.mh-yt-card__sub { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.mh-article-grid__aside .mh-yt-card .mh-btn { width: 100%; }

/* Courses */
.mh-course-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mh-course { display: flex; flex-direction: column; border: 1px solid var(--wp--preset--color--border); border-radius: var(--mh-radius-lg); background: var(--wp--preset--color--surface); overflow: hidden; }
.mh-course__img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--wp--preset--color--primary-dark); }
.mh-course__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.125rem 1.25rem 1.25rem; flex: 1; }
.mh-course__body > p { margin: 0; }
.mh-course__body .mh-meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.mh-course__title { font-size: 1.1875rem; margin: 0; }
.mh-course__desc { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.mh-course__foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-block-start: auto !important; padding-block-start: .875rem; border-block-start: 1px solid var(--wp--preset--color--border); }
.mh-course__price { font-family: var(--wp--preset--font-family--display); font-weight: 600; }
.mh-course__host { display: inline-flex; align-items: center; gap: .25rem; color: var(--wp--preset--color--muted); font-size: .8125rem; direction: ltr; }

/* Cards and about */
.is-style-mh-card { border: 1px solid var(--wp--preset--color--border); border-radius: var(--mh-radius-lg); background: var(--wp--preset--color--surface); padding: 1.25rem; }
.is-style-mh-soft { border-radius: var(--mh-radius-lg); background: var(--wp--preset--color--surface-2); padding: 1.25rem; }
.mh-about { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 2rem; border-radius: var(--mh-radius-xl); }
.mh-about > * { margin: 0 !important; }
.mh-about__text > * + * { margin-block-start: .5rem; }
.mh-about__act { flex-direction: column; align-items: stretch; }
.is-style-mh-avatar img { border-radius: 50%; background: var(--wp--preset--color--surface-2); }
.is-style-mh-chips { list-style: none; padding: 0; margin: .875rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; direction: ltr; justify-content: flex-start; }
.rtl .is-style-mh-chips { justify-content: flex-end; }
.is-style-mh-chips li { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; padding: .1875rem .5625rem; border-radius: var(--mh-radius-sm); background: var(--wp--preset--color--surface-2); border: 1px solid var(--wp--preset--color--border); margin: 0; }

/* Newsletter / CTA band card */
.mh-news { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--mh-radius-xl); gap: 1.5rem 2rem; align-items: center; }
.mh-news h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); margin: 0; }
.mh-news p { margin-block: .5rem 0; }
.mh-news__act { justify-content: flex-end; }
.mh-newsletter { display: grid; gap: .5rem; }
.mh-newsletter label { font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--wp--preset--color--band-text); }
.mh-newsletter__row { display: flex; flex-wrap: wrap; gap: .625rem; }
.mh-newsletter input { flex: 1 1 14rem; min-height: 48px; padding: .625rem .875rem; font: inherit; border-radius: var(--mh-radius-md); border: 1px solid #3E5A54; background: #0B1A18; color: #fff; }
.mh-newsletter input::placeholder { color: #8FA7A1; }
.mh-newsletter__hint { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--band-muted); margin: 0; }

/* ---------- Archive header ---------- */
.mh-archive-head { padding-block: clamp(2.5rem, 5vw, 4rem); }
.mh-archive-head__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin-block: .875rem 0; }
.mh-archive-head__desc { color: var(--wp--preset--color--band-muted); font-size: var(--wp--preset--font-size--large); max-width: 60ch; margin-block-start: .75rem; }
.mh-search-big { max-width: 34rem; margin-block-start: 1.5rem; }
.mh-search-big .wp-block-search__input { min-height: 48px; border-radius: var(--mh-radius-md); border: 1px solid #3E5A54; background: #0B1A18; color: #fff; padding-inline: .875rem; }
.mh-search-big .wp-block-search__button { min-height: 48px; border-radius: var(--mh-radius-md); background: #E0A526; color: #14201F; }

/* ---------- Single post ---------- */
.mh-single { padding-block: clamp(1.5rem, 4vw, 2.5rem) 3rem; }
.mh-single__head { max-width: 860px; }
.mh-single__head > * + * { margin-block-start: 1rem; }
.mh-single__title { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem); }
.mh-single__dek { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); }
.mh-single__dek p { margin: 0; }
.mh-byline { gap: .75rem; align-items: center; margin-block-start: 1.375rem !important; }
.mh-byline__text > * { margin: 0; }
.mh-byline .wp-block-post-author-name { font-family: var(--wp--preset--font-family--display); font-weight: 500; }
.mh-single-image { margin-block-start: 2rem; border-radius: 16px; overflow: hidden; }
.mh-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.mh-crumbs li { display: inline-flex; align-items: center; gap: .5rem; }
.mh-crumbs a { color: var(--wp--preset--color--muted); }
.mh-crumbs a:hover { color: var(--wp--preset--color--primary); }
.mh-crumbs [aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Player (lite YouTube embed) */
.mh-player { margin: 2rem 0 0; border: 1px solid var(--wp--preset--color--border); border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--surface); }
.mh-prose .mh-player { margin-block: 1.75rem; }
.mh-player__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.mh-player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mh-yt { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.mh-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-yt__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: rgb(184 74 23 / .96); color: #fff; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .7); transition: transform var(--mh-ease); }
.mh-yt__play svg { margin-inline-start: 4px; }
.mh-yt:hover .mh-yt__play { transform: scale(1.06); }
.mh-yt:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: -3px; }
.mh-player__bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem 1rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin: 0; }
.mh-player__bar a { display: inline-flex; min-height: 32px; align-items: center; }

/* Article layout: TOC | content | aside */
.mh-article-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 3rem; align-items: start; margin-block-start: 2.5rem !important; }
.mh-article-grid > * { margin: 0 !important; }
.mh-article-grid__toc { position: sticky; top: 1.5rem; }
.admin-bar .mh-article-grid__toc { top: calc(32px + 1.5rem); }
.mh-article-grid__aside { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1.5rem; }
.mh-toc__title { font-family: var(--wp--preset--font-family--mono); font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--muted); margin: 0 0 .625rem; }
.rtl .mh-toc__title { letter-spacing: 0; }
.mh-toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--wp--preset--color--border); font-size: var(--wp--preset--font-size--small); }
.mh-toc a { display: block; padding: .4375rem .875rem; margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--wp--preset--color--muted); text-decoration: none; }
.mh-toc a:hover { color: var(--wp--preset--color--contrast); }
.mh-toc a[aria-current="true"] { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); font-weight: 600; }
.mh-course-cta { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary-soft); }
.mh-course-cta .is-style-mh-eyebrow { color: var(--wp--preset--color--primary); }
.mh-course-cta > * { margin-block: 0 .625rem; }

/* Prose */
.mh-prose { font-size: 1.125rem; max-width: 70ch; }
.mh-prose > * + * { margin-block-start: 1.375rem; }
.mh-prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.75rem); margin-block-start: 2.75rem; scroll-margin-top: 1.5rem; }
.mh-prose h3 { font-size: 1.25rem; margin-block-start: 2rem; scroll-margin-top: 1.5rem; }
.mh-prose :where(ul, ol) { padding-inline-start: 1.5rem; }
.mh-prose li + li { margin-block-start: .5rem; }
.mh-prose :where(p, li) code { font-family: var(--wp--preset--font-family--mono); font-size: .88em; background: var(--wp--preset--color--surface-2); padding: .125rem .375rem; border-radius: 5px; direction: ltr; unicode-bidi: isolate; }
.wp-block-code { direction: ltr; text-align: left; position: relative; overflow-x: auto; white-space: pre; }
.wp-block-code code { white-space: pre; }
.mh-copy { position: absolute; top: .5rem; right: .5rem; font: inherit; font-family: var(--wp--preset--font-family--body); font-size: .75rem; min-height: 32px; padding-inline: .625rem; border-radius: 6px; border: 1px solid #3E5A54; background: #13302B; color: #E6EEEC; cursor: pointer; }
.mh-copy:hover { border-color: #86D6CB; }
.wp-block-quote { border-inline-start: 4px solid var(--wp--preset--color--accent); padding-inline-start: 1.25rem; margin-inline: 0; }
.is-style-mh-callout { display: flex; gap: .875rem; padding: 1.125rem 1.25rem; border-radius: var(--mh-radius-md); background: var(--wp--preset--color--accent-soft); font-size: 1rem; }
.is-style-mh-callout::before { content: ""; flex: none; width: 20px; height: 20px; margin-block-start: .25rem; background: var(--wp--preset--color--accent-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mh-post-tags { margin-block-start: 2rem !important; font-size: var(--wp--preset--font-size--small); }
.mh-author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; margin-block-start: 3rem !important; padding: 1.5rem; }
.mh-author > * { margin: 0 !important; }
.mh-author__name { font-family: var(--wp--preset--font-family--display); font-size: 1.1875rem; font-weight: 600; }
.mh-author__name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.mh-single .wp-block-post-navigation-link { margin-block-start: 2rem; }
.mh-comments { margin-block-start: 3rem; max-width: 760px; }

/* ---------- Learn ---------- */
.mh-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.mh-ways li { margin: 0; }
.mh-ways a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: 1rem 1.125rem; border-radius: var(--mh-radius-lg); background: var(--wp--preset--color--band-2); border: 1px solid var(--wp--preset--color--band-line); color: var(--wp--preset--color--band-text); text-decoration: none; }
.is-style-mh-band .mh-ways a { color: var(--wp--preset--color--band-text); }
.mh-ways a:hover, .is-style-mh-band .mh-ways a:hover { border-color: var(--wp--preset--color--band-mint); color: #fff; }
.mh-way__ico { grid-row: span 2; width: 44px; height: 44px; border-radius: var(--mh-radius-md); display: grid; place-items: center; background: #0B1A18; color: var(--wp--preset--color--band-yellow); }
.mh-ways strong { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.0625rem; }
.mh-way__desc { color: var(--wp--preset--color--band-muted); font-size: var(--wp--preset--font-size--small); }
.mh-path { gap: 0; border: 1px solid var(--wp--preset--color--border); border-radius: var(--mh-radius-lg); background: var(--wp--preset--color--surface); overflow: hidden; }
.mh-step { padding: 1.375rem; border-inline-end: 1px solid var(--wp--preset--color--border); border-block-end: 1px solid var(--wp--preset--color--border); margin: 0 !important; }
.mh-step > * { margin-block: 0 .375rem; }
.mh-step__n { font-family: var(--wp--preset--font-family--mono); font-size: .8125rem; color: var(--wp--preset--color--primary); font-weight: 500; }
.mh-step__kind { display: inline-flex; padding: .125rem .625rem; border-radius: 999px; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); font-size: .75rem; font-weight: 600; margin-block-start: .75rem !important; }
.mh-path { margin-block-end: -1px; }
.mh-series { gap: 1.25rem; }
.mh-serie { margin: 0 !important; }
.mh-serie h3 { display: flex; align-items: center; gap: .625rem; margin: 0 0 .375rem; }
.mh-serie h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; flex: none; background: #5FC2B5; }
.mh-serie--it h3::before { background: #E0A526; } .mh-serie--ai h3::before { background: #E2702A; } .mh-serie--sec h3::before { background: #4F8FD6; }
.mh-serie h3 a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.mh-serie h3 a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }

/* ---------- Footer ---------- */
.mh-site-footer { margin-block-start: 0; }
.mh-footer__grid { gap: 2rem; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) !important; }
.mh-footer__about .wp-block-site-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.mh-footer__h { font-size: 1rem; margin: 0 0 .75rem; }
.mh-footer__list { list-style: none; margin: 0; padding: 0; }
.mh-footer__list a { display: inline-flex; min-height: 36px; align-items: center; color: var(--wp--preset--color--muted); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.mh-footer__list a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
.mh-footer__bottom { margin-block-start: 2.5rem !important; padding-block-start: 1.25rem; border-block-start: 1px solid var(--wp--preset--color--border); }
.mh-footer__bottom p { margin: 0; }
.mh-social { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; gap: .375rem; }
.mh-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--mh-radius-md); border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--contrast); }
.mh-social a:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.mh-article-grid { grid-template-columns: 200px minmax(0, 1fr); }
	.mh-article-grid__aside { grid-column: 2; position: static; flex-direction: row; flex-wrap: wrap; }
	.mh-article-grid__aside > * { flex: 1 1 16rem; margin: 0 !important; }
}
@media (max-width: 1023px) {
	.mh-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-video-grid, .mh-video-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-about { grid-template-columns: auto minmax(0, 1fr); }
	.mh-about__act { grid-column: 1 / -1; flex-direction: row; }
	.mh-footer__grid { grid-template-columns: 1fr 1fr !important; }
	.mh-article-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.mh-article-grid__toc { position: static; }
	.mh-article-grid__aside { grid-column: auto; }
	.mh-toc { border: 1px solid var(--wp--preset--color--border); border-radius: var(--mh-radius-md); padding: 1rem; background: var(--wp--preset--color--surface); }
	.mh-hero__cols { flex-wrap: wrap !important; }
	.mh-hero__cols > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 781px) {
	.mh-posts { flex-wrap: wrap !important; }
	.mh-posts > .wp-block-column { flex-basis: 100% !important; }
}
@media (max-width: 767px) {
	.mh-header__row { min-height: 64px; gap: .5rem; }
	.mh-header .mh-header__cta { display: none; }
	.mh-topics { grid-template-columns: 1fr; gap: .75rem; }
	.mh-topic { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; padding: 1rem; }
	.mh-topic__ico { grid-row: span 2; }
	.mh-row { grid-template-columns: 104px minmax(0, 1fr); gap: .875rem; }
	.mh-video-grid, .mh-video-grid--3, .mh-course-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.mh-about { grid-template-columns: 1fr; padding: 1.5rem; }
	.mh-about .is-style-mh-avatar img { width: 88px !important; height: 88px !important; }
	.mh-about__act { flex-direction: column; }
	.mh-hero__cta .wp-block-button { flex: 1 1 100%; }
	.mh-hero__cta .wp-block-button__link { width: 100%; }
	.mh-yt-card .mh-btn { width: 100%; }
	.mh-prose { font-size: 1.0625rem; }
	.mh-yt__play { width: 60px; height: 60px; }
	.mh-footer__grid { grid-template-columns: 1fr 1fr !important; gap: 1.75rem; }
	.mh-footer__about { grid-column: 1 / -1; }
	.mh-crumbs [aria-current] { max-width: 22ch; }
}
@media (max-width: 374px) {
	.mh-footer__grid { grid-template-columns: 1fr !important; }
	.mh-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
	.mh-site-header, .mh-site-footer, .mh-article-grid__aside, .mh-article-grid__toc, .mh-comments, .mh-related, .mh-player { display: none !important; }
	.mh-article-grid { display: block; }
}

/* Avatars keep their box even if the image fails to load (alt text would otherwise widen the column). */
.wp-block-avatar { flex: none; line-height: 0; }
.wp-block-avatar__image { display: block; inline-size: auto; block-size: auto; max-inline-size: none; aspect-ratio: 1; object-fit: cover; overflow: hidden; background: var(--wp--preset--color--surface-2); font-size: 0; }
.wp-block-avatar__image.avatar-44 { inline-size: 44px; block-size: 44px; }
.wp-block-avatar__image.avatar-72 { inline-size: 72px; block-size: 72px; }
.mh-author__name, .mh-byline .wp-block-post-author-name { overflow-wrap: anywhere; }
/* Give the copy button its own strip so it never covers a long first line. */
.wp-block-code:has(.mh-copy) { padding-block-start: 2.75rem; }
/* Learning path: always exactly four steps, no empty auto-fill track. */
.mh-path.is-layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .mh-path.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .mh-path.is-layout-grid { grid-template-columns: minmax(0, 1fr); } }
/* Course card without a cover image: branded placeholder instead of a flat block. */
span.mh-course__img { background: var(--wp--preset--color--primary-dark) url("../images/mark.svg") center / 56px no-repeat; background-image: url("../images/mark.svg"), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px, 24px 24px, 24px 24px; background-position: center; background-repeat: no-repeat, repeat, repeat; }
/* IBM Plex Mono has no Arabic glyphs: Arabic labels switch to the body font (code and the prompt stay mono). */
.rtl :is(.mh-feat__kicker, .is-style-mh-eyebrow, .is-style-mh-chips li, .mh-toc__title, .mh-step__n),
:lang(ar) :is(.mh-feat__kicker, .is-style-mh-eyebrow, .is-style-mh-chips li, .mh-toc__title, .mh-step__n) { font-family: var(--wp--preset--font-family--body); letter-spacing: 0; text-transform: none; font-weight: 600; }

/* ---------- Home hero v2: portrait ---------- */
.mh-hero:has(.mh-hero__visual) { padding-block-end: 0; overflow: hidden; }
.mh-hero:has(.mh-hero__visual) .mh-hero__cols { align-items: stretch !important; }
.mh-hero:has(.mh-hero__visual) .mh-hero__text { padding-block-end: clamp(3.5rem, 6vw, 5.5rem); }
.mh-hero__visual-col { align-self: stretch !important; display: flex; flex-direction: column; justify-content: flex-end; }
.mh-hero__visual { position: relative; min-block-size: 540px; display: flex; align-items: flex-end; justify-content: center; isolation: isolate; }
/* Cedar disc + saffron ring behind the portrait, so the dark suit separates from the dark band. */
.mh-hero__visual::before,
.mh-hero__visual::after { content: ""; position: absolute; z-index: -1; inset-inline: 0; margin-inline: auto; border-radius: 50%; aspect-ratio: 1; }
.mh-hero__visual::before { inline-size: min(430px, 88%); inset-block-end: 56px; background: radial-gradient(circle at 50% 38%, #1F7A70 0%, #0F5C55 45%, #0A3B37 100%); box-shadow: 0 30px 80px -20px rgba(15, 92, 85, .55); }
.mh-hero__visual::after { inline-size: min(482px, 98%); inset-block-end: 30px; border: 1.5px dashed rgba(224, 165, 38, .45); }
.mh-hero__portrait { margin: 0 !important; position: relative; z-index: 1; inline-size: min(460px, 100%); line-height: 0; }
.mh-hero__portrait img { display: block; inline-size: 100% !important; block-size: auto !important; aspect-ratio: 1; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)); }
/* Floating badges */
.mh-hero__badge { position: absolute; z-index: 2; margin: 0 !important; padding: .625rem .875rem; border-radius: 12px; background: rgba(15, 38, 34, .88); border: 1px solid var(--wp--preset--color--band-line); color: var(--wp--preset--color--band-muted); font-size: .8125rem; line-height: 1.4; backdrop-filter: blur(6px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.mh-hero__badge strong { color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .9375rem; }
.mh-hero__badge--name { inset-block-start: 34%; inset-inline-start: 0; border-inline-start: 3px solid var(--wp--preset--color--band-yellow); }
.mh-hero__badge--yt { inset-block-start: 12%; inset-inline-end: 0; padding: 0; border-radius: 999px; }
.mh-hero__badge--yt a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding-inline: .875rem 1rem; color: #fff; font-weight: 600; text-decoration: none; direction: ltr; }
.mh-hero__badge--yt a::before { content: ""; inline-size: 22px; block-size: 16px; border-radius: 4px; background: #E62117 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M9 4.5v7l6-3.5z' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat; }
.mh-hero__badge--yt a:hover { text-decoration: underline; }
/* Latest video, compact card over the bottom of the portrait */
.mh-feat--compact { position: absolute; z-index: 3; inset-block-end: 24px; inset-inline-end: 0; inline-size: min(340px, 100%); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
.mh-feat--compact .wp-block-post-template > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
.mh-feat--compact .wp-block-post-featured-image { block-size: 100%; }
.mh-feat--compact .wp-block-post-featured-image :is(a, img) { block-size: 100% !important; }
.mh-feat--compact .mh-feat__body { padding: .75rem .875rem; }
.mh-feat--compact .mh-feat__title { font-size: .9375rem; line-height: 1.35; margin: .25rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mh-feat--compact .mh-feat__kicker { font-size: .6875rem; }
.mh-feat--compact .mh-feat__empty { padding: 1rem; font-size: .875rem; }
@media (max-width: 1023px) {
	.mh-hero__visual { min-block-size: 460px; }
	.mh-hero__badge--name { inset-block-start: 28%; }
}
@media (max-width: 781px) {
	.mh-hero:has(.mh-hero__visual) .mh-hero__text { padding-block-end: 1rem; }
	.mh-hero__visual { min-block-size: 0; padding-block-start: 1rem; flex-direction: column; align-items: center; }
	.mh-hero__portrait { inline-size: min(320px, 84%); }
	.mh-hero__visual::before { inline-size: min(300px, 78%); inset-block-end: auto; inset-block-start: 3.25rem; }
	.mh-hero__visual::after { inline-size: min(336px, 88%); inset-block-end: auto; inset-block-start: 2.25rem; }
	.mh-hero__badge--name { display: none; }
	.mh-hero__badge--yt { inset-block-start: .25rem; inset-inline-end: 0; }
	.mh-feat--compact { position: relative; inset: auto; inline-size: 100%; margin-block: -2.5rem 1.5rem; }
}
.mh-feat--compact .wp-block-post-featured-image { inline-size: 112px; min-inline-size: 0; overflow: hidden; aspect-ratio: auto !important; }
.mh-feat--compact .wp-block-post-featured-image img { inline-size: 100% !important; object-fit: cover; aspect-ratio: auto !important; }
.mh-feat--compact .wp-block-post-featured-image::after,
.mh-feat--compact .wp-block-post-featured-image a::after { transform: scale(.55); }
.mh-hero__badge--name { inset-block-start: 56%; }
@media (max-width: 781px) {
	.mh-hero__visual { padding-block-end: 1.75rem; }
	.mh-feat--compact { margin-block: -2.5rem 0; }
}
.mh-feat--compact .is-style-mh-thumb { border-radius: 0; }
/* Hero v2.1: nothing sits on the portrait. The video card lives in the text column. */
.mh-hero__whoami { margin-block: .375rem 0 !important; font-family: var(--wp--preset--font-family--mono); font-size: .875rem; color: var(--wp--preset--color--band-muted); }
.mh-hero__whoami strong { color: var(--wp--preset--color--band-mint); font-weight: 500; }
.rtl .mh-hero__whoami, :lang(ar) .mh-hero__whoami { font-family: var(--wp--preset--font-family--body); }
.mh-hero .mh-feat--compact { position: relative; inset: auto; z-index: auto; inline-size: min(460px, 100%); margin-block: 2rem 0; box-shadow: none; }
@media (max-width: 781px) {
	.mh-hero .mh-feat--compact { margin-block: 1.75rem 0; }
	.mh-hero__visual { padding-block: 1rem 0; }
	.mh-hero__visual::before { inset-block-start: 2.5rem; }
	.mh-hero__visual::after { inset-block-start: 1.5rem; }
}
@media (min-width: 1024px) {
	.mh-hero__portrait { inline-size: min(500px, 100%); }
	.mh-hero__visual::before { inline-size: min(470px, 90%); inset-block-end: 60px; }
	.mh-hero__visual::after { inline-size: min(526px, 100%); inset-block-end: 32px; }
}
/* Hero v2.2: name card + latest video sit above the portrait, never on it. */
.mh-hero__visual-col { justify-content: space-between; gap: 1.5rem; padding-block-start: clamp(3rem, 6vw, 5rem); }
.mh-hero:has(.mh-hero__visual) { padding-block-start: 0; }
.mh-hero:has(.mh-hero__visual) .mh-hero__text { padding-block-start: clamp(3rem, 6vw, 5rem); }
.mh-hero__meta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; margin: 0 !important; }
.mh-hero__meta > * { margin: 0 !important; }
.mh-hero__idcard { display: flex; flex-direction: column; justify-content: center; gap: .125rem; padding: .75rem 1rem; border-radius: 14px; background: var(--wp--preset--color--band-2); border: 1px solid var(--wp--preset--color--band-line); border-inline-start: 3px solid var(--wp--preset--color--band-yellow); color: var(--wp--preset--color--band-muted); font-size: .875rem; line-height: 1.45; }
.mh-hero__idcard-cmd { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; color: var(--wp--preset--color--band-mint); direction: ltr; unicode-bidi: isolate; text-align: start; }
.mh-hero__idcard strong { color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1rem; }
.mh-hero .mh-hero__meta .mh-feat--compact { margin: 0; flex: 1 1 260px; inline-size: auto; }
.mh-hero__visual { min-block-size: 0; flex: 1 1 auto; }
@media (min-width: 1024px) {
	.mh-hero__portrait { inline-size: min(440px, 100%); }
	.mh-hero__visual::before { inline-size: min(410px, 86%); inset-block-end: 54px; }
	.mh-hero__visual::after { inline-size: min(462px, 96%); inset-block-end: 28px; }
}
@media (max-width: 781px) {
	.mh-hero__visual-col { padding-block-start: 0; }
	.mh-hero__meta { flex-direction: column; }
	.mh-hero .mh-hero__meta .mh-feat--compact { flex: none; inline-size: 100%; }
}
@media (min-width: 1024px) {
	.mh-hero__portrait { inline-size: min(420px, 100%); }
	.mh-hero__visual::before { inline-size: min(390px, 84%); inset-block-end: 50px; }
	.mh-hero__visual::after { inline-size: min(436px, 94%); inset-block-end: 26px; }
	.mh-hero__visual { min-block-size: 470px; }
}
.mh-hero__meta .mh-feat__title { -webkit-line-clamp: 3; }
/* 404: one centred column */
.mh-404 { text-align: center; }
.mh-404 > * { margin-inline: auto !important; }
.mh-404 .is-style-mh-prompt { text-align: start; }
.mh-404 .mh-search-big { max-inline-size: 560px; }
.mh-404 .is-style-mh-chips, .rtl .mh-404 .is-style-mh-chips { justify-content: center; }