/* ==========================================================================
   WP Tuts Hub — modern redesign (child of TechBlaze)
   Direction: light technical canvas, ink + teal, brand-led header, AdSense retained
   ========================================================================== */

:root {
	--wth-ink: #0f172a;
	--wth-ink-soft: #334155;
	--wth-muted: #64748b;
	--wth-line: rgba(15, 23, 42, 0.1);
	--wth-surface: #ffffff;
	--wth-canvas: #eef3f8;
	--wth-canvas-2: #e4edf5;
	--wth-teal: #0f766e;
	--wth-teal-bright: #14b8a6;
	--wth-coral: #e11d48;
	--wth-radius: 14px;
	--wth-radius-sm: 10px;
	--wth-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 18px 40px -28px rgba(15, 23, 42, 0.35);
	--wth-font-display: "Syne", Georgia, serif;
	--wth-font-body: "Figtree", "Segoe UI", sans-serif;
	--wth-font-mono: "JetBrains Mono", ui-monospace, monospace;
	--wth-max: 1180px;
	--wth-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------------- */
/* Base
/* -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body.wptuts-hub,
body.wptuts-hub.main {
	font-family: var(--wth-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--wth-ink-soft);
	background-color: var(--wth-canvas);
	background-image:
		radial-gradient(1200px 600px at 8% -10%, rgba(20, 184, 166, 0.18), transparent 55%),
		radial-gradient(900px 500px at 92% 0%, rgba(225, 29, 72, 0.08), transparent 50%),
		linear-gradient(180deg, var(--wth-canvas) 0%, var(--wth-canvas-2) 100%),
		repeating-linear-gradient(
			90deg,
			transparent 0,
			transparent 47px,
			rgba(15, 23, 42, 0.035) 47px,
			rgba(15, 23, 42, 0.035) 48px
		);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

body.wptuts-hub a {
	color: var(--wth-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.2s var(--wth-ease);
}

body.wptuts-hub a:hover {
	color: var(--wth-coral);
}

body.wptuts-hub .main-container,
body.wptuts-hub .menu-pusher {
	background: transparent;
}

body.wptuts-hub .container,
body.wptuts-hub .header,
body.wptuts-hub .main-wrapper,
body.wptuts-hub .header-3 .center-width {
	width: 100%;
	max-width: var(--wth-max);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------- */
/* Header / masthead
/* -------------------------------------------------------------------------- */

body.wptuts-hub .main-header.wth-header,
body.wptuts-hub .main-header.header-3 {
	background: transparent;
	border-bottom: 0;
	color: var(--wth-ink);
}

body.wptuts-hub .wth-masthead {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 48%, rgba(232, 245, 243, 0.88) 100%);
	border-bottom: 1px solid var(--wth-line);
	backdrop-filter: blur(10px);
}

body.wptuts-hub .wth-masthead::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(20, 184, 166, 0.12), transparent 28%),
		linear-gradient(120deg, transparent 40%, rgba(15, 23, 42, 0.03) 40.5%, transparent 41%);
	pointer-events: none;
}

body.wptuts-hub .wth-masthead__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem 2rem;
	width: 100%;
	max-width: var(--wth-max);
	margin: 0 auto;
	padding: 1.75rem 1.25rem 1.5rem;
	box-sizing: border-box;
}

/* Only reserve the ad column when a unit has actually filled. */
body.wptuts-hub .wth-masthead--has-ad .wth-masthead__inner {
	grid-template-columns: minmax(0, 1fr) minmax(280px, 728px);
}

body.wptuts-hub .wth-masthead__inner .menu-btn,
body.wptuts-hub .wth-menu-toggle {
	display: none !important;
}

body.wptuts-hub .wth-nav-backdrop {
	display: none;
}

body.wptuts-hub .wth-brand {
	float: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	min-width: 0;
	flex: 1 1 auto;
	animation: wth-rise 0.7s var(--wth-ease) both;
}

body.wptuts-hub .wth-brand__lockup,
body.wptuts-hub .header #logo.wth-brand__lockup,
body.wptuts-hub .header #logo {
	margin: 0;
	line-height: 1;
}

body.wptuts-hub .wth-brand__lockup a {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--wth-ink);
	text-decoration: none;
	min-width: 0;
}

body.wptuts-hub .wth-brand__mark {
	display: block;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 10px;
}

body.wptuts-hub .wth-brand__name {
	font-family: var(--wth-font-display);
	font-weight: 800;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	letter-spacing: -0.035em;
	line-height: 1.1;
}

body.wptuts-hub .wth-brand__lockup a:hover,
body.wptuts-hub .wth-brand__lockup a:hover .wth-brand__name {
	color: var(--wth-teal);
}

/* Legacy title selectors (other templates) */
body.wptuts-hub .wth-brand__title,
body.wptuts-hub .header #logo.wth-brand__title {
	margin: 0;
	line-height: 1;
}

body.wptuts-hub .wth-brand__title a {
	color: var(--wth-ink);
	font-family: var(--wth-font-display);
	font-weight: 800;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	letter-spacing: -0.035em;
	text-decoration: none;
	display: inline-block;
}

body.wptuts-hub .wth-brand__title a:hover {
	color: var(--wth-teal);
}

body.wptuts-hub .wth-brand__tagline,
body.wptuts-hub .tagline {
	display: block;
	max-width: 28rem;
	margin: 0;
	font-family: var(--wth-font-body);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wth-muted);
	letter-spacing: 0.01em;
}

/*
 * TechBlaze reset paints every <ins> #ff9 — AdSense uses that tag.
 * Keep ads invisible until filled; no yellow flash, no loader.
 */
body.wptuts-hub ins {
	background-color: transparent !important;
	color: inherit;
}

body.wptuts-hub .wth-ad[hidden],
body.wptuts-hub .wth-ad:not(.wth-ad--filled),
body.wptuts-hub .adsbygoogle[data-ad-status="unfilled"] {
	display: none !important;
}

body.wptuts-hub .header-ad-widget.wth-ad.wth-ad--filled {
	float: none;
	display: block !important;
	flex: 0 1 728px;
	width: min(100%, 728px);
	margin: 0;
	animation: wth-rise 0.7s var(--wth-ease) 0.08s both;
}

body.wptuts-hub .wth-ad__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wth-muted);
}

body.wptuts-hub .wth-ad--filled .wth-ad__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
}

body.wptuts-hub .wth-ad__frame iframe,
body.wptuts-hub .wth-ad__frame ins,
body.wptuts-hub .wth-ad__frame > * {
	max-width: 100%;
}

/* Navigation */
body.wptuts-hub .wth-nav,
body.wptuts-hub .header-3 .main-navigation {
	background: rgba(15, 23, 42, 0.96);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 12px 30px -24px rgba(15, 23, 42, 0.8);
}

body.wptuts-hub .header-3 .main-nav,
body.wptuts-hub .wth-nav .main-nav {
	background: transparent;
}

/* Sticky menu script is dequeued — neutralize class if cached JS still fires. */
body.wptuts-hub .main-nav.stickymenu {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	opacity: 1 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.wptuts-hub .wth-nav__inner,
body.wptuts-hub .header-3 .center-width {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--wth-max);
	margin: 0 auto;
	padding: 0 1.25rem;
	box-sizing: border-box;
}

body.wptuts-hub .header-3 .nav-menu {
	text-align: left;
	flex: 1 1 auto;
}

body.wptuts-hub .header-3 .nav-menu .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.wptuts-hub .header-3 .nav-menu .menu > li {
	float: none;
	position: relative;
}

body.wptuts-hub .header-3 .nav-menu a,
body.wptuts-hub .header-3 .nav-menu .menu > li > a {
	font-family: var(--wth-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	padding: 0.95rem 0.65rem;
	position: relative;
	white-space: nowrap;
}

/* Underline uses ::before — parent caret already owns ::after. */
body.wptuts-hub .header-3 .nav-menu .menu > li > a::before {
	content: "";
	position: absolute;
	left: 0.65rem;
	right: 0.65rem;
	bottom: 0.55rem;
	height: 2px;
	background: var(--wth-teal-bright);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--wth-ease);
	pointer-events: none;
}

body.wptuts-hub .header-3 .nav-menu .menu > li > a:hover,
body.wptuts-hub .header-3 .nav-menu .menu > li.current-menu-item > a,
body.wptuts-hub .header-3 .nav-menu .menu > li.current-menu-ancestor > a {
	color: #fff;
}

body.wptuts-hub .header-3 .nav-menu .menu > li > a:hover::before,
body.wptuts-hub .header-3 .nav-menu .menu > li.current-menu-item > a::before,
body.wptuts-hub .header-3 .nav-menu .menu > li.current-menu-ancestor > a::before {
	transform: scaleX(1);
}

/* Dropdown chevron — room after the label, thin stroke (not a filled triangle). */
body.wptuts-hub .header-3 .nav-menu .menu-item-has-children > a {
	padding-right: 1.75rem !important;
}

body.wptuts-hub .header-3 .nav-menu .menu-item-has-children > a::before {
	right: 1.75rem;
}

body.wptuts-hub .header-3 .nav-menu .menu-item-has-children > a:after,
body.wptuts-hub .header-3 .nav-menu .menu > li.menu-item-has-children > a::after {
	content: "";
	display: block;
	position: absolute;
	right: 0.55rem;
	top: 50%;
	left: auto;
	bottom: auto;
	width: 0.42rem;
	height: 0.42rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-right: 1.75px solid rgba(255, 255, 255, 0.78);
	border-bottom: 1.75px solid rgba(255, 255, 255, 0.78);
	background: none;
	transform: translateY(-45%) rotate(45deg);
	pointer-events: none;
}

body.wptuts-hub .header-3 .nav-menu .menu-item-has-children > a:hover::after,
body.wptuts-hub .header-3 .nav-menu .menu > li.menu-item-has-children:hover > a::after {
	border-right-color: #fff;
	border-bottom-color: #fff;
}

body.wptuts-hub .header-3 .nav-menu ul.sub-menu,
body.wptuts-hub .header-3 .nav-menu ul.children,
body.wptuts-hub .header-3 .nav-menu .menu ul {
	display: none;
	position: absolute;
	left: 0;
	right: auto;
	top: 100%;
	min-width: 15.5rem;
	width: max-content;
	max-width: min(22rem, 90vw);
	margin: 0;
	padding: 0.45rem 0;
	background: #0b1220 !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.75);
	z-index: 1000;
	text-align: left;
}

body.wptuts-hub .header-3 .nav-menu .menu > li:hover > ul,
body.wptuts-hub .header-3 .nav-menu .menu > li.sfHover > ul,
body.wptuts-hub .header-3 .nav-menu .menu > li.focus > ul {
	display: block;
	left: 0 !important;
	top: 100% !important;
}

body.wptuts-hub .header-3 .nav-menu ul.menu li li:hover > ul,
body.wptuts-hub .header-3 .nav-menu ul.menu li li.sfHover > ul,
body.wptuts-hub .header-3 .nav-menu ul.menu li li.focus > ul {
	display: block;
	left: 100% !important;
	top: 0 !important;
	margin-left: 0.15rem;
}

body.wptuts-hub .header-3 .nav-menu ul.sub-menu li,
body.wptuts-hub .header-3 .nav-menu ul.children li,
body.wptuts-hub .header-3 .nav-menu .menu ul li {
	display: block;
	float: none;
	width: 100%;
	margin: 0;
}

body.wptuts-hub .header-3 .nav-menu ul.sub-menu a,
body.wptuts-hub .header-3 .nav-menu ul.children a,
body.wptuts-hub .header-3 .nav-menu ul li ul li a,
body.wptuts-hub .header-3 .nav-menu ul li ul li a:hover {
	display: block;
	width: auto;
	padding: 0.65rem 1.1rem !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	color: rgba(255, 255, 255, 0.9) !important;
	font-family: var(--wth-font-body);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
	white-space: normal;
}

body.wptuts-hub .header-3 .nav-menu ul.sub-menu a:hover,
body.wptuts-hub .header-3 .nav-menu ul.children a:hover,
body.wptuts-hub .header-3 .nav-menu ul li ul li a:hover {
	background: rgba(20, 184, 166, 0.16) !important;
	color: #fff !important;
}

body.wptuts-hub .header-3 .nav-menu ul ul .menu-item-has-children > a:after {
	width: 0.34rem;
	height: 0.34rem;
	border: 0;
	border-right: 1.5px solid rgba(255, 255, 255, 0.55);
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.55);
	right: 0.85rem;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

body.wptuts-hub header .social-links a {
	color: rgba(255, 255, 255, 0.75);
}

/* Mobile menu toggle (visible ≤900px) */
body.wptuts-hub .wth-menu-toggle {
	appearance: none;
	-webkit-appearance: none;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--wth-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wth-ink);
	font-family: var(--wth-font-body);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 8px 20px -16px rgba(15, 23, 42, 0.45);
	transition: border-color 0.2s var(--wth-ease), background 0.2s var(--wth-ease), color 0.2s var(--wth-ease);
}

body.wptuts-hub .wth-menu-toggle:hover,
body.wptuts-hub .wth-menu-toggle:focus-visible {
	border-color: rgba(15, 118, 110, 0.45);
	color: var(--wth-teal);
	outline: none;
}

body.wptuts-hub .wth-menu-toggle__bars {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	width: 1.05rem;
}

body.wptuts-hub .wth-menu-toggle__bars span {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s var(--wth-ease), opacity 0.2s var(--wth-ease);
}

html.wth-nav-open body.wptuts-hub .wth-menu-toggle__bars span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}

html.wth-nav-open body.wptuts-hub .wth-menu-toggle__bars span:nth-child(2) {
	opacity: 0;
}

html.wth-nav-open body.wptuts-hub .wth-menu-toggle__bars span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

body.wptuts-hub .wth-nav__panel-head,
body.wptuts-hub .wth-nav-close,
body.wptuts-hub .wth-submenu-toggle {
	display: none;
}

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

