/**
 * HomeBlesh theme styles, v1.1.
 * Magazine style: white canvas, black pill nav, slanted ribbon section
 * badges, rounded cards, centered footer. Original implementation.
 */

/* ============ Tokens ============ */
:root {
	--hb-bg: #ffffff;
	--hb-soft: #F7F2E9;
	--hb-card: #FFFEFB;
	--hb-border: #E2E1D8;
	--hb-green: #0B6B4C;
	--hb-sage: #E8EFE3;
	--hb-heading: #121612;
	--hb-ink: #121612;
	--hb-text: #333a35;
	--hb-muted: #68716a;
	--hb-line: #e2e1d8;
	--hb-primary: #07563D;
	--hb-mid: #1D6FB8;
	--hb-leaf: #0B6B4C;
	--hb-oak: #0284C7;
	--hb-fern: #1E7A4C;
	--hb-blue: #1D6FB8;
	--hb-sky: #0EA5E9;
	--hb-sky-deep: #0284C7;
	--hb-sky-soft: #E0F2FE;
	--hb-blue-soft: #DBEAFE;
	--hb-radius: 20px;
	--hb-shadow: 0 12px 32px rgba(18, 18, 40, 0.09);
	--hb-shadow-sm: 0 6px 18px rgba(18, 18, 40, 0.07);
	--hb-font-head: "Merriweather", Georgia, "Times New Roman", serif;
	--hb-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

/* v2.5.9: keep anchor jumps (table of contents, skip link) clear of
   the sticky pill nav, which is about 90px tall when stuck. */
html { -webkit-text-size-adjust: 100%; scroll-sustainability: smooth; scroll-padding-top: 110px; }

body {
	margin: 0;
	background: var(--hb-bg);
	color: var(--hb-text);
	font-family: var(--hb-font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hb-font-head);
	font-weight: 800;
	line-height: 1.25;
	color: var(--hb-ink);
	margin: 0 0 0.6em;
}

p { margin: 0 0 1em; }

a { color: var(--hb-mid); text-decoration: none; }
a:hover { color: var(--hb-primary); }

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

.hb-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.hb-sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hb-skip {
	position: absolute;
	left: 12px; top: -60px;
	background: var(--hb-ink);
	color: #fff;
	padding: 10px 16px;
	border-radius: 10px;
	z-index: 200;
	transition: top 0.2s ease;
}
.hb-skip:focus { top: 12px; color: #fff; }

/* ============ Buttons ============ */
.hb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 15px;
	padding: 13px 30px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.hb-btn:hover { transform: translateY(-2px); }
.hb-btn-primary { background: var(--hb-mid); color: #fff; box-shadow: 0 8px 20px rgba(46, 125, 91, 0.35); }
.hb-btn-primary:hover { color: #fff; background: #07563d; }
.hb-btn-lg { padding: 15px 38px; font-size: 16px; }
.hb-btn-outline { background: transparent; border-color: var(--hb-line); color: var(--hb-text); }
.hb-btn-outline:hover { border-color: var(--hb-primary); color: var(--hb-primary); }

.hb-textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--hb-mid);
}
.hb-textlink svg { width: 16px; height: 16px; }
.hb-textlink:hover { color: var(--hb-primary); }

.hb-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 0;
	background: var(--hb-soft);
	color: var(--hb-text);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.hb-icon-btn:hover { background: var(--hb-line); transform: translateY(-1px); }
.hb-icon-btn svg { width: 20px; height: 20px; }

/* ============ Slanted badges ============ */
.hb-badge {
	display: inline-block;
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--hb-mid);
	padding: 7px 16px;
	border-radius: 6px;
	transform: skewX(-12deg);
	box-shadow: 0 4px 10px rgba(18, 18, 40, 0.18);
	white-space: nowrap;
}
.hb-badge.is-pink { background: linear-gradient(135deg, #0B6B4C, var(--hb-primary)); }
.hb-badge.is-blue { background: linear-gradient(135deg, #1d6fb8, var(--hb-sky)); }
.hb-badge.is-purple { background: linear-gradient(135deg, #0284c7, var(--hb-sky)); }
.hb-badge.is-orange { background: linear-gradient(135deg, #1e7a4c, var(--hb-fern)); }
.hb-badge.is-green { background: linear-gradient(135deg, #2563eb, var(--hb-blue)); }

/* ============ Header ============ */
.hb-header { background: var(--hb-bg); }

.hb-toprow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 22px;
	padding-bottom: 18px;
}
.hb-toprow-social { display: flex; gap: 10px; flex: 1; }
.hb-toprow-spacer { flex: 1; }
.hb-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--hb-soft);
	color: var(--hb-text);
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.hb-social-link:hover { transform: translateY(-2px); background: var(--hb-primary); color: #fff; }
.hb-social-link svg { width: 16px; height: 16px; }

.hb-brand-center { text-align: center; flex: 1; }
.hb-brand-link { display: inline-flex; align-items: center; gap: 12px; }
.hb-wordmark, .hb-wordmark-text {
	font-family: var(--hb-font-head);
	font-weight: 900;
	font-size: 34px;
	color: var(--hb-mid);
	letter-spacing: -0.02em;
}
.hb-tagline {
	display: block;
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--hb-ink);
	margin-top: 2px;
}
.hb-homemark { width: 46px; height: 46px; flex: none; }

.hb-toprow-right { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; }

/* Header social: plain dark glyphs like the reference */
.hb-toprow-social .hb-social-link {
	background: transparent;
	width: auto;
	height: auto;
	padding: 5px;
	color: var(--hb-ink);
	border-radius: 0;
}
.hb-toprow-social .hb-social-link:hover { background: transparent; color: var(--hb-primary); transform: translateY(-2px); }
.hb-toprow-social .hb-social-link svg { width: 19px; height: 19px; }

/* Day/night pill switch */
.hb-dark-switch {
	position: relative;
	width: 54px;
	height: 30px;
	border-radius: 999px;
	background: #e9e9f0;
	border: 0;
	cursor: pointer;
	padding: 0;
	flex: none;
	transition: background 0.2s ease;
}
.hb-switch-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #f0a12e;
	transition: left 0.2s ease;
}
.hb-switch-knob svg { width: 15px; height: 15px; }
.hb-dark .hb-dark-switch { background: #3d3d52; }
.hb-dark .hb-switch-knob { left: 27px; color: var(--hb-mid); }
.hb-dark-icon-sun { display: inline-flex; }
.hb-dark-icon-moon { display: none; }
.hb-dark .hb-dark-icon-sun { display: none; }
.hb-dark .hb-dark-icon-moon { display: inline-flex; }
.hb-menu-toggle { display: none; }

/* Default site logo */
.hb-default-logo { height: 64px; width: auto; }
.hb-brand-link .custom-logo { height: 64px; width: auto; }
/* Keep the dark wordmark readable in dark mode. */
.hb-dark .hb-brand-link { background: #ffffff; border-radius: 16px; padding: 8px 18px; }

/* Black pill nav */
.hb-pillnav-wrap { padding-bottom: 26px; }
.hb-pillnav {
	background: var(--hb-ink);
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px 8px 28px;
	box-shadow: 0 12px 28px rgba(16, 16, 24, 0.25);
}
/* v2.5.2: sticky header, second pass on owner feedback. The sticky
   positioning stays on the <header> itself: its parent is the page
   body, so it can stay pinned for the full page height. When the
   Customizer sticky toggle is off, the header has no
   .hb-header-sticky class and none of these rules apply. The header
   stays in normal flow (sticky, not fixed). main.js pins the
   header's flow height to its natural height, so collapsing the
   brand row can never change the document height, shift the page,
   or feed back into the scroll position (the v2.5.1 loop). */
.hb-header-sticky { position: sticky; top: 0; z-index: 90; }
/* Keep the pinned header below the WordPress admin bar. */
body.admin-bar .hb-header-sticky { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .hb-header-sticky { top: 46px; }
}
/* Stuck state ("is-stuck", toggled by main.js): the header shell
   itself turns fully invisible, with no background, no border and
   no shadow of its own, so only the black pill nav shows, floating
   over the page content exactly as the owner asked. The shell also
   lets pointer events fall through to the content scrolling under
   it; only the pill itself stays clickable. The pill keeps its own
   background and soft shadow from .hb-pillnav above. */
body .hb-header-sticky.is-stuck {
	background: transparent;
	border: 0;
	box-shadow: none;
	pointer-events: none;
}
.hb-header-sticky.is-stuck .hb-pillnav { pointer-events: auto; }
/* The brand row collapses at every width. Animating its height is
   safe now that main.js pins the header's flow height: the collapse
   only moves the pill up inside the fixed header box, the document
   height never changes, and the pill gains a small floating offset
   from the pill wrap's stuck padding. The max-height cap only needs
   to exceed the row's natural height (about 121px on desktop). */
.hb-header-sticky .hb-toprow {
	max-height: 200px;
	transition: max-height 0.35s ease, padding-top 0.35s ease, padding-bottom 0.35s ease, opacity 0.25s ease, visibility 0s;
}
.hb-header-sticky.is-stuck .hb-toprow {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: max-height 0.35s ease, padding-top 0.35s ease, padding-bottom 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
}
.hb-header-sticky .hb-pillnav-wrap { transition: padding-top 0.35s ease, padding-bottom 0.35s ease; }
.hb-header-sticky.is-stuck .hb-pillnav-wrap { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 860px) {
	/* The wrapped brand row is taller on phones (brand block plus
	   the actions row, and the tagline can wrap), so its collapse
	   cap is raised to stay above the natural height. */
	.hb-header-sticky .hb-toprow { max-height: 300px; }
	/* Phones hide the pill nav in the normal header (the brand row
	   carries the drawer toggle there). In the stuck state the pill
	   is the one thing that shows instead: a single floating black
	   bar whose links scroll sideways inside it, so the menu stays
	   reachable mid-scroll with no white strip behind it. The
	   drawer is untouched and returns with the brand row at the
	   top of the page. Drop-down sub-menus cannot open inside the
	   sideways-scrolling bar; they work in the top state. */
	.hb-header-sticky.is-stuck .hb-pillnav-wrap { display: block; }
	.hb-header-sticky.is-stuck .hb-nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.hb-header-sticky.is-stuck .hb-nav::-webkit-scrollbar { display: none; }
	.hb-header-sticky.is-stuck .hb-menu { flex-wrap: nowrap; }
	.hb-header-sticky.is-stuck .hb-menu a { white-space: nowrap; }
}
/* v2.5.9: on tablets and smaller the pill nav stays a single row
   that scrolls sideways instead of wrapping into a tall pill, so
   every menu item stays reachable and the header stays compact. The
   soft fade at the right edge hints that more items are a swipe
   away. */
@media (max-width: 1024px) {
	.hb-nav { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }
	.hb-nav::-webkit-scrollbar { display: none; }
	.hb-menu { flex-wrap: nowrap; }
	.hb-menu a { white-space: nowrap; }
}
.hb-nav { flex: 1; }
.hb-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.hb-menu a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-family: var(--hb-font-head);
	font-weight: 700;
	font-size: 15.5px;
	padding: 10px 14px;
	border-radius: 999px;
	position: relative;
	white-space: nowrap;
}
.hb-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.hb-menu .hb-menu-home-icon { width: 26px; height: 26px; flex: none; }
.menu-item-home > a { padding: 10px 16px; justify-content: center; }
.hb-menu .current-menu-item > a::after,
.hb-menu .current-menu-ancestor > a::after,
.hb-menu .current_page_item > a::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 5px;
	height: 3px;
	border-radius: 3px;
	background: var(--hb-mid);
}
.hb-menu .menu-item-has-children { position: relative; }
.hb-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%; left: 0;
	min-width: 210px;
	background: #fff;
	border-radius: 14px;
	box-shadow: var(--hb-shadow);
	list-style: none;
	margin: 6px 0 0;
	padding: 8px;
	z-index: 95;
}
.hb-menu .menu-item-has-children:hover > .sub-menu,
.hb-menu .menu-item-has-children:focus-within > .sub-menu { display: block; }
.hb-menu .sub-menu a { color: var(--hb-text); display: flex; width: 100%; border-radius: 10px; }
.hb-menu .sub-menu a:hover { background: var(--hb-soft); color: var(--hb-primary); }
.hb-menu svg { width: 14px; height: 14px; }

.hb-pillnav .hb-search-toggle { background: transparent; color: #fff; }
.hb-pillnav .hb-search-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.hb-pillnav .hb-dark-switch { margin-left: 10px; }

/* Search overlay */
.hb-search-overlay {
	position: fixed; inset: 0;
	background: rgba(12, 12, 20, 0.72);
	backdrop-filter: blur(6px);
	z-index: 300;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 20px 20px;
}
.hb-search-overlay[hidden] { display: none; }
.hb-search-box {
	background: #fff;
	border-radius: 22px;
	padding: 34px;
	width: 100%;
	max-width: 620px;
	position: relative;
	box-shadow: var(--hb-shadow);
}
.hb-search-close { position: absolute; top: 14px; right: 14px; }
.hb-searchform { display: flex; gap: 10px; }
.hb-searchform-input {
	flex: 1;
	border: 2px solid var(--hb-line);
	border-radius: 999px;
	padding: 13px 22px;
	font-size: 16px;
	font-family: var(--hb-font-body);
}
.hb-searchform-input:focus { outline: none; border-color: var(--hb-mid); }
.hb-searchform-btn {
	border: 0; cursor: pointer;
	background: var(--hb-primary); color: #fff;
	border-radius: 999px;
	padding: 13px 28px;
	font-family: var(--hb-font-head);
	font-weight: 800;
}

/* Mobile drawer */
.hb-drawer[hidden] { display: none; }
.hb-drawer { position: fixed; inset: 0; z-index: 300; }
.hb-drawer-backdrop { position: absolute; inset: 0; background: rgba(12, 12, 20, 0.6); }
.hb-drawer-panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(360px, 88vw);
	background: #fff;
	padding: 22px;
	overflow-y: auto;
	border-radius: 22px 0 0 22px;
}
.hb-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hb-drawer-menu { list-style: none; margin: 0 0 18px; padding: 0; }
.hb-drawer-menu a {
	display: block;
	padding: 12px 6px;
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 17px;
	color: var(--hb-text);
	border-bottom: 1px solid var(--hb-line);
}
.hb-drawer-menu .sub-menu { list-style: none; padding-left: 14px; }

/* Homepage H1: visible editorial intro heading above the hero (v2.5.1). */
.hb-home-title {
	font-family: var(--hb-font-head);
	font-weight: 900;
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--hb-ink);
	text-align: center;
	margin: 34px 0 14px;
}

/* Homepage intro under the SEO H1 (v2.6.1). */
.hb-home-intro {
	text-align: center;
	color: var(--hb-muted);
	font-size: 17px;
	line-height: 1.6;
	max-width: 760px;
	margin: 0 auto 28px;
}

/* ============ Hero slider ============ */
.hb-hero { position: relative; margin-bottom: -70px; }
.hb-hero-track { position: relative; display: grid; }
.hb-slide {
	position: relative;
	grid-area: 1 / 1;
	border-radius: 26px;
	overflow: hidden;
	min-height: 560px;
	box-shadow: var(--hb-shadow);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.hb-slide.is-active {
	visibility: visible;
	opacity: 1;
	z-index: 2;
	transition: opacity 0.5s ease;
}
.hb-slide-bg { position: absolute; inset: 0; }
.hb-slide-bg img { width: 100%; height: 100%; object-fit: cover; }
.hb-slide-shade {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 22, 0.78) 0%, rgba(10, 10, 22, 0.25) 55%, rgba(10, 10, 22, 0.05) 100%);
}
.hb-slide-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 60px 8%;
	color: #fff;
}
.hb-slide-badge { margin-bottom: 22px; }
.hb-slide-title {
	font-size: clamp(30px, 4.6vw, 54px);
	font-weight: 900;
	color: #fff;
	max-width: 900px;
	margin-bottom: 16px;
	letter-spacing: -0.01em;
}
.hb-slide-title a { color: #fff; }
.hb-slide-title a:hover { color: #fff; }
.hb-slide-excerpt {
	max-width: 680px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 16.5px;
	margin-bottom: 26px;
}
.hb-slide-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.hb-hero-prev, .hb-hero-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px; height: 52px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.65);
	background: rgba(12, 12, 22, 0.25);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
	z-index: 5;
}
.hb-hero-prev:hover, .hb-hero-next:hover { background: var(--hb-primary); border-color: var(--hb-primary); transform: translateY(-50%) scale(1.06); }
.hb-hero-prev { left: 26px; }
.hb-hero-next { right: 26px; }
.hb-hero-prev svg, .hb-hero-next svg { width: 22px; height: 22px; }

.hb-hero-dots {
	position: absolute;
	bottom: 96px;
	left: 0; right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 5;
}
.hb-hero-dots button {
	width: 10px; height: 10px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}
.hb-hero-dots button.is-active { background: #fff; transform: scale(1.25); }

/* ============ Sections ============ */
.hb-section { padding: 64px 0; }
.hb-section-soft { background: var(--hb-soft); }

.hb-sec-head { text-align: center; margin-bottom: 40px; }
.hb-ribbon {
	display: inline-block;
	font-family: var(--hb-font-head);
	font-weight: 900;
	font-size: clamp(24px, 3vw, 34px);
	color: #fff;
	padding: 10px 38px;
	border-radius: 10px;
	transform: skewX(-12deg);
	box-shadow: 0 10px 24px rgba(18, 18, 40, 0.16);
	margin-bottom: 12px;
}
.hb-ribbon > span { display: inline-block; transform: skewX(12deg); }
.hb-ribbon.is-pink { background: linear-gradient(135deg, #0b6b4c, var(--hb-primary)); }
.hb-ribbon.is-blue { background: linear-gradient(135deg, #1d6fb8, var(--hb-sky)); }
.hb-ribbon.is-purple { background: linear-gradient(135deg, #0284c7, var(--hb-sky)); }
.hb-ribbon.is-orange { background: linear-gradient(135deg, #1e7a4c, var(--hb-fern)); }
.hb-ribbon.is-green { background: linear-gradient(135deg, #2563eb, var(--hb-blue)); }
.hb-sec-sub { color: var(--hb-muted); font-size: 16px; margin: 0; }

.hb-section-foot { text-align: center; margin-top: 38px; }
.hb-showmore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 15px;
	color: var(--hb-muted);
	border: 2px solid var(--hb-line);
	background: #fff;
	border-radius: 999px;
	padding: 12px 44px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
a.hb-showmore:hover, button.hb-showmore:hover { border-color: var(--hb-primary); color: var(--hb-primary); transform: translateY(-2px); }

/* Grids */
.hb-grid { display: grid; gap: 28px; }
.hb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hb-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============ Article cards ============ */
.hb-card {
	background: #fff;
	border-radius: var(--hb-radius);
	overflow: hidden;
	box-shadow: var(--hb-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	display: flex;
	flex-direction: column;
	position: relative;
}
.hb-card::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 3;
	background: linear-gradient(90deg, var(--hb-primary), var(--hb-leaf), var(--hb-mid));
	opacity: 0; transition: opacity 0.25s ease;
	border-radius: var(--hb-radius) var(--hb-radius) 0 0;
}
.hb-card:hover::before { opacity: 1; }
.hb-card:hover { transform: translateY(-6px); box-shadow: var(--hb-shadow); }
.hb-card-title a { transition: color 0.18s ease; }
.hb-card-title a:hover { color: var(--hb-mid); }
.hb-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.hb-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.hb-card:hover .hb-card-media img { transform: scale(1.06); }
.hb-card-media .hb-badge { position: absolute; left: 16px; bottom: 14px; z-index: 2; }
.hb-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.hb-card-title { font-size: 20px; margin-bottom: 10px; }
.hb-card-title a { color: var(--hb-ink); }
.hb-card-title a:hover { color: var(--hb-primary); }
.hb-card-meta { font-size: 13.5px; color: var(--hb-muted); margin-bottom: 12px; }
.hb-card-meta a { color: var(--hb-text); font-weight: 600; }
.hb-card-meta a:hover { color: var(--hb-primary); }
.hb-dot { margin: 0 6px; color: var(--hb-line); }
.hb-dots { border: 0; border-top: 2px dotted var(--hb-line); margin: 0 0 12px; }
.hb-card-excerpt { color: var(--hb-muted); font-size: 14.5px; margin: 0; }

/* Overlay feature card */
.hb-feature {
	position: relative;
	border-radius: var(--hb-radius);
	overflow: hidden;
	min-height: 480px;
	display: flex;
	align-items: flex-end;
	box-shadow: var(--hb-shadow);
}
.hb-feature-media { position: absolute; inset: 0; }
.hb-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.hb-feature::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8, 8, 18, 0.85) 0%, rgba(8, 8, 18, 0.25) 60%, rgba(8, 8, 18, 0) 100%);
}
.hb-feature-body { position: relative; z-index: 2; padding: 34px; color: #fff; }
.hb-feature-body .hb-badge { margin-bottom: 16px; }
.hb-feature-title { font-size: clamp(24px, 3vw, 36px); font-weight: 900; color: #fff; margin-bottom: 12px; }
.hb-feature-title a { color: #fff; }
.hb-feature-excerpt { color: rgba(255, 255, 255, 0.82); font-size: 15px; margin-bottom: 16px; max-width: 640px; }
.hb-feature .hb-card-meta { color: rgba(255, 255, 255, 0.75); }
.hb-feature .hb-card-meta a { color: #fff; }
.hb-feature .hb-textlink { color: #fff; }
.hb-feature .hb-textlink:hover { color: #dce8df; }

/* Editorial layout: big overlay + side rows */
.hb-editorial { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; }
.hb-editorial-side { display: flex; flex-direction: column; gap: 20px; }

/* Compact rows */
.hb-row { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--hb-shadow-sm); transition: transform 0.15s ease; }
.hb-row:hover { transform: translateX(4px); }
.hb-row-media { flex: none; width: 108px; height: 108px; border-radius: 12px; overflow: hidden; position: relative; }
.hb-row-media img { width: 100%; height: 100%; object-fit: cover; }
.hb-row-body { min-width: 0; }
.hb-row-body .hb-badge { font-size: 10.5px; padding: 5px 12px; margin-bottom: 8px; }
.hb-row-title { font-size: 16.5px; margin: 0 0 6px; }
.hb-row-title a { color: var(--hb-ink); }
.hb-row-title a:hover { color: var(--hb-primary); }
.hb-row-date { font-size: 13px; color: var(--hb-muted); }

/* Category cards */
.hb-category-grid { align-items: stretch; }
.hb-category-card {
	background: #fff;
	border-radius: var(--hb-radius);
	overflow: hidden;
	box-shadow: var(--hb-shadow-sm);
	text-align: center;
	padding-bottom: 24px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hb-category-card:hover { transform: translateY(-6px); box-shadow: var(--hb-shadow); }
.hb-category-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.hb-category-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.hb-category-card:hover .hb-category-media img { transform: scale(1.06); }
.hb-category-name { display: block; font-family: var(--hb-font-head); font-weight: 800; font-size: 19px; color: var(--hb-ink); margin: 18px 18px 6px; }
.hb-category-count {
	display: inline-flex; align-items: center;
	margin: 0 18px 8px; padding: 5px 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, #0b6b4c, var(--hb-leaf));
	color: #fff;
	font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
	box-shadow: 0 6px 14px rgba(130, 110, 255, 0.35);
}
.hb-category-desc { display: block; color: var(--hb-muted); font-size: 14px; margin: 0 18px; }

/* DIY + sustainability layouts */
.hb-diy { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.hb-diy-grid { align-content: start; }
.hb-sustain { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.hb-sustain-side { display: flex; flex-direction: column; gap: 20px; }

/* ============ Promo banner ============ */
.hb-promo {
	border-radius: 26px;
	background: linear-gradient(120deg, #0b6b4c 0%, #1d6fb8 60%, #1d6fb8 100%);
	padding: 46px 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	box-shadow: var(--hb-shadow);
	position: relative;
	overflow: hidden;
}
.hb-promo::before {
	content: "";
	position: absolute;
	width: 340px; height: 340px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	right: -90px; top: -110px;
}
.hb-promo::after {
	content: "";
	position: absolute;
	width: 200px; height: 200px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	left: 32%; bottom: -120px;
}
.hb-promo-text { position: relative; z-index: 2; color: #fff; }
.hb-promo-title { font-size: clamp(24px, 3vw, 34px); font-weight: 900; color: #fff; margin-bottom: 8px; }
.hb-promo-sub { color: rgba(255, 255, 255, 0.88); font-size: 16px; margin: 0; max-width: 560px; }
.hb-promo-cta {
	position: relative; z-index: 2; flex: none;
	background: var(--hb-oak);
	color: #fff;
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 16px;
	padding: 15px 38px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease, background 0.15s ease;
}
.hb-promo-cta:hover { color: #fff; background: #0284c7; transform: translateY(-2px); }

/* ============ Footer ============ */
/* Honeypot field: invisible to humans, visible to bots. */
.hb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.hb-footer {
	background: #121612;
	color: #c9c9d8;
	padding: 64px 0 0;
	margin-top: 20px;
}
.hb-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 52px;
}
.hb-footer-brand { display: inline-block; margin-bottom: 18px; }
.hb-footer-brand img,
.hb-footer-brand .custom-logo { max-height: 52px; width: auto; }
.hb-footer-about { font-size: 14.5px; line-height: 1.7; color: #a9a9bd; margin: 0 0 22px; max-width: 340px; }
.hb-footer-heading {
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 22px;
}
.hb-footer-links { list-style: none; margin: 0; padding: 0; }
.hb-footer-links li { margin-bottom: 13px; }
.hb-footer-links a { color: #c9c9d8; font-size: 14.5px; font-weight: 500; }
.hb-footer-links a:hover { color: var(--hb-primary); }

.hb-footer-social { display: flex; gap: 10px; margin-bottom: 26px; }
.hb-footer-social .hb-social-link { width: 40px; height: 40px; }
.hb-footer-social .hb-social-link svg { width: 18px; height: 18px; }
.hb-social-link.is-facebook { background: #3b5998; color: #fff; }
.hb-social-link.is-twitter { background: #1da1f2; color: #fff; }
.hb-social-link.is-youtube { background: #e52d27; color: #fff; }
.hb-social-link.is-instagram { background: #c13584; color: #fff; }
.hb-social-link.is-pinterest { background: #bd081c; color: #fff; }
.hb-social-link.is-rss { background: var(--hb-oak); color: #fff; }
.hb-footer-social .hb-social-link:hover { transform: translateY(-3px); filter: brightness(1.08); }

.hb-subscribe-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: #121612;
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 15px;
	padding: 14px 34px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.hb-subscribe-pill:hover { color: #fff; background: var(--hb-primary); transform: translateY(-2px); }
.hb-subscribe-pill svg { width: 18px; height: 18px; }

.hb-copyright {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 22px 0;
}
.hb-copyright-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
	flex-wrap: wrap;
}
.hb-copyright-text { font-size: 13.5px; color: #8f8fa3; }
.hb-legal-menu {
	display: flex;
	align-items: center;
	gap: 6px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}
.hb-legal-menu a {
	font-size: 13.5px;
	font-weight: 600;
	color: #c9c9d8;
	white-space: nowrap;
}
.hb-legal-menu a:hover { color: #fff; }

/* ============ Single post ============ */
.hb-article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 44px; align-items: start; padding: 40px 0 70px; }
.hb-article-col { min-width: 0; }
.hb-has-sidebar .hb-article-col { }
.hb-breadcrumbs { font-size: 13.5px; color: var(--hb-muted); margin-bottom: 18px; }
.hb-breadcrumbs a { color: var(--hb-muted); font-weight: 600; }
.hb-breadcrumbs a:hover { color: var(--hb-primary); }
.hb-crumb-sep { margin: 0 8px; color: var(--hb-line); }
/* v2.5.9: the fallback breadcrumb is an <ol>. Without a layout rule
   it rendered as a tall numbered list (Home / Behavior / Title on
   separate lines), so its lower lines slid under the sticky pill nav
   while scrolling. Lay it out as a single horizontal trail that
   wraps cleanly, with the current page in the text color. The same
   treatment covers Rank Math's breadcrumb markup when it is used. */
.hb-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; list-style: none; margin: 0; padding: 0; }
.hb-breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hb-breadcrumbs li:last-child { color: var(--hb-text); font-weight: 600; }
.hb-breadcrumbs li:last-child span { overflow-wrap: anywhere; }
.hb-breadcrumbs .rank-math-breadcrumb p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; }
.hb-breadcrumbs .rank-math-breadcrumb .separator { margin: 0; color: var(--hb-line); }
/* Anchor targets inside articles must also clear the sticky nav. */
.hb-entry-content h2, .hb-entry-content h3 { scroll-margin-top: 110px; }

.hb-article-head { margin-bottom: 24px; }
.hb-article-head .hb-badge { margin-bottom: 16px; }
.hb-article-title { font-size: clamp(34px, 4.4vw, 52px); font-weight: 900; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 14px; }
.hb-article-title::after { content: ""; display: block; width: 76px; height: 5px; margin-top: 18px; border-radius: 99px; background: linear-gradient(90deg, var(--hb-primary), var(--hb-leaf)); }
.hb-article-subtitle { font-size: 18px; color: var(--hb-muted); margin-bottom: 18px; }

.hb-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--hb-muted); margin-bottom: 26px; }
.hb-meta-item { display: inline-flex; align-items: center; gap: 8px; }
.hb-meta-item svg { width: 16px; height: 16px; }
.hb-meta-author { font-weight: 700; color: var(--hb-text); }
.hb-meta-avatar { width: 34px; height: 34px; border-radius: 50%; }

.hb-article-featured { margin: 12px 0 38px; border-radius: 18px; overflow: hidden; box-shadow: var(--hb-shadow-sm); }
.hb-article-featured img { width: 100%; height: auto; display: block; }
.hb-entry-content { font-size: 16px; line-height: 1.5; }
/* Post headings: slanted ribbon style. Colors rotate on return visits
   (JS adds hb-hue-N to <html>); defaults below are the first-visit pair. */
:root { --hb-h2-bg: #1d6fb8; --hb-h3-bg: #0284c7; --hb-h3-text: #ffffff; }
html.hb-hue-0 { --hb-h2-bg: #07563D; --hb-h3-bg: #0284c7; --hb-h3-text: #ffffff; }
html.hb-hue-1 { --hb-h2-bg: #0B6B4C; --hb-h3-bg: #38bdf8; --hb-h3-text: #121612; }
html.hb-hue-2 { --hb-h2-bg: #07563D; --hb-h3-bg: #0B6B4C; --hb-h3-text: #ffffff; }
html.hb-hue-3 { --hb-h2-bg: #0B6B4C; --hb-h3-bg: #1d6fb8; --hb-h3-text: #ffffff; }
html.hb-hue-4 { --hb-h2-bg: #0284c7; --hb-h3-bg: #07563D; --hb-h3-text: #ffffff; }
.hb-entry-content h2 { display: table; font-size: 26px; margin-top: 2.2em; padding: 13px 28px; color: #ffffff; background: var(--hb-h2-bg); border-radius: 10px; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.hb-entry-content h3 { display: table; font-size: 21px; margin-top: 1.8em; padding: 10px 22px; color: var(--hb-h3-text); background: var(--hb-h3-bg); border-radius: 8px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.hb-entry-content img { border-radius: 18px; }
.hb-entry-content blockquote {
	border-left: 5px solid var(--hb-primary);
	background: var(--hb-soft);
	border-radius: 0 16px 16px 0;
	padding: 22px 26px;
	margin: 1.8em 0;
	font-size: 19px;
	font-weight: 600;
}
.hb-entry-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.hb-entry-content th, .hb-entry-content td { border: 1px solid var(--hb-line); padding: 10px 14px; text-align: left; }
.hb-entry-content th { background: var(--hb-soft); font-family: var(--hb-font-head); }

/* Slanted category ribbon (article header) */
.hb-badge-slant {
	border-radius: 3px;
	transform: skewX(-14deg);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.08em;
	padding: 9px 20px 9px 22px;
}
.hb-badge-slant .hb-badge-text { display: inline-block; transform: skewX(14deg); }

/* Article header meta: byline + share actions.
   v2.5.3: the flat row became a soft card. The avatar carries a
   green-to-leaf gradient ring, "Save it" is a tactile pill (filled
   with the brand gradient once saved), the share actions are soft
   chips that fill with color on hover (Facebook green, X black, the
   brand gradient for the rest), and the reading time is a tinted
   badge instead of plain text. */
.hb-article-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 22px 0 14px;
	padding: 14px 18px;
	background: var(--hb-soft);
	border: 1px solid var(--hb-line);
	border-radius: 18px;
}
.hb-byline { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hb-byline-avatar {
	width: 56px; height: 56px; border-radius: 50%; flex: none;
	border: 3px solid transparent;
	background: linear-gradient(135deg, var(--hb-primary), var(--hb-leaf)) border-box;
	box-shadow: var(--hb-shadow-sm);
}
.hb-byline-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hb-byline-name { font-weight: 800; font-size: 15px; color: var(--hb-text); transition: color 0.15s ease; }
.hb-byline-name:hover { color: var(--hb-primary); }
.hb-byline-sep { color: var(--hb-line); }
.hb-save-btn {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--hb-line); background: var(--hb-bg); cursor: pointer;
	border-radius: 999px; padding: 7px 14px;
	box-shadow: var(--hb-shadow-sm);
	font-size: 13.5px; font-weight: 700; color: var(--hb-text);
	transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.hb-save-btn svg { width: 16px; height: 16px; }
.hb-save-btn:hover { transform: translateY(-1px); color: var(--hb-primary); border-color: var(--hb-primary); }
.hb-save-btn.is-saved { background: linear-gradient(135deg, var(--hb-primary), var(--hb-leaf)); border-color: transparent; color: #ffffff; box-shadow: 0 8px 18px rgba(7, 86, 61, 0.35); }
.hb-save-btn.is-saved svg { fill: currentColor; }
.hb-byline-updated { font-size: 13.5px; color: var(--hb-muted); margin-top: 4px; }
.hb-article-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hb-actions-label { font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hb-muted); margin-right: 2px; }
.hb-action-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--hb-line); background: var(--hb-bg); cursor: pointer; color: var(--hb-text);
	box-shadow: var(--hb-shadow-sm);
	transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.hb-action-btn:hover { transform: translateY(-2px); color: #ffffff; border-color: transparent; background: linear-gradient(135deg, var(--hb-primary), var(--hb-leaf)); box-shadow: 0 10px 20px rgba(7, 86, 61, 0.35); }
.hb-action-btn.is-facebook:hover { background: #1877f2; box-shadow: 0 10px 20px rgba(24, 119, 242, 0.35); }
.hb-action-btn.is-x:hover { background: #000000; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35); }
.hb-action-btn svg { width: 19px; height: 19px; }
.hb-actions-reading {
	font-size: 13.5px; font-weight: 700; color: var(--hb-text); white-space: nowrap;
	margin-left: 6px; padding: 7px 13px; border-radius: 999px;
	background: linear-gradient(135deg, rgba(7, 86, 61, 0.12), rgba(123, 108, 255, 0.12));
	border: 1px solid var(--hb-line);
}
@media (max-width: 640px) {
	.hb-article-meta { align-items: flex-start; flex-direction: column; }
}

/* TOC: native Contents box */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-sustainability: smooth; }
}
.hb-entry-content h2[id], .hb-entry-content h3[id] { scroll-margin-top: 96px; }
/* v2.6.0: Contents box redesign. A solid, premium card: brand gradient
   accent bar across the top, a soft icon chip, a section-count pill,
   and soft number circles that fill with the brand gradient on hover
   and on the active (scrollspy) row. */
.hb-toc {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--hb-line);
	border-radius: 20px;
	padding: 26px 30px 22px;
	margin: 1.8em 0;
	box-shadow: 0 10px 30px rgba(16, 16, 24, 0.08);
}
.hb-toc::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 5px;
	background: linear-gradient(90deg, var(--hb-primary), var(--hb-leaf), var(--hb-mid));
}
.hb-toc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hb-toc-book { color: var(--hb-mid); display: inline-flex; background: #e8efe3; border-radius: 12px; padding: 9px; }
.hb-toc-book svg { width: 22px; height: 22px; }
.hb-toc-title { font-family: var(--hb-font-head); font-weight: 900; font-size: 22px; color: var(--hb-text); letter-spacing: -0.01em; }
.hb-toc-count { margin-left: auto; background: var(--hb-soft); color: var(--hb-muted); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.hb-toc-toggle {
	border: 0; background: var(--hb-soft); cursor: pointer;
	color: var(--hb-text); display: inline-flex; padding: 8px; border-radius: 10px;
	transition: background 0.2s ease;
}
.hb-toc-toggle:hover { background: #e8efe3; }
.hb-toc-toggle svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.hb-toc-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.hb-toc-list {
	list-style: none; margin: 0; padding: 0;
	counter-reset: hb-toc;
	columns: 2; column-gap: 48px;
}
.hb-toc-list li {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 11px 10px; margin: 0 -10px;
	border-bottom: 1px solid var(--hb-soft);
	break-inside: avoid;
	counter-increment: hb-toc;
	border-radius: 10px;
	transition: background 0.2s ease;
}
.hb-toc-list li::before {
	content: counter(hb-toc);
	flex: none;
	width: 27px; height: 27px; border-radius: 50%;
	background: #e8efe3; color: var(--hb-mid);
	font-size: 13px; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: 1px;
	transition: background 0.2s ease, color 0.2s ease;
}
.hb-toc-list li:hover { background: var(--hb-soft); }
.hb-toc-list li:hover::before, .hb-toc-list li.is-active::before {
	background: linear-gradient(135deg, var(--hb-primary), var(--hb-leaf));
	color: #fff;
}
.hb-toc-list li.is-active { background: var(--hb-soft); }
.hb-toc-list li.is-active a { color: var(--hb-primary); }
.hb-toc-list a { color: var(--hb-text); font-weight: 700; font-size: 15.5px; line-height: 1.45; }
.hb-toc-list a:hover { color: var(--hb-primary); text-decoration: underline; }
.hb-toc-h3 a { font-size: 14.5px; font-weight: 600; }
.hb-toc-h3::before { width: 23px; height: 23px; font-size: 12px; margin-top: 2px; }
@media (max-width: 640px) {
	.hb-toc-list { columns: 1; }
	.hb-toc { padding: 20px; }
	.hb-toc-count { display: none; }
}

/* Article images: always centered, never side-aligned. */
.hb-entry-content .wp-block-image { text-align: center; }
.hb-entry-content .wp-block-image img { margin-left: auto; margin-right: auto; }
.hb-entry-content figure.alignleft,
.hb-entry-content figure.alignright,
.hb-entry-content .wp-block-image.alignleft,
.hb-entry-content .wp-block-image.alignright,
.hb-entry-content img.alignleft,
.hb-entry-content img.alignright {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* More Read: mid-article suggestion box (compact strip) */
.hb-more-read {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, #07563d 0%, #0b6b4c 55%, #1d6fb8 100%);
	border-radius: 18px;
	padding: 18px 20px;
	margin: 1.8em 0;
	box-shadow: 0 14px 34px rgba(168, 85, 247, 0.28);
}
.hb-more-read::before,
.hb-more-read::after {
	content: ""; position: absolute; border-radius: 50%;
	background: rgba(255, 255, 255, 0.14); pointer-events: none;
}
.hb-more-read::before { width: 140px; height: 140px; top: -50px; right: -40px; }
.hb-more-read::after { width: 100px; height: 100px; bottom: -45px; left: -30px; }
.hb-more-read-head {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-bottom: 14px;
}
.hb-more-read-title {
	display: flex; align-items: center; gap: 8px;
	font-family: var(--hb-font-head); font-weight: 900; font-size: 19px;
	color: #fff; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.hb-more-read-icon {
	display: inline-flex; width: 30px; height: 30px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.4);
	align-items: center; justify-content: center; flex: none;
}
.hb-more-read-icon svg { width: 16px; height: 16px; color: #fff; }
.hb-more-read-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hb-more-read-item {
	display: flex; align-items: center; gap: 12px;
	background: #fff; border-radius: 12px; padding: 10px 12px;
	box-shadow: 0 8px 20px rgba(16, 16, 24, 0.18);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	min-width: 0;
}
.hb-more-read-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(16, 16, 24, 0.24);
}
.hb-more-read-thumb {
	flex: none; width: 64px; height: 64px;
	border-radius: 8px; overflow: hidden; background: var(--hb-soft);
}
.hb-more-read-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.hb-more-read-item:hover .hb-more-read-thumb img { transform: scale(1.08); }
.hb-more-read-body { display: block; padding: 0; min-width: 0; }
.hb-more-read-item-title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-family: var(--hb-font-head); font-weight: 800;
	font-size: 13px; line-height: 1.35; color: var(--hb-text); margin-bottom: 4px;
}
.hb-more-read-link {
	display: inline-flex; align-items: center; gap: 4px;
	font-weight: 800; font-size: 11px; color: var(--hb-primary);
	text-transform: uppercase; letter-spacing: 0.06em;
}
.hb-more-read-link svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
.hb-more-read-item:hover .hb-more-read-link svg { transform: translateX(4px); }
@media (max-width: 640px) {
	.hb-more-read-grid { grid-template-columns: 1fr; }
	.hb-more-read { padding: 16px; }
}

/* Share: copy-link confirmation injected by main.js next to the header copy button. */
.hb-share-copy-msg { font-size: 13px; color: var(--hb-fern); font-weight: 600; }

/* Author box */
.hb-author-box {
	display: flex; gap: 28px; align-items: center;
	background: #fff;
	border: 1px solid var(--hb-line);
	border-radius: 22px;
	padding: 32px 34px;
	margin: 12px 0 46px;
	box-shadow: var(--hb-shadow-sm);
}
.hb-author-avatar { flex: none; }
.hb-author-ring {
	display: inline-block;
	padding: 5px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hb-primary) 0%, var(--hb-leaf, #0284c7) 55%, var(--hb-mid) 100%);
	box-shadow: 0 10px 26px rgba(7, 86, 61, 0.28);
}
.hb-author-ring img {
	width: 104px; height: 104px;
	border-radius: 50%;
	display: block;
	border: 4px solid #fff;
	object-fit: cover;
}
.hb-author-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hb-primary); margin-bottom: 6px; display: block; }
.hb-author-name { font-size: 27px; letter-spacing: -0.3px; margin-bottom: 8px; }
.hb-author-name a { color: var(--hb-ink); }
.hb-author-name a:hover { color: var(--hb-primary); }
.hb-author-bio { color: #454a58; font-size: 16px; line-height: 1.8; margin: 0 0 18px; max-width: 640px; }
.hb-author-more {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--hb-ink); color: #fff;
	font-weight: 800; font-size: 14px;
	padding: 11px 22px; border-radius: 999px;
	transition: transform 0.15s ease, background 0.15s ease;
}
.hb-author-more:hover { background: var(--hb-primary); color: #fff; transform: translateY(-2px); }
.hb-author-more svg { width: 16px; height: 16px; }
.hb-author-main { flex: 1; min-width: 0; }
.hb-author-side {
	flex: none; text-align: center;
	background: linear-gradient(135deg, #fffefb 0%, #f7f2e9 100%);
	border: 1px solid var(--hb-line); border-radius: 18px;
	padding: 26px 36px;
	box-shadow: 0 10px 24px rgba(16, 16, 24, 0.07);
}
.hb-author-count {
	display: block; font-family: var(--hb-font-head); font-weight: 900;
	font-size: 44px; line-height: 1; color: var(--hb-primary);
}
.hb-author-count-label {
	display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
	letter-spacing: 1.4px; color: var(--hb-muted); margin-top: 10px;
}
@media (max-width: 720px) {
	.hb-author-box { flex-wrap: wrap; }
	.hb-author-side { width: 100%; }
}
@media (max-width: 640px) {
	.hb-author-box { flex-direction: column; text-align: center; padding: 28px 22px; }
	.hb-author-bio { margin-left: auto; margin-right: auto; }
}

/* Related (v2.5.9): a soft tinted panel with a gradient title rule,
   and cards without excerpts. The "Read the guide" link pins to the
   bottom of each equal-height card. */
.hb-related { margin: 0 0 50px; background: var(--hb-soft); border: 1px solid var(--hb-line); border-radius: 24px; padding: 30px 28px 34px; }
.hb-related .hb-section-title, .hb-related h2 { font-size: 26px; margin-bottom: 24px; }
.hb-related .hb-section-title::after { content: ""; display: block; width: 64px; height: 5px; margin-top: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--hb-primary), var(--hb-leaf)); }
.hb-related .hb-card-body { padding: 18px 20px 22px; }
.hb-card-read { margin-top: auto; padding-top: 14px; font-family: var(--hb-font-head); font-weight: 800; font-size: 14px; color: var(--hb-mid); }
.hb-card-read:hover { color: var(--hb-primary); }
.hb-card-read span { margin-left: 2px; }

/* Tags */
.hb-article-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 30px 0; }
.hb-tags-label { font-family: var(--hb-font-head); font-weight: 800; }
.hb-article-tags a {
	background: var(--hb-soft);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hb-text);
}
.hb-article-tags a:hover { background: var(--hb-primary); color: #fff; }

/* ============ Archives / pages ============ */
.hb-archive-head { text-align: center; padding: 52px 0 14px; position: relative; }
.hb-archive-head::after {
	content: ""; display: block; width: 92px; height: 5px; margin: 18px auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--hb-primary), var(--hb-leaf), var(--hb-mid));
	box-shadow: 0 6px 16px rgba(120, 100, 255, 0.35);
}
.hb-archive-kicker {
	display: inline-flex; align-items: center;
	padding: 7px 18px; margin-bottom: 14px;
	border-radius: 999px;
	background: linear-gradient(135deg, #1d6fb8, var(--hb-mid));
	color: #fff;
	font-family: var(--hb-font-head); font-weight: 800; font-size: 12px;
	letter-spacing: 2.5px; text-transform: uppercase;
	box-shadow: 0 8px 20px rgba(64, 110, 255, 0.35);
}
.hb-archive-title { font-size: clamp(30px, 4vw, 42px); font-weight: 900; margin-bottom: 8px; }
.hb-archive-count {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 12px; padding: 6px 16px;
	border-radius: 999px;
	background: var(--hb-soft);
	color: var(--hb-muted);
	font-size: 13px; font-weight: 700;
}
.hb-archive-desc { color: var(--hb-muted); max-width: 640px; margin: 0 auto; }
.hb-page-head { padding: 46px 0 10px; text-align: center; }
.hb-page-title { font-size: clamp(30px, 4vw, 42px); font-weight: 900; }
.hb-page-narrow { max-width: 820px; margin: 0 auto; }
.hb-page-featured { border-radius: 24px; overflow: hidden; margin: 26px 0 34px; }
.hb-page-links { margin: 30px 0; font-weight: 700; }

.hb-pagination { display: flex; justify-content: center; margin: 48px 0 74px; }
.hb-pagination ul.page-numbers { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; align-items: center; }
.hb-pagination li { margin: 0; }
.hb-pagination a.page-numbers,
.hb-pagination span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 48px; height: 48px; padding: 0 16px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--hb-line);
	color: var(--hb-text);
	font-family: var(--hb-font-head); font-weight: 800; font-size: 15px;
	box-shadow: var(--hb-shadow-sm);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.hb-pagination a.page-numbers:hover {
	transform: translateY(-3px);
	box-shadow: var(--hb-shadow);
	border-color: var(--hb-mid);
	color: var(--hb-mid);
}
.hb-pagination span.current {
	background: linear-gradient(135deg, #1d6fb8, var(--hb-mid));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 12px 26px rgba(64, 110, 255, 0.38);
	transform: scale(1.08);
}
.hb-pagination span.dots { border: none; background: transparent; box-shadow: none; min-width: 28px; padding: 0; color: var(--hb-muted); }
.hb-pagination a.prev,
.hb-pagination a.next {
	background: var(--hb-ink);
	border-color: var(--hb-ink);
	color: #fff;
	padding: 0 24px;
}
.hb-pagination a.prev:hover,
.hb-pagination a.next:hover {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(135deg, #0b6b4c, var(--hb-primary));
}
.hb-dark .hb-pagination a.page-numbers,
.hb-dark .hb-pagination span.page-numbers { background: #1b1b26; border-color: var(--hb-line); color: #ececf4; }
.hb-dark .hb-pagination a.page-numbers:hover { color: #1d6fb8; border-color: #1d6fb8; }

/* 404 */
.hb-404 { text-align: center; padding: 90px 0; }
.hb-404-mark { font-size: 90px; margin-bottom: 10px; }
.hb-404-title { font-size: 40px; font-weight: 900; }
.hb-404-text { color: var(--hb-muted); margin-bottom: 8px; }
.hb-404-sub { color: var(--hb-muted); margin-bottom: 26px; }
.hb-404-search { max-width: 480px; margin: 0 auto; }

/* Nothing found */
.hb-none { text-align: center; padding: 70px 0; }
.hb-none-title { font-size: 30px; font-weight: 900; }

/* Search */
.hb-search-count { color: var(--hb-muted); text-align: center; margin-bottom: 30px; }
.hb-search-again { max-width: 520px; margin: 0 auto 60px; }

/* ============ Sidebar / widgets ============ */
.hb-sidebar { display: flex; flex-direction: column; gap: 28px; }
.hb-widget { background: var(--hb-soft); border-radius: var(--hb-radius); padding: 26px; }
.hb-widget-title { font-size: 18px; margin-bottom: 16px; }
.hb-widget ul { list-style: none; margin: 0; padding: 0; }
.hb-widget li { padding: 8px 0; border-bottom: 1px solid var(--hb-line); font-size: 14.5px; }
.hb-widget li:last-child { border-bottom: 0; }
.hb-widget a { color: var(--hb-text); font-weight: 600; }
.hb-widget a:hover { color: var(--hb-primary); }

/* ============ Comments ============ */
.hb-comments {
	background: #fff;
	border: 1px solid var(--hb-line);
	border-radius: 22px;
	padding: 38px 40px;
	margin: 0 0 64px;
	box-shadow: var(--hb-shadow-sm);
}
.hb-comments-title { font-size: 24px; margin-bottom: 26px; display: flex; align-items: center; gap: 10px; }
.hb-comments-ico { display: inline-flex; color: var(--hb-ink); }
.hb-comments-ico svg { width: 26px; height: 26px; }
.hb-comment-list { list-style: none; margin: 0 0 34px; padding: 0; }
.hb-comment { margin-bottom: 20px; }
.hb-comment-body {
	display: flex; gap: 16px;
	background: var(--hb-soft);
	border-radius: 18px;
	padding: 20px 24px;
}
.hb-comment-avatar { flex: none; }
.hb-comment-avatar img { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--hb-shadow-sm); }
.hb-comment-main { flex: 1; min-width: 0; }
.hb-comment-meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.hb-comment-author { font-family: var(--hb-font-head); font-weight: 800; }
.hb-comment-date { font-size: 13px; color: var(--hb-muted); }
.hb-comment-text { font-size: 15px; }
.hb-comment-text p:last-child { margin-bottom: 0; }
.hb-comment-reply { margin-top: 10px; }
.hb-comment-reply a {
	display: inline-block; font-size: 13.5px; font-weight: 800;
	background: #fff; border: 1px solid var(--hb-line); border-radius: 999px;
	padding: 7px 18px; color: var(--hb-text);
}
.hb-comment-reply a:hover { background: var(--hb-ink); border-color: var(--hb-ink); color: #fff; }
.hb-comment-moderation { font-size: 13px; color: var(--hb-oak); }
.hb-comment .children { list-style: none; padding-left: 34px; margin-top: 18px; }
.hb-comments-closed { color: var(--hb-muted); }
.comment-notes { font-size: 13.5px; color: var(--hb-muted); margin-bottom: 18px; }
.comment-respond .comment-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.comment-form-comment { grid-column: 1 / -1; margin-bottom: 2px; }
.comment-form-author, .comment-form-email, .comment-form-url { margin-bottom: 2px; }
.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
	width: 100%;
	border: 0;
	background: var(--hb-soft);
	border-radius: 12px;
	padding: 16px 18px;
	font-size: 15px;
	font-family: var(--hb-font-body);
	color: var(--hb-text);
	transition: box-shadow 0.15s ease, background 0.15s ease;
}
.comment-form-comment textarea { min-height: 150px; resize: vertical; }
.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 2px var(--hb-mid);
}
.comment-form-cookies-consent { grid-column: 1 / -1; font-size: 13.5px; color: var(--hb-muted); display: flex; gap: 8px; align-items: flex-start; }
.form-submit { grid-column: 1 / -1; margin: 6px 0 0; }
.hb-comment-submit {
	border-radius: 12px !important;
	padding: 15px 44px !important;
	font-size: 15px !important;
}
@media (max-width: 640px) {
	.hb-comments { padding: 26px 20px; }
	.comment-respond .comment-form { grid-template-columns: 1fr; }
	.hb-comment .children { padding-left: 18px; }
}

/* Contact / about */
.hb-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 20px 0 70px; }
.hb-contact-form input, .hb-contact-form textarea {
	width: 100%;
	border: 2px solid var(--hb-line);
	border-radius: 14px;
	padding: 13px 18px;
	font-size: 15px;
	font-family: var(--hb-font-body);
	margin-bottom: 14px;
}
.hb-contact-form input:focus, .hb-contact-form textarea:focus { outline: none; border-color: var(--hb-mid); }
.hb-form-errors { color: #d33; font-weight: 600; margin-bottom: 14px; }
.hb-form-ok { color: var(--hb-fern); font-weight: 600; margin-bottom: 14px; }
.hb-about-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Term image picker (admin) */
.hb-term-image-preview img { border-radius: 12px; max-width: 220px; }

/* ============ Dark mode ============ */
.hb-dark { --hb-bg: #121218; --hb-soft: #1b1b26; --hb-text: #ececf4; --hb-muted: #9aa0b4; --hb-line: #2a2a3a; }
.hb-dark body, body.hb-dark { background: var(--hb-bg); color: var(--hb-text); }
.hb-dark h1, .hb-dark h2, .hb-dark h3, .hb-dark h4, .hb-dark h5, .hb-dark h6 { color: #f4f4fa; }
.hb-dark .hb-header { background: var(--hb-bg); }
.hb-dark .hb-card, .hb-dark .hb-row, .hb-dark .hb-category-card { background: #1b1b26; }
.hb-dark .hb-card-title a, .hb-dark .hb-row-title a, .hb-dark .hb-category-name { color: #f4f4fa; }
.hb-dark .hb-search-box, .hb-dark .hb-drawer-panel { background: #1b1b26; }
.hb-dark .hb-searchform-input { background: #121218; color: #f4f4fa; border-color: var(--hb-line); }
.hb-dark .hb-tagline { color: #f4f4fa; }
.hb-dark .hb-menu .sub-menu { background: #1b1b26; }
.hb-dark .hb-menu .sub-menu a { color: #ececf4; }
.hb-dark .hb-toc, .hb-dark .hb-author-box, .hb-dark .hb-widget, .hb-dark .hb-comment-body { background: #1b1b26; }
.hb-dark .hb-author-bio { color: #c9cdd6; }
.hb-dark .hb-author-side { background: linear-gradient(135deg, #26222e 0%, #241f2b 100%); }
.hb-dark .hb-slide-title, .hb-dark .hb-feature-title { color: #fff; }

/* ---- Dark mode: extended coverage (v2.4.5). Every rule below is scoped
   under .hb-dark, so light mode is untouched. Token-driven rules
   (var(--hb-soft), var(--hb-text), var(--hb-muted), var(--hb-line)) already
   flip via the .hb-dark token swap above; the rules here cover the
   hardcoded light values and the surfaces the first pass missed. */
.hb-dark { color-scheme: dark; }
.hb-dark ::selection { background: var(--hb-leaf); color: #fff; }

/* Base elements: generic text, tables, code, quotes, figures, rules, forms. */
.hb-dark small { color: var(--hb-muted); }
.hb-dark mark { background: #3d3d52; color: #f4f4fa; }
.hb-dark hr { border-color: var(--hb-line); }
.hb-dark .hb-dots { border-top-color: var(--hb-line); }
.hb-dark table { color: #ececf4; }
.hb-dark th { background: #23233a; }
.hb-dark td, .hb-dark th { border-color: var(--hb-line); }
.hb-dark caption { color: var(--hb-muted); }
.hb-dark code, .hb-dark kbd, .hb-dark samp { background: #23233a; color: #ececf4; }
.hb-dark pre { background: #1b1b26; color: #ececf4; border: 1px solid var(--hb-line); }
.hb-dark pre code { background: transparent; }
.hb-dark blockquote { background: #1b1b26; color: #ececf4; border-left-color: var(--hb-primary); }
.hb-dark figcaption, .hb-dark .wp-caption-text { color: var(--hb-muted); }
.hb-dark .wp-caption { background: #1b1b26; border-color: var(--hb-line); }
.hb-dark label { color: #ececf4; }
.hb-dark input, .hb-dark select, .hb-dark textarea { background-color: #1b1b26; color: #ececf4; border-color: var(--hb-line); }
.hb-dark input::placeholder, .hb-dark textarea::placeholder { color: #9aa0b4; opacity: 1; }
.hb-dark .hb-btn-outline { border-color: var(--hb-line); color: #ececf4; }
.hb-dark .hb-btn-outline:hover { border-color: var(--hb-primary); color: var(--hb-primary); }
.hb-dark .hb-icon-btn { background: #23233a; color: #ececf4; }
.hb-dark .hb-icon-btn:hover { background: #2a2a3a; }

/* Header, nav, drawer, search overlay. The pill nav uses var(--hb-ink) in
   light mode, which is near-invisible against the dark page background. */
.hb-dark .hb-pillnav { background: #1b1b26; border: 1px solid #2a2a3a; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.hb-dark .hb-toprow-social .hb-social-link { color: #ececf4; background: transparent; }
.hb-dark .hb-toprow-social .hb-social-link.is-facebook,
.hb-dark .hb-toprow-social .hb-social-link.is-twitter,
.hb-dark .hb-toprow-social .hb-social-link.is-youtube,
.hb-dark .hb-toprow-social .hb-social-link.is-instagram,
.hb-dark .hb-toprow-social .hb-social-link.is-pinterest,
.hb-dark .hb-toprow-social .hb-social-link.is-rss,
.hb-dark .hb-toprow-social .hb-social-link.is-x { color: #ececf4; background: transparent; }
.hb-dark .hb-toprow-social .hb-social-link:hover { color: var(--hb-primary); background: transparent; }
.hb-dark .hb-menu .sub-menu { border: 1px solid #2a2a3a; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.hb-dark .hb-menu .sub-menu a:hover { background: #23233a; color: var(--hb-primary); }
.hb-dark .hb-search-box { border: 1px solid #2a2a3a; }
.hb-dark .hb-drawer-panel { border-left: 1px solid #2a2a3a; }
.hb-dark .hb-drawer-menu a { color: #ececf4; border-bottom-color: var(--hb-line); }
.hb-dark .hb-drawer-menu a:hover { color: var(--hb-primary); }

/* Footer, including the Subscribe Newsletter pill. The footer itself is
   already dark in light mode; the pill was a white chip with dark ink. */
.hb-dark .hb-footer { border-top: 1px solid #2a2a3a; }
.hb-dark .hb-subscribe-pill { background: #23233a; color: #f4f4fa; border: 1px solid #2a2a3a; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
.hb-dark .hb-subscribe-pill:hover { color: #fff; background: var(--hb-primary); border-color: var(--hb-primary); }

/* Homepage sections. Trending, Expert Guides, DIY and Home Maintenance and Sustainability
   reuse .hb-card / .hb-row / .hb-category-card, covered above and below.
   The hero slider (hero-v241.css) and intent cards (intent-v24.css) live in
   other workers' files and are not touched here. */
.hb-dark .hb-showmore { background: #1b1b26; border-color: var(--hb-line); color: #ececf4; }
.hb-dark a.hb-showmore:hover, .hb-dark button.hb-showmore:hover { border-color: var(--hb-primary); color: var(--hb-primary); }
.hb-dark .hb-card, .hb-dark .hb-row, .hb-dark .hb-category-card { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }
.hb-dark .hb-more-read-item { background: #1b1b26; }
.hb-dark .hb-more-read-item-title { color: #ececf4; }
.hb-dark .hb-archive-count { background: #23233a; color: #9aa0b4; }
.hb-dark .hb-pagination span.dots { background: transparent; border-color: transparent; box-shadow: none; }
.hb-dark .hb-pagination a.prev, .hb-dark .hb-pagination a.next { background: #23233a; border-color: #23233a; color: #f4f4fa; }
.hb-dark .hb-pagination a.prev:hover, .hb-dark .hb-pagination a.next:hover { background: var(--hb-primary); border-color: var(--hb-primary); color: #fff; }

/* Single articles: TOC, author box, related, tags, prev/next, tables. */
.hb-dark .hb-toc { border-color: var(--hb-line); }
.hb-dark .hb-toc-list li { border-bottom-color: var(--hb-line); }
.hb-dark .hb-entry-content blockquote { background: #1b1b26; color: #ececf4; }
.hb-dark .hb-entry-content table { color: #ececf4; }
.hb-dark .hb-entry-content th { background: #23233a; border-color: var(--hb-line); }
.hb-dark .hb-entry-content td { border-color: var(--hb-line); }
.hb-dark .hb-entry-content ol > li::before { background: #23233a; color: var(--hb-mid); }
.hb-dark .hb-author-name a { color: #f4f4fa; }
.hb-dark .hb-author-name a:hover { color: var(--hb-primary); }
.hb-dark .hb-author-ring img { border-color: #1b1b26; }
.hb-dark .hb-tags-label { color: #ececf4; }
.hb-dark .hb-pn-title { color: #f4f4fa; }
.hb-dark .hb-comments { background: #1b1b26; border-color: var(--hb-line); }
.hb-dark .hb-comments-ico { color: #ececf4; }
.hb-dark .hb-comment-avatar img { border-color: #1b1b26; }
.hb-dark .hb-comment-reply a { background: #1b1b26; border-color: var(--hb-line); color: #ececf4; }
.hb-dark .hb-comment-reply a:hover { background: var(--hb-primary); border-color: var(--hb-primary); color: #fff; }
.hb-dark .comment-form-comment textarea,
.hb-dark .comment-form-author input,
.hb-dark .comment-form-email input,
.hb-dark .comment-form-url input { background: #23233a; color: #ececf4; }
.hb-dark .comment-form-comment textarea:focus,
.hb-dark .comment-form-author input:focus,
.hb-dark .comment-form-email input:focus,
.hb-dark .comment-form-url input:focus { background: #23233a; color: #ececf4; box-shadow: 0 0 0 2px var(--hb-mid); }

/* Widgets, archives, search, 404. */
.hb-dark .hb-widget { border: 1px solid #2a2a3a; }
.hb-dark .hb-widget li { border-bottom-color: var(--hb-line); }
.hb-dark .hb-widget a { color: #ececf4; }
.hb-dark .hb-widget a:hover { color: var(--hb-primary); }

/* Contact / about page templates. */
.hb-dark .hb-contact-form input, .hb-dark .hb-contact-form textarea { background: #1b1b26; color: #ececf4; border-color: var(--hb-line); }
.hb-dark .hb-contact-form input::placeholder, .hb-dark .hb-contact-form textarea::placeholder { color: #9aa0b4; opacity: 1; }
.hb-dark .hb-contact-form input:focus, .hb-dark .hb-contact-form textarea:focus { border-color: var(--hb-mid); background: #23233a; }
.hb-dark .hb-form-errors { color: #f87171; }
.hb-dark .hb-form-ok { color: #4ade80; }

/* Newsletter PLUGIN (.hbn- classes). The plugin prints its own <style> block
   with bare .hbn-x rules, so these .hb-dark .hbn-x rules (higher specificity)
   win regardless of load order. The leaf .hbn-btn is left exactly as-is,
   and the envelope artwork (.hbn-art img) is untouched. */
.hb-dark .hbn-sec { background: #121218; }
.hb-dark .hbn-card { background: linear-gradient(135deg, #1b1b26 0%, #23233a 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.hb-dark .hbn-body { color: #ececf4; }
.hb-dark .hbn-title { color: #f4f4fa; }
.hb-dark .hbn-sub { color: #9aa0b4; }
.hb-dark .hbn-field svg { color: #9aa0b4; }
.hb-dark .hbn-form input[type=email] { background: #121218; color: #ececf4; }
.hb-dark .hbn-form input[type=email]::placeholder { color: #9aa0b4; opacity: 1; }
.hb-dark .hbn-form input[type=email]:focus { background: #121218; color: #ececf4; box-shadow: 0 0 0 3px rgba(123, 108, 255, 0.45); }
.hb-dark .hbn-note { color: #9aa0b4; }
.hb-dark .hbn-msg.ok { color: #4ade80; }
.hb-dark .hbn-msg.err { color: #f87171; }

/* Theme's own newsletter form (.hb-news- classes, inc/newsletter.php).
   Dark-only rules: this form has no light-mode CSS in main.css, so these
   rules only ever apply in dark mode. */
.hb-dark .hb-newsletter { background: #1b1b26; border: 1px solid var(--hb-line); }
.hb-dark .hb-news-title { color: #f4f4fa; }
.hb-dark .hb-news-text { color: #9aa0b4; }
.hb-dark .hb-news-form input { background: #121218; color: #ececf4; border-color: var(--hb-line); }
.hb-dark .hb-news-form input::placeholder { color: #9aa0b4; opacity: 1; }
.hb-dark .hb-news-form input:focus { border-color: var(--hb-mid); background: #121218; }
.hb-dark .hb-news-consent { color: #9aa0b4; }
.hb-dark .hb-news-notice { color: #ececf4; }
.hb-dark .hb-news-ok { color: #4ade80; }
.hb-dark .hb-news-error { color: #f87171; }

/* ============ Responsive ============ */
@media (max-width: 1024px) {
	.hb-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.hb-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.hb-editorial, .hb-diy, .hb-sustain { grid-template-columns: 1fr; }
	.hb-article-layout { grid-template-columns: 1fr; }
	.hb-contact { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
	.hb-toprow-spacer { display: none; }
	.hb-toprow { flex-wrap: wrap; }
	.hb-brand-center { order: -1; flex: 1 1 100%; }
	.hb-menu-toggle { display: inline-flex; }
	.hb-pillnav-wrap { display: none; }
	.hb-slide { min-height: 480px; }
	.hb-hero-prev { left: 12px; }
	.hb-hero-next { right: 12px; }
	.hb-promo { flex-direction: column; text-align: center; padding: 38px 28px; }
	.hb-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
	.hb-grid-2, .hb-grid-3, .hb-grid-4 { grid-template-columns: 1fr; }
	.hb-section { padding: 48px 0; }
	.hb-slide { min-height: 440px; border-radius: 20px; }
	.hb-slide-content { padding: 40px 10%; }
	.hb-hero-dots { bottom: 70px; }
	.hb-footer-grid { grid-template-columns: 1fr; gap: 32px; }
	.hb-copyright-inner { flex-direction: column; justify-content: center; text-align: center; }
	.hb-legal-menu { flex-wrap: wrap; justify-content: center; }
}

/* Wordmark accent */
.hb-wordmark-text span { color: var(--hb-blue); }
.hb-brand-center .hb-wordmark { display: inline-flex; align-items: center; gap: 12px; }
.hb-footer-brand .hb-wordmark { display: inline-flex; align-items: center; gap: 12px; }
.hb-drawer-head .hb-wordmark { display: inline-flex; align-items: center; gap: 10px; }

/* Header social icons: plain dark glyphs (override the footer color fills) */
.hb-toprow-social .hb-social-link.is-facebook,
.hb-toprow-social .hb-social-link.is-twitter,
.hb-toprow-social .hb-social-link.is-youtube,
.hb-toprow-social .hb-social-link.is-instagram,
.hb-toprow-social .hb-social-link.is-pinterest,
.hb-toprow-social .hb-social-link.is-rss,
.hb-toprow-social .hb-social-link.is-x {
	background: transparent;
	color: var(--hb-ink);
	width: auto;
	height: auto;
	padding: 5px;
	border-radius: 0;
}
.hb-toprow-social .hb-social-link:hover { background: transparent; color: var(--hb-primary); }

/* Visible keyboard focus for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--hb-mid);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-sustainability: auto; }
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Scannable article content: airy paragraphs, styled lists */
.hb-entry-content p { margin-bottom: 1.3em; }
.hb-entry-content ul, .hb-entry-content ol { margin: 0 0 1.6em; padding: 0; }
.hb-entry-content ul { list-style: none; }
.hb-entry-content ul > li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 0.7em;
}
.hb-entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.62em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hb-primary);
}
.hb-entry-content ol { list-style: none; counter-reset: hb-ol; }
.hb-entry-content ol > li {
	position: relative;
	padding-left: 44px;
	margin-bottom: 0.8em;
	counter-increment: hb-ol;
}
.hb-entry-content ol > li::before {
	content: counter(hb-ol);
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--hb-soft);
	color: var(--hb-mid);
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hb-entry-content li > ul, .hb-entry-content li > ol { margin-top: 0.7em; margin-bottom: 0; }

/* Prev/next article navigation (internal linking) */
.post-navigation { margin: 6px 0 44px; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: block;
	background: var(--hb-soft);
	border-radius: 16px;
	padding: 20px 24px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover { transform: translateY(-3px); box-shadow: var(--hb-shadow-sm); }
.post-navigation .nav-next { text-align: right; }
.hb-pn-label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--hb-primary);
	margin-bottom: 6px;
}
.hb-pn-title {
	font-family: var(--hb-font-head);
	font-weight: 800;
	font-size: 17px;
	color: var(--hb-ink);
	line-height: 1.4;
}
@media (max-width: 640px) {
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: left; }
}

/* ============ v2.4.8: mobile and tablet perfection pass ============
   Every rule in this section is scoped to a max-width media query, a
   coarse-pointer query, or the .hb-dark class, except three invisible
   global items: the tap highlight tint, touch-action on links and
   buttons, and the light-mode placeholder color (previously undefined,
   so placeholders fell back to the browser default gray). Desktop
   layout, sizes, and colors are unchanged. */

/* Invisible global items. The placeholder pair after this fix:
   #68716a on #ffffff = 4.81:1, #68716a on #f7f2e9 = 4.53:1. The
   .hb-dark placeholder rules above keep winning in dark mode because
   they carry the extra .hb-dark class. */
html { -webkit-tap-highlight-color: rgba(16, 16, 24, 0.08); }
a, button { touch-action: manipulation; }
input::placeholder, textarea::placeholder { color: var(--hb-muted); opacity: 1; }

/* Dark mode: the TOC number chip used var(--hb-ink) (#121612), which is
   1.11:1 against the dark TOC surface (#1b1b26) and visually vanishes;
   the white number itself was fine. Lift the chip to the same #23233a
   already used for dark inputs and chips. White on #23233a = 15.30:1.
   v2.6.0: the chip is a soft tint in light mode, so dark mode keeps
   its own soft surface, and the gradient fill still wins on hover
   and on the active row. */
.hb-dark .hb-toc-list li::before { background: #23233a; color: #8fa8ff; }
.hb-dark .hb-toc-book { background: #23233a; }
.hb-dark .hb-toc-count { background: #23233a; }
.hb-dark .hb-toc-toggle { background: #23233a; }
.hb-dark .hb-toc-toggle:hover { background: #2b2b40; }
.hb-dark .hb-toc-list li:hover, .hb-dark .hb-toc-list li.is-active { background: #23233a; }
.hb-dark .hb-toc-list li:hover::before, .hb-dark .hb-toc-list li.is-active::before {
	background: linear-gradient(135deg, var(--hb-primary), var(--hb-leaf));
	color: #fff;
}

/* Touch-only hitbox growth: visual size is untouched, only the tappable
   area grows to 44px in the tapping dimension. The dark switch is 54x30
   visually (its width already passes); the pseudo-element adds 7px
   above and below for a 54x44 hit area. Hero dots are 10x10 visually;
   the hitbox becomes 18x44 (height is the tapping dimension, and the
   narrow width avoids stealing taps from the neighbouring dot 18px
   away). */
@media (pointer: coarse) {
	.hb-dark-switch::after { content: ""; position: absolute; inset: -7px 0; }
	.hb-hero-dots button { position: relative; }
	.hb-hero-dots button::after { content: ""; position: absolute; inset: -17px -4px; }
}

@media (max-width: 860px) {
	/* Touch targets: everything below was under 44px in its tapping
	   dimension. Measured befores are in the section comments. */
	.hb-icon-btn { width: 44px; height: 44px; } /* was 42x42: menu toggle, search toggle, search close, drawer close */
	.hb-action-btn { width: 44px; height: 44px; } /* was 34x34 */
	.hb-footer-social .hb-social-link { width: 44px; height: 44px; } /* was 40x40 */
	.hb-toc-toggle { padding: 12px; } /* was 6px padding around a 20px icon: about 32x32 */
	.hb-save-btn { min-height: 44px; padding: 10px 16px; } /* v2.5.3: pill keeps its horizontal padding on touch */
	.hb-article-tags a { padding: 12px 16px; } /* was 7px 16px: about 36px tall */
	.hb-comment-reply a { padding: 12px 20px; } /* was 7px 18px: about 38px tall */
	.hb-footer-links li { margin-bottom: 0; }
	.hb-footer-links a { display: block; padding: 11px 0; } /* was an inline link, about 24px tall with 13px untappable gaps */
	.hb-widget li { padding: 0; }
	.hb-widget a { display: block; padding: 11px 0; } /* was an inline link in a 40px row, link box about 24px */
	.hb-toc-list a { flex: 1; padding: 2px 0; } /* row is already 44px; lets the link fill it */

	/* Typography: no form control under 16px, so iOS Safari does not
	   auto-zoom on focus. Comment and contact inputs were 15px; the
	   theme newsletter input and plugin inputs had no size in this
	   file at all. The body-prefixed plugin rule (0,2,2 specificity)
	   beats the plugin's own bare rules regardless of load order,
	   mirroring the .hb-dark .hbn- pattern used above. */
	input, select, textarea { font-size: 16px; }
	.comment-form-comment textarea,
	.comment-form-author input,
	.comment-form-email input,
	.comment-form-url input,
	.hb-contact-form input,
	.hb-contact-form textarea,
	.hb-news-form input,
	.hb-searchform-input { font-size: 16px; }
	body .hbn-form input[type="email"] { font-size: 16px; min-height: 48px; }
	.hb-news-form input { min-height: 48px; padding: 12px 16px; }

	/* Weather pill meta text: 11px up to the 12px caption floor. The
	   pill itself is about 50px tall, so it already passes as a
	   target. The 10px panel axis labels are chart micro-labels in a
	   fixed 268px desktop grid and are intentionally left alone. */

	/* Overflow: wide article tables scroll inside their own box
	   instead of pushing the page sideways (CSS-only, no wrapper
	   markup needed); pre blocks, embeds, and WP captioned figures
	   are capped the same way; long unbreakable strings wrap. */
	.hb-entry-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.hb-entry-content pre { max-width: 100%; overflow-x: auto; }
	.hb-entry-content iframe,
	.hb-entry-content video,
	.hb-entry-content embed,
	.hb-entry-content object { max-width: 100%; }
	.hb-entry-content video { height: auto; }
	.hb-entry-content .wp-caption { max-width: 100%; }
	.hb-entry-content, .hb-comment-text { overflow-wrap: break-word; }
}

@media (max-width: 640px) {
	/* More content width on small phones: 272px up to 288px at 320px. */
	.hb-container { padding-left: 16px; padding-right: 16px; }

	/* Ribbon headings step down so long titles wrap gracefully at
	   320-390px instead of stacking into a tall ribbon. The desktop
	   26px and 21px sizes are untouched. */
	.hb-entry-content h2 { font-size: 22px; padding: 11px 20px; max-width: 100%; }
	.hb-entry-content h3 { font-size: 18px; padding: 9px 16px; max-width: 100%; }
	.hb-ribbon { font-size: 21px; padding: 9px 24px; }

	/* Article H1: the clamp floor drops from 34px to 28px at 320px
	   and reaches 34px again by 400px; long words can no longer push
	   past the screen. Archive and page titles keep their 30px floor
	   and only gain the wrap guard. */
	.hb-article-title { font-size: clamp(28px, 8.5vw, 34px); overflow-wrap: break-word; }
	.hb-archive-title, .hb-page-title { overflow-wrap: break-word; }

	/* Search overlay: the side-by-side form could not fit a 320px
	   screen (input plus button plus 34px box padding in a 212px
	   inner width), so it stacks with full-width 48px controls. */
	.hb-search-box { padding: 22px; }
	.hb-searchform { flex-direction: column; }
	.hb-searchform-input { min-height: 48px; }
	.hb-searchform-btn { min-height: 48px; }

	/* Legal menu links join the 44px row pattern once the menu wraps
	   and centers at this width. */
	.hb-legal-menu a { padding: 11px 0; }
}

/* v2.4.8 (continued): touch tablets above the 860px layout breakpoint
   keep the desktop layout, so the tap-target and form-text minimums
   follow the pointer instead of the width. Mouse desktops (a fine
   pointer) are completely unaffected by this block. */
@media (pointer: coarse) {
	.hb-icon-btn { width: 44px; height: 44px; }
	.hb-action-btn { width: 44px; height: 44px; }
	.hb-footer-social .hb-social-link { width: 44px; height: 44px; }
	.hb-toc-toggle { padding: 12px; }
	.hb-article-tags a { padding: 12px 16px; }
	.hb-comment-reply a { padding: 12px 20px; }
	input, select, textarea { font-size: 16px; }
	body .hbn-form input[type="email"] { font-size: 16px; min-height: 48px; }
	.hb-news-form input { min-height: 48px; }
}

/* v2.4.8 (continued): the drawer dark-mode switch (added in header.php
   because the pill nav that holds the original switch is hidden at
   860px and under, which left phone users with no way to switch modes)
   sits against the right edge of the drawer head, before Close. */
.hb-drawer-head .hb-dark-switch { margin-left: auto; margin-right: 10px; }

/* ============ v2.4.9: mobile drawer polish ============
   Drawer only (the desktop header and pill nav are untouched):
   - the drawer head now carries the original website logo (header.php
     uses the same custom-logo / bundled-logo chain as the desktop
     header) instead of the small house wordmark;
   - the Home icon is pinned to menu size: its 26px desktop sizing is
     scoped to .hb-menu and never reached the drawer, so the SVG
     rendered at full row width;
   - the search row fits: the input may now shrink (flex min-width),
     which stops it pushing the Search button past the panel edge;
   - roomier branded rows, a soft shell shadow, and a gentle slide-in
     that reduced-motion stills. */

/* Shell: soft shadow on the open edge plus slide/fade entrance. */
.hb-drawer-panel {
	box-shadow: -20px 0 54px rgba(12, 12, 20, 0.30);
	animation: hb-drawer-in 0.28s ease both;
}
.hb-drawer-backdrop { animation: hb-drawer-fade 0.24s ease both; }
@keyframes hb-drawer-in {
	from { transform: translateX(56px); opacity: 0.35; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes hb-drawer-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Head: logo left, dark-mode switch and Close right. */
.hb-drawer-head {
	gap: 10px;
	margin-bottom: 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hb-line);
}
.hb-drawer-logo { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.hb-drawer-logo a { display: inline-flex; align-items: center; }
.hb-drawer-logo .custom-logo,
.hb-drawer-logo .hb-default-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 40px;
}
/* Dark mode gets the same white pill the desktop logo uses, so the
   dark wordmark stays readable on the dark panel. */
.hb-dark .hb-drawer-logo { background: #ffffff; border-radius: 12px; padding: 6px 10px; }
.hb-drawer-head .hb-drawer-close { flex: none; }

/* Rows: 54px tall, aligned, quiet chevron, brand states. */
.hb-drawer-menu { margin-bottom: 20px; }
.hb-drawer-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	min-height: 54px;
	padding: 13px 10px;
	transition: background 0.15s ease, color 0.15s ease;
}
.hb-drawer-menu > li > a::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.32;
}
.hb-drawer-menu a:hover,
.hb-drawer-menu a:focus-visible {
	color: var(--hb-primary);
	background: var(--hb-soft);
}
.hb-dark .hb-drawer-menu a:hover,
.hb-dark .hb-drawer-menu a:focus-visible { background: #23233a; }
.hb-drawer-menu .current-menu-item > a,
.hb-drawer-menu .current_page_item > a {
	color: var(--hb-primary);
	box-shadow: inset 3px 0 0 var(--hb-primary);
}
.hb-drawer-menu .sub-menu { padding-left: 20px; }
.hb-drawer-menu .sub-menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-size: 15.5px;
}

/* Home: pin the icon to a menu-appropriate 21px in the drawer. */
.hb-drawer-menu .hb-menu-home-icon { width: 21px; height: 21px; flex: none; }

/* Project Finder and Smart Home Matcher are tools: a soft brand tint. */
.hb-drawer-menu a[href*="/project-finder/"],
.hb-drawer-menu a[href*="/smart-home-matcher/"] {
	margin: 6px 0;
	padding-left: 12px;
	padding-right: 12px;
	border-bottom-color: transparent;
	border-radius: 12px;
	color: var(--hb-leaf);
	background: linear-gradient(90deg, rgba(7, 86, 61, 0.10), rgba(123, 108, 255, 0.12));
}
.hb-drawer-menu a[href*="/project-finder/"]:hover,
.hb-drawer-menu a[href*="/smart-home-matcher/"]:hover {
	color: var(--hb-primary);
	background: linear-gradient(90deg, rgba(7, 86, 61, 0.16), rgba(123, 108, 255, 0.18));
}
.hb-dark .hb-drawer-menu a[href*="/project-finder/"],
.hb-dark .hb-drawer-menu a[href*="/smart-home-matcher/"] {
	color: #ececf4;
	background: linear-gradient(90deg, rgba(7, 86, 61, 0.22), rgba(123, 108, 255, 0.24));
}

/* Search row: input flexes to zero, button stays whole, 48px tall.
   The row direction is restated because the 640px search-overlay block
   stacks every .hb-searchform; the drawer keeps its side-by-side row. */
.hb-drawer-search .hb-searchform { flex-direction: row; gap: 8px; }
.hb-drawer-search .hb-searchform-input { flex: 1 1 auto; min-width: 0; min-height: 48px; }
.hb-drawer-search .hb-searchform-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 48px;
	padding: 12px 18px;
	white-space: nowrap;
}
.hb-drawer-search .hb-searchform-btn svg { width: 17px; height: 17px; flex: none; }

/* Reduced motion: no slide or fade (the global reduce block already
   flattens durations; this keeps the intent explicit for the drawer). */
@media (prefers-reduced-motion: reduce) {
	.hb-drawer-panel,
	.hb-drawer-backdrop { animation: none; }
	.hb-drawer-menu > li > a { transition: none; }
}