/*
Theme Name:  Masthead
Theme URI:   https://muneebgawri.com/masthead
Author:      Muneeb Gawri
Author URI:  https://muneebgawri.com
Description: A lightweight, modular WordPress parent theme for news and press release publishing. Fully configurable via the masthead_config filter — layout, features, sidebars, header variants, and ad slots are all child-theme-controllable without overriding template files.
Version:     1.2.0
Requires at least: 6.0
Tested up to: 6.7
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: masthead
Tags:        news, blog, two-columns, right-sidebar, left-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, full-width-template
*/

/* ==========================================================================
   Layer 2: Design Tokens — CSS Custom Properties
   All visual values live here. Child themes override any subset in :root {}.
   No hardcoded colours, sizes, or font names below this block.
   ========================================================================== */

:root {

	/* ── Colour: Brand primitives ── */
	--mh-color-primary:       #1a1a1a;
	--mh-color-secondary:     #444444;
	--mh-color-accent:        #0066cc;

	/* ── Colour: Text ── */
	--mh-color-text:          #1a1a1a;
	--mh-color-text-light:    #666666;
	--mh-color-text-muted:    #999999;

	/* ── Colour: Backgrounds ── */
	--mh-color-bg:            #ffffff;
	--mh-color-bg-alt:        #f5f5f5;

	/* ── Colour: Borders ── */
	--mh-color-border:        #e0e0e0;

	/* ── Colour: Header & Footer ── */
	--mh-color-header-bg:     #1a1a1a;
	--mh-color-header-text:   #ffffff;
	--mh-color-footer-bg:     #1a1a1a;
	--mh-color-footer-text:   #cccccc;

	/* ── Colour: Links ── */
	--mh-color-link:          var(--mh-color-accent);
	--mh-color-link-hover:    #004d99;
	--mh-color-link-visited:  #553399;

	/* ── Colour: Focus ── */
	--mh-color-focus:         #0066cc;
	--mh-focus-ring:          2px solid var(--mh-color-focus);
	--mh-focus-ring-offset:   2px;

	/* ── Colour: Semantic / Feedback ── */
	--mh-color-success:       #2d7d32;
	--mh-color-warning:       #e65100;
	--mh-color-error:         #c62828;
	--mh-color-info:          #0277bd;

	/* ── Colour: Component aliases ── */
	--mh-color-category-bg:         var(--mh-color-accent);
	--mh-color-category-text:       #ffffff;
	--mh-color-blockquote-border:   var(--mh-color-accent);
	--mh-color-code-bg:             var(--mh-color-bg-alt);
	--mh-color-selection-bg:        rgba(0, 102, 204, 0.15);

	/* ── Typography: Font families ── */
	--mh-font-heading:   Georgia, "Times New Roman", serif;
	--mh-font-body:      system-ui, -apple-system, sans-serif;

	/* UI font for navigation, metadata, breadcrumbs, and labels.
	   Defaults to body font; override for brands using a distinct sans-serif. */
	--mh-font-ui:        system-ui, -apple-system, sans-serif;

	/* ── Typography: Font sizes ── */
	--mh-font-size-base: 16px;
	--mh-font-size-xs:   0.75rem;
	--mh-font-size-sm:   0.875rem;
	--mh-font-size-lg:   1.25rem;
	--mh-font-size-xl:   1.5rem;
	--mh-font-size-2xl:  2rem;
	--mh-font-size-3xl:  2.5rem;

	/* ── Typography: Heading sizes (child-theme-overridable) ── */
	--mh-font-size-h1:   var(--mh-font-size-2xl);
	--mh-font-size-h2:   var(--mh-font-size-xl);
	--mh-font-size-h3:   var(--mh-font-size-lg);
	--mh-font-size-h4:   var(--mh-font-size-base);

	/* ── Typography: Font weights ── */
	--mh-font-weight-normal: 400;
	--mh-font-weight-medium: 500;
	--mh-font-weight-bold:   700;

	/* ── Typography: Line heights ── */
	--mh-line-height-tight:  1.2;
	--mh-line-height-normal: 1.65;
	--mh-line-height-loose:  1.85;

	/* ── Typography: Letter spacing ── */
	--mh-letter-spacing-tight: -0.02em;
	--mh-letter-spacing-wide:   0.05em;

	/* ── Spacing scale ── */
	--mh-space-xs:   0.25rem;
	--mh-space-sm:   0.5rem;
	--mh-space-md:   1rem;
	--mh-space-lg:   1.5rem;
	--mh-space-xl:   2.5rem;
	--mh-space-2xl:  4rem;
	--mh-space-3xl:  6rem;

	/* ── Layout ── */
	--mh-container-width:          1200px;
	--mh-content-width:            780px;
	--mh-sidebar-width:            300px;
	--mh-sidebar-secondary-width:  250px;
	--mh-header-border-width:      4px;

	/* ── Layout: Grid ── */
	--mh-grid-gap:      var(--mh-space-lg);
	--mh-grid-columns:  1;
	--mh-footer-columns: 3;

	/* ── Header: Double variant ── */
	--mh-utility-bar-bg:     var(--mh-color-bg-alt);
	--mh-utility-bar-text:   var(--mh-color-text-light);
	--mh-utility-bar-height: 36px;

	/* ── Ad / banner slots ── */
	--mh-slot-padding: var(--mh-space-sm) 0;
	--mh-slot-bg:      transparent;

	/* ── Radius ── */
	--mh-radius-sm:  2px;
	--mh-radius-md:  4px;
	--mh-radius-lg:  8px;

	/* ── Transitions ── */
	--mh-transition-fast:   0.15s ease;
	--mh-transition-normal: 0.3s ease;

	/* ── Z-index scale ── */
	--mh-z-base:        1;
	--mh-z-header:      100;
	--mh-z-nav-overlay: 200;
	--mh-z-skip-link:   9999;

	/* ── Opacity ── */
	--mh-opacity-disabled: 0.5;
}

/* ==========================================================================
   Layer 3: CSS Reset — Minimal normalisation
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: var(--mh-font-size-base);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
blockquote,
figure,
pre {
	margin-top: 0;
}

ul,
ol {
	padding-left: var(--mh-space-lg);
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
}

/* ==========================================================================
   Layer 4: Base Typography
   ========================================================================== */

