/*
Theme Name: League of Fans
Theme URI: https://www.leagueoffans.org/
Author: League of Fans
Description: Block theme for leagueoffans.org. A faithful rebuild of the site's long-standing three-column design (banner, uppercase navigation, serif body text, podcast and media sidebars) using templates, template parts, and patterns, with a responsive layout added for small screens.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: leagueoffans
Tags: blog, news, three-columns, left-sidebar, right-sidebar, full-site-editing, block-patterns
*/

/* Base ------------------------------------------------------------------ */

html {
	font-size: 87.5%; /* 14px base, as on the original design. */
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
}

.lof-page {
	background: var(--wp--preset--color--base);
	margin-block-start: 0;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.lof-main > .screen-reader-text + * {
	margin-block-start: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--wp--preset--color--link);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Header ---------------------------------------------------------------- */

.lof-header {
	padding-top: 25px;
}

.lof-banner {
	margin-bottom: 25px;
	margin-top: 0;
}

.lof-banner img {
	aspect-ratio: 980 / 250;
	display: block;
	height: auto;
	max-width: 100%;
	width: 980px;
}

/* The original banner sits 15px right of the content edge and runs 35px past it. */
@media (min-width: 1030px) {
	.lof-banner img {
		left: 15px;
		max-width: none;
		position: relative;
	}
}

.lof-nav-row {
	align-items: flex-start;
	border-bottom: 1px solid var(--wp--preset--color--border);
	gap: 10px;
}

.lof-nav-row .wp-block-navigation {
	flex: 1 1 auto;
	max-width: 740px;
}

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

.lof-nav-row .wp-block-navigation .wp-block-navigation-item__content {
	border: 1px solid transparent;
	padding: 10px 15px;
}

.lof-nav-row .wp-block-navigation .wp-block-navigation-item__content:hover,
.lof-nav-row .wp-block-navigation .wp-block-navigation-item__content:focus,
.lof-nav-row .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--box);
}

.lof-nav-row .wp-block-navigation__responsive-container-open {
	padding: 8px 4px;
}

.lof-nav-row .wp-block-search {
	flex: 0 0 210px;
	margin-top: 3px;
	width: 210px;
}

/* Search field (header, footer, 404) ------------------------------------ */

.wp-block-search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--box);
	border: 1px solid var(--wp--preset--color--border);
	border-left-color: var(--wp--preset--color--border-strong);
	border-top-color: var(--wp--preset--color--border-strong);
	padding: 0;
}

.wp-block-search .wp-block-search__input {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: #333;
	font: inherit;
	min-width: 0;
	line-height: 1.2;
	padding: 5px 4px 4px 7px;
}

.wp-block-search .wp-block-search__inside-wrapper:focus-within {
	outline: 2px solid var(--wp--preset--color--link);
	outline-offset: 2px;
}

.wp-block-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wp-block-search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--muted);
	line-height: 0;
	margin: 0;
	padding: 0 5px;
}

.wp-block-search .wp-block-search__button:hover {
	color: var(--wp--preset--color--contrast);
}

.wp-block-search .wp-block-search__button svg {
	height: 20px;
	width: 20px;
}

/* Three-column layout --------------------------------------------------- */

.lof-columns {
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: 28px;
	padding-top: 28px;
}

.lof-columns > * {
	margin-block-start: 0;
	min-width: 0;
}

.lof-main {
	padding: 0;
}

.lof-sidebar {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: 28px;
	padding-top: 28px;
}

@media (min-width: 782px) {
	.lof-columns {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.lof-main {
		grid-column: 1;
		grid-row: 1 / span 2;
		padding-right: 20px;
	}

	.lof-sidebar {
		border-top: 0;
		grid-column: 2;
		margin-top: 0;
		padding: 0 10px;
	}

	.lof-sidebar--right {
		margin-top: 14px;
	}
}

@media (min-width: 1000px) {
	.lof-columns {
		grid-template-columns: 240px minmax(0, 480px) 240px;
	}

	.lof-main {
		grid-column: 2;
		grid-row: 1;
		padding: 0 20px;
	}

	.lof-sidebar--left {
		grid-column: 1;
		grid-row: 1;
	}

	.lof-sidebar--right {
		grid-column: 3;
		grid-row: 1;
		margin-top: 0;
	}
}

.lof-columns--full {
	display: block;
}

.lof-columns--full .lof-main {
	padding: 0 20px;
}

/* Post lists ------------------------------------------------------------ */

.lof-post {
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-bottom: 22px;
	padding-bottom: 8px;
}

.wp-block-post-template > li + li {
	margin-block-start: 0;
}

.lof-post .wp-block-post-title {
	margin: 0;
	padding-top: 3px;
}

.lof-meta {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--tiny);
	gap: 0.45em;
	letter-spacing: 0.1em;
	line-height: 1.75;
	margin-bottom: 20px;
	margin-top: 2px;
}

