/*!
Theme Name: Yassah Lee Books Theme
Theme URI: https://yassahleebooks.com/
Author: Yassah Lee Books
Author URI: https://yassahleebooks.com/
Description: A warm, storybook block theme for children's author Yassah Lee. Every section of the home page is built from core blocks, so text, images, buttons and links can all be edited in the Site Editor.
Version: 2.2.30
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: yassah-lee-books-theme
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-menu, editor-style, featured-images, wide-blocks, translation-ready, blog

This theme, like WordPress, is licensed under the GPL.

Yassah Lee Books Theme was originally based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*
 * Shared front-end and editor styles.
 * Section-specific rules live in assets/css/*.css.
 */

/*
 * Shared storybook grain. Layer it over a section's own background colour:
 *   background-image: var(--ylb-grain);
 *   background-blend-mode: multiply; (or soft-light on dark colours)
 */
:root {
	--ylb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--ylb-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/*
 * Sticky footer: the page fills at least the viewport (minus the admin bar
 * when logged in) and the main area grows, so short pages keep the footer
 * at the bottom of the screen.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:has(> main) {
	flex-grow: 1;
}

/*
 * Plugin templates may not use a <main>, so pin the footer too. Covers the
 * theme's own footer part and plugins (such as Tutor LMS) that print the
 * footer template part themselves.
 */
.wp-site-blocks > .ylb-site-footer:last-child,
.wp-site-blocks > footer.wp-block-template-part:last-child {
	margin-top: auto;
}

/* Sections on the home page sit flush against each other. */
.wp-site-blocks > * + *,
.ylb-home > * + * {
	margin-block-start: 0;
}

.ylb-home {
	overflow-x: clip;
}

/* Heart divider: a thin gold rule with a red heart in the middle. */
.wp-block-separator.is-style-ylb-heart {
	position: relative;
	width: min(100%, 15.5em);
	max-width: 100%;
	height: 2px;
	margin-inline: auto;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--ylb-heart-line, var(--wp--preset--color--gold)) 12%, var(--ylb-heart-line, var(--wp--preset--color--gold)) 88%, transparent);
	opacity: 1;
	overflow: visible;
}

/*
 * A colour picked for the divider in the editor sets a solid background, which
 * hid the soft fade at the line's ends (the home hero divider). Keep the faded
 * storybook line and use the picked colour for it instead.
 */
.wp-block-separator.is-style-ylb-heart.has-background {
	background-color: transparent !important;
}

.wp-block-separator.is-style-ylb-heart.has-text-color {
	--ylb-heart-line: currentColor;
}

.wp-block-separator.is-style-ylb-heart::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.05em;
	height: 1.05em;
	transform: translate(-50%, -50%);
	background: var(--ylb-heart-color, var(--wp--preset--color--heart-red));
	-webkit-mask: url("assets/images/icons/heart.svg") center / contain no-repeat;
	mask: url("assets/images/icons/heart.svg") center / contain no-repeat;
}

/*
 * The heart divider is always centred, so a heading (or tagline) directly above
 * it is centred too, on every page and layout, including pages saved earlier. A
 * heading set to left or right alignment in the editor keeps that choice.
 */
:is(h1, h2, h3, h4, p):has(+ .wp-block-separator.is-style-ylb-heart):not(.has-text-align-left):not(.has-text-align-right) {
	text-align: center;
}

/* Decorative images don't steal clicks, unless someone links them in the editor. */
.ylb-deco:not(:has(a)) {
	pointer-events: none;
}

/* Linked icon images (header star and heart, or any image given this class) act like small buttons. */
.wp-block-image.ylb-icon-link a {
	display: inline-block;
	line-height: 0;
	border-radius: 50%;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.wp-block-image.ylb-icon-link a:hover,
.wp-block-image.ylb-icon-link a:focus-visible {
	transform: scale(1.15) rotate(-6deg);
	filter: drop-shadow(0 0 6px rgba(236, 162, 37, 0.65));
}

.wp-block-image.ylb-icon-link a:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.ylb-icon-link a {
		transition: none;
	}

	.wp-block-image.ylb-icon-link a:hover,
	.wp-block-image.ylb-icon-link a:focus-visible {
		transform: none;
	}
}

/* Accessible hidden text (used by the newsletter form label). */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	display: block;
	height: auto;
	left: 5px;
	top: 5px;
	width: auto;
	z-index: 100000;
	padding: 15px 23px 14px;
	background-color: #f1f1f1;
	color: #21759b;
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}