body {
	font-family: var(--mh-font-body);
	font-size: var(--mh-font-size-base);
	font-weight: var(--mh-font-weight-normal);
	line-height: var(--mh-line-height-normal);
	color: var(--mh-color-text);
	background-color: var(--mh-color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--mh-font-heading);
	font-weight: var(--mh-font-weight-bold);
	line-height: var(--mh-line-height-tight);
	color: var(--mh-color-text);
	margin-bottom: var(--mh-space-md);
}

h1 { font-size: var(--mh-font-size-h1); letter-spacing: var(--mh-letter-spacing-tight); }
h2 { font-size: var(--mh-font-size-h2); }
h3 { font-size: var(--mh-font-size-h3); }
h4 { font-size: var(--mh-font-size-h4); }
h5 { font-size: var(--mh-font-size-base); }
h6 { font-size: var(--mh-font-size-sm); }

p {
	margin-bottom: var(--mh-space-md);
}

/* ── Links ── */
a {
	color: var(--mh-color-link);
	text-decoration: underline;
	transition: color var(--mh-transition-fast);
}

a:hover,
a:active {
	color: var(--mh-color-link-hover);
	text-decoration: none;
}

a:visited {
	color: var(--mh-color-link-visited);
}

/* ── Lists ── */
ul,
ol {
	margin-bottom: var(--mh-space-md);
}

li {
	margin-bottom: var(--mh-space-xs);
}

/* ── Blockquote ── */
blockquote {
	border-left: 4px solid var(--mh-color-blockquote-border);
	margin: 0 0 var(--mh-space-lg);
	padding: var(--mh-space-sm) var(--mh-space-lg);
	font-style: italic;
	color: var(--mh-color-text-light);
}

blockquote cite {
	display: block;
	margin-top: var(--mh-space-sm);
	font-size: var(--mh-font-size-sm);
	font-style: normal;
	color: var(--mh-color-text-muted);
}

/* ── Code ── */
code,
kbd,
samp {
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: var(--mh-font-size-sm);
	background-color: var(--mh-color-code-bg);
	padding: 0.1em 0.4em;
	border-radius: var(--mh-radius-sm);
}

pre {
	background-color: var(--mh-color-code-bg);
	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-md);
	padding: var(--mh-space-md);
	overflow-x: auto;
	margin-bottom: var(--mh-space-lg);
}

pre code {
	background: none;
	padding: 0;
}

/* ── Selection ── */
::selection {
	background-color: var(--mh-color-selection-bg);
}

/* ── Horizontal rule ── */
hr {
	border: none;
	border-top: 1px solid var(--mh-color-border);
	margin: var(--mh-space-xl) 0;
}

/* ── Tables ── */
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--mh-space-lg);
}

th,
td {
	padding: var(--mh-space-sm) var(--mh-space-md);
	text-align: left;
	border-bottom: 1px solid var(--mh-color-border);
}

th {
	font-weight: var(--mh-font-weight-bold);
	background-color: var(--mh-color-bg-alt);
}

/* ==========================================================================
   Layer 5: Accessibility Utilities
   ========================================================================== */

/* ── Screen reader text — visually hidden, available to assistive tech ── */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--mh-color-bg);
	clip: auto !important;
	clip-path: none;
	color: var(--mh-color-text);
	display: block;
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-sm);
	font-weight: var(--mh-font-weight-bold);
	height: auto;
	left: var(--mh-space-md);
	line-height: normal;
	padding: var(--mh-space-sm) var(--mh-space-md);
	text-decoration: none;
	top: var(--mh-space-md);
	width: auto;
	z-index: var(--mh-z-skip-link);
}

/* ── Skip link ── */
.skip-link {
	position: absolute;
	left: -9999em;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: var(--mh-z-skip-link);
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	overflow: visible;
	background-color: var(--mh-color-accent);
	color: #ffffff;
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-sm);
	font-weight: var(--mh-font-weight-bold);
	padding: var(--mh-space-sm) var(--mh-space-md);
	text-decoration: none;
	transition: none;
}

/* ── Focus visible — system-wide ── */
:focus-visible {
	outline: var(--mh-focus-ring);
	outline-offset: var(--mh-focus-ring-offset);
}

/* Remove default focus ring for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
	outline: none;
}

/* ── Button base ── */
button {
	cursor: pointer;
}

button:disabled {
	opacity: var(--mh-opacity-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   Layer 6: Layout Grid — Site wrapper, container, content area
   ========================================================================== */

.mh-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
}

.mh-container {
	width: 100%;
	max-width: var(--mh-container-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--mh-space-lg);
	padding-left: var(--mh-space-lg);
}

.mh-main {
	flex: 1;
	padding-top: var(--mh-space-xl);
	padding-bottom: var(--mh-space-xl);
}

.mh-content-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mh-space-xl);
}

/* ==========================================================================
   Layer 7: Sidebar Layout Variants
   Body class drives the grid — applied by masthead_body_classes().
   ========================================================================== */

/* Right sidebar (default) */
.mh-sidebar-right .mh-content-area {
	grid-template-columns: 1fr var(--mh-sidebar-width);
}

/* Left sidebar */
.mh-sidebar-left .mh-content-area {
	grid-template-columns: var(--mh-sidebar-width) 1fr;
}

.mh-sidebar-left .mh-sidebar--primary {
	order: -1;
}

/* Both sidebars */
.mh-sidebar-both .mh-content-area {
	grid-template-columns: var(--mh-sidebar-secondary-width) 1fr var(--mh-sidebar-width);
}

.mh-sidebar-both .mh-sidebar--primary {
	order: 1;
}

.mh-sidebar-both .mh-sidebar--secondary {
	order: -1;
}

/* No sidebar — full width (also the base mobile state) */
.mh-sidebar-none .mh-content-area {
	grid-template-columns: 1fr;
}

/* Mobile: all layouts collapse to single column */
@media (max-width: 781px) {
	.mh-content-area {
		grid-template-columns: 1fr !important; /* stylelint-disable-line declaration-no-important */
	}

	.mh-sidebar {
		order: 99;
	}
}

/* ==========================================================================
   Layer 8: Site Header — Standard variant
   ========================================================================== */

.mh-header {
	background-color: var(--mh-color-header-bg);
	color: var(--mh-color-header-text);
	border-bottom: var(--mh-header-border-width) solid var(--mh-color-accent);
	position: sticky;
	top: 0;
	z-index: var(--mh-z-header);
	width: 100%;
}

