/* =========================================================
   ALUMINIUMGLASS.CO.IN
   PUBLIC MARKETPLACE — TYPOGRAPHY SYSTEM
   File:
   /home/jqkmqvml/public_html/assets/css/typography.css

   Purpose:
   - Public marketplace typography
   - SEO-friendly readable content
   - Responsive text hierarchy
   - Forms, cards, navigation and marketplace content
   - Accessibility-conscious typography

   IMPORTANT:
   - No marketplace/business/vendor/product data is defined here.
   - No fake/demo/sample content is generated here.
   - All dynamic content must come from the API/database.
   - Theme colors and design tokens are inherited from variables.css.
   ========================================================= */


/* =========================================================
   1. FONT STACK
   ========================================================= */

:root {
    --font-family-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-family-heading:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-family-mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.55;
    --line-height-relaxed: 1.7;
}


/* =========================================================
   2. DOCUMENT TYPOGRAPHY
   ========================================================= */

html {
    font-family: var(
        --font-family-sans,
        Inter,
        system-ui,
        sans-serif
    );

    font-size: 16px;
    line-height: var(--line-height-normal, 1.55);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(
        --font-family-sans,
        Inter,
        system-ui,
        sans-serif
    );

    font-size: 1rem;
    font-weight: var(--font-weight-normal, 400);

    line-height: var(--line-height-normal, 1.55);

    color: var(
        --color-text,
        #172033
    );

    background-color: var(
        --color-background,
        #ffffff
    );
}


/* =========================================================
   3. HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;

    font-family: var(
        --font-family-heading,
        var(--font-family-sans, Inter, sans-serif)
    );

    color: var(
        --color-heading,
        #111827
    );

    font-weight: var(
        --font-weight-bold,
        700
    );

    line-height: var(
        --line-height-tight,
        1.2
    );

    text-wrap: balance;
}

h1 {
    font-size: clamp(
        2rem,
        4vw,
        3.5rem
    );

    letter-spacing: -0.035em;
}

h2 {
    font-size: clamp(
        1.65rem,
        3vw,
        2.5rem
    );

    letter-spacing: -0.025em;
}

h3 {
    font-size: clamp(
        1.35rem,
        2vw,
        1.875rem
    );

    letter-spacing: -0.02em;
}

h4 {
    font-size: clamp(
        1.15rem,
        1.5vw,
        1.5rem
    );

    letter-spacing: -0.01em;
}

h5 {
    font-size: 1.125rem;
    line-height: 1.4;
}

h6 {
    font-size: 1rem;
    line-height: 1.45;
}


/* =========================================================
   4. PARAGRAPHS
   ========================================================= */

p {
    margin: 0;

    max-width: 75ch;

    font-size: 1rem;
    line-height: var(
        --line-height-relaxed,
        1.7
    );

    color: var(
        --color-text-secondary,
        #4b5563
    );
}

p + p {
    margin-top: 1rem;
}


/* =========================================================
   5. LEAD / INTRO TEXT
   ========================================================= */

.lead,
.lead-text,
.intro-text {
    font-size: clamp(
        1.05rem,
        1.5vw,
        1.25rem
    );

    line-height: 1.7;

    color: var(
        --color-text-secondary,
        #4b5563
    );

    max-width: 70ch;
}


/* =========================================================
   6. SMALL / MUTED TEXT
   ========================================================= */

small,
.text-small {
    font-size: 0.875rem;
    line-height: 1.5;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1.45;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.5;
}

.text-base {
    font-size: 1rem;
    line-height: 1.55;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.6;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.5;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 1.35;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 1.25;
}


/* =========================================================
   7. TEXT COLORS
   ========================================================= */

.text-primary {
    color: var(
        --color-primary,
        #0b63ce
    );
}

.text-secondary {
    color: var(
        --color-text-secondary,
        #4b5563
    );
}

.text-muted {
    color: var(
        --color-text-muted,
        #6b7280
    );
}

.text-heading {
    color: var(
        --color-heading,
        #111827
    );
}

.text-success {
    color: var(
        --color-success,
        #15803d
    );
}

.text-warning {
    color: var(
        --color-warning,
        #b45309
    );
}

.text-danger {
    color: var(
        --color-danger,
        #b91c1c
    );
}

