/*
Theme Name: ZetPulse Blog
Theme URI: https://blogs.zetpulse.com/
Author: ZetPulse
Author URI: https://zetpulse.com/
Description: A modern, gradient-accented blog theme for blogs.zetpulse.com. Built from the ZetPulse Claude Design system — featuring a hero carousel, category feeds, rich post detail pages with table of contents, author profiles, and a contact page with FAQ accordion.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zetpulse-blog
Tags: blog, news, two-columns, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--purple: #6c3ce9;
	--purple-dark: #4e2fc7;
	--pink: #ea4c89;
	--navy: #1d1b33;
	--muted: #6e6b85;
	--bg: #f5f3fc;
	--bgpink: #fdf1f6;
	--line: #eae6f7;
	--footer: #15132b;
	--footer-line: #2a2750;
	--footer-text: #9a97b5;
	--footer-dim: #787594;
	--footer-input: #232049;
	--white: #fff;

	--grad: linear-gradient(90deg, var(--purple), var(--pink));
	--grad-diag: linear-gradient(160deg, var(--purple), var(--pink));

	--font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--radius-sm: 10px;
	--radius: 14px;
	--radius-lg: 16px;
	--pill: 100px;

	--wrap: 1440px;
	--gutter: 60px;
	--header-h: 73px;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	background: var(--bg);
	color: var(--navy);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-head);
	margin: 0;
	color: var(--navy);
	line-height: 1.3;
}

a {
	color: var(--purple);
	text-decoration: none;
	transition: color 0.18s ease;
}

a:hover {
	color: var(--pink);
}

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

p {
	margin: 0 0 1em;
}

figure {
	margin: 0;
}

button {
	font-family: var(--font-body);
	cursor: pointer;
}

input,
textarea,
select {
	font-family: var(--font-body);
}

/* Accessibility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--white);
	color: var(--navy);
	padding: 12px 20px;
	border-radius: 0 0 var(--radius-sm) 0;
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid var(--purple);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.zp-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 40px var(--gutter);
}

.zp-wrap--flush {
	padding-top: 0;
	padding-bottom: 0;
}

.zp-wrap--narrow {
	max-width: 1200px;
}

.zp-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.zp-main {
	flex: 1;
}

/* ==========================================================================
   4. Buttons & pills
   ========================================================================== */
.zp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 0;
	border-radius: var(--pill);
	font-weight: 600;
	font-size: 14px;
	padding: 12px 26px;
	cursor: pointer;
	text-align: center;
	transition: opacity 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
}

.zp-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.zp-btn--grad {
	background: var(--grad);
	color: var(--white);
}

.zp-btn--grad:hover {
	color: var(--white);
}

.zp-btn--white {
	background: var(--white);
	color: var(--purple);
	font-weight: 700;
}

.zp-btn--white:hover {
	color: var(--purple-dark);
}

.zp-btn--outline {
	border: 1px solid var(--purple);
	color: var(--purple);
	background: transparent;
}

.zp-btn--outline:hover {
	background: var(--purple);
	color: var(--white);
}

.zp-btn--navy {
	background: var(--navy);
	color: var(--white);
}

.zp-btn--navy:hover {
	color: var(--white);
}

.zp-btn--sm {
	font-size: 13px;
	padding: 10px 22px;
}

/* Gradient text (brand lockup) */
.zp-gradient-text {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.zp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px var(--gutter);
	background: var(--white);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 100;
}

.zp-header__brand {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	flex-shrink: 0;
}

.zp-header__brand img {
	max-height: 40px;
	width: auto;
}

.zp-header__brand:hover {
	opacity: 0.85;
}

.zp-nav {
	display: flex;
	align-items: center;
	gap: 32px;
	font-weight: 500;
	font-size: 15px;
}

.zp-nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zp-nav a {
	color: var(--navy);
	position: relative;
}

.zp-nav a:hover {
	color: var(--purple);
}

/* Current page state — matches the purple/600 active item in the design */
.zp-nav .current-menu-item > a,
.zp-nav .current_page_item > a,
.zp-nav .current-menu-parent > a,
.zp-nav .current-post-ancestor > a,
.zp-nav .current-menu-ancestor > a,
.zp-nav .zp-nav__item--active > a,
.zp-nav a[aria-current="page"] {
	color: var(--purple);
	font-weight: 600;
}

/* Dropdowns (sub-menus) */
.zp-nav .sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	min-width: 190px;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 8px;
	box-shadow: 0 12px 32px rgba(29, 27, 51, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	z-index: 20;
}

.zp-nav li {
	position: relative;
}

.zp-nav li:hover > .sub-menu,
.zp-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.zp-nav .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
}

.zp-nav .sub-menu a:hover {
	background: var(--bg);
}

.zp-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.zp-header__search-toggle {
	background: none;
	border: 0;
	padding: 4px;
	display: flex;
	align-items: center;
	color: var(--navy);
	line-height: 0;
}

.zp-header__search-toggle:hover {
	color: var(--purple);
}

.zp-header__login {
	font-weight: 600;
	color: var(--navy);
	font-size: 14px;
}