.mh-header a {
	color: var(--mh-color-header-text);
	text-decoration: none;
}

.mh-header a:hover {
	color: var(--mh-color-header-text);
	opacity: 0.85;
}

/* Standard + double share the same main bar layout */
.mh-header--standard .mh-header__inner,
.mh-header--double .mh-header__inner {
	display: flex;
	align-items: center;
	gap: var(--mh-space-lg);
	min-height: 64px;
	padding-top: var(--mh-space-sm);
	padding-bottom: var(--mh-space-sm);
}

.mh-site-branding {
	flex-shrink: 0;
}

.mh-site-logo {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-font-size-xl);
	font-weight: var(--mh-font-weight-bold);
}

.mh-site-description {
	font-size: var(--mh-font-size-xs);
	color: var(--mh-color-text-muted);
	margin: 0;
}

/* Custom logo */
.mh-header .custom-logo-link {
	display: block;
	line-height: 0;
}

.mh-header .custom-logo {
	max-height: 60px;
	width: auto;
}

/* Standard + double: nav pushed to right (desktop only — mobile overrides display) */
.mh-header--standard .mh-nav-primary,
.mh-header--double .mh-nav-primary {
	flex: 1;
	justify-content: flex-end;
}

@media (min-width: 782px) {
	.mh-header--standard .mh-nav-primary,
	.mh-header--double .mh-nav-primary {
		display: flex;
	}
}

/* ==========================================================================
   Layer 9: Site Header — Double variant
   ========================================================================== */

.mh-utility-bar {
	background-color: var(--mh-utility-bar-bg);
	color: var(--mh-utility-bar-text);
	height: var(--mh-utility-bar-height);
	font-size: var(--mh-font-size-xs);
	font-family: var(--mh-font-ui);
	border-bottom: 1px solid var(--mh-color-border);
}

.mh-utility-bar a {
	color: var(--mh-utility-bar-text);
}

.mh-utility-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

/* ==========================================================================
   Layer 10: Site Header — Minimal variant
   ========================================================================== */

.mh-header--minimal .mh-header__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--mh-space-lg);
	min-height: 64px;
	padding-top: var(--mh-space-md);
	padding-bottom: 0;
}

.mh-header--minimal .mh-site-branding {
	text-align: center;
}

.mh-nav-primary--below {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: var(--mh-space-sm);
}

.mh-nav-primary--below .mh-container {
	display: flex;
	justify-content: center;
}

.mh-nav-primary--below ul {
	justify-content: center;
}

/* ==========================================================================
   Layer 11: Navigation — Primary nav, mobile toggle
   ========================================================================== */

.mh-nav-primary ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.mh-nav-primary li {
	position: relative;
	margin: 0;
}

.mh-nav-primary a {
	display: block;
	padding: var(--mh-space-md) var(--mh-space-md);
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-sm);
	font-weight: var(--mh-font-weight-medium);
	color: var(--mh-color-header-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--mh-transition-fast);
}

.mh-nav-primary a:hover,
.mh-nav-primary a:focus {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--mh-color-header-text);
}

/* Current menu item */
.mh-nav-primary .current-menu-item > a { font-weight: var(--mh-font-weight-bold); }

/* Mobile menu toggle button */
.mh-menu-toggle {
	display: none;
	background: none;
	border: none;
	padding: var(--mh-space-sm);
	margin-left: auto;
	cursor: pointer;
	color: var(--mh-color-header-text);
}

.mh-menu-toggle__icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 24px;
}

.mh-menu-toggle__icon span {
	display: block;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	transition: transform var(--mh-transition-fast), opacity var(--mh-transition-fast);
}

/* Mobile nav — hidden until toggle */
@media (max-width: 781px) {
	.mh-menu-toggle {
		display: flex;
		align-items: center;
	}

	.mh-nav-primary {
		display: none;
		width: 100%;
		background-color: var(--mh-color-header-bg);
	}

	.mh-nav-primary.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 200;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.mh-nav-primary ul {
		flex-direction: column;
	}

	/* Minimal header toggle positioning */
	.mh-header--minimal .mh-header__inner {
		justify-content: space-between;
	}

	.mh-nav-primary--below {
		display: none;
	}

	.mh-nav-primary--below.is-open {
		display: block;
	}
}