.lof-meta > * {
	margin: 0;
}

.lof-meta .lof-meta__word {
	letter-spacing: 0;
}

.lof-meta .wp-block-post-author-name,
.lof-meta .wp-block-post-date {
	text-transform: uppercase;
}

.lof-meta a {
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: inherit;
}

.lof-meta a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-post-excerpt__excerpt > :first-child {
	margin-top: 0;
}

.wp-block-post-excerpt__excerpt p,
.wp-block-post-content p {
	margin-bottom: 1em;
	margin-top: 0;
}

.wp-block-post-excerpt__more-text {
	font-size: var(--wp--preset--font-size--normal);
	margin: 0 0 14px;
}

.lof-pagination {
	padding: 15px 0;
}

/* Older posts link stays on the left and newer on the right, even when only one of them is shown. */
.wp-block-query-pagination.lof-pagination > .wp-block-query-pagination-next:is(:first-child, :last-child) {
	margin-inline-end: auto;
	margin-inline-start: 0;
}

.wp-block-query-pagination.lof-pagination > .wp-block-query-pagination-previous:is(:first-child, :last-child) {
	margin-inline-end: 0;
	margin-inline-start: auto;
}

.lof-info-box,
.wp-block-query-title.lof-info-box {
	background: var(--wp--preset--color--box);
	border-left: 3px solid var(--wp--preset--color--border);
	border-right: 3px solid var(--wp--preset--color--border);
	color: #333;
	font-weight: 400;
	margin: 0 0 22px;
	padding: 5px 10px;
}

/* Single posts and pages ------------------------------------------------ */

.lof-post-nav {
	background: var(--wp--preset--color--box);
	border-left: 3px solid var(--wp--preset--color--border);
	border-right: 3px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	gap: 0;
	margin: 0 0 22px;
	padding: 5px 10px;
}

.lof-post-nav > * {
	margin: 0;
}

.lof-post-nav .post-navigation-link-next {
	text-align: right;
}

.lof-post-nav a {
	color: var(--wp--preset--color--muted);
}

.lof-post-nav a:hover {
	color: var(--wp--preset--color--contrast);
}

.lof-post-nav [class*="__arrow-previous"] {
	margin-right: 0.6em;
}

.lof-post-nav [class*="__arrow-next"] {
	margin-left: 0.6em;
}

.lof-single .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	margin: 0;
	padding-top: 3px;
}

.lof-single .wp-block-post-content {
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-bottom: 22px;
	padding-bottom: 8px;
}

.lof-page-content .wp-block-post-content {
	border-bottom: 0;
}

.wp-block-post-content::after {
	clear: both;
	content: "";
	display: table;
}

.wp-block-post-content img,
.wp-block-post-content iframe,
.wp-block-post-content video,
.wp-block-post-content embed,
.wp-block-post-content object {
	max-width: 100%;
}

.wp-block-post-content img {
	height: auto;
}

.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6 {
	margin: 1.2em 0 0.5em;
}

.wp-block-post-content ul,
.wp-block-post-content ol {
	margin: 0 0 1em;
	padding-left: 1.6em;
}

.wp-block-post-content li {
	margin-bottom: 0.3em;
}

/* Classic (pre-block) content: the bulk of the 1,600+ archive posts. */
blockquote {
	background: var(--wp--preset--color--box);
	border: 1px solid var(--wp--preset--color--border);
	border-left-color: var(--wp--preset--color--border-strong);
	border-top-color: var(--wp--preset--color--border-strong);
	font-style: italic;
	margin: 0 0 1em 14px;
	padding: 14px 14px 7px;
}

blockquote p {
	margin: 0 0 7px;
}

.wp-block-post-content blockquote {
	margin: 0 0 1em 14px;
}

.wp-block-post-content hr {
	margin: 7px 0 1em;
}

blockquote cite {
	font-size: var(--wp--preset--font-size--small);
}

.alignleft {
	float: left;
	margin: 4px 16px 10px 0;
}

.alignright {
	float: right;
	margin: 4px 0 10px 16px;
}

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

.wp-caption {
	background: var(--wp--preset--color--box);
	border: 1px solid var(--wp--preset--color--border);
	max-width: 100%;
	padding: 6px 6px 0;
	text-align: center;
}

.wp-caption img {
	display: block;
	margin: 0 auto;
}

.wp-caption-text,
.wp-block-post-content figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	margin: 6px 0;
}

.wp-block-post-content table {
	border-collapse: collapse;
	margin: 0 0 1em;
	max-width: 100%;
}

.wp-block-post-content th,
.wp-block-post-content td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 6px 8px;
	text-align: left;
	vertical-align: top;
}

hr {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	clear: both;
	height: 0;
	margin: 7px 0;
}