.zp-header__login:hover {
	color: var(--purple);
}

/* Header search drawer */
.zp-header-search {
	display: none;
	padding: 0 var(--gutter) 18px;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: var(--header-h);
	z-index: 99;
}

.zp-header-search.is-open {
	display: block;
}

.zp-header-search .zp-searchform {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
}

/* Mobile toggle */
.zp-burger {
	display: none;
	background: none;
	border: 0;
	padding: 6px;
	flex-direction: column;
	gap: 5px;
}

.zp-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--navy);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.zp-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.zp-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.zp-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   6. Search form
   ========================================================================== */
.zp-searchform {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--pill);
	padding: 10px 18px;
	width: 280px;
	max-width: 100%;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.zp-searchform:focus-within {
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(108, 60, 233, 0.1);
}

.zp-searchform svg {
	flex-shrink: 0;
	color: var(--muted);
}

.zp-searchform input[type="search"] {
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 14px;
	color: var(--navy);
	width: 100%;
	padding: 0;
}

.zp-searchform input[type="search"]::placeholder {
	color: var(--muted);
}

.zp-searchform button {
	display: none;
}

/* --- Search suggestions (AJAX) --- */
.zp-search {
	position: relative;
	width: 280px;
	max-width: 100%;
}

.zp-header-search .zp-search,
.zp-page-head .zp-search {
	width: 280px;
}

.zp-header-search .zp-search {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
}

.zp-search .zp-searchform {
	width: 100%;
}

/* Spinner while a suggestion request is in flight */
.zp-search__spinner {
	display: none;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 2px solid var(--line);
	border-top-color: var(--purple);
	border-radius: var(--pill);
	animation: zp-spin 0.6s linear infinite;
}

.zp-search.is-searching .zp-search__spinner {
	display: block;
}

@keyframes zp-spin {
	to {
		transform: rotate(360deg);
	}
}

.zp-suggest {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 6px;
	box-shadow: 0 16px 40px rgba(29, 27, 51, 0.14);
	z-index: 120;
	max-height: 420px;
	overflow-y: auto;
}

.zp-suggest.is-open {
	display: block;
}

.zp-suggest__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
}

.zp-suggest__item:hover,
.zp-suggest__item.is-active {
	background: var(--bg);
}

.zp-suggest__thumb {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--line);
}

.zp-suggest__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zp-suggest__thumb--empty {
	background: var(--grad-diag);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
}

.zp-suggest__text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.zp-suggest__title {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--navy);
	line-height: 1.4;
}

.zp-suggest__title mark {
	background: var(--bgpink);
	color: var(--pink);
	padding: 0 2px;
	border-radius: 3px;
	font-weight: 600;
}

.zp-suggest__meta {
	font-size: 11.5px;
	color: var(--muted);
}

.zp-suggest__all {
	display: block;
	text-align: center;
	padding: 10px;
	margin-top: 4px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	font-weight: 600;
	color: var(--purple);
	border-radius: var(--radius-sm);
}

.zp-suggest__all:hover,
.zp-suggest__all.is-active {
	background: var(--bg);
}

.zp-suggest__empty {
	padding: 18px 12px;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
}

/* --- AJAX feed loading state --- */
.zp-feed {
	position: relative;
	transition: opacity 0.18s ease;
}

.zp-feed.is-loading [data-zp-results] {
	opacity: 0.45;
	pointer-events: none;
}

.zp-feed.is-loading::after {
	content: "";
	position: absolute;
	top: 120px;
	left: 50%;
	width: 30px;
	height: 30px;
	margin-left: -15px;
	border: 3px solid var(--line);
	border-top-color: var(--purple);
	border-radius: var(--pill);
	animation: zp-spin 0.7s linear infinite;
	z-index: 5;
}

/* ==========================================================================
   7. Page head (title + search)
   ========================================================================== */
.zp-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.zp-page-head--top {
	align-items: flex-start;
}

.zp-page-title {
	font-size: 34px;
}

.zp-page-desc {
	color: var(--muted);
	font-size: 15px;
	max-width: 560px;
	margin: 8px 0 0;
}

/* Breadcrumb */
.zp-crumbs {
	color: var(--muted);
	font-size: 13px;
	margin-bottom: 18px;
}

.zp-crumbs a {
	color: var(--muted);
}

.zp-crumbs a:hover {
	color: var(--purple);
}

.zp-crumbs__current {
	color: var(--navy);
}

.zp-crumbs__sep {
	margin: 0 4px;
}

/* ==========================================================================
   8. Media / image slots
   ========================================================================== */
.zp-media {
	position: relative;
	overflow: hidden;
	background: var(--line);
}

.zp-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.zp-card:hover .zp-media img,
.zp-featured:hover .zp-media img {
	transform: scale(1.04);
}

/* Placeholder shown when a post has no featured image */
.zp-media--empty {
	background: var(--grad-diag);
	display: flex;
	align-items: center;
	justify-content: center;
}

.zp-media--empty::after {
	content: attr(data-initial);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 32px;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 1px;
}

