/* Shared footer. The same file is in staff-site, contestant-site, leaderboards and production-site: change all four.
   The drawing is the horizon from the production sign-in page, in the same proportions: the line starts
   at the left edge of the page and stops before the right edge, with the sun in the middle of it.
   The name follows the line, centred on it, and the links sit below the name with the same left edge. */
.site-footer { --sf-ground: #cfc6e4; container-type: inline-size; margin-top: 24px; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
@media (prefers-color-scheme: dark) { .site-footer { --sf-ground: #3d3468; } }
.sf-grid { --sf-gap: clamp(64px, 10cqw, 200px); --sf-line: min(61.6cqw, 100cqw - 384px - var(--sf-gap)); padding-bottom: 48px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

.sf-draw { width: var(--sf-line); }
.sf-sun { display: block; width: 240px; height: 120px; margin: 0 auto; }
.sf-glow { fill: var(--accent); opacity: .16; }
.sf-core { fill: var(--accent); opacity: .28; }
.sf-under { position: relative; }
.site-footer .sf-name { position: absolute; left: calc(100% + 24px); top: 1px; margin: 0; transform: translateY(-50%); color: var(--text); font: 400 2.25rem/1 var(--display); white-space: nowrap; }
.sf-lines { display: block; }
.sf-lines line { stroke: var(--sf-ground); stroke-width: 1.5; }
.sf-lines .sf-line { stroke: var(--accent); stroke-width: 2; opacity: .6; }

.sf-right { display: flex; align-items: flex-start; gap: 24px var(--sf-gap); margin-left: calc(var(--sf-line) + 24px); }
.sf-right ul { margin: 0; padding: 0; list-style: none; }
.sf-right a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; white-space: nowrap; }
.sf-right svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.sf-right .sf-arrow { width: 11px; height: 11px; margin-left: -3px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-footer .sf-head { margin: 0 0 8px; color: var(--text); font-size: .9375rem; font-weight: 600; line-height: 1.5; }

@media (pointer: coarse) {
  .sf-right a { padding: 8px 0; }
}
@container (max-width: 1000px) {
  .sf-right { margin-top: 14px; }
}
@container (max-width: 860px) {
  .sf-sun { width: 180px; height: 90px; }
}
@container (max-width: 780px) {
  .sf-grid { --sf-line: calc(100cqw - 336px); padding-bottom: 36px; }
  .site-footer .sf-name { left: calc(100% + 20px); }
  .sf-sun { width: 140px; height: 70px; }
  .sf-right { flex-wrap: wrap; column-gap: 20px; width: fit-content; max-width: calc(100% - 32px); margin: 16px 16px 0 auto; }
}
@container (max-width: 520px) {
  .sf-grid { --sf-line: calc(100cqw - 230px); }
  .sf-sun { width: 120px; max-width: 100%; height: auto; }
  .site-footer .sf-name { left: calc(100% + 14px); font-size: 1.5rem; }
}
@container (max-width: 400px) {
  .sf-right { max-width: calc(100% - 20px); margin-right: 10px; }
}

/* Sign-in and no-access pages: the footer starts low enough that the window ends just under the ground lines
   and the links are below the fold. 148px is the top bar, the footer's top margin and 64px below the line. */
main.center { --sf-sun-h: 120px; min-height: calc(100vh - 148px - var(--sf-sun-h)); min-height: calc(100svh - 148px - var(--sf-sun-h)); }
@media (max-width: 860px) { main.center { --sf-sun-h: 90px; } }
@media (max-width: 780px) { main.center { --sf-sun-h: 70px; } }
@media (max-width: 520px) { main.center { --sf-sun-h: 60px; } }