/* Layout: the page column (`main`), the header and the footer. The header and footer span the window up to
   --container-wide-width; the content stays in the grid (--container-width, --grid-margin). */

main {
  flex: 1;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-6) var(--grid-margin);
}

/* Full width: add `full` to a block in `main` to take it out of the page column and the grid. It spans the whole
   window (its background reaches the edges), and its content lines up with the header and footer: --grid-margin at
   the sides, at most --container-wide-width, centred beyond. 100cqi is the body's width (base.css), so the scrollbar
   never makes the page scroll sideways. `!important` because the block's own rules come later (pages/*.css) and
   often set its margin or width, e.g. `.popular { margin: … 0 … }`, which would put it back in the column. */
.full {
  width: 100cqi !important;
  max-width: none !important;
  margin-inline: calc(50% - 50cqi) !important;
  padding-inline: max(
    var(--grid-margin),
    (100cqi - var(--container-wide-width)) / 2 + var(--grid-margin)
  ) !important;
}

/* Header, rail, footer */

/* Phones: the home link with the language and theme on the first row, the menu on its own row below (it wraps if it
   ever has to). From 48rem: one row. Spans the whole window with only --grid-margin at the sides, up to
   --container-wide-width, then centred; the page's content (the header search, `main`) stays in the grid. */
.site-header {
  position: relative; /* on phones the account menu's panel hangs from the header (account.css) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'home tools'
    'nav nav';
  align-items: center;
  gap: var(--space-3) var(--space-4);
  width: 100%;
  max-width: var(--container-wide-width);
  margin: 0 auto;
  padding: var(--space-5) var(--grid-margin);
  font-size: var(--text-md);
}

.site-header a {
  color: var(--color-text);
  text-decoration: none;
}

.site-header a:hover {
  color: var(--color-accent);
}

.site-home {
  grid-area: home;
}

.site-nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}

.header-tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'home nav tools';
  }

  .site-nav {
    justify-content: flex-end;
  }

  /* The language and theme are not pages of the site: a divider sets them apart from the menu. */
  .header-tools {
    padding-left: var(--space-5);
    border-left: var(--border-width) solid var(--color-border);
  }
}

.site-nav a[aria-current='page']:not(.button) {
  color: var(--color-accent);
}

/* Contribute: the header's one button, so it stands out on every page. Light purple, filling with the accent on hover,
   with stars twinkling around it (sparkles.css), like the developers' links on About. */
.site-nav .nav-cta {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  border-color: transparent;
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* The other language, with its flag. */
.language-switch a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.flag {
  flex: none;
  width: var(--space-5);
  height: var(--space-3);
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 var(--border-width) var(--color-border);
}

.theme-toggle .theme-icon-light,
:root[data-theme='dark'] .theme-toggle .theme-icon-dark {
  display: none;
}

:root[data-theme='dark'] .theme-toggle .theme-icon-light {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .theme-icon-dark {
    display: none;
  }

  :root:not([data-theme='light']) .theme-toggle .theme-icon-light {
    display: block;
  }
}

.header-search {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
}

.discord-button {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: var(--size-fab);
  height: var(--size-fab);
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* Footer: about the site, link columns, the Discord call, then the copyright line. Stacked on phones. Like the header,
   its content spans the whole window with only --grid-margin at the sides, up to --container-wide-width, then is
   centred; its background always reaches the edges. */
.site-footer {
  --footer-width: calc(var(--container-wide-width) - 2 * var(--grid-margin));
  margin-top: var(--space-20);
  padding: var(--space-12) var(--grid-margin) var(--space-20);
  color: var(--color-text);
  font-size: var(--text-md);
  background: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border);
}

.footer-columns {
  display: grid;
  gap: var(--space-8);
  max-width: var(--footer-width);
  margin: 0 auto;
}

.site-footer h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.site-footer p {
  margin: 0 0 var(--space-2);
}

.site-footer .icon {
  color: var(--color-accent);
}

.footer-title {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.footer-muted {
  color: var(--color-text-muted);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-8) var(--space-12);
}

.footer-links ul {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-discord {
  position: relative;
  align-self: start;
  overflow: hidden;
  padding: var(--space-6);
  color: var(--color-on-discord);
  background: linear-gradient(135deg, var(--color-discord-start), var(--color-discord-end));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    translate var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .footer-discord:hover {
    translate: 0 calc(-1 * var(--space-1));
    box-shadow: var(--shadow-lg);
  }
}

/* The mark: in a soft light circle, giving a little wave while the card is hovered. */
.footer-discord-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size-control-lg);
  height: var(--size-control-lg);
  margin-bottom: var(--space-4);
  background: var(--color-discord-mark);
  border-radius: var(--radius-full);
  transition: rotate var(--duration-base) var(--ease-out);
}