/* ==========================================================================
   9. Featured / hero carousel
   ========================================================================== */
.zp-hero {
	margin-bottom: 32px;
}

.zp-hero__track {
	position: relative;
}

.zp-hero__slide {
	display: none;
}

.zp-hero__slide.is-active {
	display: block;
	animation: zp-fade 0.35s ease;
}

@keyframes zp-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.zp-featured {
	display: flex;
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--line);
	margin-bottom: 16px;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.zp-featured:hover {
	border-color: #d9d2f3;
	box-shadow: 0 14px 40px rgba(29, 27, 51, 0.08);
}

.zp-featured .zp-media {
	width: 420px;
	height: 260px;
	flex-shrink: 0;
}

.zp-featured__body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-width: 0;
}

.zp-featured__title {
	font-size: 26px;
	color: var(--navy);
	line-height: 1.3;
}

.zp-featured:hover .zp-featured__title {
	color: var(--purple);
}

.zp-featured__excerpt {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* Badge (category pill) */
.zp-badge {
	background: var(--bgpink);
	color: var(--pink);
	font-weight: 600;
	font-size: 12px;
	padding: 5px 14px;
	border-radius: var(--pill);
	width: fit-content;
	display: inline-block;
}

.zp-meta {
	color: var(--muted);
	font-size: 13px;
}

/* Carousel dots */
.zp-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
}

.zp-dot {
	width: 6px;
	height: 6px;
	border-radius: 4px;
	background: var(--line);
	border: 0;
	padding: 0;
	display: inline-block;
	transition: width 0.25s ease, background 0.25s ease;
}

.zp-dot.is-active {
	width: 20px;
	background: var(--purple);
}

.zp-dot:hover {
	background: var(--pink);
}

/* ==========================================================================
   10. Category tabs
   ========================================================================== */
.zp-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.zp-tab {
	background: var(--white);
	border: 1px solid var(--line);
	color: var(--navy);
	font-size: 13px;
	padding: 8px 18px;
	border-radius: var(--pill);
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.zp-tab:hover {
	border-color: var(--purple);
	color: var(--purple);
}

.zp-tab.is-active {
	background: var(--navy);
	color: var(--white);
	font-weight: 600;
	border-color: var(--navy);
}

.zp-tab.is-active:hover {
	color: var(--white);
}

/* ==========================================================================
   11. Cards & grids
   ========================================================================== */
.zp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.zp-grid--mb {
	margin-bottom: 40px;
}

.zp-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.zp-card:hover {
	border-color: #d9d2f3;
	box-shadow: 0 14px 34px rgba(29, 27, 51, 0.08);
	transform: translateY(-2px);
}

.zp-card .zp-media {
	height: 170px;
	flex-shrink: 0;
}

.zp-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.zp-card__cat {
	color: var(--pink);
	font-weight: 600;
	font-size: 12px;
}

.zp-card__title {
	font-size: 16px;
	color: var(--navy);
	margin: 8px 0;
}

.zp-card:hover .zp-card__title {
	color: var(--purple);
}

.zp-card__excerpt {
	color: var(--muted);
	font-size: 13px;
	margin: 0 0 10px;
}

.zp-card__meta {
	color: var(--muted);
	font-size: 12px;
	margin-top: auto;
}

/* Compact card — used in the homepage grouped sections */
.zp-card--compact .zp-media {
	height: 150px;
}

.zp-card--compact .zp-card__body {
	padding: 16px;
}

.zp-card--compact .zp-card__title {
	font-size: 15px;
	margin: 0 0 6px;
}

/* Author card variant */
.zp-card--author .zp-media {
	height: 160px;
}

.zp-card--author .zp-card__body {
	padding: 16px;
}

.zp-card--author .zp-card__title {
	font-size: 15px;
	margin: 8px 0;
}

/* ==========================================================================
   12. Grouped section
   ========================================================================== */
.zp-section {
	margin-bottom: 36px;
}

.zp-section__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	gap: 16px;
}

.zp-section__title {
	font-size: 20px;
}

.zp-viewall {
	color: var(--purple);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

.zp-center {
	text-align: center;
	margin-bottom: 48px;
}

/* ==========================================================================
   13. Promo banner
   ========================================================================== */
.zp-banner {
	display: flex;
	margin: 0 0 40px;
	padding: 32px 40px;
	border-radius: var(--radius-lg);
	background: var(--grad);
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.zp-banner:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(108, 60, 233, 0.28);
}

.zp-banner__title {
	color: var(--white);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 22px;
	margin-bottom: 6px;
}

.zp-banner__text {
	color: #f0ebff;
	font-size: 14px;
}

/* ==========================================================================
   14. Pagination
   ========================================================================== */
.zp-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-bottom: 48px;
	flex-wrap: wrap;
}

.zp-pagination .page-numbers {
	width: 36px;
	height: 36px;
	border-radius: var(--pill);
	background: var(--white);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--navy);
	font-size: 14px;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.zp-pagination .page-numbers:hover {
	border-color: var(--purple);
	color: var(--purple);
}

