/*
Theme Name: Wagtail
Theme URI: https://tenfoldthemes.example/wagtail
Author: Tenfold Themes
Author URI: https://tenfoldthemes.example
Description: A warm-hearted block theme for pet product manufacturers and exporters. Ships with 18 hand-crafted patterns, four full-page layouts, a Dusk Walk dark style, locally hosted variable fonts and original paw-trail and bounding-dog artwork — everything editable in the Site Editor.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wagtail
Tags: block-theme, full-site-editing, block-patterns, block-styles, custom-colors, editor-style, featured-images, threaded-comments, translation-ready, wide-blocks, one-column, e-commerce, portfolio, blog
*/

/* ---------------------------------------------------------------------------
 * Focus visibility & motion
 * ------------------------------------------------------------------------- */

:where(a, button, input, summary, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 6px;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

a,
.wp-block-button__link,
.wp-element-button {
	transition: var(--wp--custom--transition);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * Block styles: Group — Card / Card (hover lift)
 * ------------------------------------------------------------------------- */

.is-style-card,
.is-style-card-hover {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--l);
	box-shadow: var(--wp--preset--shadow--card);
	padding: 1.75rem;
}

.is-style-card-hover {
	transition: var(--wp--custom--transition);
}

.is-style-card-hover:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-4px);
}

/* ---------------------------------------------------------------------------
 * Block style: Group — Speech bubble (testimonials)
 * ------------------------------------------------------------------------- */

.is-style-speech-bubble {
	position: relative;
	background: var(--wp--preset--color--tint);
	border-radius: var(--wp--custom--radius--l);
	padding: 1.75rem;
	margin-bottom: 1.25rem;
}

.is-style-speech-bubble::after {
	content: "";
	position: absolute;
	bottom: -16px;
	left: 2.25rem;
	width: 26px;
	height: 17px;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 22% 100%);
}

/* ---------------------------------------------------------------------------
 * Block styles: Image — Blob mask / Blob mask (alt)
 * ------------------------------------------------------------------------- */

.is-style-blob img,
.is-style-blob {
	border-radius: 58% 42% 55% 45% / 48% 52% 48% 52% !important;
	overflow: hidden;
}

.is-style-blob-alt img,
.is-style-blob-alt {
	border-radius: 44% 56% 48% 52% / 56% 44% 56% 44% !important;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Block style: List — Paw bullets
 * ------------------------------------------------------------------------- */

.is-style-paw-list {
	list-style: none;
	padding-left: 0.25rem;
}

.is-style-paw-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.625rem;
}

.is-style-paw-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.125rem;
	height: 1.125rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='15.5' rx='4.6' ry='4'/%3E%3Cellipse cx='5.4' cy='10.6' rx='2.1' ry='2.7'/%3E%3Cellipse cx='9.8' cy='7.3' rx='2.1' ry='2.8'/%3E%3Cellipse cx='14.8' cy='7.5' rx='2.1' ry='2.8'/%3E%3Cellipse cx='18.9' cy='11' rx='2.1' ry='2.7'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='15.5' rx='4.6' ry='4'/%3E%3Cellipse cx='5.4' cy='10.6' rx='2.1' ry='2.7'/%3E%3Cellipse cx='9.8' cy='7.3' rx='2.1' ry='2.8'/%3E%3Cellipse cx='14.8' cy='7.5' rx='2.1' ry='2.8'/%3E%3Cellipse cx='18.9' cy='11' rx='2.1' ry='2.7'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: contain;
}

/* ---------------------------------------------------------------------------
 * Block style: Separator — Paw trail
 * ------------------------------------------------------------------------- */

.is-style-paw-divider {
	border: none;
	height: 24px;
	width: 132px;
	background-color: var(--wp--preset--color--primary) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 24'%3E%3Cg transform='translate(14 12) rotate(-10)'%3E%3Cellipse cx='0' cy='4' rx='7.6' ry='6.5'/%3E%3Ccircle cx='-7' cy='-4.2' r='3.4'/%3E%3Ccircle cx='-2.2' cy='-7' r='3.4'/%3E%3Ccircle cx='2.8' cy='-6.8' r='3.4'/%3E%3Ccircle cx='7.4' cy='-3.6' r='3.4'/%3E%3C/g%3E%3Cg transform='translate(66 10) rotate(4)'%3E%3Cellipse cx='0' cy='4' rx='7.6' ry='6.5'/%3E%3Ccircle cx='-7' cy='-4.2' r='3.4'/%3E%3Ccircle cx='-2.2' cy='-7' r='3.4'/%3E%3Ccircle cx='2.8' cy='-6.8' r='3.4'/%3E%3Ccircle cx='7.4' cy='-3.6' r='3.4'/%3E%3C/g%3E%3Cg transform='translate(118 12) rotate(12)'%3E%3Cellipse cx='0' cy='4' rx='7.6' ry='6.5'/%3E%3Ccircle cx='-7' cy='-4.2' r='3.4'/%3E%3Ccircle cx='-2.2' cy='-7' r='3.4'/%3E%3Ccircle cx='2.8' cy='-6.8' r='3.4'/%3E%3Ccircle cx='7.4' cy='-3.6' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 24'%3E%3Cg transform='translate(14 12) rotate(-10)'%3E%3Cellipse cx='0' cy='4' rx='7.6' ry='6.5'/%3E%3Ccircle cx='-7' cy='-4.2' r='3.4'/%3E%3Ccircle cx='-2.2' cy='-7' r='3.4'/%3E%3Ccircle cx='2.8' cy='-6.8' r='3.4'/%3E%3Ccircle cx='7.4' cy='-3.6' r='3.4'/%3E%3C/g%3E%3Cg transform='translate(66 10) rotate(4)'%3E%3Cellipse cx='0' cy='4' rx='7.6' ry='6.5'/%3E%3Ccircle cx='-7' cy='-4.2' r='3.4'/%3E%3Ccircle cx='-2.2' cy='-7' r='3.4'/%3E%3Ccircle cx='2.8' cy='-6.8' r='3.4'/%3E%3Ccircle cx='7.4' cy='-3.6' r='3.4'/%3E%3C/g%3E%3Cg transform='translate(118 12) rotate(12)'%3E%3Cellipse cx='0' cy='4' rx='7.6' ry='6.5'/%3E%3Ccircle cx='-7' cy='-4.2' r='3.4'/%3E%3Ccircle cx='-2.2' cy='-7' r='3.4'/%3E%3Ccircle cx='2.8' cy='-6.8' r='3.4'/%3E%3Ccircle cx='7.4' cy='-3.6' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Utility: chips (spec badges — MOQ, lead time, model numbers)
 * ------------------------------------------------------------------------- */

.wagtail-chip {
	display: inline-block;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	padding: 0.2rem 0.85rem;
}
/* ---------------------------------------------------------------------------
 * Palette-slug guard: the standard palette includes a slug named "border".
 * When used as a *text* color, WordPress emits `.has-border-color`, which core
 * pairs with `:where(.has-border-color){border-style:solid}`; with the default
 * medium width that paints a stray ~3px box around the text. Zero the width
 * here — genuine borders set an explicit width (inline or via block-style
 * classes) that overrides this 0-specificity rule.
 * ------------------------------------------------------------------------- */
:where(.has-border-color) {
	border-width: 0;
}