/* =============================================================
   ZMH Lite — main.css
   Brand system: --zmh-primary / --zmh-primary-dark come from the
   Theme Panel (see inc/theme-panel.php), defaulting to #003FA8/#002F7A.
   ============================================================= */

:root{
	--zmh-primary: #003FA8;
	--zmh-primary-dark: #002F7A;
	--zmh-header-bg-1: #003FA8;
	--zmh-header-bg-2: #002F7A;
	--zmh-mobile-menu-bg: #0b0b0f;
	--zmh-text: #1d2327;
	--zmh-text-muted: #646970;
	--zmh-border: #e5e7eb;
	--zmh-bg: #f6f7f9;
	--zmh-radius: 10px;
	--zmh-shadow: 0 1px 3px rgba(0,0,0,.06);
	--zmh-max: 1240px;
}

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

html{ -webkit-text-size-adjust: 100%; }

body{
	margin: 0;
	background: var(--zmh-bg);
	color: var(--zmh-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; }

.screen-reader-text{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

/* =============================================================
   HEADER
   ============================================================= */

.zmh-header{
	background: linear-gradient(135deg, var(--zmh-header-bg-1), var(--zmh-header-bg-2));
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.zmh-header-inner{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 12px 18px;
	display: grid;
	/* Fixed equal thirds — left/center/right ALWAYS own exactly one
	   third of the header, no matter which elements are toggled on
	   or off. This keeps "Right" pinned to the true right edge even
	   when the center zone is empty, instead of letting the grid
	   redistribute space based on content (which is what caused
	   positions to drift toward the middle). */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 16px;
}

.zmh-header-zone{
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.zmh-header-zone-left{ justify-content: flex-start; }
.zmh-header-zone-center{ justify-content: center; }
.zmh-header-zone-right{ justify-content: flex-end; }

.zmh-header-banner{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 14px 18px 0;
	text-align: center;
	overflow-x: auto;
}

@media (min-width: 901px){
	.zmh-header-banner.zmh-hide-desktop{ display: none; }
}

@media (min-width: 641px) and (max-width: 900px){
	.zmh-header-banner.zmh-hide-tablet{ display: none; }
}

.zmh-branding{ flex: 1 1 auto; min-width: 0; }
.zmh-branding img{ max-height: 56px; width: auto; }

.zmh-site-title{
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	text-decoration: none;
	letter-spacing: -.02em;
}

/* Desktop nav */
.zmh-primary-nav{ display: none; }

.zmh-menu{
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zmh-menu li{ position: relative; }

.zmh-menu ul.sub-menu{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Desktop nav */
@media (min-width: 901px){

	.zmh-menu .sub-menu{
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 210px;
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 10px 28px rgba(0,0,0,.18);
		padding: 6px;
		z-index: 200;
	}

	.zmh-menu .sub-menu .sub-menu{
		top: 0;
		left: 100%;
		margin-left: 6px;
	}

	.zmh-menu li:hover > .sub-menu,
	.zmh-menu li:focus-within > .sub-menu{
		display: block;
	}

	.zmh-menu .sub-menu a{
		color: var(--zmh-text);
		padding: 9px 12px;
		border-radius: 6px;
		font-size: 13px;
		font-weight: 500;
		white-space: nowrap;
	}

	.zmh-menu .sub-menu a:hover{
		background: var(--zmh-primary);
		color: #fff;
	}

	.zmh-menu li.menu-item-has-children > a::after{
		content: "";
		display: inline-block;
		width: 5px; height: 5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-left: 7px;
		opacity: .8;
	}
}

/* Mobile nav */
@media (max-width: 900px){

	.zmh-menu .sub-menu{
		margin: 2px 0 6px 14px;
		border-left: 2px solid rgba(255,255,255,.15);
	}

	.zmh-menu .sub-menu a{
		font-size: 13px;
		padding: 9px 8px;
		opacity: .85;
	}

	.zmh-menu li.menu-item-has-children > a::after{
		content: "";
		display: inline-block;
		width: 5px; height: 5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		margin-left: 6px;
		opacity: .7;
	}
}

.zmh-menu a{
	display: block;
	padding: 10px 14px;
	color: rgba(255,255,255,.9);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	border-radius: 7px;
	transition: background .15s;
}

.zmh-menu a:hover,
.zmh-menu .current-menu-item > a{
	background: rgba(255,255,255,.15);
	color: #fff;
}

/* Mobile menu toggle (animates hamburger -> X when open) */
.zmh-menu-toggle{
	background: rgba(255,255,255,.12);
	border: none;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	z-index: 210;
}

.zmh-menu-toggle-bar{
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.zmh-menu-toggle.is-active .zmh-menu-toggle-bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.zmh-menu-toggle.is-active .zmh-menu-toggle-bar:nth-child(2){ opacity: 0; }
.zmh-menu-toggle.is-active .zmh-menu-toggle-bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.zmh-search-toggle{
	background: rgba(255,255,255,.12);
	border: none;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	color: #fff;
}

.zmh-search-toggle .dashicons{ font-size: 18px; width: 18px; height: 18px; }

.zmh-search-form{
	background: rgba(0,0,0,.15);
	overflow: hidden;
}

.zmh-search-form[hidden]{ display: none; }

.zmh-search-form-inner{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 12px 18px;
}

.zmh-search-form-inner .search-form{
	display: flex;
	gap: 8px;
}

.zmh-search-form-inner input[type="search"]{
	flex: 1;
	height: 40px;
	border: none;
	border-radius: 7px;
	padding: 0 12px;
	font-size: 14px;
}

.zmh-search-form-inner button{
	height: 40px;
	padding: 0 16px;
	border: none;
	border-radius: 7px;
	background: #fff;
	color: var(--zmh-primary);
	font-weight: 700;
	cursor: pointer;
}

/* Mobile nav drawer — a proper full-width panel, not a squeezed
   dropdown squashed into whatever column the menu happens to sit in.
   It's fixed to the viewport (so header overflow/zone clipping can't
   cut it off) and sits directly under the header using a height that
   main.js measures and writes to --zmh-header-h. */
@media (max-width: 900px){
	.zmh-primary-nav{
		display: block;
		position: fixed;
		top: var(--zmh-header-h, 64px);
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--zmh-mobile-menu-bg, #0b0b0f);
		box-shadow: 0 12px 24px rgba(0,0,0,.35);
		z-index: 150;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.zmh-primary-nav.is-open{
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .2s ease, transform .2s ease;
	}
	.zmh-menu{ flex-direction: column; align-items: stretch; padding: 6px 18px 24px; gap: 0; }
	.zmh-menu a{
		padding: 15px 8px;
		font-size: 15px;
		border-radius: 0;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}
	.zmh-menu > li:last-child > a{ border-bottom: none; }
	.zmh-menu a:hover,
	.zmh-menu .current-menu-item > a{ background: rgba(255,255,255,.06); }
}

body.zmh-menu-open{ overflow: hidden; }

@media (min-width: 901px){
	.zmh-menu-toggle{ display: none; }
	.zmh-primary-nav{
		display: block;
		position: static;
		max-height: none !important;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		box-shadow: none;
	}

	/* The equal-thirds grid (see .zmh-header-inner) is right for the
	   mobile header, which only ever holds compact icons. On desktop
	   the same zone can hold the FULL inline menu, which is often
	   wider than a strict 1/3 — capping it there was clipping items
	   (only the last couple of links stayed visible). Switching the
	   minimum from 0 to auto means each column is guaranteed enough
	   room to fit its own content first; only the leftover space
	   beyond that gets shared out equally between the three zones,
	   so a short logo+search pairing still sits in neat symmetric
	   thirds, but a long menu is simply never cut off.

	   For that "auto" minimum to actually reserve the menu's FULL
	   one-line width (instead of just its longest single word), the
	   links must not be allowed to wrap — otherwise the grid only
	   guarantees room for one word, the row silently wraps to a
	   second line to fit anyway, and you get the stacked/overlapping
	   look. white-space: nowrap here is what keeps everything on one
	   line using the real space available beside the logo. */
	.zmh-header-inner{
		grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr) minmax(auto, 1fr);
	}
	.zmh-header-zone{ overflow: visible; }
	.zmh-menu{ flex-wrap: nowrap; }
	.zmh-menu a{ white-space: nowrap; }
}

/* =============================================================
   CONTENT BLOCK (td_block_7-compatible) — header bar + card grid
   ============================================================= */

.zmh-home,
.zmh-page,
.zmh-fallback{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 20px 18px 40px;
}

.tdc-zone, .vc_row, .vc_column{ display: block; }

.zmh-block{ margin-bottom: 28px; }

.zmh-block-head{
	--zmh-block-color: var(--zmh-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-left: 4px solid var(--zmh-block-color);
	border-radius: var(--zmh-radius);
	padding: 12px 16px;
	margin-bottom: 14px;
	box-shadow: var(--zmh-shadow);
}

.zmh-block-title{
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: var(--zmh-text);
	letter-spacing: -.01em;
	overflow-wrap: break-word;
	word-break: break-word;
	min-width: 0;
}

.zmh-block-actions{
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.zmh-block-foot{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.zmh-block-nav{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--zmh-border);
	background: #fff;
	color: var(--zmh-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s, border-color .15s;
}

.zmh-block-nav:hover:not(:disabled){
	background: var(--zmh-primary);
	border-color: var(--zmh-primary);
	color: #fff;
}

.zmh-block-nav:disabled{
	opacity: .35;
	cursor: default;
}

.zmh-block-viewall{
	font-size: 12.5px;
	font-weight: 700;
	color: var(--zmh-primary);
	text-decoration: none;
	white-space: nowrap;
	padding: 6px 12px;
	border: 1px solid var(--zmh-primary);
	border-radius: 20px;
	transition: background .15s, color .15s;
}

.zmh-block-viewall:hover{
	background: var(--zmh-primary);
	color: #fff;
}

.zmh-block-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
	transition: opacity .15s;
}

.zmh-block-grid.is-loading{ opacity: .45; }

.zmh-block-empty{
	color: var(--zmh-text-muted);
	font-size: 14px;
	padding: 20px;
	text-align: center;
	background: #fff;
	border-radius: var(--zmh-radius);
	border: 1px dashed var(--zmh-border);
}

/* Cards */
.zmh-card{
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-radius: var(--zmh-radius);
	overflow: hidden;
	box-shadow: var(--zmh-shadow);
	transition: transform .15s, box-shadow .15s;
}

.zmh-card:hover{
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0,0,0,.1);
}

.zmh-card-thumb{
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--zmh-bg);
	overflow: hidden;
}

.zmh-card-thumb img{
	width: 100%; height: 100%;
	object-fit: cover;
}

.zmh-card-thumb-placeholder{
	display: block;
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--zmh-border), #f3f4f6);
}

.zmh-card-body{ padding: 10px 12px 12px; }

.zmh-card-title{
	margin: 0 0 6px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: break-word;
	word-break: break-word;
}

.zmh-card-title a{
	color: var(--zmh-text);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zmh-card-title a:hover{ color: var(--zmh-primary); }

.zmh-card-cat{
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #fff;
	background: var(--zmh-primary);
	padding: 3px 8px;
	border-radius: 20px;
	text-decoration: none;
	margin-bottom: 6px;
}

.zmh-card-meta{
	font-size: 11.5px;
	color: var(--zmh-text-muted);
}

.zmh-card-meta-sep{ margin: 0 5px; }
.zmh-card-readtime{ white-space: nowrap; }
.zmh-card-author{ white-space: nowrap; font-weight: 600; color: var(--zmh-text); }

@media (min-width: 640px){
	.zmh-block-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ── Dense Grid (td_block_13) — smaller cards, more per row ── */

.zmh-block-grid--dense{
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
}

@media (min-width: 640px){
	.zmh-block-grid--dense{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.zmh-card--sm .zmh-card-body{ padding: 7px 9px 9px; }
.zmh-card--sm .zmh-card-title{ font-size: 12px; -webkit-line-clamp: 2; }
.zmh-card--sm .zmh-card-cat{ font-size: 9px; padding: 2px 6px; }
.zmh-card--sm .zmh-card-meta{ font-size: 10.5px; }

/* ── Hero (td_block_2 Featured Spotlight, td_block_9 Split Feature) ── */

.zmh-hero{
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-radius: var(--zmh-radius);
	overflow: hidden;
	box-shadow: var(--zmh-shadow);
}

.zmh-hero-thumb{
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--zmh-bg);
	overflow: hidden;
}

.zmh-hero-thumb img{ width: 100%; height: 100%; object-fit: cover; }

.zmh-hero-body{ padding: 16px 18px 18px; }

.zmh-hero-title{
	margin: 6px 0 8px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
}

.zmh-hero-title a{ color: var(--zmh-text); text-decoration: none; }
.zmh-hero-title a:hover{ color: var(--zmh-primary); }

.zmh-hero-excerpt{
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--zmh-text-muted);
}

@media (min-width: 640px){
	.zmh-hero-title{ font-size: 24px; }
}

/* ── Split Feature (td_block_9) — hero left, list right ── */

.zmh-split{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.zmh-split-feature{ flex: none; }
.zmh-split-list{ display: flex; flex-direction: column; gap: 2px; }

@media (min-width: 780px){
	.zmh-split{ flex-direction: row; align-items: stretch; }
	.zmh-split-feature{ flex: 1 1 58%; min-width: 0; }
	.zmh-split-list{ flex: 1 1 42%; min-width: 0; justify-content: flex-start; }
}

/* ── Compact List (td_block_5, and the list side of td_block_9) ── */

.zmh-list{ display: flex; flex-direction: column; }

.zmh-list-row{
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 11px 4px;
	border-bottom: 1px solid var(--zmh-border);
}

.zmh-list-row:last-child{ border-bottom: none; }

.zmh-list-index{
	flex: none;
	font-size: 13px;
	font-weight: 800;
	color: var(--zmh-primary);
	font-variant-numeric: tabular-nums;
}

.zmh-list-row-body{ min-width: 0; }

.zmh-list-row-title{
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
}

.zmh-list-row-title a{ color: var(--zmh-text); text-decoration: none; }
.zmh-list-row-title a:hover{ color: var(--zmh-primary); }

.zmh-list-row-date{
	font-size: 11px;
	color: var(--zmh-text-muted);
}

/* =============================================================
   TWO-COLUMN LAYOUT (single / category / tag / page / search / 404)
   Homepage deliberately excluded — matches the actual site.
   ============================================================= */

.zmh-layout{
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.zmh-layout-main{
	flex: 1 1 0;
	min-width: 0;
}

.zmh-sidebar{
	flex: 0 0 320px;
	width: 320px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

@media (max-width: 900px){
	.zmh-layout{ flex-direction: column; }
	.zmh-sidebar{ width: 100%; flex-basis: auto; }
}

/* Widget styling — matches the before_widget/before_title wrapper
   markup registered in functions.php (aside.widget > .block-title),
   so both our own widgets and any plugin-provided ones look
   consistent. */

.zmh-sidebar .widget{
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-radius: var(--zmh-radius);
	box-shadow: var(--zmh-shadow);
	padding: 18px;
	overflow: hidden;
}

.zmh-sidebar .block-title{
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--zmh-primary);
}

.zmh-sidebar .block-title span{
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--zmh-text);
}

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

.zmh-sidebar .widget li{
	padding: 9px 0;
	border-bottom: 1px solid var(--zmh-bg);
	font-size: 13.5px;
}

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

.zmh-sidebar .widget a{
	color: var(--zmh-text);
	text-decoration: none;
}

.zmh-sidebar .widget a:hover{ color: var(--zmh-primary); }

.zmh-sidebar .widget img{ max-width: 100%; height: auto; }

.gj-trending-list li{ padding: 10px 0; }

.gj-trending-list--with-thumb li{
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.gj-trending-thumb{
	flex: 0 0 auto;
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--zmh-border);
}

/* Higher specificity than the generic ".zmh-sidebar .widget img{ height:
   auto }" rule above, which would otherwise win and let this thumbnail
   grow to the image's natural height instead of staying pinned at 56px. */
.zmh-sidebar .widget .gj-trending-thumb img{
	width: 56px;
	height: 56px;
	max-width: 56px;
	object-fit: cover;
	display: block;
}

.gj-trending-thumb-placeholder{
	display: block;
	width: 100%;
	height: 100%;
	background: var(--zmh-border);
}

.gj-trending-body{ flex: 1 1 auto; min-width: 0; }

.gj-trending-title{
	display: block;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.4;
	margin-bottom: 4px;
}

.gj-trending-meta{
	font-size: 11.5px;
	color: var(--zmh-text-muted);
	display: flex;
	gap: 5px;
}

.zmh-single{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 20px 18px 10px;
}

.zmh-single-inner{
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-radius: var(--zmh-radius);
	box-shadow: var(--zmh-shadow);
	overflow: hidden;
	max-width: 820px;
	margin: 0 auto;
}

.zmh-single-header{ padding: 24px 24px 0; }

.zmh-single-cat{
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
	background: var(--zmh-primary);
	padding: 4px 10px;
	border-radius: 20px;
	text-decoration: none;
	margin-bottom: 10px;
}

.zmh-single-title{
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--zmh-text);
	overflow-wrap: break-word;
	word-break: break-word;
}

.zmh-single-meta{
	font-size: 13px;
	color: var(--zmh-text-muted);
	margin-bottom: 18px;
}

.zmh-single-meta-sep{ margin: 0 6px; }

.zmh-single-thumb{
	background: var(--zmh-bg);
	margin: -8px -24px 20px;
}

.zmh-single-thumb img{ width: 100%; }

.zmh-single-content{
	padding: 22px 24px 6px;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--zmh-text);
	overflow: hidden;
}

/* Classic clearfix — if the content includes a floated element (a
   hand-coded "player beside a list" layout, for example) without its
   own clearing rule, whatever comes after this div — including
   anything an ad plugin appends via the_content — would otherwise
   render pulled up into that same spot instead of cleanly below it. */
.zmh-single-content::after{
	content: "";
	display: table;
	clear: both;
}

.zmh-single-content p{ margin: 0 0 16px; }
.zmh-single-content img{
	border-radius: 8px;
	margin: 10px auto;
	display: block;
	max-width: 100%;
	height: auto;
}
.zmh-single-content audio{ width: 100%; margin: 10px 0; }

/* Embedded media — YouTube and any other iframe/video/object embed.
   WordPress's classic oEmbed output carries fixed width/height HTML
   attributes (YouTube defaults to 560×315), which is what was blowing
   the content column wide on mobile. max-width caps it; height:auto
   lets the browser preserve the embed's own aspect ratio from those
   attributes, same mechanism as a responsive <img>. */
.zmh-single-content iframe,
.zmh-single-content embed,
.zmh-single-content object,
.zmh-single-content video{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 10px auto;
	border: 0;
}

.zmh-single-content h2,
.zmh-single-content h3,
.zmh-single-content h4{ margin: 24px 0 12px; font-weight: 700; }
.zmh-single-content a{ color: var(--zmh-primary); }

.zmh-single-content ul,
.zmh-single-content ol{
	margin: 0 0 16px;
	padding-left: 22px;
}

.zmh-single-content li{ margin-bottom: 6px; }

.zmh-single-content blockquote{
	margin: 0 0 16px;
	padding: 12px 18px;
	border-left: 4px solid var(--zmh-primary);
	background: var(--zmh-bg);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: var(--zmh-text-muted);
}

.zmh-single-content table{
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 14px;
	overflow-wrap: break-word;
}

.zmh-single-content th,
.zmh-single-content td{
	padding: 10px 12px;
	border: 1px solid var(--zmh-border);
	text-align: left;
	vertical-align: top;
}

.zmh-single-content th{
	background: var(--zmh-bg);
	font-weight: 700;
}

/* Real data tables (tracklists, spec sheets, etc.) keep their actual
   row/column structure at every screen size — collapsing them to a
   stacked list destroys the "No. / Title / Link" relationship the
   table exists to show. If a table is wider than the screen, it
   scrolls horizontally as a unit instead. */
@media (max-width: 640px){
	.zmh-single-content table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		table-layout: auto;
		white-space: nowrap;
	}
	.zmh-single-content th,
	.zmh-single-content td{
		white-space: normal;
	}
}

.zmh-single-tags{
	padding: 4px 24px 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zmh-tag-pill{
	font-size: 12.5px;
	font-weight: 600;
	color: var(--zmh-primary);
	background: #f0f4ff;
	padding: 6px 12px;
	border-radius: 20px;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.zmh-tag-pill:hover{
	background: var(--zmh-primary);
	color: #fff;
}

.zmh-single-author-box{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 24px 24px;
	padding: 16px;
	background: var(--zmh-bg);
	border-radius: var(--zmh-radius);
}

.zmh-single-author-box img{ border-radius: 50%; flex-shrink: 0; }
.zmh-single-author-box strong{ display: block; margin-bottom: 4px; font-size: 14px; }
.zmh-single-author-box p{ margin: 0; font-size: 13px; color: var(--zmh-text-muted); line-height: 1.5; }

.zmh-related{
	margin-top: 24px;
}

.zmh-comments{
	margin-top: 24px;
}

/* =============================================================
   COMMENTS
   ============================================================= */

.zmh-comments-area{
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-radius: var(--zmh-radius);
	box-shadow: var(--zmh-shadow);
	padding: 22px 24px;
}

.zmh-comments-title{
	margin: 0 0 18px;
	font-size: 17px;
	font-weight: 800;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--zmh-border);
}

.zmh-comment-list,
.zmh-comment-list .children{
	list-style: none;
	margin: 0;
	padding: 0;
}

.zmh-comment-list .children{
	margin-left: 20px;
	padding-left: 16px;
	border-left: 2px solid var(--zmh-border);
}

.zmh-comment-list > li{ margin-bottom: 18px; }

.comment-body{
	display: flex;
	gap: 12px;
}

.comment-author .avatar{
	border-radius: 50%;
	flex-shrink: 0;
	display: block;
}

.comment-author .fn{
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	color: var(--zmh-text);
}

.comment-metadata{
	font-size: 12px;
	color: var(--zmh-text-muted);
	margin-bottom: 6px;
}

.comment-metadata a{ color: inherit; text-decoration: none; }

.comment-content p{ margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.comment-content p:last-child{ margin-bottom: 0; }

.comment-reply-link{
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--zmh-primary);
	text-decoration: none;
}

.comment-reply-link:hover{ text-decoration: underline; }

.zmh-comments-closed{
	color: var(--zmh-text-muted);
	font-size: 14px;
	padding: 14px;
	background: var(--zmh-bg);
	border-radius: var(--zmh-radius);
	text-align: center;
}

/* Comment form */
#respond{ margin-top: 24px; }

#reply-title{
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 800;
}

#reply-title small{
	font-weight: 500;
	font-size: 12px;
	margin-left: 8px;
}

#reply-title small a{ color: var(--zmh-primary); }

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label{
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--zmh-text);
}

#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"]{
	width: 100%;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	padding: 8px 11px;
	font-size: 13px;
	font-family: inherit;
	margin-bottom: 14px;
}

#commentform textarea:focus,
#commentform input:focus{
	outline: none;
	border-color: var(--zmh-primary);
	box-shadow: 0 0 0 3px rgba(0,63,168,.12);
}

.comment-form-cookies-consent{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--zmh-text-muted);
	margin-bottom: 14px;
}

.comment-form-cookies-consent input{ margin: 0; }

.zmh-comment-submit{
	background: var(--zmh-primary);
	border: 1px solid var(--zmh-primary);
	color: #fff;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 14px;
}

.zmh-comment-submit:hover{ background: var(--zmh-primary-dark); border-color: var(--zmh-primary-dark); }

@media (max-width: 640px){
	.zmh-comments-area{ padding: 18px 16px; }
	.zmh-comment-list .children{ margin-left: 12px; padding-left: 10px; }
	.comment-body{ gap: 10px; }
	.comment-author img{ width: 36px; height: 36px; }
}

.zmh-archive{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 20px 18px 40px;
}

.zmh-archive-header{
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-radius: var(--zmh-radius);
	box-shadow: var(--zmh-shadow);
	padding: 20px 22px;
	margin-bottom: 18px;
	border-left: 4px solid var(--zmh-primary);
}

.zmh-archive-title{
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	color: var(--zmh-text);
}

.zmh-archive-desc{
	font-size: 14px;
	color: var(--zmh-text-muted);
	margin-bottom: 8px;
}

.zmh-archive-count{
	margin: 0;
	font-size: 12.5px;
	color: var(--zmh-text-muted);
}

.zmh-archive-pagination{
	margin-top: 22px;
	display: flex;
	justify-content: center;
}

.zmh-archive-pagination .nav-links{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.zmh-archive-pagination .page-numbers{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 7px;
	background: #fff;
	border: 1px solid var(--zmh-border);
	color: var(--zmh-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: background .15s, color .15s, border-color .15s;
}

.zmh-archive-pagination .page-numbers:hover{
	border-color: var(--zmh-primary);
	color: var(--zmh-primary);
}

.zmh-archive-pagination .page-numbers.current{
	background: var(--zmh-primary);
	border-color: var(--zmh-primary);
	color: #fff;
}

.zmh-archive-pagination .page-numbers.dots{
	background: transparent;
	border: none;
}

.zmh-archive-title span{
	color: var(--zmh-primary);
}

.zmh-search-empty{
	background: #fff;
	border: 1px dashed var(--zmh-border);
	border-radius: var(--zmh-radius);
	padding: 30px 20px;
	text-align: center;
}

.zmh-search-empty p{
	color: var(--zmh-text-muted);
	margin: 0 0 16px;
}

.zmh-search-empty .search-form{
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin: 0 auto;
}

.zmh-search-empty input[type="search"]{
	flex: 1;
	height: 40px;
	border: 1px solid #d0d5dd;
	border-radius: 7px;
	padding: 0 12px;
	font-size: 14px;
}

.zmh-search-empty button{
	height: 40px;
	padding: 0 18px;
	border: none;
	border-radius: 7px;
	background: var(--zmh-primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* =============================================================
   404
   ============================================================= */

.zmh-404{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 20px 18px 40px;
}

.zmh-404-inner{
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-radius: var(--zmh-radius);
	box-shadow: var(--zmh-shadow);
	max-width: 560px;
	margin: 0 auto 30px;
	padding: 44px 30px;
	text-align: center;
}

.zmh-404-code{
	margin: 0;
	font-size: 56px;
	font-weight: 900;
	color: var(--zmh-primary);
	line-height: 1;
	letter-spacing: -.02em;
}

.zmh-404-title{
	margin: 8px 0 10px;
	font-size: 20px;
	font-weight: 800;
}

.zmh-404-text{
	margin: 0 0 22px;
	color: var(--zmh-text-muted);
	font-size: 14px;
}

.zmh-404-search .search-form{
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.zmh-404-search input[type="search"]{
	flex: 1;
	height: 42px;
	border: 1px solid #d0d5dd;
	border-radius: 7px;
	padding: 0 14px;
	font-size: 14px;
}

.zmh-404-search button{
	height: 42px;
	padding: 0 18px;
	border: none;
	border-radius: 7px;
	background: var(--zmh-primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.zmh-404-home{
	display: inline-block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--zmh-primary);
	text-decoration: none;
}

.zmh-404-home:hover{ text-decoration: underline; }

@media (max-width: 640px){
	.zmh-single-header{ padding: 18px 16px 0; }
	.zmh-single-title{ font-size: 21px; }
	.zmh-single-content{ padding: 18px 16px 4px; font-size: 15px; }
	.zmh-single-thumb{ margin: -18px -16px 16px; }
	.zmh-single-tags{ padding: 4px 16px 18px; }
	.zmh-single-author-box{ margin: 0 16px 18px; flex-direction: column; align-items: flex-start; }
}

.zmh-page-article{
	background: #fff;
	border: 1px solid var(--zmh-border);
	border-radius: var(--zmh-radius);
	box-shadow: var(--zmh-shadow);
	padding: 28px 24px;
	max-width: 800px;
	margin: 0 auto;
}

.zmh-page-title{
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 3px solid var(--zmh-primary);
	font-size: 26px;
	font-weight: 800;
}

.zmh-page-thumb{
	margin: 0 0 20px;
	border-radius: var(--zmh-radius);
	overflow: hidden;
}

.zmh-page-content{ font-size: 15px; line-height: 1.7; color: var(--zmh-text); }
.zmh-page-content p{ margin: 0 0 16px; }

.zmh-page-content h2,
.zmh-page-content h3,
.zmh-page-content h4{
	margin: 28px 0 12px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--zmh-text);
}

.zmh-page-content h2{ font-size: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--zmh-border); }
.zmh-page-content h3{ font-size: 17px; }
.zmh-page-content h4{ font-size: 15px; }

.zmh-page-content ul,
.zmh-page-content ol{
	margin: 0 0 16px;
	padding-left: 22px;
}

.zmh-page-content li{ margin-bottom: 6px; }
.zmh-page-content li > ul,
.zmh-page-content li > ol{ margin-top: 6px; margin-bottom: 0; }

.zmh-page-content blockquote{
	margin: 0 0 16px;
	padding: 12px 18px;
	border-left: 4px solid var(--zmh-primary);
	background: var(--zmh-bg);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: var(--zmh-text-muted);
}

.zmh-page-content blockquote p:last-child{ margin-bottom: 0; }

.zmh-page-content table{
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 14px;
}

.zmh-page-content th,
.zmh-page-content td{
	padding: 10px 12px;
	border: 1px solid var(--zmh-border);
	text-align: left;
}

.zmh-page-content th{
	background: var(--zmh-bg);
	font-weight: 700;
}

@media (max-width: 640px){
	.zmh-page-content table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
	.zmh-page-content th,
	.zmh-page-content td{
		white-space: normal;
	}
}

/* Embedded media — same fix as .zmh-single-content above. Composer
   block pages can carry a pasted YouTube URL too, so this needs it
   just as much as single.php does. */
.zmh-page-content iframe,
.zmh-page-content embed,
.zmh-page-content object,
.zmh-page-content video{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 10px auto;
	border: 0;
}

@media (max-width: 640px){
	.zmh-page-content table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.zmh-page-content a{
	color: var(--zmh-primary);
	text-decoration: underline;
}

.zmh-page-content img{
	border-radius: 8px;
	margin: 12px 0;
}

.zmh-page-content hr{
	border: none;
	border-top: 1px solid var(--zmh-border);
	margin: 28px 0;
}

.zmh-page-content strong{ font-weight: 700; }

/* =============================================================
   FOOTER
   ============================================================= */

.zmh-footer{
	background: #14161a;
	color: #cfd3d8;
	margin-top: 30px;
}

.zmh-footer-bar{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 16px 18px;
	display: flex;
	align-items: flex-start;
}

.zmh-footer-bottom{
	flex: 0 0 35%;
	max-width: 35%;
}

.zmh-footer-bottom p{
	margin: 0;
	font-size: 12px;
	color: #9099a3;
	white-space: normal;
	word-wrap: break-word;
}

.zmh-footer-nav{
	flex: 0 0 65%;
	max-width: 65%;
}

.zmh-footer-menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zmh-footer-menu li{ position: relative; }

.zmh-footer-menu a{
	display: block;
	padding: 5px 11px;
	color: #cfd3d8;
	text-decoration: none;
	font-size: 11px;
	font-weight: 600;
	border-radius: 6px;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.zmh-footer-menu a:hover{
	background: rgba(255,255,255,.08);
	color: #fff;
}

.zmh-footer-menu .sub-menu{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 100%;
}

.zmh-footer-widgets{
	max-width: var(--zmh-max);
	margin: 0 auto;
	padding: 30px 18px 10px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.zmh-footer-col .widget{ margin-bottom: 20px; }
.zmh-footer-col .widget:last-child{ margin-bottom: 0; }

.zmh-footer-col .block-title{
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid rgba(255,255,255,.15);
}

.zmh-footer-col .block-title span{
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
}

.zmh-footer-col .widget,
.zmh-footer-col .widget p{
	color: #9099a3;
	font-size: 13px;
	line-height: 1.6;
}

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

.zmh-footer-col .widget li{
	padding: 7px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 13px;
}

.zmh-footer-col .widget li:last-child{ border-bottom: none; }

.zmh-footer-col .widget a{
	color: #cfd3d8;
	text-decoration: none;
}

.zmh-footer-col .widget a:hover{ color: #fff; }

.zmh-footer-col .widget img{ max-width: 100%; height: auto; border-radius: 6px; }

@media (max-width: 720px){
	.zmh-footer-widgets{ grid-template-columns: 1fr; gap: 20px; }
}