/*
Theme Name: Pixel Rain
Description: A single-screen link page: dark pixelated background, soft falling white pixels, an editable picture and a row of links. Set everything under Appearance > Customize > Pixel Rain.
Version: 1.8.0
Requires at least: 6.3
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: pixel-rain
*/

:root {
	--bg: #060606;
	--ink: #ffffff;
	--muted: #b3b3b3;
	--step: 8px;
}

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

html {
	background: var(--bg);
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--ink);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: none;
}

/* Background layers: drawn by assets/rain.js, stretched without smoothing so every pixel stays a hard square. */
.px-layer {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	pointer-events: none;
}
.px-bg    { z-index: 0; }
.px-trees { z-index: 0; opacity: 0.6; } /* lower this number to make the trees fainter */
.px-rain  { z-index: 1; }

/* Page layout */
.stage {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	padding: 3rem 1.5rem;
	text-align: center;
}
body.admin-bar .stage { min-height: calc(100svh - 32px); }
@media (max-width: 782px) {
	body.admin-bar .stage { min-height: calc(100svh - 46px); }
}

/* Picture: no frame and no background by default, so transparent images stay transparent */
.avatar-frame {
	--s: var(--step);
	width: min(176px, 46vw);
	aspect-ratio: 1;
}
.avatar-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.avatar-empty {
	width: 100%;
	height: 100%;
	background: #141414;
}

/* Optional white frame with stepped (pixel) corners: Customize > Pixel Rain > Picture and name */
.avatar-frame.has-frame {
	padding: 4px;
	background: var(--ink);
	clip-path: polygon(
		0 var(--s), var(--s) var(--s), var(--s) 0,
		calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s),
		100% calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) 100%,
		var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s))
	);
}
.avatar-frame.has-frame img,
.avatar-frame.has-frame .avatar-empty {
	--s: calc(var(--step) - 4px);
	object-fit: cover;
	background: #141414;
	clip-path: polygon(
		0 var(--s), var(--s) var(--s), var(--s) 0,
		calc(100% - var(--s)) 0, calc(100% - var(--s)) var(--s), 100% var(--s),
		100% calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) 100%,
		var(--s) 100%, var(--s) calc(100% - var(--s)), 0 calc(100% - var(--s))
	);
}

/* Name and tagline */
.name {
	margin: 0;
	font-size: clamp(1.4rem, 5vw, 1.9rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
}
.tagline {
	margin: -1rem 0 0;
	color: var(--muted);
}

/* Row of links */
.links {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
}
.links a,
.hint a {
	display: inline-block;
	padding: 0.3rem 0.6rem;
	color: var(--ink);
	text-decoration: none;
}
.links a:hover,
.links a:focus-visible {
	font-weight: 700;
}
a:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.hint {
	max-width: 32ch;
	margin: 0;
	color: var(--muted);
	font-size: 0.9rem;
}

/* Regular pages and posts (index.php) */
.stage--text {
	justify-content: flex-start;
	align-items: stretch;
	text-align: left;
}
.entry-wrap {
	width: 100%;
	max-width: 42rem;
	margin: 0 auto;
}
.entry-wrap a { color: var(--ink); text-underline-offset: 3px; }
.entry-title { margin: 1.5rem 0 1rem; font-size: 1.6rem; line-height: 1.25; }
.entry-content > * { max-width: 100%; }
.entry-content img { max-width: 100%; height: auto; }
.back { margin: 0; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}