/* ── Posts List sidebar widget (masthead_posts_list()) ─────────────────── */
.mh-posts-list {
	border: 1px solid var(--mh-pl-border, #e5e6e9);
	border-radius: 4px;
	overflow: hidden;
}

.mh-posts-list__header {
	background: var(--mh-pl-heading-bg, #000e2c);
	color: var(--mh-pl-heading-color, #ffffff);
	font-family: var(--mh-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	padding: 14px 18px;
	letter-spacing: -0.01em;
}

.mh-posts-list__list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--mh-pl-list-bg, #f4f5f6);
}

.mh-posts-list__item {
	position: relative;
	padding: 14px 18px 14px 40px;
	border-bottom: 1px solid var(--mh-pl-border, #e5e6e9);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mh-pl-item-color, #141618);
}

.mh-posts-list__item:last-child {
	border-bottom: none;
}

.mh-posts-list__item::before {
	content: '';
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mh-pl-bullet, #0045da);
	flex-shrink: 0;
}

.mh-posts-list__item a {
	color: var(--mh-pl-item-color, #141618);
	text-decoration: none;
	display: block;
}

.mh-posts-list__item a:hover {
	color: var(--mh-pl-item-hover, #0045da);
}

/* Header CTA button — configured via masthead_config cta_* keys */
.mh-header-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	margin-left: var(--mh-space-sm);
	background-color: var(--mh-cta-bg, #000e2c);
	color: var(--mh-cta-color, #ffffff) !important;
	font-family: var(--mh-font-ui);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 6px;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background-color 0.15s, color 0.15s;
}
.mh-header-cta:hover,
.mh-header-cta:focus {
	background-color: var(--mh-cta-hover-bg, var(--mh-cta-bg, #002983));
	color: var(--mh-cta-hover-color, var(--mh-cta-color, #ffffff)) !important;
	text-decoration: none;
}
.mh-header-cta__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* Search toggle */
.mh-search-toggle {
	background: none;
	border: none;
	padding: var(--mh-space-sm);
	color: var(--mh-color-header-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--mh-space-xs);
	transition: opacity var(--mh-transition-fast);
}

.mh-search-toggle:hover {
	opacity: 0.8;
}

.mh-header-search {
	position: absolute;
	top: 100%;
	right: 0;
	background-color: var(--mh-color-bg);
	border: 1px solid var(--mh-color-border);
	padding: var(--mh-space-md);
	min-width: 280px;
	z-index: var(--mh-z-nav-overlay);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mh-header-search.is-visible {
	display: block;
}

/* Position search toggle container */
.mh-header__inner {
	position: relative;
}

/* ==========================================================================
   Layer 21: Ad / Banner Slots
   ========================================================================== */

.mh-slot-wrapper {
	padding: var(--mh-slot-padding);
	background-color: var(--mh-slot-bg);
	text-align: center;
}

/* ==========================================================================
   Layer 22: Footer
   ========================================================================== */

.mh-footer {
	background-color: var(--mh-color-footer-bg);
	color: var(--mh-color-footer-text);
	margin-top: auto;
}

.mh-footer a {
	color: var(--mh-color-footer-text);
}

.mh-footer a:hover {
	color: #ffffff;
}

.mh-footer-widgets {
	display: grid;
	grid-template-columns: repeat(var(--mh-footer-columns), 1fr);
	gap: var(--mh-grid-gap);
	padding: var(--mh-space-2xl) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mh-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--mh-space-md);
	padding: var(--mh-space-lg) 0;
	font-size: var(--mh-font-size-sm);
}

.mh-footer-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-md);
}

.mh-footer-nav li {
	margin: 0;
}


@media (max-width: 600px) {
	.mh-footer-widgets {
		grid-template-columns: 1fr;
	}

	.mh-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Layer 12: Hero Section
   ========================================================================== */

.mh-hero {
	background-color: var(--mh-color-bg-alt);
	border-bottom: 1px solid var(--mh-color-border);
	margin-bottom: var(--mh-space-xl);
	overflow: hidden;
}

.mh-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
}

.mh-hero__image {
	line-height: 0;
}

.mh-hero__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.mh-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-md);
	padding: var(--mh-space-xl) var(--mh-space-lg);
}

.mh-hero__title {
	font-size: var(--mh-font-size-xl);
	letter-spacing: var(--mh-letter-spacing-tight);
	margin: 0;
}

@media (min-width: 600px) {
	.mh-hero__title { font-size: var(--mh-font-size-2xl); }
	.mh-hero__excerpt { font-size: var(--mh-font-size-lg); }
}

@media (min-width: 1024px) {
	.mh-hero__title { font-size: var(--mh-font-size-3xl); }
}

.mh-hero__title a {
	color: var(--mh-color-text);
	text-decoration: none;
}

.mh-hero__title a:hover {
	color: var(--mh-color-link-hover);
}

.mh-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-md);
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text-light);
}

.mh-hero__excerpt {
	font-size: var(--mh-font-size-base);
	line-height: var(--mh-line-height-normal);
	color: var(--mh-color-text-light);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


/* ==========================================================================
   Layer 13: Post Cards — archive list view
   ========================================================================== */

.mh-post-card {
	padding: var(--mh-space-lg) 0;
	border-bottom: 1px solid var(--mh-color-border);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mh-space-md);
}

.mh-post-card:last-child {
	border-bottom: none;
}

.mh-post-card__thumbnail-link {
	display: block;
	border-radius: var(--mh-radius-md);
	overflow: hidden;
	line-height: 0;
}

.mh-post-card__thumbnail-link img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}


.mh-post-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-sm);
}

.mh-post-card__title {
	font-size: var(--mh-font-size-h3);
	margin: 0;
}

.mh-post-card__title a {
	color: var(--mh-color-text);
	text-decoration: none;
	transition: color var(--mh-transition-fast);
}

.mh-post-card__title a:hover {
	color: var(--mh-color-link-hover);
}

.mh-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mh-space-sm);
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text-light);
}

.mh-post-card__meta a {
	color: var(--mh-color-text-light);
}

.mh-post-card__excerpt {
	line-height: var(--mh-line-height-normal);
}

/* Featured modifier */
.mh-post-card--featured {
	background-color: var(--mh-color-bg-alt);
	padding: var(--mh-space-xl);
	border-radius: var(--mh-radius-md);
	border: 1px solid var(--mh-color-border);
}

.mh-post-card--featured .mh-post-card__title {
	font-size: var(--mh-font-size-h2);
}


/* ==========================================================================
   Layer 14: Archive List Variant — horizontal cards, one per row
   ========================================================================== */

.mh-posts-loop.mh-archive-list {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-lg);
}

.mh-posts-loop.mh-archive-list .mh-post-card {
	border-bottom: 1px solid var(--mh-color-border);
	padding: 0 0 var(--mh-space-lg);
	border-radius: 0;
	gap: 0;
}

.mh-posts-loop.mh-archive-list .mh-post-card:last-child {
	border-bottom: none;
}

/* Horizontal layout: image left, content right */
@media (min-width: 600px) {
	.mh-posts-loop.mh-archive-list .mh-post-card {
		grid-template-columns: 220px 1fr;
		gap: var(--mh-space-lg);
		align-items: start;
	}

	.mh-posts-loop.mh-archive-list .mh-post-card__thumbnail-link img {
		aspect-ratio: 4 / 3;
	}

	.mh-posts-loop.mh-archive-list .mh-post-card__body {
		padding: 0;
	}
}

@media (min-width: 1024px) {
	.mh-posts-loop.mh-archive-list .mh-post-card {
		grid-template-columns: 300px 1fr;
	}
}

/* ==========================================================================
   Layer 14b: Archive Grid Variant
   ========================================================================== */

.mh-posts-loop.mh-archive-grid {
	display: grid;
	grid-template-columns: repeat(var(--mh-grid-columns), 1fr);
	gap: var(--mh-grid-gap);
}

.mh-posts-loop.mh-archive-grid .mh-post-card {
	border-bottom: none;
	padding: 0;
	background-color: var(--mh-color-bg);
	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-md);
	overflow: hidden;
	grid-template-columns: 1fr;
}

.mh-posts-loop.mh-archive-grid .mh-post-card__body {
	padding: var(--mh-space-md);
}

/* Grid columns are output as inline CSS via masthead_scripts() based on archive_columns config. */

/* ==========================================================================
   Layer 15: Single Post Entry
   ========================================================================== */

