/**
 * Red Orchid — Elementor global-kit token overrides (Phase 3, Option A)
 * ============================================================
 * CSS-only re-point of the site's Elementor Kit custom properties onto the
 * Soft UI Evolution tokens (tokens.css) - no kit edits in wp-admin, so this
 * is fully reversible by removing the enqueue in functions.php.
 *
 * The Kit (post ID 15) defines these as plain hex on :root in
 * elementor-post-15.css. This file is enqueued with that handle as an
 * explicit dependency (see functions.php) so it always prints after it in
 * <head> and wins the cascade at equal specificity - no !important needed.
 *
 * Only the named global slots actually used across existing content are
 * touched (primary/secondary/text/accent + the 4 typography globals) - the
 * kit's other ad-hoc custom-hash-named colors are left alone.
 */
:root {
  --e-global-color-primary: var(--ro-primary);
  --e-global-color-secondary: var(--ro-secondary);
  --e-global-color-text: var(--ro-foreground);
  --e-global-color-accent: var(--ro-accent);

  --e-global-typography-primary-font-family: var(--ro-font-serif);
  --e-global-typography-secondary-font-family: var(--ro-font-serif);
  --e-global-typography-text-font-family: var(--ro-font-sans);
  --e-global-typography-accent-font-family: var(--ro-font-sans);
}

/* Body font-family — owned here, not by the Elementor Kit.
 * The Kit (post 15) stores body_typography_font_family:"Manrope" but its
 * popover toggle body_typography_typography is an empty string instead of
 * "custom", so Elementor suppresses every declaration in the group and emits
 * a literal empty rule `{}` in post-15.css. Nothing else set body's font, so
 * body copy fell back to the browser's system stack while widgets (which read
 * --e-global-typography-*) stayed correct. Setting it here instead of
 * re-saving the Kit keeps it version-controlled and immune to the next
 * kit-settings regression. */
body {
  font-family: var(--ro-font-sans);
}

/* Body WEIGHT guard (R1, 2026-08-17). Separate rule, higher specificity, on
 * purpose — do not merge it into the `body` rule above.
 *
 * The Kit (post 15) emits a BARE `font-weight:700` on `.elementor-kit-15` at
 * three breakpoints. It comes from a custom global typography item titled
 * "Text-Buttons" (id 105366a) whose weight is stored under the non-standard key
 * `typography_weight` (a slider) instead of Elementor's `typography_font_weight`
 * (a select), so the generator prints it as a plain declaration rather than as
 * `--e-global-typography-105366a-font-weight`. Proof it is that key and not the
 * body-typography group: `body_typography_font_weight` is "400" and emits
 * nothing at all (its group is suppressed by an empty `body_typography_typography`
 * — the separate, already-documented bug the rule above exists for), and the
 * bare declaration sits in the emitted rule exactly where `typography_weight`
 * sits in the serialized settings array, between -font-size and -font-style.
 *
 * `body` carries `elementor-kit-15`, so the Kit's (0,1,0) beat Hello's
 * `body{font-weight:400}` (0,0,1) and EVERY unstyled element inherited 700.
 * Measured before this rule: 35 of 39 paragraphs/list items across the section
 * suite computed >= 700, and `strong` resolved `bolder` to 900.
 *
 * `html body.elementor-kit-15` is (0,1,2) — it beats the Kit rule on
 * SPECIFICITY, not on print order. Deliberate: an equal-specificity
 * `.elementor-kit-15` guard would be a tie decided by source order, which this
 * repo has already been bitten by (see the .deal-ribbon note in sections.css)
 * and which a CSS-combining/optimisation plugin can silently flip.
 *
 * SCOPE: this covers `font-weight` only. The same malformed global also emits
 * `--e-global-typography-105366a-line-height:0px` at the two narrow breakpoints,
 * and a future mis-keyed property would print bare in the same way and slip
 * past this. Correcting the Kit data is the real fix; this is the net that
 * makes a regression invisible instead of site-wide. */
html body.elementor-kit-15 {
  /* Literal fallback, unlike every other var() in this file. If tokens.css ever
   * fails to load, an unresolved var() here is invalid-at-computed-value-time,
   * the declaration is dropped, and the Kit's 700 silently returns site-wide —
   * the one failure mode this rule exists to prevent. */
  font-weight: var(--ro-fw-body, 400);
}

/* ============================================================
 * DURABLE BASE LAYER (issue #28)
 * ------------------------------------------------------------
 * Widget-level Soft UI skinning that must survive every future
 * section-library rebuild (#31-#36). Only generic Elementor +
 * JetEngine widget primitives are touched here — nothing here is
 * bound to a specific page, so it never needs retiring. Aggressive
 * per-surface rules live in the sibling page-skins.css instead.
 *
 * Cascade: this file depends on `elementor-post-15` so it prints
 * after the Kit's :root vars and after Elementor's frontend.css at
 * equal specificity — no !important needed for equal-specificity
 * wins. Where a 3-year-old widget carries its own inline setting
 * (its own radius/hover), that inline rule intentionally still wins;
 * we only set the *unstyled default* onto the system.
 * ============================================================ */

