/* 99 — Utilities
   Owns: rw-u-* utilities. Loads last. The only file permitted !important.
   Depends on: 01-tokens, 02-base */

/* rw-u-* utilities. Loads last so these win at equal specificity.
   This is the only file permitted !important, because winning is the contract. */

.rw-u-text-center { text-align: center !important; }
.rw-u-text-left   { text-align: left !important; }
.rw-u-text-right  { text-align: right !important; }

.rw-u-flex        { display: flex !important; }
/* .rw-u-flex-center breaks the one-declaration rule deliberately — it is a
   single named intent (center both axes). Exception, not precedent. */
.rw-u-flex-center { align-items: center !important; justify-content: center !important; }

/* ── Margin utilities ───────────────────────────────────────
   Vertical margins only, on the --spacing-* scale in 01-tokens.css.

   FOR HAND-WRITTEN MARKUP ONLY. If the thing being spaced is a Beaver Builder
   ROW or MODULE, use the builder's own Margins/Padding fields instead — the
   theme's stated split is that the builder owns geometry (see the header of
   10-sections.css), those settings are per-breakpoint, and they beat this
   file's rules by specificity anyway. These classes exist for the places with
   no settings panel: HTML modules, widgets, template partials.

   No padding utilities, by request and on purpose. Padding is nearly always a
   property of a component's own design rather than of its position in a page,
   so a padding utility tends to mean a component is missing a rule.

   No horizontal margins either: `auto` centring is the only common case and
   it belongs with the element being centred, which needs a width to centre
   within (see the footer logo in 05-footer-widgets.css).

   !important is the contract of this file, not an accident — these have to win
   against component rules to be worth typing into a CSS-class field.

   Bootstrap's mb-3 and friends are NOT available: the theme loads bb-theme's
   grid-only base-4 build, which ships .container, .row, .col-*, .order-* and
   the .text-* utilities, and nothing else. (Those class names are listed with
   commas rather than slashes on purpose. A `.col-*` followed immediately by a
   slash spells a comment terminator, which closes this block early and makes
   the parser swallow the first rule after it as the body of the leftover text.
   Not hypothetical: it silently ate .rw-u-mb-0 when this block was first
   written, and the rule was valid the whole time.) That is deliberate — see the
   fl_theme_framework_enqueue filter in functions.php. These are the
   replacement. */

.rw-u-mb-0  { margin-bottom: 0 !important; }
.rw-u-mb-xs { margin-bottom: var(--spacing-xs) !important; }
.rw-u-mb-sm { margin-bottom: var(--spacing-sm) !important; }
.rw-u-mb-md { margin-bottom: var(--spacing-md) !important; }
.rw-u-mb-lg { margin-bottom: var(--spacing-lg) !important; }
.rw-u-mb-xl { margin-bottom: var(--spacing-xl) !important; }

.rw-u-mt-0  { margin-top: 0 !important; }
.rw-u-mt-xs { margin-top: var(--spacing-xs) !important; }
.rw-u-mt-sm { margin-top: var(--spacing-sm) !important; }
.rw-u-mt-md { margin-top: var(--spacing-md) !important; }
.rw-u-mt-lg { margin-top: var(--spacing-lg) !important; }
.rw-u-mt-xl { margin-top: var(--spacing-xl) !important; }

.rw-u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Footer bar: centre both columns on mobile ──────────────
   The second non-utility rule in this file, here for the same reason as the
   one below: this is the only file permitted !important, and this override
   cannot be written without one.

   THE PROBLEM. bb-theme's footer templates hard-code Bootstrap's .text-left
   and .text-right utility classes onto the two column divs
   (footer-col1.php / footer-col2.php), and base-4 declares both at forced
   priority:

       .text-left  { text-align: left  !important }
       .text-right { text-align: right !important }

   Below 767px 06-footer.css stacks those columns, and a stacked layout wants
   both centred — the copyright block reading hard left under a centred button
   looks like the alignment failed rather than like a decision.

   WHY IT HAS TO LIVE HERE. 06-footer.css cannot fix it. A value set directly
   on an element always beats one inherited from an ancestor, so `text-align:
   center` on .fl-page-footer-row could never reach those divs whatever its
   specificity — and beating an !important needs an !important, which that
   file is not allowed to carry. The header of 06-footer.css has recorded this
   as an open flag since the CSS rebuild; this closes it.

   Specificity is doing the work, not just source order: .fl-page-footer-row
   .text-left is 0-2-0 against base-4's 0-1-0, so this wins among !important
   declarations rather than relying on which stylesheet loads last.

   Scoped to the footer row on purpose. .text-left and .text-right are generic
   Bootstrap utilities used all over the site, and anyone who types one into a
   module expects it to hold. */
@media (max-width: 767px) {
    .fl-page-footer-row .text-left,
    .fl-page-footer-row .text-right {
        text-align: center !important;
    }
}

/* ── Video lightbox close button ────────────────────────────
   The only !important in this file that is not a utility, and it is here
   because this is the one file allowed to carry one.

   Beaver Builder's generated layout CSS ships:
     .admin-bar .mfp-wrap .mfp-close, … { top: 32px !important; }
   to keep Magnific Popup's close button clear of the WordPress admin bar.
   That pushes it 32px DOWN into the content, which on a video lightbox puts
   it straight on top of Vimeo's own controls. Only logged-in users see it —
   the rule is gated on .admin-bar — but that includes everyone editing the
   site, and the intended -40px in 13-carousel.css cannot beat an !important
   by specificity alone.

   Scoped to .rw-video-popup (mainClass, set in rw-video-carousel.js) so
   Beaver Builder's own lightboxes keep BB's admin-bar behaviour. The popup is
   vertically centred, so -40px never reaches the admin bar and the problem
   BB's rule guards against does not arise here.

   The :hover, :focus and :active variants are listed because BB's rule lists
   them too. Overriding only the base state left the button jumping back down
   to 32px the moment it was hovered. Ours ties BB's selectors on specificity
   (0-4-0) and wins on source order, since 99-utilities.css is enqueued after
   the builder's generated layout CSS. MP separately nudges .mfp-close:active
   to top: 1px, which the :active selector here also absorbs. */
.admin-bar .rw-video-popup .mfp-close,
.admin-bar .rw-video-popup .mfp-close:hover,
.admin-bar .rw-video-popup .mfp-close:focus,
.admin-bar .rw-video-popup .mfp-close:active { top: -44px !important; }



/* Fix Vimeo background video sizing */
.fl-row-bg-video .fl-bg-video iframe,
.fl-row-bg-embed .fl-bg-embed-code iframe {
    width: 177.77777778vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 100%;
}