/* ============================================================
   League of Cooking (Limoncella-style) — global structure.
   ============================================================ */

body, .site, #wrapper, .site-container { background: var(--lim-bg); }
.content-bg, .site-content .content-bg, .content-area { background: var(--lim-surface); }

/* Fix 2026-07-20 (owner-flagged: "can't see the whole app while moving
   toggles" on mobile) - the embedded Craving DNA app's own slider rows
   (label + range input + label) don't fully fit their container on narrow
   viewports; the right-hand label ("Rich"/"Comforting"/"Bold") overflows
   past the app's own container edge and gets clipped. CONFIRMED via
   real-device-width inspection: row content spans ~316px inside a ~287px
   container. Shrinking the labels' reserved width and the row gap on
   narrow viewports (this is our own theme CSS, not an edit to the plugin's
   files) gives the row enough room to fit without clipping. */
@media (max-width: 480px) {
	.cdna-slider-row { gap: 8px; }
	.cdna-side { flex-basis: 46px !important; font-size: 11px !important; }
}
@media (max-width: 360px) {
	.cdna-side { flex-basis: 40px !important; font-size: 10px !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--lim-accent) !important;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Button transition MEASURED from live Limoncella: 0.2s, color/background only,
   no LIFT (translateY) on hover. Fix 2026-07-20 (owner-flagged missing
   animation): re-checked the reference's actual CSS source and found a
   distinct hover PRESS effect (transform: scale(0.95)) on every button -
   different from a lift, so it doesn't contradict the earlier finding. */
.lim-btn {
	display: inline-block;
	font-family: var(--lim-font-body);
	font-size: 16px;
	font-weight: 600;
	padding: 8px 20px;
	border-radius: var(--lim-radius-button);
	text-decoration: none;
	transition: 0.2s;
}
.lim-btn:hover { transform: scale(0.95); }
.lim-btn--accent {
	background: var(--lim-accent);
	color: #fff;
}
.lim-btn--accent:hover { background: var(--lim-accent-hover); color: #fff; }
.lim-btn--outline {
	background: transparent;
	color: var(--lim-ink-dark);
	border: 1.5px solid var(--lim-ink-dark);
}
.lim-btn--outline:hover { background: var(--lim-ink-dark); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}