.zp-pagination .page-numbers.current {
	background: var(--navy);
	color: var(--white);
	font-weight: 600;
	border-color: var(--navy);
}

.zp-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--muted);
}

.zp-pagination .prev,
.zp-pagination .next {
	color: var(--muted);
}

/* ==========================================================================
   15. Post detail
   ========================================================================== */
.zp-post {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.zp-post__main {
	flex: 1;
	min-width: 0;
	max-width: 800px;
}

.zp-post__title {
	font-size: 32px;
	line-height: 1.3;
	margin-bottom: 14px;
}

.zp-post__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.zp-post__meta .zp-badge {
	padding: 4px 12px;
}

.zp-post__actions {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
	position: relative;
}

.zp-action {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--pill);
	padding: 8px 16px;
	font-size: 13px;
	color: var(--navy);
	font-weight: 600;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.zp-action:hover {
	border-color: var(--purple);
	color: var(--purple);
}

.zp-action.is-liked {
	border-color: var(--pink);
	color: var(--pink);
	background: var(--bgpink);
}

.zp-action[disabled] {
	cursor: default;
	opacity: 0.75;
}

/* Share menu */
.zp-share {
	position: relative;
}

.zp-share__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 8px;
	display: none;
	flex-direction: column;
	min-width: 180px;
	box-shadow: 0 12px 32px rgba(29, 27, 51, 0.12);
	z-index: 30;
}

.zp-share__menu.is-open {
	display: flex;
}

.zp-share__menu a,
.zp-share__menu button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 12px;
	border: 0;
	background: none;
	border-radius: var(--radius-sm);
	font-size: 13px;
	color: var(--navy);
	font-weight: 500;
}

.zp-share__menu a:hover,
.zp-share__menu button:hover {
	background: var(--bg);
	color: var(--purple);
}

.zp-post__hero {
	height: 340px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 28px;
}

/* Quick summary box */
.zp-summary {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px 24px;
	margin-bottom: 28px;
}

.zp-summary__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.zp-summary__icon {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: linear-gradient(135deg, var(--purple), var(--pink));
	display: inline-block;
	flex-shrink: 0;
}

.zp-summary__label {
	font-weight: 600;
	color: var(--navy);
	font-size: 14px;
}

.zp-summary p {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* Article prose */
.zp-prose {
	color: var(--navy);
	font-size: 15px;
	line-height: 1.8;
}

.zp-prose > *:first-child {
	margin-top: 0;
}

.zp-prose h2 {
	font-size: 22px;
	margin: 32px 0 12px;
	scroll-margin-top: 100px;
}

.zp-prose h3 {
	font-size: 18px;
	margin: 26px 0 10px;
	scroll-margin-top: 100px;
}

.zp-prose h4 {
	font-size: 16px;
	margin: 22px 0 8px;
}

.zp-prose p {
	margin: 0 0 20px;
}

.zp-prose ul,
.zp-prose ol {
	margin: 0 0 24px;
	padding-left: 20px;
	line-height: 2;
}

.zp-prose li::marker {
	color: var(--purple);
}

.zp-prose img,
.zp-prose figure {
	border-radius: var(--radius);
	margin: 24px 0;
	overflow: hidden;
}

.zp-prose figcaption {
	color: var(--muted);
	font-size: 13px;
	text-align: center;
	padding-top: 8px;
}

.zp-prose blockquote {
	margin: 24px 0;
	padding: 18px 24px;
	border-left: 3px solid var(--purple);
	background: var(--white);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--muted);
	font-style: italic;
}

.zp-prose blockquote p:last-child {
	margin-bottom: 0;
}

.zp-prose code {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 2px 6px;
	font-size: 13px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.zp-prose pre {
	background: var(--navy);
	color: #e7e4f7;
	padding: 20px;
	border-radius: var(--radius);
	overflow-x: auto;
	margin: 0 0 24px;
}

.zp-prose pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}

/* Tables — styled to match the payout table in the design */
.zp-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0 0 28px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.zp-prose thead tr {
	background: var(--bg);
}

.zp-prose th {
	text-align: left;
	padding: 14px 18px;
	color: var(--navy);
	font-weight: 600;
	font-family: var(--font-body);
}

.zp-prose td {
	padding: 14px 18px;
	color: var(--muted);
	border-top: 1px solid var(--line);
}

.zp-prose td:first-child {
	color: var(--navy);
}

/* Table wrapper for horizontal scroll on small screens */
.zp-table-wrap {
	overflow-x: auto;
	margin-bottom: 28px;
}

.zp-table-wrap table {
	margin-bottom: 0;
}

/* Further reading */
.zp-further {
	margin-bottom: 40px;
}

.zp-further h2 {
	font-size: 20px;
	margin-bottom: 12px;
}

.zp-further ul {
	color: var(--purple);
	font-size: 14px;
	line-height: 2;
	padding-left: 20px;
	margin: 0;
}

/* Post navigation */
.zp-postnav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.zp-postnav__link {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 20px;
	flex: 1;
	min-width: 220px;
	transition: border-color 0.18s ease;
}

