/**
 * Bootstrap primary color override
 *
 * Bootstrap's compiled CSS bakes #0d6efd in as a literal value inside each
 * component's own locally-scoped --bs-* custom properties (e.g. .pagination
 * defines its own --bs-pagination-active-bg) rather than referencing
 * var(--bs-primary), so overriding --bs-primary at :root alone only reaches
 * the handful of utilities (.text-primary, .bg-primary) that actually read
 * it. Every other component needs its own override below, all pointing at
 * the --brand-primary-* variables so the shade only lives in one place.
 */

:root {
    --brand-primary: #337ab7;
    --brand-primary-rgb: 51, 122, 183;
    --brand-primary-border: #2e6da4;
    --brand-primary-hover: #286090;
    --brand-primary-hover-border: #204d74;

    /* Header/footer dark background -- referenced at several opacities. */
    --brand-header-dark-rgb: 60, 60, 60;

    /* Display/heading typeface, used wherever the body copy's serif face
       (EB Garamond) would look out of place -- nav, wiki tabs, slideshow
       controls, brand wordmark. */
    --brand-heading-font: "News Cycle", "Arial Narrow Bold", "Helvetica", sans-serif;

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: var(--brand-primary-rgb);
    --bs-link-hover-color: #23527c;
    --bs-link-hover-color-rgb: 35, 82, 124;
}

.pagination {
    --bs-pagination-active-bg: var(--brand-primary);
    --bs-pagination-active-border-color: var(--brand-primary-border);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand-primary);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover-border);
    --bs-btn-disabled-color: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

/**
 * General body styles
 */

html {
    height: 100%;
    min-height: 100%;
}

body {
    font-family: "EB Garamond", Garamond, Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    line-height: 1.65;
    padding-top: 0;
    padding-bottom: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

h1 small, h2 small, h3 small, h4 small,
.h1 small, .h2 small, .h3 small, .h4 small {
    color: var(--bs-gray-600);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--brand-heading-font);
    text-align: left;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    line-height: 1.1;
}

p {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 10px;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover, a:focus { color: #23527c; text-decoration: underline; }
.btn:hover, .btn:focus { text-decoration: none; }

.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary-border);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover-border);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover-border);
}

/* .card-footer's own background-color otherwise beats .btn's in the cascade
   (it's declared later in bootstrap.min.css), so a footer doubling as a
   button (library page) needs it restored from the btn's own variables --
   including on hover/focus, which the same cascade issue would otherwise
   flatten back to the resting color. */
.card-footer.btn {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}
.card-footer.btn:hover, .card-footer.btn:focus {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}

.space-bottom { margin-bottom: 30px; }
.space-top    { margin-top: 30px; }

h1 small, h2 small, h3 small, .h1 small, .h2 small, .h3 small {
    font-size: 0.65em;
    font-weight: normal;
}

/**
 * Product carousel (game line pages, product detail related products)
 */

.product-carousel .carousel-inner {
    max-height: 220px;
}

.product-carousel .carousel-item img {
    height: 220px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Below md, six .col-2 columns per row leave each image only ~1/6 of a
   phone-width row -- the 220px height (sized for desktop's much wider
   columns) then reserves a tall, mostly-empty box around a tiny image. */
@media (max-width: 767.98px) {
    .product-carousel .carousel-inner { max-height: 90px; }
    .product-carousel .carousel-item img { height: 90px; }
}

.product-carousel .carousel-control-prev,
.product-carousel .carousel-control-next {
    width: 8%;
    opacity: 1;
}

.product-carousel .carousel-control-prev {
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0001) 100%);
}

.product-carousel .carousel-control-next {
    background: linear-gradient(to left, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.0001) 100%);
}

.product-carousel .carousel-control-prev-icon,
.product-carousel .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
}

/**
 * Bootstrap 3 panel -> Bootstrap 5 card compatibility
 *
 * Not dead weight despite looking unused from templates alone -- heavily
 * used directly inside migrated wiki article content (.panel/.panel-body/
 * .panel-default in 30+/35+/13+ articles respectively; the color variants
 * below in fewer, but still real, articles), plus the downloads-card and
 * purchase-panel components in shop templates.
 */

