html {
    scroll-behavior: smooth;
    scroll-padding-top: 4.875rem;
}

html,
body {
    min-height: 100%;
    font-family: var(--type-body-md-font-family, var(--font-body));
    font-size: var(--type-body-md-font-size, 1rem);
    font-weight: var(--type-body-md-font-weight, 400);
    line-height: var(--type-body-md-line-height, 1.5);
    letter-spacing: var(--type-body-md-letter-spacing, 0);
    color: var(--theme-page-text, var(--text-dark));
    background-color: var(--surface-1, #fff);
}

@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 4.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

a,
.btn-link {
    color: var(--brand-accent);
}

.btn:focus-visible,
.btn-link.nav-link:focus-visible,
.form-control:focus,
.form-check-input:focus {
    box-shadow: var(--focus-ring-shadow);
}

h1 {
    font-family: var(--type-headline-xl-font-family, var(--font-display));
    font-size: var(--type-headline-xl-font-size, 2.5rem);
    font-weight: var(--type-headline-xl-font-weight, 700);
    line-height: var(--type-headline-xl-line-height, 1.2);
    letter-spacing: var(--type-headline-xl-letter-spacing, -0.01em);
    text-transform: var(--type-headline-xl-text-transform, none);
}

h2 {
    font-family: var(--type-headline-lg-font-family, var(--font-display));
    font-size: var(--type-headline-lg-font-size, 2rem);
    font-weight: var(--type-headline-lg-font-weight, 700);
    line-height: var(--type-headline-lg-line-height, 1.2);
}

h3 {
    font-family: var(--type-headline-md-font-family, var(--font-display));
    font-size: var(--type-headline-md-font-size, 1.5rem);
    font-weight: var(--type-headline-md-font-weight, 700);
    line-height: var(--type-headline-md-line-height, 1.25);
}

h4,
h5,
h6 {
    font-family: var(--type-title-font-family, var(--font-display));
    font-weight: var(--type-title-font-weight, 700);
    line-height: var(--type-title-line-height, 1.25);
}

h1:focus {
    outline: none;
}

article.content:has(> .sales-page),
article.content:has(> .guide-page),
article.content:has(> .legal-page) {
    max-width: none;
    padding: 0;
}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid var(--border-success-color);
}

.invalid {
    outline: 1px solid var(--border-danger-color);
}

.validation-message {
    color: var(--btn-danger-base);
}

.blazor-error-boundary {
    padding: 1rem 1rem 1rem 1.25rem;
    color: var(--btn-danger-text);
    background: var(--btn-danger-base);
    border-radius: var(--border-radius-md);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: var(--border-default-color);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--form-placeholder-text, var(--bs-secondary-color));
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.error-page,
.not-found-page {
    width: min(100%, 48rem);
    min-height: 48svh;
    margin-inline: auto;
    padding-block: clamp(2rem, 8vw, 6rem);
}

.error-page > p,
.not-found-page > p {
    max-width: 42rem;
    color: var(--theme-page-muted-text);
    line-height: 1.7;
}

body.theme-builder-scope {
    --zusey-logo-on-surface: url("/images/brand/zusey/zusey-logo-lockup-on-light.png");
    --zusey-mark-on-surface: url("/images/brand/zusey/zusey-mark-on-light.png");
}

:is(body.theme-builder-scope.theme-mode-dark,
    body.theme-builder-scope.dark-theme,
    body.theme-builder-scope[data-theme-mode="dark"],
    body.theme-builder-scope[data-bs-theme="dark"],
    html[data-bs-theme="dark"] body.theme-builder-scope,
    .dark-theme body.theme-builder-scope) {
    --zusey-logo-on-surface: url("/images/brand/zusey/zusey-logo-lockup-on-dark.png");
    --zusey-mark-on-surface: url("/images/brand/zusey/zusey-mark-on-dark.png");
}