.zp-postnav__link:hover {
	border-color: var(--purple);
}

.zp-postnav__label {
	color: var(--muted);
	font-size: 12px;
	display: block;
	margin-bottom: 4px;
}

.zp-postnav__title {
	color: var(--navy);
	font-weight: 600;
	font-size: 14px;
	font-family: var(--font-head);
}

.zp-postnav__link--next {
	text-align: right;
}

/* ==========================================================================
   16. Sidebar
   ========================================================================== */
.zp-sidebar {
	width: 320px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 96px;
}

.zp-widget {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
}

.zp-widget__title {
	font-weight: 600;
	color: var(--navy);
	font-size: 14px;
	margin-bottom: 14px;
	font-family: var(--font-head);
}

/* Promo card */
.zp-promo {
	background: var(--grad-diag);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center;
}

.zp-promo__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.2);
	margin: 0 auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.zp-promo__text {
	color: var(--white);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 16px;
	line-height: 1.5;
}

/* Table of contents */
.zp-toc__list {
	display: flex;
	flex-direction: column;
	gap: 11px;
	border-left: 2px solid var(--line);
	padding-left: 14px;
}

.zp-toc__list a {
	color: var(--navy);
	font-size: 13px;
	line-height: 1.4;
}

.zp-toc__list a:hover {
	color: var(--purple);
}

.zp-toc__list a.is-active {
	color: var(--purple);
	font-weight: 600;
}

.zp-toc__list a.zp-toc__sub {
	padding-left: 12px;
	font-size: 12.5px;
	color: var(--muted);
}

/* Post list (trending / popular) */
.zp-postlist {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zp-postlist__item {
	display: flex;
	gap: 10px;
	align-items: center;
}

.zp-postlist__item .zp-media {
	width: 52px;
	height: 52px;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.zp-postlist__item .zp-media--empty::after {
	font-size: 16px;
}

.zp-postlist__title {
	font-size: 13px;
	color: var(--navy);
	line-height: 1.4;
}

.zp-postlist__item:hover .zp-postlist__title {
	color: var(--purple);
}

/* Category list widget */
.zp-catlist {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 13px;
}

.zp-catlist__item {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
}

.zp-catlist__item a {
	color: var(--navy);
}

.zp-catlist__item a:hover {
	color: var(--purple);
}

/* Newsletter sidebar card */
.zp-nlcard {
	background: var(--grad-diag);
	border-radius: var(--radius);
	padding: 22px;
}

.zp-nlcard__title {
	color: var(--white);
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 8px;
}

.zp-nlcard p {
	color: #f0ebff;
	font-size: 12px;
	margin: 0 0 14px;
}

/* ==========================================================================
   17. Author profile
   ========================================================================== */
.zp-author {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 36px;
	display: flex;
	align-items: center;
	gap: 28px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.zp-author__avatar {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: var(--pill);
	overflow: hidden;
}

.zp-author__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--pill);
}

.zp-author__info {
	flex: 1;
	min-width: 240px;
}

.zp-author__name {
	font-size: 24px;
	margin-bottom: 6px;
}

.zp-author__role {
	color: var(--purple);
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 12px;
}

.zp-author__bio {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 14px;
	max-width: 600px;
}

.zp-socials {
	display: flex;
	gap: 14px;
}

.zp-social {
	width: 32px;
	height: 32px;
	border-radius: var(--pill);
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--navy);
	transition: background 0.18s ease, color 0.18s ease;
}

.zp-social:hover {
	background: var(--purple);
	color: var(--white);
}

.zp-author__heading {
	margin-bottom: 20px;
}

.zp-author__stats {
	display: flex;
	gap: 28px;
	flex-shrink: 0;
}

.zp-stat {
	text-align: center;
}

.zp-stat__num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 20px;
	color: var(--navy);
}

.zp-stat__label {
	color: var(--muted);
	font-size: 12px;
}

/* Author box on single posts */
.zp-authorbox {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	display: flex;
	gap: 18px;
	align-items: center;
	margin-bottom: 32px;
}

.zp-authorbox img {
	width: 64px;
	height: 64px;
	border-radius: var(--pill);
	flex-shrink: 0;
}

.zp-authorbox__name {
	font-size: 16px;
	font-family: var(--font-head);
	font-weight: 600;
	margin-bottom: 4px;
}

.zp-authorbox__bio {
	color: var(--muted);
	font-size: 13px;
	margin: 0;
	line-height: 1.6;
}

/* ==========================================================================
   18. Contact page
   ========================================================================== */
.zp-contact-hero {
	padding: 56px var(--gutter) 20px;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}

.zp-eyebrow {
	color: var(--purple);
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 10px;
}

.zp-contact-hero h1 {
	font-size: 36px;
	margin-bottom: 12px;
}

.zp-contact-hero p {
	color: var(--muted);
	font-size: 15px;
	max-width: 560px;
	margin: 0 auto;
}

