/**
 * WordPress base styles that sit on top of the prototype framework.
 * These cover templates and components that are not part of the service
 * prototype but are required by WordPress (loops, pagination, forms, etc.).
 */

.shell {
	width: var(--shell);
	margin-inline: auto;
}

.site-main {
	min-height: 60vh;
}

.section {
	padding-block: var(--section-block);
}

.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;
}

.screen-reader-text:focus {
	background: var(--paper);
	clip: auto !important;
	clip-path: none;
	color: var(--ink);
	display: block;
	font-size: 14px;
	height: auto;
	left: 12px;
	line-height: 1.4;
	padding: 12px 16px;
	top: 12px;
	width: auto;
	z-index: 100000;
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--yellow);
}

.admin-bar .site-header {
	top: 32px;
}

.page-header {
	margin-bottom: var(--space-2xl);
}

.page-title,
.entry__title {
	max-width: 22ch;
}

.page-description {
	max-width: 68ch;
	color: var(--muted);
}

.entry {
	max-width: 78ch;
	padding-block: var(--space-2xl);
	border-bottom: 1px solid var(--rule);
}

/* Full-width prototype heroes must opt out of the generic entry width. */
.entry--wide {
	max-width: none;
	border-bottom: 0;
}

.entry__header {
	margin-bottom: var(--space-lg);
}

.entry__title {
	margin-bottom: var(--space-sm);
}

.entry__title a {
	text-decoration: none;
}

.entry__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
	text-decoration-color: var(--yellow);
}

.entry__meta,
.entry__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	color: var(--muted);
	font: 500 10px/1.4 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry__content {
	max-width: 72ch;
}

.entry__content > * {
	max-width: 68ch;
}

.entry__content > .alignwide,
.entry__content > .alignfull,
.entry__content > figure,
.entry__content > table,
.entry__content > .wp-block-table,
.entry__content > .wp-block-image {
	max-width: 100%;
}

.entry__media {
	margin-block: var(--space-lg) var(--space-xl);
}

.entry__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: var(--space-lg);
}

.entry--summary .entry__excerpt {
	color: var(--muted);
}

.post-list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--rule);
}

.empty-state {
	color: var(--muted);
}

.button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--yellow);
	color: #000000;
	font: 600 13px/1 var(--font-sans);
	text-decoration: none;
	cursor: pointer;
}

.button:hover,
.button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background: var(--ink);
	color: var(--paper);
}

.pagination {
	margin-top: var(--space-2xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--rule);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

input,
textarea,
select,
button {
	font: inherit;
}

input,
textarea,
select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--rule);
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
	min-height: 0;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

img,
picture,
video,
canvas,
svg {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

blockquote {
	border-left: 2px solid var(--yellow);
	padding-left: var(--space-lg);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	border-bottom: 1px solid var(--rule);
	padding: 12px;
	text-align: left;
	vertical-align: top;
}

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	color: var(--muted);
	font: 500 10px/1.4 var(--font-mono);
	letter-spacing: 0.04em;
}

.alignleft {
	float: left;
	margin: 0 var(--space-lg) var(--space-lg) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-lg) var(--space-lg);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.footer-contact {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: var(--space-md);
	color: var(--muted);
	font: 500 10px/1.4 var(--font-mono);
	letter-spacing: 0.04em;
}

.footer-contact a {
	text-decoration: none;
}

.footer-contact a:hover {
	text-decoration: underline;
}

.brand-logo--text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	font: 700 15px/1 var(--font-sans);
	letter-spacing: -0.04em;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}