.text-info {
    color: var(
        --color-info,
        #0369a1
    );
}


/* =========================================================
   8. FONT WEIGHTS
   ========================================================= */

.font-light {
    font-weight: var(
        --font-weight-light,
        300
    );
}

.font-normal {
    font-weight: var(
        --font-weight-normal,
        400
    );
}

.font-medium {
    font-weight: var(
        --font-weight-medium,
        500
    );
}

.font-semibold {
    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.font-bold {
    font-weight: var(
        --font-weight-bold,
        700
    );
}

.font-extrabold {
    font-weight: var(
        --font-weight-extrabold,
        800
    );
}


/* =========================================================
   9. LINKS
   ========================================================= */

a {
    color: var(
        --color-link,
        #0b63ce
    );

    text-decoration: none;

    text-underline-offset: 0.18em;

    transition:
        color 160ms ease,
        text-decoration-color 160ms ease;
}

a:hover {
    color: var(
        --color-link-hover,
        #084c9e
    );

    text-decoration: underline;
}

a:focus-visible {
    outline:
        3px solid
        var(--color-focus, #2563eb);

    outline-offset: 3px;

    border-radius: 0.2rem;
}


/* =========================================================
   10. NAVIGATION TYPOGRAPHY
   ========================================================= */

nav,
.navigation,
.topbar,
.header,
.footer {
    font-size: 0.9375rem;
}

nav a,
.navigation a {
    font-weight: var(
        --font-weight-medium,
        500
    );
}


/* =========================================================
   11. BUTTON TYPOGRAPHY
   ========================================================= */

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

button,
.button,
.btn {
    font-size: 0.9375rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );

    line-height: 1.35;

    letter-spacing: 0;
}


/* =========================================================
   12. FORM TYPOGRAPHY
   ========================================================= */

label {
    font-size: 0.9375rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );

    line-height: 1.4;

    color: var(
        --color-label,
        #1f2937
    );
}

input,
select,
textarea {
    font-size: 1rem;
    line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
    color: var(
        --color-placeholder,
        #9ca3af
    );

    opacity: 1;
}

.form-help,
.field-help,
.help-text {
    font-size: 0.8125rem;

    line-height: 1.5;

    color: var(
        --color-text-muted,
        #6b7280
    );
}

.form-error,
.field-error,
.error-message {
    font-size: 0.8125rem;

    line-height: 1.5;

    font-weight: var(
        --font-weight-medium,
        500
    );

    color: var(
        --color-danger,
        #b91c1c
    );
}


/* =========================================================
   13. SEARCH TYPOGRAPHY
   ========================================================= */

.search-box,
.search-form {
    font-size: 1rem;
}

.search-box input,
.search-form input {
    font-size: 1rem;

    font-weight: var(
        --font-weight-normal,
        400
    );
}

