/* Simple Faith Tools: the way back to the catalog
 *
 * Every tool carries the same two links, styled here once.
 *
 * 1. At the very top of the page, before the tool's own header:
 *
 *      <link rel="stylesheet" href="/home-link.css">
 *      ...
 *      <nav class="sft-home" aria-label="Simple Faith Tools">
 *        <a href="/">&larr; Simple Faith Tools</a>
 *      </nav>
 *
 * 2. On the tool's finish screen, next to "start again":
 *
 *      <p class="sft-more"><a href="/">Explore more tools &rarr;</a></p>
 *
 * Each page tunes the color to its own palette with custom properties:
 *
 *   --sft-home-ink     the quiet top link (defaults to the catalog's muted ink)
 *   --sft-home-hover   top link on hover
 *   --sft-home-accent  the finish-screen link
 *   --sft-home-max     column width to line up with the page (default 38rem)
 *   --sft-home-pad     side padding to line up with the page (default 20px)
 *
 * Always href="/" so it works on any host, and always the same tab.
 */

.sft-home{
  box-sizing:border-box;
  width:100%;
  max-width:var(--sft-home-max,38rem);
  margin:0 auto;
  padding:8px var(--sft-home-pad,20px) 0;
  text-align:left;
}
.sft-home a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:4px 0;
  font:500 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.01em;
  color:var(--sft-home-ink,#6E655B);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.sft-home a:hover{
  color:var(--sft-home-hover,var(--sft-home-ink,#2A2622));
  text-decoration:underline;
  text-underline-offset:3px;
}
.sft-home a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:3px;
}

.sft-more{
  margin:18px 0 0;
  font:600 15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.sft-more a{
  color:var(--sft-home-accent,#993C1D);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.sft-more a:hover{text-decoration-thickness:2px}
.sft-more a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}

@media print{.sft-home,.sft-more{display:none!important}}