/*
 * shogi.fi — static stylesheet
 * Design tokens taken from the WordPress Twenty Twenty-Four theme the site
 * used before, so the static pages keep the same look.
 */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: fallback;
	src: url("../fonts/Inter-Variable.woff2") format("woff2");
}

@font-face {
	font-family: "Cardo";
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: url("../fonts/Cardo-400.woff2") format("woff2");
}

@font-face {
	font-family: "Cardo";
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url("../fonts/Cardo-700.woff2") format("woff2");
}

@font-face {
	font-family: "Cardo";
	font-style: italic;
	font-weight: 400;
	font-display: fallback;
	src: url("../fonts/Cardo-Italic.woff2") format("woff2");
}

:root {
	--base: #f9f9f9;
	--base-2: #ffffff;
	--contrast: #111111;
	--contrast-2: #636363;
	--contrast-3: #a4a4a4;
	--accent: #cfcabe;
	--accent-2: #c2a990;
	--accent-3: #d8613c;

	--font-body: "Inter", sans-serif;
	--font-heading: "Cardo", serif;

	--content-size: 620px;
	--wide-size: 1280px;

	--space-10: 1rem;
	--space-20: min(1.5rem, 2vw);
	--space-30: min(2.5rem, 3vw);
	--space-40: min(4rem, 5vw);
	--space-50: min(6.5rem, 8vw);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--base);
	color: var(--contrast);
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Layout ------------------------------------------------------------- */

.wide {
	max-width: var(--wide-size);
	margin-inline: auto;
	padding-inline: var(--space-30);
}

.content {
	max-width: var(--content-size);
	margin-inline: auto;
	padding-inline: var(--space-30);
}

/* Header ------------------------------------------------------------- */

.site-header {
	background-color: var(--base);
	padding-block: 20px;
}

.site-header .wide {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-20);
}

.site-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.2;
}

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

.site-title a:hover {
	text-decoration: underline;
}

/* Navigation --------------------------------------------------------- */

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	color: var(--contrast);
	font-size: 1.05rem;
	text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	text-decoration: underline;
}

.site-nav a[aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Submenu: open on hover on pointer devices, on focus for keyboards. */
.site-nav .has-submenu {
	position: relative;
}

.site-nav .submenu-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.site-nav .submenu-label::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.site-nav .submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: block;
	min-width: 12rem;
	padding: 0.5rem 0;
	background-color: var(--base-2);
	border: 1px solid var(--accent);
	visibility: hidden;
	opacity: 0;
	transition: opacity 120ms ease;
}

.site-nav .has-submenu:hover .submenu,
.site-nav .has-submenu:focus-within .submenu {
	visibility: visible;
	opacity: 1;
}

.site-nav .submenu li {
	display: block;
}

.site-nav .submenu a {
	display: block;
	padding: 0.35rem 1rem;
}

/* Main content ------------------------------------------------------- */

main {
	padding-block: var(--space-50);
}

.page-title {
	margin: 0 0 var(--space-30);
	font-family: var(--font-heading);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.2;
}

main h2 {
	margin: var(--space-40) 0 var(--space-10);
	font-family: var(--font-heading);
	font-size: 1.85rem;
	font-weight: 400;
	line-height: 1.2;
}

main h2:first-child {
	margin-top: 0;
}

p {
	margin: 0 0 var(--space-20);
}

a {
	color: var(--contrast);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--accent-3);
}

/* Figures ------------------------------------------------------------ */

figure {
	margin: 0 0 var(--space-30);
}

figure img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

figcaption {
	margin-top: 0.5rem;
	color: var(--contrast-2);
	font-size: 0.9rem;
}

.hero {
	margin-bottom: var(--space-40);
}

.align-right {
	float: right;
	width: 230px;
	max-width: 45%;
	margin: 0 0 var(--space-20) var(--space-20);
}

.clear {
	clear: both;
}

/* Piece descriptions on the rules page ------------------------------- */

.piece {
	display: flex;
	align-items: flex-start;
	gap: var(--space-20);
	margin-bottom: var(--space-30);
}

.piece-images {
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
	margin: 0;
}

.piece-images img {
	width: 50px;
	height: 50px;
}

.piece p:last-child {
	margin-bottom: 0;
}

/* Link list (Linkkejä) ----------------------------------------------- */

.link-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.link-list li {
	margin-bottom: var(--space-10);
}

/* Footer ------------------------------------------------------------- */

.site-footer {
	padding-block: var(--space-50);
	color: var(--contrast-2);
	font-size: 0.9rem;
}

.site-footer a {
	color: var(--contrast-2);
}

/* Small screens ------------------------------------------------------ */

@media (max-width: 700px) {
	.site-header .wide {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Stack the menu vertically so the submenu nests under its parent
	   instead of interleaving with the following top-level items. */
	.site-nav,
	.site-nav > ul {
		width: 100%;
	}

	.site-nav > ul {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.35rem;
	}

	.site-nav .submenu {
		position: static;
		min-width: 0;
		padding: 0 0 0 1rem;
		border: 0;
		background: none;
		visibility: visible;
		opacity: 1;
	}

	.site-nav .submenu a {
		padding: 0.35rem 0;
	}

	.piece {
		flex-direction: column;
	}

	.align-right {
		float: none;
		width: auto;
		max-width: 100%;
		margin-inline: 0;
	}
}