/**
 * Curator-style UI: lavender page tone, elevated panels, emerald CTAs.
 * Loaded after app.css (Tailwind). Run `npm run build:css` after editing src/input.css to refresh utilities.
 */

body {
	background-color: #f7f5ff;
	background-image: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(139, 92, 246, 0.08), transparent 55%);
}

/* Softer nav labels (reference: light grey sans-serif) — overrides older app.css menu rules */
.dst-menu a,
.dst-menu-link {
	color: #78716c !important;
	letter-spacing: 0.2em;
}

.dst-menu a:hover,
.dst-menu-link:hover {
	color: #2e1065 !important;
}

.z-50 {
	z-index: 50;
}

@media (min-width: 640px) {
	.sm\:inline-flex {
		display: inline-flex;
	}
}

/* Flex order for header (Tailwind order-* may be missing from older app.css builds) */
.order-3 {
	order: 3;
}

.basis-full {
	flex-basis: 100%;
}

@media (min-width: 768px) {
	.md\:order-2 {
		order: 2;
	}

	.md\:order-3 {
		order: 3;
	}

	.md\:basis-auto {
		flex-basis: auto;
	}

	.md\:bg-violet-50\/50 {
		background-color: rgba(245, 243, 255, 0.5);
	}

	.md\:p-10 {
		padding: 2.5rem;
	}
}

/* Header: Customizer logo (Appearance → Customize → Site Identity → Logo) */
.dst-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	max-width: min(100%, 20rem);
	text-decoration: none;
	color: inherit;
}

.dst-header .custom-logo-link:hover {
	text-decoration: none;
}

.dst-header .custom-logo-link:focus-visible {
	outline: 2px solid #7c3aed;
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.dst-header .custom-logo {
	display: block;
	height: auto;
	width: auto;
	max-height: 2.75rem;
	max-width: 100%;
	object-fit: contain;
}

@media (min-width: 768px) {
	.dst-header .custom-logo {
		max-height: 3rem;
	}
}

@media (min-width: 1024px) {
	.lg\:p-12 {
		padding: 3rem;
	}
}

.shadow-dst-sm {
	box-shadow:
		0 10px 36px -12px rgba(76, 29, 149, 0.12),
		0 4px 14px -6px rgba(15, 23, 42, 0.06);
}

.dst-panel {
	border-radius: 1.5rem;
	border: 1px solid rgba(196, 181, 253, 0.45);
	background-color: #fff;
	box-shadow:
		0 20px 50px -18px rgba(76, 29, 149, 0.12),
		0 8px 24px -10px rgba(15, 23, 42, 0.06),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.88);
}

.dst-btn-emerald {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: #059669;
	padding: 0.875rem 2rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 14px -4px rgba(5, 150, 105, 0.45);
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.dst-btn-emerald:hover {
	background-color: #10b981;
}

.dst-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	border: 1px solid rgba(167, 139, 250, 0.75);
	background-color: #fff;
	padding: 0.5rem 1.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #2e1065;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dst-btn-outline:hover {
	border-color: #7c3aed;
	background-color: #f5f3ff;
}

.dst-field {
	width: 100%;
	border-radius: 0.75rem;
	border: 1px solid rgba(196, 181, 253, 0.45);
	background-color: #fff;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: #1c1917;
	box-shadow: 0 1px 2px rgba(76, 29, 149, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dst-field:focus {
	outline: none;
	border-color: #a78bfa;
	box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

.dst-field::placeholder {
	color: #a8a29e;
}

/* Lavender band behind two-column inquiry (reference: “Request a private tour” panel) */
.dst-bg-lavender-inquiry {
	background: linear-gradient(
		to bottom,
		rgba(237, 233, 254, 0.92),
		rgba(245, 243, 255, 0.78),
		#ffffff
	);
}

select.dst-field {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235b21b6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.25rem;
	padding-right: 2.5rem;
}