.mh-entry {
	max-width: var(--mh-content-width);
}

.mh-entry-header {
	margin-bottom: var(--mh-space-xl);
}

.mh-entry-title {
	font-size: var(--mh-font-size-h1);
	letter-spacing: var(--mh-letter-spacing-tight);
	margin-bottom: var(--mh-space-md);
}

.mh-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mh-space-md);
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text-light);
}

.mh-entry-meta a {
	color: var(--mh-color-text-light);
}

.mh-post-thumbnail {
	margin-bottom: var(--mh-space-xl);
}

.mh-post-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--mh-radius-md);
}

/* Entry content — prose styles */
.mh-entry-content {
	line-height: var(--mh-line-height-loose);
}

.mh-entry-content h2,
.mh-entry-content h3,
.mh-entry-content h4 {
	margin-top: var(--mh-space-xl);
}

.mh-entry-content img {
	border-radius: var(--mh-radius-sm);
	max-width: 100%;
}

.mh-entry-content ul,
.mh-entry-content ol {
	padding-left: var(--mh-space-xl);
}

.mh-entry-content figcaption {
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text-light);
	text-align: center;
	margin-top: var(--mh-space-xs);
}

.mh-entry-footer {
	margin-top: var(--mh-space-xl);
	padding-top: var(--mh-space-md);
	border-top: 1px solid var(--mh-color-border);
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text-light);
}

.mh-tags-links a {
	color: var(--mh-color-link);
}

.mh-edit-link {
	margin-left: var(--mh-space-md);
}

.mh-page-links {
	margin-top: var(--mh-space-lg);
	font-size: var(--mh-font-size-sm);
}

/* ==========================================================================
   Layer 16: Post Navigation
   ========================================================================== */

.mh-post-nav .nav-links {
	display: flex;
	justify-content: space-between;
	gap: var(--mh-space-lg);
	padding: var(--mh-space-lg) 0;
	border-top: 1px solid var(--mh-color-border);
	border-bottom: 1px solid var(--mh-color-border);
	margin: var(--mh-space-2xl) 0;
}

.mh-post-nav .nav-previous,
.mh-post-nav .nav-next {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-xs);
}

.mh-post-nav .nav-next {
	text-align: right;
}

.mh-post-nav .nav-links a {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-xs);
	color: var(--mh-color-link);
	text-decoration: none;
}

.mh-post-nav .nav-links a:hover {
	color: var(--mh-color-link-hover);
}

.mh-post-nav__label {
	font-size: var(--mh-font-size-xs);
	text-transform: uppercase;
	letter-spacing: var(--mh-letter-spacing-wide);
	color: var(--mh-color-text-light);
}

.mh-post-nav__title {
	font-size: var(--mh-font-size-base);
	font-weight: var(--mh-font-weight-bold);
	color: var(--mh-color-text);
}

/* ==========================================================================
   Layer 17: Author Bio
   ========================================================================== */

.mh-author-bio {
	display: flex;
	gap: var(--mh-space-lg);
	align-items: flex-start;
	background-color: var(--mh-color-bg-alt);
	padding: var(--mh-space-lg);
	border-radius: var(--mh-radius-md);
	border-top: 1px solid var(--mh-color-border);
	margin-top: var(--mh-space-2xl);
}

.mh-author-bio__avatar img {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	object-fit: cover;
	flex-shrink: 0;
}

.mh-author-bio__content {
	flex: 1;
}

.mh-author-bio__name {
	font-size: var(--mh-font-size-lg);
	margin: 0 0 var(--mh-space-sm);
}

.mh-author-bio__name a {
	color: var(--mh-color-text);
	text-decoration: none;
}

.mh-author-bio__name a:hover {
	color: var(--mh-color-link-hover);
}

.mh-author-bio__description {
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text-light);
	margin: 0;
}

@media (max-width: 600px) {
	.mh-author-bio {
		flex-direction: column;
	}
}

/* ==========================================================================
   Layer 18: Social Share
   ========================================================================== */

.mh-social-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mh-space-sm);
	padding: var(--mh-space-md) 0;
	margin: var(--mh-space-lg) 0;
	border-top: 1px solid var(--mh-color-border);
}

.mh-social-share__label {
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-sm);
	font-weight: var(--mh-font-weight-bold);
	color: var(--mh-color-text-light);
}

.mh-social-share__link {
	display: inline-block;
	padding: var(--mh-space-xs) var(--mh-space-md);
	background-color: var(--mh-color-bg-alt);
	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-md);
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text);
	text-decoration: none;
	transition: background-color var(--mh-transition-fast), border-color var(--mh-transition-fast);
}

.mh-social-share__link:hover {
	background-color: var(--mh-color-accent);
	border-color: var(--mh-color-accent);
	color: #ffffff;
}

/* ==========================================================================
   Layer 19: Related Posts
   ========================================================================== */

.mh-related-posts {
	margin-top: var(--mh-space-2xl);
	padding-top: var(--mh-space-lg);
	border-top: 1px solid var(--mh-color-border);
}

.mh-related-posts__title {
	font-size: var(--mh-font-size-h3);
	margin-bottom: var(--mh-space-lg);
}

.mh-related-posts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mh-grid-gap);
}

.mh-related-posts__item {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-sm);
}

.mh-related-posts__thumb-link img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--mh-radius-sm);
}

.mh-related-posts__item-title {
	font-size: var(--mh-font-size-sm);
	margin: 0;
}

.mh-related-posts__item-title a {
	color: var(--mh-color-text);
	text-decoration: none;
}

.mh-related-posts__item-title a:hover {
	color: var(--mh-color-link-hover);
}

.mh-related-posts__date {
	font-size: var(--mh-font-size-xs);
	color: var(--mh-color-text-muted);
	font-family: var(--mh-font-ui);
}

