@import url(variables.css);

/* All Styles are inherit from article.css */
/* HERE ARE JUST THE SPECIFIC STYLES TO LIANA'S VERSION OF ARTICLE PAGE */

.container-breadcrumbs {
    max-width: 1200px;
    margin: auto;
}
.breadcrumbs {
    background-color: var(--liana-black);
    padding: 12px 16px;
    border-radius: 6px;
    display: flex;
    margin-bottom: 30px;
    width: fit-content;
}
.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
}
.breadcrumb-item svg {
    height: 20px;
    width: auto;
    margin-top: 4px;
}
.breadcrumb-item .breadcrumb-link {
    font-size: 20px;
    color: var(--liana-grey);
}
.breadcrumb-item .breadcrumb-text {
    font-size: 20px;
    font-weight: var(--semibold);
    color: var(--white);
}
.breadcrumb-item:hover .breadcrumb-link {
    color: var(--liana-green);
    text-decoration: underline;
}
/*  */
.article-page.liana-resource {
    background-color: #202020;
}
.liana-resource .article {
    border-radius: 8px;
    background-color: var(--liana-black);
}
.article-page.liana-resource .article .article-header .article-description {
    color: #868686;
    text-transform: none;
}
.article-page.liana-resource .article .article-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-orient: vertical;
    padding: 5%;
    border-top: 1px dotted #000;
    margin-top: 50px;
    gap: 20px;
}

/* Text styles */

.date {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #868686;
}
.date span {
    font-weight: 500;
    color: #939393;
}
@media screen and (max-width: 768px) {
    .date {
        font-size: 14px;
    }
}
.article-content h3,
h4 {
    text-transform: none;
}
.article-content a {
    color: var(--liana-green);
}
@media (hover: hover) {
    .a-link:hover {
        color: var(--light-green);
        text-decoration: underline;
    }
}
.a-caption {
    border-left: 4px solid var(--liana-green);
}
blockquote {
    border-left: 4px solid var(--liana-green);
}
pre {
    background-color: #484848;
    color: #f0f0f0;
}

/* Chips */

.chip-liana {
    background-color: #282828;
    border-radius: 4px;
    padding: 6px 10px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--liana-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Buttons */

.btn-resources {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    background-color: var(--grey-darker);
    border-radius: 4px;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    -ms-flex-item-align: start;
    align-self: flex-start;
    white-space: nowrap;
}
.btn-resources svg {
    height: 20px;
}
.btn-resources svg path {
    fill: #00ff66;
}
.btn-resources:hover {
    background-color: var(--liana-green);
    color: #000;
}
.btn-resources:hover svg path {
    fill: #000;
}
.article-footer .btn-resources {
    width: 100%;
}

.video-article {
    width: 100%;
    height: auto;
}