/*
 * Fixfactor site footer.
 *
 * Rewritten 2 Aug 2026: tokens, one branch, dark surface as a declared register.
 *
 * TOKENS. The old file used none - not one `var(--space-*)`, `var(--text-*)`,
 * `var(--radius*)`, `var(--surface*)`, `var(--content*)` or `var(--border-*)`.
 * Its only contact with the system was two colour aliases and the font stack.
 * It now runs entirely on tokens and holds no hex value of its own.
 *
 * THE DARK SURFACE IS DECLARED, NOT INHERITED. It survived the July refresh
 * because nobody touched it, while SS1 said "light-only by decision". Both
 * versions were built and compared on staging; dark won, and the colours moved
 * into the token layer as --*-inverse. Swapping back means repointing the eight
 * variables in the surface contract below - nothing else.
 *
 * ONE BRANCH. Victoria is gone, and with it the two-card grid and the rotated
 * "Our Locations" title. Both existed to let a reader choose between branches.
 *
 * QUIET ON PURPOSE. An earlier pass added board art, review scores, a status
 * dot and a gradient wash to make this "more appealing"; every one of them was
 * noise competing with the information, and they are gone. A footer has three
 * jobs - orientation, contact, closure - and all three are served by hierarchy
 * and space. The accent appears on hover and on the icons that aid scanning,
 * and nowhere else.
 *
 * GONE AND STAYING GONE:
 *   - scale(1.05) on the logo hover: a logo has nothing to change on hover.
 *   - the resting box-shadow on the location cards: they did not float.
 *   - amber tick glyphs: amber is a fill colour here, not a status colour.
 *   - `--ffx-transition: all 0.2s ...` fed into `transition: <prop> var(...)`,
 *     which expanded to an invalid shorthand and killed all five transitions.
 *
 * @package Fixfactor
 */

/* ========== SURFACE CONTRACT ==========
 * Every rule below reads these eight; nothing else knows the register.
 */
.ffx-footer {
    --ffx-surface:        var(--surface-inverse);
    --ffx-surface-raised: var(--surface-inverse-raised);
    --ffx-rule:           var(--rule-inverse);
    --ffx-ink:            var(--content-inverse);
    --ffx-ink-body:       var(--content-inverse-body);
    --ffx-ink-muted:      var(--content-inverse-muted);
    --ffx-brand:          var(--accent-inverse);

    font-family: var(--font-stack);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--ffx-ink-body);
    background: var(--ffx-surface);
    border-top: 1px solid var(--ffx-rule);
    contain: layout style paint;
}

.ffx-footer *,
.ffx-footer *::before,
.ffx-footer *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ffx-footer .ffx-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 15px;
}

/*
 * One icon size, one colour, one job: they mark the kind of fact that follows
 * so the block can be scanned rather than read. Teal because it is the only
 * accent this surface has, and 18px because that is where the 24-grid line work
 * still holds together at 1.5-2 stroke.
 */
.ffx-footer .ffx-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ffx-brand);
    pointer-events: none;
}

/* ========== BRAND + NAVIGATION ========== */
.ffx-footer .ffx-main {
    padding: var(--space-12) 0 var(--space-8);
}

.ffx-footer .ffx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-12);
    align-items: start;
}

.ffx-footer .ffx-logo-link { display: inline-block; line-height: 0; text-decoration: none; }

/*
 * The wordmark, not a monogram and not a card: no radius (a logotype does not
 * get corners), no hover transform. Height-driven so the file's own aspect
 * ratio decides the width.
 */
.ffx-footer .ffx-logo {
    display: block;
    width: auto;
    height: 34px;
}

.ffx-footer .ffx-tagline {
    margin: var(--space-4) 0 var(--space-3);
    max-width: 36ch;
    color: var(--ffx-ink-body);
    /* Keeps the last line from collapsing to one word as the column narrows.
       Ignored by browsers that do not know it, so there is nothing to guard. */
    text-wrap: pretty;
}


/*
 * Social links, moved down from the header top bar on 5 Aug 2026.
 *
 * They were desktop-only up there - the top bar is display:none below 768px -
 * so on phones these links did not exist at all. Down here they are on every
 * viewport, and the row they used to share with the phone number is left to
 * the phone number.
 *
 * 36px targets: comfortably over the 24px WCAG 2.5.8 asks for, and matching
 * the touch ergonomics of the rest of the footer rather than the 28px the
 * top bar could afford.
 */
