/**
 * OptimWP — Elementor helpers.
 *
 * The Elementor build reuses the FULL code-first CSS (base/components/sections), so
 * every OptimWP component class (owp-btn, owp-card, owp-gradient-text, owp-eyebrow,
 * owp-badge, owp-icon-chip, owp-glow, …) already comes from components.css.
 *
 * IMPORTANT: this file must NOT redefine any owp-* component class — helpers.css
 * loads last, so a duplicate would override the faithful code-first version. (That's
 * what made the amber gradient-text render violet.) Keep this to ONLY:
 *   1) Elementor "glue" — make owp-sections render full-bleed with no Elementor gutters.
 *   2) Fixes for Elementor's global overrides (the kit forces a color on every <a>).
 */

/* --- Full-bleed: strip Elementor's boxed width + gutters so owp-sections reach the edges --- */
.owp-page .elementor,
.owp-page .elementor-section-boxed > .elementor-container { max-width: none !important; }
.owp-page .elementor-section { padding: 0 !important; }
.owp-page .elementor-column > .elementor-element-populated,
.owp-page .elementor-widget-wrap { padding: 0 !important; }
.owp-page .elementor-widget-html .elementor-widget-container { margin: 0; }
.owp-page .elementor-widget { margin-bottom: 0 !important; }

/* --- Restore faithful link colors. Elementor's kit injects `.elementor-kit-57 a
 * { color: brand }` on every link, which ties the code-first menu/footer overrides on
 * specificity and wins on load order. Re-assert the code-first colors via .owp-body
 * (higher specificity). Content links stay brand-colored — that IS the code-first default. --- */
.owp-body .owp-nav__list a { color: color-mix(in oklab, var(--owp-fg) 78%, transparent); }
.owp-body .owp-nav__list a:hover,
.owp-body .owp-nav__list .current-menu-item > a { color: var(--owp-fg); }
.owp-body .owp-nav__list .sub-menu a { color: color-mix(in oklab, var(--owp-fg) 82%, transparent); }
/* …and the hover colour with it. The resting rule immediately above is (0,3,1) — exactly the
   weight of `.owp-nav__list .sub-menu a:hover` in components.css AND of `.owp-body
   .owp-nav__list a:hover` two lines up — and it is printed last, so it was winning the tie in
   the hover state too: a dropdown link brightened (the `filter` on `.owp-nav__list a:hover` is
   uncontested) and took the 7% background, but its text stayed at 82% opacity instead of going
   to the full foreground the top-level links go to. One declaration at (0,4,1) settles it. The
   resting state is untouched, and so is `.current-menu-item` — this only fires on :hover. */
