@layer reset, base;

/* Reset for the light DOM. Shadow roots get their own copy through
   `public/js/lib/shadow-reset.js`, since document styles do not cross the
   shadow boundary. */
@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :where(html, body) {
        margin: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    :where(h1, h2, h3, p, ul, figure, blockquote) {
        margin: 0;
    }

    :where(ul) {
        padding: 0;
        list-style: none;
    }

    :where(a) {
        color: inherit;
        text-decoration: none;
    }

    :where(:focus-visible) {
        outline: var(--focus-ring-width) solid var(--color-focus-ring);
        outline-offset: var(--focus-ring-offset);
    }
}

@layer base {
    /* Anchor links glide to their section instead of jumping to it; the system
       preference wins right below. */
    html {
        scroll-behavior: smooth;
    }

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

    body {
        background-color: var(--color-page);
        color: var(--color-body-text);
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        font-family: var(--font-family-base);
        -webkit-font-smoothing: antialiased;
    }

    :where(h1, h2, h3, h4) {
        color: var(--color-heading);
        font-weight: var(--font-weight-bold);
    }

    /* The skip link moves the viewport to the main landmark; the ring would
       outline the whole page. */
    #conteudo:focus-visible {
        outline: none;
    }

    /* Reserve the header height before the custom element upgrades, so the
       first paint does not shift once JavaScript runs. */
    site-header:not(:defined) {
        display: block;
        background-color: var(--color-surface);
        block-size: var(--header-block-size);
    }

    .skip-link {
        position: absolute;
        /* The extra unit hides the sub-pixel edge of the rounded corners. */
        transform: translateY(calc(-100% - var(--space-1)));
        transition: transform var(--duration-fast) var(--easing-emphasized);
        inset-block-start: 0;
        inset-inline-start: var(--space-4);
        border-end-start-radius: var(--radius-control);
        border-end-end-radius: var(--radius-control);
        background-color: var(--color-accent);
        padding: var(--space-2) var(--space-3);
        /* The accent is a light orange: dark text keeps the link readable. */
        color: var(--color-page);
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-label);
    }

    .skip-link:focus-visible {
        transform: translateY(0);
    }
}