body.wptuts-hub .main-wrapper {
	padding: 1.75rem 1.25rem 3rem;
	box-sizing: border-box;
}

/*
 * TechBlaze pins #page at 1170px and floats columns inside a bordered white
 * .main-content box. Reset to a full-width column by default.
 * Sidebar grid only on list views that still render a sidebar — never on
 * singular/home (that second track was the empty right-hand strip).
 */
body.wptuts-hub .main-content {
	display: block;
	width: 100% !important;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	overflow: visible;
	box-sizing: border-box;
	clear: both;
}

body.wptuts-hub:not(.wptuts-hub--singular):not(.wptuts-hub--home) .main-content:not(.flayout):not(.clayout):not(.glayout) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	gap: 2rem;
	align-items: start;
}

body.wptuts-hub .main-content::after,
body.wptuts-hub .main-content::before {
	display: none !important;
	content: none !important;
}

body.wptuts-hub #page,
body.wptuts-hub .main-content #page {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

body.wptuts-hub--singular #page {
	max-width: var(--wth-shell) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 1.35rem 0 3.25rem !important;
}

body.wptuts-hub .content-area,
body.wptuts-hub .home-content-area,
body.wptuts-hub .sidebar,
body.wptuts-hub #sidebar {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	max-width: none !important;
	min-width: 0;
}

body.wptuts-hub .post-box.wth-observe {
	opacity: 0;
	transform: translateY(16px);
	animation: none;
	transition: opacity 0.55s var(--wth-ease), transform 0.55s var(--wth-ease);
}

body.wptuts-hub .post-box.wth-observe.wth-inview {
	opacity: 1;
	transform: translateY(0);
}

body.wptuts-hub .content-home,
body.wptuts-hub .content-area {
	background: transparent;
}

body.wptuts-hub .home-heading {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	background: transparent;
}

body.wptuts-hub .home-heading ul {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wth-line);
}

body.wptuts-hub .home-heading li {
	margin: 0;
	padding: 0 0 0.75rem;
	font-family: var(--wth-font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wth-ink);
	border: 0;
	background: transparent;
	text-transform: none;
}

body.wptuts-hub .home-heading li.current {
	border-bottom: 2px solid var(--wth-teal);
	padding-bottom: 0.65rem;
	margin-bottom: -1px;
}

body.wptuts-hub .home-heading a {
	color: var(--wth-muted);
	text-decoration: none;
}

body.wptuts-hub .home-heading a:hover {
	color: var(--wth-teal);
}

/* Kill TechBlaze left-rail timeline that collides with modern cards */
body.wptuts-hub .content-home:before,
body.wptuts-hub .content-archive:before,
body.wptuts-hub .single-content:before,
body.wptuts-hub .post-box:before {
	display: none !important;
	content: none !important;
}

body.wptuts-hub .content {
	border: 0 !important;
	padding-top: 0;
}

body.wptuts-hub .hentry,
body.wptuts-hub article.post,
body.wptuts-hub article.wth-card {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 1.35rem !important;
	overflow: visible;
	position: relative;
}

body.wptuts-hub .post-meta-left {
	position: static !important;
	width: auto !important;
	left: auto !important;
	top: auto !important;
	display: none; /* replaced by wth-post-meta / meta-top */
}

body.wptuts-hub .post-cats {
	position: static !important;
	width: auto !important;
	left: auto !important;
	top: auto !important;
}

/* Posts */
body.wptuts-hub .post-box {
	background: var(--wth-surface);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-radius);
	box-shadow: var(--wth-shadow);
	overflow: hidden;
	margin: 0 !important;
	transition: transform 0.35s var(--wth-ease), box-shadow 0.35s var(--wth-ease);
}

body.wptuts-hub .post-box:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 28px 50px -30px rgba(15, 23, 42, 0.45);
}

body.wptuts-hub .wth-card__media {
	display: block;
	line-height: 0;
}

body.wptuts-hub .wth-card__media img {
	width: 100%;
	height: auto;
	display: block;
}

body.wptuts-hub .wth-post-header {
	clear: both;
	margin: 0 0 0.65rem;
}

/* Lean meta: tags as pills, quiet comment/edit actions (no solo-author line). */
body.wptuts-hub .wth-post-meta {
	margin-top: 0.75rem;
}

body.wptuts-hub .wth-post-meta .wth-meta,
body.wptuts-hub .wth-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--wth-muted);
	font-size: 0.9rem;
}

body.wptuts-hub .wth-meta__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.wptuts-hub .wth-meta__tags a {
	display: inline-flex;
	align-items: center;
	padding: 0.22rem 0.65rem;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.1);
	color: var(--wth-teal);
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	text-decoration: none;
}

body.wptuts-hub .wth-meta__tags a:hover {
	background: rgba(15, 118, 110, 0.18);
	color: var(--wth-ink);
}

body.wptuts-hub .wth-meta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
}

body.wptuts-hub .wth-meta__comments a,
body.wptuts-hub .wth-meta__edit a {
	color: var(--wth-muted);
	font-size: 0.86rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

body.wptuts-hub .wth-meta__comments a:hover,
body.wptuts-hub .wth-meta__edit a:hover {
	color: var(--wth-teal);
	border-bottom-color: rgba(15, 118, 110, 0.35);
}

body.wptuts-hub .wth-meta .fa,
body.wptuts-hub .wth-post-meta .fa {
	display: none !important;
}

body.wptuts-hub .wth-post-meta .post-meta span {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
}

body.wptuts-hub .post-box {
	animation: wth-rise 0.65s var(--wth-ease) both;
}

body.wptuts-hub .content > article:nth-child(1) .post-box { animation-delay: 0.05s; }
body.wptuts-hub .content > article:nth-child(2) .post-box { animation-delay: 0.12s; }
body.wptuts-hub .content > article:nth-child(3) .post-box { animation-delay: 0.19s; }
body.wptuts-hub .content > article:nth-child(4) .post-box { animation-delay: 0.26s; }

body.wptuts-hub .post-meta-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1rem;
	padding: 1.1rem 1.35rem 0;
}

body.wptuts-hub .post-cats span,
body.wptuts-hub .post-cats a {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.1);
	color: var(--wth-teal);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
}

body.wptuts-hub .post-cats span:before,
body.wptuts-hub .post-cats a:before {
	display: none !important;
	content: none !important;
	border: 0 !important;
}

/* TechBlaze post-format pin (lime circle) — overlaps modern category pills. */
body.wptuts-hub .post-type {
	display: none !important;
}

body.wptuts-hub .post-cats a:hover {
	background: rgba(15, 118, 110, 0.18);
	color: var(--wth-ink);
}

body.wptuts-hub .post-date,
body.wptuts-hub .post-date time {
	color: var(--wth-muted);
	font-size: 0.86rem;
	font-weight: 500;
}

body.wptuts-hub .title,
body.wptuts-hub .post-title,
body.wptuts-hub h1.entry-title,
body.wptuts-hub h2.entry-title,
body.wptuts-hub .post-header .title {
	font-family: var(--wth-font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--wth-ink);
}

body.wptuts-hub .title a,
body.wptuts-hub .post-title a,
body.wptuts-hub .entry-title a {
	color: var(--wth-ink);
	text-decoration: none;
}

body.wptuts-hub .title a:hover,
body.wptuts-hub .entry-title a:hover {
	color: var(--wth-teal);
}

body.wptuts-hub .post-inner {
	padding: 0.85rem 1.35rem 1.35rem;
}

body.wptuts-hub .post-content,
body.wptuts-hub .entry-content,
body.wptuts-hub .entry-summary {
	color: var(--wth-ink-soft);
	font-size: 1.02rem;
}

body.wptuts-hub .post-content code,
body.wptuts-hub .entry-content code,
body.wptuts-hub pre,
body.wptuts-hub .crayon-syntax,
body.wptuts-hub .code-block {
	font-family: var(--wth-font-mono);
}

body.wptuts-hub .read-more a,
body.wptuts-hub .more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.75rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: var(--wth-ink);
	color: #fff !important;
	font-size: 0.84rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	transition: background 0.2s var(--wth-ease), transform 0.2s var(--wth-ease);
}

body.wptuts-hub .read-more a:hover,
body.wptuts-hub .more-link:hover {
	background: var(--wth-teal);
	transform: translateX(2px);
}

/* Left meta timeline (classic TechBlaze) → quieter */
body.wptuts-hub .post-meta-left,
body.wptuts-hub .meta-left {
	color: var(--wth-muted);
}

body.wptuts-hub .post-meta .fa {
	color: var(--wth-teal) !important;
}

/* -------------------------------------------------------------------------- */
/* Sidebar
/* -------------------------------------------------------------------------- */

body.wptuts-hub .sidebar,
body.wptuts-hub #sidebar {
	background: transparent !important;
	padding: 0 !important;
}

body.wptuts-hub .sidebar .widget,
body.wptuts-hub .sidebar-small-widget,
body.wptuts-hub #sidebar .widget {
	background: var(--wth-surface);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-radius);
	box-shadow: var(--wth-shadow);
	padding: 1.15rem 1.2rem 1.25rem;
	margin: 0 0 1.15rem;
}

body.wptuts-hub .sidebar .widgettitle,
body.wptuts-hub .sidebar h3,
body.wptuts-hub .sidebar .widget-title {
	font-family: var(--wth-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wth-ink);
	border: 0;
	margin: 0 0 0.85rem;
	padding: 0;
	text-transform: none;
	background: transparent;
}

/* Defeat TechBlaze header search floats/absolute when .wth-search is reused in content */
body.wptuts-hub .wth-search,
body.wptuts-hub form.searchform.wth-search,
body.wptuts-hub .searchform fieldset {
	display: flex !important;
	align-items: stretch;
	gap: 0;
	float: none !important;
	position: relative !important;
	inset: auto !important;
	right: auto !important;
	left: auto !important;
	width: 100% !important;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent !important;
	z-index: auto !important;
}

body.wptuts-hub .wth-search .s,
body.wptuts-hub form.searchform.wth-search .s,
body.wptuts-hub .searchform .s {
	flex: 1 1 auto;
	float: none !important;
	position: static !important;
	right: auto !important;
	left: auto !important;
	width: auto !important;
	height: 46px !important;
	margin: 0;
	padding: 0 0.95rem !important;
	border: 1px solid var(--wth-line) !important;
	border-right: 0 !important;
	border-radius: 999px 0 0 999px !important;
	background: #f8fafc !important;
	font-family: var(--wth-font-body);
	font-size: 0.95rem;
	color: var(--wth-ink);
	box-shadow: none !important;
	text-indent: 0 !important;
}

body.wptuts-hub .wth-search .s:focus,
body.wptuts-hub .searchform .s:focus {
	outline: none;
	border-color: var(--wth-teal) !important;
	background: #fff !important;
}

body.wptuts-hub .wth-search__btn,
body.wptuts-hub form.searchform.wth-search .search-button,
body.wptuts-hub .wth-search .search-button {
	float: none !important;
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 48px !important;
	min-width: 48px !important;
	height: 46px !important;
	margin: 0;
	padding: 0 !important;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: var(--wth-teal) !important;
	color: #fff !important;
	cursor: pointer;
	transition: background 0.2s var(--wth-ease);
}

body.wptuts-hub .wth-search__btn:hover,
body.wptuts-hub .wth-search .search-button:hover {
	background: var(--wth-ink) !important;
}

body.wptuts-hub .search-button.fa:before {
	display: none;
}

/* -------------------------------------------------------------------------- */
/* Footer
/* -------------------------------------------------------------------------- */

body.wptuts-hub .wth-footer {
	margin-top: 2.5rem;
	border-top: 1px solid var(--wth-line);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(232, 241, 247, 0.92) 100%);
	color: var(--wth-ink-soft);
}

body.wptuts-hub .wth-footer__inner {
	width: min(100% - 2.5rem, var(--wth-max));
	margin: 0 auto;
	padding: 2.25rem 0 1.85rem;
	display: grid;
	gap: 1.35rem;
}

body.wptuts-hub .wth-footer__name {
	display: inline-block;
	margin: 0 0 0.35rem;
	font-family: var(--wth-font-display);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
	color: var(--wth-ink);
	text-decoration: none;
}

body.wptuts-hub .wth-footer__name:hover {
	color: var(--wth-teal);
}

body.wptuts-hub .wth-footer__tag {
	margin: 0;
	max-width: 28rem;
	color: var(--wth-muted);
	font-size: 0.95rem;
	line-height: 1.45;
}

body.wptuts-hub .wth-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.wptuts-hub .wth-footer__list a {
	color: var(--wth-ink-soft);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--wth-ease), border-color 0.2s var(--wth-ease);
}

body.wptuts-hub .wth-footer__list a:hover {
	color: var(--wth-teal);
	border-bottom-color: rgba(15, 118, 110, 0.35);
}

body.wptuts-hub .wth-footer__copy {
	margin: 0;
	padding-top: 0.35rem;
	border-top: 1px solid var(--wth-line);
	color: var(--wth-muted);
	font-size: 0.86rem;
}

body.wptuts-hub .wth-footer__copy a {
	color: var(--wth-ink-soft);
	text-decoration: none;
	font-weight: 600;
}

body.wptuts-hub .wth-footer__copy a:hover {
	color: var(--wth-teal);
}

body.wptuts-hub .wth-footer__sep {
	margin: 0 0.35rem;
	opacity: 0.55;
}

/* Kill leftover TechBlaze footer / copyright chrome if still rendered. */
body.wptuts-hub .footer,
body.wptuts-hub .copyright {
	display: none !important;
}

/*
 * CSS chevron — no Font Awesome dependency.
 * bottom must use rem/px: parent uses bottom: 8em, and font-size: 0 collapses that to 0.
 */
