/*
Theme Name: Blocks
Description: Minimal theme for the Blocks video wall. No page builder — the homepage is a custom template.
Version: 1.0.0
Requires PHP: 7.4
*/

:root {
	--bg: #1a1b1e;
	--surface: #232427;
	--text-primary: #f4f4f5;
	--text-secondary: #c1c2c5;
	--text-muted: #8a8b8f;
	--border: #2c2e33;
	--border-strong: #3a3b40;
}

:root[data-theme="light"] {
	--bg: #ffffff;
	--surface: #f1f1f1;
	--text-primary: #16161a;
	--text-secondary: #555555;
	--text-muted: #888888;
	--border: #eeeeee;
	--border-strong: #dddddd;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--text-primary);
}

/* Pins the page at its current scroll position while the modal is open — plain
   `overflow: hidden` doesn't reliably block touch-drag scroll of the page behind a
   fixed overlay on iOS Safari, but taking body out of flow entirely does. `top` is
   set inline (wall.js) to the negative of the scroll offset being pinned. */
body.blocks-modal-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

.blocks-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	background: var(--bg);
	z-index: 20;
	transition: transform 0.2s ease;
}

.blocks-nav.is-hidden {
	transform: translateY(-100%);
}

.blocks-logo {
	text-decoration: none;
	flex-shrink: 0;
}

.blocks-nav-search {
	flex: 1;
	display: flex;
	justify-content: center;
	position: relative;
	min-width: 0;
}

.blocks-logo-box {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	background: transparent;
	color: var(--text-primary);
	padding: 5px 0;
	font-family: "Jost", -apple-system, sans-serif;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.blocks-theme-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	flex-shrink: 0;
	margin-left: auto;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--text-primary);
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
}

.blocks-theme-toggle:hover {
	background: var(--border);
}

.blocks-theme-toggle-icon {
	font-size: 15px;
	line-height: 1;
}