/**
 * EyeQBoost — base styles.
 *
 * Global rules, the five registered block styles, header, footer and
 * blog/archive card grid. Mobile-first. Tokens only: every colour, font,
 * size, spacing, radius and shadow comes from theme.json presets.
 * Loaded on the front end and as an editor style.
 *
 * @package eyeqboost
 */

/* -------------------------------------------------------------------------
 * 1. Global
 * ---------------------------------------------------------------------- */

html {
	scroll-padding-top: 7rem; /* keeps anchored headings clear of the sticky header */
}

:where(img, video) {
	max-width: 100%;
	height: auto;
}

:where(h1, h2, h3, h4, h5, h6, .wp-block-post-title) {
	overflow-wrap: break-word;
}

/* Header, main and footer sit flush: heroes start directly under the header. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Visible, consistent keyboard focus. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--purple);
	outline-offset: 3px;
}

/* Smooth hover feedback on buttons. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover {
		transform: translateY(-1px);
	}
}

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

/* -------------------------------------------------------------------------
 * 2. Block styles (registered in functions.php)
 * ---------------------------------------------------------------------- */

/* core/group → Card */
.wp-block-group.is-style-eqb-card {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--50);
}

/* core/button → Ghost */
.wp-block-button.is-style-eqb-ghost .wp-block-button__link {
	background-color: transparent;
	color: inherit;
	border: 2px solid currentColor;
	padding: calc(0.85em - 2px) calc(1.6em - 2px);
}

.wp-block-button.is-style-eqb-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-eqb-ghost .wp-block-button__link:focus-visible {
	background-color: transparent;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
}

/* core/image → Blob */
.wp-block-image.is-style-eqb-blob img {
	border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
	overflow: hidden;
	object-fit: cover;
}

/* core/paragraph → Eyebrow (also reused on post-terms in templates) */
.is-style-eqb-eyebrow {
	/* Darkened purple keeps small text AA on the tinted section backgrounds. */
	color: var(--wp--preset--color--purple);
	color: color-mix(in srgb, var(--wp--preset--color--purple) 78%, var(--wp--preset--color--ink));
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.is-style-eqb-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.is-style-eqb-eyebrow a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Eyebrows sit close to the heading they introduce. */
:is(.is-layout-flow, .is-layout-constrained) > .is-style-eqb-eyebrow + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* core/heading → Gradient text (solid purple where background-clip:text is unsupported) */
.is-style-eqb-gradient-text {
	color: var(--wp--preset--color--purple);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.is-style-eqb-gradient-text {
		background-image: var(--wp--preset--gradient--brand);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* -------------------------------------------------------------------------
 * 3. Header
 * ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Below 601px the admin bar scrolls away, so only offset above that. */
@media (min-width: 601px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 0px);
	}
}

.eqb-site-header {
	position: relative;
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Thin brand-gradient accent line along the bottom edge. */
.eqb-site-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3px;
	background: var(--wp--preset--gradient--brand);
	pointer-events: none;
}

.eqb-site-header__inner {
	row-gap: var(--wp--preset--spacing--30);
}

.eqb-site-header__brand {
	min-width: 0;
}

.eqb-site-header .wp-block-site-logo img {
	height: auto;
}

.eqb-site-header .wp-block-site-title {
	line-height: 1.1;
}

.eqb-site-header .wp-block-site-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.eqb-site-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--purple);
}

.eqb-site-header .wp-block-navigation {
	margin-inline-start: auto;
}

.eqb-site-header .wp-block-navigation-item__content {
	text-decoration: none;
}

.eqb-site-header .wp-block-navigation-item__content:hover,
.eqb-site-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--purple);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.eqb-site-header .wp-block-navigation__responsive-container-open,
.eqb-site-header .wp-block-navigation__responsive-container-close {
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--small);
}

/* Overlay (mobile/tablet) menu: larger, roomier links. */
.eqb-site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}

.eqb-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}

.eqb-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

/*
 * Programs submenu inside the overlay: always expanded (core hides the
 * toggle there), indented under its parent with a tinted guide line.
 * The overlay list is start-aligned (the inline menu stays right-aligned)
 * so the indent reads as hierarchy. Selectors outrank core's overlay rules.
 */