body.wptuts-hub .back-to-top,
body.wptuts-hub button.back-to-top {
	box-sizing: border-box;
	position: fixed;
	right: 1.35rem;
	bottom: 1.5rem;
	z-index: 120;
	width: 2.85rem;
	height: 2.85rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wth-ink);
	color: #fff;
	box-shadow: var(--wth-shadow);
	font-size: 1rem;
	line-height: 0;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.2s var(--wth-ease), transform 0.2s var(--wth-ease);
}

body.admin-bar.wptuts-hub .back-to-top,
body.admin-bar.wptuts-hub button.back-to-top {
	bottom: 1.5rem;
}

body.wptuts-hub .back-to-top::before {
	content: "";
	display: block;
	width: 0.55rem;
	height: 0.55rem;
	margin: 0.2rem auto 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-135deg);
}

body.wptuts-hub .back-to-top:hover {
	background: var(--wth-teal);
	transform: translateY(-2px);
}

body.wptuts-hub .back-to-top i {
	display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Single / pages — full-width modern shell
/* -------------------------------------------------------------------------- */

body.wptuts-hub--singular {
	--wth-shell: min(100% - 2.5rem, 1120px);
	/* Fill the white post card — a narrower prose max-width left a blank right rail. */
	--wth-prose: 100%;
}

body.wptuts-hub--singular .main-wrapper.wth-shell,
body.wptuts-hub--singular .main-wrapper {
	width: 100%;
	max-width: none;
	padding: 0;
}

body.wptuts-hub--singular #page {
	width: 100%;
	max-width: var(--wth-shell);
	margin: 0 auto;
	padding: 1.25rem 0 3rem;
	box-sizing: border-box;
}

body.wptuts-hub--singular .main-content,
body.wptuts-hub--singular .main-content.flayout,
body.wptuts-hub--singular .wth-shell__grid,
body.wptuts-hub.single .main-content,
body.wptuts-hub.page .main-content {
	display: block !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	width: 100% !important;
	max-width: none !important;
	gap: 0 !important;
}

body.wptuts-hub--singular .sidebar,
body.wptuts-hub--singular #sidebar,
body.wptuts-hub.single .sidebar,
body.wptuts-hub.single #sidebar,
body.wptuts-hub.page .sidebar,
body.wptuts-hub.page #sidebar {
	display: none !important;
}

body.wptuts-hub--singular .content-area,
body.wptuts-hub--singular .wth-shell__main,
body.wptuts-hub.single .content-area,
body.wptuts-hub.page .content-area {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}

body.wptuts-hub.single .breadcrumbs,
body.wptuts-hub.page .breadcrumbs,
body.wptuts-hub .wth-crumbs {
	display: block;
	margin: 0 0 1.15rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--wth-muted);
	overflow: visible;
}

body.wptuts-hub .wth-crumbs__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.4rem;
	min-width: 0;
}

body.wptuts-hub.single .breadcrumbs a,
body.wptuts-hub.page .breadcrumbs a,
body.wptuts-hub .wth-crumbs a {
	color: var(--wth-teal);
	text-decoration: none;
	font-weight: 600;
}

body.wptuts-hub.single .breadcrumbs a:hover,
body.wptuts-hub.page .breadcrumbs a:hover,
body.wptuts-hub .wth-crumbs a:hover {
	color: var(--wth-coral);
}

body.wptuts-hub.single .breadcrumbs i,
body.wptuts-hub.page .breadcrumbs i,
body.wptuts-hub .wth-crumbs i {
	color: var(--wth-teal);
	margin-right: 0.3rem;
}

body.wptuts-hub .wth-crumbs__home {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

body.wptuts-hub .wth-crumbs__sep {
	color: var(--wth-muted);
	opacity: 0.7;
	flex: 0 0 auto;
}

body.wptuts-hub .wth-crumbs__current {
	min-width: 0;
	color: var(--wth-ink-soft);
	font-weight: 500;
}

body.wptuts-hub.single .post-box,
body.wptuts-hub.page .post-box,
body.wptuts-hub .single-content .post-box,
body.wptuts-hub .wth-single__box,
body.wptuts-hub .wth-page__box {
	padding-bottom: 0;
	opacity: 1 !important;
	transform: none !important;
	animation: wth-rise 0.55s var(--wth-ease) both;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #fff 40%),
		var(--wth-surface);
	border: 1px solid var(--wth-line);
	border-radius: calc(var(--wth-radius) + 4px);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 28px 60px -40px rgba(15, 23, 42, 0.4);
	overflow: hidden;
}

body.wptuts-hub.single .post-box:hover,
body.wptuts-hub .wth-single__box:hover,
body.wptuts-hub .wth-page__box:hover {
	transform: none;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03), 0 28px 60px -40px rgba(15, 23, 42, 0.4);
}

body.wptuts-hub .wth-page__hero,
body.wptuts-hub .wth-single__hero {
	position: relative;
	padding: 2rem 2.25rem 1.25rem;
	background:
		radial-gradient(700px 220px at 8% 0%, rgba(20, 184, 166, 0.14), transparent 55%),
		linear-gradient(135deg, #f8fafc 0%, #fff 55%, #f0fdfa 100%);
	border-bottom: 1px solid var(--wth-line);
}

body.wptuts-hub .wth-page__eyebrow {
	margin: 0 0 0.55rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wth-teal);
}

body.wptuts-hub .wth-page__media {
	margin: 0;
	line-height: 0;
}

body.wptuts-hub .wth-page__media img {
	display: block;
	width: 100%;
	height: auto;
}

body.wptuts-hub .wth-page__content,
body.wptuts-hub.page .single-page-content {
	max-width: var(--wth-prose);
	margin: 0;
	padding: 1.75rem 2.25rem 2.5rem;
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--wth-ink-soft);
}

body.wptuts-hub.page .page-title,
body.wptuts-hub .wth-page .page-title {
	font-family: var(--wth-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.12;
	margin: 0;
	color: var(--wth-ink);
}

body.wptuts-hub.page .single-page-content h2,
body.wptuts-hub .wth-page__content h2 {
	font-family: var(--wth-font-display);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 2.1rem 0 0.8rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--wth-line);
	color: var(--wth-ink);
}

body.wptuts-hub.page .single-page-content p,
body.wptuts-hub .wth-page__content p {
	margin: 0 0 1.15rem;
}

/*
 * Page lists share the single-post prose treatment further below
 * (teal check badges). Do not restyle them as bordered cards here —
 * that fought the shared rules and clipped the markers.
 */

/*
 * Plugin calculators — strip prose list chrome only (grid gap, indent,
 * chevrons, ol counters). Do NOT wipe background/border/display — classic
 * unit tabs and multi-step steppers own those in plugin CSS.
 */
body.wptuts-hub.page .single-page-content .calcalpro_wrapper ul,
body.wptuts-hub .wth-page__content .calcalpro_wrapper ul,
body.wptuts-hub.page .single-page-content .calcalpro_wrapper ol,
body.wptuts-hub .wth-page__content .calcalpro_wrapper ol,
body.wptuts-hub.page .single-page-content .calorie_calculator_tabs ul,
body.wptuts-hub .wth-page__content .calorie_calculator_tabs ul,
body.wptuts-hub.page .single-page-content .calorie_calculator_tabs ol,
body.wptuts-hub .wth-page__content .calorie_calculator_tabs ol {
	gap: 0 !important;
	list-style: none !important;
	counter-reset: none !important;
}

body.wptuts-hub.page .single-page-content .calcalpro_wrapper li,
body.wptuts-hub .wth-page__content .calcalpro_wrapper li,
body.wptuts-hub.page .single-page-content .calorie_calculator_tabs li,
body.wptuts-hub .wth-page__content .calorie_calculator_tabs li {
	/* Undo prose list indent only — leave plugin tab borders / fills alone. */
	padding-left: 0 !important;
	counter-increment: none !important;
}

body.wptuts-hub.page .single-page-content .calcalpro_wrapper li::before,
body.wptuts-hub .wth-page__content .calcalpro_wrapper li::before,
body.wptuts-hub.page .single-page-content .calcalpro_wrapper li::after,
body.wptuts-hub .wth-page__content .calcalpro_wrapper li::after,
body.wptuts-hub.page .single-page-content .calorie_calculator_tabs li::before,
body.wptuts-hub .wth-page__content .calorie_calculator_tabs li::before,
body.wptuts-hub.page .single-page-content .calorie_calculator_tabs li::after,
body.wptuts-hub .wth-page__content .calorie_calculator_tabs li::after {
	content: none !important;
	display: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
	counter-increment: none !important;
}

body.wptuts-hub.page .single-page-content ul li .fa,
body.wptuts-hub .wth-page__content ul li .fa {
	display: none !important;
}

body.wptuts-hub .wth-single__hero {
	padding: 1.75rem 2.25rem 1rem;
}

body.wptuts-hub .wth-single__meta,
body.wptuts-hub.single .post-meta-top {
	padding: 0;
	margin: 0 0 0.85rem;
	border: 0 !important;
	background: transparent;
}

body.wptuts-hub .wth-single__header {
	margin: 0 0 0.35rem;
}

body.wptuts-hub.single .single-title,
body.wptuts-hub.single .entry-title,
body.wptuts-hub.page .entry-title,
body.wptuts-hub .wth-single .single-title {
	font-family: var(--wth-font-display);
	font-size: clamp(1.7rem, 2.8vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.18;
	margin: 0 0 0.75rem;
	color: var(--wth-ink);
}

body.wptuts-hub .wth-single .wth-post-meta,
body.wptuts-hub .wth-single .wth-meta {
	margin: 0.15rem 0 0.5rem;
}

body.wptuts-hub .wth-single__media,
body.wptuts-hub.single .featured-single.wth-single__media {
	/* Match hero padding; override parent width:100% + margins overflow. */
	margin: 0.85rem 2.25rem 0;
	width: auto;
	max-width: none;
	box-sizing: border-box;
	border-radius: var(--wth-radius-sm);
	overflow: hidden;
	line-height: 0;
	background: #0f172a;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

body.wptuts-hub .wth-single__media img,
body.wptuts-hub.single .featured-single img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

body.wptuts-hub .wth-single__body,
body.wptuts-hub.single .post-inner {
	padding: 1.5rem 2.25rem 2.25rem;
}

body.wptuts-hub.single .single-post-content,
body.wptuts-hub .wth-single .entry-content {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--wth-ink-soft);
	max-width: none;
	width: 100%;
}

body.wptuts-hub.single .wth-single__hero,
body.wptuts-hub.single .wth-single__body,
body.wptuts-hub.single .post-inner,
body.wptuts-hub .wth-single__box {
	max-width: none;
	width: 100%;
	box-sizing: border-box;
}

body.wptuts-hub.single .single-post-content .crayon-syntax,
body.wptuts-hub.single .single-post-content pre,
body.wptuts-hub .wth-single .entry-content .crayon-syntax,
body.wptuts-hub .wth-single .entry-content pre {
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

body.wptuts-hub--singular .single-box,
body.wptuts-hub--singular .relatedPosts,
body.wptuts-hub--singular .post-navigation,
body.wptuts-hub--singular #comments,
body.wptuts-hub--singular #respond {
	width: 100%;
}

body.wptuts-hub.single .single-post-content > *:first-child {
	margin-top: 0;
}

body.wptuts-hub.single .single-post-content h2,
body.wptuts-hub.single .single-post-content h3,
body.wptuts-hub.single .single-post-content h4,
body.wptuts-hub .wth-single__body h2,
body.wptuts-hub .wth-single__body h3,
body.wptuts-hub .wth-single__body h4,
body.wptuts-hub.page .single-page-content h2,
body.wptuts-hub.page .single-page-content h3,
body.wptuts-hub.page .single-page-content h4 {
	font-family: var(--wth-font-display);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--wth-ink);
	line-height: 1.25;
	margin: 2rem 0 0.75rem;
}

body.wptuts-hub.single .single-post-content h2,
body.wptuts-hub .wth-single__body h2,
body.wptuts-hub.page .single-page-content h2 {
	font-size: 1.45rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid var(--wth-line);
}

body.wptuts-hub.single .single-post-content h3,
body.wptuts-hub .wth-single__body h3,
body.wptuts-hub.page .single-page-content h3,
body.wptuts-hub .wth-page__content h3 {
	font-size: 1.22rem;
}

body.wptuts-hub.single .single-post-content h4,
body.wptuts-hub .wth-single__body h4,
body.wptuts-hub.page .single-page-content h4,
body.wptuts-hub .wth-page__content h4 {
	font-size: 1.05rem;
	color: var(--wth-ink-soft);
}

/* Tutorial section headings */
body.wptuts-hub .wth-heading--step {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.75rem;
	border-bottom-color: rgba(15, 118, 110, 0.22);
}

body.wptuts-hub .wth-step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.28em 0.7em;
	border-radius: 999px;
	background: var(--wth-teal);
	color: #fff;
	font-family: var(--wth-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
}

body.wptuts-hub .wth-step-title {
	flex: 1 1 12rem;
	min-width: 0;
}

body.wptuts-hub .wth-heading--checklist {
	border-bottom-color: rgba(15, 118, 110, 0.28);
}

body.wptuts-hub .wth-heading--checklist::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.45em;
	vertical-align: -0.05em;
	border-radius: 0.25em;
	background-color: var(--wth-teal);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2l2.8 2.8 6.2-6.2' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.55em;
}

body.wptuts-hub .wth-heading--warn {
	color: #9f1239;
	border-bottom-color: rgba(225, 29, 72, 0.28);
}

body.wptuts-hub .wth-heading--warn::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.45em;
	border-radius: 999px;
	background: #e11d48;
	color: #fff;
	font-family: var(--wth-font-body);
	font-size: 0.78em;
	font-weight: 800;
	line-height: 1;
	vertical-align: 0.05em;
}

body.wptuts-hub .wth-heading--warn + p {
	margin-top: 0.85rem;
	padding: 0.95rem 1.05rem;
	border-radius: var(--wth-radius-sm);
	border: 1px solid rgba(225, 29, 72, 0.18);
	background: rgba(225, 29, 72, 0.06);
	color: #4c0519;
}

