/*
Theme Name: Yarn+Chai
Theme URI: https://yarnandchai.com
Description: The custom block theme for yarnandchai.com — a warm, modern home for free crochet and knitting patterns. Built for the block editor with theme.json global styles, reusable patterns, clean ad real estate, and strong Core Web Vitals.
Author: Zack Langford
Author URI: https://github.com/zackrylangford
Tags: full-site-editing, block-patterns, blog, custom-colors, custom-logo, editor-style, featured-images, wide-blocks, translation-ready
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.9.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yarnandchai
*/

/* Every slot reserves its ad's height under a label strip before Raptive fills it, so ads never shift the page. */
.yc-ad-slot {
	position: relative;
	box-sizing: border-box;
	min-height: calc(var(--wp--custom--ad-slot--label-height) + var(--wp--custom--ad-slot--min-height));
	padding-top: var(--wp--custom--ad-slot--label-height);
	justify-content: center;
	background: var(--wp--preset--color--sunken);
	border-radius: var(--wp--custom--radius--sm);
}

/* Out of flow in its own strip, so a filled slot is exactly as tall as an empty one. */
.yc-ad-slot__label {
	position: absolute;
	inset: 0 0 auto;
	margin: 0;
	line-height: var(--wp--custom--ad-slot--label-height);
	text-align: center;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.yc-ad-slot--sidebar-sticky {
	min-height: calc(var(--wp--custom--ad-slot--label-height) + var(--wp--custom--ad-slot--sticky-min-height));
	position: sticky;
	top: var(--wp--custom--ad-slot--sticky-top);
}

/* Raptive's own .adthrive-ad rule adds 10px above and below, which would push a filled slot past its reserved height. */
.yc-ad-slot .adthrive-ad {
	margin-block: 0;
}

/* Raptive inserts its own in-content units; the theme only reserves their height. */
.wp-block-post-content .adthrive-content {
	min-height: var(--wp--custom--ad-slot--min-height);
	margin-block: var(--wp--preset--spacing--50);
}

/* The sidebar column, its template part and the part's wrapper group all stretch to the main column's height.
   The wrapper contains the sticky slot, so the 300x600 travels the whole article. No ancestor may set overflow. */
.yc-with-sidebar > .wp-block-column.yc-sidebar {
	flex-grow: 0;
	flex-basis: var(--wp--custom--layout--sidebar);
	align-self: stretch;
}

.yc-sidebar > .wp-block-template-part {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.yc-sidebar > .wp-block-template-part > .wp-block-group {
	flex: 1 1 auto;
}

@media (max-width: 781.98px) {
	.yc-with-sidebar > .wp-block-column.yc-sidebar {
		display: none;
	}
}

.home .yc-about-card .custom-logo {
	width: 88px;
	height: auto;
}

/* The title link is stretched over the card, so the whole card is one tap target. */
.yc-card {
	position: relative;
}

.yc-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.yc-card .yc-first-term a {
	position: relative;
	z-index: 1;
}

.yc-card .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.yc-card .wp-block-post-featured-image img {
	transition: transform 0.25s ease;
}

.yc-card:is(:hover, :focus-within) .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.yc-card:hover .wp-block-post-title a,
.yc-card .wp-block-post-title a:focus-visible {
	text-decoration: underline 2px var(--wp--preset--color--lilac-deep);
	text-underline-offset: 3px;
}

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

/* Post Terms orders by name; umbrella categories are already dropped in PHP, so the first link is the real category. */
.wp-block-post-terms.yc-first-term a:not(:first-of-type),
.wp-block-post-terms.yc-first-term .wp-block-post-terms__separator {
	display: none;
}

.yc-card--row .wp-block-post-featured-image {
	flex: 0 0 72px;
}

.yc-card--row .wp-block-post-featured-image,
.yc-card--row .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--sm);
}

/* Card grids go 2-up on phones (core drops grids to one column under 600px, and its preset font sizes are !important).
   Scrollers keep their full-size cards. */
