/* Site shell and the small public layout API. */
.bl-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.bl-shell,
.bl-container,
.bl-layout-container {
	width: min(calc(100% - (2 * var(--bl-gutter))), var(--bl-container-full));
	margin-inline: auto;
}

.bl-container--reading {
	width: min(calc(100% - (2 * var(--bl-gutter))), var(--bl-container-reading));
}

.bl-container--default {
	width: min(calc(100% - (2 * var(--bl-gutter))), var(--bl-container-default));
}

.bl-container--wide {
	width: min(calc(100% - (2 * var(--bl-gutter))), var(--bl-container-wide));
}

.bl-container--full {
	width: min(calc(100% - (2 * var(--bl-gutter))), var(--bl-container-full));
}

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

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

.bl-stack {
	display: flex;
	flex-direction: column;
	gap: var(--bl-stack-gap, var(--bl-space-5));
}

.bl-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: var(--bl-cluster-align, center);
	justify-content: var(--bl-cluster-justify, flex-start);
	gap: var(--bl-cluster-gap, var(--bl-space-3));
}

.bl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bl-grid-min, 16rem)), 1fr));
	gap: var(--bl-grid-gap, var(--bl-space-5));
}

.bl-flow > * {
	margin-block: 0;
}

.bl-flow > * + * {
	margin-block-start: var(--bl-flow-space, var(--bl-space-4));
}

.bl-site-header,
.bl-site-footer {
	flex: none;
}

.bl-site-main {
	flex: 1 0 auto;
	padding-block: var(--bl-section-space-small);
}

.bl-site-main--full-width {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.bl-site-main:focus {
	outline: none;
}

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

.screen-reader-text:focus {
	z-index: 100000;
	top: var(--bl-space-3);
	left: var(--bl-space-3);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--bl-space-3) var(--bl-space-4);
	clip: auto;
	clip-path: none;
	border: 1px solid var(--bl-color-border-strong);
	border-radius: var(--bl-radius-md);
	background: var(--bl-color-surface-raised);
	box-shadow: var(--bl-shadow-md);
	color: var(--bl-color-text);
	font-size: var(--bl-font-size-sm);
	font-weight: var(--bl-font-weight-semibold);
}

@media (max-width: 40rem) {
	.bl-grid {
		--bl-grid-min: 100%;
	}

	.bl-site-main {
		padding-block: var(--bl-space-7);
	}
}

.bl-site-main.banaslap-first-block-flush {
	padding-block-start: 0;
}