/* Utility Styles for Blazor SSR Application
   Reusable styles and overrides for accessibility and consistency. */

img, .img-fluid {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

figure {
    margin: 0 0 var(--spacing-sm);
}

figcaption {
    font-size: var(--font-size-sm);
    color: var(--bs-body-color);
    text-align: center;
    margin-top: var(--spacing-xs);
}

.logo {
    width: 100%;
    height: auto;
    max-width: 150px;
    max-height: 40px;
    margin: 0 auto;
}

form {
    margin-bottom: var(--spacing-sm);
}

label {
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--bs-body-color);
    margin-bottom: var(--spacing-xs);
    display: block;
}

input, select, textarea {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-base);
    line-height: 1.6;
    border: 1px solid var(--bs-secondary);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: var(--bs-transition);
}

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    }

    input[type="submit"], button[type="submit"] {
        background-color: var(--bs-primary);
        color: var(--bs-btn-color);
        border: none;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-base);
        border-radius: var(--bs-border-radius);
        cursor: pointer;
        transition: var(--bs-transition);
    }

        input[type="submit"]:hover, button[type="submit"]:hover {
            background-color: var(--bs-btn-hover-bg);
            border-color: var(--bs-btn-hover-border-color);
        }

    input:disabled, select:disabled, textarea:disabled {
        background-color: var(--bs-light);
        cursor: not-allowed;
    }

footer {
    text-align: center;
}

    footer .bg-primary a {
        color: var(--bs-white);
        text-decoration: var(--bs-link-decoration);
    }

        footer .bg-primary a:hover {
            color: var(--bs-link-hover-color);
        }

    footer .bg-white a {
        color: var(--bs-dark);
        text-decoration: var(--bs-link-decoration);
    }

        footer .bg-white a:hover {
            color: var(--bs-link-hover-color);
        }

a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.e-bigger, .e-bigger * {
    font-size: calc(var(--font-size-base) * 1.25);
    line-height: 1.5;
}

    .e-bigger h1 {
        font-size: calc(2.5rem * 1.25);
    }

    .e-bigger h2 {
        font-size: calc(2rem * 1.25);
    }

    .e-bigger h3 {
        font-size: calc(1.75rem * 1.25);
    }

    .e-bigger h4 {
        font-size: calc(1.5rem * 1.25);
    }

    .e-bigger h5 {
        font-size: calc(1.25rem * 1.25);
    }

    .e-bigger h6 {
        font-size: calc(1rem * 1.25);
    }

    .e-bigger .display-1 {
        font-size: calc(4.5rem * 1.25);
    }

    .e-bigger .display-2 {
        font-size: calc(3.75rem * 1.25);
    }

    .e-bigger .display-3 {
        font-size: calc(3rem * 1.25);
    }

    .e-bigger .display-4 {
        font-size: calc(2.25rem * 1.25);
    }

    .e-bigger .lead, .e-bigger .fs-5 ,.e-bigger .lead strong{
        font-size: calc(var(--font-size-lg) * 1.25);
    }

    .e-bigger small {
        font-size: calc(var(--font-size-sm) * 1.25);
    }
    .e-bigger p, e-bigger li{
        font-size: calc(var(--font-size-base) * 1.25);
    }

    .e-bigger .e-appbar,
    .e-bigger .e-sidebar,
    .e-bigger .e-breadcrumb,
    .e-bigger .e-btn,
    .e-bigger .e-icons,
    .e-bigger .sf-icons,
    .e-bigger .e-breadcrumb-item,
    .e-bigger .e-breadcrumb-text,
    .e-bigger .e-breadcrumb-item a,
    .e-bigger .e-btn-content,
    .e-bigger .e-icons::before {
        font-size: calc(var(--font-size-base) * 1.25);
    }

hr {
    border: 0;
    border-top: 1px solid var(--bs-secondary);
    margin: var(--spacing-sm) 0;
}

blockquote {
    border-left: 4px solid var(--bs-primary);
    padding-left: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
    font-style: italic;
    color: var(--bs-body-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-sm);
}

th, td {
    padding: var(--spacing-xs);
    border: 1px solid var(--bs-secondary);
    font-size: var(--font-size-base);
    text-align: left;
}

.card {
    border: none;
    border-radius: var(--bs-border-radius);
    margin-bottom: var(--spacing-sm);
}

.card-body {
    padding: var(--spacing-sm);
}

.blazor-error-boundary {
    background: #b32121;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 3.7rem;
    color: var(--bs-white);
}

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