.panel {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
    margin-bottom: 1rem;
}
.panel-heading {
    padding: .75rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem .25rem 0 0;
    font-weight: bold;
}
.panel-body {
    padding: 1rem 1.25rem;
}
.panel-default { border-color: var(--bs-border-color); }
.panel-default > .panel-heading { background-color: #f8f9fa; color: #212529; }
.panel-primary { border-color: var(--brand-primary); }
.panel-primary > .panel-heading { background-color: var(--brand-primary); color: var(--bs-white); }
.panel-success { border-color: #198754; }
.panel-success > .panel-heading { background-color: #198754; color: var(--bs-white); }
.panel-info { border-color: #0dcaf0; }
.panel-info > .panel-heading { background-color: #0dcaf0; color: #000; }
.panel-danger { border-color: var(--bs-danger); }
.panel-danger > .panel-heading { background-color: var(--bs-danger); color: var(--bs-white); }

/**
 * Wiki styles
 */

/* Wiki article tabs */
#article-container .nav-tabs {
    border-bottom: 2px solid var(--bs-border-color);
    gap: 2px;
}
#article-container .nav-tabs .nav-link {
    color: var(--bs-gray-600);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 1rem;
    font-family: var(--brand-heading-font);
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 0.3px;
    transition: color 0.15s, border-color 0.15s;
}
#article-container .nav-tabs .nav-link:hover {
    color: #333;
    border-bottom-color: var(--bs-gray-500);
    text-decoration: none;
}
#article-container .nav-tabs .nav-link.active {
    color: #212529;
    border-bottom-color: var(--brand-primary);
    background: none;
}
#article-container .nav-tabs .nav-link .fa-solid {
    margin-right: 0.3em;
    font-size: 0.85em;
}

#article-breadcrumbs {
    display: none;
}

/* Wiki form fields — override BS3 col-xs classes */
#article-container .wiki-label {
    flex: 0 0 auto;
    width: auto;
    min-width: 100px;
    padding-right: 0.5rem;
}
#article-container .wiki-control {
    flex: 1 1 0%;
    min-width: 0;
}
#article-container .wiki-control input[type="text"],
#article-container .wiki-control textarea {
    width: 100%;
}
#article-container .wiki-control > .flex-wrap {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
#article-container .wiki-control > .flex-wrap:has(.tox-tinymce) {
    display: block;
}

/* TinyMCE editor full-width */
.tox-tinymce { width: 100% !important; }

/* Wiki edit sidebar chevron rotation */
#wiki-edit-sidebar .card-header a[aria-expanded="true"] .fa-chevron-down,
#wiki-edit-sidebar .card-header a:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
    transition: transform 0.2s;
}
#wiki-edit-sidebar .card-header a.collapsed .fa-chevron-down,
#wiki-edit-sidebar .card-header a[aria-expanded="false"] .fa-chevron-down {
    transform: rotate(0deg);
    transition: transform 0.2s;
}

/* Wiki history cards */
.wiki-card-toggle { text-decoration: none !important; color: inherit; }
.wiki-card-toggle:hover { color: inherit; }
.wiki-preview-frame { min-height: 400px; }
.wiki-merge-frame { min-height: 200px; }
.wiki-breadcrumb-actions { margin-left: 10px; }

/**
 * Font Awesome 4 compatibility (bare "fa" class works like "fa-solid" in FA6)
 */

.fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
/**
 * Header nav styles (Bootstrap 5)
 */

header.navbar {
    font-family: var(--brand-heading-font);
    text-transform: uppercase;
    letter-spacing: 1px;
}

header.navbar .navbar-brand {
    font-weight: bold;
    text-shadow: 1px -1px 1px rgba(0, 0, 0, 0.75);
    top: 2px;
    position: relative;
}

header .navbar-collapse {
    justify-content: center;
}

