/* overrides.css — OUR rules, never theirs.
 *
 * Loaded LAST, after the entire captured Elementor stylesheet chain, so that
 * "theirs" and "ours" stay distinguishable (CLAUDE.md hard rule 2). Nothing in
 * apps/web/public/wp-content/ is ever hand-edited; every deviation from the
 * WordPress render lives in this file and nowhere else.
 *
 * Every rule here is a SIGNED DEVIATION and must carry:
 *   - what it changes,
 *   - the measurement that justified it,
 *   - an entry in docs/plans/2026-09-03-visual-exception-list.md.
 *
 * Default is faithful reproduction (hard rule 5). If it is not signed off,
 * it does not belong here.
 */

/* ---------------------------------------------------------------------------
 * DEVIATION 1 — /links/ : the "READ MORE ON OUR BLOG" watermark heading
 *                         (elementor-element-e5d4ea5) is truncated mid-word.
 *
 * WHAT WORDPRESS DOES
 *   post-3288.css positions this Premium Addons dual-heading absolutely:
 *
 *     .elementor-3288 .elementor-element.elementor-element-e5d4ea5 {
 *       width: var(--container-widget-width, 750px);
 *       max-width: 750px;
 *     }
 *     body:not(.rtl) ... e5d4ea5 { left: 66.704vw; }
 *
 *   A viewport-proportional offset combined with a FIXED 750px box. The right
 *   edge therefore lands at  0.66704 x vw + 750px , which exceeds the viewport
 *   for every width below 2253px. The design only holds on very wide screens.
 *
 * MEASURED, not assumed
 *   overflow = 0.66704*vw + 750 - vw
 *     1180 -> +357.1px      1440 -> +270.5px      1920 -> +110.7px
 *   Those match scripts/audit-responsive.mjs (+357 at 1180, +111 at 1920) and
 *   they match the Phase 0 baseline: capture/baseline/desktop/links.png is
 *   1711px wide, and 0.66704*1440 + 750 = 1710.5.
 *
 *   Pixel-scanning that baseline, the band beyond the 1440 viewport edge holds
 *   2,762 non-white pixels in x 1440..1642 — the tail of the heading, in its
 *   own #F3F3F3 ink. So ~203px of "READ MORE / ON OUR BLOG" is painted outside
 *   the viewport and is cut off mid-word for every visitor under ~2253px.
 *
 * WHY THIS IS NOT A SCROLLBAR BUG
 *   page-builder-framework's wpbf-style.min.css sets, with NO media query,
 *   `body { background:#fff; overflow-x:hidden }`, and no rule anywhere sets
 *   overflow on `html`. The body value is therefore propagated to the viewport,
 *   so the page CANNOT be scrolled horizontally at any width — on WordPress or
 *   here. Nobody ever sees a horizontal scrollbar. What they see is the heading
 *   with its tail cut off. audit-responsive.mjs reports scrollWidth-innerWidth,
 *   which counts content that is already clipped; the 1711px baseline exists
 *   only because a full-page screenshot expands to scrollWidth.
 *
 * THE FIX
 *   Clamp the offset so the fixed 750px box ends AT the viewport edge, and only
 *   where it would otherwise overrun. min() leaves the original 66.704vw in
 *   force at >=2253px, where the design already works — above that width our
 *   render stays byte-identical to WordPress.
 *
 *   `100%` (not 100vw) is deliberate: the containing block is the ancestor
 *   .e-con (elementor-element-930e58d), which frontend.min.css gives
 *   `--width:100%; --position:relative`, so 100% is exactly the layout viewport
 *   and excludes any classic vertical scrollbar. 100vw would include it and
 *   leave ~15px overrunning in browsers that reserve scrollbar space.
 *
 *   Scoped to >=1025px because the widget carries elementor-hidden-tablet /
 *   elementor-hidden-mobile and is display:none at or below 1024px, where
 *   post-3288.css also switches it to left:391.516px. That branch is untouched.
 *
 * COST — this page is a gate width, so the deviation is deliberate and scored
 * in docs/plans/2026-09-03-visual-exception-list.md. Revert this block alone to
 * restore the WordPress behaviour exactly.
 * ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
  body:not(.rtl) .elementor-3288 .elementor-element.elementor-element-e5d4ea5 {
    left: min(66.704vw, 100% - 750px);
  }

  body.rtl .elementor-3288 .elementor-element.elementor-element-e5d4ea5 {
    right: min(66.704vw, 100% - 750px);
  }
}