/*
Theme Name: FiveGuessr
Theme URI: https://fiveguessr.com/
Description: The FiveGuessr site theme. A dark block theme that matches the FiveGuessr game screen.
Author: FiveGuessr
Version: 1.3.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fiveguessr-theme
*/

/* Colours, fonts and spacing live in theme.json. This file holds the few
   pieces theme.json can't express, using the same tokens as the game screen. */

:root {
	--fg-radius: 14px;
}

body {
	-webkit-font-smoothing: antialiased;
}

a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Header */
.fg-site-header {
	border-bottom: 1px solid var(--wp--preset--color--surface-2);
}
.fg-site-header .wp-block-site-title a {
	text-decoration: none;
}

/* Cards, shaped like the game's clue cards. */
.fg-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--fg-radius);
}

.fg-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}

/* Game, leaderboard and account pages bring their own heading, so drop the gap above it. */
.fg-play-main .fg-app {
	margin-top: 0;
}

/* Keep the footer at the bottom on short pages. */
.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* The game's buttons and search box use the site font. */
.fg-app button,
.fg-app input {
	font-family: inherit;
}

/* Logo */
.fg-logo {
	display: inline-flex;
	line-height: 0;
}
.fg-logo img {
	height: 36px;
	width: auto;
}
footer .fg-logo img {
	height: 28px;
}
@media (max-width: 480px) {
	.fg-logo img {
		height: 30px;
	}
}