/*
 * Levin Family Magazine
 *
 * The page is a magazine lying open on a wooden desk. The artwork is the old theme's 1093px-wide
 * magazine2.png (spine on the left, page edge on the right) and magazine3.png (curled bottom edge).
 * Instead of a fixed 1093px layout, both are used as CSS border-images: the left 227px (shadow, spine,
 * gutter) and right 90px (page edge) are the borders, and the white middle stretches to any width.
 * --f scales the spine and page edge down on narrower screens.
 */

:root {
	--f: 1;
	--lf-left: calc(227px * var(--f));
	--lf-right: calc(90px * var(--f));
	--lf-red: var(--wp--preset--color--magazine-red, #c00);
	--lf-ink: var(--wp--preset--color--ink, #444);
	--lf-byline: var(--wp--preset--font-family--byline, "Gill Sans", Verdana, sans-serif);
	--lf-sans: var(--wp--preset--font-family--sans, Arial, Helvetica, sans-serif);
}

/* ------------------------------------------------------------------ desk */

body {
	margin: 0;
	background-color: #020400;
	background-image: url(../images/shadowbg.png), url(../images/bg1.jpg);
	background-repeat: repeat-x, repeat;
	background-position: 0 0, 0 0;
	background-attachment: scroll, fixed;
}

.wp-site-blocks {
	max-width: 1093px;
	margin: 0 auto;
	padding: 0 0 40px;
}

/* Top-level template blocks sit flush: the page and its curled bottom edge are one object. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ------------------------------------------------------------ the page */

.lf-magazine {
	position: relative;
	border-style: solid;
	border-width: 0 var(--lf-right) 0 var(--lf-left);
	border-image-source: url(../images/magazine2.png);
	border-image-slice: 0 90 0 227 fill;
	border-image-width: 0 var(--lf-right) 0 var(--lf-left);
	border-image-repeat: stretch repeat;
	background: transparent;
}

.lf-magazine > * + * {
	margin-block-start: 0;
}

/* Curled bottom edge, with the copyright line on the paper. */
.lf-footer {
	margin: 0;
}

.lf-page-bottom {
	box-sizing: border-box;
	min-height: calc(79px * var(--f));
	margin: 0;
	padding: calc(4px * var(--f)) 0 0;
	border-style: solid;
	border-width: 0 var(--lf-right) 0 var(--lf-left);
	border-image-source: url(../images/magazine3.png);
	border-image-slice: 0 90 0 227 fill;
	border-image-width: 0 var(--lf-right) 0 var(--lf-left);
	border-image-repeat: stretch stretch;
	font-family: var(--lf-sans);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.lf-page-bottom p {
	margin: 0;
}

.lf-page-bottom a {
	color: #000;
	text-decoration: none;
}

.lf-page-bottom a:hover {
	color: var(--lf-red);
	text-decoration: underline;
}

/* ------------------------------------------------------------ masthead */

/* In the old theme the header photo starts on the spine (x=168) and stops at the page edge (x=1000). */
.lf-masthead {
	position: relative;
	margin: 0 calc(3px * var(--f)) 0 calc(-59px * var(--f));
}

/* The shadow the curled spine casts over the header photo and menu. */
.lf-masthead::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(125px * var(--f));
	height: 100%;
	max-height: 289px;
	background: url(../images/headershadow.png) no-repeat 0 0 / 100% 100%;
	pointer-events: none;
	z-index: 2;
}

.lf-headimg.wp-block-cover {
	min-height: 260px;
	padding: 35px 20px 20px 92px;
	margin: 0;
	align-items: flex-start;
}

.lf-headimg .wp-block-cover__inner-container {
	width: 100%;
	color: #fff;
}

.lf-headimg .lf-site-title,
.lf-headimg .lf-tagline {
	margin: 0;
	color: #fff;
	font-family: var(--lf-sans);
	font-weight: 700;
	line-height: 1.1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.lf-headimg .lf-site-title {
	font-size: 50px;
	letter-spacing: 0;
}

.lf-headimg .lf-site-title a {
	color: inherit;
	text-decoration: none;
}

.lf-headimg .lf-tagline {
	margin-top: 6px;
	font-size: 24px;
}

/* The black menu bar */
.lf-nav.wp-block-navigation {
	margin: 0;
	padding: 8px 12px;
	background: #000;
	color: #fff;
	font-family: var(--lf-sans);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	gap: 0;
}

.lf-nav .wp-block-navigation__container {
	gap: 0;
}

.lf-nav .wp-block-navigation-item__content {
	display: block;
	padding: 2px 10px;
	color: #fff;
	text-decoration: none;
}

.lf-nav .wp-block-navigation-item__content:hover,
.lf-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--lf-red);
	text-decoration: underline;
}

.lf-nav .wp-block-navigation__responsive-container-open,
.lf-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
}