header .navbar-nav {
    align-items: center;
}

@media (min-width: 992px) {
    header .navbar-nav {
        flex-direction: row;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

header.navbar.fixed-top {
    min-height: 100px;
    transition: all 0.5s;
    background: rgba(var(--brand-header-dark-rgb), 0.1) none;
    border-color: rgba(var(--brand-header-dark-rgb), 0.2);
    z-index: 11000;
}

header .navbar-nav > li > a,
header .navbar-nav > .nav-item > .nav-link {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 100px;
    transition: all 0.5s;
}

header.navbar-dark .navbar-nav .nav-link {
    color: var(--bs-white);
    text-shadow: 1px -1px 1px rgba(0, 0, 0, 0.75);
}

header.navbar-dark .navbar-nav .nav-link:hover {
    text-shadow: 2px -2px 2px rgba(0, 0, 0, 1);
}

header.navbar .nav-link:hover,
header.navbar .nav-link:focus,
header.navbar .navbar-brand:hover,
header.navbar .navbar-brand:focus {
    text-decoration: none;
}

header.navbar-dark .navbar-nav .nav-item.dropdown.show > .nav-link {
    background: rgba(8, 8, 8, 0.25);
}

.dropdown-menu .dropdown-header {
    margin-top: 0;
    margin-bottom: 0;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    text-decoration: none;
}

header .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 100px;
    transition: all 0.5s;
}

header .navbar-brand > img {
    height: 30px;
    display: inline;
    padding-right: 5px;
}

header.navbar.fixed-top.shrink {
    min-height: 35px;
    transition: all 0.5s;
    background: rgba(var(--brand-header-dark-rgb), 1) none;
    border-color: rgba(var(--brand-header-dark-rgb), 1);
}

header.navbar.fixed-top.shrink .navbar-nav > li > a,
header.navbar.fixed-top.shrink .navbar-nav > .nav-item > .nav-link,
header.navbar.fixed-top.shrink .navbar-brand {
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: all 0.5s;
}

header.navbar.fixed-top.shrink .navbar-brand > img {
    height: 20px;
    transition: all 0.5s;
    top: -2px;
    position: relative;
}

/**
 * Header on mobile
 */

@media (max-width: 991px) {
    header.navbar.fixed-top {
        min-height: 50px;
        transition: all 0.5s;
        background: rgba(var(--brand-header-dark-rgb), 1) none;
        border-color: rgba(var(--brand-header-dark-rgb), 1);
    }

    header.navbar.fixed-top ul {
        width: 100%;
    }

    header .navbar-nav > li > a,
    header .navbar-nav > .nav-item > .nav-link,
    header .navbar-brand {
        line-height: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
        transition: all 0.5s;
        color: var(--bs-white);
        text-shadow: 1px -1px 1px rgba(0, 0, 0, 0.75);
    }

    header .navbar-nav {
        text-align: center;
    }

    header .navbar-nav .dropdown-menu {
        text-align: left;
    }
}

/**
 * Alert styles
 */

.messages {
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
    z-index: 12000;
}

.messages .alert {
    width: 50%;
    display: inline-block;
}

/**
 * Main content styles
 */

.lead-cover .col-md-12 {
    padding-top: 20vh;
}

.lead-cover h1 {
    color: var(--bs-white);
    font-size: 4em;
    text-shadow: 2px 2px 4px #000000;
    text-align: center;
}

.lead-cover h1 p {
    font-size: 0.4em;
    margin: 0;
}

.main-container {
    padding-top: 20px;
    flex: 1;
}

.main-container p {
    font-size: 1.3333em;
    line-height: 1.6em;
    margin: 0 0 20px;
}

.main-container li {
    font-size: 1.3333em;
    line-height: 1.6em;
}

.main-container li li {
    font-size: 1em;
    line-height: 1.6em;
}

/**
 * Slideshow styles
 */

#slideshow {
    padding: 0;
    margin-bottom: 0;
}

