/*
 * The ONE stylesheet for shared/chrome/site-footer.html. Loaded two ways:
 *   - the SPA imports it from SiteFooter.tsx (Vite bundles it with the public pages);
 *   - the Thymeleaf pages link /site-assets/site-footer.css, which the backend serves
 *     from the classpath copy that processResources packs (backend/build.gradle).
 *
 * PINNED DARK: the footer keeps the site's dark chrome in BOTH themes (the landing and
 * the pricing page have always pinned theirs, and the SSR pages followed). So every
 * --sf-* value below is the SPA DARK token from frontend/src/index.css's `.dark` block,
 * and there is deliberately no html.dark block: nothing here changes with the theme.
 * DesignTokenParityTest reads this block and compares each value against index.css —
 * a hand-tuned colour is a red run, and a hex that maps to no token is a red run too.
 *
 * The variables sit on the footer element, not on :root, so the sheet cannot collide
 * with the SPA's own :root / .dark declarations (a :root { color-scheme } here would
 * shadow the SPA's .dark one — same specificity, later source order wins).
 *
 * No font rule on purpose: the footer inherits the page's face (the landing subset on
 * the React pages, the sliced app face on the SSR pages).
 */
.sf-footer {
  color-scheme: dark;
  --sf-bg: #0f0d0a;        /* background */
  --sf-fg: #e8e0d4;        /* foreground */
  --sf-primary: #c4a574;   /* primary — wordmark, the end mark, the mail link */
  --sf-muted: #978b7b;     /* muted-foreground — links and the small print (5.8:1 on --sf-bg) */
  --sf-border: #504536;    /* border */
  background: var(--sf-bg);
  color: var(--sf-fg);
  padding: 3rem 1.25rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.sf-inner {
  max-width: 72rem;
  margin: 0 auto;
}

/* The chapter-end mark is the rule that opens the footer: a hairline on each side of「完」. */
.sf-end {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 2.5rem;
  color: var(--sf-primary);
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.sf-end::before,
.sf-end::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--sf-border);
}

/* Brand column + three link groups.
   RULE: every footer link stays on ONE line at every width, in all four languages — a wrapped
   label reads as two links, and the RWD gate fails it.
   Phones (< 640px) are a WRAPPING ROW sized by the labels: the brand takes its own row, then each
   group is as wide as its longest label and moves down a row when the next one does not fit.
   A fixed two-column grid cannot hold the rule in every language. Longest labels measured at
   14px: ja「データの取り扱いについて」167.7px, en "Submission checklist" 142.1px, zh 84px — two
   equal ja columns need 2 x 167.7 + 24 gap + 40 padding = 399px, wider than a 390 phone.
   So the row decides per language: zh sits three abreast from 360, ja/en put two abreast where
   the pair fits, and a group gets a row of its own only when it has to.
   640px: the three groups in one row (184px columns at 640 >= 167.7); 1024px: all four in one. */
.sf-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 1.5rem;
}
.sf-brand-col {
  flex: 1 0 100%;
}
.sf-grid > .sf-group {
  /* basis auto = the group's longest label; grow shares what is left of the row. min-width 0
     keeps a group from forcing a page scroll: a label wider than the whole row would overflow
     visibly (and the RWD gate reports it) rather than wrap silently. */
  flex: 1 1 auto;
  min-width: 0;
}
@media (min-width: 640px) {
  .sf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-brand-col { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sf-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .sf-brand-col { grid-column: auto; }
}

.sf-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  color: var(--sf-primary);
  text-decoration: none;
}
.sf-brand img {
  height: 1.75rem;
  width: auto;
}

.sf-contact {
  margin: 1rem 0 0;
  color: var(--sf-muted);
}
.sf-contact a {
  color: var(--sf-primary);
  text-decoration: none;
  transition: color 0.2s;
}
.sf-contact a:hover {
  text-decoration: underline;
}

.sf-group-title {
  margin: 0 0 0.75rem;
  color: var(--sf-fg);
  font-weight: 700;
}
.sf-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf-group li {
  margin: 0.35rem 0;
}
.sf-group a {
  display: inline-block;
  white-space: nowrap; /* the one-line rule above: the layout makes room, the label never breaks */
  padding: 0.125rem 0;
  color: var(--sf-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.sf-group a:hover {
  color: var(--sf-fg);
}

.sf-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sf-border);
  font-size: 0.75rem;
  color: var(--sf-muted);
}
.sf-bottom p {
  margin: 0;
}