@media (max-width: 782px) {
	.mh-related-posts__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Layer 20: Sidebar + Widgets
   ========================================================================== */

.mh-sidebar {
	min-width: 0;
}

.widget {
	margin-bottom: var(--mh-space-xl);
}

.widget:last-child {
	margin-bottom: 0;
}

.widget-title {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-font-size-h4);
	font-weight: var(--mh-font-weight-bold);
	border-bottom: 2px solid var(--mh-color-accent);
	padding-bottom: var(--mh-space-sm);
	margin-bottom: var(--mh-space-md);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget ul li {
	padding: var(--mh-space-xs) 0;
	border-bottom: 1px solid var(--mh-color-border);
}

.widget ul li:last-child {
	border-bottom: none;
}

.widget ul a {
	color: var(--mh-color-link);
	text-decoration: none;
	font-size: var(--mh-font-size-sm);
}

.widget ul a:hover {
	color: var(--mh-color-link-hover);
	text-decoration: underline;
}

/* Footer widget overrides */
.mh-footer-widget-col .widget-title,
.mh-footer-widget-col .widget ul a { color: var(--mh-color-footer-text); }

.mh-footer-widget-col .widget-title { border-bottom-color: rgba(255, 255, 255, 0.2); }
.mh-footer-widget-col .widget ul li { border-bottom-color: rgba(255, 255, 255, 0.1); }
.mh-footer-widget-col .widget ul a:hover { color: #ffffff; }

/* ==========================================================================
   Layer 23: Category Pills, Breadcrumbs, Search Form, Post Meta, 404 & Search
   ========================================================================== */

/* Category pills */
.mh-category-labels {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-xs);
	margin-bottom: var(--mh-space-sm);
}

.mh-category-pill {
	display: inline-block;
	background-color: var(--mh-color-category-bg);
	color: var(--mh-color-category-text);
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-xs);
	font-weight: var(--mh-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--mh-letter-spacing-wide);
	padding: var(--mh-space-xs) var(--mh-space-sm);
	border-radius: var(--mh-radius-sm);
	text-decoration: none;
	transition: filter var(--mh-transition-fast);
}

.mh-category-pill:hover {
	filter: brightness(0.9);
	color: var(--mh-color-category-text);
}

/* Breadcrumbs */
.mh-breadcrumb {
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text-light);
	margin-bottom: var(--mh-space-md);
}

.mh-breadcrumb a {
	color: var(--mh-color-link);
	text-decoration: none;
}

.mh-breadcrumb a:hover {
	text-decoration: underline;
}

/* Post meta shared */
.mh-posted-on,
.mh-byline,
.mh-reading-time,
.mh-updated {
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-text-light);
}

.mh-posted-on a,
.mh-byline a {
	color: var(--mh-color-text-light);
	text-decoration: none;
}

.mh-posted-on a:hover,
.mh-byline a:hover {
	color: var(--mh-color-link-hover);
	text-decoration: underline;
}

.entry-date.updated:not(.published) { display: none; }

.mh-updated {
	margin-left: var(--mh-space-sm);
	font-style: italic;
}

/* Page headers */
.mh-page-header {
	margin-bottom: var(--mh-space-xl);
	padding-bottom: var(--mh-space-lg);
	border-bottom: 2px solid var(--mh-color-accent);
}

.mh-page-title {
	font-size: var(--mh-font-size-h1);
	margin: 0;
}

.mh-archive-description {
	color: var(--mh-color-text-light);
	margin-top: var(--mh-space-sm);
	font-size: var(--mh-font-size-sm);
}

.mh-404,
.mh-no-results {
	max-width: var(--mh-content-width);
}

/* Search form */
.search-form {
	display: flex;
	gap: var(--mh-space-sm);
}

.search-form label {
	flex: 1;
	font-size: 0;
}

.search-form .search-field {
	width: 100%;
	padding: var(--mh-space-sm) var(--mh-space-md);
	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-md);
	transition: border-color var(--mh-transition-fast);
	font-size: var(--mh-font-size-base);
	color: var(--mh-color-text);
	background-color: var(--mh-color-bg);
}

.search-form .search-field:focus {
	outline: var(--mh-focus-ring);
	outline-offset: var(--mh-focus-ring-offset);
	border-color: var(--mh-color-focus);
}

.search-form .search-submit {
	padding: var(--mh-space-sm) var(--mh-space-lg);
	background-color: var(--mh-color-accent);
	color: #ffffff;
	border: none;
	border-radius: var(--mh-radius-md);
	cursor: pointer;
	font-family: var(--mh-font-ui);
	font-size: var(--mh-font-size-base);
	font-weight: var(--mh-font-weight-medium);
	transition: filter var(--mh-transition-fast);
	white-space: nowrap;
}

.search-form .search-submit:hover {
	filter: brightness(0.9);
}

/* Pagination */
.mh-pagination {
	margin-top: var(--mh-space-xl);
}

.mh-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-sm);
	justify-content: center;
}

.mh-pagination .page-numbers {
	display: inline-block;
	padding: var(--mh-space-xs) var(--mh-space-sm);
	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-md);
	color: var(--mh-color-link);
	text-decoration: none;
	font-size: var(--mh-font-size-sm);
	transition: background-color var(--mh-transition-fast), border-color var(--mh-transition-fast);
}

.mh-pagination .page-numbers:hover,
.mh-pagination .page-numbers.current {
	background-color: var(--mh-color-accent);
	border-color: var(--mh-color-accent);
	color: #ffffff;
}

.mh-author-archive__avatar { border-radius: 50%; }

/* ==========================================================================
   Layer 24: Responsive Overrides
   Mobile-first; these breakpoints polish the layout at larger sizes.
   Breakpoints: 600px (small tablet), 782px (WP admin bar / layout shift),
                1024px (desktop), 1200px (wide / container max).
   ========================================================================== */

@media (min-width: 600px) {
	.mh-container {
		padding-right: var(--mh-space-xl);
		padding-left: var(--mh-space-xl);
	}

	.mh-post-card {
		grid-template-columns: 200px 1fr;
	}
}


@media (min-width: 1024px) {
	.mh-entry-title {
		font-size: var(--mh-font-size-3xl);
	}

	.mh-post-card {
		grid-template-columns: 280px 1fr;
	}
}

@media (min-width: 1200px) {
	.mh-container {
		padding-right: var(--mh-space-lg);
		padding-left: var(--mh-space-lg);
	}
}

/* ==========================================================================
   Layer 25: Print Styles
   ========================================================================== */