#slideshow .carousel-control-prev,
#slideshow .carousel-control-next {
    font-size: 50px;
    font-family: var(--brand-heading-font);
}

#slideshow .carousel-inner .carousel-item {
    width: 100%;
    aspect-ratio: 3 / 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.slideshow-logo {
    width: 300px;
    max-width: 50%;
    margin-bottom: 20px;
}

.slide-badge {
    width: 120px;
    position: absolute;
    bottom: 30px;
    margin-left: -60px;
}

.homepage-section-title {
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    #slideshow .carousel-inner .carousel-item {
        aspect-ratio: 16 / 9;
    }

    .slideshow-logo {
        width: 200px;
    }
}

@media (max-width: 480px) {
    #slideshow .carousel-inner .carousel-item {
        aspect-ratio: 1 / 1;
    }

    .slideshow-logo {
        width: 160px;
    }
}

/**
 * Game line carousel (homepage "Our Games", store landing page)
 */

#game-lines-carousel {
    position: relative;
}

#game-lines-carousel .carousel-control-prev,
#game-lines-carousel .carousel-control-next {
    width: 40px;
    opacity: 0.7;
    filter: invert(1) grayscale(100%);
}

#game-lines-carousel .carousel-control-prev { left: -45px; }
#game-lines-carousel .carousel-control-next { right: -45px; }

.game-line-card {
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.game-line-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: inherit;
    text-decoration: none;
}