.eqb-site-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.eqb-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 0 0 0 var(--wp--preset--spacing--40);
	border: 0;
	border-inline-start: 2px solid var(--wp--preset--color--purple-tint);
	background-color: transparent;
	color: inherit;
	box-shadow: none;
}

.eqb-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

/*
 * Programs submenu on the inline (desktop) menu: a dropdown card.
 * Opens on hover; the arrow toggle opens it from the keyboard.
 * Scoped to :not(.is-menu-open) so it never styles the overlay, and
 * specific enough to beat core's hover/aria-expanded min-width rules.
 */
.eqb-site-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container {
	min-width: 14rem;
	padding: var(--wp--preset--spacing--20);
	border: 0;
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--soft);
}

.eqb-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.eqb-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--ink);
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Ink on purple-tint keeps hover/focus well above AA. */
.eqb-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.eqb-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--purple-tint);
	color: var(--wp--preset--color--ink);
}

/* Arrow toggle next to "Programs": follows the link colour, clear focus ring. */
.eqb-site-header .wp-block-navigation__submenu-icon {
	color: inherit;
	border-radius: var(--wp--custom--radius--small);
}

.eqb-site-header .has-child:hover > .wp-block-navigation__submenu-icon,
.eqb-site-header .wp-block-navigation__submenu-icon[aria-expanded="true"] {
	color: var(--wp--preset--color--purple);
}

/*
 * Current page (classes added in inc/navigation.php): text colour only, in
 * the inline menu and the overlay. Darkened purple keeps small text AA on
 * cream, white and purple-tint. A submenu whose child is current colours
 * its own label link and arrow. Hover/focus underline and outline still apply.
 */
.eqb-site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.eqb-site-header .wp-block-navigation .current-menu-item > .wp-block-navigation__submenu-icon,
.eqb-site-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.eqb-site-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation__submenu-icon,
.eqb-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--purple);
	color: color-mix(in srgb, var(--wp--preset--color--purple) 78%, var(--wp--preset--color--ink));
}

/*
 * Language switcher (eyeqboost/language-switcher, styled by the plugin):
 * sits between the menu and the CTA in the header row and never shrinks.
 * It renders nothing without Polylang, so none of its rules apply then.
 */
.eqb-site-header__inner > .wp-block-eyeqboost-language-switcher {
	flex: 0 0 auto;
}

/* Compact header CTA. */
.eqb-site-header .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7em 1.3em;
	white-space: nowrap;
}

/* Phones: the CTA drops to its own full-width row under logo + menu toggle. */
@media (max-width: 599.98px) {
	.eqb-site-header__cta {
		flex-basis: 100%;
	}

	.eqb-site-header__cta .wp-block-button {
		flex: 1 1 100%;
	}

	.eqb-site-header__cta .wp-block-button__link {
		width: 100%;
		padding-block: 0.55em;
	}
}

/*
 * Phones to small tablets with the language switcher: logo + menu toggle +
 * switcher + CTA need about 710px (see the estimate below), so the CTA keeps
 * its own full-width row until 768px. Without the switcher (no Polylang) the
 * phone rule above is unchanged.
 */
@media (min-width: 600px) and (max-width: 767.98px) {
	.eqb-site-header__inner:has(> .wp-block-eyeqboost-language-switcher:not(:empty)) > .eqb-site-header__cta {
		flex-basis: 100%;
	}

	.eqb-site-header__inner:has(> .wp-block-eyeqboost-language-switcher:not(:empty)) > .eqb-site-header__cta .wp-block-button {
		flex: 1 1 100%;
	}

	.eqb-site-header__inner:has(> .wp-block-eyeqboost-language-switcher:not(:empty)) > .eqb-site-header__cta .wp-block-button__link {
		width: 100%;
		padding-block: 0.55em;
	}
}

/*
 * Tablets / small laptops: the inline menu needs this much width before the
 * header row would wrap (core switches to the overlay only below 600px).
 * Estimate, nav text 15px Plus Jakarta Sans 600 (theme.json), 1rem = 16px:
 *   brand   72px logo + 8px gap + ~113px "EyeQBoost" (large, 800)  ~ 193px
 *   menu    Home, Our Approach, Programs, Resources, Blog, About Us,
 *           Contact ~ 439px + 2 submenu arrows ~26px
 *           + 6 gaps x spacing-50 (32px)                            ~ 657px
 *   CTA     ~181px text + 2 x 1.3em padding                         ~ 220px
 *   row     2 gaps x spacing-40 (20px)                              =  40px
 *   page    2 x 20px root padding + ~17px scrollbar                 ~  57px
 *   total ~ 1167px, so the overlay toggle stays below 1250px (~80px spare).
 */