.ffx-footer .ffx-social {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    /* Follows the tagline directly. Adjacent block margins collapse, so this
       is the whole gap, not an addition to the tagline's. */
    margin-top: var(--space-5);
    /* Optical alignment: the first icon's glyph sits inside its 36px box, so
       the box starts left of the text column to put the mark on the margin. */
    margin-left: -8px;
}

.ffx-footer .ffx-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-tag);
    color: var(--ffx-ink-muted);
}

/*
 * .ffx-icon is teal by default, which is right for a mark that labels text -
 * the pin beside an address, the envelope beside an email. A social link has
 * no text: the mark IS the link, so four teal glyphs in a row become the most
 * saturated thing in the footer, spent on its least important content.
 *
 * These sit in the same tier as the Terms/Privacy row: white at 58%, brand
 * colour on hover. Inheriting from the link keeps rest and hover in one place.
 */
.ffx-footer .ffx-social-link .ffx-icon {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s var(--ease-material), background-color 0.18s var(--ease-material);
}

.ffx-footer .ffx-social-link:hover,
.ffx-footer .ffx-social-link:focus-visible {
    color: var(--ffx-brand);
    background: var(--ffx-surface-raised);
}

.ffx-footer .ffx-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    /* Company carries seven links, For Business three. Without this the short
       columns stretch to the tall one and their boxes carry dead height. */
    align-items: start;
}

/*
 * Title case, and the same size as the links below it.
 *
 * These were 16px/700 in brand teal with a rule underneath - heading weight and
 * heading colour on what is a category marker, so the three columns competed
 * with the branch title. Setting them as small uppercase micro-labels traded
 * that for a different problem: SS1 lists UPPERCASE among the things this brand
 * avoids, and three shouted labels across the widest element on the site is not
 * the rare deliberate case it allows for.
 *
 * Weight and brightness carry the distinction instead - 600 in full ink against
 * 400 in body ink - which is the quietest tool that does the job, and the one
 * that survives being read at a glance.
 */
.ffx-footer .ffx-nav h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ffx-ink);
    /* Wider than the 12px that falls between two links, so the gap itself says
       "heading, then its group" - otherwise the label reads as the first item
       in the list rather than the name of it. */
    margin-bottom: var(--space-4);
}

.ffx-footer .ffx-nav ul { list-style: none; }
.ffx-footer .ffx-nav li + li { margin-top: 2px; }

.ffx-footer .ffx-nav a {
    display: block;
    padding: 5px 0;
    min-height: 30px;
    color: var(--ffx-ink-body);
    text-decoration: none;
    transition: color 0.18s var(--ease-material);
}

.ffx-footer .ffx-nav a:hover { color: var(--ffx-brand); }

/* ========== BRANCH BAND ========== */

/*
 * The location strip: a label on the left, the four facts spread across the
 * rest of the row.
 *
 * The split is 280px and the remainder, not 1fr / 2fr.
 *
 * At 1fr / 2fr the label held a 424px track for two short lines while the four
 * facts were squeezed into 189px tracks - and the widest of them,
 * "hello@fixfactor.co.uk", needs 169px, so they sat almost edge to edge. 200px
 * was the overcorrection: it broke "Walk in, or post your device to us" across
 * three lines and left "us" alone on the last. 280px holds both the heading
 * and the note on one line each, and still hands the facts 230px tracks.
 */
.ffx-footer .ffx-branch {
    margin-top: var(--space-8);
    border-top: 1px solid var(--ffx-rule);
    padding-top: var(--space-8);
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
}

.ffx-footer .ffx-branch-head h3 {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ffx-ink);
}

.ffx-footer .ffx-branch-head p {
    margin-top: var(--space-1);
    color: var(--ffx-ink-muted);
    font-size: var(--text-sm);
}

/* Four facts across from 1280px, two by two where the row is narrower, one
   below 768. Explicit rather than auto-fit: auto-fit gave three columns and an
   orphan at 1440, because four tracks wanted 832px and the grid had 828. */
.ffx-footer .ffx-branch-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

/* 1150, not 1280: at 1200 a fact track is still 188px, comfortably over the
   169px the email needs, and two columns at that width leave the row looking
   half empty. Below 1150 the fourth track drops under 169 and text breaks. */
@media (max-width: 1149px) {
    .ffx-footer .ffx-branch-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ffx-footer .ffx-fact {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

.ffx-footer .ffx-fact .ffx-icon { margin-top: 3px; }

.ffx-footer .ffx-fact address,
.ffx-footer .ffx-fact div {
    font-style: normal;
    color: var(--ffx-ink-body);
    text-wrap: pretty;
}

.ffx-footer .ffx-fact a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--ffx-ink);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.18s var(--ease-material);
}

