/*
Theme Name: Skov OK
Description: Clean, simple block theme for Skov OK, our demo site for an orienteering club.
Version: 0.1.0
Requires at least: 7.0
Requires PHP: 8.2
Text Domain: skov-ok
*/

/* Most styling lives in theme.json. This file holds what theme.json cannot express. */

/* Header, main and footer sit flush; sections own their spacing. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Footer stays at the bottom on short pages: main grows to fill the window. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* The orienteering control flag: white and orange, split on the diagonal. */
/* The club's logo, the same one it has on metsa.app. */
.skov-flag {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background: url("assets/logo.svg") center / contain no-repeat;
	vertical-align: middle;
	flex: none;
}

.skov-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Hero: forest green with faint contour lines, like a map. */
.skov-hero {
	background-color: var(--wp--preset--color--forest);
	background-image: url("assets/contours.svg");
	background-size: 900px auto;
	background-position: right -120px center;
	background-repeat: no-repeat;
}

.skov-hero :where(h1, h2, p) {
	color: var(--wp--preset--color--surface);
}

.skov-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	height: 100%;
}

.skov-card h3 a {
	text-decoration: none;
}

.skov-card h3 a::after {
	content: " →";
	color: var(--wp--preset--color--flag);
}

/* Outline button variant. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--forest);
	border: 2px solid currentColor;
}

.skov-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--surface);
}

/*
 * Where a metsa component goes, until the real embed replaces it.
 * The label says which component and which demo object it points at.
 */
.metsa-slot {
	border: 2px dashed var(--wp--preset--color--forest);
	border-radius: 10px;
	background: var(--wp--preset--color--moss);
	padding: var(--wp--preset--spacing--40);
	text-align: center;
}

.metsa-slot p {
	margin: 0;
}

.metsa-slot code {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--forest-dark);
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table thead {
	border: 0;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.6rem 0.5rem;
	text-align: left;
}

.wp-block-table th {
	color: var(--wp--preset--color--forest-dark);
}