@media (max-width: 781.98px) {
	.wp-block-post-template.is-layout-grid:not(.yc-scroller):has(.yc-card) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.wp-block-post-template.is-layout-grid:not(.yc-scroller) .yc-card .wp-block-post-title {
		font-size: var(--wp--preset--font-size--body) !important;
	}
}

/* Beside the 336px sidebar a 3-up card is under 160px wide until 1024px, so there the main column's grids are 2-up Small cards too. */
@media (min-width: 782px) and (max-width: 1023.98px) {
	.yc-with-sidebar > .wp-block-column:not(.yc-sidebar) .wp-block-post-template.is-layout-grid:has(.yc-card) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}

	.yc-with-sidebar > .wp-block-column:not(.yc-sidebar) .wp-block-post-template.is-layout-grid .yc-card .wp-block-post-title {
		font-size: var(--wp--preset--font-size--body) !important;
	}
}

/* Caps let one query show fewer cards at one breakpoint instead of running a second query. */
@media (max-width: 781.98px) {
	.yc-cap-mobile-2 .wp-block-post-template > li:nth-child(n + 3) {
		display: none;
	}
}

@media (min-width: 782px) and (max-width: 1023.98px) {
	.yc-cap-tablet-2 .wp-block-post-template > li:nth-child(n + 3) {
		display: none;
	}
}

@media (min-width: 782px) {
	.yc-cap-desktop-3 .wp-block-post-template > li:nth-child(n + 4) {
		display: none;
	}
}

@media (max-width: 781.98px) {
	.yc-desktop-only {
		display: none !important;
	}
}

@media (min-width: 782px) {
	.yc-mobile-only {
		display: none !important;
	}
}

/* The email provider's form goes in the reserved signup area and takes the card's pill field and Primary button. */
.yc-newsletter-form form input:is([type="email"], [type="text"]) {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	padding-inline: var(--wp--preset--spacing--40);
	border: 1.5px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink-deep);
	font-family: inherit;
	font-size: 1rem; /* iOS zooms into fields set below 16px. */
}

.yc-newsletter-form form :is(button, input[type="submit"]) {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 14px var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--lilac-deep);
	color: var(--wp--preset--color--canvas);
	font: 600 15px/1.2 var(--wp--preset--font-family--inter);
	cursor: pointer;
}

.yc-newsletter-form form :is(button, input[type="submit"]):is(:hover, :focus) {
	background-color: var(--wp--preset--color--ink);
}

