/*
 * Preity Theme — Global Frontend Stylesheet
 *
 * Design tokens are managed via theme.json.
 * This file contains component-level styles, utilities, and RTL overrides.
 *
 * @package Preity
 * @since   1.0.0
 */

/* ============================================================================
   ACCESSIBILITY — Focus Styles (WCAG 2.1 AA)
   ============================================================================ */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Skip to content link */
.preity-skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	background: var(--wp--preset--color--primary);
	color: #fff;
	padding: 0.5rem 1rem;
	border-radius: 0 0 0.5rem 0.5rem;
	font-weight: 600;
	font-size: 0.875rem;
	z-index: 9999;
	text-decoration: none;
	transition: top 0.15s;
}
.preity-skip-link:focus {
	top: 0;
}

/* ============================================================================
   SITE HEADER
   ============================================================================ */

.preity-site-header {
	z-index: var(--wp--custom--z-index--sticky);
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background-color: rgba(255, 255, 255, 0.95) !important;
	transition: box-shadow var(--wp--custom--transition--base);
}

.preity-site-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--md);
}

/* ============================================================================
   DARK MODE TOGGLE
   ============================================================================ */

.preity-dark-mode-toggle {
	background: none;
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border-radius--full);
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--fast), border-color var(--wp--custom--transition--fast);
	font-size: 1rem;
	line-height: 1;
}

.preity-dark-mode-toggle:hover {
	background-color: var(--wp--preset--color--neutral-100);
}

.preity-mode-dark .preity-icon-sun  { display: inline; }
.preity-mode-dark .preity-icon-moon { display: none; }
.preity-mode-light .preity-icon-sun  { display: none; }
.preity-mode-light .preity-icon-moon { display: inline; }

/* ============================================================================
   DARK MODE — CSS Variable Overrides
   ============================================================================ */

.preity-mode-dark {
	--wp--preset--color--white:       #1A1A2E;
	--wp--preset--color--surface:     #1A1A2E;
	--wp--preset--color--neutral-50:  #16213E;
	--wp--preset--color--neutral-100: #0F0F23;
	--wp--preset--color--neutral-200: #374151;
	--wp--preset--color--neutral-600: #9CA3AF;
	--wp--preset--color--neutral-900: #F9FAFB;
	color-scheme: dark;
}

.preity-mode-dark .preity-site-header {
	background-color: rgba(26, 26, 46, 0.95) !important;
	border-bottom-color: #374151;
}

/* ============================================================================
   POST CARDS
   ============================================================================ */

.preity-post-card {
	transition: transform var(--wp--custom--transition--base),
	            box-shadow var(--wp--custom--transition--base);
	overflow: hidden;
}

.preity-post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--xl);
}

.preity-post-card .wp-block-post-featured-image img {
	transition: transform var(--wp--custom--transition--slow);
}

.preity-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* ============================================================================
   BUTTONS — Enhanced States
   ============================================================================ */

.wp-block-button__link {
	transition: background-color var(--wp--custom--transition--fast),
	            box-shadow var(--wp--custom--transition--fast),
	            transform var(--wp--custom--transition--fast);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--md);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/* ============================================================================
   RTL SUPPORT
   ============================================================================ */

[dir="rtl"] .preity-site-header .wp-block-navigation,
.preity-rtl .preity-site-header .wp-block-navigation {
	direction: rtl;
}

[dir="rtl"] .wp-block-quote,
.preity-rtl .wp-block-quote {
	border-inline-start: 4px solid var(--wp--preset--color--primary);
	border-inline-end: none;
	padding-inline-start: var(--wp--preset--spacing--6);
	padding-inline-end: 0;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

.preity-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.preity-gradient-text {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
	.preity-site-header .wp-block-group {
		flex-wrap: wrap;
	}
}

@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;
	}
}

/* ============================================================================
   SHOP — Product Grid Fix
   ============================================================================ */

/* Force product cards to use CSS Grid instead of Flexbox columns */
.wp-block-columns:has( > .wp-block-column > .wp-block-group .has-primary-color ) {
	display: grid !important;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) ) !important;
	flex-wrap: unset !important;
}

/* Ensure product card columns have minimum width */
.wp-block-columns .wp-block-column {
	min-width: 0;
	word-break: break-word;
}

/* Shop page specific — 3 column grid */
.page-id-shop .wp-block-columns,
body.page-template-page-full-width .wp-block-columns:not(.is-not-stacked-on-mobile) {
	flex-wrap: wrap;
}

body.page-template-page-full-width .wp-block-columns .wp-block-column {
	flex-basis: calc( 33.333% - 16px ) !important;
	min-width: 260px;
}

@media ( max-width: 768px ) {
	body.page-template-page-full-width .wp-block-columns .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ============================================================================
   SHOP — Product Cards Grid (HTML-based)
   ============================================================================ */

.preity-product-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: 24px;
	width: 100%;
}

.preity-product-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.preity-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(108, 99, 255, 0.12) !important;
}

.preity-buy-btn {
	transition: background 0.15s ease, transform 0.15s ease;
}

.preity-buy-btn:hover {
	background: #4F46E5 !important;
	transform: translateY(-1px);
}

@media ( max-width: 640px ) {
	.preity-product-grid {
		grid-template-columns: 1fr;
	}
}