/* ============================================================
   YohApps — SHARED FOOTER STYLES
   v2.0  — slim single bar

   WHAT CHANGED FROM v1
   v1 rendered a four-column sitemap: brand, every app, every site,
   legal. It was a lot of footer for sites that already carry their
   own navigation, and only one of the four sites ever wanted it.
   v2 is the one-line bar yohapps.com had been hand-writing:
   copyright · tagline · legal links · cookie settings. The point of
   the footer is the legal row and the cookie settings button; that
   is now all it is.

   Self-contained: brings its own palette, and defers to the host
   site's --color-* variables wherever they exist. So it looks
   native on a site with a design system and correct on one without,
   with neither needing to know about the other.

   Everything is scoped under .yf-simple. Nothing here reaches the page.
   ============================================================ */

.yf-simple {
  --yf-bg: var(--color-bg-alt, #101015);
  --yf-text: var(--color-text, #f0f0f5);
  --yf-text-2: var(--color-text-secondary, #a0a0b8);
  --yf-border: var(--color-border, rgba(255, 255, 255, 0.10));
  --yf-accent: var(--color-accent, #5b8fee);

  /* If the host puts this footer inside a CSS grid, span every column.
     Ignored outside a grid, so it is free everywhere else.
     [!] This exists because of a real bug: on chessmousespeed.com the
     footer was an unplaced item in a 210px/1fr/270px grid, so it was
     auto-placed into the 210px column and every link wrapped. A host
     grid-area, where one is defined, still wins over this. */
  grid-column: 1 / -1;

  margin-top: 64px;
  background: var(--yf-bg);
  border-top: 1px solid var(--yf-border);
}

@media (prefers-color-scheme: light) {
  .yf-simple {
    --yf-bg: var(--color-bg-alt, #f6f6f9);
    --yf-text: var(--color-text, #16161d);
    --yf-text-2: var(--color-text-secondary, #4a4a5a);
    --yf-border: var(--color-border, rgba(0, 0, 0, 0.10));
  }
}

.yf-simple-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 40px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 24px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--yf-text-2);
}

.yf-simple-tagline {
  font-style: italic;
}

/* The link home. Sits with the identity on the left, not with the legal row,
   because that is what it is. Not rendered on yohapps.com itself. */
.yf-simple-home a {
  color: var(--yf-text);
  text-decoration: none;
  font-weight: 600;
}
.yf-simple-home a:hover {
  color: var(--yf-accent);
  text-decoration: underline;
}
.yf-simple-home a:focus-visible {
  outline: 2px solid var(--yf-accent);
  outline-offset: 3px;
}

.yf-simple-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.yf-simple-links a,
.yf-simple-cookie {
  padding: 0;
  font-size: 0.86rem;
  font-family: inherit;
  color: var(--yf-text-2);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

/* The cookie button is deliberately the most prominent thing in the row.
   In several jurisdictions withdrawing consent has to be as easy as
   giving it, and this button is the only way to do that. */
.yf-simple-cookie {
  color: var(--yf-text);
  font-weight: 600;
  text-decoration: underline;
}

.yf-simple-links a:hover,
.yf-simple-cookie:hover {
  color: var(--yf-accent);
}

.yf-simple-links a:focus-visible,
.yf-simple-cookie:focus-visible {
  outline: 2px solid var(--yf-accent);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .yf-simple-links {
    margin-left: 0;
    gap: 18px;
  }
}