/**
 * Central @wordpress/components theme, Material Design 3 style.
 * Unscoped — applies to any block using WP Components. Front-end only.
 */

:root {
	/* Color roles */
	--wpc-primary: var( --wp--preset--color--leaf, #2f5233 );
	--wpc-on-primary: var( --wp--preset--color--cream, #faf6ee );
	--wpc-primary-container: color-mix( in srgb, var( --wpc-primary ) 22%, white );
	--wpc-on-primary-container: color-mix( in srgb, var( --wpc-primary ) 85%, black );

	--wpc-secondary: color-mix( in srgb, var( --wpc-primary ) 55%, #5c6b57 );
	--wpc-on-secondary: var( --wpc-on-primary );
	--wpc-secondary-container: color-mix( in srgb, var( --wpc-secondary ) 20%, white );
	--wpc-on-secondary-container: color-mix( in srgb, var( --wpc-secondary ) 85%, black );

	--wpc-tertiary: var( --wp--preset--color--neon, #d6f24b );
	--wpc-on-tertiary: var( --wp--preset--color--dark-leaf, #1f3823 );
	--wpc-tertiary-container: var( --wp--preset--color--light-green-cyan, #d8f5e6 );
	--wpc-on-tertiary-container: var( --wp--preset--color--dark-leaf, #1f3823 );

	--wpc-surface: var( --wp--preset--color--cream, #faf6ee );
	--wpc-surface-variant: color-mix( in srgb, var( --wpc-surface ) 88%, black );
	--wpc-surface-container: color-mix( in srgb, var( --wpc-surface ) 94%, black );
	--wpc-surface-container-high: color-mix( in srgb, var( --wpc-surface ) 88%, black );
	--wpc-on-surface: #1c1c1a;
	--wpc-on-surface-variant: #46483f;

	--wpc-outline: color-mix( in srgb, var( --wpc-on-surface ) 45%, transparent );
	--wpc-outline-variant: color-mix( in srgb, var( --wpc-on-surface ) 18%, transparent );

	--wpc-error: var( --wp--preset--color--vivid-red, #cc1818 );
	--wpc-on-error: #fff;
	--wpc-error-container: color-mix( in srgb, var( --wpc-error ) 18%, white );
	--wpc-on-error-container: color-mix( in srgb, var( --wpc-error ) 80%, black );

	--wpc-success: #00a32a;
	--wpc-on-success: #fff;
	--wpc-success-container: #dcf7e3;
	--wpc-on-success-container: color-mix( in srgb, var( --wpc-success ) 75%, black );

	--wpc-warning: var( --wp--preset--color--luminous-vivid-amber, #b26a00 );
	--wpc-on-warning: #1c1c1a;
	--wpc-warning-container: #fff3cd;
	--wpc-on-warning-container: color-mix( in srgb, var( --wpc-warning ) 80%, black );

	--wpc-info: var( --wp--preset--color--vivid-cyan-blue, #0073aa );
	--wpc-on-info: #fff;
	--wpc-info-container: #cbf6ff;
	--wpc-on-info-container: color-mix( in srgb, var( --wpc-info ) 80%, black );

	/* Shape scale */
	--wpc-shape-none: 0;
	--wpc-shape-xs: 4px;
	--wpc-shape-sm: 8px;
	--wpc-shape-md: 12px;
	--wpc-shape-lg: 16px;
	--wpc-shape-xl: 28px;
	--wpc-shape-full: 9999px;

	/* Elevation */
	--wpc-elevation-0: none;
	--wpc-elevation-1: 0 1px 2px rgba( 0, 0, 0, 0.3 ), 0 1px 3px 1px rgba( 0, 0, 0, 0.15 );
	--wpc-elevation-2: 0 1px 2px rgba( 0, 0, 0, 0.3 ), 0 2px 6px 2px rgba( 0, 0, 0, 0.15 );
	--wpc-elevation-3: 0 1px 3px rgba( 0, 0, 0, 0.3 ), 0 4px 8px 3px rgba( 0, 0, 0, 0.15 );

	/* Type scale */
	--wpc-label-large: var( --wp--preset--font-size--normal, 14px );
	--wpc-body-large: var( --wp--preset--font-size--medium, 16px );
	--wpc-title-medium: var( --wp--preset--font-size--medium, 16px );
	--wpc-title-large: var( --wp--preset--font-size--large, 22px );

	--wpc-font-body: var( --wp--preset--font-family--body, var( --wp--preset--font-family--system-sans-serif ) );
	--wpc-font-heading: var( --wp--preset--font-family--heading, var( --wp--preset--font-family--system-serif ) );

	/* Kept in sync with .components-modal__content's margin-top below. */
	--wpc-modal-header-height: 56px;
}

.components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var( --wpc-font-body );
	border-radius: var( --wpc-shape-full );
	font-size: var( --wpc-label-large );
	font-weight: 500;
	letter-spacing: 0.01em;
	height: auto;
	min-height: 40px;
	padding: 0 20px;
}

/* Overrides WP core's narrower icon+text padding (same specificity; this file loads after wp-components). */
.components-button.has-icon.has-text {
	padding: 0 20px 0 16px;
	gap: 8px;
}

/* Filled */
.components-button.is-primary {
	background: var( --wpc-primary );
	color: var( --wpc-on-primary );
	border: none;
	box-shadow: none;
}

.components-button.is-primary:hover:not( :disabled ) {
	background: var( --wpc-primary );
	filter: brightness( 1.08 );
	color: var( --wpc-on-primary );
}

/* Outlined */
.components-button.is-secondary {
	background: transparent;
	color: var( --wpc-primary );
	border: 1px solid var( --wpc-outline );
	box-shadow: none;
}

.components-button.is-secondary:hover:not( :disabled ) {
	background: color-mix( in srgb, var( --wpc-primary ) 8%, transparent );
	color: var( --wpc-primary );
}

/* Text */
.components-button.is-tertiary {
	background: transparent;
	color: var( --wpc-primary );
	border: none;
	padding: 0 14px;
}

.components-button.is-tertiary:hover:not( :disabled ) {
	background: color-mix( in srgb, var( --wpc-primary ) 8%, transparent );
	color: var( --wpc-primary );
}

/* Link: reads as inline text, not a control — stays compact rather than
   inheriting the base min-height. */
.components-button.is-link {
	border-radius: var( --wpc-shape-xs );
	color: var( --wpc-primary );
	text-decoration: none;
	padding: 2px 4px;
	height: auto;
	min-height: 0;
	font-weight: 500;
}

.components-button.is-link:hover {
	text-decoration: underline;
}

.components-button.is-destructive {
	color: var( --wpc-error );
}

/* !important overrides WP core's default .is-pressed fill. */
.components-button.is-pressed {
	background: var( --wpc-primary ) !important;
	color: var( --wpc-on-primary ) !important;
}

.components-button.is-pressed:hover:not( :disabled ) {
	background: color-mix( in srgb, var( --wpc-primary ) 88%, #000 ) !important;
	color: var( --wpc-on-primary ) !important;
}

/* Icon-only: circular padding (outranks WP's .has-icon via an extra class). */
.components-button.has-icon:not( .has-text ) {
	padding: 8px;
	border-radius: var( --wpc-shape-full );
	color: var( --wpc-on-surface-variant );
}

.components-button.has-icon:not( .has-text ):hover:not( :disabled ) {
	background: color-mix( in srgb, var( --wpc-on-surface-variant ) 12%, transparent );
}

/* line-height: 1 removes leading; padding-top nudges descender-less labels back to center. */
.components-button:not( .has-icon ):not( .is-link ),
.components-button.has-text:not( .is-link ) {
	line-height: 1;
	padding-top: 3px;
}

/* Form fields: TextControl / SearchControl / SelectControl / Checkbox / Radio */

.components-base-control__label,
.components-input-control__label {
	font-size: var( --wpc-label-large );
	font-weight: 500;
	color: var( --wpc-on-surface-variant );
}

.components-select-control__input,
.components-text-control__input,
.components-search-control__input {
	border: 1px solid var( --wpc-outline );
	border-radius: 5px;
	background: var( --wpc-surface );
	color: var( --wpc-on-surface );
	padding: 8px 14px;
	min-height: 40px;
}

/* InputControl's visible border/radius live here, not on __input (emotion-injected at runtime, hence !important). */
.components-input-control__container,
.components-input-control__backdrop {
	border-radius: 5px !important;
}

.components-select-control__input:focus,
.components-text-control__input:focus,
.components-search-control__input:focus {
	border-color: var( --wpc-primary );
	box-shadow: 0 0 0 1px var( --wpc-primary );
}

.components-checkbox-control__input,
.components-radio-control__input {
	accent-color: var( --wpc-primary );
}

/* Notice */

.components-notice {
	border: 1px solid var( --wpc-outline-variant ) !important;
	border-radius: var( --wpc-shape-xs );
	padding: 10px 14px;
	color: var( --wp--preset--color--leaf );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	font-style: normal;
	font-weight: 200;
	align-items: center;
}

.components-notice__content {
	color: inherit;
}

.components-notice__dismiss {
	color: inherit;
}

.components-notice.is-success {
	background: var( --wpc-success-container );
	border-color: var( --wpc-success ) !important;
}

.components-notice.is-error {
	background: var( --wpc-error-container );
	border-color: var( --wpc-error ) !important;
}

.components-notice.is-warning {
	background: var( --wpc-warning-container );
	border-color: var( --wpc-warning ) !important;
}

.components-notice.is-info {
	background: var( --wpc-info-container );
	border-color: var( --wpc-info ) !important;
}

.components-spinner {
	color: var( --wpc-primary ) !important;
}

.components-tooltip {
	pointer-events: none;
}

/* Popover / DropdownMenu: portal to document.body, so unscoped. */

.components-popover .components-popover__content {
	border-radius: 8px;
	box-shadow: var( --wpc-elevation-2 );
	border: none;
	background: #fff;
}

.components-dropdown-menu__menu {
	background: #fff;
	border-radius: 8px;
	box-shadow: var( --wpc-elevation-2 );
}

/* Help flyout: plain positioned element, not a WP Popover, to avoid WP's positioning logic. */
.wpc-help-container {
	position: relative;
	display: inline-flex;
}

.wpc-help-btn.components-button.has-icon {
	padding: 1px;
	color: var( --wpc-on-surface-variant );
}

.wpc-help-popup {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	margin-top: 4px;
	padding: 12px;
	width: 90vw;
	max-width: 500px;
	white-space: normal;
	background: var( --wp--preset--color--white );
	border: 1px solid var( --wpc-outline-variant );
	border-radius: var( --wpc-shape-xs );
	box-shadow: var( --wpc-elevation-2 );
	font-size: 15px;
	line-height: 1.5;
}

/* Modal. */

.components-modal__screen-overlay {
	z-index: 100000; /* clears the WP admin bar */
	background: rgba( 0, 0, 0, 0.5 );
}

.components-modal__frame {
	position: relative; /* containing block for .wpc-modal-nav-row below */
	border-radius: var( --wpc-shape-sm );
	box-shadow: var( --wpc-elevation-3 );
	border: none;
}

.components-modal__content {
	overflow-y: auto;
}

/* Floating prev/next bar, absolutely positioned; pointer-events re-enabled per-button so it doesn't block content clicks. */
.wpc-modal-nav-row {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 24px;
	pointer-events: none;
}

.components-button.wpc-modal-nav-btn {
	pointer-events: auto;
	background: var( --wp--preset--color--white );
	border-radius: var( --wpc-shape-full );
	box-shadow: var( --wpc-elevation-2 );
}

.components-modal__frame {
	width: min( 1080px, 100% );
	height: min( 780px, 100% );
	max-height: min( 780px, 100% );
}

@media ( min-width: 1440px ) {

	.components-modal__frame {
		width: min( 1400px, 90vw );
		height: min( 920px, 90vh );
		max-height: min( 920px, 90vh );
	}
}

@media ( min-width: 1920px ) {

	.components-modal__frame {
		width: min( 1700px, 85vw );
		height: min( 1040px, 88vh );
		max-height: min( 1040px, 88vh );
	}
}

.components-modal__header {
	border-bottom: 1px solid var( --wpc-outline-variant );
	border-radius: var( --wpc-shape-sm ) var( --wpc-shape-sm ) 0 0;
	background: var( --wpc-surface-container );
	height: var( --wpc-modal-header-height );
	padding: 8px 24px;
	gap: 12px;
}

/* Close button: forces equal width/height (WP's .is-compact.has-icon otherwise wins on specificity, giving an oval) and enlarges the icon. */
.components-modal__header .components-button.is-compact.has-icon:not( .has-text ) {
	min-height: 32px;
	height: 32px;
	width: 32px;
	min-width: 32px;
	padding: 0;
	color: var( --wpc-on-surface );
}

.components-modal__header .components-button.is-compact.has-icon:not( .has-text ) svg {
	transform: scale( 1.15 );
}

.components-modal__header .components-modal__header-heading {
	font-family: var( --wpc-font-body );
	font-size: min( var( --wpc-title-large ), 20px );
	font-weight: 600;
}

.components-modal__content {
	margin-top: var( --wpc-modal-header-height );
}

/* Pagination: generic page-numbers control usable by any block. Classes follow WP's paginate_links() convention. */

.wpc-pagination {
	margin: 12px 0;
}

.wpc-pagination ul.page-numbers {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}

.wpc-pagination .page-numbers li {
	display: inline-block;
}

.wpc-pagination a.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 4px;
	border-radius: var( --wpc-shape-full );
	color: var( --wpc-on-surface );
	text-decoration: none;
	font-size: var( --wpc-label-large );
	font-weight: 400;
	cursor: pointer;
}

.wpc-pagination a.page-numbers:hover:not( .current ) {
	background: color-mix( in srgb, var( --wpc-on-surface ) 8%, transparent );
}

/* Current page: same box as other page-numbers links, filled/bold to read as selected. */
.wpc-pagination a.page-numbers.current {
	background: var( --wpc-primary );
	color: var( --wpc-on-primary );
	font-weight: 700;
	cursor: default;
}

.wpc-pagination .dots {
	padding: 0 4px;
	color: var( --wpc-on-surface-variant );
}

/* TabPanel */

.components-tab-panel__tabs {
	border-bottom: 1px solid var( --wpc-outline-variant );
	gap: 4px;
}

.components-tab-panel__tabs-item {
	font-size: var( --wpc-label-large );
	font-weight: 500;
	color: var( --wpc-on-surface-variant );
	padding: 10px 16px;
	border-radius: var( --wpc-shape-xs ) var( --wpc-shape-xs ) 0 0;
}

.components-tab-panel__tabs-item:hover {
	background-color: color-mix( in srgb, var( --wpc-primary ) 8%, transparent );
	color: var( --wpc-primary );
}

.components-tab-panel__tabs-item.is-active {
	color: var( --wpc-primary );
}

.components-tab-panel__tabs-item.is-active::after {
	background: var( --wpc-primary );
	height: 3px;
	border-radius: var( --wpc-shape-full );
}

/* Panel / PanelBody */

.components-panel__body {
	border-top: 1px solid var( --wpc-outline-variant );
}

.components-panel__body:last-child {
	border-bottom: 1px solid var( --wpc-outline-variant );
}

.components-panel__body-title {
	margin: 0;
}

/* Title row renders as a WP Button internally; reset its pill/icon shaping to a full-width row (same specificity trick as the Modal close-button override above). */
.components-panel__body-title .components-button.components-panel__body-toggle {
	width: 100%;
	justify-content: flex-start;
	border-radius: 0;
	padding: 12px 16px;
	font-weight: 500;
	color: var( --wpc-on-surface );
}

.components-panel__body-title .components-button.components-panel__body-toggle:hover:not( :disabled ) {
	background: color-mix( in srgb, var( --wpc-primary ) 6%, transparent );
}

.components-panel__body-toggle-icon {
	color: var( --wpc-on-surface-variant );
}

/* ToggleControl */

.components-form-toggle__track {
	background: var( --wpc-outline );
	border-radius: var( --wpc-shape-full );
}

.components-form-toggle.is-checked .components-form-toggle__track {
	background: var( --wpc-primary );
}

.components-form-toggle__thumb {
	background: var( --wpc-surface );
}

.components-form-toggle.is-disabled {
	opacity: 0.4;
}

/* Divider: renders as Ariakit's <hr role="separator">, CSS-module classed — no stable BEM class to target, so this targets the semantic role instead. */

hr[role="separator"] {
	border: none;
	border-top: 1px solid var( --wpc-outline-variant );
}

/* Snackbar */

.components-snackbar {
	background: var( --wpc-on-surface );
	color: var( --wpc-surface );
	border-radius: var( --wpc-shape-xs );
	box-shadow: var( --wpc-elevation-2 );
}

.components-snackbar__action.components-button.is-link {
	color: var( --wpc-tertiary-container );
}

.components-snackbar__dismiss-button {
	color: var( --wpc-surface );
}

/* ComboboxControl: core makes __suggestions-container (not __input) the visible box, and strips the inner <input>'s border via a higher-specificity selector — so it's styled here instead of the shared __input rules above. */

.components-combobox-control__suggestions-container {
	position: relative;
	border: 1px solid var( --wpc-outline );
	border-radius: 5px;
	background: #fff;
	min-height: 40px;
}

.components-combobox-control__suggestions-container:focus-within {
	border-color: var( --wpc-primary );
	box-shadow: 0 0 0 1px var( --wpc-primary );
}

/* Core's own input token paints over the container above — force it transparent so the white shows through. */
.components-combobox-control__suggestions-container input.components-combobox-control__input {
	background: transparent;
	/* TokenInput sets the HTML `size` attribute from the typed value's length, which sizes
	   the input to its content unless width is forced — without this it shrinks to fit as
	   you type instead of filling the container. */
	width: 100%;
}

/* Core renders this in-flow, growing the box and pushing siblings on open — float it below instead so layout stays still. Border/radius match the input box above. */
.components-form-token-field__suggestions-list {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 260px;
	border: 1px solid var( --wpc-outline );
	border-radius: 5px;
	box-shadow: var( --wpc-elevation-2 );
	background: #fff;
}