/**
 * CSS Custom Properties (CSS Variables)
 * Hotel Chelsea Theme
 *
 * These variables can be used throughout the theme for consistent styling
 * and easy maintenance. Override these in child themes or via Customizer.
 */

:root {
	/* Primary Colors */
	--color-primary: #1D1D1D;
	--color-primary-dark: #1D1D1B;
	--color-primary-light: #4A4A4A;

	/* Secondary Colors - WCAG AA Compliant (4.5:1 contrast on white) */
	--color-secondary: #63737e; /* Original: #70838F (3.94:1) - Updated for accessibility */
	--color-secondary-light: #557080; /* Original: #5E8196 (4.15:1) - Darker for better contrast */
	--color-secondary-alpha: rgba(99, 115, 126, 0.8); /* Updated RGB values */

	/* Neutral Colors */
	--color-white: #fff;
	--color-black: #000;
	--color-gray-light: #EEEEEE;
	--color-gray: #d6d6d6;

	/* Typography */
	--font-primary: "Mute", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-size-base: 16px;
	--font-size-small: 14px;
	--font-size-large: 18px;
	--line-height-base: 1.5;

	/* Spacing */
	--spacing-xs: 8px;
	--spacing-sm: 16px;
	--spacing-md: 24px;
	--spacing-lg: 32px;
	--spacing-xl: 48px;

	/* Layout */
	--container-max-width: 1200px;
	--header-height: 100px;

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;

	/* Border Radius */
	--border-radius-sm: 3px;
	--border-radius-md: 5px;
	--border-radius-lg: 10px;
	--border-radius-circle: 50%;

	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);

	/* Z-index Scale */
	--z-index-header: 100;
	--z-index-dropdown: 200;
	--z-index-overlay: 300;
	--z-index-modal: 400;
	--z-index-tooltip: 500;
}

/**
 * Dark Mode Support (optional for future use)
 */
@media (prefers-color-scheme: dark) {
	:root {
		/* Override colors for dark mode if needed */
		/* Currently not implemented in theme */
	}
}

/**
 * Print Styles
 */
@media print {
	:root {
		--color-primary: #000;
		--color-secondary: #666;
		--shadow-sm: none;
		--shadow-md: none;
		--shadow-lg: none;
	}
}

/**
 * Accessibility Utilities
 */

/* Screen Reader Only - Hides content visually but keeps it accessible to screen readers */
.sr-only,
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.sr-only:focus,
.screen-reader-text:focus {
	background-color: var(--color-gray-light);
	clip: auto !important;
	clip-path: none;
	color: var(--color-primary);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: var(--z-index-modal);
}

/* Skip to content link for keyboard navigation */
.skip-link {
	background: var(--color-primary);
	color: var(--color-white);
	left: -9999px;
	padding: 10px 15px;
	position: absolute;
	text-decoration: none;
	z-index: var(--z-index-modal);
}

.skip-link:focus {
	left: 6px;
	top: 6px;
}

/* Improved focus styles for better keyboard navigation visibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--color-secondary);
	outline-offset: 2px;
}

/* Focus styles for mobile menu toggle - removed for touch devices */
.toggle_menu:focus,
.toggle_menu:focus-visible {
	outline: none;
}

/* Remove focus outline from navigation links on mobile */
.nav-custom a:focus,
.nav-custom a:focus-visible,
#primary-menu a:focus,
#primary-menu a:focus-visible {
	outline: none;
}

/* Ensure toggle button works as button */
.toggle_menu {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 10px;
}

.toggle_menu:hover {
	opacity: 0.8;
}

/* Reduced motion support for users with vestibular disorders */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Lazy loading background images - placeholder while loading */
.lazy-bg {
	background-color: var(--color-gray-light);
	background-image: none !important;
}

/* Smooth fade-in for lazy loaded backgrounds */
.bg_img {
	transition: opacity 0.3s ease;
}

.lazy-bg {
	opacity: 0.5;
}

/* Gallery page optimization - top-links absolute positioned */
.gallary_list {
	position: relative;
}

.gallary_list .top-links {
	/* Position absolute to not interfere with Masonry layout */
	position: absolute;
	top: 35px;
	left: 0;
	width: 100%;
	z-index: 10;
}

/* Mobile gallery - single column layout for small viewports */
@media (max-width: 576px) {
	.gallary_list .gallary_item {
		width: 100% !important;
		margin-bottom: var(--spacing-md);
		float: none;
		clear: both;
	}

	/* Adjust top-links positioning for mobile */
	.gallary_list .top-links {
		position: static;
		margin-bottom: var(--spacing-md);
	}
}