@media print {
	/* Hide chrome */
	.mh-header,
	.mh-footer-widgets,
	.mh-footer-nav,
	.mh-sidebar,
	.mh-hero,
	.mh-post-nav,
	.mh-social-share,
	.mh-related-posts,
	.mh-slot-wrapper,
	.mh-menu-toggle,
	.mh-search-toggle,
	.mh-header-search,
	.mh-category-labels,
	.skip-link,
	.edit-link,
	.mh-pagination {
		display: none !important; /* stylelint-disable-line declaration-no-important */
	}

	/* Show content cleanly */
	body {
		color: #000000;
		background: #ffffff;
		font-size: 12pt;
		font-family: Georgia, serif;
	}

	.mh-container,
	.mh-content-area,
	.mh-main {
		max-width: 100%;
		width: 100%;
		padding: 0;
		display: block;
	}

	.mh-entry-content {
		font-size: 11pt;
		line-height: 1.6;
	}

	h1, h2, h3, h4 {
		color: #000000;
		page-break-after: avoid;
	}

	img {
		max-width: 100%;
		page-break-inside: avoid;
	}

	/* Append URLs after links */
	.mh-entry-content a[href]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #666666;
	}

	/* Don't append for internal/fragment links */
	.mh-entry-content a[href^="#"]::after,
	.mh-entry-content a[href^="/"]:not([href*="//"])::after {
		content: "";
	}

	/* Author bio — text only */
	.mh-author-bio__avatar {
		display: none;
	}

	/* Footer credits */
	.mh-footer-credits {
		color: #000000;
	}
}

/* ==========================================================================
   Layer 20: After-header subnav / ticker strip
   ========================================================================== */

.mh-subnav {
	background-color: var(--mh-color-header-bg);
	border-bottom: 1px solid var(--mh-color-border);
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mh-subnav::-webkit-scrollbar {
	display: none;
}

.mh-subnav__inner {
	display: flex;
	align-items: center;
	height: 40px;
	max-width: var(--mh-container-max);
	margin: 0 auto;
	padding: 0 var(--mh-space-lg);
}

.mh-subnav__item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mh-subnav__link {
	font-family: var(--mh-font-ui);
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--mh-color-text);
	text-decoration: none;
	padding: 0 0.65rem;
	white-space: nowrap;
	transition: color var(--mh-transition-fast);
}

.mh-subnav__link:hover {
	color: var(--mh-color-accent);
}

.mh-subnav__sep {
	color: var(--mh-color-border);
	font-size: 0.85rem;
	flex-shrink: 0;
	user-select: none;
}

/* ==========================================================================
   Layer 26: Megamenu Header Variant
   ========================================================================== */

.mh-header--megamenu {
	position: sticky;
	top: 0;
	z-index: var(--mh-z-header);
	background: var(--mh-color-bg);
	border-bottom: 1px solid var(--mh-color-border);
}

.mh-header--megamenu .mh-header__inner {
	display: flex;
	align-items: center;
	gap: var(--mh-space-md);
	min-height: 3.5rem;
}

/* Toggle button — two-icon pattern (burger bars / X SVG) */
.mh-megamenu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	color: var(--mh-color-primary);
	transition: background-color var(--mh-transition-fast);
}

.mh-burger-icon {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}

.mh-burger-icon span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
}

/* X icon — hidden by default */
.mh-close-icon {
	display: none;
	align-items: center;
	justify-content: center;
}

/* When open: swap icons */
.mh-megamenu-toggle[aria-expanded="true"] .mh-burger-icon { display: none; }
.mh-megamenu-toggle[aria-expanded="true"] .mh-close-icon  { display: flex; }

/* Inline primary nav in top bar */
.mh-header--megamenu .mh-nav-primary {
	flex: 1;
}

.mh-header--megamenu .mh-nav-primary__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--mh-space-lg);
}

.mh-header--megamenu .mh-nav-primary__list a {
	font-size: var(--mh-font-size-sm);
	font-weight: 600;
	color: var(--mh-color-primary);
	text-decoration: none;
}

.mh-header--megamenu .mh-nav-primary__list a:hover {
	color: var(--mh-color-accent);
}

/* CTA button */
.mh-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 1.1em;
	font-size: var(--mh-font-size-sm);
	font-weight: 700;
	border-radius: var(--mh-radius-sm);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: opacity var(--mh-transition-fast);
}

.mh-cta-btn:hover {
	opacity: 0.85;
}

/* Megamenu drawer — hidden via [hidden] attribute; shown when JS removes it */
.mh-megamenu {
	background: var(--mh-color-bg);
	border-bottom: 1px solid var(--mh-color-border);
	padding: var(--mh-space-xl) 0;
}

.mh-megamenu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--mh-space-xl);
	margin-bottom: var(--mh-space-xl);
}

.mh-megamenu__col .mh-megamenu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mh-megamenu__col .mh-megamenu__list li {
	margin-bottom: var(--mh-space-sm);
}

.mh-megamenu__col .mh-megamenu__list a {
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-secondary);
	text-decoration: none;
}

.mh-megamenu__col .mh-megamenu__list a:hover {
	color: var(--mh-color-accent);
}

@media (max-width: 782px) {
	.mh-megamenu__grid {
		grid-template-columns: 1fr 1fr;
	}

	.mh-header--megamenu .mh-nav-primary {
		display: none;
	}
}

@media (max-width: 480px) {
	.mh-megamenu__grid {
		grid-template-columns: 1fr;
	}
}

/* Megamenu search bar */
.mh-megamenu__search {
	padding: var(--mh-space-lg) 0 var(--mh-space-md);
}

.mh-megamenu__search-wrap {
	display: flex;
	align-items: center;
	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-sm);
	overflow: hidden;
	background: var(--mh-color-surface-alt, var(--mh-color-bg));
}

.mh-megamenu__search-icon {
	flex-shrink: 0;
	margin: 0 var(--mh-space-sm) 0 var(--mh-space-md);
	color: var(--mh-color-secondary);
}

.mh-megamenu__search-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 10px 0;
	font-size: var(--mh-font-size-base);
	color: var(--mh-color-primary);
	outline: none;
}

.mh-megamenu__search-btn {
	padding: 10px var(--mh-space-lg);
	background: var(--mh-color-accent);
	color: #fff;
	border: none;
	font-size: var(--mh-font-size-sm);
	font-weight: 700;
	cursor: pointer;
	flex-shrink: 0;
	transition: opacity var(--mh-transition-fast);
}

.mh-megamenu__search-btn:hover {
	opacity: 0.85;
}

/* Section links (no col title — bold, large) */
.mh-megamenu__section-link {
	display: block;
	font-size: var(--mh-font-size-lg);
	font-weight: 700;
	color: var(--mh-color-primary);
	text-decoration: none;
	padding: 5px 0;
	line-height: 1.2;
}