body.wptuts-hub .wth-heading--fix {
	border-bottom-color: rgba(15, 118, 110, 0.22);
}

body.wptuts-hub .wth-heading--fix + ul > li > strong:first-child {
	color: var(--wth-ink);
}

body.wptuts-hub .wth-heading--next {
	border-bottom-style: dashed;
	border-bottom-color: rgba(15, 118, 110, 0.35);
}

/* Callouts */
body.wptuts-hub .wth-callout {
	position: relative;
	margin: 1.25rem 0 1.4rem;
	padding: 0.95rem 1.05rem 0.95rem 1.15rem;
	border-radius: var(--wth-radius-sm);
	border: 1px solid rgba(15, 118, 110, 0.16);
	background: rgba(15, 118, 110, 0.06);
	color: var(--wth-ink);
	line-height: 1.6;
}

body.wptuts-hub .wth-callout__label {
	display: inline-block;
	margin-right: 0.35em;
	font-family: var(--wth-font-body);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wth-teal);
}

body.wptuts-hub .wth-callout--tip {
	border-color: rgba(20, 184, 166, 0.28);
	background: rgba(20, 184, 166, 0.1);
}

body.wptuts-hub .wth-callout--note {
	border-color: rgba(59, 130, 246, 0.22);
	background: rgba(59, 130, 246, 0.07);
}

body.wptuts-hub .wth-callout--note .wth-callout__label {
	color: #1d4ed8;
}

body.wptuts-hub .wth-callout--warning,
body.wptuts-hub .wth-callout--important {
	border-color: rgba(225, 29, 72, 0.2);
	background: rgba(225, 29, 72, 0.06);
}

body.wptuts-hub .wth-callout--warning .wth-callout__label,
body.wptuts-hub .wth-callout--important .wth-callout__label {
	color: #be123c;
}

body.wptuts-hub .wth-callout--refs {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	border-color: rgba(15, 23, 42, 0.1);
	background: linear-gradient(135deg, rgba(15, 118, 110, 0.07), rgba(238, 243, 248, 0.9));
}

body.wptuts-hub .wth-inline-step {
	display: inline-flex;
	align-items: center;
	margin-right: 0.35em;
	padding: 0.15em 0.5em;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.12);
	color: var(--wth-teal);
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

body.wptuts-hub.single .single-post-content p {
	margin: 0 0 1.15rem;
}

body.wptuts-hub.single .single-post-content ul,
body.wptuts-hub.single .single-post-content ol,
body.wptuts-hub .wth-single__body ul,
body.wptuts-hub .wth-single__body ol,
body.wptuts-hub.page .single-page-content ul,
body.wptuts-hub.page .single-page-content ol,
body.wptuts-hub .wth-page__content ul,
body.wptuts-hub .wth-page__content ol {
	margin: 0.35rem 0 1.45rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.45rem;
}

body.wptuts-hub.single .single-post-content li,
body.wptuts-hub .wth-single__body li,
body.wptuts-hub.page .single-page-content li,
body.wptuts-hub .wth-page__content li {
	/* Block + absolute marker — flex turns <code> into flex items and opens gaps. */
	display: block;
	position: relative;
	margin: 0 !important;
	margin-left: 0 !important;
	padding: 0 0 0 1.85rem !important;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--wth-ink-soft);
	line-height: 1.55;
}

/* Override TechBlaze red Font Awesome chevron bullets (posts + pages). */
body.wptuts-hub .hentry .post-content ul > li::before,
body.wptuts-hub .content-page .post-content ul > li::before,
body.wptuts-hub.single .single-post-content ul > li::before,
body.wptuts-hub .wth-single__body ul > li::before,
body.wptuts-hub.page .single-page-content ul > li::before,
body.wptuts-hub .wth-page__content ul > li::before {
	content: "" !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: 1;
	display: block !important;
	position: absolute;
	left: 0 !important;
	top: 0.28em !important;
	width: 1em !important;
	height: 1em !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	transform: none !important;
	background-color: var(--wth-teal) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.2l2.8 2.8 6.2-6.2' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 0.58em !important;
	box-shadow: 0 0 0 0.2em rgba(15, 118, 110, 0.14) !important;
	color: transparent !important;
}

/*
 * Calculator UIs are not prose lists — kill chevrons / markers only.
 * Leave margins, borders, and backgrounds to plugin skins (classic tabs).
 */
body.wptuts-hub .calcalpro_wrapper ul,
body.wptuts-hub .calorie_calculator_tabs ul,
body.wptuts-hub .calcalpro_wrapper ol,
body.wptuts-hub .calorie_calculator_tabs ol {
	list-style: none !important;
}

body.wptuts-hub .calcalpro_wrapper ul > li::before,
body.wptuts-hub .calcalpro_wrapper ul > li::after,
body.wptuts-hub .calcalpro_wrapper ol > li::before,
body.wptuts-hub .calcalpro_wrapper ol > li::after,
body.wptuts-hub .calorie_calculator_tabs ul > li::before,
body.wptuts-hub .calorie_calculator_tabs ul > li::after,
body.wptuts-hub .calorie_calculator_tabs ol > li::before,
body.wptuts-hub .calorie_calculator_tabs ol > li::after {
	content: none !important;
	display: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

body.wptuts-hub.single .single-post-content ol,
body.wptuts-hub .wth-single__body ol,
body.wptuts-hub.page .single-page-content ol,
body.wptuts-hub .wth-page__content ol {
	counter-reset: wth-ol;
}

body.wptuts-hub.single .single-post-content ol > li,
body.wptuts-hub .wth-single__body ol > li,
body.wptuts-hub.page .single-page-content ol > li,
body.wptuts-hub .wth-page__content ol > li {
	counter-increment: wth-ol;
}

body.wptuts-hub.single .single-post-content ol > li::before,
body.wptuts-hub .wth-single__body ol > li::before,
body.wptuts-hub.page .single-page-content ol > li::before,
body.wptuts-hub .wth-page__content ol > li::before {
	content: counter(wth-ol) !important;
	font-family: var(--wth-font-body) !important;
	font-size: 0.7rem !important;
	font-weight: 700;
	line-height: 1.05rem;
	display: block;
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	border: 0 !important;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.12);
	color: var(--wth-teal);
	text-align: center;
	box-shadow: none;
	background-image: none;
	transform: none !important;
}

/* Calculator multi-step <ol> must not get prose numbered badges. */
body.wptuts-hub.single .single-post-content .calcalpro_wrapper ol,
body.wptuts-hub .wth-single__body .calcalpro_wrapper ol,
body.wptuts-hub.page .single-page-content .calcalpro_wrapper ol,
body.wptuts-hub .wth-page__content .calcalpro_wrapper ol {
	counter-reset: none !important;
}

body.wptuts-hub.single .single-post-content .calcalpro_wrapper ol > li,
body.wptuts-hub .wth-single__body .calcalpro_wrapper ol > li,
body.wptuts-hub.page .single-page-content .calcalpro_wrapper ol > li,
body.wptuts-hub .wth-page__content .calcalpro_wrapper ol > li {
	counter-increment: none !important;
}

body.wptuts-hub.single .single-post-content .calcalpro_wrapper ol > li::before,
body.wptuts-hub .wth-single__body .calcalpro_wrapper ol > li::before,
body.wptuts-hub.page .single-page-content .calcalpro_wrapper ol > li::before,
body.wptuts-hub .wth-page__content .calcalpro_wrapper ol > li::before {
	content: none !important;
	display: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
}

body.wptuts-hub.single .single-post-content li::marker,
body.wptuts-hub .wth-single__body li::marker,
body.wptuts-hub.page .single-page-content li::marker {
	content: none;
	color: transparent;
}

body.wptuts-hub.single .single-post-content ul ul,
body.wptuts-hub.single .single-post-content ol ol,
body.wptuts-hub.single .single-post-content ul ol,
body.wptuts-hub.single .single-post-content ol ul,
body.wptuts-hub .wth-single__body ul ul,
body.wptuts-hub .wth-single__body ol ol {
	margin: 0.45rem 0 0.15rem;
	gap: 0.3rem;
	width: 100%;
}

body.wptuts-hub.single .single-post-content ul ul > li::before,
body.wptuts-hub .wth-single__body ul ul > li::before {
	width: 0.4em;
	height: 0.4em;
	top: 0.55em;
	left: 0.3rem;
	background-color: var(--wth-teal-bright);
	background-image: none;
	box-shadow: none;
	opacity: 0.85;
}

body.wptuts-hub.single .single-post-content a,
body.wptuts-hub .wth-single__body a,
body.wptuts-hub.page .single-page-content a {
	font-weight: 600;
	color: var(--wth-teal);
	text-decoration-color: rgba(15, 118, 110, 0.35);
	text-underline-offset: 0.15em;
}

body.wptuts-hub.single .single-post-content a:hover,
body.wptuts-hub .wth-single__body a:hover {
	color: #0d9488;
	text-decoration-color: rgba(13, 148, 136, 0.55);
}

body.wptuts-hub.single .single-post-content img,
body.wptuts-hub .wth-single__body img,
body.wptuts-hub.page .single-page-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--wth-radius-sm);
}

body.wptuts-hub.single .single-post-content figure,
body.wptuts-hub .wth-single__body figure {
	margin: 1.5rem 0;
	padding: 0;
}

body.wptuts-hub.single .single-post-content figcaption,
body.wptuts-hub .wth-single__body figcaption {
	margin-top: 0.55rem;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--wth-muted);
	text-align: center;
}

body.wptuts-hub.single .single-post-content hr,
body.wptuts-hub .wth-single__body hr,
body.wptuts-hub.single .single-post-content .wp-block-separator {
	border: 0;
	height: 1px;
	margin: 2rem 0;
	background: linear-gradient(90deg, transparent, rgba(15, 118, 110, 0.35), rgba(15, 23, 42, 0.12), transparent);
}

body.wptuts-hub.single .single-post-content blockquote,
body.wptuts-hub .wth-single__body blockquote {
	position: relative;
	margin: 1.5rem 0;
	padding: 1.05rem 1.2rem 1.05rem 1.35rem;
	border-left: 3px solid var(--wth-teal);
	background: rgba(15, 118, 110, 0.06);
	border-radius: 0 var(--wth-radius-sm) var(--wth-radius-sm) 0;
	color: var(--wth-ink);
	font-style: italic;
}

body.wptuts-hub.single .single-post-content blockquote::before,
body.wptuts-hub .wth-single__body blockquote::before {
	content: "“";
	position: absolute;
	top: 0.15rem;
	right: 0.7rem;
	font-family: var(--wth-font-display);
	font-size: 2.4rem;
	line-height: 1;
	color: rgba(15, 118, 110, 0.22);
	font-style: normal;
	pointer-events: none;
}

body.wptuts-hub.single .single-post-content code,
body.wptuts-hub .wth-single__body code,
body.wptuts-hub.page .single-page-content code {
	font-family: var(--wth-font-mono);
	font-size: 0.88em;
	padding: 0.14em 0.42em;
	border-radius: 6px;
	border: 1px solid rgba(15, 118, 110, 0.14);
	background: rgba(15, 118, 110, 0.07);
	color: #0f766e;
}

body.wptuts-hub.single .single-post-content kbd,
body.wptuts-hub .wth-single__body kbd {
	font-family: var(--wth-font-mono);
	font-size: 0.82em;
	padding: 0.12em 0.45em;
	border-radius: 6px;
	border: 1px solid rgba(15, 23, 42, 0.14);
	background: #f8fafc;
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
	color: var(--wth-ink);
}

body.wptuts-hub.single .single-post-content mark,
body.wptuts-hub .wth-single__body mark {
	padding: 0.08em 0.28em;
	border-radius: 4px;
	background: rgba(250, 204, 21, 0.35);
	color: inherit;
}

body.wptuts-hub.single .single-post-content table,
body.wptuts-hub .wth-single__body table,
body.wptuts-hub.page .single-page-content table {
	width: 100%;
	margin: 1.35rem 0 1.6rem;
	border-collapse: collapse;
	font-size: 0.95em;
	overflow: hidden;
	border-radius: var(--wth-radius-sm);
	box-shadow: inset 0 0 0 1px var(--wth-line);
}

body.wptuts-hub.single .single-post-content th,
body.wptuts-hub.single .single-post-content td,
body.wptuts-hub .wth-single__body th,
body.wptuts-hub .wth-single__body td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--wth-line);
	text-align: left;
	vertical-align: top;
}

body.wptuts-hub.single .single-post-content th,
body.wptuts-hub .wth-single__body th {
	background: rgba(15, 118, 110, 0.08);
	color: var(--wth-ink);
	font-weight: 700;
}

body.wptuts-hub.single .single-post-content tr:last-child td,
body.wptuts-hub .wth-single__body tr:last-child td {
	border-bottom: 0;
}

body.wptuts-hub.single .single-post-content tr:nth-child(even) td,
body.wptuts-hub .wth-single__body tr:nth-child(even) td {
	background: rgba(238, 243, 248, 0.55);
}

body.wptuts-hub.single .single-post-content details,
body.wptuts-hub .wth-single__body details {
	margin: 1.2rem 0 1.4rem;
	padding: 0.85rem 1rem;
	border-radius: var(--wth-radius-sm);
	border: 1px solid var(--wth-line);
	background: rgba(238, 243, 248, 0.55);
}

body.wptuts-hub.single .single-post-content summary,
body.wptuts-hub .wth-single__body summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wth-ink);
	list-style: none;
}

body.wptuts-hub.single .single-post-content summary::-webkit-details-marker {
	display: none;
}

body.wptuts-hub.single .single-post-content summary::before,
body.wptuts-hub .wth-single__body summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.45em;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.12);
	color: var(--wth-teal);
	font-weight: 800;
	line-height: 1;
}

