h2 {
    margin-block-start: var(--spacing-block-md);
}

h3 {
    margin-block-start: var(--spacing-block-sm);
}

.h-entry {
    background-color: var(--colour-primary-bg-accent);
    border: 0.125rem solid var(--colour-primary-fg);
    border-radius: 1rem;
    margin-inline: -1rem;
    margin-block-start: var(--spacing-block-sm);
    transition-duration: 250ms;

    &:is(:hover, :focus, :focus-within, :focus-visible) {
        background-color: var(--colour-primary-fg-accent);
        color: var(--colour-primary-bg-accent);
        transition-duration: 100ms;
    }

    + .h-entry {
       margin-block-start: var(--spacing-block-xs);
    }

    .u-url {
        color: inherit;
        display: inline-block;
        height: 100%;
        padding: 1rem;
        text-decoration: none;
        width: 100%;
    }

    .p-name {
        margin-block-start: 0;

        + * {
            margin-block-start: var(--spacing-block-xs);
        }
    }

    p:has(.dt-published, .dt-updated) {
        font-size: var(--font-size-sm);
        font-style: italic;

        &:not(.p-name + *) {
            margin-block-start: 0;
        }
    }
}

.skip-to {
    display: inline-block;
    margin-block-start: var(--spacing-block-xs);

    :is(ul, li) {
        display: inline-block;
        list-style-type: disc;
    }

    ul {
        margin-block-start: var(--spacing-block-xs);
    }

    li:last-of-type {
        list-style: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .h-entry {
        transition-property: background-color, color;
    }
}