/* ==========================================================================
   Make My Theme — footer.css
   One footer on every site (Design.md §14.2, redesigned 2026-09-26): five
   columns on Pebble, then the legal bar as one small centred row with no
   rule above it (2026-10-14) and the sign-off centred over it (2026-10-15), so it reads as the columns' small print. The pre-footer bands that used to
   live here are blocks now and carry their own styles.
   ========================================================================== */

.ft {
    /* Grow the side padding on wide viewports so the content aligns with
       --container-max (matching the header). */
    --ft-pad-x: max(56px, calc((100% - var(--container-max)) / 2));
    color: var(--ink);
    background: var(--paper-soft);
    margin-top: auto;
}
.ft a { color: inherit; text-decoration: none; }

.ft__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-8);
    padding: var(--sp-8) var(--ft-pad-x) var(--sp-6);
}
/* Label role comes from design-base.css; colour is ours. */
.ft__heading { margin: 0 0 var(--sp-3); color: var(--ink); }

/* Folds — a <details> per link column. Above 768px they are held open by
   main.js and the summary is just the heading: no marker, no pointer. */
.ft__fold > summary { display: block; cursor: default; }

.ft__linklist { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-14); color: var(--ink-soft); }
.ft__link { color: var(--ink-soft); display: inline-flex; align-items: center; gap: var(--sp-2); transition: color var(--dur-fast) var(--ease); }
.ft__link:hover,
.ft__link:focus-visible { color: var(--ink); }
.ft__num { letter-spacing: var(--tracking-normal); }

/* Products — each name wears its range's accent at rest and steps up to
   Semibold on hover/focus, keeping its colour (maintainer pick B,
   2026-10-15). The current site's name is Semibold at rest — the same mark,
   since that is the range you are already on. Accent text on Pebble is
   below 4.5:1 for Cabinet, Desk, Door and Panelling; the shortfall is pinned
   in design-contrast.test.js (ACCENT_ON_PEBBLE_WAIVED). Each name ends its
   row, so the wider bold word moves nothing beside it. Doubled class so it
   outranks `.ft a` (inherit) at rest and `.ft__link:hover` (Ink) on hover. */
.ft__link.ft__range,
.ft__link.ft__range:hover,
.ft__link.ft__range:focus-visible { color: var(--row-accent, var(--accent)); }
.ft__range.is-current,
.ft__range:hover,
.ft__range:focus-visible { font-weight: var(--fw-semibold); }

/* ── Legal bar ─────────────────────────────────────────────────────────── */

/* The sign-off — mark, then "© Make My Ltd · Company no." — centred on its
   own line, then one centred row of 11px small print under it. The sign-off
   stays Ink Soft; the legal links and social glyphs drop to Ink Muted
   (2026-10-15), a pinned AA shortfall on Pebble (design-contrast.test.js,
   "Footer legal row"). The dots between legal links go on phones, where the
   row wraps. */
.ft__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    padding: 0 var(--ft-pad-x) var(--sp-6);
    font-size: var(--fs-11);
    color: var(--ink-muted);
}
.ft__sign {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.ft__company { margin: 0; font-size: var(--fs-12); color: var(--ink-soft); }
.ft__dot { margin-inline: var(--sp-1); color: var(--ink-faint); }
.ft__legal::after { content: "·"; margin-left: var(--sp-1); color: var(--ink-faint); }
/* The sign-off logo is this site's own, as its header sets it — the header's
   .mm-lockup geometry at a fixed 16px device ink height (header.css explains
   the ratios). The device's ink is then 40.8px wide, above the device-alone
   38px minimum (Design.md §2.1); the hub's landscape lockup takes the
   header's 44 : 30 height-to-ink ratio. */
.ft__mark {
    --mm-mark-h: 16px;
    --mm-lockup-fs: calc(var(--mm-mark-h) * 1.2835);
    display: inline-flex;
    align-items: center;
}
.ft__mark-img { display: block; width: auto; height: calc(var(--mm-mark-h) * 1.19565); flex: none; }
.ft__mark-img--landscape { height: calc(var(--mm-mark-h) * 1.4667); }
.ft__copy:hover,
.ft__legal a:hover { color: var(--ink); }

.ft__legal { display: flex; gap: var(--sp-4); justify-content: center; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.ft__legal li:not(:last-child)::after { content: "·"; margin-left: var(--sp-4); color: var(--ink-faint); }

/* 16px glyphs in 44px tap boxes, butted together. The negative margins give
   back the box's slack so the row keeps its height and the glyphs sit the
   bar's gap from the legal links. */
.ft__social {
    --ft-social-slack: calc((16px - var(--h-control)) / 2);
    display: flex;
    list-style: none;
    margin: var(--ft-social-slack);
    padding: 0;
    color: var(--ink-muted);
}
.ft__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--h-control); height: var(--h-control); }
.ft__social a:hover { color: var(--ink); }
.ft__social svg { width: 16px; height: 16px; }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (width < 1100px) {
    .ft__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (width < 768px) {
    .ft { --ft-pad-x: 16px; }

    /* Phones: the link columns fold into one list of tap rows (all closed on
       load), and Contact drops below them as plain text. */
    .ft__cols { grid-template-columns: 1fr; gap: 0; padding-block: var(--sp-2) 0; }
    .ft__fold { border-bottom: 1px solid var(--rule-strong); }
    .ft__fold > summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        padding-block: var(--sp-4);
        cursor: pointer;
    }
    .ft__fold > summary::after { content: "+"; font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: 1; }
    .ft__fold[open] > summary::after { content: "−"; }
    .ft__fold > .ft__linklist { padding: 0 0 var(--sp-4); }

    .ft__contact { order: 1; padding-block: var(--sp-5); }
    .ft__contact .ft__heading { display: none; }

    .ft__bar { flex-direction: column; text-align: center; gap: var(--sp-3); padding-top: var(--sp-6); }
    .ft__sign { flex-basis: auto; margin-bottom: 0; }
    .ft__legal::after { content: none; }
    /* Stacked and centred: no edge to meet, and a negative margin would pull
       the tap boxes over the legal links above. */
    .ft__social { margin: 0; }
    /* The dots dangle at a wrapped line's end, so on phones the gap alone
       separates the items. */
    .ft__legal { gap: var(--sp-2) var(--sp-5); }
    .ft__legal li:not(:last-child)::after { content: none; }
}

/* App mode: a configurator page inside the Make My app's web view ends with
   the configurator's own action bar (inc/app-mode.php; main.css "App mode"). */
html[data-app="1"]:has(.config-shell) .ft {
    display: none;
}