/**
 * Satya Photography — Theme Utilities & Elementor Compatibility
 *
 * Additional utility classes and Elementor override styles.
 *
 * @package Satya_Photography
 * @version 4.0.0
 */

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flex */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-center { align-items: center; justify-content: center; }
.flex-start { align-items: flex-start; }
.flex-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Gap */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }

/* Margin */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-6 { margin-top: 1.5rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-2 { padding: 0.5rem !important; }
.p-4 { padding: 1rem !important; }
.p-6 { padding: 1.5rem !important; }
.p-8 { padding: 2rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }

/* Width */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.max-w-sm { max-width: 640px !important; }
.max-w-md { max-width: 800px !important; }
.max-w-lg { max-width: 1024px !important; }

/* Text */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.font-heading { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-body) !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* Background */
.bg-cream { background-color: var(--color-cream) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-navy { background-color: var(--color-navy) !important; }
.bg-crimson { background-color: var(--color-crimson) !important; }
.bg-transparent { background-color: transparent !important; }

/* Border Radius */
.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Shadow */
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-none { box-shadow: none !important; }

/* Overflow */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }

/* Position */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.sticky { position: sticky !important; }

/* Opacity */
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

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

/* Not screen reader only — undo sr-only */
.not-sr-only {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* ==========================================================================
   ELEMENTOR COMPATIBILITY
   ========================================================================== */

/* Full-width Elementor sections */
.elementor-section-full_width .elementor-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Boxed Elementor sections respect theme container width */
.elementor-section-boxed .elementor-container {
	max-width: var(--container-max) !important;
}

/* Remove extra padding from Elementor columns on mobile */
@media (max-width: 767px) {
	.elementor-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elementor-section.elementor-section-boxed .elementor-container {
		padding-left: var(--space-4) !important;
		padding-right: var(--space-4) !important;
	}
}

/* Elementor section dark background helper */
.elementor-section-dark,
.section-dark {
	background-color: var(--color-navy);
	color: var(--color-warm-gray-light);
}

.elementor-section-dark h1,
.elementor-section-dark h2,
.elementor-section-dark h3,
.elementor-section-dark h4,
.elementor-section-dark h5,
.elementor-section-dark h6,
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
	color: var(--color-white);
}

/* Elementor section cream background helper */
.elementor-section-cream,
.section-cream {
	background-color: var(--color-cream);
}

/* Elementor text widget overrides */
.elementor-widget-text-editor {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-normal);
	color: var(--color-text);
}

/* Elementor heading widget overrides */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--font-heading);
	color: var(--color-secondary);
}

/* Elementor button overrides — preserve theme button styling */
.elementor-button {
	font-family: var(--font-body) !important;
	font-weight: var(--fw-semibold) !important;
	border-radius: var(--radius-full) !important;
	transition: all var(--transition-base) !important;
}

.elementor-button:hover {
	transform: translateY(-1px) !important;
}

/* Elementor spacer — ensure minimum height on mobile */
.elementor-spacer-inner {
	min-height: 20px;
}

/* Elementor divider */
.elementor-divider {
	border-color: var(--color-border);
}

/* Elementor icon list */
.elementor-icon-list-item {
	font-family: var(--font-body);
}

/* Fix Elementor canvas template */
.page-template-elementor_canvas .site-header,
.page-template-elementor_canvas .site-footer {
	display: none;
}

.page-template-elementor_canvas {
	padding: 0 !important;
}

/* Elementor full-width template — show header and footer */
.page-template-elementor_header_footer .site-main {
	padding: 0;
}

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

/* Hide on mobile, show on desktop */
@media (max-width: 639px) {
	.hide-mobile { display: none !important; }
}

@media (min-width: 640px) {
	.show-mobile { display: none !important; }
}

/* Hide on tablet */
@media (min-width: 640px) and (max-width: 1023px) {
	.hide-tablet { display: none !important; }
}

/* Hide on desktop */
@media (min-width: 1024px) {
	.hide-desktop { display: none !important; }
}

/* Responsive text alignment */
@media (max-width: 639px) {
	.text-center-mobile { text-align: center !important; }
	.text-left-mobile { text-align: left !important; }
}

/* ==========================================================================
   WORDPRESS ALIGNMENT CLASSES
   ========================================================================== */

.alignnone {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
	height: auto;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: none;
	margin-right: 0;
}

.alignright {
	float: none;
	margin-left: 0;
}

@media (min-width: 640px) {
	.alignleft {
		float: left;
		margin-right: 1.5em;
		margin-bottom: 0.5em;
	}

	.alignright {
		float: right;
		margin-left: 1.5em;
		margin-bottom: 0.5em;
	}
}

.alignwide {
	margin-left: calc(-1 * var(--space-4));
	margin-right: calc(-1 * var(--space-4));
	max-width: calc(100% + var(--space-8));
	width: calc(100% + var(--space-8));
}

.alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: var(--space-4);
}

.wp-caption-text {
	font-size: var(--fs-xs);
	color: var(--color-text-light);
	text-align: center;
	padding: var(--space-2) 0;
}

/* ==========================================================================
   WORDPRESS GALLERY
   ========================================================================== */

.gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}

.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 768px) {
	.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
	.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
	.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
}

.gallery-item {
	padding: 0;
	text-align: center;
}

.gallery-item img {
	border-radius: var(--radius-sm);
	transition: opacity var(--transition-fast);
}

.gallery-item img:hover {
	opacity: 0.85;
}

/* ==========================================================================
   WORDPRESS POST PAGINATION
   ========================================================================== */

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin-top: var(--space-8);
}

.nav-links a,
.nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	transition: all var(--transition-fast);
}

.nav-links a:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.nav-links span.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* ==========================================================================
   WORDPRESS COMMENTS
   ========================================================================== */

.comments-area {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.comments-title {
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-6);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
}

.comment-author {
	font-weight: var(--fw-semibold);
}

.comment-content {
	margin-top: var(--space-2);
}

.comment-content p {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
}

.comment-respond {
	margin-top: var(--space-8);
}

.comment-form label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-1);
}

.comment-form input,
.comment-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--fs-base);
	margin-bottom: var(--space-4);
}

/* ==========================================================================
   WIDGET STYLES
   ========================================================================== */

.widget {
	margin-bottom: var(--space-8);
}

.widget-title {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-secondary);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-primary);
}

.widget ul {
	list-style: none;
	padding: 0;
}

.widget li {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-sm);
}

.widget li:last-child {
	border-bottom: none;
}

.widget a {
	color: var(--color-text);
	transition: color var(--transition-fast);
}

.widget a:hover {
	color: var(--color-primary);
}

/* Search Widget */
.widget_search .search-form {
	display: flex;
	gap: var(--space-2);
}

.widget_search .search-field {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
}

.widget_search .search-submit {
	padding: 0.75rem 1.25rem;
	background-color: var(--color-primary);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.widget_search .search-submit:hover {
	background-color: var(--color-primary-hover);
}