/* Band and card padding live here, not in block attributes: it changes at a breakpoint, which inline styles can't. */
.yc-pass-promo {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* The photos wrap under the copy once it would drop below 360px. */
.yc-pass-promo__copy {
	flex: 1 1 360px;
	max-width: 560px;
}

/* Sized on the figure so a photo and its placeholder take the same box. */
.yc-pass-promo__photos .wp-block-image {
	flex-shrink: 0;
	width: 150px;
}

.yc-pass-promo__photos .wp-block-image:nth-child(2) {
	width: 190px;
}

.yc-pass-promo__photos img {
	width: 100%;
}

.yc-pass-promo__photos img,
.yc-pass-promo__photos .yc-photo--placeholder {
	border-radius: var(--wp--custom--radius--md);
}

.yc-pass-promo__photos > :first-child {
	rotate: 6deg;
}

.yc-pass-promo__photos > :last-child {
	rotate: -6deg;
}

@media (max-width: 781.98px) {
	.wp-block-group.yc-pass-promo {
		gap: var(--wp--preset--spacing--50);
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.yc-pass-promo__photos .wp-block-image {
		width: 84px;
	}

	.yc-pass-promo__photos .wp-block-image:nth-child(2) {
		width: 100px;
	}
}

.yc-membership-card {
	padding: var(--wp--preset--spacing--40);
}

.yc-membership-card__icon {
	display: grid;
	place-items: center;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--ink-deep);
	color: var(--wp--preset--color--lilac);
}

.yc-membership-card > .wp-block-buttons {
	flex-shrink: 0;
}

/* Beside the sidebar the article is too narrow for a one-row card until 1024px, so below that it stacks. */
@media (max-width: 1023.98px) {
	.wp-block-group.yc-membership-card {
		display: grid;
		grid-template-columns: 52px minmax(0, 1fr);
		align-items: center;
		gap: 14px;
		padding: 20px;
	}

	.yc-membership-card__copy {
		display: contents;
	}

	.yc-membership-card .yc-membership-card__copy > *,
	.yc-membership-card > .wp-block-buttons {
		grid-column: 1 / -1;
		margin-block: 0;
	}

	.yc-membership-card .yc-membership-card__copy > .is-style-eyebrow {
		grid-column: 2;
	}

	.yc-membership-card :is(.wp-block-button, .wp-block-button__link) {
		width: 100%;
	}
}

/* The pill style hugs its label; without this a pill paragraph or post-terms block fills the row. */
.is-style-pill {
	display: inline-block;
	width: fit-content;
}

/* Lilac-deep on the lilac tint is only 3.95:1, so small lilac text there uses lilac-strong (5.9:1). */
.has-lilac-tint-background-color .is-style-eyebrow,
.has-lilac-tint-background-color .wp-block-post-terms:not(.is-style-pill) a,
.has-lilac-tint-background-color .yc-see-all a,
.is-style-tip .is-style-eyebrow {
	color: var(--wp--preset--color--lilac-strong);
}

/* Variation colours outrank the theme.json button :hover, so it is restated here; ink fills lift to ink-soft instead. */
:is(.is-style-lilac, .is-style-light, .is-style-outline) > .wp-block-button__link:is(:hover, :focus) {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
}

:is(.is-style-ink, .is-style-chip-active) > .wp-block-button__link:is(:hover, :focus) {
	background-color: var(--wp--preset--color--ink-soft);
	border-color: var(--wp--preset--color--ink-soft);
}

/* Chips match the post-terms chips: only the border darkens. */
.is-style-chip > .wp-block-button__link:is(:hover, :focus) {
	border-color: var(--wp--preset--color--ink-deep);
}

:where(a, button, .wp-element-button, input, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--lilac-deep);
	outline-offset: 2px;
}

/* Primary nav: a centred 28px underline on hover / focus / current page, reserved by padding so it never shifts layout. */
.yc-primary-nav.wp-block-navigation {
	row-gap: var(--wp--preset--spacing--10);
}

.yc-primary-nav .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	padding-bottom: 0.25rem;
}

.yc-primary-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--lilac-deep);
	transform: translateX(-50%) scaleX(0);
	transition: transform 0.18s ease;
}

.yc-primary-nav .wp-block-navigation-item__content:hover::after,
.yc-primary-nav .wp-block-navigation-item__content:focus-visible::after,
.yc-primary-nav .current-menu-item > .wp-block-navigation-item__content::after,
.yc-primary-nav .wp-block-navigation-item__content[aria-current]::after {
	transform: translateX(-50%) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.yc-primary-nav .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* Containing block for the phone search overlay, so it spans the row. */
.yc-header__row {
	position: relative;
}

.yc-logo,
.yc-header-pass {
	flex-shrink: 0;
}

/* The pass is a header button from 1024px; below that it lives in the footer and, under 600px, in the overlay menu. */
.yc-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .yc-nav-pass {
	display: none;
}

@media (max-width: 1023.98px) {
	.yc-header-pass.wp-block-buttons {
		display: none;
	}
}

@media (min-width: 600px) and (max-width: 1023.98px) {
	.yc-primary-nav.wp-block-navigation {
		column-gap: var(--wp--preset--spacing--40);
	}
}

/* Mobile: 52px logo, then search and the menu toggle packed right (the menu toggle last, as in the design). */
@media (max-width: 599.98px) {
	.yc-header__row > .wp-block-site-logo.yc-logo {
		margin-inline-end: auto;
	}

	.yc-logo img {
		width: 52px;
	}

	.yc-primary-nav {
		order: 1;
	}
}

/* Mobile nav overlay (core Navigation, overlayMenu:"mobile"): restyle only, scoped to the opened overlay and its toggles. */

/* Bar geometry mirrors the 24px menu icon: 18px bars, 6px apart. */
.yc-primary-nav .wp-block-navigation__responsive-container-open,
.yc-primary-nav .wp-block-navigation__responsive-container-close {
	--yc-nav-bar-length: 18px;
	--yc-nav-bar-thickness: 2px;
	--yc-nav-bar-gap: 4px;
	position: relative;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--ink-deep);
}

