/* Custom page templates, sidebar and 404. */
.ylb-template-full-width .wp-block-post-content > :where(:not(.alignfull)) {
	box-sizing: border-box;
	padding-inline: 1.5rem;
}

.ylb-template-wide-image .ylb-wide-image-cover .wp-block-post-title {
	text-shadow: 0 2px 12px rgba(59, 26, 79, 0.45);
}

.ylb-template-sidebar .wp-block-post-title {
	margin-top: 0;
}

.ylb-sidebar .wp-block-latest-posts {
	padding-left: 0;
	list-style: none;
}

.ylb-sidebar .wp-block-latest-posts li {
	margin-bottom: 0.75rem;
}

.ylb-sidebar .wp-block-latest-posts a {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--plum);
}

.ylb-sidebar .wp-block-image.is-style-ylb-ring {
	margin-inline: auto;
}

.ylb-404 {
	text-align: center;
}

.ylb-404 .ylb-404-stars {
	gap: 1rem;
	align-items: center;
}

.ylb-404 .ylb-404-deco {
	margin: 0;
}

.ylb-404 .wp-block-search {
	margin-block: 1.5rem;
}

/*
 * Blank Canvas: the page always fills the screen in one colour. The main area
 * already grows to the full screen height (style.css); here the page content
 * grows with it, and its last section stretches to the bottom, so a short page
 * never shows its section colour on top and the body colour underneath.
 */
.wp-site-blocks > main.ylb-blank-canvas {
	display: flex;
	flex-direction: column;
}

.ylb-blank-canvas > .wp-block-post-content {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
}

.ylb-blank-canvas > .wp-block-post-content > :last-child {
	flex-grow: 1;
	margin-bottom: 0;
}

/*
 * Page spacing: templates give page content room below the header and above the
 * footer. When the content itself starts (or ends) with a full-width coloured
 * section, such as a cover, the home hero or the newsletter band, that edge sits
 * flush against the header (or footer) as designed, with no cream gap.
 */
.wp-site-blocks > main:has(> .wp-block-post-content:first-child > :first-child:is(.alignfull.has-background, .wp-block-cover.alignfull, .ylb-hero, .ylb-about-featured, .ylb-newsletter)) {
	padding-top: 0 !important;
}

.wp-site-blocks > main:has(> .wp-block-post-content:last-child > :last-child:is(.alignfull.has-background, .wp-block-cover.alignfull, .ylb-hero, .ylb-about-featured, .ylb-newsletter)) {
	padding-bottom: 0 !important;
}

/*
 * Comment form on posts: the theme's form fields. The extra `p` in the field
 * selectors outranks core's comment form rules whatever order they load in.
 */
.wp-block-post-comments-form .comment-reply-title {
	margin-bottom: 0.75rem;
	color: var(--wp--preset--color--plum);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.wp-block-post-comments-form .comment-form p {
	margin: 0 0 1rem;
}

.wp-block-post-comments-form .comment-form p label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--plum);
	font-weight: 600;
}

.wp-block-post-comments-form .comment-form .required {
	color: var(--wp--preset--color--heart-red);
	text-decoration: none;
}

.wp-block-post-comments-form .comment-form p input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]),
.wp-block-post-comments-form .comment-form p textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: clamp(44px, 3.3vw, 52px);
	padding: 0.55em 1.1em;
	border: 1px solid rgba(59, 26, 79, 0.14);
	border-radius: clamp(8px, 0.8vw, 12px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink-brown);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(15px, 1.22vw, 17px);
}

.wp-block-post-comments-form .comment-form p textarea {
	min-height: 9rem;
	resize: vertical;
}

.wp-block-post-comments-form .comment-form p input:not([type="submit"]):not([type="checkbox"]):not([type="hidden"]):focus,
.wp-block-post-comments-form .comment-form p textarea:focus {
	border-color: var(--wp--preset--color--royal-purple);
	outline: 2px solid rgba(74, 31, 99, 0.25);
	outline-offset: 1px;
}

/* "Save my name..." checkbox: on one line with its label. */
.wp-block-post-comments-form .comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.wp-block-post-comments-form .comment-form .comment-form-cookies-consent #wp-comment-cookies-consent {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.3em 0 0;
	accent-color: var(--wp--preset--color--royal-purple);
}

.wp-block-post-comments-form .comment-form .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	color: var(--wp--preset--color--ink-brown);
	font-weight: 400;
}

/*
 * Cloudflare Turnstile, added by a form plugin (Fluent Forms, Formidable,
 * MailPoet...). Cloudflare draws a fixed 300px box. When the form is narrower
 * (small phones, cards), the box is scaled down to fit instead of being cut
 * off. The box's parent measures the space; it is always a block element.
 */
:where(*):has(> .cf-turnstile, > .frm-cf-turnstile, > .mailpoet_turnstile_container) {
	container-type: inline-size;
}

.cf-turnstile,
.frm-cf-turnstile,
.mailpoet_turnstile_container {
	max-width: 100%;
	min-height: 65px;
	margin-block: 0.25rem 1rem;
}

@container (max-width: 299px) {
	.cf-turnstile,
	.frm-cf-turnstile,
	.mailpoet_turnstile_container {
		zoom: 0.9;
	}
}

@container (max-width: 269px) {
	.cf-turnstile,
	.frm-cf-turnstile,
	.mailpoet_turnstile_container {
		zoom: 0.8;
	}
}

@container (max-width: 239px) {
	.cf-turnstile,
	.frm-cf-turnstile,
	.mailpoet_turnstile_container {
		zoom: 0.7;
	}
}

/* In the centred newsletter band the box sits centred on its own row. */
.ylb-newsletter__band :is(.cf-turnstile, .frm-cf-turnstile, .mailpoet_turnstile_container) {
	display: flex;
	justify-content: center;
}

.ylb-newsletter__band :is(.fluentform, .frm_forms) .ff-el-group:has(.cf-turnstile) {
	flex-basis: 100%;
	margin: 0.75rem 0 0;
}