/* ============================================================
   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; }
}
/* Fix 2026-08-31 (audit pre-production) : la bulle de valeur du curseur
   ("Balanced", "Rich"…) est positionnee en absolu au-dessus du pouce. Quand le
   pouce approche de la fin de course, la bulle depassait le bord droit du
   viewport d'environ 18px en 390px. Pas de scroll horizontal declenche (le
   conteneur clippe), mais le mot etait tronque. La contraindre a l'interieur
   de son conteneur suffit — pas besoin de toucher au JS du plugin. */
@media (max-width: 480px) {
	.cdna-slider-row { position: relative; }
	.cdna-range-bubble { max-width: calc(100vw - 32px); }
}

/* ------------------------------------------------------------------
   Craving DNA app — restyled to the Limoncella system.
   Fix 2026-07-22 (owner-flagged: "il faut utiliser les mêmes fontes d'écriture
   des text"). The embedded app ships with the OLD League of Cooking design
   baked in: Playfair Display headings, Lora body, Inter UI labels, on a plum /
   lavender / dusty-rose palette. Dropped into a Figtree + Work Sans sage/cream
   page it read as a third-party widget rather than part of the site.
   Everything below is theme-side CSS — the plugin's own files are NOT edited
   for presentation, same approach as the mobile slider fix above, so a plugin
   update can't silently revert the look.
   ------------------------------------------------------------------ */

/* 1. Palette. The app is fully custom-property driven, so remapping its own
      variables re-themes every component at once (chips, sliders, bars, result
      cards, focus rings) with no per-component overrides.
      `body` prefix is load-bearing, not decoration: the homepage section
      enqueues the plugin's stylesheet from inside the shortcode, i.e. during
      the_content and therefore AFTER wp_head has already printed this file, so
      the plugin's own `.cdna-app { --cdna-*: … }` block lands later in the
      cascade. Matching its specificity would lose; `body .cdna-app` wins on
      specificity regardless of source order. */
body .cdna-app {
	--cdna-bg:        var(--lim-surface-alt); /* palette7 pale green, lightened by the 2026-08-31 bright pass */
	--cdna-surface:   var(--lim-surface);   /* white */
	--cdna-ink:       var(--lim-ink);       /* #555 body */
	--cdna-plum:      var(--lim-ink-dark);  /* #333 headings + strong UI */
	--cdna-muted:     var(--lim-ink-muted); /* neutral muted grey (pro-white pass). Was dark
	                                           sage #8E6820; the reason it isn't the raw
	                                           #B8862B sage still stands — that only reaches
	                                           ~3:1 and this is TEXT, not decoration. */
	--cdna-lav:       var(--lim-periwinkle);/* mint — soft accent */
	--cdna-lav-2:     var(--lim-border);
	--cdna-line:      var(--lim-border);
	--cdna-rose:      var(--lim-accent);       /* clay — single top-match highlight */
	--cdna-rose-deep: var(--lim-accent-hover);
	--shadow-rgb:     51, 51, 51;
}

/* 2. Typography. The plugin sets font-family per element (not just on the
      container), so a container-level rule alone would lose. Reset the whole
      subtree to the body font, then put the display font back on the headings.
      The heading selectors are more specific than the `*` reset, so ordering
      here is belt-and-braces rather than load-bearing. */
.cdna-app, .cdna-app *,
.cdna-seo, .cdna-seo * {
	font-family: var(--lim-font-body) !important;
}
.cdna-app h2, .cdna-app h3,
.cdna-app .cdna-result-title,
.cdna-seo-block h2, .cdna-seo-block h3 {
	font-family: var(--lim-font-heading) !important;
}

/* 3. The section frames the app already, so the app's own top padding stacked
      with the section's and pushed the sliders below the fold on laptops —
      the exact thing the "open on the toggles" request is about. */
.lim-craving-section .cdna-screen { padding-top: var(--lim-space-4); }

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