.yc-primary-nav .wp-block-navigation__responsive-container-open svg,
.yc-primary-nav .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.yc-primary-nav .wp-block-navigation__responsive-container-open:hover,
.yc-primary-nav .wp-block-navigation__responsive-container-open:focus-visible,
.yc-primary-nav .wp-block-navigation__responsive-container-close:hover,
.yc-primary-nav .wp-block-navigation__responsive-container-close:focus-visible {
	color: var(--wp--preset--color--lilac-deep);
}

/* Hamburger: three bars from one element — center bar plus two box-shadow bars. */
.yc-primary-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--yc-nav-bar-length);
	height: var(--yc-nav-bar-thickness);
	border-radius: var(--yc-nav-bar-thickness);
	background: currentColor;
	box-shadow:
		0 calc(-1 * (var(--yc-nav-bar-thickness) + var(--yc-nav-bar-gap))) currentColor,
		0 calc(var(--yc-nav-bar-thickness) + var(--yc-nav-bar-gap)) currentColor;
}

/* X: two bars crossed at the button's center. */
.yc-primary-nav .wp-block-navigation__responsive-container-close::before,
.yc-primary-nav .wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--yc-nav-bar-length);
	height: var(--yc-nav-bar-thickness);
	border-radius: var(--yc-nav-bar-thickness);
	background: currentColor;
}

.yc-primary-nav .wp-block-navigation__responsive-container-close::before {
	transform: rotate(45deg);
}

.yc-primary-nav .wp-block-navigation__responsive-container-close::after {
	transform: rotate(-45deg);
}

/* A keyframe, not a transition: core opens the overlay by toggling display. */
@keyframes yc-nav-x-in {
	from { opacity: 0; transform: scale(0.6) rotate(-90deg); }
	to { opacity: 1; transform: scale(1) rotate(0); }
}

.yc-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	animation: yc-nav-x-in 0.2s ease;
}

/* Overflow fix: the opened container is a full-width, left-aligned column whatever the desktop row's justification. */
.yc-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}

.yc-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	gap: var(--wp--preset--spacing--40);
}

.yc-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50);
}

/* The overlay's pass item is a Primary pill, matching the header button it replaces. */
.yc-primary-nav .wp-block-navigation__responsive-container.is-menu-open .yc-nav-pass > .wp-block-navigation-item__content {
	padding: 14px var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--lilac-deep);
	color: var(--wp--preset--color--canvas);
	line-height: 1.2;
}

.yc-primary-nav .wp-block-navigation__responsive-container.is-menu-open .yc-nav-pass > .wp-block-navigation-item__content:is(:hover, :focus) {
	background-color: var(--wp--preset--color--ink);
}

.yc-primary-nav .yc-nav-pass > .wp-block-navigation-item__content::after {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.yc-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		animation: none;
	}
}

/* Collapsible header search, gated on html.yc-search-js (set pre-paint): with JS it paints as a 44px toggle with no reflow; without JS the full search stays inline. */
.yc-search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--ink-deep);
	cursor: pointer;
}

.yc-search-toggle::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/search.svg") center / contain no-repeat;
	mask: url("assets/icons/search.svg") center / contain no-repeat;
}

.yc-search-toggle:hover,
.yc-search-toggle:focus-visible {
	color: var(--wp--preset--color--lilac-deep);
}

.yc-header-search .wp-block-search__input {
	min-width: 0;
	padding-inline: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
}