.footer-discord:hover .footer-discord-mark {
  rotate: -8deg;
}

.site-footer .footer-discord h2 {
  position: relative;
  margin: 0 0 var(--space-2);
  color: var(--color-on-discord);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.footer-discord p {
  position: relative;
  margin: 0 0 var(--space-5);
  color: var(--color-on-discord);
}

/* The button turned inside out: white with ink text in both themes, so it stands out on the card. */
.site-footer .footer-discord-join {
  color: var(--color-discord-ink);
  font-weight: var(--weight-semibold);
  background: var(--color-discord-button);
  border-color: var(--color-discord-button);
}

.site-footer .footer-discord-join:hover {
  color: var(--color-discord-ink);
  background: var(--color-discord-button);
  border-color: var(--color-discord-button);
  translate: 0 calc(-1 * var(--space-half));
}

.footer-discord-join .icon {
  transition: translate var(--duration-base) var(--ease-out);
}

.footer-discord-join:hover .icon {
  translate: var(--space-1) 0;
}

/* The button's own hover stars: white ones would vanish on the white button, so they take its ink. */
.footer-discord .footer-discord-join .sparkles i:nth-child(2),
.footer-discord .footer-discord-join .sparkles i:nth-child(5) {
  --star-color: var(--color-discord-ink);
}

/* Stars across the card, twinkling slowly all the time (reduced motion stops them, base.css). Prefixed with the card
   so they win over sparkles.css, which loads later. */
.footer-discord .footer-discord-stars i {
  --star-color: var(--color-on-discord);
  animation: twinkle 3.6s ease-in-out var(--d) infinite;
}

.footer-discord .footer-discord-stars i:nth-child(1) {
  --x: 70%;
  --y: 18%;
}

.footer-discord .footer-discord-stars i:nth-child(2) {
  --x: 88%;
  --y: 40%;
  --d: 0.9s;
  --star-color: var(--color-sparkle);
}

.footer-discord .footer-discord-stars i:nth-child(3) {
  --x: 62%;
  --y: 62%;
  --d: 1.8s;
}

.footer-discord .footer-discord-stars i:nth-child(4) {
  --x: 92%;
  --y: 82%;
  --d: 2.7s;
  --star-color: var(--color-sparkle);
}

.footer-discord .footer-discord-stars i:nth-child(5) {
  --x: 80%;
  --y: 8%;
  --d: 1.3s;
}

.footer-discord .footer-discord-stars i:nth-child(6) {
  --x: 50%;
  --y: 30%;
  --d: 2.2s;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  max-width: var(--footer-width);
  margin: var(--space-8) auto 0;
  padding-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  border-top: var(--border-width) solid var(--color-border);
}

@media (min-width: 40rem) {
  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  /* About | the two link columns together | Discord: three balanced parts, the about column with room of its own. */
  .footer-columns {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-12);
  }
}

@media (min-width: 64rem) {
  .site-header {
    padding: var(--space-8) var(--grid-margin);
  }

  .site-footer {
    padding-bottom: var(--space-8);
  }
}