/*
Theme Name: Hello Elementor Child — MH
Theme URI: https://mehrabhosain.com
Description: Coded article templates for mehrabhosain.com. Blog posts render from single.php with plain PHP and CSS, no page builder. The homepage and other pages continue to use Elementor.
Author: Mehrab Hosain
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

:root {
	--mh-text: #1B1D24;
	--mh-muted: #6E7178;
	--mh-faint: #A6ABB8;
	--mh-accent: #3D49C9;
	--mh-accent-hover: #4B57E0;
	--mh-tint: #ECEDFB;
	--mh-line: #E5E3DC;
	--mh-surface: #F7F6F3;
	--mh-dark: #12141C;
	--mh-sans: 'Inter', system-ui, -apple-system, sans-serif;
	--mh-display: 'Space Grotesk', var(--mh-sans);
	--mh-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- shell ---------- */

.mh-article {
	font-family: var(--mh-sans);
	color: var(--mh-text);
	padding: 40px 24px 80px;
}

.mh-grid {
	display: grid;
	grid-template-columns: 190px minmax(0, 720px);
	gap: 56px;
	justify-content: center;
	align-items: start;
}

.mh-rail { position: sticky; top: 96px; }
.mh-body { min-width: 0; }

@media (max-width: 1060px) {
	.mh-grid { grid-template-columns: minmax(0, 720px); justify-content: center; gap: 0; }
	.mh-rail { position: static; margin-bottom: 28px; }
}

/* ---------- breadcrumbs ---------- */

.mh-crumbs {
	font-family: var(--mh-mono);
	font-size: 12px;
	color: var(--mh-faint);
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.mh-crumbs a { color: var(--mh-muted); text-decoration: none; }
.mh-crumbs a:hover { color: var(--mh-accent); }
.mh-crumbs span[aria-current] { color: var(--mh-text); }

/* ---------- header ---------- */

.mh-hero {
	width: 100%;
	border-radius: 14px;
	display: block;
	margin-bottom: 28px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--mh-surface);
}

.mh-eyebrow {
	font-family: var(--mh-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mh-accent);
	margin-bottom: 12px;
	display: block;
	text-decoration: none;
}

.mh-title {
	font-family: var(--mh-display);
	font-weight: 600;
	font-size: clamp(30px, 4.4vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	color: var(--mh-text);
}

.mh-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-size: 13px;
	color: var(--mh-muted);
	padding-bottom: 24px;
	border-bottom: 1px solid var(--mh-line);
	margin-bottom: 32px;
}
.mh-meta a { color: var(--mh-muted); }

/* ---------- table of contents ---------- */

.mh-rail-h {
	font-family: var(--mh-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mh-faint);
	margin: 0 0 10px;
}

.mh-toc { border-left: 2px solid var(--mh-line); padding-left: 14px; margin-bottom: 28px; }
.mh-toc ol { list-style: none; margin: 0; padding: 0; }
.mh-toc li { margin-bottom: 9px; }
.mh-toc li.lvl-3 { padding-left: 12px; }
.mh-toc a {
	font-size: 13px;
	line-height: 1.45;
	color: var(--mh-muted);
	text-decoration: none;
	display: block;
}
.mh-toc a:hover, .mh-toc a.is-active { color: var(--mh-accent); }

/* ---------- share ---------- */

.mh-share { display: flex; gap: 8px; flex-wrap: wrap; }
.mh-share a, .mh-share button {
	width: 34px; height: 34px;
	border: 1px solid var(--mh-line);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mh-muted);
	background: #fff;
	cursor: pointer;
	padding: 0;
	transition: border-color .15s, color .15s;
}
.mh-share a:hover, .mh-share button:hover { border-color: var(--mh-accent); color: var(--mh-accent); }
.mh-share svg { width: 16px; height: 16px; fill: currentColor; }

.mh-share-foot {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 40px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--mh-line);
}
.mh-share-foot .mh-rail-h { margin: 0; }

/* ---------- article body ---------- */

.mh-content { font-size: 18px; line-height: 1.75; }
.mh-content > * + * { margin-top: 1.35em; }
.mh-content p { margin: 0; }

