/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * FitLynk footer — soft card, brand accents
 *
 * Every rule is scoped under .fl-ft, the same convention newhome-cat3.css uses under .nh-c3, so
 * this file can never reach anything else on the page. The legacy footer rules in main.min.css
 * (.footer-wrapper .footer-powered, .list-inline …) still exist and still apply to the sidebar
 * footer's own markup; the classes they target are simply no longer emitted inside .fl-ft, so the
 * two do not fight and neither needed touching.
 *
 * NOTE — .footer-wrapper itself is deliberately NOT styled here. container.phtml calls
 * $('footer .footer-wrapper').show() on ajax navigation, which writes an inline `display: block`;
 * any flex or grid put on that element would be flattened the first time a user navigates. All
 * layout therefore lives on .fl-ft, one level in.
 *
 * Typography is inherited, not imported. The card sits on every page of the site, and pulling a
 * webfont for a footer would cost more than it returns — New Home preloads DM Sans because its
 * numerals carry the design; here the app's own stack is the right answer.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */

.fl-ft {
    /* Tokens, so the night block below re-points the palette and everything follows. Values are the
       brand set already in use: #CEFF45 is $primaryColor (_color.scss) and the active nav tab in
       left-nav.css; #546C07 is $profilePrimaryText; #e8e8e5 is the New Home hairline. */
    --ft-surface: #ffffff;
    --ft-line:    #e8e8e5;
    --ft-chip:    #f3f4ef;
    --ft-ink:     #1a1a1a;
    --ft-muted:   #999999;
    --ft-link:    #546c07;
    --ft-lime:    #ceff45;
    --ft-deep:    #1a3008;
    --ft-hover:   #3b6d11;

    background: var(--ft-surface);
    border: 0.5px solid var(--ft-line);
    border-radius: 16px;
    padding: 20px 18px 16px;
    margin: 12px 0 0;
    color: var(--ft-ink);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ── Social row ───────────────────────────────────────────────────────────────────────────────── */

.fl-ft-h {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ft-muted);
}

.fl-ft-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
}

/* The artwork is a filled DISC with the glyph knocked out of it, not a bare glyph — so the icon is
   its own chip. No background here: a circle inside a circle just doubles the shape. The <a> is
   sized to the disc so the whole 40px badge is the tap target; the old markup gave a thumb a 32px
   <img> and no padding around it. */
.fl-ft-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #cfcfcf;
    text-decoration: none;
    transition: color .15s ease, transform .15s ease;
}

/* currentColor is the whole point of moving these to inline SVG: the six icons shipped as separate
   files with different fills — pinterest-svg.svg was #000000 against #cfcfcf for the other five, so
   it rendered visibly darker than its neighbours. One colour, one hover, by construction. */
.fl-ft-ico svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
    display: block;
}

/* Deep green on hover, not the lime. The glyph is KNOCKED OUT of the disc, so whatever is behind
   shows through it — against the white card a lime disc would leave the glyph at roughly 1.4:1 and
   effectively invisible, where #3B6D11 puts it around 7:1. Lime stays the accent for surfaces the
   brand fills; a 40px badge whose legibility depends on the knock-out is not one of them. */
.fl-ft-ico:hover,
.fl-ft-ico:focus-visible {
    color: var(--ft-hover);
    transform: translateY(-2px);
    text-decoration: none;
}

.fl-ft-ico:focus-visible {
    outline: 2px solid var(--ft-lime);
    outline-offset: 2px;
}

/* Honour a reduced-motion preference: the colour change still reads, the movement does not. */
@media (prefers-reduced-motion: reduce) {
    .fl-ft-ico { transition: none; }
    .fl-ft-ico:hover, .fl-ft-ico:focus-visible { transform: none; }
}

/* ── Links ────────────────────────────────────────────────────────────────────────────────────── */

.fl-ft-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 18px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.fl-ft-links > li { margin: 0; padding: 0; }

/* 40px min-height keeps every link a real tap target on a phone, which is what the old
   _responsiveStyle.scss rule (font-size 16px, padding 5px 0) was reaching for less directly. */
