/*
This file should only contain styles directly related to global header tags, or things
that are intended to look like them in a global context. No component-specific styles
should be added here.

Only use header tags for items that should belong to the document outline. If you need
a heading for styling purposes, use a div with a class of .h1, .h2, etc.
*/
@layer headers {
    :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
        display: block;

        &.text-wrap-auto {
            text-wrap: auto;
        }

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

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

    :where(h1,.h1) {
        font-size: var(--local-font-size-h1, var(--local-heading-font-size, var(--font-size-h1)));
        font-weight: var(--local-font-weight-h1, var(--font-weight-h1));
        line-height: var(--local-line-height-h1, var(--local-heading-line-height, var(--line-height-h1)));
    }

    :where(h2, .h2) {
        font-size: var(--local-font-size-h2, var(--local-heading-font-size, var(--font-size-h2)));
        font-weight: var(--local-font-weight-h2, var(--font-weight-h2));
        line-height: var(--local-line-height-h2, var(--local-heading-line-height, var(--line-height-h2)));
    }

    :where(h3, .h3) {
        font-size: var(--local-font-size-h3, var(--local-heading-font-size, var(--font-size-h3)));
        font-weight: var(--local-font-weight-h3, var(--font-weight-h3));
        line-height: var(--local-line-height-h3, var(--local-heading-line-height, var(--line-height-h3)));
    }

    :where(h4, .h4) {
        font-size: var(--local-font-size-h4, var(--local-heading-font-size, var(--font-size-h4)));
        font-weight: var(--local-font-weight-h4, var(--font-weight-h4));
        line-height: var(--local-line-height-h4, var(--local-heading-line-height, var(--line-height-h4)));
    }

    :where(h5,.h5) {
        font-size: var(--local-font-size-h5, var(--local-heading-font-size, var(--font-size-h5)));
        font-weight: var(--local-font-weight-h5, var(--font-weight-h5));
        line-height: var(--local-line-height-h5, var(--local-heading-line-height, var(--line-height-h5)));
    }

    :where(h6,.h6) {
        font-size: var(--local-font-size-h6, var(--local-heading-font-size, var(--font-size-h6)));
        font-weight: var(--local-font-weight-h6, var(--font-weight-h6));
        line-height: var(--local-line-height-h6, var(--local-heading-line-height, var(--line-height-h6)));
    }
}