.game-line-bg {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.game-line-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.game-line-card:hover .game-line-overlay {
    background: rgba(0, 0, 0, 0.2);
}

.game-line-logo {
    max-width: 70%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.game-line-info {
    padding: 12px 15px;
    background: var(--bs-white);
}

.game-line-info h5 {
    margin-bottom: 2px;
    font-size: 1em;
}

.game-line-info p {
    font-size: 0.85em;
}

@media (max-width: 1199px) {
    #game-lines-carousel .carousel-control-prev { left: -10px; }
    #game-lines-carousel .carousel-control-next { right: -10px; }
}

/**
 * Blog post styles
 */

.blog-post,
.blog-sidebar {
    margin-top: 30px;
    margin-bottom: 30px;
}

.blog-sidebar p {
    font-size: 14px;
    line-height: 1.42857143;
}

.blog-card {
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    color: inherit;
    text-decoration: none;
}

.blog-card .card-img-top {
    height: 200px;
    object-fit: cover;
}

.blog-card .card-title {
    font-size: 1.1em;
}

.blog-post p {
    font-size: 1.3333em;
    line-height: 1.6em;
    margin: 0 0 20px;
}

.blog-post li {
    font-size: 1.3333em;
    line-height: 1.6em;
}

.blog-post h2,
.blog-post h3,
.blog-post h4,
.blog-post h5 {
    margin: 0 0 20px;
}

.by-line {
    padding-bottom: 20px;
}

a.img-thumbnail, a.img-thumbnail:hover, a.img-thumbnail:active {
    text-decoration: none;
    color: #333333;
    display: block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 20px;
    background-color: var(--bs-white);
    transition: border-color 0.2s;
    overflow: hidden;
}

a.img-thumbnail img {
    max-width: 100%;
    height: auto;
}

a.img-thumbnail:hover {
    border-color: var(--brand-primary);
}

a.img-thumbnail .thumbnail-background {
    width: 100%;
}

a.img-thumbnail .caption {
    padding: 9px;
}

a.img-thumbnail .caption h2,
a.img-thumbnail .caption h3 {
    margin-top: 0;
    font-size: 1.5em;
}

a.img-thumbnail .caption p {
    font-size: 14px;
    line-height: 1.42857143;
    color: var(--bs-gray-600);
}

.thumbnail-background {
    display: block;
    height: 100px;
    background-size: cover;
    background-position: center;
}

.thumbnail-background.thumbnail-lg { height: 200px; }

.author-avatar {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    object-fit: cover;
}

.blog-post img {
    max-width: 100%;
    height: auto;
}

/**
 * Parallax styles
 */

.parallax-divider {
    width: 100%;
    min-height: 50vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Break a section out of main-container's max-width to span the full viewport
   -- for full-bleed bands (e.g. product callouts) that live inside {% block
   content %} rather than the unconstrained {% block lead %}. */
.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Product callout band -- sized around a fixed-height product image rather
   than .community-band's taller newsletter-panel proportions. */
.product-callout-band {
    min-height: 0;
}
.community-band.product-callout-band {
    padding: 40px 0;
}
.product-callout-image {
    height: 350px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Store landing page section dividers -- just a centered heading over a
   full-width image, unlike .community-band's two-column glass-panel layout. */
/* will-change promotes each band to its own persistent GPU compositing layer
   -- without it, Chrome can fail to repaint a background-image in time
   during fast scroll on a long page with several of these stacked up,
   flashing the section's plain background before the image catches up. */
.store-section-band {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.store-section-band h2 {
    color: var(--bs-white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    margin: 0;
    font-size: 3em;
}

.sort-icon {
    font-size: 0.7em;
    color: var(--bs-gray-500);
}

.game-line-products-table { font-size: 14pt; }
.clickable-row { cursor: pointer; }

/* Store landing page product cards -- fixed cover height so cards in the
   same row line up. 370px = the actual rendered card width (260.5px at the
   4-column desktop layout) times the mean height/width ratio measured
   across all 121 current product cover images (1.4165, stdev 0.076) --
   close to the covers' real proportions, so object-fit: cover crops only
   the small amount that outlier-aspect covers actually need. */
.store-card-img {
    height: 370px;
    object-fit: cover;
    width: 100%;
}

/* Format-picker dropdowns on store product cards -- Bootstrap's default
   dropdown-menu font-size (1rem, root-relative) reads oversized against the
   compact card UI. */
.store-card-dropdown-menu {
    --bs-dropdown-font-size: 0.8125rem;
}

.option-select {
    font-size: 14pt;
    position: relative;
    left: -9px;
}

.edition-banner {
    border-radius: 0;
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 0;
}
.edition-banner em { font-weight: 600; }

/* Edition banner sits flush against the footer -- kill footer's usual
   top margin so no gap opens up between the two full-bleed bands. */
.main-container:has(.edition-banner) + footer {
    margin-top: 0;
}

/**
 * Downloads card (game line page)
 */

.downloads-card {
    background: var(--bs-white);
    border: 1px solid var(--bs-border-color);
    border-left: 5px solid var(--brand-primary);
    border-radius: 0.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    font-size: 1.15em;
    margin-bottom: 2.5rem;
}
.downloads-card .panel-body h4 { margin-top: 0; margin-bottom: 1rem; font-size: 1.4em; }

/* Flex-wrap rather than a fixed column count -- game lines vary between no
   sheets, one unnamed list, and several named groups (see #7 follow-up). */
.downloads-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
}
.downloads-group { flex: 1 1 220px; }
.downloads-group h5 { margin-bottom: 0.75rem; font-size: 1.1em; }

.downloads-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    text-decoration: none;
}
.downloads-link:hover { text-decoration: underline; }
.downloads-link i { color: var(--bs-danger); width: 1em; text-align: center; }
.downloads-link.external i { color: var(--bs-gray-500); font-size: 0.75em; width: auto; }

/**
 * White text on dark backgrounds
 */

.dark       { color: var(--bs-white); }
.dark a     { color: var(--bs-white); }
.dark .card,
.dark .card a { color: #000000; }

/**
 * Newsletter / Patreon community band
 */

.community-band {
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.community-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.community-panel > .btn {
    align-self: flex-start;
}

.community-panel p {
    color: #ddd;
}

.community-form-errors {
    margin-bottom: 0;
}

.community-form-errors:not(:empty) {
    margin-bottom: 0.5rem;
}

/**
 * Footer styles
 */

footer {
    margin-bottom: 0;
    border-radius: 0;
    margin-top: 50px;
    background: rgba(var(--brand-header-dark-rgb), 1) none;
    width: 100%;
    color: var(--bs-white);
    padding-top: 30px;
    padding-bottom: 30px;
}

footer a         { color: var(--bs-white); }
footer a:hover   { color: var(--bs-white); text-decoration: underline; }
footer a:focus   { color: var(--bs-white); text-decoration: underline; }
footer a:active  { color: var(--bs-white); }

footer p {
    font-size: 14px;
    line-height: 165%;
}

footer .input-group {
    max-width: 220px;
}

.social-media {
    margin-bottom: 30px;
}

.social-media a {
    display: inline-block;
    font-size: 3.05em;
    margin-right: 10px;
    text-shadow: 1px -1px 1px rgba(0, 0, 0, 0.75);
}

.social-media-sm {
    margin-top: 10px;
}

.social-media-sm a {
    display: inline-block;
    font-size: 1.4em;
    margin-right: 6px;
    text-shadow: 1px -1px 1px rgba(0, 0, 0, 0.75);
}

.social-media a:hover,
.social-media a:focus {
    text-decoration: none;
}

/* Library card images */
.library-card-img {
    height: 240px;
    object-fit: cover;
    width: 100%;
}

/* Bootstrap's .dropdown-menu defaults to 1rem (relative to the page's 16px
   root) and a 10rem min-width, both of which drift from the site's 14px
   base and the toggle button's actual width. */
.sort-dropdown-menu {
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-min-width: 100%;
}

/* Login page: the "— or —" divider is an h4 next to the "Login" h1
   heading. Left at its natural size it's shorter than the h1, so the
   form fields beside it (and the Register/Forgot buttons in the third
   column, spaced via a matching invisible h1) start higher up than the
   social login buttons. Matching the h1's line-height lines all three
   columns' content up at the same row, the same fix prod uses. */
.login-or-divider {
    line-height: 39.6px;
}

/* Social login buttons */
.btn-social {
    position: relative;
    padding-left: 2.8em;
    text-align: center;
}
.btn-social > i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.4em;
    line-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0,0,0,.15);
}
.btn-facebook { background-color: #3b5998; color: var(--bs-white); border: none; }
.btn-facebook:hover { background-color: #2d4373; color: var(--bs-white); }
.btn-google { background-color: #dd4b39; color: var(--bs-white); border: none; }
.btn-google:hover { background-color: #c23321; color: var(--bs-white); }
.btn-github { background-color: #24292e; color: var(--bs-white); border: none; }
.btn-github:hover { background-color: #171a1d; color: var(--bs-white); }

/**
 * Product detail purchase panel
 */

.shop-form .panel-body { padding-top: 0.5rem; }
.shop-form h4 { margin-top: 10px; }

.variation-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.variation-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.variation-option:hover { border-color: var(--brand-primary); }
.variation-option:has(input:checked) { border-color: var(--brand-primary); background-color: rgba(var(--brand-primary-rgb), 0.06); }
.variation-option input[type="radio"] { margin-right: 0.5rem; accent-color: var(--brand-primary); }
.variation-option-label { flex: 1; font-size: 1.2em; }
.variation-option-price { font-weight: 600; font-size: 1.2em; }

.purchase-actions { margin-top: 10px; }
.purchase-actions .btn { width: 175px; }

.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.5rem; margin-top: 10px; }
.store-badges h5 {
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.store-badge { display: block; height: 48px; }
.store-badge img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }

/**
 * Product gallery thumbnails (product detail, game line core product, wishlist)
 */

.gallery-thumb-img { width: 60px; height: 60px; object-fit: cover; }
.gallery-thumb-img-sm { width: 40px; height: 40px; object-fit: cover; }

/**
 * Shop tables (cart, wishlist)
 */

.table-text-lg { font-size: 1.1em; }
.wishlist td, .cart td, .orders td { vertical-align: middle; }
.wishlist-thumb-col { width: 50px; }
.qty-input { width: 70px; }
.qty-input-lg { width: 6rem; }