/* ---------------------------------------------------------- */
/* 1 · BUTTONS — Elementor button widget + form submits        */
/* ---------------------------------------------------------- */
.elementor-button,
.elementor-field-type-submit .elementor-button,
.elementor-form .elementor-button,
button.elementor-button {
  border-radius: var(--ro-radius-control);
  box-shadow: var(--ro-shadow-btn);
  transition: box-shadow var(--ro-dur) var(--ro-ease),
              filter var(--ro-dur) var(--ro-ease),
              transform var(--ro-dur) var(--ro-ease);
}

.elementor-button:hover,
.elementor-button:focus-visible,
.elementor-form .elementor-button:hover,
button.elementor-button:hover {
  box-shadow: var(--ro-shadow-btn-hover);
  filter: brightness(1.03);
}

.elementor-button:active,
.elementor-form .elementor-button:active,
button.elementor-button:active {
  transform: scale(0.97);
}

/* ---------------------------------------------------------- */
/* 2 · FORM FIELDS — Elementor forms, search, comments         */
/* ---------------------------------------------------------- */
.elementor-field-group .elementor-field-textual,
.elementor-field-group textarea.elementor-field,
.elementor-field-group select.elementor-field,
.elementor-search-form__input,
.search-form .search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  background-color: var(--ro-surface);
  border: 1px solid var(--ro-border);
  border-radius: var(--ro-radius-control);
  color: var(--ro-foreground);
  transition: border-color var(--ro-dur) var(--ro-ease),
              box-shadow var(--ro-dur) var(--ro-ease);
}

.elementor-field-group .elementor-field-textual:hover,
.elementor-field-group textarea.elementor-field:hover,
.elementor-field-group select.elementor-field:hover,
.elementor-search-form__input:hover,
.search-form .search-field:hover {
  border-color: var(--ro-border-hover);
}

.elementor-field-group .elementor-field-textual:focus,
.elementor-field-group textarea.elementor-field:focus,
.elementor-field-group select.elementor-field:focus,
.elementor-search-form__input:focus,
.search-form .search-field:focus,
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--ro-primary-strong);
  box-shadow: 0 0 0 3px rgba(var(--ro-rgb-ring) / 0.28);
  outline: none;
}

/* ---------------------------------------------------------- */
/* 3 · TYPOGRAPHY — heading fonts/foreground + body rhythm      */
/* ---------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--ro-font-serif);
  color: var(--ro-foreground);
}

.elementor-widget-text-editor,
.entry-content,
.elementor-widget-theme-post-content {
  color: var(--ro-foreground);
  font-family: var(--ro-font-sans);
}

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.elementor-widget-theme-post-content h1,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3 {
  font-family: var(--ro-font-serif);
  color: var(--ro-foreground);
}

.entry-content p,
.elementor-widget-theme-post-content p {
  line-height: 1.7;
}

/* ---------------------------------------------------------- */
/* 4 · CARDS — generic boxes + JetEngine listing cards         */
/* ---------------------------------------------------------- */
.jet-listing-grid__item,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-image-box .elementor-image-box-wrapper {
  border-radius: var(--ro-radius-card);
  transition: box-shadow var(--ro-dur) var(--ro-ease),
              border-color var(--ro-dur) var(--ro-ease),
              filter var(--ro-dur) var(--ro-ease);
}

.jet-listing-grid__item {
  box-shadow: var(--ro-shadow-card);
}

.jet-listing-grid__item:hover {
  box-shadow: var(--ro-shadow-card-hover);
  border-color: var(--ro-border-hover);
}

/* ---------------------------------------------------------- */
/* 5 · GLOBAL HOVER-TRANSFORM NEUTRALIZATION                    */
/* ------------------------------------------------------------ */
/* Legacy widgets across the 3-year-old site carry float/scale   */
/* on-hover configs. Soft UI Evolution forbids transform motion  */
/* on hover (shadow/border/brightness only). This one rule       */
/* cancels translate/scale on :hover site-wide. The compensating */
/* Soft UI feedback is applied per-element to the surfaces that   */
/* warrant it — buttons (block 1: shadow deepen + brightness) and */
/* cards (block 4: shadow deepen + border tint); generic          */
/* containers simply lose the unwanted motion with no substitute. */
/* :active press-scale is preserved (re-asserted below).          */
.elementor-widget:hover,
.e-con:hover,
.jet-listing-grid__item:hover,
.elementor-button:hover {
  /* Only neutralize transform — do NOT clobber the deliberate    */
  /* box-shadow / border-color transitions set in blocks 1 & 4.   */
  transform: none !important;
}

/* Re-assert the :active press-scale AFTER block 5. A pressed button */
/* is simultaneously :hover + :active; block 5's transform:none      */
/* !important would otherwise win on source order and kill the press. */
.elementor-button:active,
.elementor-form .elementor-button:active,
button.elementor-button:active {
  transform: scale(0.97) !important;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-button,
  .elementor-button:hover,
  .elementor-button:active,
  .jet-listing-grid__item,
  .jet-listing-grid__item:hover {
    transition: none;
    filter: none;
    transform: none !important;
  }
}