body.wptuts-hub.single .single-post-content details[open] summary::before,
body.wptuts-hub .wth-single__body details[open] summary::before {
	content: "–";
}

body.wptuts-hub.single .single-post-content pre,
body.wptuts-hub.single .single-post-content pre code {
	font-family: var(--wth-font-mono);
	font-size: 0.88rem;
	line-height: 1.55;
}

body.wptuts-hub.single .single-post-content pre {
	margin: 1.35rem 0;
	padding: 1.1rem 1.2rem;
	overflow-x: auto;
	border-radius: var(--wth-radius-sm);
	background: #0f172a;
	color: #e2e8f0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.wptuts-hub.single .single-post-content pre code {
	padding: 0;
	background: transparent;
	color: inherit;
}

/* Prism.js — line numbers work when language-* is only on <code> */
body.wptuts-hub.single .single-post-content pre.line-numbers,
body.wptuts-hub .wth-single__body pre.line-numbers,
body.wptuts-hub.page .single-page-content pre.line-numbers {
	position: relative;
	padding-left: 3.6em;
	counter-reset: linenumber;
}

body.wptuts-hub.single .single-post-content pre.line-numbers > code,
body.wptuts-hub .wth-single__body pre.line-numbers > code,
body.wptuts-hub.page .single-page-content pre.line-numbers > code {
	position: relative;
	white-space: inherit;
}

body.wptuts-hub .line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	left: -3.6em;
	width: 2.85em;
	font-size: 100%;
	letter-spacing: -1px;
	border-right: 1px solid rgba(148, 163, 184, 0.35);
	user-select: none;
}

body.wptuts-hub .line-numbers-rows > span {
	display: block;
	counter-increment: linenumber;
}

body.wptuts-hub .line-numbers-rows > span::before {
	content: counter(linenumber);
	color: #94a3b8;
	display: block;
	padding-right: 0.7em;
	text-align: right;
}

/* Prism toolbar (copy + language) on dark code blocks */
body.wptuts-hub div.code-toolbar {
	position: relative;
}

body.wptuts-hub div.code-toolbar > .toolbar {
	opacity: 1;
	top: 0.45rem;
	right: 0.45rem;
}

body.wptuts-hub div.code-toolbar > .toolbar > .toolbar-item > button,
body.wptuts-hub div.code-toolbar > .toolbar > .toolbar-item > span {
	color: #e2e8f0;
	background: rgba(15, 23, 42, 0.72);
	box-shadow: none;
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 6px;
	font-size: 0.72rem;
	padding: 0.2em 0.55em;
}

body.wptuts-hub.single .single-box,
body.wptuts-hub .relatedPosts,
body.wptuts-hub .post-navigation,
body.wptuts-hub #comments,
body.wptuts-hub #respond {
	background: var(--wth-surface);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-radius);
	box-shadow: var(--wth-shadow);
	padding: 1.25rem 1.35rem 1.4rem;
	margin: 0 0 1.15rem;
}

body.wptuts-hub.single .section-heading,
body.wptuts-hub .relatedPosts .section-heading,
body.wptuts-hub .author-box .section-heading {
	font-family: var(--wth-font-display);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--wth-ink);
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	background: transparent;
}

body.wptuts-hub.single .section-heading span,
body.wptuts-hub .relatedPosts .section-heading span {
	background: transparent;
	padding: 0;
}

body.wptuts-hub .wth-author__row {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 1rem 1.15rem;
	align-items: start;
}

body.wptuts-hub .author-box-avtar,
body.wptuts-hub .wth-author__avatar {
	float: none !important;
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
	height: 80px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 50%;
	background: #e2e8f0;
}

body.wptuts-hub .author-box img,
body.wptuts-hub .wth-author__avatar img,
body.wptuts-hub .author-box-avtar img {
	float: none !important;
	display: block !important;
	width: 80px !important;
	height: 80px !important;
	max-width: none !important;
	min-width: 80px !important;
	object-fit: cover;
	object-position: center top;
	border-radius: 50% !important;
}

body.wptuts-hub .author-info-container,
body.wptuts-hub .wth-author__info {
	margin: 0 !important;
	overflow: visible;
	min-width: 0;
}

body.wptuts-hub .wth-author__name {
	margin: 0 0 0.35rem;
	font-family: var(--wth-font-display);
	font-size: 1.15rem;
	font-weight: 700;
}

body.wptuts-hub .wth-author__name a {
	color: var(--wth-ink);
	text-decoration: none;
}

body.wptuts-hub .wth-author__name a:hover {
	color: var(--wth-teal);
}

body.wptuts-hub .wth-author__bio {
	margin: 0 0 0.65rem;
	color: var(--wth-ink-soft);
	font-size: 0.95rem;
	line-height: 1.55;
}

body.wptuts-hub .wth-author__social a,
body.wptuts-hub .author-social a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	margin: 0 0.35rem 0 0;
	padding: 0 !important;
	border-radius: 999px;
	border: 0 !important;
	background: rgba(15, 118, 110, 0.1);
	color: var(--wth-teal) !important;
	font-size: 14px;
	line-height: 1 !important;
	text-decoration: none;
	transition: background 0.2s var(--wth-ease), color 0.2s var(--wth-ease);
}

body.wptuts-hub .wth-author__social a:hover {
	background: var(--wth-teal);
	color: #fff !important;
}

body.wptuts-hub .post-navigation {
	border-bottom: 0 !important;
	overflow: hidden;
}

body.wptuts-hub .post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

body.wptuts-hub .post-navigation .post-nav-links {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	position: static;
}

body.wptuts-hub .post-navigation .prev-link,
body.wptuts-hub .post-navigation .next-link {
	display: block;
	padding: 0.9rem 1rem !important;
	margin: 0 !important;
	min-height: 0 !important;
	border: 1px solid var(--wth-line) !important;
	border-radius: var(--wth-radius-sm);
	background: #f8fafc;
	overflow: hidden;
	transition: border-color 0.2s var(--wth-ease), background 0.2s var(--wth-ease);
}

body.wptuts-hub .post-navigation .prev-link:hover,
body.wptuts-hub .post-navigation .next-link:hover {
	border-color: rgba(15, 118, 110, 0.35);
	background: rgba(15, 118, 110, 0.06);
}

body.wptuts-hub .post-navigation .uppercase {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wth-muted);
}

body.wptuts-hub .post-navigation a {
	font-family: var(--wth-font-display);
	font-weight: 650;
	font-size: 0.98rem;
	line-height: 1.3;
	color: var(--wth-ink);
	text-decoration: none;
}

body.wptuts-hub .post-navigation .next-link-wrapper {
	text-align: right;
}

body.wptuts-hub .relatedPosts,
body.wptuts-hub .wth-related {
	border-top: 0 !important;
	clear: both;
	position: relative;
	overflow: hidden;
}

body.wptuts-hub .relatedPosts ul,
body.wptuts-hub .relatedPosts ul.slides,
body.wptuts-hub .wth-related__list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	height: auto !important;
}

body.wptuts-hub .wth-related__list:has(> :only-child) {
	grid-template-columns: minmax(200px, 280px);
}

body.wptuts-hub .relatedPosts li,
body.wptuts-hub .wth-related__item {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	position: relative;
	list-style: none;
}

body.wptuts-hub .relatedPosts .featured-thumbnail,
body.wptuts-hub .wth-related__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none !important;
	border-radius: var(--wth-radius-sm);
	overflow: hidden;
	border: 1px solid var(--wth-line);
	background: #f8fafc;
	position: relative;
	transition: transform 0.25s var(--wth-ease), box-shadow 0.25s var(--wth-ease);
}

body.wptuts-hub .relatedPosts .featured-thumbnail:hover,
body.wptuts-hub .wth-related__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -20px rgba(15, 23, 42, 0.45);
}

body.wptuts-hub .relatedPosts .relatedthumb,
body.wptuts-hub .wth-related__media {
	display: block !important;
	float: none !important;
	width: 100% !important;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #0f172a;
	line-height: 0;
}

body.wptuts-hub .wth-related__media--empty {
	position: relative;
	background:
		radial-gradient(circle at 30% 30%, rgba(20, 184, 166, 0.28), transparent 55%),
		linear-gradient(145deg, #e8eef5 0%, #d5e3ec 100%);
}

body.wptuts-hub .wth-related__ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.wptuts-hub .relatedPosts .relatedthumb img,
body.wptuts-hub .wth-related__media > img {
	display: block !important;
	float: none !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

body.wptuts-hub .wth-related__ph img {
	display: block !important;
	float: none !important;
	width: 48px !important;
	height: 48px !important;
	max-width: 48px !important;
	object-fit: contain !important;
	opacity: 0.72;
}

body.wptuts-hub .relatedPosts .related-content,
body.wptuts-hub .wth-related__title {
	position: static !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	clear: none !important;
	display: block;
	padding: 0.75rem 0.85rem 0.9rem;
	background: transparent !important;
	color: var(--wth-ink) !important;
	line-height: 1.3;
}

body.wptuts-hub .relatedPosts .widgettitle,
body.wptuts-hub .wth-related__title {
	font-family: var(--wth-font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
	color: var(--wth-ink) !important;
}

/*
 * Jetpack Sharedaddy — layout chrome only.
 * Do not override button backgrounds / ::before — icons use social-logos
 * and vanish if we force white circles over Jetpack’s brand colours.
 */
body.wptuts-hub.single .sharedaddy,
body.wptuts-hub.single .sd-sharing-enabled {
	margin: 0;
	padding: 0;
	border: 0;
	clear: both;
}

body.wptuts-hub.single .sharedaddy .sd-block,
body.wptuts-hub.single .sd-sharing {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.85rem;
	/* Match content width (share sits inside .post-inner — no extra side inset) */
	margin: 1.25rem 0 0;
	padding: 0.85rem 1.15rem;
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-radius-sm);
	background: #f8fafc;
	box-shadow: none;
	min-height: 3.5rem;
	box-sizing: border-box;
}

body.wptuts-hub.single .sharedaddy .sd-title,
body.wptuts-hub.single .sd-title {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--wth-font-body) !important;
	font-size: 0.78rem !important;
	font-weight: 650 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1 !important;
	height: 2rem;
	color: var(--wth-muted) !important;
	background: none !important;
}

body.wptuts-hub.single .sharedaddy .sd-title::before {
	content: none !important;
	border: 0 !important;
	display: none !important;
}

body.wptuts-hub.single .sharedaddy .sd-content {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	flex: 0 1 auto;
	line-height: 0;
}

body.wptuts-hub.single .sharedaddy .sd-content ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	line-height: 0;
}

body.wptuts-hub.single .sharedaddy .sd-content > ul > li {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	position: relative;
	line-height: 0;
	vertical-align: middle;
}

body.wptuts-hub.single .sharedaddy .sd-content > ul > li.share-end {
	display: none !important;
}

body.wptuts-hub.single .sharedaddy .sd-content > ul > li::before {
	display: none !important;
	content: none !important;
}

/* Keep Jetpack icon glyphs visible; kill Jetpack’s top:-2px misalignment */
body.wptuts-hub.single .sharedaddy .sd-social-icon .sd-content ul li[class*="share-"] a.sd-button,
body.wptuts-hub.single .sharedaddy .sd-social-icon .sd-content ul li a.sd-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2rem !important;
	height: 2rem !important;
	min-width: 2rem !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	top: 0 !important;
	position: relative !important;
	line-height: 1 !important;
	opacity: 1 !important;
	transform: none !important;
	box-sizing: border-box;
}

body.wptuts-hub.single .sharedaddy .sd-social-icon .sd-content ul li a.sd-button::before {
	display: inline-block !important;
	font: 400 16px / 1 social-logos !important;
	color: inherit !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	top: 0 !important;
	margin: 0 !important;
	vertical-align: middle;
}

body.wptuts-hub.single .sharedaddy .sd-social-icon .sd-content ul li a.sd-button:hover,
body.wptuts-hub.single .sharedaddy .sd-social-icon .sd-content ul li a.sd-button:focus {
	opacity: 1 !important;
	filter: brightness(1.08);
}

/* Admin-only Jetpack “Customize buttons” / “More” chrome */
body.wptuts-hub.single .sharedaddy .sharing-hidden,
body.wptuts-hub.single .sharedaddy a.share-more,
body.wptuts-hub.single .sharedaddy a.sharing-options,
body.wptuts-hub.single .sharedaddy a.sharing-custom,
body.wptuts-hub.single .sharedaddy .share-customize-link,
body.wptuts-hub.single .sharedaddy .sd-content .share-customize-link,
body.wptuts-hub.single .sharedaddy .sd-content a[href*="customize"],
body.wptuts-hub.single .sharedaddy a[href*="customize-sharing"],
body.wptuts-hub.single .sharedaddy a[href*="customize.php"],
body.wptuts-hub.single .sharedaddy a[href*="options-general.php"][href*="sharing"],
body.wptuts-hub.single .sharedaddy a[href*="admin.php"][href*="sharing"] {
	display: none !important;
}

/* Mobile: label above, icons in one clean row */
@media (max-width: 782px) {
	body.wptuts-hub.single .sharedaddy .sd-block,
	body.wptuts-hub.single .sd-sharing {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0.65rem;
		margin: 1rem 0 0;
		padding: 0.85rem 1rem;
		width: 100%;
		max-width: 100%;
		min-height: 0;
	}

	body.wptuts-hub.single .sharedaddy .sd-title,
	body.wptuts-hub.single .sd-title {
		display: block !important;
		width: 100%;
		height: auto;
		line-height: 1.2 !important;
	}

	body.wptuts-hub.single .sharedaddy .sd-content {
		display: block;
		width: 100%;
		flex: none;
	}

	body.wptuts-hub.single .sharedaddy .sd-content ul {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
	}

	body.wptuts-hub.single .sharedaddy .sd-content > ul > li {
		display: inline-flex !important;
		float: none !important;
		width: auto !important;
	}

	body.wptuts-hub.single .sharedaddy .sd-social-icon .sd-content ul li[class*="share-"] a.sd-button,
	body.wptuts-hub.single .sharedaddy .sd-social-icon .sd-content ul li a.sd-button {
		width: 2.35rem !important;
		height: 2.35rem !important;
		min-width: 2.35rem !important;
		border-radius: 999px !important;
	}
}