@media (min-width: 600px) and (max-width: 1249.98px) {
	.eqb-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.eqb-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * With the language switcher (Polylang active) the row also carries
 * three short language links (~140px budget) and one more 20px gap:
 *   1167 + 140 + 20 ~ 1327px, so keep the overlay until 1400px (~70px spare
 *   for longer translated labels). :has() scopes this to headers that render
 *   the switcher, so the header without Polylang keeps the 1250px switch.
 */
@media (min-width: 1250px) and (max-width: 1399.98px) {
	.eqb-site-header__inner:has(> .wp-block-eyeqboost-language-switcher:not(:empty)) .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.eqb-site-header__inner:has(> .wp-block-eyeqboost-language-switcher:not(:empty)) .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * The header row may use up to 1440px (wider than the 1200px content "wide"
 * size) so the translated menu, switcher and CTA stay on one line.
 * Bahasa Melayu labels are the longest (Pendekatan Kami, Tentang Kami, Hubungi
 * Kami, and the CTA "Tempah penilaian percuma"): brand ~193 + menu ~760
 * + switcher ~140 + CTA ~240 + gaps ~60 ~ 1393px, so BM keeps the overlay
 * menu until 1480px.
 */
.eqb-site-header .eqb-site-header__inner.alignwide {
	max-width: min(1440px, 100%);
}

@media (min-width: 1400px) and (max-width: 1479.98px) {
	html[lang^="ms"] .eqb-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	html[lang^="ms"] .eqb-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 4. Footer
 * ---------------------------------------------------------------------- */

.eqb-site-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.eqb-site-footer a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--sunshine-tint);
	text-decoration-thickness: 2px;
}

.eqb-site-footer :focus-visible,
.eqb-site-footer a:where(:not(.wp-element-button)):focus {
	outline-color: var(--wp--preset--color--sunshine);
}

.eqb-site-footer .wp-block-heading {
	color: var(--wp--preset--color--sunshine-tint);
}

.eqb-site-footer .wp-block-site-title a {
	text-decoration: none;
}

.eqb-site-footer .wp-block-site-logo img {
	height: auto;
}

.eqb-site-footer__tagline {
	color: var(--wp--preset--color--sunshine-tint);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.eqb-site-footer__col > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.eqb-footer-links {
	list-style: none;
	padding-inline-start: 0;
	font-size: var(--wp--preset--font-size--small);
}

.eqb-footer-links li + li {
	margin-block-start: var(--wp--preset--spacing--20);
}

.eqb-footer-links a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.eqb-footer-links a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

.eqb-site-footer__bottom {
	margin-block-start: var(--wp--preset--spacing--60) !important; /* beat the layout's blockGap rule */
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--surface) 20%, transparent);
	row-gap: var(--wp--preset--spacing--20);
}

.eqb-site-footer__bottom p {
	margin: 0;
}

.eqb-site-footer__legal {
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--20);
}

/* -------------------------------------------------------------------------
 * 4b. Editor-only hints in page patterns (e.g. About team photos)
 * Hidden on the front end; shown inside the block editor canvas.
 * ---------------------------------------------------------------------- */

.eqb-page-editor-hint {
	display: none;
}

/*
 * add_editor_style() prefixes every selector with .editor-styles-wrapper,
 * so the .is-root-container selector is the one that reliably matches in
 * the editor canvas; the unprefixed one covers non-transformed loading.
 */
.editor-styles-wrapper .eqb-page-editor-hint,
.is-root-container .eqb-page-editor-hint {
	display: block;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px dashed var(--wp--preset--color--purple);
	border-radius: var(--wp--custom--radius--small);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
 * 5. Hero band (blog, archive, search, page, 404)
 * ---------------------------------------------------------------------- */

.eqb-hero-band {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.eqb-hero-band::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--wp--preset--spacing--40);
	right: calc(var(--wp--preset--spacing--50) * -1);
	width: clamp(6rem, 22vw, 13rem);
	aspect-ratio: 1;
	background: url("../images/brand-sparkle.svg") no-repeat center / contain;
	opacity: 0.35;
	pointer-events: none;
}

