/* Sunny Street - the stylesheet of its support, press, privacy and terms pages and the 404 (the game page has game.css).
   Each page is one till receipt on the game's sky, as on the game page: the page's title is the receipt's header,
   its sections are cut apart by dashed lines, and the paper is torn off at the end. */
@font-face { font-family: "Lilita One"; src: url("fonts/LilitaOne.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka.woff") format("woff"); font-weight: 300 700; font-display: swap; }     /* (both cut down to Latin, see README) */

:root {
	--sky: #4fb8ff; --paper: #fff; --ink: #2a2440; --sun: #ffd23f; --orange: #c84d06; --green: #58c462; --green-d: #4caf56;
	--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sky); color: var(--ink); font: 18px/1.6 "Fredoka", system-ui, sans-serif; }
a { color: #1552a6; text-underline-offset: 0.15em; }      /* (in-text links on the paper) */
/* Keyboard focus, selected text and the scrollbar in the receipt's colours. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sun); color: var(--ink); }
html { scrollbar-color: var(--ink) var(--sky); }
img { max-width: 100%; height: auto; }

.wrap { max-width: 1312px; margin: 0 auto; padding: 0 64px; }

/* the shop's top line */
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding: 20px 0 14px; font: 22px "Lilita One"; }
.top a { color: var(--ink); text-decoration: none; }
.top nav { display: flex; gap: 26px; }
.top nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* the receipt: the till's mouth held at the top while you read, the paper torn off at the end */
main { position: relative; max-width: 760px; margin: 0 auto 16px; padding: 0 56px 56px; background: var(--paper); }
main::before { content: ""; position: sticky; top: 0; z-index: 2; display: block; height: 22px; margin: 0 -88px 40px; background: var(--ink); border-radius: 0 0 14px 14px; }
main::after { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 16px;
	background: linear-gradient(135deg, var(--paper) 50%, transparent 50%) 0 0 / 24px 16px, linear-gradient(225deg, var(--paper) 50%, transparent 50%) 0 0 / 24px 16px; }

h1, h2, summary, .button { font-family: "Lilita One", "Fredoka", sans-serif; font-weight: 400; }
h1 { margin: 0 0 18px; padding-bottom: 22px; border-bottom: 3px dashed var(--ink); font-size: clamp(40px, 7vw, 60px); line-height: 1; text-align: center; letter-spacing: -0.01em; }
h2 { margin: 36px 0 10px; padding-top: 24px; border-top: 3px dashed var(--ink); font-size: 26px; line-height: 1.15; }
.lead { font-size: 21px; margin: 0 0 8px; }
.legal p, .legal li, .faq p { max-width: 68ch; }
.legal { overflow-wrap: anywhere; }
.note { font-size: 15px; }
.blank { background: var(--sun); padding: 0 4px; border-radius: 4px; }      /* (a blank still to fill before going live) */

/* the questions on the support page: one line each, opened in place */
.faq { margin-top: 24px; }
.faq details { border-top: 3px dashed var(--ink); padding: 14px 0; }
.faq details:last-child { border-bottom: 3px dashed var(--ink); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; font-size: 21px; line-height: 1.3; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; text-align: center; font-size: 28px; line-height: 0.9; color: var(--orange); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--orange); }
.faq p { margin: 10px 0 4px; }

/* the press facts: a label on the left, the value on the right, like the lines of a receipt */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 24px; margin: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; min-width: 0; text-align: right; }

/* the press downloads */
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 20px; margin-top: 16px; }
.downloads a { display: block; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
.downloads img { display: block; width: 100%; height: 150px; object-fit: contain; margin-bottom: 8px; background: #e9f6ff; border-radius: 12px; padding: 10px; transition: translate 0.25s var(--ease); }
.downloads a:hover img { translate: 0 -4px; }
.downloads a:hover { text-decoration: underline; }

/* a till key in the game's green */
.button { display: inline-block; padding: 10px 26px 13px; font-size: 24px; color: var(--ink); text-decoration: none; background: var(--green); border: 4px solid var(--ink); border-radius: 12px; }      /* (ink on green reads at 6.7:1; white is for the game's own UPGRADE) */
.button:hover { background: var(--green-d); }
.button:active { translate: 0 3px; }

footer { padding: 72px 0 48px; text-align: center; font-size: 16px; }
footer p { margin: 0; }
footer a { color: var(--ink); }

@media (max-width: 760px) {
	.wrap { padding: 0 12px; }
	.top { padding: 16px 8px 12px; font-size: 20px; }
	.top nav { gap: 18px; }
	main { padding: 0 22px 44px; }
	main::before { margin: 0 -28px 28px; }
	.facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.facts dd { text-align: left; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .downloads img { transition: none; } }