@media (max-width: 640px) {
	body.wptuts-hub--singular {
		--wth-shell: min(100% - 1.25rem, 1120px);
	}

	body.wptuts-hub--singular #page {
		padding-top: 0.85rem;
	}

	body.wptuts-hub .wth-page__hero,
	body.wptuts-hub .wth-single__hero,
	body.wptuts-hub .wth-single__body,
	body.wptuts-hub.single .post-inner,
	body.wptuts-hub .wth-page__content,
	body.wptuts-hub.page .single-page-content {
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}

	body.wptuts-hub .wth-single__media {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	body.wptuts-hub .post-navigation .nav-links {
		grid-template-columns: 1fr;
	}

	body.wptuts-hub .post-navigation .next-link-wrapper {
		text-align: left;
	}

	body.wptuts-hub .wth-author__social a {
		line-height: 1;
	}
}

@media (max-width: 420px) {
	body.wptuts-hub .wth-author__row {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 0.75rem 0.85rem;
	}

	body.wptuts-hub .author-box-avtar,
	body.wptuts-hub .wth-author__avatar,
	body.wptuts-hub .author-box img,
	body.wptuts-hub .wth-author__avatar img,
	body.wptuts-hub .author-box-avtar img {
		width: 64px !important;
		min-width: 64px !important;
		max-width: 64px !important;
		height: 64px !important;
	}
}

/* Pagination */
body.wptuts-hub .pagination a,
body.wptuts-hub .pagination span,
body.wptuts-hub .nav-links a,
body.wptuts-hub .page-numbers {
	border-radius: 999px;
	border-color: var(--wth-line);
	font-weight: 600;
}

body.wptuts-hub .pagination .current,
body.wptuts-hub .page-numbers.current {
	background: var(--wth-teal);
	border-color: var(--wth-teal);
	color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Motion
/* -------------------------------------------------------------------------- */

@keyframes wth-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.wptuts-hub *,
	body.wptuts-hub *::before,
	body.wptuts-hub *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------- */
/* Responsive
/* -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	body.wptuts-hub:not(.wptuts-hub--home):not(.wptuts-hub--singular) .main-content {
		grid-template-columns: 1fr;
	}

	body.wptuts-hub .wth-masthead__inner {
		grid-template-columns: 1fr auto;
		grid-template-areas: "brand menu";
	}

	body.wptuts-hub .wth-brand {
		grid-area: brand;
	}

	body.wptuts-hub .wth-masthead--has-ad .wth-masthead__inner {
		grid-template-areas:
			"brand menu"
			"ad ad";
	}

	body.wptuts-hub .header-ad-widget.wth-ad.wth-ad--filled {
		grid-area: ad;
		width: 100%;
		max-width: none;
		flex: none;
	}
}

/* -------------------------------------------------------------------------- */
/* Mobile navigation drawer (phones + small tablets)
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	body.wptuts-hub .wth-masthead__inner {
		grid-template-columns: 1fr auto;
		grid-template-areas: "brand menu";
		align-items: center;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	body.wptuts-hub .wth-masthead__inner .menu-btn,
	body.wptuts-hub .wth-menu-toggle {
		display: inline-flex !important;
		grid-area: menu;
		justify-self: end;
		align-self: center;
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		height: auto !important;
		float: none !important;
		flex: 0 0 auto;
	}

	body.wptuts-hub .wth-menu-toggle:before {
		content: none !important;
	}

	/* Keep brand on one line — icon-only menu control frees horizontal space */
	body.wptuts-hub .wth-brand {
		min-width: 0;
		max-width: 100%;
	}

	body.wptuts-hub .wth-brand__lockup a {
		max-width: 100%;
	}

	body.wptuts-hub .wth-brand__name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 1.2rem;
		letter-spacing: -0.03em;
	}

	body.wptuts-hub .wth-brand__tagline {
		display: none;
	}

	body.wptuts-hub .wth-menu-toggle {
		padding: 0.55rem;
		min-width: 2.65rem;
		min-height: 2.65rem;
		justify-content: center;
	}

	body.wptuts-hub .wth-menu-toggle__text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* Backdrop */
	body.wptuts-hub .wth-nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 10040;
		background: rgba(15, 23, 42, 0.48);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s var(--wth-ease);
	}

	html.wth-nav-open body.wptuts-hub .wth-nav-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Hide desktop bar chrome; panel becomes the drawer */
	body.wptuts-hub .wth-nav,
	body.wptuts-hub .header-3 .main-navigation {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		bottom: 0 !important;
		width: min(22rem, 88vw) !important;
		max-width: 100%;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		z-index: 10050;
		transform: translateX(105%);
		transition: transform 0.28s var(--wth-ease);
		visibility: visible !important;
		overflow: visible !important;
	}

	html.wth-nav-open body.wptuts-hub .wth-nav,
	html.wth-nav-open body.wptuts-hub .header-3 .main-navigation {
		transform: translateX(0);
	}

	/* Defeat TechBlaze left-slide drawer + page push */
	body.wptuts-hub .header-3 .main-nav,
	body.wptuts-hub .wth-nav .main-nav {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		width: 100% !important;
		height: 100% !important;
		max-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background:
			radial-gradient(520px 240px at 100% 0%, rgba(20, 184, 166, 0.18), transparent 55%),
			linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
		opacity: 1 !important;
		visibility: visible !important;
		box-shadow: -18px 0 40px -24px rgba(15, 23, 42, 0.85);
		padding: 0 0 calc(1.5rem + env(safe-area-inset-bottom, 0px));
		box-sizing: border-box;
	}

	html.wth-nav-open body.wptuts-hub .menu-pusher,
	html.openNav body.wptuts-hub .menu-pusher,
	body.wptuts-hub .menu-pusher {
		left: 0 !important;
		transform: none !important;
	}

	body.wptuts-hub .wth-nav__panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 1.1rem 1.15rem 0.85rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	body.admin-bar.wptuts-hub .wth-nav__panel-head {
		padding-top: calc(1.1rem + 46px);
	}

	body.wptuts-hub .wth-nav__panel-title {
		margin: 0;
		font-family: var(--wth-font-display);
		font-size: 1.15rem;
		font-weight: 750;
		letter-spacing: -0.02em;
		color: #fff;
	}

	body.wptuts-hub .wth-nav-close,
	body.wptuts-hub #close-button.wth-nav-close {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 2.4rem;
		height: 2.4rem;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.06);
		color: #fff;
		font-size: 1.55rem;
		line-height: 1;
		cursor: pointer;
	}

	body.wptuts-hub .wth-nav-close:hover,
	body.wptuts-hub .wth-nav-close:focus-visible {
		background: rgba(20, 184, 166, 0.22);
		border-color: rgba(20, 184, 166, 0.55);
		outline: none;
	}

	body.wptuts-hub .wth-nav__search,
	body.wptuts-hub .mobile-search {
		display: block !important;
		margin: 0.9rem 1rem 0.35rem !important;
	}

	body.wptuts-hub .wth-nav__search .wth-search,
	body.wptuts-hub .mobile-search .wth-search,
	body.wptuts-hub .mobile-search form.searchform {
		width: 100% !important;
	}

	body.wptuts-hub .wth-nav__search .s,
	body.wptuts-hub .mobile-search .s {
		background: rgba(255, 255, 255, 0.96) !important;
		height: 44px !important;
	}

	body.wptuts-hub .wth-nav__inner,
	body.wptuts-hub .header-3 .center-width {
		display: block;
		max-width: none;
		margin: 0;
		padding: 0.35rem 0 1rem;
	}

	body.wptuts-hub .header-3 .nav-menu .menu {
		display: block;
		padding: 0.25rem 0;
	}

	body.wptuts-hub .header-3 .nav-menu .menu > li {
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	body.wptuts-hub .header-3 .nav-menu a,
	body.wptuts-hub .header-3 .nav-menu .menu > li > a {
		display: block;
		padding: 0.95rem 1.15rem !important;
		font-size: 0.95rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: none;
		color: rgba(255, 255, 255, 0.92) !important;
		white-space: normal;
	}

	body.wptuts-hub .header-3 .nav-menu .menu > li > a::before {
		display: none;
	}

	body.wptuts-hub .header-3 .nav-menu .menu-item-has-children > a {
		padding-right: 3.25rem !important;
	}

	body.wptuts-hub .header-3 .nav-menu .menu-item-has-children > a:after,
	body.wptuts-hub .header-3 .nav-menu .menu > li.menu-item-has-children > a::after,
	body.wptuts-hub .header-3 .nav-menu .side-sub-menu {
		display: none !important;
	}

	body.wptuts-hub .wth-submenu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0.45rem;
		right: 0.55rem;
		width: 2.35rem;
		height: 2.35rem;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.05);
		color: #fff;
		cursor: pointer;
		z-index: 2;
	}

	body.wptuts-hub .wth-submenu-toggle span {
		display: block;
		width: 0.45rem;
		height: 0.45rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-15%) rotate(45deg);
		transition: transform 0.2s var(--wth-ease);
	}

	body.wptuts-hub .menu-item-has-children.wth-submenu-open > .wth-submenu-toggle span {
		transform: translateY(10%) rotate(225deg);
	}

	body.wptuts-hub .header-3 .nav-menu .menu > li {
		position: relative;
	}

	body.wptuts-hub .header-3 .nav-menu ul.sub-menu,
	body.wptuts-hub .header-3 .nav-menu ul.children,
	body.wptuts-hub .header-3 .nav-menu .menu ul,
	body.wptuts-hub .header-3 .nav-menu .menu li:hover > ul,
	body.wptuts-hub .header-3 .nav-menu .menu li.sfHover > ul,
	body.wptuts-hub .header-3 .nav-menu .menu li.focus > ul {
		display: none !important;
		position: static !important;
		left: auto !important;
		top: auto !important;
		float: none !important;
		min-width: 0;
		max-width: none;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 0 0.35rem;
		background: rgba(0, 0, 0, 0.22) !important;
		border: 0 !important;
		border-radius: 0;
		box-shadow: none !important;
		visibility: visible !important;
		opacity: 1 !important;
		height: auto !important;
		overflow: visible !important;
	}

	body.wptuts-hub .header-3 .nav-menu .menu > li.wth-submenu-open > ul,
	body.wptuts-hub .header-3 .nav-menu .menu li.wth-submenu-open > ul.sub-menu,
	body.wptuts-hub .header-3 .nav-menu .menu li.wth-submenu-open > ul.children,
	body.wptuts-hub .header-3 .nav-menu ul.sub-menu.wth-submenu-visible,
	body.wptuts-hub .header-3 .nav-menu ul.children.wth-submenu-visible {
		display: block !important;
		visibility: visible !important;
		height: auto !important;
		max-height: none !important;
	}

	body.wptuts-hub .header-3 .nav-menu ul.sub-menu a,
	body.wptuts-hub .header-3 .nav-menu ul.children a,
	body.wptuts-hub .header-3 .nav-menu ul li ul li a {
		padding: 0.7rem 1.15rem 0.7rem 1.55rem !important;
		font-size: 0.9rem;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.82) !important;
	}

	body.wptuts-hub .header-3 .header-search {
		display: none !important;
	}

	body.wptuts-hub header .social-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.45rem;
		padding: 1rem 1.15rem 0.25rem;
	}
}

@media (max-width: 782px) {
	body.wptuts-hub .wth-masthead__inner {
		padding: 0.85rem 0.95rem;
		gap: 0.65rem;
	}

	body.wptuts-hub .wth-brand__name {
		font-size: 1.15rem;
	}

	body.wptuts-hub .wth-brand__mark {
		width: 36px;
		height: 36px;
	}

	/* Compact breadcrumbs — drop current title (already the H1) */
	body.wptuts-hub .wth-crumbs {
		margin: 0 0 0.75rem;
		font-size: 0.78rem;
		line-height: 1.3;
	}

	body.wptuts-hub .wth-crumbs__nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 0.35rem;
		padding-bottom: 0.1rem;
	}

	body.wptuts-hub .wth-crumbs__nav::-webkit-scrollbar {
		display: none;
	}

	body.wptuts-hub .wth-crumbs__current,
	body.wptuts-hub .wth-crumbs__sep--current {
		display: none;
	}

	body.wptuts-hub .wth-crumbs__cat,
	body.wptuts-hub .wth-crumbs__home span {
		white-space: nowrap;
	}

	body.wptuts-hub .wth-crumbs i {
		margin-right: 0.2rem;
	}

	body.wptuts-hub .main-wrapper {
		padding: 1.15rem 0.85rem 2.25rem;
	}

	body.wptuts-hub .post-inner,
	body.wptuts-hub .post-meta-top {
		padding-left: 1.05rem;
		padding-right: 1.05rem;
	}

	body.wptuts-hub--hub .wth-home-grid {
		grid-template-columns: 1fr;
	}

	body.wptuts-hub--home .wth-home-popular__strip {
		grid-template-columns: 1fr 1fr;
	}

}

/* -------------------------------------------------------------------------- */
/* Homepage hub
/* -------------------------------------------------------------------------- */

/* Compact masthead on home — hero owns the brand moment */
body.wptuts-hub--home .wth-masthead {
	background: transparent;
	border-bottom: 0;
}

body.wptuts-hub--home .wth-masthead__inner {
	padding-top: 0.85rem;
	padding-bottom: 0.65rem;
}

body.wptuts-hub--home .wth-brand__name {
	font-size: 1.15rem;
	letter-spacing: -0.02em;
}

