/*!******************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/base/_variables.css ***!
  \******************************************************************************************************************/
/**
 * Base Variables
 *
 * CSS custom properties and design tokens for the Mustard theme.
 *
 * @package mustard
 */

:root {
	/* ========================================================================
	   Colours (manipulated by JS)
	   ======================================================================== */
	--mu-color-primary: #2271b1;
	--mu-color-secondary: #646970;
	--mu-color-base: #f0f0f1;
	--mu-color-text: #23282d;
	--mu-color-highlight: #72aee6;
	--mu-color-warning: #f02d3a;
	--mu-color-accent: #e8e8e8;
	--mu-color-text-muted: #646970;
	--mu-color-subtle-bg: #f9f9f9;
	--mu-color-white: #fff;

	/* ------------------------------------------------------------------------
	   Semantic colour variables
	   ------------------------------------------------------------------------ */
	--mu-color-background: var(--mu-color-base);
	--mu-color-surface: var(--mu-color-white);
	--mu-color-border: var(--mu-color-accent);
	--mu-color-focus: var(--mu-color-primary);
	--mu-color-error: var(--mu-color-warning);
	--mu-color-success: #00a32a;
	--mu-color-info: var(--mu-color-highlight);

	/* ========================================================================
	   Fonts
	   ======================================================================== */
	--mu-font-mono: ui-monospace, 'Fira Code', 'Cascadia Code', 'Source Code Pro', menlo, monaco, consolas, 'Courier New', monospace;

	/* ========================================================================
	   Sizes
	   ======================================================================== */
	--mu-size-0: 0;
	--mu-size-xs: 0.25rem;
	--mu-size-s: 0.5rem;
	--mu-size-m: 0.75rem;
	--mu-size-l: 1rem;
	--mu-size-xl: 1.25rem;
	--mu-size-xxl: 1.5rem;

	/* ------------------------------------------------------------------------
	   Semantic size variables
	   ------------------------------------------------------------------------ */
	--mu-spacing-xs: var(--wp--preset--spacing--10, var(--mu-size-xs));
	--mu-spacing-s: var(--wp--preset--spacing--20, var(--mu-size-s));
	--mu-spacing-m: var(--wp--preset--spacing--30, var(--mu-size-m));
	--mu-spacing-l: var(--wp--preset--spacing--40, var(--mu-size-l));
	--mu-spacing-xl: var(--wp--preset--spacing--50, var(--mu-size-xl));
	--mu-spacing-xxl: var(--wp--preset--spacing--60, var(--mu-size-xxl));

	/* ========================================================================
	   Text shadows
	   ======================================================================== */
	--mu-text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.75);

	/* ========================================================================
	   Border radii
	   ======================================================================== */
	--mu-radius-xs: 0.175rem;
	--mu-radius-s: 0.375rem;
	--mu-radius-m: 0.75rem;
	--mu-radius-l: 1.75rem;
	--mu-radius-round: 50%;

	/* ========================================================================
	   Border widths
	   ======================================================================== */
	--mu-border-thin: 0.0625rem;
	--mu-border-thick: 0.125rem;

	/* ========================================================================
	   States
	   ======================================================================== */
	--mu-disabled-opacity: 0.5;
	--mu-disabled-filter: grayscale(0.5);
	--mu-state-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

	/* ========================================================================
	   Focus styles
	   ======================================================================== */
	--mu-focus-outline: var(--mu-border-thick) solid var(--mu-color-focus);
	--mu-focus-outline-radius: var(--mu-radius-xs);
	--mu-focus-outline-offset: var(--mu-border-thick);

	/* ========================================================================
	   Semantic transition variables
	   ======================================================================== */
	--mu-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-menu: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-opacity: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-transform: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-color: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-background: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-border: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--mu-transition-box-shadow: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/features/images/block-enhancements.css ***!
  \*************************************************************************************************************************************/
/**
 * Block Enhancements for Images
 *
 * CSS styles for block editor enhancements including friendly size names
 * and modern image attributes. This file provides styles for the block
 * editor interface improvements.
 *
 * @package Mustard\Assets\CSS\Features\Images
 */