.mh-megamenu__section-link:hover {
	color: var(--mh-color-accent);
}

/* Column title (shows, company, etc.) */
.mh-megamenu__col-title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mh-color-secondary);
	margin: 0 0 var(--mh-space-sm);
	padding-bottom: var(--mh-space-xs);
	border-bottom: 1px solid var(--mh-color-border);
}

/* List links (with col title — smaller, regular weight) */
.mh-megamenu__list-link {
	display: block;
	font-size: var(--mh-font-size-sm);
	font-weight: 400;
	color: var(--mh-color-primary);
	text-decoration: none;
	padding: 4px 0;
	line-height: 1.3;
}

.mh-megamenu__list-link:hover {
	color: var(--mh-color-accent);
}

/* Inline category links in header bar */
.mh-header-cats {
	display: flex;
	align-items: center;
	height: 100%;
	flex-shrink: 1;
	min-width: 0;
}

.mh-header-cats__link {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 var(--mh-space-sm);
	font-size: var(--mh-font-size-sm);
	font-weight: 700;
	color: var(--mh-color-primary);
	text-decoration: none;
	border-radius: var(--mh-radius-sm);
	white-space: nowrap;
	transition: background-color var(--mh-transition-fast), color var(--mh-transition-fast);
}

.mh-header-cats__link:hover {
	color: var(--mh-color-accent);
}

/* Spacer — pushes right-side controls to the far right */
.mh-header__spacer {
	flex: 1;
}

/* Subnav topics strip */
.mh-subnav {
	background: var(--mh-color-bg);
	border-bottom: 1px solid var(--mh-color-border);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mh-subnav::-webkit-scrollbar {
	display: none;
}

.mh-subnav__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	gap: 0;
}

.mh-subnav__link {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--mh-color-secondary);
	text-decoration: none;
	padding: 0 var(--mh-space-sm);
	white-space: nowrap;
	transition: color var(--mh-transition-fast);
}

.mh-subnav__link:hover {
	color: var(--mh-color-accent);
}

.mh-subnav__sep {
	color: var(--mh-color-border);
	font-size: 0.8rem;
	user-select: none;
	flex-shrink: 0;
}

@media (max-width: 782px) {
	.mh-header-cats {
		display: none;
	}
}

/* ==========================================================================
   Layer 27: Live Video Panel
   ========================================================================== */

.mh-live-panel {
	padding: var(--mh-space-xl) 0;
	background: var(--mh-color-surface-alt, var(--mh-color-bg));
}

.mh-live-panel__title {
	font-size: var(--mh-font-size-xl);
	font-weight: 700;
	margin: 0 0 var(--mh-space-lg);
}

.mh-live-panel__embed {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: var(--mh-radius-md, var(--mh-radius-sm));
}

.mh-live-panel__embed iframe,
.mh-live-panel__embed object,
.mh-live-panel__embed embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Layer 28: Newsroom Page Template
   ========================================================================== */

.mh-newsroom {
	padding: var(--mh-space-xl) 0;
}

.mh-newsroom__header {
	margin-bottom: var(--mh-space-xl);
}

.mh-newsroom__title {
	font-size: var(--mh-font-size-2xl);
	font-weight: 700;
	margin: 0 0 var(--mh-space-lg);
}

/* Search bar */
.mh-newsroom__search {
	display: flex;
	gap: var(--mh-space-sm);
	margin-bottom: var(--mh-space-lg);
}

.mh-newsroom__search-input {
	flex: 1;
	padding: 0.5em 0.75em;
	font-size: var(--mh-font-size-sm);
	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-sm);
	background: var(--mh-color-bg);
	color: var(--mh-color-primary);
}

.mh-newsroom__search-btn {
	padding: 0.5em 1em;
	font-size: var(--mh-font-size-sm);
	font-weight: 600;
	background: var(--mh-color-accent);
	color: #fff;
	border: none;
	border-radius: var(--mh-radius-sm);
	cursor: pointer;
	transition: opacity var(--mh-transition-fast);
}

.mh-newsroom__search-btn:hover {
	opacity: 0.85;
}

/* Category filter */
.mh-newsroom__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-sm);
	margin-bottom: var(--mh-space-lg);
}

.mh-newsroom__filter-link {
	font-size: var(--mh-font-size-xs);
	font-weight: 600;
	padding: 0.3em 0.75em;
	border: 1px solid var(--mh-color-border);
	border-radius: var(--mh-radius-sm);
	color: var(--mh-color-secondary);
	text-decoration: none;
	transition: background var(--mh-transition-fast), color var(--mh-transition-fast);
}

.mh-newsroom__filter-link:hover,
.mh-newsroom__filter-link.is-active {
	background: var(--mh-color-accent);
	border-color: var(--mh-color-accent);
	color: #fff;
}

/* Article list */
.mh-newsroom__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mh-newsroom__item {
	border-bottom: 1px solid var(--mh-color-border);
	padding: var(--mh-space-lg) 0;
}

.mh-newsroom__item:first-child {
	border-top: 1px solid var(--mh-color-border);
}

.mh-newsroom__article {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: var(--mh-space-md);
	align-items: start;
}

.mh-newsroom__date {
	font-size: var(--mh-font-size-xs);
	color: var(--mh-color-secondary);
	white-space: nowrap;
	padding-top: 0.2em;
}

.mh-newsroom__item-title {
	font-size: var(--mh-font-size-base);
	font-weight: 600;
	margin: 0 0 var(--mh-space-xs);
}

.mh-newsroom__item-link {
	color: var(--mh-color-primary);
	text-decoration: none;
}

.mh-newsroom__item-link:hover {
	color: var(--mh-color-accent);
}

.mh-newsroom__excerpt {
	font-size: var(--mh-font-size-sm);
	color: var(--mh-color-secondary);
	margin: var(--mh-space-xs) 0 0;
}

.mh-newsroom__no-results {
	color: var(--mh-color-secondary);
	font-style: italic;
	padding: var(--mh-space-xl) 0;
	text-align: center;
}

.mh-newsroom__pagination {
	margin-top: var(--mh-space-xl);
}

@media (max-width: 600px) {
	.mh-newsroom__article {
		grid-template-columns: 1fr;
	}

	.mh-newsroom__search {
		flex-direction: column;
	}
}