@import url(./style.css);

:root {
    --quote-border-color: hsl(0, 0%, 67%);
    --hr-color: hsl(240, 2%, 88%);
    --separator: hsl(0, 0%, 94%);
    --chevron-color: hsl(0, 0%, 0%);
    --orange-text: hsl(21, 87%, 53%);
    --orange-background: hsla(21, 87%, 53%, 0.145);
    --gray-background: hsl(216, 4%, 53%);
    --gray-background-50: hsla(216, 4%, 53%, 0.251);
    --secondary-text: hsl(240, 4%, 38%);
}

hr {
    display: block;
    width: 100%;
    border: none;
    border-top: 1px solid var(--hr-color);
    overflow: visible;
    height: 1px;
}

figcaption {
    font-size: 0.8rem;
    font-weight: 400;
    text-align: center;
    opacity: 0.4;
}

.highlight {
    font-family: "MD IO";
    font-weight: 900;
    color: var(--orange-text);
}

.main-container {
    /* display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    height: 100dvh; */
    display: flex;
    max-width: 98dvw;

    position: relative;
    overflow-x: hidden;
}

.wrapper {
    margin: 0 auto;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    padding: 2em;

    & div {
        font-family: system-ui, -apple-system, SF Pro, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    & h1 {
        max-width: 90%;
        font-size: 3rem;
        font-family: 'MD IO';
        font-weight: 900;
        line-height: 0.99;
    }

    & h2,
    h3,
    h4,
    h5 {
        margin-top: 1.5rem;
        max-width: 80%;
    }

    & .inline-link {
        display: inline-flex;
        color: white;
        padding: 4px 10px;
        border-radius: 999px;
        background-color: var(--gray-background);
        font-size: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        transform: translateY(-4px);
    }

    .quote {
        position: relative;
        padding: 16px 0 16px 24px;
        font-weight: 500;
        font-style: italic;
        opacity: 0.6;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 16px;
            bottom: 16px;
            width: 0.1rem;
            background-color: var(--quote-border-color);
        }
    }
}

.leading-rail {
    max-height: 100%;
    width: 16%;
    overflow-y: auto;
    overscroll-behavior: contain;

    position: fixed;
    top: 64px;
    left: 0;
    z-index: 99;
}

.trailing-rail {
    padding: 1.5rem 1rem 0;

    max-height: 100%;
    width: 16%;
    overflow-y: auto;
    overscroll-behavior: contain;

    position: fixed;
    top: 64px;
    right: 0;
    z-index: 99;

    & p {
        margin: 0;
        padding: 0;
        font-size: 0.8rem;
    }

    & p:not(:has(b)) {
        margin-block-end: 0.8rem;
        color: var(--secondary-text);
    }

    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 999px;
    }
}

.wrapper:focus-visible,
.leading-rail:focus-visible,
.trailing-rail:focus-visible {
    outline: none;
}

.code {
    width: 100%;
    min-height: 50px;
    border-radius: 18px;
    background-color: ghostwhite;
    font-family: "MD IO";
    font-size: small;
    font-weight: 500;
    align-content: center;
    padding: 16px;
    color: #626265;
}

.row {
    font-family: "MD IO";
    font-size: small;
    font-weight: 500;
}

.code .row {
    margin: -0.15em;
    border-radius: 0;
    border: 0.1rem solid black;
}

.inline-code {
    font-family: "MD IO";
    font-size: 0.8rem;
    font-weight: 300;
    color: inherit;
    padding: 2px 4px;
    background-color: var(--gray-background-50);
    border-radius: 4px;
}

.center {
    text-align: center;
}

.list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    row-gap: 16px;
    column-width: 100%;
}

.element {
    position: relative;
    padding: 0.4em 3em 0.4em 0em;
    border-bottom: 0.1rem solid var(--separator);
    cursor: pointer;
    color: inherit;
    text-decoration: none;

    &::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 18px;
        height: 18px;

        background-color: var(--chevron-color);

        mask-image: url(../Resources/svg/chevron.right.svg);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;

        -webkit-mask-image: url(../Resources/svg/chevron.right.svg);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;

        opacity: 0.7;
    }

    &:hover {
        color: var(--orange-text);
        text-decoration: none;

        p {
            opacity: 1;
        }
    }

    &:hover::after {
        background-color: var(--orange-text);
        opacity: 1;
    }

    & h4 {
        margin-top: 0;
        margin-bottom: 0.1em;
        text-transform: capitalize;
    }

    & p {
        margin-top: 0.2rem;
        margin-block-end: 0;
        opacity: 0.6;
    }
}

.empty1 {
    margin-top: 1em;
}

.empty2_5 {
    margin-top: 2.5em;
}

.empty5 {
    margin-top: 5em;
}

.cover-image {
    border: 0;
    border-radius: 2rem;
}

.hashtag {
    margin-left: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    /* capsule */
    background-color: var(--orange-background);
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    line-height: 1;
    transform: translateY(-2px);
    color: var(--orange-text);
}

.hashtag::before {
    content: "#";
    font-size: inherit;
    line-height: inherit;
}

#comments {
    margin-top: 2rem;

    textarea {
        padding: .6rem;

        width: 100%;
        min-height: 6rem;

        background: transparent;

        border: 0.2rem solid gray;
        border-radius: 1em;

        font-family: 'SST';
    }

    button {
        margin: .4rem auto;
        appearance: none;
        background: var(--gray-background-50);

        position: relative;

        width: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --quote-border-color: #626265;
        --hr-color: #404041;
        --separator: #303030;
        --chevron-color: #ffffff;
        --orange-text: #cb6d3a;
        --orange-background: #cb6d3a44;
        --gray-background: #494c52;
        --gray-background-50: #494c52a6;
        --secondary-text: hsl(240, 7%, 70%);
    }
}

@media (width < 640px) {
    .main-container {
        max-width: 100dvw;
        height: auto;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .wrapper {
        order: 1;

        max-width: 100dvw;

        overscroll-behavior: auto;
    }

    .leading-rail {
        position: static;
        order: 2;

        width: 100%;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .trailing-rail {
        position: static;
        order: 3;

        width: 100%;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .wrapper h1 {
        max-width: 100%;
        line-height: 1;
        font-size: 2rem;
    }

    .cover-image {
        border-radius: 1.3rem;
    }
}

@media (width < 900px) {
    .main-container {
        max-width: 100dvw;
        height: auto;

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .wrapper {
        order: 1;

        max-width: 100dvw%;

        overscroll-behavior: auto;
    }

    .leading-rail {
        position: static;
        order: 2;

        width: 100%;
        overflow: visible;
        overscroll-behavior: auto;
    }

    .trailing-rail {
        order: 3;

        width: 100%;
        overflow: visible;
        overscroll-behavior: auto;
    }
}

.link-preview {
    display: block;
    text-decoration: none;
    color: inherit;

    border-radius: 14px;
    overflow: hidden;

    background: color-mix(in oklab, canvas 92%, black);
    transition: transform 150ms ease, box-shadow 150ms ease;

    &:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
    }

    &:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 3px;
    }

    &__content {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 16px;
        padding: 16px;
    }

    &__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    &__meta {
        display: grid;
        gap: 6px;
    }

    &__domain {
        font-size: 0.75rem;
        color: gray;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    &__title {
        font-size: 1rem;
        line-height: 1.3;
    }

    &__description {
        font-size: 0.9rem;
        color: color-mix(in oklab, canvas 60%, black);
    }
}