.ffx-footer .ffx-fact a:hover { color: var(--ffx-brand); }

/*
 * Phone and email are the only facts you can act on and the only ones a thumb
 * aims at, so both carry a 44px target. 24px passes WCAG 2.5.8 but is thin for
 * the number that brings in most of this company's enquiries.
 *
 * The target grows DOWNWARD, not around the text. Centring the text inside a
 * 44px box was the first attempt and it broke the row: measured 5 Aug, the
 * phone's baseline sat 15px below the address's and the mail's 12px below,
 * with the four icons on two different lines 10px apart. Four facts side by
 * side have to share one baseline or the row reads as crooked without the eye
 * being able to say why.
 */
.ffx-footer .ffx-fact--call a,
.ffx-footer .ffx-fact--contact a {
    min-height: 44px;
    align-items: flex-start;
}

/*
 * The phone was one step up the scale for a while, to lead the row. It read as
 * mismatched against the email sitting right next to it at 14px - two lines of
 * the same kind, set differently. Both are 14px/600 now; the number leads by
 * coming first, not by being bigger.
 */
.ffx-footer .ffx-hours span { display: block; }

/* ========== BOTTOM BAR ========== */
.ffx-footer .ffx-bottom {
    background: var(--ffx-surface-raised);
    border-top: 1px solid var(--ffx-rule);
    padding: var(--space-4) 0;
}

.ffx-footer .ffx-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.ffx-footer .ffx-copyright {
    font-size: var(--text-xs);
    color: var(--ffx-ink-muted);
}

.ffx-footer .ffx-legal {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ffx-footer .ffx-legal a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: var(--text-xs);
    color: var(--ffx-ink-muted);
    text-decoration: none;
    transition: color 0.18s var(--ease-material);
}

.ffx-footer .ffx-legal a:hover { color: var(--ffx-brand); }

/*
 * The separators used to be literal "|" characters in the markup, which screen
 * readers read out as part of the link list. A pseudo-element is neither.
 */
.ffx-footer .ffx-legal a + a::before {
    content: "";
    position: absolute;
    left: calc(var(--space-4) / -2);
    top: 50%;
    width: 1px;
    height: 12px;
    transform: translateY(-50%);
    background: var(--ffx-rule);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1023px) {
    .ffx-footer .ffx-main { padding: var(--space-8) 0 var(--space-6); }
    .ffx-footer .ffx-grid,
    .ffx-footer .ffx-branch { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 767px) {
    .ffx-footer .ffx-nav { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
    .ffx-footer .ffx-branch-facts { grid-template-columns: 1fr; gap: var(--space-4); }
    .ffx-footer .ffx-bottom-content { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .ffx-footer .ffx-logo { height: 30px; }

    /*
     * Bigger targets where there is no pointer. 30px clears WCAG 2.5.8 at AA
     * (24px), but a thumb on a moving train is not a mouse: 40px is the
     * smallest of these rows that is comfortable to hit without turning the
     * footer into a page of its own. The legal row keeps 24px - three short
     * links that nobody reaches for in a hurry.
     */
    .ffx-footer .ffx-nav a {
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 0;
    }

    .ffx-footer .ffx-nav li + li { margin-top: 0; }
}

@media (max-width: 575px) {
    .ffx-footer .ffx-container { padding: 0 12px; }
}

/* ========== ACCESSIBILITY & PRINT ========== */
@media (prefers-reduced-motion: reduce) {
    .ffx-footer *, .ffx-footer *::before, .ffx-footer *::after {
        animation: none;
        transition: none;
    }
}

/* Forced contrast: the alpha ramps collapse to solid values. */
@media (prefers-contrast: more) {
    .ffx-footer {
        --ffx-rule:      #ffffff;
        --ffx-ink-body:  #ffffff;
        --ffx-ink-muted: #ffffff;
        --ffx-brand:     var(--teal-300);
    }
}

@media print {
    .ffx-footer {
        background: #fff;
        color: #000;
        border-top: 1px solid #ccc;
    }
    .ffx-footer .ffx-bottom { background: #fff; }
    .ffx-footer a { color: #000; text-decoration: underline; }
    .ffx-footer .ffx-branch { break-inside: avoid; }
}

.ffx-footer a:focus-visible {
    outline: 2px solid var(--ffx-brand);
    outline-offset: 3px;
    border-radius: 2px;
}