/* ============================================================
   WP block → design-class bridge
   Maps core block markup (query loops, pagination, post blocks)
   onto the design system in styles.css / pages.css / category.css.
   Loaded on blog home, archives and search results.
   ============================================================ */

/* Post grid: wp:post-template renders a <ul class="blog-grid"> */
ul.blog-grid {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}
ul.blog-grid > li {
	margin: 0;
	display: flex;
}
ul.blog-grid > li > .post-card {
	flex: 1;
}

/* Featured image inside the card */
.post-card .pc-media {
	margin: 0;
	height: 152px;
	background: linear-gradient(135deg, #652eba, #4c238b);
}
.post-card .pc-media a {
	display: block;
	width: 100%;
	height: 100%;
}
.post-card .pc-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

/* Archive cards use .thumb/.body rather than the Blog card's .pc-media/
   .pc-body pair. Keep the figure as an isolated 16:9 frame even when this
   card appears inside a page pattern instead of a category archive. Without
   these bridge rules, an image's 100% height can escape its figure on pages
   where category.css is not loaded and cover the card copy below it. */
.post-card .thumb {
	margin: 0;
	position: relative;
	display: block;
	flex: 0 0 auto;
	overflow: hidden;
	line-height: 0;
	background: linear-gradient(135deg, #4c238b, #652eba);
}
.post-card .thumb > a {
	display: block;
	width: 100%;
	height: 100%;
}
.post-card .thumb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	object-fit: cover;
	position: static !important;
}
.post-card .body {
	position: relative;
	z-index: 1;
	min-width: 0;
}

/* Title link */
.post-card .pc-body h3 a {
	color: inherit;
	text-decoration: none;
}

/* Category badge: wp:post-terms renders links inside .b-tag */
.b-tag a {
	color: inherit;
	text-decoration: none;
}

/* Excerpt */
.post-card .wp-block-post-excerpt {
	flex: 1;
}
.post-card .wp-block-post-excerpt__excerpt {
	font-size: 13.5px;
	color: var(--ink-3);
	line-height: 1.55;
	margin: 0 0 16px;
}

/* Meta row (author + date) */
.b-meta {
	gap: 8px;
	font-size: 12.5px;
	color: var(--ink-4);
}
.b-meta .wp-block-post-author-name {
	font-weight: 600;
	color: var(--ink-3);
}
.b-meta .wp-block-post-date {
	color: var(--ink-4);
}
.b-meta .wp-block-post-date::before {
	content: "·";
	margin-right: 8px;
	color: var(--line);
}

/* Pagination: wp:query-pagination with .sr-pager */
.sr-pager {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
	justify-content: center;
	gap: 6px;
	font-size: 14px;
}
.sr-pager a,
.sr-pager .page-numbers {
	text-decoration: none;
	color: var(--ink-3);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 7px 13px;
	background: var(--surface);
	transition: border-color .15s ease, color .15s ease;
}
.sr-pager a:hover {
	border-color: var(--brand-purple);
	color: var(--brand-purple);
}
.sr-pager .page-numbers.current {
	background: var(--brand-purple);
	border-color: var(--brand-purple);
	color: #fff;
}
.sr-pager .page-numbers.dots {
	border: 0;
	background: none;
}
/* Prev/Next carry a chevron SVG beside the label. */
.sr-pager .prev,
.sr-pager .next {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.sr-pager .prev svg,
.sr-pager .next svg {
	width: 15px;
	height: 15px;
}

/* Search results grid: the design .sr-grid rendered as a block group.
   Keep the two-column layout and drop the flow block-gap between the
   filter aside and the results column. */
.sr-grid.wp-block-group {
	display: grid;
}
.sr-grid.wp-block-group > * {
	margin-block: 0;
}

/* Empty search state inside the design results column. */
.sr-list .sr-empty {
	padding: 32px 0 8px;
}
.sr-list .sr-empty h3 {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--ink-1);
}
.sr-list .sr-empty p {
	color: var(--ink-3);
	margin: 0;
	max-width: 60ch;
	line-height: 1.6;
}

/* Blog category filter spacing under the hero */
.blog-body .blog-cats {
	margin: 28px 0 32px;
}

/* ---- Category archive: design archive-grid + .posts cards ---- */
.category-page .archive-grid {
	padding: 44px 0 0;
}
ul.posts {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.posts > li {
	margin: 0;
	display: flex;
}
ul.posts > li > .post-card {
	flex: 1;
	min-width: 0;
}
.category-page .post-card .thumb {
	margin: 0;
	background: linear-gradient(135deg, #4c238b, #652eba);
}
.category-page .post-card .thumb a {
	display: block;
	width: 100%;
	height: 100%;
}
.category-page .post-card .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}
.category-page .post-card .body h3 {
	font-size: 17px;
	line-height: 1.35;
	margin: 8px 0;
}
.category-page .post-card .body h3 a {
	color: inherit;
	text-decoration: none;
}
.category-page .post-card .badge-cat-row {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.category-page .post-card .badge-cat-row a {
	color: var(--brand-purple);
	text-decoration: none;
}
.category-page .post-card .wp-block-post-excerpt {
	flex: 1;
}
.category-page .post-card .wp-block-post-excerpt__excerpt {
	font-size: 13.5px;
	color: var(--ink-3);
	line-height: 1.55;
	margin: 0 0 14px;
}
.category-page .post-card .meta-row {
	font-size: 12.5px;
	color: var(--ink-4);
}

/* First card of page one becomes the featured horizontal card. */
body.category:not(.paged) ul.posts > li:first-child {
	grid-column: 1 / -1;
}
body.category:not(.paged) ul.posts > li:first-child > .post-card {
	display: grid;
	grid-template-columns: 44% minmax(0, 1fr);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}
body.category:not(.paged) ul.posts > li:first-child .thumb {
	aspect-ratio: auto;
	min-height: 240px;
	height: 100%;
}
body.category:not(.paged) ul.posts > li:first-child .body {
	padding: 32px 34px;
}
body.category:not(.paged) ul.posts > li:first-child .body h3 {
	font-size: 24px;
	line-height: 1.25;
}
@media (max-width: 767px) {
	body.category:not(.paged) ul.posts > li:first-child > .post-card {
		display: flex;
		flex-direction: column;
	}
	body.category:not(.paged) ul.posts > li:first-child .thumb {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

/* WP pagination inside the design .pager shell. */
.pager.wp-block-query-pagination {
	margin-top: 44px;
	gap: 6px;
	justify-content: center;
}
.pager .page-numbers,
.pager a {
	min-width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	padding: 0 12px;
	background: var(--surface);
}
.pager a:hover {
	border-color: var(--brand-purple);
	color: var(--brand-purple);
}
.pager .page-numbers.current {
	background: var(--brand-gradient);
	color: #fff;
	border-color: transparent;
}
.pager .page-numbers.dots {
	border: 0;
	background: none;
	color: var(--ink-4);
}

/* Sidebar widgets inside the category .side column reuse the reference
   single-sidebar column behaviour (no masonry, full width). */
.side .ws-widget-area .single-sidebar,
.side .single-sidebar {
	columns: 1;
	column-gap: 0;
}
.side .widget-area {
	padding: 0;
}

/* WP puts an `archive` class on <body>; the design's .archive padding
   must only apply to the <main class="archive"> wrapper. */
body.archive {
	padding: 0;
}

/* The design grid reserves a 240px TOC column. Until toc.js has decided
   whether a TOC exists (and when a post has no headings), the layout must
   not collapse: hidden TOC = two-column grid. */
.post-grid.no-toc,
.post-grid:has( > .toc[hidden] ) {
	grid-template-columns: minmax(0, 1fr) 280px;
}
@media (max-width: 900px) {
	.post-grid.no-toc,
	.post-grid:has( > .toc[hidden] ) {
		grid-template-columns: 1fr;
	}
}

/* post.css styles .wp-block-group as a boxed in-article section. In a block
   theme every template wrapper is also a group block, so neutralize the box
   on structural wrappers and keep it only for groups inside the post body. */
main.ws-single.wp-block-group,
.ws-single .wp-block-group:not(.container) {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}
.ws-single .wp-block-group.container {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0 auto;
}
.ws-single .wp-block-post-content .wp-block-group {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 28px;
	margin: 28px 0;
}

/* ---- Widget areas rendered inside a narrow sidebar column ----
   The design's .single-sidebar uses masonry columns for the showcase
   page; inside the post/page aside it must be a single column that
   never overflows its 280px track. */
.post-aside .single-sidebar,
.ws-widget-area .single-sidebar {
	columns: 1;
	column-gap: 0;
}
.post-aside .single-sidebar > .widget,
.ws-widget-area .single-sidebar > .widget {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.post-aside .widget-area {
	padding: 0;
}
.ws-widget-area .widget * {
	max-width: 100%;
}
.ws-widget-area .widget_search form {
	display: flex;
	gap: 8px;
	min-width: 0;
}
.ws-widget-area .widget_search form label {
	flex: 1;
	min-width: 0;
	margin: 0;
}
.ws-widget-area .widget_search .wp-block-search__input,
.ws-widget-area .widget_search input[type="search"] {
	min-width: 0;
	width: 100%;
	flex: 1;
}
.ws-widget-area .widget_search .search-submit {
	flex: none;
	padding: 11px 14px;
	font-size: 13px;
}

/* Discount card typography scaled for the narrow 280px aside */
.post-aside .dw-card {
	padding: 20px 16px;
}
.post-aside .dw-headline {
	gap: 10px;
}
.post-aside .dw-headline .pct {
	font-size: 42px;
}
.post-aside .dw-headline .pct sup {
	font-size: 17px;
}
.post-aside .dw-headline-text b {
	font-size: 19px;
}
.post-aside .dw-headline-text span {
	font-size: 12px;
}
.post-aside .dw-timer-wrap {
	flex-wrap: wrap;
	gap: 8px;
}

/* ------------------------------------------------------------------
   Default thumbnail (inc/featured-image.php)

   Posts with no image of their own all share one graphic, so a listing
   would otherwise show the same picture four times in a row. Cards are
   dealt a hue shift in render order (ws-tint-1…6, see
   simple_ws_theme_fallback_tint_class()), so six cards go by before a
   colour repeats.

   Only listing cards are shifted — the copy prepended inside an article
   carries .wp-block-image and keeps the brand colors.
   ------------------------------------------------------------------ */
.wp-block-post-featured-image.is-fallback-image img {
	filter:
		hue-rotate(var(--ws-tint-hue, 0deg))
		saturate(var(--ws-tint-sat, 1.04))
		brightness(var(--ws-tint-bri, 1));
	transition: filter .25s ease;
}
/* The shifts stay inside the brand's own red → pink → violet arc. Rotating
   the magenta much past +30deg turns it amber, which stops reading as the
   same product. */
.wp-block-post-featured-image.ws-tint-2 { --ws-tint-hue: -18deg; --ws-tint-sat: 1.06; }
.wp-block-post-featured-image.ws-tint-3 { --ws-tint-hue: 16deg;  --ws-tint-sat: 1.04; }
.wp-block-post-featured-image.ws-tint-4 { --ws-tint-hue: -36deg; --ws-tint-sat: 1.05; }
.wp-block-post-featured-image.ws-tint-5 { --ws-tint-hue: 26deg;  --ws-tint-bri: 1.02; }
.wp-block-post-featured-image.ws-tint-6 { --ws-tint-hue: -54deg; --ws-tint-sat: 1.03; }

/* Hover lifts the same tint instead of resetting it: only the saturation and
   brightness variables move, so the card's hue never jumps. */
.post-card:hover .wp-block-post-featured-image.is-fallback-image {
	--ws-tint-sat: 1.16;
	--ws-tint-bri: 1.03;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-featured-image.is-fallback-image img { transition: none; }
}

/* ============================================================
   Contact form — unavailable state
   Shown in place of the Easy Form Builder shortcode when the plugin
   is inactive or the configured form no longer exists. The card keeps
   the contact card's own padding, so it reads as the form's slot
   rather than as an error stuck on top of the page.
   ============================================================ */
.cf-unavailable {
	text-align: center;
	padding: 24px 8px 8px;
}
.cf-unavailable-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(101, 46, 186, 0.08);
	color: var(--accent, #652eba);
}
.cf-unavailable-icon svg {
	width: 26px;
	height: 26px;
}
.cf-unavailable h3 {
	font-family: var(--font-display, inherit);
	font-size: 1.25rem;
	margin: 0 0 8px;
}
.cf-unavailable p {
	color: var(--ink-3, #5b5b6b);
	margin: 0 auto 20px;
	max-width: 42ch;
}
.cf-unavailable-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* ============================================================
   Article blocks: core markup → the design's post.css rules

   post.css is a verbatim copy of the design and must not be edited
   (architecture decision #2), but it keys on class names the design
   invented by hand — .is-outline, .is-dots, .lead, ul.check,
   .cover-inner, .details-body, .f-* — while the real core blocks
   emit their own markup. Everything below re-states those rules
   against what core actually renders, so an author using the stock
   Button / Separator / Paragraph / List / Cover / Details / File
   blocks gets the design look.

   This file is also an add_editor_style(), so the editor canvas and
   the published page resolve from exactly the same declarations.
   ============================================================ */

/* --- Button: core ships is-style-outline, the design styles .is-outline --- */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: transparent;
	background-color: transparent;
	color: var(--brand-purple, #652eba);
	border: 1.5px solid var(--brand-purple, #652eba);
}

/* --- Separator: core ships is-style-dots, the design styles .is-dots --- */
.wp-block-separator.is-style-dots {
	height: auto;
	background: none;
	text-align: center;
	border: 0;
}
.wp-block-separator.is-style-dots::before {
	content: "···";
	color: var(--ink-4, #8b8b9e);
	font-size: 26px;
	letter-spacing: 8px;
	padding-left: 8px; /* balances the letter-spacing on the last dot */
}
.wp-block-separator.is-style-dots::after {
	content: none;
}

/* --- Lead paragraph (theme style, no core equivalent) ---
   Not scoped to .article: single.html wraps content in .article but the page
   templates do not, and these styles are opt-in from the style picker, so the
   class is its own scope. Scoping them would silently do nothing on a page. */
p.is-style-lead {
	font-size: 20px;
	color: var(--ink-1, #16161d);
	font-weight: 500;
	line-height: 1.6;
}

/* --- Check list (theme style, no core equivalent) --- */
ul.is-style-check,
ul.wp-block-list.is-style-check {
	list-style: none;
	padding-left: 0;
}
ul.is-style-check li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
ul.is-style-check li::before {
	content: "";
	flex: none;
	margin-top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(22, 163, 74, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* --- Cover: core uses __inner-container and __image-background --- */
.wp-block-cover .wp-block-cover__image-background,
.wp-block-cover img.wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}
.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	color: #fff;
	max-width: 540px;
}
/* Core paints its own dim layer; the design's gradient is the background. */
.wp-block-cover .wp-block-cover__background {
	display: none;
}

/* --- Details: core puts the content straight after <summary> --- */
.wp-block-details > :not(summary) {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-2, #3d3d4e);
}
.wp-block-details > :not(summary):last-child {
	padding-bottom: 18px;
}
.wp-block-details > p:not(summary) {
	margin: 0 0 10px;
}

/* --- File: core renders __embed / __content-wrapper / __button --- */
.wp-block-file .wp-block-file__content-wrapper {
	flex: 1;
	min-width: 0;
}
.wp-block-file a:not(.wp-block-file__button) {
	color: var(--ink-1, #16161d);
	font-size: 15px;
	display: block;
	text-decoration: none;
	font-weight: 600;
}
.wp-block-file a.wp-block-file__button {
	background: var(--brand-gradient, linear-gradient(135deg, #652eba, #ff4b93));
	color: #fff;
	border: 0;
	border-radius: 9px;
	padding: 9px 16px;
	font: 600 13px var(--bs-body-font-family, inherit);
	text-decoration: none;
	flex: none;
	opacity: 1;
}
.wp-block-file a.wp-block-file__button:hover {
	color: #fff;
	filter: brightness(1.06);
}

/* --- Post tags: wp:post-terms with className "post-tags" --- */
.wp-block-post-terms.post-tags a::before {
	content: "#";
	opacity: 0.55;
}
.wp-block-post-terms.post-tags .wp-block-post-terms__separator {
	display: none;
}