.yc-header-search .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
}

/* Without JS the full search sits in the row, so it shrinks rather than overflow. */
.yc-header__actions,
.yc-header-search {
	min-width: 0;
}

html.yc-search-js .yc-header-search {
	width: 44px;
	min-width: 44px;
}

html.yc-search-js .yc-header-search .yc-search-toggle {
	display: inline-flex;
}

/* Keep the footprint while open (visibility, not display) so revealing the overlay never shifts the row. */
html.yc-search-js .yc-header-search.is-search-open .yc-search-toggle {
	visibility: hidden;
}

/* The input opens as an absolute overlay across the header row (mobile) or beside the toggle (600px+), animating only transform / opacity. */
html.yc-search-js .yc-header-search .wp-block-search__inside-wrapper {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	z-index: 10;
	max-width: none;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%) scaleX(0.9);
	transform-origin: right center;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

html.yc-search-js .yc-header-search.is-search-open .wp-block-search__inside-wrapper {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) scaleX(1);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (min-width: 600px) {
	.yc-search-toggle {
		border: 1.5px solid var(--wp--preset--color--hairline);
	}

	html.yc-search-js .yc-header-search {
		position: relative;
	}

	html.yc-search-js .yc-header-search .wp-block-search__inside-wrapper {
		left: auto;
		width: 360px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.yc-search-js .yc-header-search .wp-block-search__inside-wrapper {
		transform: translateY(-50%);
		transition-property: opacity, visibility;
	}
	html.yc-search-js .yc-header-search.is-search-open .wp-block-search__inside-wrapper {
		transform: translateY(-50%);
	}
}

/* Footer: lilac link hover (core Navigation has no hover colour); the lists wrap 2-up once the columns stack. */
.yc-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--lilac);
}

.yc-footer__lists.wp-block-group {
	row-gap: var(--wp--preset--spacing--50);
}

@media (max-width: 781.98px) {
	.yc-footer__lists.wp-block-group {
		column-gap: var(--wp--preset--spacing--30);
	}

	.yc-footer__lists > * {
		flex: 1 1 calc(50% - var(--wp--preset--spacing--30));
	}
}

/* Post Terms and Term Name links styled as Chip (Default): they are links, not buttons, so the chip button style can't reach them. */
.wp-block-post-terms.yc-post-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0;
	text-transform: none;
}

.yc-post-chips .wp-block-post-terms__separator {
	display: none;
}

:is(.yc-post-chips, .yc-subcats .wp-block-term-name) a {
	display: inline-block;
	padding: 10px var(--wp--preset--spacing--30);
	border: 1.5px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

:is(.yc-post-chips, .yc-subcats .wp-block-term-name) a:is(:hover, :focus) {
	border-color: var(--wp--preset--color--ink-deep);
}

/* With 16px sides both buttons share one row on a 390px phone. */
@media (max-width: 781.98px) {
	.yc-post-actions .wp-block-button__link {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/* The dot is decoration, so its alt text is empty and screen readers skip it. */
.yc-dot-separated > * + *::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: var(--wp--preset--spacing--20);
}

.yc-dot-separated a {
	color: inherit;
	text-decoration: none;
}

.wp-block-comment-template :is(li + li, .children) {
	margin-top: var(--wp--preset--spacing--30);
}

.wp-block-post-comments-form :is(textarea, input:not([type="submit"], [type="checkbox"], [type="hidden"])) {
	border: 1.5px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md);
}

.wp-block-post-comments-form textarea {
	height: 120px;
	min-height: 120px;
}

/* Section "See all" links end in an arrow drawn in the link colour. */
.yc-see-all {
	font-weight: 600;
	white-space: nowrap;
}

.yc-see-all a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	text-decoration: none;
}

.yc-see-all a::after {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("assets/icons/arrow.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow.svg") center / contain no-repeat;
}