.lf-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #000;
	color: #fff;
	padding: 24px;
	font-size: 16px;
}

/* ------------------------------------------------------ content + sidebar */

.lf-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 211px;
	gap: 25px;
	align-items: start;
	padding: 25px 24px 30px 8px;
}

.lf-columns--full {
	grid-template-columns: minmax(0, 1fr);
}

.lf-main > * + * {
	margin-block-start: 0;
}

/* Headlines */
.lf-main .wp-block-post-title {
	margin: 0 0 6px;
	font-size: 46px;
	line-height: 40px;
}

.lf-archive-title {
	margin: 0 0 30px;
	padding-bottom: 6px;
	border-bottom: 1px solid #cdd;
	color: var(--lf-red);
	font-size: 28px;
}

/* POSTED BY: AUTHOR - MONTH D, YYYY */
.lf-byline {
	gap: 0.45em;
	margin: 0 0 18px;
	font-family: var(--lf-byline);
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.lf-byline > * {
	margin: 0;
}

.lf-byline-label,
.lf-byline-author {
	color: var(--lf-red);
}

.lf-byline-sep,
.lf-byline-date {
	color: var(--lf-ink);
}

.lf-byline a {
	color: inherit;
	text-decoration: none;
}

/* Post text */
.lf-entry {
	line-height: 1.5;
}

.lf-entry > * + * {
	margin-block-start: 0;
}

.lf-entry p {
	margin: 0.5em 0 1em;
}

/* The red drop cap on the first paragraph of every post (same rule as the old theme; posts only, not pages). */
.lf-post .lf-entry > p:first-child::first-letter,
.single-post .lf-entry > p:first-child::first-letter {
	float: left;
	padding: 0.04em 0.12em 0 0;
	color: var(--lf-red);
	font-size: 3.571em;
	line-height: 0.76em;
}

.lf-entry img {
	max-width: 100%;
	height: auto;
}

.lf-entry .wp-caption {
	max-width: 100%;
	padding-top: 4px;
	border: 1px solid #ccc;
	background: #f3f3f3;
	text-align: center;
}

.lf-entry .wp-caption-text {
	margin: 0;
	padding: 0 4px 5px;
	font-size: 11px;
	line-height: 17px;
}

.lf-entry .alignleft {
	float: left;
	margin: 6px 20px 10px 0;
}

.lf-entry .alignright {
	float: right;
	margin: 6px 0 10px 20px;
}

.lf-entry .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.lf-entry blockquote {
	margin: 0 0 25px;
	padding-left: 24px;
	border-left: 3px solid #ddd;
	font-style: italic;
}

.lf-entry table {
	border-collapse: collapse;
	font-size: 0.9em;
}

.lf-entry table th,
.lf-entry table td {
	padding: 5px 10px;
	border: 1px solid #ccc;
}

.lf-entry table th {
	background: #f4f4f4;
	color: #666;
	font-weight: 700;
}

.lf-entry strong {
	color: #666;
}

/* "Edit  Posted in Blog | 2 Comments »" */
.lf-postmeta {
	gap: 0.35em;
	margin: 18px 0 0;
	color: var(--lf-red);
	font-size: 13px;
	line-height: 1.6;
}

.lf-postmeta > *,
.lf-postmeta p {
	margin: 0;
}

.lf-postmeta p:empty {
	display: none;
}

/* No comment count (none yet, or hidden from visitors on members-only posts): drop the "|" too. */
.lf-postmeta:not(:has(.wp-block-post-comments-link a)) .lf-sep {
	display: none;
}

.lf-postmeta .wp-block-post-comments-link a::after {
	content: " \00bb";
}

.lf-edit-link {
	margin-right: 0.5em;
}

.lf-post {
	padding-bottom: 40px;
}

.lf-post + .lf-post {
	margin-block-start: 0;
}

.lf-pagination {
	margin: 10px 0 20px;
	font-family: var(--lf-sans);
	font-size: 12px;
}

.lf-pagination a,
.lf-pagination .current {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid #333;
	background: #444;
	color: #fff;
	text-decoration: none;
}

.lf-pagination a:hover {
	background: #000;
}

.lf-pagination .current {
	background: #cd0000;
	text-decoration: underline;
}

.lf-post-nav {
	margin: 24px 0 0;
	font-size: 14px;
}

/* Comments */
.lf-comments {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #cdd;
	font-size: 14px;
}

.lf-comments .wp-block-comment-template > li {
	margin-bottom: 16px;
	padding: 12px;
	border: 1px solid #cdd;
	border-radius: 5px;
	list-style: none;
}

.lf-comments .wp-block-comment-template > li:nth-child(even) {
	background: #f0f0f0;
}

.lf-comments .wp-block-comment-author-name {
	font-weight: 700;
}

.lf-comments .wp-block-comment-date {
	font-size: 11px;
}

.lf-comments textarea,
.lf-comments input[type="text"],
.lf-comments input[type="email"],
.lf-comments input[type="url"] {
	width: 100%;
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid #cdd;
	border-radius: 5px;
	background: #f9ffff;
}

/* ----------------------------------------------------------------- sidebar */

.lf-sidebar-box {
	padding: 10px;
	border: 1px solid #000;
	background: #fff;
}

.lf-sidebar-box > * + * {
	margin-block-start: 0;
}

.lf-widget-title.wp-block-heading {
	margin: 16px 0 8px;
	padding-bottom: 2px;
	border-bottom: 5px solid #000;
	color: var(--lf-red);
	font-size: 20px;
	text-transform: uppercase;
}

.lf-sidebar-box ul,
.lf-sidebar-box .lf-loginout {
	margin: 0;
	padding: 0 0 0 40px;
	font-size: 12px;
	line-height: 25px;
}

.lf-sidebar-box li {
	list-style: none;
}

.lf-sidebar-box a {
	color: #000;
	text-decoration: underline;
}

.lf-sidebar-box a:hover {
	color: #666;
}

.lf-search .wp-block-search__inside-wrapper {
	padding: 2px 2px 2px 10px;
	border: 1px solid #999;
	border-radius: 14px;
	background: #fff;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.lf-search .wp-block-search__input {
	border: 0;
	padding: 4px 0;
	background: transparent;
	font-size: 13px;
}

.lf-search .wp-block-search__button {
	margin: 0;
	padding: 4px 8px;
	border: 0;
	border-radius: 12px;
	background: #6aa6d8;
	color: #fff;
}

/* ------------------------------------------------------------- plugins */

/* PMPro "members only" box */
.lf-entry .pmpro_content_message,
.lf-entry .pmpro {
	margin: 0.5em 0 1em;
}

/* WP User Frontend lists and forms: let them breathe inside the narrow column */
.lf-entry .items-table {
	width: 100%;
}

.lf-entry .wpuf-form-add {
	max-width: 100%;
}

/* ----------------------------------------------------------- page turn */

/*
 * Moving to another page on the site turns the page: the old page swings away around the spine and the
 * new one is underneath. Browsers without cross-document View Transitions just load the page normally,
 * and people who ask their system for reduced motion get no animation.
 */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.lf-magazine {
		view-transition-name: lf-page;
	}

	::view-transition-group(lf-page) {
		animation-duration: 0.55s;
	}

	::view-transition-old(lf-page) {
		z-index: 2;
		transform-origin: 18% 50%;
		animation: lf-turn-away 0.55s cubic-bezier(0.45, 0, 0.55, 1) both;
	}

	::view-transition-new(lf-page) {
		animation: none;
	}
}