.search-box button,
.search-form button {
    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.search-autocomplete {
    font-size: 0.9375rem;
}

.search-autocomplete [role="option"] {
    line-height: 1.45;
}

.search-autocomplete .result-title {
    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.search-autocomplete .result-meta {
    font-size: 0.8125rem;

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   14. LOCATION TYPOGRAPHY
   ========================================================= */

.location-selector,
.location-autocomplete {
    font-size: 0.9375rem;
}

.location-selector .location-name,
.location-autocomplete .location-name {
    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.location-selector .location-meta,
.location-autocomplete .location-meta {
    font-size: 0.8125rem;

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   15. MARKETPLACE CARD TYPOGRAPHY
   ========================================================= */

.card,
.business-card,
.vendor-card,
.service-card,
.product-card,
.category-card,
.review-card,
.quote-card,
.offer-card,
.price-card {
    font-size: 0.9375rem;
}

.card-title,
.business-card-title,
.vendor-card-title,
.service-card-title,
.product-card-title,
.category-card-title,
.offer-card-title,
.price-card-title {
    font-size: 1.125rem;

    line-height: 1.35;

    font-weight: var(
        --font-weight-bold,
        700
    );

    color: var(
        --color-heading,
        #111827
    );
}

.card-title a,
.business-card-title a,
.vendor-card-title a,
.service-card-title a,
.product-card-title a,
.category-card-title a,
.offer-card-title a,
.price-card-title a {
    color: inherit;
}

.card-description,
.business-card-description,
.vendor-card-description,
.service-card-description,
.product-card-description {
    font-size: 0.9375rem;

    line-height: 1.6;

    color: var(
        --color-text-secondary,
        #4b5563
    );
}

.card-meta,
.business-card-meta,
.vendor-card-meta,
.service-card-meta,
.product-card-meta,
.category-card-meta {
    font-size: 0.8125rem;

    line-height: 1.45;

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   16. PRICING TYPOGRAPHY
   ========================================================= */

.price,
.product-price,
.service-price,
.offer-price {
    font-weight: var(
        --font-weight-bold,
        700
    );

    line-height: 1.2;
}

.price-large,
.product-price-large,
.offer-price-large {
    font-size: 1.5rem;
}

.price-small,
.product-price-small {
    font-size: 0.875rem;
}

.price-original,
.original-price {
    text-decoration: line-through;

    color: var(
        --color-text-muted,
        #6b7280
    );
}

.discount,
.discount-value {
    font-size: 0.8125rem;

    font-weight: var(
        --font-weight-bold,
        700
    );
}


/* =========================================================
   17. STATUS / BADGE TYPOGRAPHY
   ========================================================= */

.badge,
.status,
.tag,
.chip {
    font-size: 0.75rem;

    line-height: 1.25;

    font-weight: var(
        --font-weight-semibold,
        600
    );

    letter-spacing: 0.01em;
}

.verification-badge {
    font-size: 0.75rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.status-text {
    font-size: 0.8125rem;

    font-weight: var(
        --font-weight-medium,
        500
    );
}


/* =========================================================
   18. RATING TYPOGRAPHY
   ========================================================= */

.rating,
.rating-value {
    font-size: 0.875rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.rating-count,
.review-count {
    font-size: 0.8125rem;

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   19. BREADCRUMB TYPOGRAPHY
   ========================================================= */

.breadcrumb {
    font-size: 0.8125rem;

    line-height: 1.5;
}

.breadcrumb a {
    font-weight: var(
        --font-weight-medium,
        500
    );
}

.breadcrumb [aria-current="page"] {
    color: var(
        --color-text-muted,
        #6b7280
    );

    font-weight: var(
        --font-weight-medium,
        500
    );
}


/* =========================================================
   20. PAGINATION TYPOGRAPHY
   ========================================================= */

.pagination {
    font-size: 0.875rem;
}

.pagination button,
.pagination a {
    font-weight: var(
        --font-weight-semibold,
        600
    );
}


/* =========================================================
   21. FILTER / SORT TYPOGRAPHY
   ========================================================= */

.filter-panel,
.sort-panel {
    font-size: 0.875rem;
}

.filter-panel legend,
.sort-panel legend,
.filter-title,
.sort-title {
    font-size: 0.9375rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.filter-option,
.sort-option {
    font-size: 0.875rem;
}


/* =========================================================
   22. ENQUIRY / LEAD TYPOGRAPHY
   ========================================================= */

.enquiry-form,
.enquiry-modal,
.lead-status {
    font-size: 0.9375rem;
}

.enquiry-title,
.lead-title {
    font-size: 1.25rem;

    line-height: 1.35;

    font-weight: var(
        --font-weight-bold,
        700
    );
}

.enquiry-reference,
.lead-reference {
    font-family: var(
        --font-family-mono,
        monospace
    );

    font-size: 0.8125rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.enquiry-status,
.lead-status-label {
    font-size: 0.8125rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );
}


/* =========================================================
   23. QUOTE TYPOGRAPHY
   ========================================================= */

.quote-card,
.quote-detail,
.quote-results,
.quote-compare {
    font-size: 0.9375rem;
}

.quote-reference {
    font-family: var(
        --font-family-mono,
        monospace
    );

    font-size: 0.8125rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.quote-total {
    font-size: 1.375rem;

    font-weight: var(
        --font-weight-bold,
        700
    );
}

.quote-label {
    font-size: 0.8125rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   24. ORDER / PAYMENT TYPOGRAPHY
   ========================================================= */

.order-reference,
.payment-reference,
.transaction-reference {
    font-family: var(
        --font-family-mono,
        monospace
    );

    font-size: 0.8125rem;

    font-weight: var(
        --font-weight-semibold,
        600
    );

    overflow-wrap: anywhere;
}

.order-total,
.payment-total {
    font-size: 1.25rem;

    font-weight: var(
        --font-weight-bold,
        700
    );
}


/* =========================================================
   25. NOTIFICATION TYPOGRAPHY
   ========================================================= */

.notification-panel,
.notification-item {
    font-size: 0.875rem;
}

.notification-title {
    font-size: 0.9375rem;

    line-height: 1.4;

    font-weight: var(
        --font-weight-semibold,
        600
    );
}

.notification-message {
    font-size: 0.875rem;

    line-height: 1.5;

    color: var(
        --color-text-secondary,
        #4b5563
    );
}

.notification-time {
    font-size: 0.75rem;

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   26. CHAT TYPOGRAPHY
   ========================================================= */

.chat-widget,
.chat-message,
.conversation {
    font-size: 0.9375rem;
}

.chat-message-body {
    line-height: 1.55;

    overflow-wrap: anywhere;
}

.chat-message-meta {
    font-size: 0.75rem;

    color: var(
        --color-text-muted,
        #6b7280
    );
}

.chat-input,
.chat-composer textarea {
    font-size: 0.9375rem;
}


/* =========================================================
   27. MODAL TYPOGRAPHY
   ========================================================= */

.modal,
.dialog {
    font-size: 0.9375rem;
}

.modal-title,
.dialog-title {
    font-size: 1.25rem;

    line-height: 1.3;

    font-weight: var(
        --font-weight-bold,
        700
    );
}

.modal-description,
.dialog-description {
    font-size: 0.9375rem;

    line-height: 1.6;

    color: var(
        --color-text-secondary,
        #4b5563
    );
}


/* =========================================================
   28. EMPTY / ERROR / LOADING STATES
   ========================================================= */

.empty-state,
.error-state,
.loading-state {
    font-size: 0.9375rem;
}

.empty-state-title,
.error-state-title {
    font-size: 1.125rem;

    line-height: 1.35;

    font-weight: var(
        --font-weight-bold,
        700
    );
}

.empty-state-message,
.error-state-message {
    font-size: 0.9375rem;

    line-height: 1.6;

    color: var(
        --color-text-secondary,
        #4b5563
    );
}

.loading-message {
    font-size: 0.875rem;

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   29. FOOTER TYPOGRAPHY
   ========================================================= */

footer {
    font-size: 0.875rem;

    line-height: 1.6;
}

footer h2,
footer h3,
footer h4 {
    font-size: 0.9375rem;

    line-height: 1.4;

    font-weight: var(
        --font-weight-semibold,
        600
    );
}

footer a {
    color: inherit;
}

.footer-copyright {
    font-size: 0.8125rem;

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   30. LEGAL / HELP / CONTENT TYPOGRAPHY
   ========================================================= */

.legal-content,
.help-content,
.post-content,
.article-content {
    font-size: 1rem;

    line-height: 1.75;
}

.legal-content h2,
.help-content h2,
.post-content h2,
.article-content h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.legal-content h3,
.help-content h3,
.post-content h3,
.article-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.625rem;
}

.legal-content ul,
.legal-content ol,
.help-content ul,
.help-content ol,
.post-content ul,
.post-content ol,
.article-content ul,
.article-content ol {
    line-height: 1.7;
}


/* =========================================================
   31. CODE / TECHNICAL CONTENT
   ========================================================= */

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

code,
kbd {
    font-size: 0.875em;
}

pre {
    font-size: 0.875rem;

    line-height: 1.6;

    overflow-x: auto;

    white-space: pre;
}

pre code {
    font-size: inherit;
}


/* =========================================================
   32. DATA / TABLE TYPOGRAPHY
   ========================================================= */

table {
    font-size: 0.9375rem;
}

th {
    font-weight: var(
        --font-weight-semibold,
        600
    );

    text-align: left;
}

td {
    line-height: 1.5;
}


/* =========================================================
   33. MEDIA CAPTIONS
   ========================================================= */

figcaption,
.media-caption,
.image-caption {
    font-size: 0.8125rem;

    line-height: 1.5;

    color: var(
        --color-text-muted,
        #6b7280
    );
}


/* =========================================================
   34. ACCESSIBILITY
   ========================================================= */

:where(button, a, input, select, textarea):focus-visible {
    outline:
        3px solid
        var(--color-focus, #2563eb);

    outline-offset: 3px;
}

.text-readable {
    max-width: 70ch;
}

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

.no-wrap {
    white-space: nowrap;
}

.break-word {
    overflow-wrap: break-word;
    word-break: normal;
}

.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =========================================================
   35. SCREEN-READER ONLY TEXT
   ========================================================= */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;

    width: auto;
    height: auto;

    margin: 0;

    overflow: visible;

    clip: auto;
    clip-path: none;

    white-space: normal;
}


/* =========================================================
   36. LIVE REGION TYPOGRAPHY
   ========================================================= */

[aria-live],
[data-live-region] {
    line-height: 1.5;
}

.live-region-status {
    font-size: 0.875rem;

    color: var(
        --color-text-secondary,
        #4b5563
    );
}

.live-region-error {
    font-size: 0.875rem;

    font-weight: var(
        --font-weight-medium,
        500
    );

    color: var(
        --color-danger,
        #b91c1c
    );
}


/* =========================================================
   37. DYNAMIC DATA SAFETY
   ========================================================= */

/*
   These rules do not create any data.
   They only make variable-length API/database content
   readable and prevent layout breakage.
*/

[data-entity-name],
[data-business-name],
[data-vendor-name],
[data-service-name],
[data-product-name],
[data-category-name],
[data-location-name] {
    overflow-wrap: anywhere;
}

[data-description],
[data-content],
[data-message] {
    overflow-wrap: anywhere;
    word-break: normal;
}


/* =========================================================
   38. SEO CONTENT READABILITY
   ========================================================= */

.seo-content,
.seo-description,
.entity-description,
.location-description,
.category-description {
    line-height: 1.75;

    max-width: 75ch;
}

.seo-content p + p,
.entity-description p + p,
.location-description p + p,
.category-description p + p {
    margin-top: 1rem;
}


/* =========================================================
   39. MOBILE TYPOGRAPHY
   ========================================================= */

@media (max-width: 767px) {

    html {
        font-size: 15.5px;
    }

    body {
        font-size: 0.96875rem;
    }

    h1 {
        font-size: clamp(
            1.75rem,
            8vw,
            2.5rem
        );
    }

    h2 {
        font-size: clamp(
            1.5rem,
            6vw,
            2rem
        );
    }

    h3 {
        font-size: clamp(
            1.25rem,
            5vw,
            1.625rem
        );
    }

    h4 {
        font-size: 1.125rem;
    }

    p {
        line-height: 1.65;
    }

    .lead,
    .lead-text,
    .intro-text {
        font-size: 1rem;
        line-height: 1.65;
    }

    .card-title,
    .business-card-title,
    .vendor-card-title,
    .service-card-title,
    .product-card-title,
    .category-card-title {
        font-size: 1.0625rem;
    }

    .quote-total {
        font-size: 1.25rem;
    }
}


/* =========================================================
   40. TABLET TYPOGRAPHY
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    html {
        font-size: 16px;
    }

    h1 {
        font-size: clamp(
            2rem,
            5vw,
            3rem
        );
    }

    h2 {
        font-size: clamp(
            1.6rem,
            4vw,
            2.25rem
        );
    }
}


/* =========================================================
   41. LARGE SCREENS
   ========================================================= */

@media (min-width: 1440px) {

    html {
        font-size: 16px;
    }

    body {
        font-size: 1rem;
    }
}


/* =========================================================
   42. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   43. HIGH CONTRAST / FORCED COLORS
   ========================================================= */

@media (forced-colors: active) {

    a {
        text-decoration: underline;
    }

    button,
    input,
    select,
    textarea {
        forced-color-adjust: auto;
    }

    :focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 3px;
    }
}


/* =========================================================
   44. PRINT
   ========================================================= */

@media print {

    html,
    body {
        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 11pt;

        line-height: 1.5;

        color: #000000;

        background: #ffffff;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #000000;

        page-break-after: avoid;
    }

    p {
        color: #000000;

        max-width: none;
    }

    a {
        color: #000000;

        text-decoration: underline;
    }

    .sr-only {
        position: static;

        width: auto;
        height: auto;

        margin: 0;

        overflow: visible;

        clip: auto;
        clip-path: none;
    }
}