/* Native elements, readable content and accessibility. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bankera-bg);
	color: var(--bankera-text);
	font-size: var(--bankera-text-md);
	font-weight: var(--bankera-weight-regular);
	line-height: var(--bankera-leading-body);
	overflow-wrap: anywhere;
}
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6 {
	margin-block: 0 var(--bankera-space-3);
	color: var(--bankera-heading);
	line-height: var(--bankera-leading-heading);
	font-weight: var(--bankera-weight-bold);
}
h1 { font-size: var(--bankera-text-3xl); }
h2 { font-size: var(--bankera-text-2xl); }
h3 { font-size: var(--bankera-text-xl); }
h4, h5, h6 { font-size: var(--bankera-text-lg); }
p, ul, ol, dl, figure, blockquote { margin-block: 0 var(--bankera-space-4); }
ul, ol { padding-inline-start: var(--bankera-space-5); }
a { color: var(--bankera-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--bankera-primary-dark); }
img, video { max-inline-size: 100%; block-size: auto; }
iframe { max-inline-size: 100%; }
figure { margin-inline: 0; }
figcaption, .wp-caption-text { color: var(--bankera-text-muted); font-size: var(--bankera-text-sm); }
button, input, select, textarea { font: inherit; max-inline-size: 100%; }
input, select, textarea {
	background: var(--bankera-surface);
	color: var(--bankera-text);
	border: var(--bankera-border-width) solid var(--bankera-control-border);
	border-radius: var(--bankera-radius-sm);
	padding: var(--bankera-space-2) var(--bankera-space-3);
}
input:not([type="checkbox"], [type="radio"]), select, button { min-block-size: var(--bankera-target); }
textarea { inline-size: 100%; min-block-size: 8rem; }
input::placeholder, textarea::placeholder { color: var(--bankera-text-muted); opacity: 1; }
button, input[type="submit"], .bankera-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bankera-space-2);
	padding: var(--bankera-space-2) var(--bankera-space-4);
	background: var(--bankera-primary);
	color: var(--bankera-on-primary);
	border: var(--bankera-border-width) solid transparent;
	border-radius: var(--bankera-radius-sm);
	cursor: pointer;
	font-weight: var(--bankera-weight-bold);
	text-decoration: none;
}
button:hover, input[type="submit"]:hover, .bankera-button:hover { background: var(--bankera-primary-dark); color: var(--bankera-on-primary); }
:disabled { cursor: not-allowed; opacity: var(--bankera-disabled-opacity); }
:focus-visible {
	outline: var(--bankera-focus-width) solid var(--bankera-focus);
	outline-offset: var(--bankera-focus-offset);
}
table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { text-align: start; font-weight: var(--bankera-weight-bold); padding-block: var(--bankera-space-2); }
th, td { border-block-end: var(--bankera-border-width) solid var(--bankera-border); padding: var(--bankera-space-3); text-align: start; vertical-align: top; }
th { background: var(--bankera-surface-alt); }
pre { overflow: auto; max-inline-size: 100%; padding: var(--bankera-space-4); background: var(--bankera-surface-alt); }
blockquote { border-inline-start: var(--bankera-focus-width) solid var(--bankera-gold); padding-inline-start: var(--bankera-space-5); }
hr { border: 0; border-block-start: var(--bankera-border-width) solid var(--bankera-border); margin-block: var(--bankera-space-6); }
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: fixed;
	inset-block-start: var(--bankera-space-4);
	inset-inline-start: var(--bankera-space-4);
	inline-size: auto;
	block-size: auto;
	margin: 0;
	padding: var(--bankera-space-3) var(--bankera-space-4);
	overflow: visible;
	clip-path: none;
	white-space: normal;
	background: var(--bankera-surface);
	color: var(--bankera-text);
	z-index: var(--bankera-layer-focus);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

