/*
Theme Name: LNS Blog Gridbox
Template: gridbox
Version: 1.0.0
Description: Conservative readability and accessibility improvements for LNS Blog.
Text Domain: lnsblog-gridbox
*/

:root {
	--lns-ink: #111133;
	--lns-link: #2d6498;
	--lns-muted: #687080;
	--lns-rule: #dce3eb;
	--lns-surface: #f5f8fb;
	--lns-focus: #f1b22b;
}

body,
button,
input,
select,
textarea {
	font-family: 'Inter', Tahoma, Arial, sans-serif;
}

.archive-title,
.page-title,
.entry-title,
.site-title {
	font-family: 'Inter', Tahoma, Arial, sans-serif !important;
}

.site-header .header-main #logo.site-branding a {
	display: inline-flex;
	align-items: center;
	width: 245px;
	height: 32px;
	background: url('../gridbox/images/logo.png') center left / contain no-repeat;
}

.site-header .header-main #logo.site-branding a:focus-visible,
.main-navigation-toggle:focus-visible,
.entry-title a:focus-visible,
.more-link:focus-visible,
.ez-toc-toggle:focus-visible {
	outline: 3px solid var(--lns-focus);
	outline-offset: 4px;
}

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

.post-wrapper .type-post .entry-title {
	line-height: 1.2;
	text-wrap: balance;
}

.post-wrapper .type-post .entry-meta,
.content-single .entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 0.35rem;
	color: var(--lns-muted);
	line-height: 1.45;
}

.post-wrapper .type-post .entry-meta {
	margin: 0.75rem 0 0.55rem;
	font-size: 0.875rem;
}

.content-single .entry-meta {
	margin-top: 0.85rem;
	font-size: 0.9375rem;
}

.post-wrapper .type-post .entry-meta span:after,
.content-single .entry-meta span:after {
	margin-left: 0.35rem;
}

.lns-post-lead {
	margin: 0.65rem 0 1rem;
	color: #384252;
	font-size: 1rem;
	line-height: 1.6;
}

.lns-reading-time {
	display: inline-block;
	color: var(--lns-muted);
	font-size: 0.875rem;
	line-height: 1.45;
	white-space: nowrap;
}

.lns-reading-time:before {
	content: '';
	display: inline-block;
	width: 0.25rem;
	height: 0.25rem;
	margin: 0 0.45rem 0.15rem 0.1rem;
	border-radius: 50%;
	background: currentColor;
}

.content-single .entry-header {
	margin-bottom: 2rem;
}

.content-single .entry-title {
	display: block;
	max-width: 24ch;
	font-size: clamp(2rem, 2.7vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.lns-single-lead {
	margin: 1.15rem 0 0;
	max-width: 67ch;
	color: #384252;
	font-size: clamp(1.1rem, 1.4vw, 1.25rem);
	line-height: 1.55;
}

.entry-content {
	max-width: 44rem;
	font-size: clamp(1.0625rem, 1vw + 0.75rem, 1.1875rem);
	line-height: 1.72;
}

.entry-content > * + * {
	margin-top: 1.35em;
}

.entry-content h2,
.entry-content h3 {
	color: var(--lns-ink);
	line-height: 1.25;
	text-wrap: balance;
}

.entry-content h2 {
	margin-top: 2.4em;
	font-size: clamp(1.55rem, 2vw, 2rem);
}

.entry-content h3 {
	margin-top: 1.9em;
	font-size: clamp(1.25rem, 1.5vw, 1.5rem);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.35em;
}

.entry-content li + li {
	margin-top: 0.55em;
}

.entry-content img {
	height: auto;
	border-radius: 3px;
}

.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.9em;
	-webkit-overflow-scrolling: touch;
}

.entry-content th,
.entry-content td {
	padding: 0.7em;
	border: 1px solid var(--lns-rule);
	vertical-align: top;
}

.entry-content th {
	background: var(--lns-surface);
	color: var(--lns-ink);
}

#ez-toc-container,
.ez-toc-container {
	margin: 1.75rem 0 2.25rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--lns-rule);
	border-radius: 4px;
	background: var(--lns-surface);
}

#ez-toc-container .ez-toc-title,
.ez-toc-container .ez-toc-title {
	color: var(--lns-ink);
	font-weight: 700;
}

#ez-toc-container a,
.ez-toc-container a {
	color: var(--lns-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

@media only screen and (max-width: 60em) {
	.site-branding {
		margin-left: 0;
	}

	.main-navigation-toggle {
		min-width: 48px;
		min-height: 48px;
		padding: 0.75rem;
	}

	.main-navigation-toggle:after {
		font-size: 28px;
	}

	.main-navigation-menu a {
		padding: 1rem 1.2rem;
	}
}

@media only screen and (max-width: 40em) {
	.container {
		padding-right: 1.5rem;
		padding-left: 1.5rem;
	}

	.content-single .entry-header {
		margin-bottom: 1.4rem;
	}

	.content-single .entry-title {
		max-width: none;
	}

	.entry-content {
		font-size: 1rem;
		text-align: justify !important;
		line-height: 1.68;
	}

	#ez-toc-container,
	.ez-toc-container {
		margin-top: 1.35rem;
		padding: 1rem;
	}
}