/* 03 — Top bar
   Owns: .fl-page-bar (2-cols, social in column 2)
   Depends on: 01-tokens, 02-base

   Markup contract (confirmed against the live page):
     <div class="fl-page-bar">
       <div class="fl-page-bar-container container">
         <div class="fl-page-bar-row row">
           <div class="col-md-6 col-lg-6 text-left clearfix">
             <div class="fl-page-bar-text fl-page-bar-text-1"></div>
           </div>
           <div class="col-md-6 col-lg-6 text-right clearfix">
             <div class="fl-social-icons">
               <a href="..." target="_blank" rel="noopener noreferrer">
                 <span class="sr-only">Facebook</span>
                 <i aria-hidden="true" class="fab fa-facebook-f mono"></i>
               </a>
               ...
             </div>
           </div>
         </div>
       </div>
     </div>

   .fl-page-bar-text-1 (column 1) carries the Customizer's top bar text — as of
   2026-09-05, "Video Production & Camera Rental". It may be empty on other
   builds; the fl-topbar-layout: 2-cols config leaves the element in the markup
   either way, so the text colour/link rules below still apply to it. .fl-social-icons text labels
   are wrapped in .sr-only (defined in 02-base.css) — do not re-hide them
   here. The bootstrap-4 grid (base-4 build) already supplies .container,
   .row and .col-md-6/.col-lg-6 flex behaviour; only the bar chrome and
   icon alignment are owned here. */

.fl-page-bar {
    background-color: var(--brand-dark);
    color: var(--surface);
    height: var(--page-bar-height);
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

/* Text size sits on .fl-page-bar-text, NOT on .fl-page-bar.

   The bar's own font-size is what sizes the social icons: Font Awesome glyphs
   are a font, and .fl-social-icons declares no font-size of its own, so it
   inherits the bar's. Setting 0.8rem on .fl-page-bar would therefore shrink
   the icons from 14px to 12.8px as a side effect. Keep the two separate — if
   the icons ever need their own size, give them an explicit rule rather than
   moving this one back up to the bar.

   Flat rather than clamped, deliberately: the bar is display:none below 768px
   (see the media query at the foot of this file), so a clamp had under a pixel
   of room to move across every viewport where the bar is actually visible. */
.fl-page-bar-text { font-size: 0.8rem; }

/* Match the header's full-bleed width.

   04-header.css takes .fl-page-header-container out of the 1140px .container
   so the logo sits ~48px from the viewport edge. Left in the container, the top
   bar's text started 159px to the right of the logo directly beneath it
   (measured x=197 against x=38 at 1504px) — the two bands read as unrelated.

   Same token as the header, deliberately: these two must not be able to drift
   apart. The inner .row/.col gutters cancel out (-15px margin against 15px
   padding) exactly as they do in the header, so the container's padding is the
   only thing setting the content edge in both. */
.fl-page-bar-container.container {
    max-width: none;
    padding-inline: var(--page-pad-inline);
}

.fl-page-bar a { color: var(--surface); }
.fl-page-bar a:hover, .fl-page-bar a:focus { color: var(--accent); }

.fl-page-bar-row { display: flex; align-items: center; justify-content: space-between; }

/* Column alignment.

   base-4 gives .text-left / .text-right only `text-align: ... !important`, and
   text-align cannot position .fl-social-icons because that element is itself a
   flex container — text-align moves inline content, not flex items. Nor can
   justify-content do it while the columns are display:block: they are flex
   ITEMS of .fl-page-bar-row, not flex containers, so the property is ignored
   outright. Measured before this rule: both columns display:block with
   justify-content:normal, and the icons starting at the right column's left
   edge (x=767 in a 1140px row) — visually mid-bar rather than hard right.

   Making the columns flex containers is what lets the alignment apply.

   Scoped to .fl-page-bar rather than styling .text-left/.text-right globally:
   those are Bootstrap text-align utilities used anywhere on the site, and
   turning every one of them into a flex container would break unrelated
   layouts. */
.fl-page-bar .text-left,
.fl-page-bar .text-right {
    display: flex;
    align-items: center;
}

.fl-page-bar .text-left  { justify-content: start; }
.fl-page-bar .text-right { justify-content: end; }

.fl-page-bar .fl-social-icons { display: flex; align-items: center; gap: var(--gutter); }

@media (max-width: 767px) {
    .fl-page-bar { display: none; }
}