.fl-ft-links > li > a,
.fl-ft-links > li .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--ft-link);
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease;
}

.fl-ft-links > li > a:hover,
.fl-ft-links > li > a:focus,
.fl-ft-links > li .dropdown-toggle:hover {
    color: var(--ft-deep);
    text-decoration: underline;
}

/* ── Divider + bottom line ────────────────────────────────────────────────────────────────────── */

.fl-ft-rule {
    height: 1px;
    background: var(--ft-line);
    margin: 0 0 12px;
}

.fl-ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--ft-muted);
}

.fl-ft-copy { margin: 0; }

.fl-ft-lang > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    color: var(--ft-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.fl-ft-lang > .dropdown-toggle:hover { color: var(--ft-link); text-decoration: none; }
.fl-ft-lang > .dropdown-toggle svg { width: 16px; height: 16px; }

/* The dropdown itself stays Bootstrap's — .dropup, data-toggle and .dropdown-menu are untouched so
   it still opens upward out of the footer. Only the panel's own skin is brought in line. */
.fl-ft .dropdown-menu {
    border: 0.5px solid var(--ft-line);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.fl-ft .dropdown-menu > li > a {
    border-radius: 8px;
    font-size: 14px;
    padding: 8px 12px;
    color: var(--ft-ink);
}

.fl-ft .dropdown-menu > li > a:hover {
    background: var(--ft-chip);
    color: var(--ft-deep);
}

/* ── Narrow phones ────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 379px) {
    .fl-ft { padding: 18px 14px 14px; }
    .fl-ft-bottom { flex-direction: column; gap: 6px; }
    .fl-ft-social { gap: 8px; }
    .fl-ft-ico, .fl-ft-ico svg { width: 36px; height: 36px; }
}

/* ── Wide: the card also renders on desktop inside .second-footer on $wo['footer_pages'] ───────── */

@media (min-width: 992px) {
    .fl-ft {
        padding: 24px 28px 20px;
        margin-top: 16px;
    }
    .fl-ft-links { gap: 4px 24px; }
}

/* ── Rail variant — the desktop sidebar footer ────────────────────────────────────────────────────
   Same tokens, no card chrome and no social row: it sits in a ~250px sidebar column where a bordered
   panel inside a bordered panel reads as clutter, and the links have to wrap to two or three lines. */

.fl-ft.is-rail {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 13px;
}

.fl-ft.is-rail .fl-ft-links {
    justify-content: flex-start;
    gap: 0 14px;
    margin-bottom: 8px;
}

.fl-ft.is-rail .fl-ft-links > li > a,
.fl-ft.is-rail .fl-ft-links > li .dropdown-toggle {
    min-height: 28px;
    font-size: 13px;
}

.fl-ft.is-rail .fl-ft-rule { margin-bottom: 8px; }
.fl-ft.is-rail .fl-ft-bottom { font-size: 12px; }

/* ── Night ────────────────────────────────────────────────────────────────────────────────────────
   The main app has no .night class on <body>; dark mode is a cookie that loads stylesheet/dark.css
   (container.phtml). The container adds .is-night behind the same cookie test, and re-pointing the
   tokens is all that is needed — every rule above reads them. */

.fl-ft.is-night {
    --ft-surface: #14160f;
    --ft-line:    #2c3126;
    --ft-chip:    #1e2118;
    --ft-ink:     #e9e9e4;
    --ft-muted:   #8a9080;
    --ft-link:    #a9d46a;
    --ft-deep:    #14160f;
    /* Lime is right here: the knocked-out glyph shows the dark card through it, so a lime disc
       reads at high contrast — the reverse of the light-mode case. */
    --ft-hover:   #ceff45;
}

.fl-ft.is-night .dropdown-menu {
    background: #1e2118;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.fl-ft.is-night .dropdown-menu > li > a { color: var(--ft-ink); }
.fl-ft.is-night .dropdown-menu > li > a:hover { background: #2c3126; color: var(--ft-lime); }