/* 05 — Footer widgets
   Owns: .fl-page-footer-widgets — the upper footer band
   Depends on: 01-tokens, 02-base

   Markup contract (confirmed against the live page 2026-09-12):
     <div class="fl-page-footer-widgets">
       <div class="fl-page-footer-widgets-container container">
         <div class="fl-page-footer-widgets-row row">
           <div class="col-md-12 col-lg-12 fl-page-footer-widget-col fl-page-footer-widget-col-1">
             <aside class="rw-footer-widgets-logo fl-widget widget_media_image">
               <img class="image wp-image-24 attachment-full size-full" …>
             </aside>
             <aside class="widget_text rw-footer-text fl-widget widget_custom_html">
               <div class="textwidget custom-html-widget">
                 <p>Agape Media Group</p>
                 <p>Miami · Fort Lauderdale · Palm Beach<br>
                    <a href="tel:…">…</a> · <a href="mailto:…">…</a></p>
               </div>
             </aside>
             <aside class="widget_text fl-widget widget_custom_html">
               <div class="textwidget custom-html-widget">
                 <div class="fl-social-icons">
                   <a href="…"><span class="sr-only">Facebook</span><i class="fab fa-facebook-f mono"></i></a>
                   …
                 </div>
               </div>
             </aside>
           </div>
         </div>
       </div>
     </div>

   HISTORY, because the previous version of this file said the opposite: it was
   written blind against bb-theme's PHP, because FLTheme::has_footer_widgets()
   gates the whole section on an active footer widget and none were configured
   at the time — the section did not exist in the DOM on any page. Three
   widgets are now configured (logo, text, social) in a single full-width
   column, so the contract above is read off the live page and this file has
   been verified in a browser. The three .rw-* classes are hand-typed into each
   widget's CSS-class field in Appearance > Widgets.

   Everything here is CENTRED, per the approved mockup. text-align on the
   container carries the text, but the logo and the social row are not inline
   content and need their own centring — see each rule. */

.fl-page-footer-widgets {
    background-color: var(--footer-bg);
    padding: var(--section-padding) 0;
    color: var(--footer-text);
    text-align: center;
}

.fl-page-footer-widgets h1, .fl-page-footer-widgets h2,
.fl-page-footer-widgets h3, .fl-page-footer-widgets h4,
.fl-page-footer-widgets h5, .fl-page-footer-widgets h6 { color: var(--surface); }

/* Links are NOT underlined here, unlike the old version of this file.
   The footer's links are a phone number and an email sitting in a run of
   contact text; underlining both made the line read as a row of buttons. The
   accent on hover is the affordance instead. This is a deliberate departure
   from 02-base.css's global underline, which exists for links in prose. */
.fl-page-footer-widgets a {
    color: var(--footer-text);
    text-decoration: none;
    transition: var(--transition-base);
}

.fl-page-footer-widgets a:hover,
.fl-page-footer-widgets a:focus-visible {
    color: var(--accent);
    text-decoration: none;
}

.fl-page-footer-widgets .fl-widget { margin-bottom: var(--spacing-lg); }
.fl-page-footer-widgets .fl-widget:last-child { margin-bottom: 0; }

/* ── Logo ───────────────────────────────────────────────────
   margin-inline: auto, not text-align. The <img> is a block here so that its
   width can be controlled; a block box is not centred by the container's
   text-align, only inline content is.

   Width, not height: the source is 198x195 and the mockup renders it around
   285px wide, so it is being scaled UP. Safe — it is an SVG with no raster
   fallback, so there is nothing to go soft. `height: auto` is stated because
   the markup carries width/height ATTRIBUTES (198/195) and without it the
   intrinsic height would fight the new width and squash the artwork. */
.fl-page-footer-widgets .rw-footer-widgets-logo img {
    display: block;
    width: var(--footer-logo-w);
    height: auto;
    margin-inline: auto;
}

/* ── Contact block ──────────────────────────────────────────
   The company name is the widget's FIRST <p>. Targeted positionally rather
   than by a class because the widget is hand-written HTML in the admin and
   the markup should stay as plain as possible for whoever edits it next — the
   trade is that adding a paragraph above it would move the treatment, which is
   why this comment exists. */
.fl-page-footer-widgets .rw-footer-text p {
    /* No bottom margin on the run: there are two paragraphs, the first sets
       its own spacing below (it has the divider to clear) and the second is
       the last child. A --spacing-sm token was tried here and does not exist —
       the scale is a single --spacing-md step, and inventing a second one for
       one declaration is not worth the palette churn. */
    margin: 0;
    color: var(--footer-text);
    line-height: 1.7;
}

.fl-page-footer-widgets .rw-footer-text p:first-child {
    position: relative;
    /* Room for the divider drawn below, plus the gap under it. */
    margin-bottom: calc(var(--spacing-lg) + 0.5rem);
    padding-bottom: 0.9rem;
    color: var(--surface);
    font-weight: 600;
}

/* The short rule under the company name. A pseudo-element rather than an <hr>
   in the widget: it is presentation, and keeping it here means the widget's
   HTML stays editable text with nothing structural to preserve.
   66x2px, centred — measured off the mockup. */
.fl-page-footer-widgets .rw-footer-text p:first-child::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 66px;
    height: 2px;
    background-color: var(--footer-rule);
}

.fl-page-footer-widgets .rw-footer-text p:last-child { margin-bottom: 0; }

/* ── Social icons ───────────────────────────────────────────
   Scoped to the footer. .fl-social-icons is also used in the top bar, where
   03-topbar.css styles it as a plain inline row — that rule is scoped to
   .fl-page-bar, and this one to .fl-page-footer-widgets, so the two treatments
   of the same component cannot reach each other.

   Laid out on the CONTAINER as flex + justify-content, not by the inherited
   text-align: .fl-social-icons is itself the flex container, and its children
   become flex items that text-align cannot position. (03-topbar.css records
   the same finding for the same element.)

   Written for any number of icons — the mockup shows four including a
   location pin, the site currently has three. Nothing here counts them. */
.fl-page-footer-widgets .fl-social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.fl-page-footer-widgets .fl-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--footer-social-size);
    height: var(--footer-social-size);
    border: 1px solid var(--footer-rule);
    border-radius: var(--card-border-radius, 4px);
    color: var(--surface);
    font-size: 1.25rem;
    transition: var(--transition-base);
}

.fl-page-footer-widgets .fl-social-icons a:hover,
.fl-page-footer-widgets .fl-social-icons a:focus-visible {
    border-color: var(--surface);
    background-color: var(--surface);
    color: var(--footer-bg);
}

/* Gravity Forms embed — container only (spacing + width). The form's own
   controls (inputs, labels, buttons) are deliberately deferred to
   07-forms.css; do not add rules for them here. */
.fl-page-footer-widgets .gform_wrapper {
    margin: 0;
    max-width: 100%;
}