/* ==========================================================================
   Block Editor Image Size Selection
   ========================================================================== */

/* Enhanced image size selector in block editor */
.editor-image-size-select {
	/* Ensure proper spacing and alignment */
	margin-bottom: 1rem;
}

.editor-image-size-select select {
	padding: 6px 8px;
	background-color: #fff;

	/* Consistent styling with WordPress admin */
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: #2c3338;
	font-size: 14px;
	line-height: 1.4;
}

/* Provide fallback for browsers without :focus-visible support */
.editor-image-size-select select:focus {
	/* WordPress focus styles */
	border-color: #007cba;
	border-radius: var(--mu-focus-outline-radius);
	box-shadow: 0 0 0 1px #007cba;
	outline: var(--mu-focus-outline);
	outline-offset: var(--mu-focus-outline-offset);
}

/* Remove focus styles on mouse clicks when :focus-visible is supported */
@supports selector(:focus-visible) {
	.editor-image-size-select select:focus:not(:focus-visible) {
		border-color: #8c8f94;
		border-radius: 4px;
		box-shadow: none;
		outline: none;
		outline-offset: 0;
	}
}

/* Apply focus styles for keyboard navigation */
.editor-image-size-select select:focus-visible {
	/* WordPress focus styles */
	border-color: #007cba;
	border-radius: var(--mu-focus-outline-radius);
	box-shadow: 0 0 0 1px #007cba;
	outline: var(--mu-focus-outline);
	outline-offset: var(--mu-focus-outline-offset);
}

/* ==========================================================================
   Modern Image Attributes
   ========================================================================== */

/* Ensure modern attributes are properly applied */
.wp-block-image img[fetchpriority='high'] {
	/* High priority loading for above-the-fold images */
	content-visibility: auto;
}