.zp-contact {
	padding: 20px var(--gutter) 56px;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.zp-contact__form {
	flex: 1.4;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 36px;
	min-width: 0;
}

.zp-contact__aside {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Form fields */
.zp-field {
	margin-bottom: 18px;
}

.zp-field__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.zp-field__row .zp-field {
	margin-bottom: 0;
}

.zp-label {
	display: block;
	color: var(--navy);
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 8px;
}

.zp-input,
.zp-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	font-size: 14px;
	color: var(--navy);
	outline: none;
	background: var(--white);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.zp-input:focus,
.zp-textarea:focus {
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(108, 60, 233, 0.1);
}

.zp-input::placeholder,
.zp-textarea::placeholder {
	color: var(--muted);
}

.zp-textarea {
	resize: vertical;
	min-height: 140px;
}

.zp-field--error .zp-input,
.zp-field--error .zp-textarea {
	border-color: var(--pink);
}

.zp-error {
	color: var(--pink);
	font-size: 12px;
	margin-top: 6px;
	display: block;
}

/* Honeypot */
.zp-hp {
	position: absolute !important;
	left: -9999px;
}

/* Notices */
.zp-notice {
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	font-size: 14px;
	margin-bottom: 20px;
}

.zp-notice--success {
	background: #eafaf1;
	border: 1px solid #b7ebd0;
	color: #1a7a4c;
}

.zp-notice--error {
	background: var(--bgpink);
	border: 1px solid #f7cede;
	color: #c02b64;
}

/* Contact info cards */
.zp-infocard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.zp-infocard__icon {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.zp-infocard__icon--pink {
	background: var(--bgpink);
	color: var(--pink);
}

.zp-infocard__icon--purple {
	background: var(--bg);
	color: var(--purple);
}

.zp-infocard__label {
	font-weight: 600;
	color: var(--navy);
	font-size: 14px;
	margin-bottom: 4px;
}

.zp-infocard__value {
	color: var(--muted);
	font-size: 13px;
}

.zp-infocard__value a {
	color: var(--muted);
}

.zp-infocard__value a:hover {
	color: var(--purple);
}

/* Follow card */
.zp-follow {
	background: var(--navy);
	border-radius: var(--radius);
	padding: 22px;
}

.zp-follow__title {
	color: var(--white);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 10px;
}

.zp-follow .zp-socials {
	gap: 12px;
}

.zp-follow .zp-social {
	background: var(--footer-line);
	color: var(--white);
}

.zp-follow .zp-social:hover {
	background: var(--purple);
}

/* FAQ accordion */
.zp-faq {
	padding: 20px var(--gutter) 56px;
	max-width: 900px;
	margin: 0 auto;
}

.zp-faq__head {
	text-align: center;
	margin-bottom: 32px;
}

.zp-faq__head h2 {
	font-size: 28px;
}

.zp-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.zp-faq__item {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.zp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	width: 100%;
	background: none;
	border: 0;
	text-align: left;
	color: var(--navy);
	font-weight: 600;
	font-size: 15px;
	font-family: var(--font-body);
}

.zp-faq__q:hover {
	color: var(--purple);
}

.zp-faq__sym {
	width: 26px;
	height: 26px;
	border-radius: var(--pill);
	background: var(--bgpink);
	color: var(--pink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	line-height: 1;
}

.zp-faq__a {
	padding: 0 22px 20px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
	display: none;
}

.zp-faq__item.is-open .zp-faq__a {
	display: block;
}

/* ==========================================================================
   18b. Authors index / Categories index / About
   ========================================================================== */

/* --- Author cards --- */
.zp-authorcard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px 22px 22px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.zp-authorcard:hover {
	border-color: #d9d2f3;
	box-shadow: 0 14px 34px rgba(29, 27, 51, 0.08);
	transform: translateY(-2px);
}

.zp-authorcard__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.zp-authorcard__avatar {
	width: 88px;
	height: 88px;
	border-radius: var(--pill);
	overflow: hidden;
	margin-bottom: 14px;
	background: var(--bg);
	padding: 3px;
	background-image: var(--grad);
}

.zp-authorcard__avatar img {
	width: 100%;
	height: 100%;
	border-radius: var(--pill);
	object-fit: cover;
	border: 3px solid var(--white);
}

.zp-authorcard__name {
	font-size: 17px;
	color: var(--navy);
	margin-bottom: 4px;
}

.zp-authorcard:hover .zp-authorcard__name {
	color: var(--purple);
}

.zp-authorcard__role {
	color: var(--purple);
	font-weight: 600;
	font-size: 12px;
	margin-bottom: 10px;
}

.zp-authorcard__bio {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 12px;
}

.zp-authorcard__count {
	display: inline-block;
	background: var(--bgpink);
	color: var(--pink);
	font-weight: 600;
	font-size: 12px;
	padding: 5px 14px;
	border-radius: var(--pill);
	margin-bottom: 14px;
}

.zp-authorcard .zp-socials {
	justify-content: center;
	margin-top: auto;
}

/* --- Category cards --- */
.zp-catcard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.zp-catcard:hover {
	border-color: #d9d2f3;
	box-shadow: 0 14px 34px rgba(29, 27, 51, 0.08);
	transform: translateY(-2px);
}

.zp-catcard__art {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.zp-catcard__initial {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 36px;
	color: rgba(255, 255, 255, 0.85);
}

.zp-catcard__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.zp-catcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.zp-catcard__name {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 16px;
	color: var(--navy);
}

.zp-catcard:hover .zp-catcard__name {
	color: var(--purple);
}

.zp-catcard__count {
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}

.zp-catcard__desc {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
}

/* --- About: stats row --- */
.zp-statsrow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px;
	margin-bottom: 40px;
}

.zp-statsrow__item {
	text-align: center;
}

.zp-statsrow__num {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.2;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 4px;
}

.zp-statsrow__label {
	color: var(--muted);
	font-size: 13px;
}

/* --- About: values --- */
.zp-values__heading {
	font-size: 26px;
}

.zp-valuecard {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px 22px;
}

.zp-valuecard__icon {
	width: 42px;
	height: 42px;
	border-radius: var(--radius-sm);
	background: var(--grad-diag);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-bottom: 14px;
}

.zp-valuecard__title {
	font-size: 16px;
	color: var(--navy);
	margin-bottom: 8px;
}

.zp-valuecard__text {
	color: var(--muted);
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}

/* ==========================================================================
   19. Comments
   ========================================================================== */
.zp-comments {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
	margin-bottom: 40px;
}

.zp-comments__title {
	font-size: 18px;
	margin-bottom: 20px;
}

.zp-comments .comment-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.zp-comments .comment-list ul.children {
	list-style: none;
	margin: 16px 0 0 32px;
	padding: 0;
}

.zp-comments .comment-body {
	border-bottom: 1px solid var(--line);
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.zp-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.zp-comments .comment-author img {
	border-radius: var(--pill);
}

.zp-comments .comment-author .fn {
	font-weight: 600;
	color: var(--navy);
	font-style: normal;
	font-size: 14px;
}

.zp-comments .comment-metadata {
	color: var(--muted);
	font-size: 12px;
	margin-bottom: 8px;
}

.zp-comments .comment-metadata a {
	color: var(--muted);
}

.zp-comments .comment-content {
	font-size: 14px;
	color: var(--navy);
	line-height: 1.7;
}

.zp-comments .reply a {
	font-size: 13px;
	font-weight: 600;
}

.zp-comments .comment-respond {
	border-top: 1px solid var(--line);
	padding-top: 24px;
}

.zp-comments .comment-reply-title {
	font-size: 16px;
	margin-bottom: 16px;
}

.zp-comments .comment-form label {
	display: block;
	color: var(--navy);
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 8px;
}

.zp-comments .comment-form input[type="text"],
.zp-comments .comment-form input[type="email"],
.zp-comments .comment-form input[type="url"],
.zp-comments .comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	font-size: 14px;
	color: var(--navy);
	outline: none;
	margin-bottom: 16px;
}

.zp-comments .comment-form input:focus,
.zp-comments .comment-form textarea:focus {
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(108, 60, 233, 0.1);
}

.zp-comments .comment-form .submit {
	background: var(--grad);
	color: var(--white);
	border: 0;
	border-radius: var(--pill);
	font-weight: 600;
	font-size: 14px;
	padding: 13px 32px;
	cursor: pointer;
}

.zp-comments .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 8px;
}

.zp-comments .comment-form-cookies-consent label {
	margin-bottom: 0;
	font-weight: 400;
	color: var(--muted);
}

.zp-comments .comment-notes,
.zp-comments .logged-in-as {
	color: var(--muted);
	font-size: 13px;
	margin-bottom: 16px;
}

/* ==========================================================================
   20. Footer
   ========================================================================== */
.zp-footer {
	background: var(--footer);
	padding: 48px var(--gutter) 24px;
	margin-top: auto;
}

.zp-footer__inner {
	max-width: var(--wrap);
	margin: 0 auto;
}

.zp-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	margin-bottom: 32px;
}

.zp-footer__brand {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 12px;
	display: inline-block;
}

.zp-footer__about {
	color: var(--footer-text);
	font-size: 13px;
	line-height: 1.6;
	max-width: 280px;
	margin: 0;
}

.zp-footer__title {
	color: var(--white);
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 14px;
	font-family: var(--font-head);
}

.zp-footer__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.zp-footer__links a:hover {
	color: var(--white);
}

.zp-footer p {
	color: var(--footer-text);
	font-size: 13px;
	margin: 0 0 12px;
}

/* Footer newsletter */
.zp-newsletter {
	display: flex;
	gap: 8px;
}

.zp-newsletter input[type="email"] {
	background: var(--footer-input);
	border: 1px solid transparent;
	border-radius: var(--pill);
	padding: 10px 16px;
	color: var(--white);
	font-size: 13px;
	flex: 1;
	min-width: 0;
	outline: none;
}

.zp-newsletter input[type="email"]::placeholder {
	color: var(--footer-text);
}

.zp-newsletter input[type="email"]:focus {
	border-color: var(--purple);
}

.zp-newsletter button {
	background: var(--grad);
	border: 0;
	border-radius: var(--pill);
	padding: 10px 18px;
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
}

.zp-newsletter button:hover {
	opacity: 0.9;
}

.zp-newsletter__msg {
	color: var(--footer-text);
	font-size: 12px;
	margin-top: 8px;
	display: block;
}

.zp-footer__bottom {
	border-top: 1px solid var(--footer-line);
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	color: var(--footer-dim);
	font-size: 12px;
	gap: 16px;
	flex-wrap: wrap;
}

.zp-footer__legal {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zp-footer__legal a {
	color: var(--footer-dim);
}

.zp-footer__legal a:hover {
	color: var(--white);
}

/* ==========================================================================
   21. 404 / empty states
   ========================================================================== */
.zp-empty {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 56px 40px;
	text-align: center;
	margin-bottom: 40px;
}

.zp-empty__code {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 72px;
	line-height: 1;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 12px;
}

.zp-empty__title {
	font-size: 24px;
	margin-bottom: 10px;
}

.zp-empty p {
	color: var(--muted);
	font-size: 15px;
	margin: 0 auto 24px;
	max-width: 440px;
}

.zp-empty .zp-searchform {
	margin: 0 auto 24px;
}

/* Page (static) */
.zp-page {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 40px;
	margin-bottom: 40px;
}

.zp-page__title {
	font-size: 32px;
	margin-bottom: 20px;
}

/* WordPress core alignment classes */
.alignleft {
	float: left;
	margin: 0 20px 20px 0;
}

.alignright {
	float: right;
	margin: 0 0 20px 20px;
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: 1100px;
}

.alignfull {
	max-width: 100%;
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* Required by the WordPress theme check. */
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	color: var(--muted);
	font-size: 13px;
	text-align: center;
}

/* ==========================================================================
   22. Responsive
   ========================================================================== */
@media (max-width: 1200px) {
	:root {
		--gutter: 32px;
	}

	.zp-nav ul {
		gap: 22px;
	}

	.zp-post {
		gap: 28px;
	}

	.zp-sidebar {
		width: 280px;
	}
}

@media (max-width: 1024px) {
	.zp-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.zp-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.zp-statsrow {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Sidebar drops below the article */
	.zp-post {
		flex-direction: column;
	}

	.zp-post__main {
		max-width: 100%;
		width: 100%;
	}

	.zp-sidebar {
		width: 100%;
		position: static;
	}

	.zp-contact {
		flex-direction: column;
	}

	.zp-contact__form,
	.zp-contact__aside {
		width: 100%;
	}
}

@media (max-width: 880px) {
	:root {
		--gutter: 20px;
	}

	/* Mobile navigation */
	.zp-burger {
		display: flex;
	}

	.zp-header {
		flex-wrap: wrap;
	}

	.zp-nav {
		display: none;
		order: 3;
		width: 100%;
		padding-top: 16px;
		border-top: 1px solid var(--line);
		margin-top: 16px;
	}

	.zp-nav.is-open {
		display: block;
	}

	.zp-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.zp-nav a {
		display: block;
		padding: 10px 4px;
	}

	.zp-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--line);
		border-radius: 0;
		padding: 0 0 0 12px;
		margin-left: 8px;
	}

	.zp-header__login {
		display: none;
	}

	/* Featured card stacks */
	.zp-featured {
		flex-direction: column;
	}

	.zp-featured .zp-media {
		width: 100%;
		height: 220px;
	}

	.zp-featured__body {
		padding: 24px;
	}

	.zp-featured__title {
		font-size: 22px;
	}

	.zp-page-head {
		flex-direction: column;
		align-items: stretch;
	}

	.zp-page-title {
		font-size: 28px;
	}

	.zp-searchform,
	.zp-search,
	.zp-page-head .zp-search {
		width: 100%;
	}

	.zp-post__title {
		font-size: 26px;
	}

	.zp-post__hero {
		height: 220px;
	}

	.zp-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 28px 24px;
	}

	.zp-contact-hero h1 {
		font-size: 28px;
	}

	.zp-author {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 28px;
	}

	.zp-author__stats {
		width: 100%;
		justify-content: flex-start;
	}

	.zp-field__row {
		grid-template-columns: 1fr;
	}

	.zp-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 640px) {
	.zp-grid {
		grid-template-columns: 1fr;
	}

	.zp-footer__grid {
		grid-template-columns: 1fr;
	}

	.zp-statsrow {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 24px;
	}

	.zp-values__heading {
		font-size: 22px;
	}

	.zp-wrap {
		padding: 24px var(--gutter);
	}

	.zp-contact__form {
		padding: 24px;
	}

	.zp-comments {
		padding: 20px;
	}

	.zp-empty__code {
		font-size: 56px;
	}

	.zp-postnav {
		flex-direction: column;
	}

	.zp-postnav__link--next {
		text-align: left;
	}

	.zp-authorbox {
		flex-direction: column;
		text-align: center;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print */
@media print {
	.zp-header,
	.zp-footer,
	.zp-sidebar,
	.zp-banner,
	.zp-post__actions,
	.zp-comments {
		display: none !important;
	}
}