/* =============================================================
   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

   Breakpoint note: header, primary nav, and the sidebar/layout
   split all switch to desktop treatment at 768px (tablet-portrait
   width and up) — previously this was 900/901px, well above where
   the block-grid and split-feature content areas already switch to
   their desktop layout (640–780px). That gap meant a real tablet in
   the 641–900px range got a desktop-looking content grid sitting
   under a mobile hamburger header — two different opinions about
   whether the same screen counts as "desktop." 768px unifies them:
   a tablet is now treated the same as a PC everywhere in the theme,
   not as a third, in-between tier. Keep header/nav/sidebar rules on
   this same value if it's ever changed again.
   ============================================================= */

.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: 769px){
	.zmh-header-banner.zmh-hide-desktop{ display: none; }
}

@media (min-width: 641px) and (max-width: 768px){
	.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: 769px){

	.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: 768px){

	.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: 768px){
	.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: 769px){
	.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;
	/* --zmh-grid-cols-m/-d are set inline per block by PHP, resolved
	   through the block > page > site-wide cascade documented in
	   zmh_resolve_block_grid_cols(). The 1 / 2 fallbacks here only
	   apply if that inline style is ever missing entirely. */
	grid-template-columns: repeat(var(--zmh-grid-cols-m, 1), minmax(0, 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;
}

.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(var(--zmh-grid-cols-d, 2), minmax(0, 1fr)); }
}

/* ── Dense Grid (td_block_13) — smaller cards, tighter gap. Column
   count is driven by the same --zmh-grid-cols-m/-d variables as the
   regular Card Grid above (set inline per block via the cascade in
   zmh_resolve_block_grid_cols()) — Dense Grid's own site-wide default
   is just a denser starting point (2/4 vs 1/2), not a separate CSS
   rule, so page- and block-level overrides work identically for
   both grid types. ── */

.zmh-block-grid--dense{
	gap: 10px;
}

.zmh-card--sm .zmh-card-body{ padding: 7px 9px 9px; }
.zmh-card--sm .zmh-card-title{ font-size: 12px; }
.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: 768px){
	.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; }

/* Gutenberg wraps tables, images, and embeds in a <figure> element that
   carries no class-based reset anywhere in this stylesheet, so it falls
   back to the browser default of margin: 1em 40px. On a phone screen
   that's 40px of squeeze on each side stacked on top of this container's
   own 24px padding — on a ~375px viewport that alone eats over half the
   width before the actual table/image content even starts, which is why
   a table (or image) that looks fine on a wide PC screen looks crushed
   and misaligned on mobile. Zeroing the horizontal margin here fixes
   every figure-wrapped block at once, not just tables. */
.zmh-single-content figure{
	margin: 0 0 16px !important;
	max-width: 100%;
}

.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;
}

/* Music-streaming embeds (Spotify, SoundCloud, Apple Music, Deezer,
   Boomplay). A bare URL pasted in the editor gets auto-converted by
   WordPress's own oEmbed discovery (that request tags the returned
   URL with utm_source=oembed) — and that auto-discovery response
   comes back with a small, fixed compact height baked into its
   iframe markup (a single-track strip), NOT the full player+tracklist
   view you get from a provider's own "Copy embed code" button.
   `height: revert` (a previous attempt at this) just faithfully
   restored that small baked-in height — it was solving the wrong
   problem, since there's no larger number hidden in the markup to
   reveal. These players are actually responsive to whatever box
   they're given, so the real fix is to force a generously tall box
   ourselves and let the provider's own embed fill it, regardless of
   what height its oEmbed response happened to specify. */
.zmh-single-content iframe[src*="spotify.com"],
.zmh-single-content iframe[src*="soundcloud.com"],
.zmh-single-content iframe[src*="music.apple.com"],
.zmh-single-content iframe[src*="deezer.com"],
.zmh-single-content iframe[src*="boomplay.com"]{
	height: 380px !important;
}

.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; }
}