/**
* Styling class for theme. Usually this would be part of the project theme's style.css.
*/

/* ---------------------------------------------------------------------------------------------------------------------
-- BLOCKS --- ----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

/* OES Card */
.oes-demo-card-container {
    gap: 1rem;
}

.oes-card-wrapper,
.oes-card {
    height: 100%;
}

.oes-card-img img {
    height: 215px;
    object-fit: cover;
    object-position: 0 0;
}

.oes-card-header {
    color: var(--oes-primary);
}

@media (max-width: 781px) {

    .oes-demo-card-container {
        margin-bottom: 0 !important;
    }

    .oes-card-wrapper {
        padding-bottom: 2rem;
    }

    .oes-card {
        flex-direction: row !important;
    }

    a.oes-card-img {
        border-bottom: none !important;
        border-right: 1px solid grey;
        width: 30% !important;
        min-width: 30% !important;
    }
}




/* ---------------------------------------------------------------------------------------------------------------------
-- FRONTPAGE  ----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

.oes-background-primary-color {
    background-color: var(--oes-primary);
    color: var(--oes-primary-contrast);
}

.oes-background-white {
    background-color: #fff;
    padding: .5rem 0 2rem;
    margin-top: 1rem;
}

.oes-background-primary-color a {
    color: white;
    text-decoration: underline;
    white-space: nowrap;
}

.oes-background-primary-color a:hover {
    color: var(--oes-dark);
}


/* ---------------------------------------------------------------------------------------------------------------------
-- POST  ---------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

.oes-page-title a {
    color: var(--oes-primary-contrast);
}

.oes-post-indirect-header {
    padding-bottom: 1rem;
    color: var(--oes-darker);
}

/* ---------------------------------------------------------------------------------------------------------------------
-- ARCHIVE  ------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

ul.oes-active-filter li a {
    background-color: var(--oes-contrast) !important;
    color: var(--oes-primary-contrast) !important;
}

ul.oes-active-filter-container-list li, ul.oes-active-filter li {
    display: inline-block;
    padding-bottom: .5rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
-- ARTICLE  ------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

/* Featured Post Card (Frontpage) */
.oes-featured-article-card {
    width: 100%;
    display: flex;
    margin-top: 1.5rem;
    border: 1px solid rgba(0, 0, 0, .125);
    font-size: .9rem;
}

.oes-featured-article-card .btn {
    font-size: .9rem;
}

.oes-featured-article-card img {
    width: 30%;
    object-fit: cover;
    border-right: 1px solid var(--oes-dark);
}

.oes-featured-article-card-body {
    padding: 1.5rem;
}

.oes-featured-article-card-body .oes-content-table-header {
    padding-top: 0;
    margin-top: 0;
}

.oes-featured-article-card-body p {
    padding: 1rem 0;
}

/* Single */
.oes-subheader-title-container.oes-show-on-shrink .oes-page-title-text .oes-article-author-by {
    text-transform: capitalize;
}

.oes-subheader-title-container.oes-show-on-shrink .oes-page-title-text a {
    color: var(--oes-primary-contrast);
}

.oes-subheader-title-container.oes-show-on-shrink a:hover {
    color: var(--oes-background)
}

.oes-demo-cover-info {
    border-bottom: 1px solid var(--oes-background);
    padding-bottom: 1rem;
}

.oes-demo-article-content .oes-content-table-header {
    color: var(--oes-primary);
}

.oes-article-sub-line {
    padding-bottom: 1rem;
    color: var(--oes-darker);
}

.oes-article-sub-line ul.oes-field-value-list,
.oes-article-sub-line ul.oes-horizontal-list {
    list-style-type: none;
    display: inline;
    padding-inline-start: 0;
}

.oes-article-sub-line ul.oes-field-value-list li {
    display: inline;
    padding: 0;
    margin: 0
}

.oes-article-sub-line ul.oes-horizontal-list li:after {
    content: '|';
    padding: 0 .25rem;
}

.oes-article-sub-line ul.oes-field-value-list li:last-child:after,
.oes-article-sub-line ul.oes-horizontal-list li:last-child:after {
    content: none;
}