/* Shell gutters (F_3.31.0 item 3; footer added in R3, v3.76.0). The Theme      */
/* Builder header and footer containers carry no padding of their own — the     */
/* 10px on all four sides is Elementor's global .e-con default. The inner       */
/* .ro-header .wrap / .ro-footer .wrap / .ro-footer-cta .wrap already own       */
/* max-width + inline padding, so the container padding is pure noise, and on   */
/* the footer it was measurable: at every width below 1200px it pushed          */
/* .ro-footer-cta's content edge 10px inside every other ro-* section.          */
/* Zero the custom props (not `padding:0 !important`) to work with Elementor's  */
/* cascade and survive container internals being re-plumbed on update.          */
/*                                                                             */
/* --padding-left/right/top/bottom, NOT --padding-inline/--padding-block:       */
/* Elementor's chain is `--padding-left -> --padding-inline-start -> padding-   */
/* inline-start`, so --padding-inline is not a property it reads. The original  */
/* header rule used the logical names and was therefore inert — the header only */
/* looked correct because template 8397 happens to declare the same four zeros  */
/* on the element itself. Corrected here so the guarantee is real, and so the   */
/* footer rule beside it is not written two different ways. Footer keeps its    */
/* block padding: only the inline axis is an alignment concern, and changing    */
/* the footer's vertical rhythm is not part of this release.                    */
.ro-header-shell {
  --padding-top: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --padding-right: 0px;
}
.ro-footer-shell {
  --padding-left: 0px;
  --padding-right: 0px;
}

/* ---------------------------------------------------------- */
/* 7 · SECTION CONTAINER OPT-OUT (R3, v3.76.0)                  */
/* ------------------------------------------------------------ */
/* --ro-content-max (1200px) is the canonical page canvas and the      */
/* theme's own `.wrap` is authoritative. The Kit (post 15) publishes    */
/* `--container-max-width: 1120px`, and Elementor resolves it PER       */
/* CONTAINER via `.e-con { --content-width: min(100%, var(--container-  */
/* max-width, 1140px)) }` applied to `.e-con > .e-con-inner`. So any    */
/* section that happens to sit inside a BOXED container was capped at   */
/* 1120 and then took the .wrap gutter on top of that, while the same   */
/* section inside a FULL container resolved to 1200: measured 2026-08-17 */
/* at clientWidth 1425, content edge 176.5px vs 136.5px on one page.    */
/*                                                                     */
/* Deliberately NOT fixed by editing the Kit's --container-max-width:   */
/* that is an unversioned, wp-admin-editable global governing every     */
/* boxed container site-wide — the same failure class as the bare       */
/* `font-weight: 700` the guard above exists to neutralise (see         */
/* SPEC_2026-08-17_service-page-responsive-system.md §0.4).             */
/*                                                                     */
/* Instead the section-bearing containers opt out, exactly as           */
/* .ro-header-shell opts out of the container padding: re-point the     */
/* container's own custom property rather than fighting the computed    */
/* max-width with !important, so it survives Elementor re-plumbing its  */
/* container internals. `min(100%, 1200px)` still clamps to the         */
/* viewport, so the narrower Kit breakpoint values (1024 / 767) are not */
/* needed — 100% already wins there.                                    */
/*                                                                     */
/* Leakage measured, not assumed. Across 15 live URLs (home, /prices/,  */
/* /deals/, /services/, both category hubs, four service singles,       */
/* /privacy-policy/, /about/, /book/, /account/) the selector matched   */
/* exactly ONE container per page and every matched container held      */
/* nothing but `ro-*` section widgets — zero containers mixed a section */
/* widget with other Elementor content. Every unmatched container that  */
/* holds a section widget is `e-con-full`, which has no cap to lift.    */
/* The `> .e-con-inner >` child chain is load-bearing: it is what keeps */
/* the match on the container that actually holds the sections instead  */
/* of every ancestor above it.                                          */
/*                                                                     */
/* The same containers also give up their inline padding, for the same  */
/* reason the shells above do: the section's own .wrap owns the gutter, */
/* so container padding is a second page-scale inset stacked inside the */
/* first. It is measurable — the service-single template happens to      */
/* declare four explicit zeros on its container, the category template  */
/* does not, so the identical Reading Content section sat 10px further   */
/* in on a category page than on a service page at every width below    */
/* 1200. Verified across the same 15 URLs: not one matched container,    */
/* nor either Theme Builder shell, declares --padding-* anywhere in its  */
/* post-*.css — every value found is Elementor's global 10px default,    */
/* so there is no editor intent being overwritten.                       */
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-ro-"]) {
  --container-max-width: var(--ro-content-max);
  --padding-left: 0px;
  --padding-right: 0px;
  --flex-wrap: nowrap;
}
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-ro-"]) > .e-con-inner {
  --flex-wrap: nowrap;
}
.e-con.e-flex.ro-service-single {
  --flex-wrap: nowrap;
}
.e-con.e-flex.ro-about,
.e-con.e-flex.ro-about-olga,
.e-con.e-flex.ro-style-guide {
  --flex-wrap: nowrap;
}