/* ==========================================================================
   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. 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));
    font-family: var(--font-sans);
    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-12) var(--ft-pad-x) var(--sp-10);
}
/* 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; list-style: none; cursor: default; }
.ft__fold > summary::-webkit-details-marker { display: none; }

.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 { font-family: var(--font-sans); letter-spacing: var(--tracking-normal); }

/* Products — each range's accent square hangs in the gutter so the names stay
   aligned with the heading. The current site's square always shows; the rest
   show on hover/focus. The hub is accentless, so nothing is marked there at
   rest. A non-text mark: no contrast pairing to assert. */
.ft__range { position: relative; }
.ft__range-sq {
    position: absolute;
    left: -14px; /* 8px square + the same 6px gap to the name */
    top: 50%;
    width: 8px;
    height: 8px;
    translate: 0 -50%;
    background: var(--row-accent, var(--accent));
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
}
.ft__range.is-current { color: var(--ink); }
.ft__range.is-current .ft__range-sq,
.ft__range:hover .ft__range-sq,
.ft__range:focus-visible .ft__range-sq { opacity: 1; }

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

.ft__bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-4) var(--ft-pad-x);
    border-top: 1px solid var(--rule-strong);
    color: var(--ink-muted);
}
.ft__sign { display: flex; align-items: center; gap: var(--sp-3); }
/* 41px box = 38.07px of ink (595.57 of 641.31 units): the device-alone
   minimum of 38px ink width (Design.md §2.1). Don't go below 41. */
.ft__mark img { display: block; width: 41px; height: auto; }
.ft__copy:hover,
.ft__legal a:hover { color: var(--ink); }

.ft__legal { display: flex; gap: var(--sp-4); justify-content: 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 bar keeps its height and the last glyph still
   meets the content edge. */
.ft__social {
    --ft-social-slack: calc((16px - var(--h-control)) / 2);
    display: flex;
    list-style: none;
    margin: var(--ft-social-slack) var(--ft-social-slack) var(--ft-social-slack) 0;
    padding: 0;
    color: var(--ink-soft);
}
.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 (max-width: 1023px) {
    .ft__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ft__bar { grid-template-columns: 1fr auto; }
    .ft__legal { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

@media (max-width: 767px) {
    .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: "−"; }
    /* Indented so the Products square has room inside the 16px gutter. */
    .ft__fold > .ft__linklist { padding: 0 0 var(--sp-4) var(--sp-3); }

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

    .ft__bar { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--sp-3); }
    /* 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 { grid-row: auto; justify-content: center; gap: var(--sp-2) var(--sp-5); }
    .ft__legal li:not(:last-child)::after { content: none; }
}