/**
 * DevCrabs reusable UI components — matches New Design class names.
 */

/* Layout */
.container-prose {
	max-width: var(--dc-container-max);
	margin-inline: auto;
	padding-inline: var(--dc-container-pad);
}

.mesh-bg {
	background:
		radial-gradient(60% 50% at 85% 0, oklch(95% 0.08 225 / 0.7), transparent 60%),
		radial-gradient(45% 40% at 0 10%, oklch(96% 0.06 220 / 0.55), transparent 55%),
		var(--dc-background);
}

/* Typography helpers */
.text-ink { color: var(--dc-ink); }
.text-ink-soft { color: var(--dc-ink-soft); }
.text-brand-deep { color: var(--dc-brand-deep); }
.bg-brand { background-color: var(--dc-brand); }
.bg-surface-muted { background-color: var(--dc-surface-muted); }
.bg-ink { background-color: var(--dc-ink); }
.border-border { border-color: var(--dc-border); }
.bg-border-strong { background-color: var(--dc-border-strong); }
.border-brand-soft { border-color: var(--dc-brand-soft); }

.bg-gradient-text {
	background: var(--dc-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Buttons */
.btn-primary,
.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 0.75rem;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	transition: transform 0.15s var(--dc-ease), box-shadow 0.2s var(--dc-ease), filter 0.2s var(--dc-ease), border-color 0.15s var(--dc-ease), background 0.15s var(--dc-ease);
}

.btn-primary {
	padding: 0.85rem 1.25rem;
	color: #fff;
	background: var(--dc-gradient-brand);
	box-shadow: inset 0 1px #fff6, 0 12px 30px -12px #0682c88c;
}

.btn-primary svg,
.btn-secondary svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.btn-secondary {
	padding: 0.8rem 1.2rem;
	color: var(--dc-ink);
	background: #fff;
	border: 1px solid var(--dc-border-strong);
}

.btn-secondary:hover {
	border-color: var(--dc-brand);
	background: oklch(99% 0.01 220);
}

/* Eyebrow label */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid oklch(88% 0.05 225);
	border-radius: 999px;
	background: var(--dc-gradient-eyebrow);
	color: var(--dc-brand-deep);
	font-family: var(--dc-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Cards & surfaces */
.surface-card {
	border: 1px solid var(--dc-border);
	border-radius: 1rem;
	background: #fff;
	box-shadow: var(--dc-shadow-soft);
}

.shadow-soft { box-shadow: var(--dc-shadow-soft); }
.shadow-card { box-shadow: var(--dc-shadow-card); }

/* Icon tile used across sections */
.dc-icon-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: var(--dc-gradient-icon);
	color: var(--dc-brand-deep);
}

.dc-icon-tile--strong {
	background: var(--dc-gradient-icon-strong);
	color: #fff;
}

/* Section spacing presets */
.dc-section {
	padding-block: var(--dc-section-y);
}

.dc-section--muted {
	background: var(--dc-surface-muted);
}

.dc-section-head {
	max-width: 48rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.dc-section-head {
		margin-bottom: 4rem;
	}
}

.dc-section-head .eyebrow + h2,
.dc-section-head .eyebrow + h1 {
	margin-top: 1.25rem;
}

.dc-section-head h2 {
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1.1;
	color: var(--dc-ink);
}

.dc-section-head p {
	margin-top: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--dc-ink-soft);
}

/* Animations */
@keyframes dc-float-slow {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes dc-bubble-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes dc-pulse-dot {
	0%, 100% { opacity: 0.3; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.1); }
}

.animate-float-slow { animation: 6s ease-in-out infinite dc-float-slow; }
.animate-bubble-in { animation: 0.5s ease-out both dc-bubble-in; }
.animate-pulse-dot { animation: 1.4s ease-in-out infinite dc-pulse-dot; }

/* WordPress admin bar offset */
body.admin-bar.devcrabs-site .dc-header.is-sticky {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar.devcrabs-site .dc-header.is-sticky {
		top: 46px;
	}
}