/**
 * MHM Rentiva - CSS Variables (Design Tokens)
 *
 * This file contains all design tokens and ensures
 * consistency across the project. Changes should be made here.
 */

:root {
	/* === CORE COLORS (Linked to WP Global Presets) === */
	--mhm-primary: var(--wp--preset--color--primary, #2563eb);
	--mhm-primary-dark: #1d4ed8;
	--mhm-secondary: var(--wp--preset--color--secondary, #1e40af);
	--mhm-secondary-dark: #1e3a8a;

	/* === STATUS DARK VARIANTS === */
	--mhm-success-dark: #005a87;
	--mhm-error-dark: #b32d2e;
	--mhm-warning-dark: #b08800;

	/* === INDEPENDENT CONTROL BUTTONS === */
	--mhm-btn-bg: var(--wp--preset--color--btn-bg, var(--mhm-primary));
	--mhm-btn-color: var(--wp--preset--color--white, #ffffff);
	--mhm-btn-hover-bg: color-mix(in srgb, var(--mhm-btn-bg), #000 15%);

	/* === HOVER & INTERACTION BACKGROUNDS === */
	--mhm-bg-hover: #f0f0f1;

	/* Price */
	--mhm-price-color: var(--wp--preset--color--price-color, #059669);

	/* Typography and Other Base Colors */
	--mhm-text-primary: var(--wp--preset--color--text, #1f2937);
	--mhm-text-secondary: var(--mhm-gray-600);

	/* Status Colors (Error, Success, etc.) */
	--mhm-success: var(--wp--preset--color--success, #0073E6);
	--mhm-warning: var(--wp--preset--color--warning, #dba617);
	--mhm-error: var(--wp--preset--color--error, #d63638);
	--mhm-info: #0891b2;

	/* Neutral Colors (Linked to Theme Presets where applicable) */
	--mhm-white: var(--wp--preset--color--white, #ffffff);
	--mhm-black: #000000;
	--mhm-gray-50: #f9f9f9;
	--mhm-gray-100: var(--wp--preset--color--gray-light, #f0f0f1);
	--mhm-gray-200: #c3c4c7;
	--mhm-gray-300: #a7aaad;
	--mhm-gray-400: #8c8f94;
	--mhm-gray-500: var(--wp--preset--color--gray, #646970);
	--mhm-gray-600: #50575e;
	--mhm-gray-700: #3c434a;
	--mhm-gray-800: var(--wp--preset--color--gray-dark, #2c3338);
	--mhm-gray-900: #1d2327;

	/* Background Colors */
	--mhm-bg-primary: var(--mhm-white);
	--mhm-bg-secondary: var(--mhm-gray-50);
	--mhm-bg-tertiary: var(--mhm-gray-100);
	--mhm-bg-card: var(--mhm-white);
	--mhm-bg-overlay: rgba(0, 0, 0, 0.5);

	/* Text Colors */
	--mhm-text-primary: var(--wp--preset--color--text, #1f2937);
	--mhm-text-secondary: var(--mhm-gray-600);
	--mhm-text-tertiary: var(--mhm-gray-500);
	--mhm-text-inverse: var(--mhm-white);
	--mhm-text-link: var(--mhm-primary);
	--mhm-text-link-hover: var(--mhm-primary-dark);

	/* Border Colors */
	--mhm-border-primary: var(--mhm-gray-200);
	--mhm-border-secondary: var(--mhm-gray-300);
	--mhm-border-focus: var(--mhm-primary);
	--mhm-border-error: var(--mhm-error);

	/* === TYPOGRAPHY === */

	/* Font Families */
	--mhm-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--mhm-font-display: "Plus Jakarta Sans", var(--mhm-font-primary);
	--mhm-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

	/* Font Sizes */
	--mhm-text-xs: 0.75rem;
	--mhm-text-sm: 0.875rem;
	--mhm-text-base: 1rem;
	--mhm-text-lg: 1.125rem;
	--mhm-text-xl: 1.25rem;
	--mhm-text-2xl: 1.5rem;
	--mhm-text-3xl: 1.875rem;
	--mhm-text-4xl: 2.25rem;

	/* Font Weights */
	--mhm-font-light: 300;
	--mhm-font-normal: 400;
	--mhm-font-medium: 500;
	--mhm-font-semibold: 600;
	--mhm-font-bold: 700;

	/* Line Heights */
	--mhm-leading-tight: 1.25;
	--mhm-leading-normal: 1.5;
	--mhm-leading-relaxed: 1.75;

	/* === SIZES === */

	/* Spacing (Margin/Padding) */
	--mhm-space-0: 0;
	--mhm-space-1: 0.25rem;
	--mhm-space-2: 0.5rem;
	--mhm-space-3: 0.75rem;
	--mhm-space-4: 1rem;
	--mhm-space-5: 1.25rem;
	--mhm-space-6: 1.5rem;
	--mhm-space-8: 2rem;
	--mhm-space-10: 2.5rem;
	--mhm-space-12: 3rem;
	--mhm-space-16: 4rem;
	--mhm-space-20: 5rem;

	/* Border Radius */
	--mhm-radius-none: 0;
	--mhm-radius-sm: 0.125rem;
	--mhm-radius-base: 0.25rem;
	--mhm-radius-md: 0.375rem;
	--mhm-radius-lg: 0.5rem;
	--mhm-radius-xl: 0.75rem;
	--mhm-radius-2xl: 1rem;
	--mhm-radius-full: 9999px;

	/* Shadows */
	--mhm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--mhm-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--mhm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--mhm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--mhm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--mhm-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* 
 * GIB (Gutenberg Integration Bridge)
 * Ensures that changes in the Gutenberg sidebar (Link/Text/Typo) 
 * are forced into the local variables used by the plugin components.
 */
.wp-block-mhm-rentiva-search {
	--mhm-primary: var(--wp--style--color--link, var(--wp--preset--color--primary, #2563eb)) !important;
	--mhm-text-primary: var(--wp--style--color--text, var(--wp--preset--color--text, #1f2937)) !important;
	--mhm-btn-bg: var(--mhm-primary) !important;

	/* Font & Color Inheritance */
	font-family: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
	color: inherit !important;
}

/* Ensure Sidebar typography settings apply to labels and inputs (e.g. font family, weight) */
.wp-block-mhm-rentiva-search label,
.wp-block-mhm-rentiva-search input,
.wp-block-mhm-rentiva-search select,
.wp-block-mhm-rentiva-search button {
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

/* === BLOCK WRAPPER & BACKGROUND SYSTEM === */
.wp-block-mhm-rentiva-search {
	display: block !important;
	padding: 0 !important;
	overflow: visible;
	/* Default to show shadows */
	box-sizing: border-box !important;
	transition: background 0.3s ease;
}

/* Form Container Style Inheritance - Applied to wrapper when background is active */
.wp-block-mhm-rentiva-search[class*="has-background"],
.wp-block-mhm-rentiva-search[style*="background"] {
	border-radius: 16px !important;
	overflow: hidden !important;
	/* Force rounded corners on contents */
}

/* Ensure background color from Block Wrapper covers everything inside */
.wp-block-mhm-rentiva-search[class*="has-background"] .rv-search-block-wrapper,
.wp-block-mhm-rentiva-search[class*="has-background"] .rv-search-form,
.wp-block-mhm-rentiva-search[class*="has-background"] .rv-search-block-wrapper--compact,
.wp-block-mhm-rentiva-search[class*="has-background"] .rv-search-form-compact,
.wp-block-mhm-rentiva-search[style*="background"] .rv-search-block-wrapper,
.wp-block-mhm-rentiva-search[style*="background"] .rv-search-form,
.wp-block-mhm-rentiva-search[style*="background"] .rv-search-block-wrapper--compact,
.wp-block-mhm-rentiva-search[style*="background"] .rv-search-form-compact {
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	width: 100%;
	/* Removed !important to allow user-defined dimensions */
	margin: 0 !important;
	padding: 15px;
	/* Default tighter padding, allows override */
	box-sizing: border-box !important;
}

/* Preserve the blue accent line when background is active */
.wp-block-mhm-rentiva-search[class*="has-background"] .rv-search-form-compact::before,
.wp-block-mhm-rentiva-search[style*="background"] .rv-search-form-compact::before {
	display: block !important;
	opacity: 0.8;
}

/* Text & Label Color Inheritance */
.wp-block-mhm-rentiva-search[class*="has-background"] label,
.wp-block-mhm-rentiva-search[style*="background"] label,
.wp-block-mhm-rentiva-search.has-text-color label,
.wp-block-mhm-rentiva-search.has-text-color * {
	color: inherit !important;
}

/* Link Color Specificity Booster */
.wp-block-mhm-rentiva-search a,
.wp-block-mhm-rentiva-search .rv-toggle-filters-compact,
.wp-block-mhm-rentiva-search .js-toggle-filters span {
	color: inherit !important;
	text-decoration: inherit;
}

/* Dimension consistency */
.wp-block-mhm-rentiva-search .rv-search-form,
.wp-block-mhm-rentiva-search .rv-search-form-compact {
	width: 100%;
}

.wp-block-mhm-rentiva-search .rv-search-form-compact {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

/* Global Border Box Reset for Search Block */
.wp-block-mhm-rentiva-search * {
	box-sizing: border-box !important;
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
	:root {
		--mhm-bg-primary: var(--mhm-gray-900);
		--mhm-bg-secondary: var(--mhm-gray-800);
		--mhm-bg-tertiary: var(--mhm-gray-700);
		--mhm-bg-card: var(--mhm-gray-800);
		--mhm-text-primary: var(--mhm-gray-100);
		--mhm-text-secondary: var(--mhm-gray-300);
		--mhm-border-primary: var(--mhm-gray-700);
	}
}