/* rip-footer.css — the footer for every page under /rip/.
 *
 * Pairs with rip-footer.js, exactly as rip-header.css pairs with
 * rip-header.js. Before this there were three footers: a 55-line block inside
 * packs.htm, a two-paragraph one on the welcome page, and a single grey
 * sentence on the member pages. They disagreed about the disclaimer, the
 * trade-mark notice and which links even existed, and each one drifted on its
 * own schedule.
 *
 * Built on the rip-ui tokens so the bottom of the page belongs to the same
 * product as the top of it.
 */

.rf{
    border-top:1px solid var(--rip-line);
    background:var(--rip-bg-2);
    margin-top:60px;
    /* The pack app has a fixed OPEN bar pinned to the bottom of the viewport.
       Without this the last line of the footer sits underneath it. */
    padding-bottom:env(safe-area-inset-bottom,0);
}
.rf-in{ max-width:1120px; margin:0 auto; padding:38px 16px 30px; }

/* ── brand block ───────────────────────────────────────────────────────────
   Says what this is one more time, at the point where someone who scrolled
   the whole page is deciding whether it is for them. */
.rf-brand{ display:flex; align-items:flex-start; gap:12px; margin:0 0 28px; }
/* ⚠ NO CIRCULAR FRAME. These rules dressed a PHOTO — a round crop with a hairline
   border, which is right for an avatar and wrong for a mark. The Pack Dojo logo is
   an ensō: a ring inside a bordered circle reads as two rings fighting, which is
   exactly how it rendered the first time. The SVG carries its own silhouette, so
   the frame comes off and the box just holds it. */
.rf-logo{ width:34px; height:34px; display:block; flex:0 0 auto; }
.rf-brand-tx{ min-width:0 }
.rf-name{ font-family:var(--rip-display); font-weight:800; font-size:19px;
          letter-spacing:-.02em; color:var(--rip-fg); line-height:1.1; }
/* ⚠ NO ch CAPS ANYWHERE IN THIS FOOTER. Three of them were here — 56ch on the
   strapline, 70ch on the summary line, 78ch on the small-print paragraphs —
   and inside a 1,072px footer they computed to 499, 579 and 645px. Every one
   of them wrapped its text in the left half of the bar while the four link
   columns beside them spanned the full width, which is what Aaron kept
   pointing at. A ch cap is a READING measure: right for an article column,
   wrong for a footer, where the container IS the measure and the columns set
   the edge. text-wrap:pretty stays on the strapline so the last line does not
   orphan when it genuinely has to wrap on a phone. */
.rf-what{ font-family:var(--rip-body); font-size:14px; line-height:1.6;
          color:var(--rip-fg-2); margin:6px 0 0; text-wrap:pretty; }

/* ── link columns ──────────────────────────────────────────────────────────
   auto-fit rather than a fixed column count: two columns at 390px, four on a
   desktop, and nothing ever becomes a 20-item vertical scroll. */
.rf-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
          gap:26px 20px; }
.rf-col h2{
    /* 10.5px -> 13px, --rip-fg-3 -> --rip-fg-2. These three words are the
       footer's whole navigation ("Simulator" / "Roaring Sensei" / "Legal") and
       they were the smallest type on any /rip/ page bar the header strapline,
       at 4.14:1 contrast — under AA. Aaron asked for accessibility and said he
       meant sizing; this is shared chrome, so it was failing on every page. */
    font-family:var(--rip-data); font-size:13px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; color:var(--rip-fg-2);
    margin:0 0 10px;
}
.rf-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
/* 34px, not the 44px a tap target usually wants: these are stacked links with
   nothing between them to mis-hit, and 19 of them at 44px made the footer
   taller than the page it sits under. The row's full width is tappable. */
.rf-col a{
    display:flex; align-items:center; min-height:34px;
    font-family:var(--rip-body); font-size:14.5px; font-weight:600;
    color:var(--rip-fg-2); text-decoration:none; transition:color .15s;
}
.rf-col a:hover{ color:var(--rip-fg); text-decoration:underline; }

/* ── the small print ───────────────────────────────────────────────────────
   One visible line, and the full notices behind a disclosure. Fully expanded
   this block was 340px of grey text at the bottom of a 390px-wide phone —
   nobody reads that, so it protects nobody. Collapsed it is one row, and the
   line that matters to a visitor stays on screen. */
.rf-tldr{
    margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--rip-line);
    font-family:var(--rip-body); font-size:13px; line-height:1.6;
    color:var(--rip-fg-2);
}
.rf-fine{ margin:12px 0 0 }
.rf-fine > summary{
    cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px;
    min-height:44px; font-family:var(--rip-data); font-size:13px; font-weight:700;
    letter-spacing:.11em; text-transform:uppercase; color:var(--rip-fg-2);
}
.rf-fine > summary::-webkit-details-marker{ display:none }
.rf-fine > summary::after{ content:'▾'; font-size:10px; transition:transform .15s }
.rf-fine[open] > summary::after{ transform:rotate(180deg) }
.rf-fine > summary:hover{ color:var(--rip-fg-2) }

.rf-legal{
    /* The trade-mark and gambling disclaimers live in here. Legal text is the
       last thing that should be the hardest to read. */
    font-family:var(--rip-body); font-size:13px; line-height:1.75; color:var(--rip-fg-2);
    padding:4px 0 0;
}
.rf-legal p{ margin:0 0 9px }
.rf-legal p:last-child{ margin-bottom:0 }
.rf-legal a{ color:var(--rip-fg-2); text-decoration:underline; }
.rf-legal a:hover{ color:var(--rip-fg) }
.rf-legal b{ color:var(--rip-fg-2); font-weight:700 }

.rf-copy{
    margin:16px 0 0; font-family:var(--rip-body); font-size:13px; color:var(--rip-fg-2);
}
.rf-copy a{ color:var(--rip-fg-2); text-decoration:underline }
.rf-copy a:hover{ color:var(--rip-fg) }

/* ── colour ownership ──────────────────────────────────────────────────────
   Same trap as the header: `.rip-ui a:not(.rip-btn){color:var(--rip-act)}` is
   specificity (0,2,1) and beats any bare footer class, which would turn every
   link down here cyan on the welcome page and the preview hub. These are
   (0,3,0) so they win outright, not on source order. */
.rf a.rf-col-link:not(.rip-btn){ color:var(--rip-fg-2); }
.rf a.rf-col-link:not(.rip-btn):hover{ color:var(--rip-fg); }
.rf .rf-legal a:not(.rip-btn),.rf .rf-copy a:not(.rip-btn){ color:var(--rip-fg-2); }
.rf .rf-legal a:not(.rip-btn):hover,.rf .rf-copy a:not(.rip-btn):hover{ color:var(--rip-fg); }

.rf a:focus-visible,.rf button:focus-visible{
    outline:2px solid var(--rip-act); outline-offset:2px; border-radius:4px;
}

@media(min-width:760px){
    .rf-in{ padding:46px 24px 34px }
    .rf-cols{ gap:30px 26px }
}
@media(prefers-reduced-motion:reduce){
    .rf-col a,.rf-fine > summary::after{ transition:none }
}