@keyframes lf-turn-away {
	from {
		transform: perspective(2400px) rotateY(0deg);
		opacity: 1;
	}
	to {
		transform: perspective(2400px) rotateY(-100deg);
		opacity: 0.3;
	}
}

/* ------------------------------------------------------------ smaller screens */

@media (max-width: 1100px) {
	:root {
		--f: 0.8;
	}

	.wp-site-blocks {
		padding: 0 8px 32px;
	}
}

@media (max-width: 900px) {
	:root {
		--f: 0.55;
	}

	.lf-columns {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 16px 24px 8px;
	}

	/* Fixed backgrounds are ignored or janky on phones and tablets; let the desk scroll with the page. */
	body {
		background-attachment: scroll, scroll;
	}

	.lf-headimg.wp-block-cover {
		min-height: 200px;
		padding: 28px 16px 16px 64px;
	}

	.lf-headimg .lf-site-title {
		font-size: 40px;
	}

	.lf-headimg .lf-tagline {
		font-size: 20px;
	}
}

@media (max-width: 600px) {
	:root {
		--f: 0.22;
	}

	.wp-site-blocks {
		padding: 0 0 24px;
	}

	.lf-headimg.wp-block-cover {
		min-height: 150px;
		padding: 20px 12px 12px 24px;
	}

	.lf-headimg .lf-site-title {
		font-size: 32px;
	}

	.lf-headimg .lf-tagline {
		font-size: 16px;
	}

	.lf-columns {
		padding: 16px 10px 20px 6px;
	}

	.lf-main .wp-block-post-title {
		font-size: 32px;
		line-height: 1.05;
	}

	.lf-byline {
		letter-spacing: 1px;
	}

	/* A photo floated beside the text leaves a sliver of a column on a phone; put photos on their own line. */
	.lf-entry .alignleft,
	.lf-entry .alignright {
		float: none;
		display: block;
		margin: 0 auto 1em;
	}

	/* The curled edge is only a few pixels tall here, so the copyright line sits on the page just above it. */
	.lf-page-bottom {
		position: relative;
		min-height: calc(79px * var(--f));
	}

	.lf-page-bottom p {
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		margin-bottom: 4px;
	}
}