/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

.content {
    display: block;
    overflow: clip;
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    line-height: var(--text-line);
    z-index: var(--z-index-surface);
    font-variant-numeric: oldstyle-nums;
}

@media (min-width: 500px) {
    .content {
        /* This makes sure the content area is collapsed, when the navigation is opened */
        align-self: end;
    }

    @media (min-height: 700px) {
        .content {
            /* This makes sure the content area stretches the whole height */
            align-self: stretch;
        }
    }
}

.toggle-switch:checked ~ .content {
    overflow: hidden;
    pointer-events: none;
}

/* Header */

.content article header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 6.8rem;
    margin-right: var(--dynamic-spacing-inline-end);
    margin-bottom: 3.4rem;
    margin-left: var(--dynamic-spacing-inline-start);
}

.content article header h2 {
    flex-basis: 100%;
    margin: 0;
}

.content article header a {
    text-decoration: none;
}

.content article header a:hover {
    color: var(--color-jeweled-peach);
}

.content article header time {
    margin-right: 2rem;
    font-size: var(--text-size-small);
    font-weight: var(--text-weight-bold);
}

.content article header .subline {
    font-size: var(--text-size-small);
    line-height: var(--text-line-small);
    list-style: none;
    z-index: var(--z-index-background);
}

.content article header .subline a:hover {
    color: var(--color-text);
}

/* Articles */

.content > article {
    /**
     * @Johanna: Why did we put this here in the first place?
     * Currently, I can only find places where this adds extra margin.
     */

    /* margin-top: var(--spacing-base-extra-large); */
}

/* Body */

/* @todo: Das hier sind ganz schwierige Styles, weil sie sich auf alles in .content vererben.
Habe deshalb schon .content .columns vor alle Listen gesetzt. Das müssen wir irgendwie
besser einschränken, dass das auch nur auf Fließtext angewendet wird. */

.content strong {
    font-weight: var(--text-weight-semibold);
}

.content p + p {
    text-indent: 1.7rem;
}

.content p + p * {
    text-indent: 0;
}

.content p.with-spacing,
.content p.is-short {
    margin-top: 1.7rem;
    text-indent: 0;
}

.content p.with-spacing:first-child,
.content p.is-short:first-child {
    margin-top: 0;
}

.content .preface {
    font-size: var(--text-size-lead);
    font-weight: var(--text-weight-thin);
    line-height: var(--text-line-lead);
}

.content p cite,
.content blockquote cite {
    font-size: var(--text-size-7);
    font-weight: 500;
    font-variant: small-caps;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

/**
 * @Johanna: What's the reason this is double-nested (.content with .columns or
 * .columns within .content)? Is there a specific reason you scoped this for columns?
 *
 * We need these styles for the error page as well but there are no columns there.
 *
 * Okay, I removed the .columns for now.
 */

.content ul,
.content ol,
.content blockquote {
    margin-top: 1.7rem;
    margin-bottom: 1.7rem;
}
.content ul:first-child,
.content ol:first-child,
.content blockquote:first-child {
    margin-top: 0;
}

.content ol {
    padding-left: 3.2rem;
}

.content ul {
    padding-left: 0.7rem;
}

.content ul li {
    position: relative;
    padding-left: 1rem;
    list-style-type: '\2022';
}

.content blockquote {
    font-style: italic;
}

.content hr {
    display: flex;
    align-content: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    margin: 2.8rem 0;
    border: none;
    border-top: 0.1rem solid var(--color-subtle);
}

.content hr::after {
    content: '★';
    position: absolute;
    top: -1.9rem;
    padding: 0 0.5rem;
    color: var(--color-text);
    background: var(--color-background);
}

.content svg {
    margin-top: 5.75rem;
    margin-bottom: 5rem;
}

.content svg:first-child {
    margin-top: 0;
}

.content svg text {
    fill: var(--color-text);
}

/* No results */

.no-results {
    margin-bottom: 5.4rem;
    padding-right: var(--dynamic-spacing-inline-end);
    padding-left: var(--dynamic-spacing-inline-start);
    color: var(--color-jeweled-peach);
}

/* Read more */

.read-more {
    margin-top: 2.1rem;
    font-weight: 600;
    text-indent: 0 !important;
}

/* PLANT */

.company {
    font-weight: inherit;
    font-style: inherit;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Alignment for project texts that start with headlines */

[data-type='project'] .has-baseline,
[data-type='subproject'] .has-baseline {
    margin-top: 3.85rem;
}

/* News */

/* @todo: Das hier muss noch sortiert werden. Alles nur runtergeschrieben. */

[data-type='news'] .primary > figure:first-child {
    margin-top: 2.35rem;
}

[data-type='news'] #latest > article > header {
    margin-top: 14.4rem;
}

[data-type='news'] #latest > article:first-child > header {
    margin-top: 5.3rem;
}

[data-type='news'] #latest {
    margin-bottom: 7.45rem;
    scroll-margin-top: 8.25rem;
}

/* #news .title {
    margin-bottom: 18.5rem;
} */

#news #archive > .title {
    margin-bottom: 4.25rem;
}

/* @media (min-width: 600px) {
    #news .title {
        margin-bottom: 15rem;
    }
} */

/* all single news pages, not the overview: */
[data-type^='news-'] .columns:not(:last-child) {
    margin-bottom: 0;
}

/* all single news pages, not the overview: */
[data-type^='news-'] .columns:first-child {
    margin-bottom: 0;
}

.context-news .card.cover h2 {
    font-size: var(--text-size-3);
    line-height: var(--text-line-3);
}

.context-news .primary .card.cover:last-child {
    margin-bottom: 0;
}

.context-news .cover + .cover {
    margin-top: 5.75rem;
}

#news .card.news .cover {
    min-height: 0;
}

.context-news .secondary {
    position: relative;
    margin-top: 5.75rem;
}

@media (min-width: 1000px) {
    [data-type^='news-'].context-news .secondary {
        margin-top: 7.8rem;
    }
}

/* fix whitespace above h2 if there's no preface after cover */
[data-type^='news-'] .cover-minimal + .columns .primary h2:first-child,
[data-type^='news-'] .cover + .columns .primary h2:first-child {
    margin-top: 0;
}

/* fix whitespace above team if there's no preface after cover */
[data-type^='news-'] .cover-minimal + .columns .secondary,
[data-type^='news-'] .cover + .columns .secondary {
    margin-top: 1rem;
}