.owp-body .owp-nav__list .sub-menu a:hover { color: var(--owp-fg); }
.owp-body .owp-mobile-menu a { color: color-mix(in oklab, var(--owp-fg) 82%, transparent); }
.owp-body .owp-footer__col a { color: color-mix(in oklab, var(--owp-fg) 80%, transparent); }
.owp-body .owp-footer__col a:hover { color: var(--owp-fg); }
/* Footer legal links (bottom bar) — same color as the footer links, beating the kit's a{color:brand}. */
.owp-body .owp-footer__bottom a { color: color-mix(in oklab, var(--owp-fg) 80%, transparent); }
.owp-body .owp-footer__bottom a:hover { color: var(--owp-fg); }
.owp-body .owp-btn--primary { color: #fff; }
.owp-body .owp-btn--outline { color: var(--owp-fg); }
/* Logo: "Optim" must stay foreground (the kit's a{color:brand} wrongly violets the whole wordmark);
   "WP" carries the site's blue->violet TEXT GRADIENT (client decision, 2026-08-16), clipped to the
   glyphs, exactly like `.owp-gradient-text` in base.css and like the code-first theme.
   This block is a SPECIFICITY GUARD, and it has to carry BOTH halves of the technique. A guard that
   only pins `color` is worse than none: while "WP" was flat violet this said `color:#9561f3`, and
   left as-is it would have overridden the transparent colour from components.css and killed the
   gradient outright (opaque violet letters painted over the clipped background). So the background
   travels with the colour here, always. The selector is (0,3,0) -- the logo is theme chrome outside
   `.elementor`, so the only thing to beat is the kit's `a { color: <brand> }` at (0,0,1), and the
   margin is deliberately generous. */
.owp-body .owp-logo,
.owp-body .owp-logo__text { color: var(--owp-fg); }
.owp-body .owp-logo .owp-logo__wp {
  background-image: var(--owp-gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* --- Primary button: the violet glow, switched ON (client decision, 2026-08-16) -------------
 * The code-first build has always shown it -- components.css sets
 * `.owp-btn--primary { box-shadow: var(--owp-shadow-brand) }` -- and on this build it was lost in
 * two different ways, both of them specificity accidents rather than design choices:
 *
 *   1. Elementor's frontend.min.css ships `.elementor a { box-shadow: none }` at (0,1,1), which
 *      outranks components.css's (0,1,0). Any plain `<a class="owp-btn owp-btn--primary">` that
 *      sits inside Elementor content therefore lost its glow. (The header CTA, the cookie-bar
 *      Accept and the contact-form submit are theme chrome, OUTSIDE `.elementor`, so those three
 *      kept it all along -- which is why the two builds looked the same in the header and
 *      different in the page body.)
 *   2. elementor-native.css suppresses it for the hero pair with
 *      `.owp-page .owp-hero .elementor-widget-button.owp-btn--primary .elementor-button
 *       { box-shadow: none }` at (0,4,0). That line was deliberate at the time -- the native-widget
 *      rebuild had to change nothing visible -- and the client has now asked for the opposite.
 *
 * So this block has to outrank BOTH, and it cannot simply be moved earlier: helpers.css is a
 * dependency of elementor-native.css (functions.php), so it always loads FIRST and loses every
 * specificity tie. Hence the deliberately heavy selectors:
 *   - the widget form doubles up on the wrapper's own two classes (`elementor-widget` AND
 *     `elementor-widget-button`) to score (0,6,0), one class above the hero suppressor's (0,5,0).
 *     Measured: at a plain (0,5,0) it TIES the suppressor and loses on load order, and the hero
 *     button stays `box-shadow: none`. The extra class is load-bearing, not belt-and-braces;
 *   - the raw-anchor forms score (0,3,1), well above `.elementor a`'s (0,1,1).
 * The `a` / `button` qualifiers matter: on a native Button widget the classes sit on the WRAPPER
 * div, which elementor-native.css deliberately neutralises to a bare box -- a glow there would
 * paint a shadow under a full-width invisible block.
 *
 * The value is `var(--owp-shadow-brand)`, the same token, with the same definition in both themes'
 * tokens.css, so the two builds' primary buttons are now byte-for-byte the same shadow.
 *
 * NOTE for whoever next owns elementor-native.css: its hero `box-shadow: none` line is now dead
 * weight, overridden here. It can be deleted, and this block's first selector then simplified. */
.owp-body .owp-page .elementor-widget.elementor-widget-button.owp-btn--primary .elementor-button,
.owp-body .elementor a.owp-btn--primary,
.owp-body .elementor button.owp-btn--primary { box-shadow: var(--owp-shadow-brand); }

/* ------------------------------------------------------------------------
 * Deliberate line break, tablet and up (owp-br-tablet)
 * ------------------------------------------------------------------------
 * A <br class="owp-br-tablet"> inside body copy forces the line to end there on
 * tablet and desktop, and is ignored on phones, where a hard break in a narrow
 * column produces a ragged block. Used on the homepage hero lead (RO post 6 and
 * EN post 67), where the client asked the second half of the sentence to start
 * on its own line.
 *
 * The rule only ever HIDES the break, never re-enables it: a <br> that has been
 * set to `display:none` and then back to `display:inline` is the fragile half of
 * this technique, so the element keeps its normal behaviour everywhere and the
 * media query removes it only below the tablet breakpoint. 767.98px is the top of
 * Elementor's own mobile range, so the break appears exactly where Elementor
 * considers the layout to be tablet or wider.
 *
 * The markup keeps a real space before the <br>, so when the break is hidden the
 * two halves still read as one sentence with normal word spacing.
 * Plain class selector, no :where(): nothing in Elementor's stylesheets targets
 * <br>, so there is no tie to lose and zero specificity would only make this
 * weaker than it needs to be. */
@media (max-width: 767.98px) {
  .owp-br-tablet { display: none; }
}