.lof-share {
	background: var(--wp--preset--color--box);
	border-left: 3px solid var(--wp--preset--color--border);
	border-right: 3px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	gap: 8px 14px;
	margin: 0 0 30px;
	padding: 8px 18px;
}

.lof-share > * {
	margin: 0;
}

.lof-share .wp-block-buttons {
	gap: 6px;
}

.lof-share .wp-block-button__link {
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--tiny);
	padding: 3px 9px;
}

.lof-share .wp-block-button__link:hover {
	background: var(--wp--preset--color--box-alt);
	text-decoration: none;
}

/* Sidebars -------------------------------------------------------------- */

.lof-sidebar {
	font-size: var(--wp--preset--font-size--normal);
	line-height: 1.6;
}

.lof-sidebar p {
	margin: 0 0 14px;
	padding: 0 2px;
}

.lof-sidebar .lof-widget-title {
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--subtle);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.2;
	margin: 31px 0 12px;
	padding: 6px 8px 3px 0;
	text-transform: uppercase;
}

.lof-sidebar .wp-block-separator,
.lof-sidebar hr {
	margin: 7px 2px 14px;
}

.lof-sidebar .wp-block-quote,
.lof-sidebar blockquote {
	margin: 26px 2px 14px 16px;
}

.lof-sidebar .wp-block-image,
.lof-sidebar .wp-block-embed,
.lof-sidebar .wp-block-video {
	margin: 0 2px 10px;
}

.lof-video {
	margin: 0 2px 10px;
}

.lof-video iframe,
.lof-sidebar .wp-block-embed iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	height: auto;
	width: 100%;
}

.lof-book img {
	border: 1px solid #000;
	display: block;
	height: auto;
	max-width: 100%;
}

.lof-follow .wp-block-button__link {
	background: #000;
	border-color: #000;
	border-radius: 999px;
	color: #fff;
	font-size: 0.857rem;
	font-weight: 600;
	padding: 3px 12px;
}

.lof-follow .wp-block-button__link:hover {
	background: #333;
	color: #fff;
	text-decoration: none;
}

/* 404 ------------------------------------------------------------------- */

.lof-404 {
	padding: 60px 0 80px;
	text-align: center;
}

.lof-404 .lof-404__code {
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.1;
	margin: 0 0 10px;
}

.lof-404 .lof-404__text {
	color: var(--wp--preset--color--subtle);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.1em;
	line-height: 2;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.lof-404 .wp-block-search {
	margin: 0 auto;
	max-width: 210px;
}

/* Footer ---------------------------------------------------------------- */

.lof-footer {
	background: #000;
	color: var(--wp--preset--color--footer-text);
	margin-top: 0;
	padding-bottom: 30px;
	padding-top: 23px;
}

.lof-footer a {
	color: #fff;
}

.lof-footer .wp-block-search {
	margin-left: calc((100% - min(100%, var(--wp--style--global--content-size))) / 2) !important;
	max-width: 210px;
}

.lof-footer .wp-block-search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--box);
}

.lof-footer .lof-footer__credit {
	font-size: var(--wp--preset--font-size--small);
	margin: 30px 0 0;
	text-align: center;
}

/* Small screens --------------------------------------------------------- */

@media (max-width: 781px) {
	html {
		font-size: 100%;
	}

	.lof-header {
		padding-top: 12px;
	}

	.lof-banner {
		margin-bottom: 12px;
	}

	.lof-nav-row {
		align-items: center;
		padding-bottom: 8px;
	}

	.lof-columns--full .lof-main {
		padding: 0;
	}

	.lof-single .wp-block-post-title {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* Below 600px WordPress swaps the menu for a menu button; search takes the rest of the row. */
@media (max-width: 599px) {
	.lof-nav-row {
		flex-wrap: nowrap;
	}

	.lof-nav-row .wp-block-search {
		flex: 1 1 auto;
		margin-top: 0;
		order: -1;
		width: auto;
	}

	.lof-nav-row .wp-block-navigation {
		flex: 0 0 auto;
	}

	.lof-nav-row .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		background: none;
		font-size: 1rem;
		padding: 10px 0;
	}
}

@media (min-width: 600px) and (max-width: 781px) {
	.lof-nav-row {
		flex-wrap: wrap;
	}

	.lof-nav-row .wp-block-navigation {
		flex: 1 1 100%;
		max-width: none;
		min-width: 0;
	}

	.lof-nav-row .wp-block-search {
		flex: 1 1 100%;
		margin: 0 0 8px;
		order: -1;
		width: auto;
	}
}

@media print {
	.lof-nav-row,
	.lof-sidebar,
	.lof-footer,
	.lof-share,
	.lof-post-nav {
		display: none !important;
	}

	.lof-columns {
		display: block;
	}
}