/* Sideways rows on phones (category bubbles, holiday cards, sub-category chips) bleed to the right edge so the next item peeks in. */
@media (max-width: 781.98px) {
	.yc-scroller {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-right: calc(-1 * var(--wp--style--root--padding-right));
		padding-right: var(--wp--style--root--padding-right);
	}

	.yc-scroller::-webkit-scrollbar {
		display: none;
	}

	.yc-scroller > * {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.wp-block-post-template.is-layout-grid.yc-scroller {
		display: flex;
		gap: var(--wp--preset--spacing--30);
	}

	.wp-block-post-template.yc-scroller > li {
		width: 245px;
	}
}

/* A theme photo that hasn't shipped yet holds its square as a sunken tile. */
.yc-photo--placeholder {
	aspect-ratio: 1;
	background: var(--wp--preset--color--sunken);
}

/* The label link is stretched over the whole bubble, so the photo is tappable with one tab stop per bubble. */
.yc-bubble {
	position: relative;
	flex: 0 1 136px;
	min-width: 0;
}

.yc-bubble .wp-block-image {
	width: calc(100% - 12px);
	max-width: 116px;
	margin: 6px;
}

.yc-bubble .wp-block-image img {
	width: 100%;
}

.yc-bubble .wp-block-image img,
.yc-bubble .yc-photo--placeholder {
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--wp--preset--color--lilac-tint);
}

.yc-bubble a {
	color: var(--wp--preset--color--ink-deep);
	text-decoration: none;
}

.yc-bubble a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 781.98px) {
	.yc-bubbles .wp-block-heading {
		text-align: start;
	}

	.yc-scroller > .yc-bubble {
		flex: 0 0 92px;
	}

	.yc-bubble .wp-block-image {
		max-width: 72px;
	}

	.yc-bubble .has-small-font-size {
		font-size: var(--wp--preset--font-size--eyebrow) !important;
	}
}

/* Hero: a grid, not columns, so on phones the art can sit between the title and the excerpt. */
.yc-hero-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(560px, 48%);
	grid-template-areas: "head art" "body art";
	align-items: center;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

.yc-hero-row > * {
	margin-block: 0;
}

.yc-hero-head {
	grid-area: head;
	align-self: end;
}

.yc-hero-art {
	grid-area: art;
}

.yc-hero-body {
	grid-area: body;
	align-self: start;
}

@media (max-width: 781.98px) {
	.yc-hero-row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "art" "body";
		row-gap: 20px;
	}

	.yc-hero-art {
		justify-self: center;
	}

	.yc-hero-buttons {
		flex-direction: column;
	}

	.yc-hero-buttons > .wp-block-button,
	.yc-hero-buttons .wp-block-button__link {
		width: 100%;
	}
}

/* Figma's 560x520 art box: a 480 circle at (60, 10), the 440 photo at (50, 50) and a 128 badge centred at (469, 82).
   Percentages keep that geometry at any width; vertical margins resolve against the width, so both are 50/560. */
.yc-hero-art {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 560 / 520;
}

.yc-hero-art::before {
	content: "";
	position: absolute;
	top: 1.92%;
	left: 10.71%;
	width: 85.71%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--lilac);
}

.yc-hero-art .wp-block-post-featured-image {
	position: relative;
	width: 78.57%;
	margin: 8.93% 0 0 8.93%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xl);
}

.yc-hero-art .yc-hero-badge {
	position: absolute;
	top: 3.46%;
	right: 4.82%;
	display: grid;
	place-items: center;
	width: 128px;
	height: 128px;
	margin: 0;
	padding-inline: 20px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--wp--preset--color--lilac-deep);
	color: var(--wp--preset--color--canvas);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	rotate: 12deg;
}

@media (max-width: 781.98px) {
	.yc-hero-art .yc-hero-badge {
		width: 88px;
		height: 88px;
		padding-inline: 12px;
		font-size: var(--wp--preset--font-size--eyebrow);
	}
}

/* Home on phones: one set of sections, reordered (never duplicated). The zone's columns become display: contents,
   so the main column's sections join <main>'s flex column and take their place from their yc-m-N class.
   The flex gap spaces them; margins from the desktop order would land between the wrong neighbours. */