ul#oes-article-versions-ul {
    position: absolute;
    top: 1.5rem;
    left: 0;
    padding-inline-start: 0;
    border: 1px solid var(--oes-contrast);
    background-color: white;
    margin: 0 -8px -5px;
    padding: 5px 8px;
}

.oes-reading-time-wrapper {
    padding-bottom: 2rem;
}

table.oes-metadata-table th {
    white-space: nowrap;
}

/* further links */
.oes-external-link {
    border: 1px solid var(--oes-primary);
    padding: 10px;
    margin: 40px 0 50px;
}

/* Single: Sidebar */
.oes-sidebar {
    padding-left: 1rem;
}

.oes-sidebar .oes-sidebar-list-wrapper {
    position: sticky;
    top: 150px;
}

.oes-demo-expand-info-amount {
    padding: 5px 10px;
    color: var(--oes-text-black);
    font-size: .8rem;
    background-color: var(--oes-background);
    border-radius: 25px;
    margin-left: .5rem;
}

a.oes-sidebar-demo-article-trigger[aria-expanded="true"] {
    color: var(--oes-contrast);
}

.oes-sidebar-demo-article-triggered {
    padding: 1rem 0 2rem;
}

.oes-sidebar .oes-expand-image {
    margin-top: 2rem;
}

figure.oes-expand-image .oes-expand-button:hover {
    background-color: var(--oes-contrast);
}

.oes-modal-container button.oes-modal-close:hover {
    color: var(--oes-contrast);
}

figure.oes-expand-image figcaption {
    color: var(--oes-dark);
    padding: 1rem 0;
}

.oes-demo-article-sidebar a.oes-post-term {
    color: var(--oes-contrast);
    background-color: var(--oes-background);
    padding: 6px 12px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    display: inline-block;
    word-break: break-all;
    font-size: .9rem;
}

.oes-demo-article-sidebar a.oes-post-term:hover {
    color: var(--oes-primary-contrast);
    background-color: var(--oes-contrast);
}

/* Archive */
.oes-demo-article-archive-language,
.oes-demo-article-archive-occurrences {
    color: var(--oes-dark);
    font-size: 0.8rem;
    margin-left: .25rem;
}

.oes-demo-article-archive-occurrences {
    color: var(--oes-contrast);
}

.oes-demo-article-archive-authors {
    font-size: .9rem;
}

.oes-demo-article-archive-authors-by {
    padding-right: .25rem;
    color: var(--oes-dark);
    font-size: .9rem;
}


/* ---------------------------------------------------------------------------------------------------------------------
-- CONTRIBUTOR ------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------------------------------------------------
-- GLOSSARY ------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

ul.oes-field-value-list.oes-demo-glossary-connected-articles li {
    display: block !important;
}

ul.oes-field-value-list.oes-demo-glossary-connected-articles li:after {
    content: '' !important;
}

.oes-demo-glossary-archive-connected-articles-metainfo {
    color: var(--oes-dark);
    font-size: 0.8rem;
    margin-left: .25rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
-- INDEX POST ----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

.oes-demo-index-post-language {
    font-size: 0.9rem;
    color: var(--oes-dark);
    padding-left: 5px;
}

.oes-demo-index-table .oes-article-author-by {
    padding-right: 5px;
    color: var(--oes-dark);
}

.oes-demo-index-connection.oes-post-filter-wrapper {
    padding: 0;
}

/* ---------------------------------------------------------------------------------------------------------------------
-- SEARCH --------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

#oes-sidebar .wp-block-search__button-inside {
    padding-top: 1rem;
}

#oes-sidebar .wp-block-search__inside-wrapper {
    border: 1px solid var(--oes-primary);
    padding:  0;
}

#oes-sidebar .wp-block-search__button {
    padding: 5px;
    border: none;
    background-color: var(--oes-primary);
}

#oes-sidebar .wp-block-search__button svg path {
    fill: var(--oes-primary-contrast);
}

/* ---------------------------------------------------------------------------------------------------------------------
-- CS: References --------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------*/

.oes-reference-image img {
    width: 100%;
}