/*!
 * Article and news detail pages.
 */

.article-detail {
    background-size: contain;
    background: #fff repeat-y;
    border-radius: 0.25rem;
}

.article-detail .btn-download-game {
    width: 360px;
    color: #fff;
    text-indent: 2rem;
    background: url(../../img/article-download.png) no-repeat 32px 22px #cb942d;
    text-decoration: none;
}

.article-detail .btn-download-game:hover {
    background-color: #f7b63d;
}

.article-detail .breadcrumb {
    background: linear-gradient(270deg, #bd132a, #8e0e20);
}

.article-detail .breadcrumb .breadcrumb-item {
    font-weight: 500;
}

.article-detail .breadcrumb .breadcrumb-item.active {
    color: #fff;
    opacity: 0.9;
    font-weight: 400;
}

.article-detail .breadcrumb a {
    color: #fff;
}

.article-detail .breadcrumb a:hover {
    opacity: 0.8;
}

.article-detail h1 {
    font-size: 1.5rem;
    color: #343a40;
}

.article-detail time {
    font-size: 0.875rem;
    font-weight: 400;
}

.article-detail .list-group-item {
    border-color: #eee;
    border-style: dashed;
}

.article-detail .list-group-item:hover:not(.text-muted),
.article-detail .list-group-item:hover:not(.text-muted) .published-time {
    font-weight: 500;
}

.article-detail .detail-content {
    font-size: 0.875rem;
}

.article-detail .detail-content .main-content img {
    max-width: 100%;
    height: auto;
}

.article-detail .detail-content nav {
    background: linear-gradient(270deg, #002b4e, #002433);
    margin-bottom: 1rem;
}

.article-detail .detail-content nav .nav-item {
    border-radius: 0;
    border-color: #002b4e;
    font-weight: 500;
    color: #fff;
}

.article-detail .detail-content nav .nav-item.active {
    color: #002433;
}

.article-detail .detail-content ul {
    padding-left: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

.article-detail .detail-content ul li {
    background: url(../../img/icon-li.png) 0 8px no-repeat;
    padding-left: 1rem;
    list-style-type: none;
}

.article-detail .detail-content h3 {
    background: url(../../img/icon-h3.png) no-repeat 0 3px;
    clear: both;
    text-indent: 1.5rem;
    color: #d4152f;
    margin-bottom: 1rem;
    font-weight: 600;
    margin-left: -0.5rem;
}

.article-detail .detail-content h5 {
    text-indent: 1.5rem;
    background: url(../../img/icon-h5.png) no-repeat 0 4px;
    font-size: 1rem;
    color: #343a40;
    font-weight: 600;
}

.article-detail .detail-content table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    background: #fff;
    border-collapse: collapse;
}

.article-detail .detail-content table tbody tr:nth-child(odd) {
    background: #fffcf6;
}

.article-detail .detail-content table tbody tr:nth-child(2n) {
    background: #fff;
}

.article-detail .detail-content table thead th {
    color: #fff;
    background-color: maroon;
    border-color: #c3a783;
    vertical-align: middle;
    text-align: center;
    border-bottom: 2px solid #c3a783;
}

.article-detail .detail-content table td,
.article-detail .detail-content table th {
    padding: 0.75rem;
    border: 1px solid #c3a783;
    vertical-align: middle;
}

.article-detail .detail-content table ul {
    margin-bottom: 0.5rem;
}

.article-detail .detail-content table a {
    color: #008dff;
}

.article-detail .detail-content table a:hover {
    text-decoration: underline;
}

.article-detail article {
    position: relative;
}

#goTop {
    position: fixed;
    width: 2rem;
    height: 2rem;
    background: #004881;
    box-shadow: 0 2px 5px #212529;
    right: 1rem;
    bottom: 30%;
    text-align: center;
    border-radius: 55%;
    color: #fff;
    opacity: 0.8;
}

#goTop:hover {
    opacity: 1;
}

#goTop i {
    top: 0.25rem;
    position: relative;
}

@media (min-width: 576px) {

    .download-btn,
    .game-payment {
        display: block;
    }

    .navbar-brand>img.small {
        width: 128px;
    }

    .home-content .articles li,
    .home-content .articles nav {
        font-size: 1rem;
    }

    .home-content .articles__link {
        max-width: 85%;
        font-size: 1rem;
    }
}

/* Clearance for the menu frame, which hangs 320px below the header's own box
   and so needs the room reserved for it here.

   20rem clears the frame outright, which is what a page opening into a content
   panel needs — at 16rem the frame lands 64px over the top of the panel and
   sits on its heading.

   The homepage wants that overlap: 16rem leaves the ornament resting about
   56px onto the banner artwork, which is the intended look and why the two
   differ. Anything less on either pulls content up behind the frame. */
@media (min-width: 768px) {
    #homepage-header {
        margin-bottom: 20rem;
    }

    body:has(.banner) #homepage-header {
        margin-bottom: 16rem;
    }
}

@media (min-width: 1200px) {
    .home-content .factions .carousel-indicators li {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    #homepage-header .navbar-dark {
        margin-top: 0.25rem;
    }

    #homepage-header .navbar li a {
        text-transform: uppercase;
        font-size: 1rem;
    }

    .wrapper__inner {
        background-size: auto;
    }
}

@media (max-width: 1199.98px) {
    body {
        background-size: cover;
    }
}

@media (max-width: 767.98px) {
    .article-detail .detail-content table {
        display: block;
        overflow-x: auto;
    }
}