/* ---------------------------------------------------------------
   Page background: stays still while the post scrolls over it.
   A fixed layer rather than background-attachment, which phones ignore.
   --------------------------------------------------------------- */

body.pbd-has-bg {
	background: transparent;
}

body.pbd-has-bg::before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	background: var(--pbd-bg) center / cover no-repeat;
}

/* The white tablet goes. --pad is the tablet's own padding, so zero
   lets the content use the full width. */
body.pbd-has-bg .tablet {
	--pad: 0rem;

	background: transparent;
	color: #fff;
	border-radius: 0;
}

body.pbd-has-bg .tablet-body,
body.pbd-has-bg .entry-content {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

body.pbd-has-bg .tablet-body h2,
body.pbd-has-bg .tablet-body blockquote {
	color: #fff;
}

/* Things with their own pale background keep dark text. */
body.pbd-has-bg .tablet-body code,
body.pbd-has-bg .tablet-body pre,
body.pbd-has-bg .tablet-body figcaption,
body.pbd-has-bg .tablet-body .wp-caption-text {
	color: var(--ink);
	text-shadow: none;
}

body.pbd-has-bg .post-foot {
	border-top-color: rgba(255, 255, 255, .35);
}

body.pbd-has-bg .short-more {
	color: #fff;
}

body.pbd-has-bg .short-more:hover,
body.pbd-has-bg .short-more[aria-expanded="true"] {
	background: rgba(255, 255, 255, .2);
}

/* ---------------------------------------------------------------
   Author, title, date and category: white wherever there's an image
   behind them instead of the white tablet.
   --------------------------------------------------------------- */

body.pbd-has-head .tablet-head,
body.pbd-has-bg .tablet-head {
	--title-color: #fff;
	--title-ink: #fff;

	text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}

body.pbd-has-head .tablet-date,
body.pbd-has-bg .tablet-date,
body.pbd-has-head .tablet-cat a,
body.pbd-has-bg .tablet-cat a {
	color: #fff;
}

body.pbd-has-head .tablet-avatar,
body.pbd-has-bg .tablet-avatar {
	box-shadow: 0 0 0 2px #fff;
}

/* ---------------------------------------------------------------
   Header image: fills the top of the tablet edge to edge, taller than
   the plain header so a square picture isn't cropped to a sliver.
   --------------------------------------------------------------- */

body.pbd-has-head .tablet-head {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 24rem;
	margin: calc(var(--pad) * -0.7) calc(var(--pad) * -1) 1.5rem;
	padding: 2rem 1rem;
	background:
		linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .5)),
		var(--pbd-head) center / cover no-repeat;
}

body.pbd-has-bg.pbd-has-head .tablet-head {
	border-radius: var(--radius);
}