@media (max-width: 781.98px) {
	.yc-home {
		display: flex;
		flex-direction: column;
		row-gap: var(--wp--preset--spacing--50);
	}

	.yc-home > .yc-with-sidebar,
	.yc-home > .yc-with-sidebar > .wp-block-column:not(.yc-sidebar) {
		display: contents;
	}

	.yc-home > :not(.alignfull) {
		width: 100%;
	}

	.yc-home > *,
	.yc-home > .yc-with-sidebar > .wp-block-column > * {
		margin-block: 0;
	}

	.yc-m-1 { order: 1; }
	.yc-m-2 { order: 2; }
	.yc-m-3 { order: 3; }
	.yc-m-4 { order: 4; }
	.yc-m-5 { order: 5; }
	.yc-m-6 { order: 6; }
	.yc-m-7 { order: 7; }
	.yc-m-8 { order: 8; }
	.yc-m-9 { order: 9; }
	.yc-m-10 { order: 10; }
}

/* Archive header: on phones the count pill drops under the title. */
@media (max-width: 781.98px) {
	.yc-archive-title.is-layout-flex {
		flex-direction: column;
		align-items: flex-start;
	}
}

.yc-archive-header .wp-block-term-description {
	max-width: var(--wp--custom--layout--reading);
}

.yc-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.yc-breadcrumb a:is(:hover, :focus) {
	text-decoration: underline;
}

/* The chevron is decoration, so its alt text is empty and screen readers skip it. */
.yc-breadcrumb > * + *::before {
	content: "›";
	content: "›" / "";
	margin-inline-end: var(--wp--preset--spacing--20);
}

/* The term list steps aside so its chips share one row (one scroller on phones) with the "All" chip. */
.yc-subcats.is-layout-flex {
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--40);
}

.yc-subcats .wp-block-term-template {
	display: contents;
}

.yc-subcats .wp-block-term {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: start;
}

.yc-subcats .wp-block-term-name {
	margin: 0;
}

/* In-grid ad slots are list items in the card grid, spanning the whole row. */
.wp-block-post-template > .yc-ad-slot {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* On desktop the before-footer slot sits just under the grid, so a slot that ends the grid would stack two ads. */
@media (min-width: 782px) {
	.wp-block-post-template > .yc-ad-slot:last-child {
		display: none;
	}
}

/* Pagination: 44px round page numbers (the "…" too) and Outline pills for Previous / Next. */
.wp-block-query-pagination,
.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination > * {
	margin: 0;
}

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--canvas);
	color: var(--wp--preset--color--ink-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.wp-block-query-pagination a.page-numbers:is(:hover, :focus) {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--ink-deep);
}

.wp-block-query-pagination .page-numbers.current {
	box-shadow: none;
	background-color: var(--wp--preset--color--ink-deep);
	color: var(--wp--preset--color--canvas);
}

.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	padding: 14px var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--ink-deep);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--ink-deep);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.wp-block-query-pagination :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):is(:hover, :focus) {
	border-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
}

/* Numbers render with core's midSize 2; phones drop the outer neighbour beside a "…", leaving 1 2 … last. */
@media (max-width: 781.98px) {
	.wp-block-query-pagination-numbers .current + * + a.page-numbers:has(+ .dots),
	.wp-block-query-pagination-numbers .dots + a.page-numbers:has(+ * + .current) {
		display: none;
	}

	/* Past page 1 the Previous pill joins in, so the numbers take their own line above Previous / Next. */
	.wp-block-query-pagination:has(.wp-block-query-pagination-previous) {
		row-gap: var(--wp--preset--spacing--30);
	}

	/* Seven 44px numbers fit a 390px phone with 4px gaps. */
	.wp-block-query-pagination:has(.wp-block-query-pagination-previous) .wp-block-query-pagination-numbers {
		order: -1;
		flex-basis: 100%;
		justify-content: center;
		gap: var(--wp--preset--spacing--10);
	}
}