body.wptuts-hub--home .wth-brand__mark {
	width: 32px;
	height: 32px;
	border-radius: 8px;
}

body.wptuts-hub--home .wth-brand__tagline,
body.wptuts-hub--home .wth-masthead .tagline {
	display: none;
}

body.wptuts-hub--hub .wth-home-wrapper.main-wrapper {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

body.wptuts-hub--hub .wth-home-layout.main-content,
body.wptuts-hub--hub .wth-home-layout {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.wptuts-hub--hub .sidebar,
body.wptuts-hub--hub #sidebar {
	display: none !important;
}

body.wptuts-hub--hub .wth-home {
	width: 100%;
	max-width: var(--wth-max);
	margin: 0 auto;
	padding: 0 1.25rem 3.5rem;
	box-sizing: border-box;
}

/* Hero — brand + promise + search; full-bleed atmosphere */
body.wptuts-hub--home .wth-home-hero {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-bottom: 1.75rem;
	padding: clamp(2.75rem, 7vw, 5rem) 1.25rem clamp(2.4rem, 5.5vw, 3.75rem);
	overflow: hidden;
	background:
		radial-gradient(900px 420px at 12% 20%, rgba(20, 184, 166, 0.22), transparent 55%),
		radial-gradient(700px 380px at 88% 10%, rgba(15, 23, 42, 0.08), transparent 50%),
		linear-gradient(165deg, #f7fafc 0%, #e8f1f6 48%, #dfeaf2 100%);
	border-bottom: 1px solid var(--wth-line);
}

body.wptuts-hub--home .wth-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(
			-18deg,
			transparent 0,
			transparent 22px,
			rgba(15, 23, 42, 0.03) 22px,
			rgba(15, 23, 42, 0.03) 23px
		);
	pointer-events: none;
}

body.wptuts-hub--home .wth-home-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
}

body.wptuts-hub--home .wth-home-hero__mark {
	display: block;
	width: clamp(88px, 14vw, 120px);
	height: clamp(88px, 14vw, 120px);
	margin: 0 auto 1.15rem;
	border-radius: 22px;
	box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.45);
}

body.wptuts-hub--home .wth-home-hero__lede {
	margin: 0 auto 1.45rem;
	max-width: 28rem;
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	line-height: 1.45;
	color: var(--wth-ink-soft);
}

body.wptuts-hub--home .wth-home-hero__search {
	max-width: 28rem;
	margin: 0 auto;
}

body.wptuts-hub--home .wth-home-hero__search .wth-search .s,
body.wptuts-hub--home .wth-home-hero__search .searchform .s {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(15, 23, 42, 0.12);
	height: 52px;
	font-size: 1rem;
}

body.wptuts-hub--home .wth-home-hero__search .wth-search__btn,
body.wptuts-hub--home .wth-home-hero__search .search-button {
	height: 52px;
	width: 54px;
}

/* Topics — compact chip strip (hero on home; archive keeps block form) */
body.wptuts-hub--hub .wth-home-topics {
	margin: 0 0 2rem;
}

body.wptuts-hub--hub .wth-home-topics__label {
	margin: 0 0 0.65rem;
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wth-muted);
}

body.wptuts-hub--hub .wth-home-topics__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.wptuts-hub--hub .wth-home-topics__list a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	border: 1px solid var(--wth-line);
	background: rgba(255, 255, 255, 0.72);
	color: var(--wth-ink-soft);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s var(--wth-ease), color 0.2s var(--wth-ease), background 0.2s var(--wth-ease);
}

body.wptuts-hub--hub .wth-home-topics__list a:hover {
	border-color: rgba(15, 118, 110, 0.45);
	color: var(--wth-teal);
	background: #fff;
}

body.wptuts-hub--hub .wth-home-topics__all {
	border-color: rgba(15, 118, 110, 0.35);
	color: var(--wth-teal);
	background: rgba(255, 255, 255, 0.9);
}

body.wptuts-hub--hub .wth-home-topics__all:hover {
	border-color: var(--wth-teal);
	color: var(--wth-ink);
}

/* Home hero: topics sit under search as a short secondary strip */
body.wptuts-hub--home .wth-home-topics--hero {
	margin: 1rem 0 0;
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

body.wptuts-hub--home .wth-home-topics--hero .wth-home-topics__label {
	margin: 0 0 0.4rem;
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-align: center;
}

body.wptuts-hub--home .wth-home-topics--hero .wth-home-topics__list {
	justify-content: center;
	gap: 0.35rem;
}

body.wptuts-hub--home .wth-home-topics--hero .wth-home-topics__list a {
	padding: 0.28rem 0.65rem;
	font-size: 0.8rem;
	background: rgba(255, 255, 255, 0.88);
}

/* Featured band */
body.wptuts-hub--home .wth-home-featured {
	margin: 0 0 2.35rem;
}

body.wptuts-hub--home .wth-home-featured__link {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	border-radius: calc(var(--wth-radius) + 4px);
	background: var(--wth-ink);
	box-shadow: var(--wth-shadow);
	transition: transform 0.35s var(--wth-ease), box-shadow 0.35s var(--wth-ease);
}

body.wptuts-hub--home .wth-home-featured__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 32px 56px -30px rgba(15, 23, 42, 0.55);
}

body.wptuts-hub--home .wth-home-featured__media {
	display: block;
	position: relative;
	align-self: stretch;
	min-height: 280px;
	overflow: hidden;
	line-height: 0;
	background: #1e293b;
}

body.wptuts-hub--home .wth-home-featured__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

body.wptuts-hub--home .wth-home-featured__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.65rem;
	padding: clamp(1.4rem, 3vw, 2.25rem);
	color: #e2e8f0;
	min-width: 0;
}

body.wptuts-hub--home .wth-home-featured__eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wth-teal-bright);
}

body.wptuts-hub--home .wth-home-featured__cat {
	display: inline-flex;
	max-width: 100%;
	padding: 0.22rem 0.65rem;
	border-radius: 999px;
	background: rgba(20, 184, 166, 0.18);
	color: #99f6e4;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.wptuts-hub--home .wth-home-featured__title {
	font-family: var(--wth-font-display);
	font-size: clamp(1.45rem, 3vw, 2rem);
	font-weight: 750;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #fff;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

body.wptuts-hub--home .wth-home-featured__excerpt {
	font-size: 0.98rem;
	line-height: 1.55;
	color: #94a3b8;
}

body.wptuts-hub--home .wth-home-featured__cta {
	display: inline-flex;
	margin-top: 0.35rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: var(--wth-teal-bright);
	color: var(--wth-ink);
	font-size: 0.84rem;
	font-weight: 700;
}

body.wptuts-hub--home .wth-home-featured__link:hover .wth-home-featured__cta {
	background: #fff;
}

/* No thumbnail — avoid a vacant second grid track */
body.wptuts-hub--home .wth-home-featured--plain .wth-home-featured__link {
	grid-template-columns: 1fr;
	background:
		radial-gradient(700px 280px at 10% 0%, rgba(20, 184, 166, 0.22), transparent 55%),
		linear-gradient(135deg, #0f172a 0%, #134e4a 55%, #0f172a 100%);
}

body.wptuts-hub--home .wth-home-featured--plain .wth-home-featured__copy {
	max-width: 42rem;
	padding: clamp(1.75rem, 4vw, 2.75rem);
}

/* Stack featured card below desktop two-column (must follow base grid rules) */
@media (max-width: 900px) {
	body.wptuts-hub--home .wth-home-featured__link {
		grid-template-columns: minmax(0, 1fr);
	}

	body.wptuts-hub--home .wth-home-featured__media {
		min-height: 220px;
		height: 240px;
	}

	body.wptuts-hub--home .wth-home-featured__copy {
		padding: 1.25rem 1.2rem 1.45rem;
		gap: 0.5rem;
	}

	body.wptuts-hub--home .wth-home-featured__title {
		font-size: clamp(1.2rem, 5.2vw, 1.55rem);
		line-height: 1.2;
	}

	body.wptuts-hub--home .wth-home-featured__excerpt {
		font-size: 0.92rem;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	body.wptuts-hub--home .wth-home-featured__cta {
		margin-top: 0.2rem;
		padding: 0.5rem 0.95rem;
		font-size: 0.82rem;
	}

	body.wptuts-hub--home .wth-home-featured__link:hover {
		transform: none;
	}
}

@media (max-width: 480px) {
	body.wptuts-hub--home .wth-home-featured {
		margin-bottom: 1.75rem;
	}

	body.wptuts-hub--home .wth-home-featured__media {
		min-height: 190px;
		height: 200px;
	}

	body.wptuts-hub--home .wth-home-featured__copy {
		padding: 1.1rem 1rem 1.25rem;
	}

	body.wptuts-hub--home .wth-home-featured__title {
		font-size: 1.2rem;
	}

	body.wptuts-hub--home .wth-home-featured__excerpt {
		-webkit-line-clamp: 2;
	}
}

body.wptuts-hub--home .wth-home-hero__mark {
	animation: wth-rise 0.7s var(--wth-ease) both;
}

body.wptuts-hub--home .wth-home-hero__lede {
	animation: wth-rise 0.7s var(--wth-ease) 0.08s both;
}

body.wptuts-hub--home .wth-home-hero__search {
	animation: wth-rise 0.7s var(--wth-ease) 0.14s both;
}

body.wptuts-hub--home .wth-home-featured {
	animation: wth-rise 0.65s var(--wth-ease) 0.1s both;
}

/* Section heads */
body.wptuts-hub--hub .wth-home-section-head {
	margin: 0 0 1.1rem;
}

body.wptuts-hub--hub .wth-home-section-head__title {
	margin: 0;
	font-family: var(--wth-font-display);
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	font-weight: 750;
	letter-spacing: -0.03em;
	color: var(--wth-ink);
}

/* Latest grid */
body.wptuts-hub--hub .wth-home-latest {
	margin: 0 0 2.75rem;
}

body.wptuts-hub--hub .wth-home-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

body.wptuts-hub--hub .wth-home-card {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent;
}

body.wptuts-hub--hub .wth-home-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--wth-surface);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-radius);
	box-shadow: var(--wth-shadow);
	overflow: hidden;
	transition: transform 0.35s var(--wth-ease), box-shadow 0.35s var(--wth-ease);
}

body.wptuts-hub--hub .wth-home-card__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 28px 50px -30px rgba(15, 23, 42, 0.45);
}

body.wptuts-hub--hub .wth-home-card__media {
	display: block;
	position: relative;
	line-height: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #dbe4ee;
	flex: 0 0 auto;
	width: 100%;
}

body.wptuts-hub--hub .wth-home-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

body.wptuts-hub--hub .wth-home-card__media--empty {
	background:
		radial-gradient(circle at 30% 30%, rgba(20, 184, 166, 0.28), transparent 55%),
		linear-gradient(145deg, #e8eef5 0%, #d5e3ec 100%);
}

body.wptuts-hub--hub .wth-home-card__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
}

body.wptuts-hub--hub .wth-home-card__ph img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	opacity: 0.72;
}

body.wptuts-hub--hub .wth-home-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 1.05rem 1.15rem 1.2rem;
	flex: 1;
}

body.wptuts-hub--hub .wth-home-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

body.wptuts-hub--hub .wth-home-card__cat {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wth-teal);
}

body.wptuts-hub--hub .wth-home-card__date {
	font-size: 0.82rem;
	color: var(--wth-muted);
}

body.wptuts-hub--hub .wth-home-card__title {
	font-family: var(--wth-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--wth-ink);
}

body.wptuts-hub--hub .wth-home-card__link:hover .wth-home-card__title {
	color: var(--wth-teal);
}

body.wptuts-hub--hub .wth-home-card__excerpt {
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--wth-ink-soft);
}

body.wptuts-hub--hub .wth-home-card__cta {
	margin-top: auto;
	padding-top: 0.35rem;
	font-size: 0.84rem;
	font-weight: 650;
	color: var(--wth-teal);
}

/* Popular strip */
body.wptuts-hub--home .wth-home-popular {
	margin: 0 0 2.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--wth-line);
}

body.wptuts-hub--home .wth-home-popular__strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

body.wptuts-hub--hub .wth-home-card--popular .wth-home-card__link {
	flex-direction: column;
}

body.wptuts-hub--hub .wth-home-card--popular .wth-home-card__media {
	aspect-ratio: 16 / 10;
}

body.wptuts-hub--hub .wth-home-card--popular .wth-home-card__body {
	padding: 0.85rem 0.95rem 1rem;
	gap: 0.4rem;
}

body.wptuts-hub--hub .wth-home-card--popular .wth-home-card__title {
	font-size: 0.98rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.wptuts-hub--hub .wth-home-card--popular .wth-home-card__cat {
	display: none;
}

body.wptuts-hub--hub .wth-home-empty {
	padding: 2rem 0;
	color: var(--wth-muted);
}

/* Homepage pager */
body.wptuts-hub--hub .wth-pager {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin: 0.5rem 0 0;
	padding: 1.75rem 0 0.25rem;
	border-top: 1px solid var(--wth-line);
}

body.wptuts-hub--hub .wth-pager__status {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wth-muted);
}

body.wptuts-hub--hub .wth-pager__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.wptuts-hub--hub .wth-pager__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.wptuts-hub--hub .wth-pager__item::before {
	display: none !important;
	content: none !important;
}

body.wptuts-hub--hub .wth-pager a,
body.wptuts-hub--hub .wth-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 0.95rem;
	border: 1px solid var(--wth-line);
	border-radius: 999px;
	background: var(--wth-surface);
	color: var(--wth-ink-soft);
	font-size: 0.92rem;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	transition: background 0.2s var(--wth-ease), border-color 0.2s var(--wth-ease), color 0.2s var(--wth-ease);
}

body.wptuts-hub--hub .wth-pager a:hover {
	border-color: rgba(15, 118, 110, 0.45);
	color: var(--wth-teal);
	background: #fff;
}