.mh-content h2 {
	font-family: var(--mh-display);
	font-weight: 600;
	font-size: 27px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 2.2em 0 0;
	scroll-margin-top: 100px;
}
.mh-content h3 {
	font-family: var(--mh-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.35;
	margin: 1.8em 0 0;
	scroll-margin-top: 100px;
}
.mh-content h2 + *, .mh-content h3 + * { margin-top: 0.7em; }

.mh-content a { color: var(--mh-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mh-content a:hover { color: var(--mh-accent-hover); }

.mh-content ul, .mh-content ol { padding-left: 1.3em; }
.mh-content li { margin-bottom: 0.55em; }
.mh-content li::marker { color: var(--mh-faint); }

.mh-content img, .mh-content figure img { max-width: 100%; height: auto; border-radius: 10px; }
.mh-content figcaption { font-size: 13px; color: var(--mh-muted); margin-top: 8px; }

.mh-content blockquote {
	border-left: 3px solid var(--mh-accent);
	padding: 2px 0 2px 20px;
	margin-left: 0;
	color: var(--mh-muted);
	font-size: 19px;
}

.mh-content code {
	font-family: var(--mh-mono);
	font-size: 0.87em;
	background: var(--mh-surface);
	padding: 2px 6px;
	border-radius: 4px;
}
.mh-content pre {
	font-family: var(--mh-mono);
	font-size: 14px;
	line-height: 1.65;
	background: var(--mh-dark);
	color: #E8E9ED;
	padding: 18px 20px;
	border-radius: 10px;
	overflow-x: auto;
}
.mh-content pre code { background: none; padding: 0; color: inherit; }

.mh-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mh-content th, .mh-content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mh-line); }
.mh-content th { font-weight: 600; }

.mh-content hr { border: 0; border-top: 1px solid var(--mh-line); margin: 2.4em 0; }

/* ---------- subscribe ---------- */

.mh-sub {
	background: var(--mh-surface);
	border-radius: 14px;
	padding: 26px 28px;
	margin-top: 44px;
}
.mh-sub h2 { font-family: var(--mh-display); font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.mh-sub p { font-size: 15px; color: var(--mh-muted); margin: 0 0 16px; line-height: 1.6; }
.mh-sub form { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.mh-sub input[type=email] {
	flex: 1 1 240px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mh-line);
	border-radius: 8px;
	font-family: var(--mh-sans);
	font-size: 15px;
	background: #fff;
	color: var(--mh-text);
}
.mh-sub input[type=email]:focus { outline: 2px solid var(--mh-accent); outline-offset: 1px; border-color: transparent; }
.mh-sub button {
	height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--mh-text);
	color: #fff;
	font-family: var(--mh-sans);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.mh-sub button:hover { background: var(--mh-accent); }
.mh-hp { position: absolute; left: -9999px; opacity: 0; }
.mh-note { font-size: 13px; margin-top: 10px; }
.mh-note.ok { color: #1D7A4F; }
.mh-note.bad { color: #B02B2B; }

/* ---------- author ---------- */

.mh-author {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--mh-line);
}
.mh-author img { width: 60px; height: 60px; border-radius: 50%; flex: none; object-fit: cover; }
.mh-author-n { font-family: var(--mh-display); font-weight: 600; font-size: 17px; margin: 0 0 4px; }
.mh-author-b { font-size: 15px; line-height: 1.65; color: var(--mh-muted); margin: 0 0 10px; }
.mh-author-l { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.mh-author-l a { color: var(--mh-accent); text-decoration: none; }
.mh-author-l a:hover { text-decoration: underline; }

/* ---------- related ---------- */

.mh-related { margin-top: 48px; }
.mh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-top: 14px; }
.mh-card { text-decoration: none; color: inherit; display: block; }
.mh-card img, .mh-card .ph {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 10px;
	background: var(--mh-surface);
	display: block;
	margin-bottom: 10px;
}
.mh-card-t { font-family: var(--mh-display); font-weight: 600; font-size: 15px; line-height: 1.35; margin: 0 0 5px; }
.mh-card:hover .mh-card-t { color: var(--mh-accent); }
.mh-card-m { font-size: 12px; color: var(--mh-faint); font-family: var(--mh-mono); }

/* ---------- prev / next ---------- */

.mh-pn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--mh-line);
}
.mh-pn a { text-decoration: none; color: inherit; font-size: 15px; line-height: 1.4; }
.mh-pn a:hover .mh-pn-t { color: var(--mh-accent); }
.mh-pn-l { font-family: var(--mh-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mh-faint); display: block; margin-bottom: 6px; }
.mh-pn-t { font-family: var(--mh-display); font-weight: 600; }
.mh-pn .nx { text-align: right; }
@media (max-width: 640px) { .mh-pn { grid-template-columns: 1fr; } }

/* ---------- comments ---------- */

.mh-comments { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--mh-line); }
.mh-comments h2 { font-family: var(--mh-display); font-size: 20px; font-weight: 600; margin: 0 0 20px; }
.mh-comments ol.commentlist { list-style: none; margin: 0 0 32px; padding: 0; }
.mh-comments ol.commentlist ol.children { list-style: none; padding-left: 26px; margin-top: 18px; }
.mh-comments li.comment { margin-bottom: 22px; }
.mh-comments .comment-body { font-size: 15px; line-height: 1.7; }
.mh-comments .comment-author { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.mh-comments .comment-author img { border-radius: 50%; }
.mh-comments .comment-meta { font-size: 12px; color: var(--mh-faint); font-family: var(--mh-mono); margin-bottom: 8px; }
.mh-comments .reply a { font-size: 13px; color: var(--mh-accent); text-decoration: none; }
.mh-comments input[type=text], .mh-comments input[type=email], .mh-comments input[type=url], .mh-comments textarea {
	width: 100%;
	border: 1px solid var(--mh-line);
	border-radius: 8px;
	padding: 10px 12px;
	font-family: var(--mh-sans);
	font-size: 15px;
	background: #fff;
	color: var(--mh-text);
}
.mh-comments textarea { min-height: 130px; resize: vertical; }
.mh-comments .comment-form-comment, .mh-comments .comment-form-author, .mh-comments .comment-form-email { margin-bottom: 14px; }
.mh-comments label { display: block; font-size: 13px; color: var(--mh-muted); margin-bottom: 5px; }
.mh-comments .form-submit input {
	height: 44px; padding: 0 22px; border: 0; border-radius: 8px;
	background: var(--mh-text); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer;
	font-family: var(--mh-sans);
}
.mh-comments .form-submit input:hover { background: var(--mh-accent); }
.mh-comments .comment-notes { font-size: 13px; color: var(--mh-faint); }

/* ---------- utility ---------- */

.mh-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.mh-credit { font-size: 12px; color: var(--mh-faint); margin: -18px 0 28px; font-family: var(--mh-mono); }