/* Article - Article page specific styling */

.article-end-mark {
    color: var(--uchu-green-5);
    font-size: 1.5em;
    line-height: 0;
    vertical-align: baseline;
}

article p:first-of-type {
    font-size: var(--step-1);
    font-weight: bold;
}

article p:first-of-type::first-line {
    text-transform: uppercase;
}

article aside {
    float: right;
    clear: right;
    width: 100%;
    background: #000;
    color: #fff;
    max-width: 22rem;
    margin-right: clamp(-20rem, calc(((var(--grid-max-width) - 100vw) / 2) + var(--grid-gutter)), 0px);
    background-position-x: calc( ( (var(--grid-max-width) - 100vw) / 2 ) + var(--grid-gutter) );
    margin-left: var(--grid-gutter);
}

article > aside {
    box-shadow: 0.3rem 0.3rem 0px 0px #444;
}

article > aside > ul {
    margin: var(--grid-gutter);
    padding: 0;
    list-style: none;
}

article > aside > ul > li:not(:last-child) {
    margin-bottom: 1rem;
}

article > aside > h1 {
    background: #0c0;
    color: #fff;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding: 0.5rem 1rem;
}

article > aside.downloads-box {
    background-color: antiquewhite;
    display: flex;
    flex-direction: column;
    color: #000;
}

& .file-info {
    padding: 1rem;
}

.file-info {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: baseline;
}

.icon {
    grid-row: 1 / span 2;
    margin-right: 8px;
}

.text-content {
    display: flex;
    flex-direction: column;
}

.file-details {
    margin-top: 4px;
}

article > aside.downloads-box a.button {
    align-self: center;
    margin-top: 10px;
    margin-bottom: 1rem;
}

.download-container {
    padding: .5rem .5rem;
    display: flex;
    align-items: flex-start;
    line-height: 1.5rem;
    font-family: sans-serif;
}

.download-container a {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: #fff;
}

.dicon {
    width: 2.5em;
    height: 2.5em;
    margin-right: 0.5em;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 10L12 15M12 15L7 10M12 15V3' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
}

.download-description {
    font-size: 60%;
}

.download-filesize {
    display: flex;
    align-items: center;
}

.download-filesize::before {
    content: "";
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' fill='none' width='20' height='20'/%3E%3Cg%3E%3Cstyle%3E.st0%7Bfill-rule:evenodd;clip-rule:evenodd;%7D%3C/style%3E%3Cpath d='M5.8 14H5v1h.8c.3 0 .5-.2.5-.5s-.2-.5-.5-.5zM11 2H3v16h13V7l-5-5zM7.2 14.6c0 .8-.6 1.4-1.4 1.4H5v1H4v-4h1.8c.8 0 1.4.6 1.4 1.4v.2zm4.1.5c0 1-.8 1.9-1.9 1.9H8v-4h1.4c1 0 1.9.8 1.9 1.9v.2zM15 14h-2v1h1.5v1H13v1h-1v-4h3v1zm0-2H4V3h7v4h4v5zm-5.6 2H9v2h.4c.6 0 1-.4 1-1s-.5-1-1-1z'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    display: inline-block;
}

.dinfo {
    display: flex;
    flex-direction: column;
}

.file-info p {
    margin: 0;
}

.filename {
    line-height: 1;
    font-size: var(--step-0) !important;
    font-family: monospace;
    padding-bottom: .5rem;
}

.file-info {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    font-size: var(--step--1);
    line-height: 1.25;
}

.file-icon {
    display: flex;
    align-items: center;
    flex: none;
    block-size: 1lh;

    > svg {
        inline-size: 1.5em;
        flex: none;
    }
}

.text-content > p {
    font-size: inherit;
}

article > ul:not([class]) {
    list-style-type: none;
}

article > ul:not([class]) > li {
    position: relative;
    padding-left: 1.5em;
    contain: content;
}

article > ul:not([class]) > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: .7rem;
    height: .7rem;
    border-radius: 30%;
    background-color: #0c0;
    transform: translateY(-50%);
    box-shadow: 1px 2px 0px 0px #000;
}

article > ul:not(.categories) > li:not(:first-child) {
    margin-top: 1rem;
}

li > ul > li {
    list-style-type: square;
}

@media screen and (max-width: calc(280px + 22rem) ) {
    article aside {
        float: none;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;

        & ul {
            padding-bottom: var(--grid-gutter);
        }
    }
}

section.talk-subjects {
    display: none;
    background-color: var(--color-primary);
}