/*
 * 30 Second Genius: the header and the footer, one stylesheet for every page that has them: the app
 * (src/style.css imports it), the 4 games, the 404 page and the Brands layout (_layout.html and the blog
 * templates). The markup is src/ui/chrome.ts. Plain CSS in px (the app's root is 18 px, the games' 16 px);
 * colors only from the tokens in theme.css (src/ui/theme.css).
 */

.tsg-wrap {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 16px;
}

.tsg-header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-rule);
}

.tsg-header .tsg-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.tsg-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.tsg-brand img {
  width: 40px;
  height: 40px;
}

/*
 * The menu: Puzzle · Games · Blog · Newsletter. Next to the name when there is room, otherwise in a row of its
 * own under it (a 320 px phone). Every link is 48 px tall; the page you are on (Blog on the blog) is in the ink color with a thicker line (not bold: that would change the width).
 */
.tsg-nav {
  margin-left: auto;
}

.tsg-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsg-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tsg-nav a:hover {
  color: var(--color-deep);
}

.tsg-nav a[aria-current='page'] {
  color: var(--color-text);
  text-decoration-thickness: 3px;
}

@media (max-width: 639px) {
  .tsg-header .tsg-wrap {
    flex-wrap: wrap;
  }

  .tsg-nav {
    flex: 1 0 100%;
  }

  .tsg-nav ul {
    justify-content: space-between;
  }
}

@media (min-width: 360px) {
  .tsg-brand {
    font-size: 22px;
  }
}

@media (min-width: 640px) {
  .tsg-brand {
    gap: 12px;
    font-size: 27px;
  }

  .tsg-brand img {
    width: 44px;
    height: 44px;
  }
}

.tsg-footer {
  margin-top: 32px;
  background: var(--color-text);
  color: var(--color-card);
  font-size: 18px;
}

.tsg-footer .tsg-wrap {
  padding-top: 32px;
  padding-bottom: 32px;
}

.tsg-footer :focus-visible {
  outline-color: var(--color-card);
}

.tsg-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tsg-footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--color-card);
}

.tsg-footer-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
}

.tsg-footer-tagline {
  display: block;
}

/* P9: every link has its dot in front ("· Blog · Terms of Use · Privacy Policy"), so a line never ends
   with a dot; the row starts 22 px to the left and the nav clips everything left of it (8 px room for the
   focus ring), so the dot in front of the first link on each line is cut off and never starts a line. */
.tsg-footer-links {
  margin-top: 16px;
  margin-left: -8px;
  padding-left: 8px;
  overflow-x: clip;
}

.tsg-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -22px;
}

.tsg-footer-pair {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.tsg-footer-pair > span {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

.tsg-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  color: var(--color-card);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* D24 (P5): 15 px small print, about 60 characters wide, calmer than the rest of the footer (same as src/style.css). */
.tsg-footer-legal {
  margin-top: 16px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-card) 74%, var(--color-text));
}

/* Disclaimer D right above A (D19.2): one block of small print. */
.tsg-footer-legal + .tsg-footer-legal {
  margin-top: 4px;
}