/* Shared generator footer (layout after meshcast.app). Same layout on every site; each site sets only these
   variables on .gf (or :root) from its own palette:
     --gf-bg      footer background          --gf-ink     headings and brand name
     --gf-text    link and body text          --gf-muted   column headings, blurb, bottom bar
     --gf-accent  link hover, the current generator, social hover
     --gf-line    divider above the bottom bar and social button borders
     --gf-chip    social button background
     --gf-display font for the brand name     --gf-font    body font                               */
.gf {
  --gf-bg: #f4f1ea; --gf-ink: #1b1d22; --gf-text: #3a3f4a; --gf-muted: #6b7280;
  --gf-accent: #c2552b; --gf-line: rgba(0, 0, 0, .1); --gf-chip: #fff;
  --gf-display: inherit; --gf-font: inherit;
  background: var(--gf-bg); color: var(--gf-text); font-family: var(--gf-font);
  border-top: 1px solid var(--gf-line);
  font-size: 15px; line-height: 1.5;
}
.gf a { color: inherit; text-decoration: none; }
.gf a:hover, .gf a:focus-visible { color: var(--gf-accent); text-decoration: underline; text-underline-offset: 3px; }
.gf a:focus-visible { outline: 2px solid var(--gf-accent); outline-offset: 2px; border-radius: 4px; }
.gf-inner {
  max-width: 1200px; margin: 0 auto; padding: 48px 32px 40px;
  display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(4, minmax(120px, 1fr)); gap: 32px;
}
.gf h2 {
  margin: 0 0 14px; font: 700 12px/1.2 var(--gf-font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gf-muted);
}
.gf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gf-plain li { color: var(--gf-text); }
.gf [aria-current="page"], .gf .gf-here { color: var(--gf-accent); font-weight: 700; }
.gf-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.gf-logo:hover { text-decoration: none !important; }
.gf-mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--gf-accent); color: var(--gf-bg); flex: none;
}
.gf-mark svg { width: 20px; height: 20px; }
.gf-name { font: 700 20px/1.1 var(--gf-display); color: var(--gf-ink); letter-spacing: .01em; }
.gf-blurb { margin: 0 0 18px; color: var(--gf-muted); max-width: 30ch; }
.gf-social { display: flex; gap: 10px; }
.gf-social a {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gf-chip); border: 1px solid var(--gf-line); color: var(--gf-ink);
}
.gf-social a:hover { color: var(--gf-accent); border-color: var(--gf-accent); text-decoration: none; }
.gf-social svg { width: 18px; height: 18px; }
.gf-bottom {
  max-width: 1200px; margin: 0 auto; padding: 18px 32px 28px; border-top: 1px solid var(--gf-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 13px; color: var(--gf-muted);
}
.gf-bottom p { margin: 0; }
.gf-credit a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .gf-inner { grid-template-columns: 1fr 1fr; padding: 40px 20px 32px; gap: 28px 20px; }
  .gf-brand { grid-column: 1 / -1; }
  .gf-bottom { padding: 16px 20px 24px; }
}
@media (max-width: 420px) {
  .gf-inner { grid-template-columns: 1fr; }
  .gf ul a { display: inline-block; padding: 4px 0; } /* 44 px touch rows with the gap */
}

/* Legal pages: a readable column in the site's own colours */
.gf-legal { max-width: 760px; margin: 0 auto; padding: 48px 24px 64px; line-height: 1.65; }
.gf-legal h1 { margin: 0 0 6px; }
.gf-legal .gf-updated { margin: 0 0 28px; color: var(--gf-muted, #6b7280); font-size: 14px; }
.gf-legal h2 { margin: 32px 0 8px; font-size: 1.2em; }
.gf-legal ul { padding-left: 1.2em; }
.gf-legal table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; }
.gf-legal th, .gf-legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0, 0, 0, .12); vertical-align: top; }
.gf-legal .gf-note { padding: 12px 16px; border-radius: 10px; background: rgba(0, 0, 0, .04); }

/* ------------------------------------------------------------------ Game Storage Generator settings
   The light look from the kit's Storage column, every colour from Bubblegum 16 (the --p-* variables in style.css) or a
   color-mix of two of them. Contrast on the footer background (sky 10% in white, #ebf5fb), WCAG AA needs 4.5:1:
   ink 16.2:1, navy text 8.3:1, muted (navy 85%) 5.5:1, teal accent 4.6:1; social icons ink on white 17.6:1.
   The kit's muted (navy 75%) gave 4.25:1, so it steps darker to navy 85%. */
.gf, .gf-legal {
  --gf-bg: color-mix(in srgb, var(--p-sky) 10%, var(--p-white));
  --gf-ink: var(--p-ink);
  --gf-text: var(--p-navy);
  --gf-muted: color-mix(in srgb, var(--p-navy) 85%, var(--p-white));
  --gf-accent: var(--p-teal);
  --gf-line: color-mix(in srgb, var(--p-deep) 14%, transparent);
  --gf-chip: var(--p-white);
  --gf-display: var(--font); --gf-font: var(--font);
}
.gf-name b { color: var(--gf-accent); font-weight: inherit; }
.gf-mark { color: var(--p-white); box-shadow: 0 2px 6px color-mix(in srgb, var(--p-teal) 33%, transparent); }
/* the kit's legal table lines and note box are black tints; here they are the palette's own mixes */
.gf-legal { font-size: 15px; color: var(--text); }
.gf-legal h1 { font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.gf-legal th, .gf-legal td { border-bottom-color: var(--line); }
.gf-legal th { color: var(--ink); }
.gf-legal .gf-note { background: var(--acc-bg); border: 1px solid var(--acc-line); }
.gf-legal a { color: var(--acc-d); }
.gf-legal :target { scroll-margin-top: calc(var(--bar) + 16px); }
/* phones: every footer link and social button is a 44 px touch target */
@media (max-width: 420px) {
  .gf ul { gap: 0; }
  .gf ul a { padding: 11px 0; min-width: 44px; }
  .gf-social a { width: 44px; height: 44px; }
}