@media (min-width: 768px) {
	.eqb-hero-band::after {
		right: var(--wp--preset--spacing--60);
		opacity: 0.8;
	}
}

/* Purple eyebrow on a white pill keeps AA contrast over the soft gradient. */
.eqb-hero-band > .is-style-eqb-eyebrow {
	width: fit-content;
	/* Shrink to the text but stay aligned with the centred content column. */
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size, 720px)) / 2)) !important;
	margin-inline-end: auto !important;
	padding: 0.35em 1em;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
}

.eqb-hero-band .wp-block-term-description:empty {
	display: none;
}

.eqb-search .wp-block-search__input {
	min-width: 0;
	padding: 0.75em 1.1em;
	border: 2px solid var(--wp--preset--color--purple-tint);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
}

.eqb-search .wp-block-search__input:focus-visible {
	border-color: var(--wp--preset--color--purple);
}

.eqb-search .wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.eqb-search .wp-block-search__button {
	margin-inline-start: 0;
}

/* -------------------------------------------------------------------------
 * 6. Post card grid (home, index, archive, search)
 * ---------------------------------------------------------------------- */

.eqb-query .wp-block-post-template.is-layout-grid {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	.eqb-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.eqb-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.eqb-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.eqb-post-card {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.eqb-post-card:hover,
	.eqb-post-card:focus-within {
		transform: translateY(-4px);
	}
}

.eqb-post-card:hover,
.eqb-post-card:focus-within {
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Gentle hover lift on section cards (home grids, home latest posts, page card grids). */
@media (prefers-reduced-motion: no-preference) {
	.eqb-home-grid > .is-style-eqb-card,
	.eqb-home-post-card,
	.wp-block-group.eqb-page-card {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

	.eqb-home-grid > .is-style-eqb-card:hover,
	.eqb-home-post-card:hover,
	.eqb-home-post-card:focus-within,
	.wp-block-group.eqb-page-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--wp--preset--shadow--lift);
	}
}

.eqb-post-card .wp-block-post-featured-image {
	margin-block-end: var(--wp--preset--spacing--30);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--small);
}

.eqb-post-card .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--small);
}

/* No featured image: a branded placeholder keeps the cards aligned. */
.eqb-post-card:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 9;
	margin-block-end: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--small);
	background: url("../images/brand-sparkle.svg") no-repeat center / 30%, var(--wp--preset--gradient--soft);
}

.eqb-post-card .wp-block-post-title {
	overflow-wrap: anywhere;
}

.eqb-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.eqb-post-card .wp-block-post-title a:hover,
.eqb-post-card .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--purple);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.eqb-post-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.eqb-post-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.eqb-post-card .wp-block-post-date {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-soft);
}

/* Pagination */
.eqb-query .wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.eqb-query .wp-block-query-pagination a,
.eqb-query .wp-block-query-pagination .page-numbers {
	text-decoration: none;
}

.eqb-query .wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	height: 2.5em;
	padding-inline: 0.5em;
	border-radius: var(--wp--custom--radius--pill);
}

.eqb-query .wp-block-query-pagination-numbers a.page-numbers:hover {
	background-color: var(--wp--preset--color--purple-tint);
	color: var(--wp--preset--color--ink);
}

.eqb-query .wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--surface);
}

.eqb-no-results {
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 7. Single post
 * ---------------------------------------------------------------------- */

.eqb-post-meta {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.eqb-post-meta > * + *::before {
	content: "\00B7";
	margin-inline-end: var(--wp--preset--spacing--20);
}

.eqb-single .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--medium);
}

.eqb-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.eqb-post-tags .wp-block-post-terms__separator {
	display: none;
}

.eqb-post-tags a {
	padding: 0.3em 0.9em;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--purple-tint);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.eqb-post-tags a:hover {
	background-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--surface);
}

.eqb-post-nav {
	padding-block-start: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--purple-tint);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.eqb-post-nav:empty {
	display: none;
}

.eqb-post-nav .wp-block-post-navigation-link {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.eqb-post-nav .post-navigation-link-next {
	margin-inline-start: auto;
	text-align: end;
}

.eqb-post-nav .post-navigation-link__label {
	display: block;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}