/*
 * 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;
}
/* The features group holds eleven links, twice any other group. It reads like the others — a title
   over a vertical list — and splits that list into side-by-side columns where they fit, so it is
   about as tall as its neighbours. A column is at least as wide as the language's longest feature
   label, so a label never breaks: zh / ja ≤ 127px at 14px, en 178px, ar 232px (column-width is a
   minimum; the browser makes as many columns as fit, and one when two do not).
   Phones: the brand, then the three short groups in their wrapping row, then features on a row of
   its own. 640px: features is a full row under the three. 1024px: the brand takes the top row (logo
   and contact side by side) and the four groups share the next, features on two tracks. */
.sf-grid > .sf-group-features {
  flex-basis: 100%;
}
.sf-group-features ul {
  column-width: 8.5rem;
  column-gap: 1.5rem;
}
:lang(en) .sf-group-features ul { column-width: 11.5rem; }
:lang(ar) .sf-group-features ul { column-width: 15rem; }
.sf-group-features li {
  break-inside: avoid;
}
.sf-group-features li:first-child {
  margin-top: 0;
}
@media (min-width: 640px) {
  .sf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-brand-col,
  .sf-group-features { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: 2rem 2.5rem; }
  .sf-brand-col { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; }
  .sf-brand-col .sf-contact { margin: 0; }
  .sf-group-features { grid-column: auto; }
}
/* Arabic labels run widest (read 220px, features 232px): the four-across row only from 1280px, as
   four equal tracks (258px there); below that, the 640px layout with features on its own row. */
@media (min-width: 1024px) and (max-width: 1279px) {
  :lang(ar) .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :lang(ar) .sf-group-features { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  :lang(ar) .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.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;
}