body.wptuts-hub--hub .wth-pager .current {
	background: var(--wth-ink);
	border-color: var(--wth-ink);
	color: #fff;
}

body.wptuts-hub--hub .wth-pager .prev,
body.wptuts-hub--hub .wth-pager .next {
	min-width: auto;
	padding: 0 1.15rem;
}

body.wptuts-hub--hub .wth-home-card.wth-observe {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s var(--wth-ease), transform 0.55s var(--wth-ease);
}

body.wptuts-hub--hub .wth-home-card.wth-observe.wth-inview {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 900px) {
	body.wptuts-hub--home .wth-home-popular__strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* -------------------------------------------------------------------------- */
/* Category / archive hub
/* -------------------------------------------------------------------------- */

body.wptuts-hub--archive .cat-cover-box,
body.wptuts-hub--archive .archive-cover-box,
body.wptuts-hub--archive .archive-title {
	display: none !important;
}

body.wptuts-hub--archive .wth-archive-hero {
	margin: 0 0 1.75rem;
	padding: clamp(1.75rem, 4vw, 2.75rem) 0 0;
}

body.wptuts-hub--archive .wth-archive-hero__eyebrow {
	margin: 0 0 0.55rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wth-teal);
}

body.wptuts-hub--archive .wth-archive-hero__title {
	margin: 0 0 0.75rem;
	font-family: var(--wth-font-display);
	font-size: clamp(1.85rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.12;
	color: var(--wth-ink);
}

body.wptuts-hub--archive .wth-archive-hero__desc {
	margin: 0 0 0.85rem;
	max-width: 40rem;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--wth-ink-soft);
}

body.wptuts-hub--archive .wth-archive-hero__desc p {
	margin: 0 0 0.65rem;
}

body.wptuts-hub--archive .wth-archive-hero__desc p:last-child {
	margin-bottom: 0;
}

body.wptuts-hub--archive .wth-archive-hero__meta {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wth-muted);
}

body.wptuts-hub--archive .wth-home-topics {
	margin-bottom: 2rem;
}

/* Paged home (/page/2/) — same hub language as category archives */
body.wptuts-hub--home .wth-home-paged-hero {
	margin: 0 0 1.5rem;
	padding: clamp(1.5rem, 3.5vw, 2.35rem) 0 0;
}

body.wptuts-hub--home .wth-home-paged-hero .wth-archive-hero__eyebrow {
	margin: 0 0 0.55rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wth-teal);
}

body.wptuts-hub--home .wth-home-paged-hero .wth-archive-hero__title {
	margin: 0 0 0.55rem;
	font-family: var(--wth-font-display);
	font-size: clamp(1.85rem, 4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.12;
	color: var(--wth-ink);
}

body.wptuts-hub--home .wth-home-paged-hero .wth-archive-hero__meta {
	margin: 0 0 0.85rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wth-muted);
}

body.wptuts-hub--home .wth-home-paged-hero__back {
	margin: 0 0 1.15rem;
}

body.wptuts-hub--home .wth-home-paged-hero__back a {
	font-size: 0.95rem;
	font-weight: 650;
	color: var(--wth-teal);
	text-decoration: none;
}

body.wptuts-hub--home .wth-home-paged-hero__back a:hover {
	color: var(--wth-ink);
}

body.wptuts-hub--home .wth-home-paged-hero__search {
	display: block;
	width: 100%;
	max-width: 28rem;
	margin: 0 0 0.25rem;
	clear: both;
}

body.wptuts-hub--home .wth-home--paged .wth-home-topics {
	clear: both;
	position: relative;
	z-index: 1;
}

body.wptuts-hub--home .wth-home--paged .wth-home-latest {
	margin-top: 0.25rem;
	clear: both;
}

body.wptuts-hub--hub .wth-home-card,
body.wptuts-hub--hub .wth-home-card__link,
body.wptuts-hub--hub .wth-home-card__media,
body.wptuts-hub--hub .wth-home-card__body {
	float: none !important;
}

body.wptuts-hub--hub .wth-home-card__media img {
	max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Mobile / small screens — MUST stay after hub layout rules (cascade)
/* -------------------------------------------------------------------------- */

body.wptuts-hub {
	overflow-x: clip;
}

body.wptuts-hub .main-container,
body.wptuts-hub .menu-pusher,
body.wptuts-hub .main-wrapper,
body.wptuts-hub--hub .wth-home {
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 900px) {
	body.wptuts-hub--hub .wth-home-grid {
		grid-template-columns: 1fr !important;
	}

	body.wptuts-hub--home .wth-home-popular__strip {
		grid-template-columns: 1fr !important;
	}

	body.wptuts-hub .relatedPosts ul,
	body.wptuts-hub .relatedPosts ul.slides,
	body.wptuts-hub .wth-related__list {
		grid-template-columns: 1fr !important;
	}

	body.wptuts-hub .wth-related__list:has(> :only-child) {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 782px) {
	body.wptuts-hub--hub .wth-home {
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: 2.5rem;
	}

	/* Full-bleed hero (same breakout as desktop); body overflow-x: clip contains 100vw */
	body.wptuts-hub--home .wth-home-hero {
		position: relative;
		left: 50%;
		right: 50%;
		width: 100vw;
		max-width: 100vw;
		margin-left: -50vw;
		margin-right: -50vw;
		padding: 2rem 1.15rem 1.85rem;
		box-sizing: border-box;
	}

	body.wptuts-hub--home .wth-home-hero__inner {
		max-width: 100%;
		padding: 0;
		box-sizing: border-box;
	}

	body.wptuts-hub--home .wth-home-hero__lede {
		max-width: 100%;
		padding: 0 0.15rem;
		font-size: 1.05rem;
		line-height: 1.5;
		overflow-wrap: anywhere;
		word-wrap: break-word;
		hyphens: auto;
	}

	body.wptuts-hub--home .wth-home-hero__search,
	body.wptuts-hub--home .wth-home-paged-hero__search {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	body.wptuts-hub--home .wth-home-hero__search .wth-search,
	body.wptuts-hub--home .wth-home-hero__search form.searchform.wth-search,
	body.wptuts-hub .wth-search,
	body.wptuts-hub form.searchform.wth-search {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	body.wptuts-hub--home .wth-home-hero__search .wth-search .s,
	body.wptuts-hub--home .wth-home-hero__search .searchform .s,
	body.wptuts-hub .wth-search .s,
	body.wptuts-hub form.searchform.wth-search .s {
		flex: 1 1 0% !important;
		width: 0 !important; /* flex child: share row with button */
		min-width: 0 !important;
		max-width: none !important;
		box-sizing: border-box !important;
	}

	body.wptuts-hub--home .wth-home-hero__search .wth-search__btn,
	body.wptuts-hub--home .wth-home-hero__search .search-button,
	body.wptuts-hub .wth-search__btn,
	body.wptuts-hub .wth-search .search-button {
		flex: 0 0 48px !important;
		width: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
	}

	body.wptuts-hub--hub .wth-home-topics__list {
		gap: 0.4rem;
	}

	body.wptuts-hub--hub .wth-home-topics__list a {
		font-size: 0.8rem;
		padding: 0.32rem 0.65rem;
	}

	/* Single-row horizontal scroll — never stacks a tall topic cloud on phones */
	body.wptuts-hub--home .wth-home-topics--hero {
		margin-top: 0.85rem;
		max-width: 100%;
	}

	body.wptuts-hub--home .wth-home-topics--hero .wth-home-topics__label {
		text-align: left;
		padding: 0 0.1rem;
	}

	body.wptuts-hub--home .wth-home-topics--hero .wth-home-topics__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0.35rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding: 0.1rem 0.15rem 0.35rem;
		mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 1.25rem), transparent 100%);
	}

	body.wptuts-hub--home .wth-home-topics--hero .wth-home-topics__list li {
		flex: 0 0 auto;
	}

	body.wptuts-hub--hub .wth-home-card__body {
		padding: 1rem 1.05rem 1.15rem;
		min-width: 0;
	}

	body.wptuts-hub--hub .wth-home-card__title,
	body.wptuts-hub--hub .wth-home-card__excerpt,
	body.wptuts-hub--hub .wth-home-card__meta {
		overflow-wrap: anywhere;
		word-break: break-word;
		max-width: 100%;
	}

	body.wptuts-hub--hub .wth-home-card__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	body.wptuts-hub--singular {
		--wth-shell: min(100% - 1rem, 1120px);
	}

	body.wptuts-hub.single .entry-title,
	body.wptuts-hub.page .entry-title,
	body.wptuts-hub .wth-single__title,
	body.wptuts-hub .wth-page__title {
		font-size: clamp(1.35rem, 6.2vw, 1.75rem);
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	body.wptuts-hub .wth-page__hero,
	body.wptuts-hub .wth-single__hero,
	body.wptuts-hub .wth-single__body,
	body.wptuts-hub.single .post-inner,
	body.wptuts-hub .wth-page__content,
	body.wptuts-hub.page .single-page-content,
	body.wptuts-hub.single .single-box,
	body.wptuts-hub .relatedPosts,
	body.wptuts-hub .post-navigation,
	body.wptuts-hub #comments,
	body.wptuts-hub #respond {
		padding-left: 0.95rem;
		padding-right: 0.95rem;
		box-sizing: border-box;
	}

	body.wptuts-hub--home .wth-home-hero__search .wth-search .s,
	body.wptuts-hub--home .wth-home-hero__search .searchform .s,
	body.wptuts-hub--home .wth-home-hero__search .wth-search__btn,
	body.wptuts-hub--home .wth-home-hero__search .search-button {
		height: 48px !important;
	}

	body.wptuts-hub .post-navigation .nav-links {
		grid-template-columns: 1fr !important;
		gap: 0.75rem;
	}

	body.wptuts-hub .post-navigation .next-link-wrapper {
		text-align: left;
	}

	body.wptuts-hub .post-navigation a {
		font-size: 0.95rem;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	body.wptuts-hub .post-navigation .prev-link,
	body.wptuts-hub .post-navigation .next-link {
		padding: 0.85rem 0.9rem !important;
	}

	body.wptuts-hub .relatedPosts .related-content,
	body.wptuts-hub .wth-related__title {
		font-size: 0.95rem;
		line-height: 1.35;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	body.wptuts-hub .wth-author__bio {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	body.wptuts-hub.single .single-post-content,
	body.wptuts-hub .wth-single__body,
	body.wptuts-hub .wth-page__content {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Code blocks — smaller type, tighter chrome, swipe to scroll long lines */
	body.wptuts-hub.single .single-post-content pre,
	body.wptuts-hub .wth-single__body pre,
	body.wptuts-hub.single .single-post-content .crayon-syntax,
	body.wptuts-hub .wth-single .entry-content .crayon-syntax,
	body.wptuts-hub.page .single-page-content pre,
	body.wptuts-hub.page .single-page-content .crayon-syntax {
		max-width: 100%;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 0.75rem 0.85rem;
		font-size: 0.78rem;
		line-height: 1.45;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		box-sizing: border-box;
	}

	body.wptuts-hub.single .single-post-content pre.line-numbers,
	body.wptuts-hub .wth-single__body pre.line-numbers,
	body.wptuts-hub.page .single-page-content pre.line-numbers {
		padding-left: 3.2em;
	}

	body.wptuts-hub.single .single-post-content pre code,
	body.wptuts-hub .wth-single__body pre code,
	body.wptuts-hub.single .single-post-content .crayon-syntax .crayon-pre,
	body.wptuts-hub.single .single-post-content .crayon-syntax .crayon-code,
	body.wptuts-hub.single .single-post-content .crayon-syntax .crayon-plain {
		font-size: inherit;
		line-height: inherit;
		white-space: pre;
		word-break: normal;
		overflow-wrap: normal;
	}

	body.wptuts-hub.single .single-post-content .crayon-syntax,
	body.wptuts-hub .wth-single .entry-content .crayon-syntax {
		border-radius: var(--wth-radius-sm);
	}

	body.wptuts-hub.single .single-post-content .crayon-toolbar,
	body.wptuts-hub .wth-single .entry-content .crayon-toolbar {
		font-size: 0.7rem !important;
		min-height: 0 !important;
		padding: 0.25rem 0.45rem !important;
	}

	body.wptuts-hub.single .single-post-content .crayon-table .crayon-nums,
	body.wptuts-hub .wth-single .entry-content .crayon-table .crayon-nums {
		padding-left: 0.35rem !important;
		padding-right: 0.35rem !important;
		font-size: 0.7rem !important;
	}

	body.wptuts-hub.single .single-post-content code:not(pre code) {
		font-size: 0.82em;
		padding: 0.08em 0.3em;
		overflow-wrap: anywhere;
	}

	body.wptuts-hub .wth-footer__inner {
		width: min(100% - 1.5rem, var(--wth-max));
		padding-top: 1.75rem;
	}

	body.wptuts-hub--archive .wth-archive-hero__title,
	body.wptuts-hub--home .wth-home-paged-hero .wth-archive-hero__title {
		font-size: clamp(1.55rem, 7vw, 2.1rem);
		overflow-wrap: anywhere;
	}
}

@media (max-width: 420px) {
	body.wptuts-hub--hub .wth-home {
		padding-left: 0.85rem;
		padding-right: 0.85rem;
	}

	body.wptuts-hub--home .wth-home-hero {
		padding: 1.65rem 1rem 1.5rem;
	}

	body.wptuts-hub--home .wth-home-hero__mark {
		width: 72px;
		height: 72px;
		border-radius: 16px;
		margin-bottom: 0.9rem;
	}

	body.wptuts-hub .main-wrapper {
		padding-left: 0.65rem;
		padding-right: 0.65rem;
	}

	/* Keep home shell edge-to-edge so the hero breakout can reach the viewport */
	body.wptuts-hub--hub .wth-home-wrapper.main-wrapper {
		padding-left: 0;
		padding-right: 0;
	}
}