.wp-block-image img[decoding='async'] {
	/* Async decoding for better performance */
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

/* ==========================================================================
   Responsive Image Support
   ========================================================================== */

/* Ensure proper responsive behavior */
.wp-block-image img {
	display: block;
	height: auto;

	/* Responsive image behavior */
	max-width: 100%;
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Ensure proper focus indicators */
.wp-block-image:focus-within {
	/* Clear focus indication */
	outline: 2px solid #007cba;
	outline-offset: 2px;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

/* Loading state for images */
.wp-block-image.is-loading {
	/* Loading state styling */
	opacity: 0.7;
	transition: opacity var(--mu-transition-opacity);
}

.wp-block-image.is-loaded {
	/* Loaded state styling */
	opacity: 1;
}

/* ==========================================================================
   Error States
   ========================================================================== */

/* Error state for failed image loads */
.wp-block-image.has-error {
	padding: 1rem;
	background-color: #fcf0f1;

	/* Error state styling */
	border: 2px dashed #d63638;
	color: #d63638;
	text-align: center;
}

.wp-block-image.has-error::before {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 2rem;

	/* Error icon */
	content: '⚠';
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wp-block-image.is-loading,
	.wp-block-image.is-loaded {
		/* Disable transitions for users who prefer reduced motion */
		transition: none;
	}
}

/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/features/images/responsive-images.css ***!
  \************************************************************************************************************************************/
/**
 * Responsive Images
 *
 * CSS styles for responsive image functionality including picture elements,
 * srcset support, and responsive image behavior. This file provides styles
 * for the responsive image enhancements.
 *
 * @package Mustard\Assets\CSS\Features\Images
 */

/* ==========================================================================
   Picture Element Support
   ========================================================================== */

/* Ensure picture elements display properly */
picture {
	/* Proper picture element display */
	position: relative;
	max-width: 100%;
}

picture img {
	display: block;
	height: auto;

	/* Ensure images within picture elements are responsive */
	max-width: 100%;
}

/* ==========================================================================
   Responsive Image Behavior
   ========================================================================== */

/* Responsive image containers */
.responsive-image {
	/* Responsive image wrapper */
	position: relative;
	overflow: hidden;
}

.responsive-image img {
	display: block;

	/* Responsive image behavior */
	width: 100%;
	height: auto;
	transition: transform var(--mu-transition-transform);
	transform: translateZ(0);

	/* Performance optimizations */
	backface-visibility: hidden;

	/* Ensure responsive behavior */
	max-width: 100%;
}

/* ==========================================================================
   Image Loading States
   ========================================================================== */

/* Loading state for responsive images */
.responsive-image.is-loading {
	/* Loading state styling */
	opacity: 0.7;
	transition: opacity var(--mu-transition-opacity);
}

.responsive-image.is-loaded {
	/* Loaded state styling */
	opacity: 1;
}

/* ==========================================================================
   Format Switching
   ========================================================================== */

/* Modern format support indicators */
.image-has-webp::before {
	padding: 0.25rem 0.5rem;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 10;
	background: rgb(0 0 0 / 70%);
	border-radius: 0.25rem;
	color: white;
	font-size: 0.75rem;

	/* WebP format indicator */
	content: '🖼️';
}

/* ==========================================================================
   Retina Display Support
   ========================================================================== */

/* High-DPI display optimizations */
@media (resolution >= 192dpi) {
	.responsive-image img {
		/* Optimize for high-DPI displays */
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Ensure proper focus indicators for responsive images */
.responsive-image:focus-within {
	/* Clear focus indication */
	outline: 2px solid #007cba;
	outline-offset: 2px;
}

/* Screen reader support for responsive images */
.responsive-image img[alt] {
	/* Ensure alt text is properly handled */
	text-indent: 0;
}

/* ==========================================================================
   Error Handling
   ========================================================================== */

/* Error state for responsive images */
.responsive-image.has-error {
	display: flex;
	padding: 1rem;
	background-color: #fcf0f1;

	/* Error state styling */
	border: 2px dashed #d63638;
	color: #d63638;
	text-align: center;
	min-height: 100px;
	align-items: center;
	justify-content: center;
}

.responsive-image.has-error::before {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 2rem;

	/* Error icon */
	content: '⚠';
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.responsive-image img {
		/* Disable transitions for users who prefer reduced motion */
		transition: none;
	}

	.responsive-image.is-loading,
	.responsive-image.is-loaded {
		/* Disable loading transitions */
		transition: none;
	}
}

/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/features/images/image-placeholders.css ***!
  \*************************************************************************************************************************************/
/**
 * Image Placeholders
 *
 * Provides smooth loading placeholders for images using dominant color
 * and shimmer effects. Works with the data attributes generated by
 * ImagePlaceholders.php.
 *
 * @package Mustard\Assets\CSS\Features\Images
 */

/* ==========================================================================
   Image Container Base Styles
   ========================================================================== */

/* Containers maintain their own backgrounds - placeholder effects are on img only */

/* ==========================================================================
   Image Element Styles
   ========================================================================== */

/* Ensure images have proper transitions */
/* Don't set z-index - let themes control stacking with their pseudo-elements */
.wp-block-image:not(figure) img,
figure.wp-block-image img {
	transition: opacity var(--mu-transition-opacity);
}

/* Hide images with dominant color data until loaded */
/* Exclude SVGs */
.wp-block-image:not(figure) img[data-dominant-color]:not([src$='.svg']),
figure.wp-block-image img[data-dominant-color]:not([src$='.svg']) {
	opacity: 0;
	transition: opacity var(--mu-transition-slow), background-color var(--mu-transition-background);
}

/* Show images when loaded */
.wp-block-image:not(figure) img.loaded,
figure.wp-block-image img.loaded {
	opacity: 1;
}

/* Clear background when image is loaded */
img[data-dominant-color].loaded {
	background: none;
	animation: none;
}

/* ==========================================================================
   Shimmer Effect (Background-based, YouTube-style)
   ========================================================================== */

/* Apply placeholder background and shimmer directly to img elements */
/* Exclude SVGs and loaded images */
img[data-dominant-color]:not([src$='.svg']):not(.loaded) {
	display: block; /* Ensure background is visible */
	background: linear-gradient(90deg, var(--dominant-color, #f0f0f0) 0%, rgb(255 255 255 / 40%) 50%, var(--dominant-color, #f0f0f0) 100%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite linear;
	transition: background-color var(--mu-transition-background), opacity var(--mu-transition-slow);
}

/* Enhanced shimmer for images with transparency data */
/* Exclude SVGs */
img.has-transparency[data-dominant-color]:not(.loaded):not([src$='.svg']) {
	background: linear-gradient(90deg, var(--dominant-color, #f0f0f0) 0%, rgb(255 255 255 / 50%) 33%, rgb(255 255 255 / 50%) 66%, var(--dominant-color, #f0f0f0) 100%);
	background-size: 200% 100%;
	animation: shimmer 1.8s infinite linear; /* Slightly slower for transparency */
}

/* ==========================================================================
   Shimmer Animation (YouTube-style)
   ========================================================================== */

@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}

	100% {
		background-position: 200% 0;
	}
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Disable shimmer animation for all images */
	/* Exclude SVGs */
	img[data-dominant-color]:not([src$='.svg']):not(.loaded) {
		background: var(--dominant-color, #f0f0f0);
		animation: none;
	}

	/* Faster transitions for reduced motion */
	.wp-block-image:not(figure) img,
	figure.wp-block-image img {
		transition: opacity var(--mu-transition-fast);
	}
}

/* ==========================================================================
   Fallback for browsers without :has() support
   ========================================================================== */

/* Modern browsers with :has() support will use the rules above */

/* For older browsers, we'll fall back to the previous overlay approach */
@supports not (selector(:has(*))) {
	@keyframes shimmer-legacy {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	/* Disable legacy shimmer for reduced motion */
	@media (prefers-reduced-motion: reduce) {
		.mu-image-shimmer {
			animation: none;
		}
	}
	/* Legacy shimmer element (only created if needed) */
	.mu-image-shimmer {
		width: 200%;
		height: 100%;
		position: absolute;
		top: 0;
		left: -100%;
		z-index: 1;
		background: linear-gradient(90deg, transparent 0%, transparent 10%, rgb(255 255 255 / 40%) 50%, transparent 90%, transparent 100%);
		pointer-events: none;
		animation: shimmer-legacy 2s infinite ease-in-out;
	}

	/* Hide shimmer when image is loaded */
	.image-loaded .mu-image-shimmer {
		display: none;
	}
}

/*!************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/features/images/index.css ***!
  \************************************************************************************************************************/
/**
 * Images Features CSS Index
 *
 * Centralized imports for all Images feature CSS modules.
 * This file provides a unified entry point for all image-related styles.
 *
 * @package Mustard\Assets\CSS\Features\Images
 */

/* ==========================================================================
   Import All Images Feature Styles
   ========================================================================== */

/* Block editor enhancements */

/* Responsive image functionality */

/* Image placeholders */

/*!*******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/components/_frontend-loading.css ***!
  \*******************************************************************************************************************************/
/**
 * Frontend Loading Component
 *
 * Additional loading states and timeout indicators for very slow networks.
 * These complement the existing placeholder system.
 *
 * @package Mustard
 */

/* =============================================================================
   Frontend Enhancements
   ========================================================================== */

/**
 * Additional frontend-specific styles that complement the existing
 * image placeholder system in mu-image-placeholders.css
 */

/* =============================================================================
   Enhanced Loading States
   ========================================================================== */

/**
 * Additional loading states and timeout indicators for very slow networks
 * These complement the existing placeholder system
 */

/* Timeout indicator for very slow networks */
.mu-load-timeout {
	padding: 8px 12px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	background: rgb(0 0 0 / 80%);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
	pointer-events: none;
	color: var(--mu-color-white);
	font-size: 12px;
	font-weight: 500;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(4px);

	@media (width <= 768px) {
		padding: 6px 10px;
		font-size: 11px;
	}
}

/*!****************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./assets/src/css/states/_focus.css ***!
  \****************************************************************************************************************/
/**
 * Global focus styles.
 *
 * Scoped focus utilities for Mustard-specific contexts to prevent conflicts
 * with themes and plugins. These handle common focus patterns within
 * Mustard-controlled areas only.
 *
 * Uses :focus-visible for keyboard navigation with :focus as fallback for
 * older browsers. Removes focus styles on mouse clicks using @supports.
 *
 * @package Mustard
 */

/* =============================================================================
   Settings Page Focus Styles
   ========================================================================== */

/* Provide fallback for browsers without :focus-visible support */
.settings_page_mustard a:focus,
.settings_page_mustard button:focus,
.settings_page_mustard input:focus,
.settings_page_mustard select:focus,
.settings_page_mustard [tabindex]:not([tabindex='-1']):focus,
.settings_page_mustard textarea:focus {
	outline: var(--mu-focus-outline);
	border-radius: var(--mu-focus-outline-radius);
	outline-offset: var(--mu-focus-outline-offset);
}

/* Remove focus styles on mouse clicks when :focus-visible is supported */
@supports selector(:focus-visible) {
	.settings_page_mustard a:focus:not(:focus-visible),
	.settings_page_mustard button:focus:not(:focus-visible),
	.settings_page_mustard input:focus:not(:focus-visible),
	.settings_page_mustard select:focus:not(:focus-visible),
	.settings_page_mustard [tabindex]:not([tabindex='-1']):focus:not(:focus-visible),
	.settings_page_mustard textarea:focus:not(:focus-visible) {
		outline: none;
		border-radius: 0;
		outline-offset: 0;
	}
}

/* Apply focus styles for keyboard navigation */
.settings_page_mustard a:focus-visible,
.settings_page_mustard button:focus-visible,
.settings_page_mustard input:focus-visible,
.settings_page_mustard select:focus-visible,
.settings_page_mustard [tabindex]:not([tabindex='-1']):focus-visible,
.settings_page_mustard textarea:focus-visible {
	outline: var(--mu-focus-outline);
	border-radius: var(--mu-focus-outline-radius);
	outline-offset: var(--mu-focus-outline-offset);
}

/* =============================================================================
   Frontend Focus Styles (Mustard Features Only)
   ========================================================================== */

/* Scope to Mustard feature containers */
[class*='mu-'] a:focus,
[class*='mu-'] button:focus,
[class*='mu-'] input:focus,
[class*='mu-'] select:focus,
[class*='mu-'] [tabindex]:not([tabindex='-1']):focus,
[class*='mu-'] textarea:focus {
	outline: var(--mu-focus-outline);
	border-radius: var(--mu-focus-outline-radius);
	outline-offset: var(--mu-focus-outline-offset);
}

/* Remove focus styles on mouse clicks when :focus-visible is supported */
@supports selector(:focus-visible) {
	[class*='mu-'] a:focus:not(:focus-visible),
	[class*='mu-'] button:focus:not(:focus-visible),
	[class*='mu-'] input:focus:not(:focus-visible),
	[class*='mu-'] select:focus:not(:focus-visible),
	[class*='mu-'] [tabindex]:not([tabindex='-1']):focus:not(:focus-visible),
	[class*='mu-'] textarea:focus:not(:focus-visible) {
		outline: none;
		border-radius: 0;
		outline-offset: 0;
	}
}

/* Apply focus styles for keyboard navigation */
[class*='mu-'] a:focus-visible,
[class*='mu-'] button:focus-visible,
[class*='mu-'] input:focus-visible,
[class*='mu-'] select:focus-visible,
[class*='mu-'] [tabindex]:not([tabindex='-1']):focus-visible,
[class*='mu-'] textarea:focus-visible {
	outline: var(--mu-focus-outline);
	border-radius: var(--mu-focus-outline-radius);
	outline-offset: var(--mu-focus-outline-offset);
}

/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./assets/src/css/mu-front.css ***!
  \*********************************************************************************************************************************************************************************/
/**
 * Frontend Styles
 *
 * Main stylesheet for frontend-specific functionality.
 * Imports all component and feature stylesheets.
 *
 * @package Mustard
 */

/* Base */

/* Features */

/* Components */

/* States */


/*# sourceMappingURL=mu-front-style.min.css.map*/