/*
 Theme Name:   Sonic HQ — Archive Theme
 Description:   A loving recreation of the classic Sonic HQ "newsite"
                (archive.sonichq.net/newsite) — its deep-blue palette and
                categorized left navigation sidebar — applied as an
                optional skin over the modern WordPress theme. Toggle it
                the same way as style.checkers.css.
 Version:      11.6

 Reference palette sampled from the classic layout:
   page background      deep navy blue        #00006b → #000099 gradient
   content background   white / very light    #ffffff
   nav + box headers    royal blue bar        #0000cc / #3333aa
   links                bright blue           #0000ff, visited #800080
   accent / hover       Sonic red & gold      #cc0000 / #ffcc00
   borders              mid blue              #000080
*/

/* ============================================================
   SHQ THEME VARIABLES — ARCHIVE skin
   Standardized token set. Every skin (style.css,
   style.archivetheme.css, style.generations.css) declares this
   exact same list of --shq_* variables; only the values change.
   ============================================================ */

:root {
    /* Core palette */
    --shq_red: #cc0000;
    --shq_blue: #404fe0;
    --shq_gold: #ffcc00;
    --shq_box: #ffffff;
    --shq_mint: #6bcbb0;
    --shq_orange: #fa8204;
    --shq_green: rgba(0, 51, 0, 1);

    /* Extended palette */
    --shq_blue_deep: #000080;
    --shq_red_deep: #990000;
    --shq_black: #0a0a0a;
    --shq_ink: #111133;
    --shq_white: #ffffff;
    --shq_accent_gold: #ffcc00;
    --shq_accent_red: #cc0000;

    /* Surfaces & text */
    --shq_bg_top: #000099;
    --shq_bg_bottom: #00004d;
    --shq_panel: #ffffff;
    --shq_panel_alt: #eef1fb;
    --shq_header_bar: #0000aa;
    --shq_header_bar_2: #3a3ad6;
    --shq_border: #000080;
    --shq_text: #111133;
    --shq_sidebar_bg: #000c4d;
    --shq_sidebar_cat: #ffcc00;

    /* Links */
    --shq_link: #0033cc;
    --shq_link_visited: #800080;
    --shq_link_hover: #cc0000;

    /* Layout */
    --shq_menu_bg_size: 78px 48px;
    --shq_column_count: 4;
}

.soundtracks,
.shq-player,
.track-single {
    /* Geometry */
    --trk-gap: 0.5rem; /* space between cards            */
    --trk-pad: 0.7rem; /* padding inside a card          */
    --trk-radius: 10px; /* card corner radius             */
    --trk-art: 62px; /* artwork tile size              */
    --trk-art-radius: 7px;

    /* Card surfaces */
    --trk-bg: #0d1226; /* resting                        */
    --trk-bg-hover: #1b2a5e; /* hover / paused                 */
    --trk-bg-active: #24357a; /* currently playing              */
    --trk-border: rgba(255, 255, 255, 0.08);
    --trk-border-hover: rgba(255, 255, 255, 0.28);
    --trk-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);

    /* Text */
    --trk-fg: #ffffff;
    --trk-muted: rgba(255, 255, 255, 0.6);

    /* Accent: rail, level meter, focus rings, playing title */
    --trk-accent: #f2f200;
    --trk-accent-text: #f2f200;
    --trk-accent-scrim: rgba(226, 63, 44, 0.68); /* over artwork while playing */
    --trk-badge-scrim: rgba(5, 7, 15, 0.55); /* over artwork on hover      */
    --trk-eq: #f2f200;
    --trk-error: #e23f2c;

    /* Artwork placeholder + stat pills */
    --trk-art-bg: #172246;
    --trk-stat-bg: rgba(0, 0, 0, 0.4);
    --trk-stat-plays: #14ff3f;
    --trk-stat-length: rgba(255, 255, 255, 0.55);

    /* Remix / Lyrics tags */
    --trk-tag-remix: #fa8204;
    --trk-tag-remix-text: #2a1400;
    --trk-tag-lyrics: #6bcbb0;
    --trk-tag-lyrics-text: #04231b;

    /* Inline progress bar along the bottom of a card */
    --trk-progress-track: rgba(255, 255, 255, 0.12);
    --trk-progress: linear-gradient(90deg, #f2f200, #fa8204);

    /* Single track page hero */
    --trk-hero-scrim: linear-gradient(to right, rgba(5, 7, 15, 0.92), rgba(24, 45, 110, 0.85));

    /* Fixed bottom player */
    --plr-bg: rgba(8, 12, 28, 0.94);
    --plr-border: rgba(255, 255, 255, 0.12);
    --plr-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
    --plr-fg: #ffffff;
    --plr-muted: rgba(255, 255, 255, 0.55);
    --plr-accent: #e23f2c; /* big play/pause button      */
    --plr-accent-hover: #ee6a58;
    --plr-accent-text: #ffffff; /* icon colour on that button */
    --plr-btn-hover: rgba(255, 255, 255, 0.1);
    --plr-range-track: rgba(255, 255, 255, 0.18); /* unfilled slider    */
    --plr-thumb: #ffe67c; /* slider handle      */
}

/* ===== SHQ MERGED BASE (style.css) — auto-included so this skin is self-contained ===== */
/* CSS RESET */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.clear {
    clear: both;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}

body p {
    line-height: 1.4;
}

ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

*,
*:before,
*:after {
    box-sizing: border-box !important;
}

/* Customizations */

ul {
    margin-left: 1em;
    padding-left: 1em;
    list-style: disc;
}

ol {
    margin-left: 1em;
    padding-left: 1em;
    list-style: decimal;
}

.dmbs-main li {
    margin: 5px 0;
}

.dmbs-post-date {
    opacity: 1;
    font-size: 80%;
}

#header-nav-content {
    justify-content: center;
}

.navbar {
    padding: 0 1rem;
}

#menu-main-menu li {
    transition: all 0.5s ease;
}

#menu-main-menu a {
    color: #f2f200;
}

.main-menu button {
    color: white;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 1rem 1.5rem;
    }
}

@media screen and (min-width: 880px) {
    .home .dmbs-main {
        display: flex;
        flex-wrap: wrap;
    }
}

p.version {
    font-size: 75%;
    font-weight: bold;
    color: white;
    opacity: 0.75;
}

/* Sonic HQ */

body {
    color: black;
    margin: 0 auto;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;

    background:
        url("/images/layout/bg-top-left.svg") top left no-repeat,
        url("https://sonichq.net/images/layout/bg-bottom-right.svg") bottom right no-repeat;
    background-attachment: fixed;
    background-size: 80%, 100%;
    font-size: 18px;
}

@media screen and (max-width: 640px) {
    .content {
        /*overflow-x:hidden;*/
        overflow: hidden;
    }
}

.dmbs-content-wrapper .dmbs-main .dmbs-post.card,
.dmbs-content-wrapper .dmbs-main .dmbs-comments .comment .dmbs-post#respond {
    margin-bottom: unset;
    width: 100%;
}

.box {
    background-color: var(--shq_box);
    margin-bottom: 10px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 10px;
    position: relative;
    overflow: auto;
}

.card {
    background-color: var(--shq_box);
    margin-bottom: 10px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 0.5em;
    position: relative;
    overflow: auto;
    overflow-x: hidden;
    border: none;
}

article.card {
    border-radius: 0;
}

.card.warning {
    background-color: var(--shq_red);
    color: white;
}

.hero-card {
    font-size: 1.5rem;
}

.dmbs-main .card {
    margin-bottom: 15px !important;
}

.card a {
    color: var(--shq_blue);
    font-weight: 600;
}

.card-body {
    padding: 0;
}

.card h3 {
    font-size: 1.5em;
    /*margin-bottom: 0.5em;*/
    font-weight: 700;
}

.card-body {
    margin-top: 1.5rem;
}

/*
.card-body * + *,
.dmbs-page-content .card * + * {
    margin-top: 1.25rem;
}
*/
.card-body li,
.dmbs-page-content .card li {
    margin-top: 0.15rem;
}

.card h4 {
    font-size: 1.2em;
}

.card li {
    line-height: 1.4;
}

.card :where(h2, h3, h4, p, ul, ol, pre, blockquote, a.btn) {
    margin-bottom: 1.5rem;
}

.card p:last-child {
    margin-bottom: 0;
}

h2.widgettitle {
    font-weight: bold;
    color: white;
    font-family: "Exo 2", Arial, Verdana, Sans-serif;
    font-size: 1.9rem;
    background-color: var(--shq_blue);
}

h3.widgettitle {
    font-weight: bold;
    color: white;
    font-family: "Exo 2", Arial, Verdana, Sans-serif;
    font-size: 1.75rem;
    background-color: var(--shq_blue);
    padding: 0.5rem;
}

.dmbs-left {
    background-color: black;
}

.dmbs-left h3.widgettitle {
    margin: 0.5rem 0;
}

#displaycategorieswidget-2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#displaycategorieswidget-2 .cat-item {
    background-color: var(--shq_red);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
    transition: all 0.25s ease-in-out;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: bold;
}

#displaycategorieswidget-2 .cat-item a {
    color: white;
    margin-right: 10px;
}

#mybbxp_recent_topics_widget-2 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dcw_c1 {
    float: none !important;
}

@media screen and (min-width: 768px) {
    .flex.flex-half {
        display: flex;
        justify-content: space-between;
        gap: 0.5em;
        flex-wrap: nowrap;
    }

    .flex-half > div {
        flex-basis: 50%;
    }

    .flex-thirds {
        display: flex;
        justify-content: space-between;
    }

    .flex-thirds > div {
        flex-basis: 33.3%;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.flex.align-top {
    align-items: flex-start !important;
}

.flex.align-top h4 {
    margin: 1.5rem 0;
}

.flex.align-top * + * {
    margin-top: 0;
}

/* Music Sidebar */

.dcw {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dcw li,
.sidebar-term,
.mybb-thread {
    background-color: var(--shq_black);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
    transition: all 0.25s ease-in-out;
    border-radius: 3px;
    margin-bottom: 5px;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    transition: transform 0.25s ease-in-out;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.dcw li:hover,
.sidebar-term:hover,
.mybb-thread:hover {
    transform: scale(1.05);
}

.dcw a {
    color: white;
    display: block;
}

.dcw li span {
    position: relative;
    z-index: 2;
}

.cat-title {
    position: relative;
    z-index: 2;
}

.dcw .number-count {
    font-size: 14px;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    z-index: 10;
}

.series-sidebar-img {
    mask-image: linear-gradient(to left, transparent 25%, black 75%);
    -webkit-mask-image: linear-gradient(to left, transparent 25%, black 75%);
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: 0.3;
    max-height: 50px;
    max-width: unset !important;
}

#gameslist .series-sidebar-img {
    max-height: 75px;
}

#main-menu-admin .search-field {
    background-color: rgba(0, 0, 0, 0);
    width: 500px;
    max-width: 500px;
    border-bottom: 3px solid white;
}

#main-menu-admin #search-3 .input-group-btn {
    display: none;
}

#main-menu-admin #search-3 {
    padding: 5px;
}

#main-menu-admin .input-group {
    display: flex;
    justify-content: center;
    align-items: center;
}

#mybbxp_recent_topics_widget-2 li a {
    color: white;
}

table.stats {
    border-collapse: collapse;
    margin: 1em auto;
}

table.stats td:first-child {
    font-weight: bold;
    text-align: right;
    vertical-align: top;
}

table.stats td:last-child {
    text-align: left;
    padding-left: 0.5em;
}

table.stats td {
    color: white;
    padding: 4px;
}

.blue-box {
    background-color: var(--shq_blue);
    color: white;
    padding: 10px !important;
    transition: all 0.25s ease-in-out;
    z-index: 1;
    position: relative;
    overflow: hidden;
}

.blue-box a {
    color: white;
}

.blue-box.no-padding {
    padding: 0 !important;
}
.no-margin {
    margin: 0 !important;
}

.negative-margin {
    margin: -10px !important;
    margin-bottom: 5px !important;
}

.blue-box.jagged {
    overflow: visible;
}

.single .sticky .blue-box {
    background-color: var(--shq_red);
}

.article-header:hover {
    filter: brightness(120%);
    transition: all 0.45s ease-in-out;
}

article .dmbs-post-featured-image {
    /*margin-top: -15px !important;*/
    margin-top: -32px !important;
}

img.circle-img,
.circle-img > * {
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
}

.author .circle-img {
    margin-bottom: 1rem;
    display: block;
}

.box-shadow {
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
}

.alternate-article-content {
    /*background:var(--shq_orange);
	color:white;*/
    line-height: 1.4;
}

.label {
    display: inline-block;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}
.label-feature {
    background-color: #485aa9;
    color: white;
}
.label-bug {
    background-color: #c44c34;
    color: white;
}
.label-enhancement {
    background-color: #8fc9b2;
    color: black;
}
.label-misc {
    background-color: #999;
    color: black;
}
.label-ui {
    background-color: #fff;
    color: black;
}
.label-ux {
    background-color: #ccc;
    color: black;
}
.label-refactor {
    background-color: #df892e;
    color: white;
}
.label-primary {
    background-color: #071b49;
}

.label-ok {
    background-color: #020;
    color: lime;
}

.label-bad {
    background-color: #200;
    color: var(--shq_red);
}

.label-inprogress {
    background-color: #111;
    color: white;
}

#versions p {
    margin-bottom: 0.2em;
}

#versions * + * {
    margin-top: unset;
}

#versions hr {
    margin: 1.5rem 0;
}

.box.yellowBox {
    background-color: rgba(83, 83, 0, 1) !important;
    color: yellow;
}

.box.greenBox {
    background-color: rgba(0, 51, 0, 1) !important;
    color: lime;
}

.box.errorBox {
    background-color: rgba(51, 0, 0, 1) !important;
    color: #ff9999;
}

/* =========================================================================
   Badges — pill chips, matching the Sonic Blast label treatment.
   -------------------------------------------------------------------------
   ONE structural recipe. Every variant further down sets only
   --shq-badge-accent; the fill, the border and the label colour are all
   derived from it. The old block spelled out background-color + color for
   each of seventeen variants, which is how several of them ended up on
   colours that no longer existed anywhere else in the skin.

   Proportions come from the Blast reference: the fill is the accent at
   about 20%, the border the same accent a little stronger, the label the
   accent at full strength, all at a full pill radius.

   Accents are per-skin, not shared. Generations draws badges on dark navy
   cards and can run the bright Blast accents as-is; Mania and Archive draw
   them on light yellow and white cards, where those same accents would be
   invisible, so they use darkened equivalents at the same hues. The shape
   is the shared part.
   ========================================================================= */

.badge {
    /* Declared before the color-mix() pair below so that a browser without
       color-mix support still gets a legible chip — an outline in the
       accent colour — rather than dropping the box entirely. Both
       properties are then re-declared with the real values. */
    background-color: transparent;
    border: 1px solid currentColor;

    --shq-badge-accent: #43435a;
    /* What the accent is tinted INTO to make the fill.

       Generations tints into `transparent`, i.e. the accent laid straight
       over its dark navy card — the Blast recipe verbatim. Mania and
       Archive CANNOT do that: their cards are light, so tinting toward a
       dark accent drags the fill toward the label colour and the two
       collapse together. Measured across all seventeen variants, that put
       every one of them under 4.5:1, several near 3:1. They tint into
       white instead, giving a pale chip carrying a dark accent label,
       which measures ~5-7:1 on the same variants. Same shape, inverted
       relationship to the surface. */
    --shq-badge-base: #ffffff;
    --shq-badge-fill: 14%;
    --shq-badge-edge: 45%;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Spaces the icon from the label in chips like the "Views" badge,
       which carries a Font Awesome <i>. */
    gap: 0.4em;

    padding: 0.34em 0.9em;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--shq-badge-accent) var(--shq-badge-fill), var(--shq-badge-base));
    border: 1px solid color-mix(in srgb, var(--shq-badge-accent) var(--shq-badge-edge), transparent);
    color: var(--shq-badge-accent);

    font-size: 0.82em;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
    vertical-align: middle;
}

/* greenBox / errorBox are dark panels in ALL three skins (#003300 and
   #330000), so their badges keep the bright accents even in the two
   light-card skins. */
.box.greenBox .badge,
.box.errorBox .badge {
    /* These two panels are dark (#003300 / #330000) in ALL three skins, so
       they take the dark-surface treatment even where the skin's cards are
       light — otherwise a pale chip would carry a pale label. */
    --shq-badge-base: transparent;
    --shq-badge-fill: 20%;
}

.box.greenBox .badge {
    --shq-badge-accent: #5ee08a;
}

.box.errorBox .badge {
    --shq-badge-accent: #f76464;
}

.reltime {
    letter-spacing: 0.1em;
    font-weight: bold;
}

/* Was `color: white`, which overrode the accent on every linked badge. */
.badge a {
    color: inherit;
    text-decoration: none;
}

.box.greenBox h2 {
    color: lime;
}

.box.errorBox h2 {
    color: #ff9999;
}

.success-box .box {
    color: lime;
    background-color: #030 !important;
}

.success-box .box a {
    color: white;
}

.success-box h2 {
    color: lime;
}

.error-box .box {
    background: #330000 !important;
    color: #ff9999 !important;
}

.blue-box .box {
    background-color: #385cae;
    color: white;
}

.yellowBox h2,
.yellowBox h2 a {
    color: yellow;
}

.box hr {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.h3-bg h3 {
    font-size: 1.75rem;
}

.is-poststat-private .h1-bg {
    background-color: #a1392d;
    box-shadow: 20px 10px 0px rgba(161, 57, 45, 0.45);
}

.nav-link,
.nav-link:hover {
    color: white;
}

.wide-content {
    margin-left: -10px;
    margin-right: -10px;
}

.overflow {
    overflow: auto;
}

.well {
    background-color: rgba(255, 255, 255, 0.55);
    border: none;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 1em;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex > *:first-child {
    padding-left: 0px;
}

.flex > *:last-child {
    padding-right: 0px;
}

.flex.center {
    justify-content: center;
}

.flex.flex-half > div {
    flex-basis: 50%;
}

.flex.flexnowrap {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.more-margin,
ins {
    margin-top: 1em;
    margin-bottom: 1em;
}

.pull-left.floated-image {
    padding: 0 1em 1em 0;
}

.pull-right.floated-image {
    padding: 0 0 1em 1em;
}

.flex dt {
    flex-basis: 20%;
}

.flex dd {
    flex-basis: 80%;
}

/* Main Logo */

.main-logo {
    display: block;
}

.main-logo a {
    pointer-events: auto;
    cursor: pointer;
}

.main-logo img {
    height: 85px;
    width: 215px;
    top: 0px;
    left: 0px;
    position: absolute;
    transition: transform 1s ease-in-out;
    opacity: 0;
}

@media only screen and (max-width: 480px) {
    .main-logo img {
        top: 40px;
    }
}

/* Menu */

/* Base styles that apply to all menus */
.menu-section {
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1000;
}

.menu-section-admin {
    /*background: #e23f2c;*/
    background-color: color-mix(in oklab, var(--shq_red) 90%, black);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
    position: absolute;
    top: 50px;
    width: 100%;
    transition: all 0.5s ease-in-out;
}

.hidden-up {
    transform: translateY(-200px);
    transition: all 0.5s ease-in-out;
}

.hidden-up.visible {
    transform: translateY(-100px);
    transition: all 0.5s ease-in-out;
}

.social-menu a {
    background-color: #333;
    color: white;
    width: 32px;
    height: 32px;
    padding: 1em !important;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.css-theme-switch > button {
    background-color: #333;
    color: white;
    width: 32px;
    height: 32px;
    padding: 1em !important;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
    .menu-section-admin {
        top: 30px;
    }
    .hidden-up.visible {
        transform: translateY(-88px);
        transition: all 0.5s ease-in-out;
    }
}

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu li a {
    display: block;
    text-decoration: none;
    color: white;
    /*padding: .6em 1em;*/
    padding: 0.8em 1em 0.8em 1.9em;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    font-size: 1.25rem;
}

.nav-mixed {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.main-menu {
    margin-bottom: 2.5rem;
}

/* Allow room for logo */
.main-menu .single-nav ul {
    margin-left: 140px;
}

.main-menu-admin .single-nav ul {
    margin-left: 55px;
}

@media screen and (min-width: 42em) {
    .single-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .single-nav li {
        flex: 1 0 auto;
        text-align: center;
    }
}

.comments-footer .dmbs-post-meta-tags {
    font-size: 0.8rem;
}

span.smalltext {
    font-size: 75%;
    display: none;
}

#latest_threads_3_e center {
    text-align: left;
}

#latest_threads_3_e img {
    margin-right: 15px;
}

#latest_threads_3_e a:after {
    clear: both;
}

#latest_threads_3_e .smalltext strong {
    display: none;
}

.pointer {
    cursor: pointer;
}

/* Navigation Buttons */

ul.navigation li {
    transition: all 0.15s ease-out;
    color: #ffffff;
    /*padding: 3px 20px 7px 30px;*/
    text-decoration: none;
    background-size: var(--shq_menu_bg_size);
    font-weight: 600;
}

ul.navigation li.forum {
    background: url("/images/menu/svg/users-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: var(--shq_menu_bg_size);
    background-position: left;
}

ul.navigation li.music {
    background: url("/images/menu/svg/music-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: var(--shq_menu_bg_size);
    background-position: left;
}

ul.navigation li.music.current-page-ancestor,
ul.navigation li.music.current-menu-item {
    background: url("/images/menu/svg/music-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: 91px 83px;
    background-position: left;
}

ul.navigation li.comics {
    background: url("/images/menu/svg/comment-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: var(--shq_menu_bg_size);
    background-position: left;
}

ul.navigation li.comics.current-page-ancestor,
ul.navigation li.comics.current-menu-item {
    background: url("/images/menu/svg/comment-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: 91px 83px;
    background-position: left;
}

ul.navigation li.archives {
    background: url("/images/menu/svg/archive-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: var(--shq_menu_bg_size);
    background-position: left;
}

ul.navigation li.archives.current-page-ancestor,
ul.navigation li.archives.current-menu-item {
    background: url("/images/menu/svg/archive-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: 91px 83px;
    background-position: left;
}

ul.navigation li:hover a {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

ul.navigation li:hover {
    background-size: 91px 83px;
}

/* Styles for social media menu */

/* Find src URL and add in correct social media icon. */
.social-menu li a:before {
    font-family: "Fontawesome";
    -webkit-font-smoothing: antialiased;
}

.social-menu li:hover a {
    color: #97b7ff;
}

.social-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.2rem;
}

.social-menu li a {
    padding: 0.8em 0.75em 0.8em 0.75em;
}

.css-toggle {
    place-content: center;
    margin-left: 2rem;
}

/* Footer */

footer.main-footer {
    color: #fff;
    background-color: #000;
    padding: 2rem;
    margin-top: 2rem;
}

.main-footer a,
.main-footer a:hover {
    color: var(--shq_gold);
    text-decoration: underline;
}

.footer-wrapper {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));*/

    gap: 2rem;
}

@media (min-width: 1200px) {
    .footer-wrapper {
        grid-template-columns: 1fr 3fr 1fr;
    }
}

.main-footer p {
    margin-bottom: 1em;
}

.main-footer .flex br {
    display: none;
}

.main-footer .flex {
    gap: 0.5rem;
    justify-content: flex-start;
}
.main-footer h2 {
    text-align: center;
}

.social a {
    color: white;
    font-size: 24px;
    margin: 8px;
    display: inline-block;
}

.footer-wrapper h2 {
    margin-bottom: 1em;
}

@media only screen and (max-width: 480px) {
    .main-footer section {
        text-align: center;
    }
}

.version {
    opacity: 0.5;
    /*border-top:1px solid #517bdc;*/
}

/* Article */

.dmbs-post-meta-header2 {
    position: relative;
    z-index: 100;
}

.dmbs-post-meta-header2 .flex {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.article-featured-image {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -20px;
    margin-bottom: 10px;
    text-align: center;
}

article .article-featured-image {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
}

.comments-footer {
    margin-top: 2rem;
}

ul.list-flat {
    display: flex;
    justify-content: center;
    align-items: center;
    /*flex-flow: row wrap;*/
    list-style: none;
    padding-left: 0px;
    margin-left: 0px;
}

ul.list-flat li {
    display: inline-block;
    padding-left: 10px;
}

ul.list-flat li:first-child {
    display: inline-block;
    padding-left: 0px;
}

.list-flat img {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease-in-out;
}

.mania-shadow {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}

.alternate-article-content:nth-of-type(odd) {
    background-color: #eee;
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
}

.alternate-article-content:nth-of-type(even) {
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
}

.alternate-article-content.active {
    background-color: white;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.75);
}

.alternate-article-content.pointer {
    transition: all 0.5s ease-in-out;
}

.alternate-article-content.pointer:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.event-state {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

/* Article Interview */

p.a {
    color: #385dae;
    font-weight: bold;
}

.pagination {
    margin: auto;
}

.pagination .nav-links a {
    padding: 10px;
}

a.page-numbers {
    color: white;
    font-weight: bold;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

/* Headings */

@media (min-width: 768px) {
    .h1-bg {
        background-color: black;
        margin-bottom: 0.5em;
        margin-top: 1em;
        position: relative;
        z-index: 1;
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 1rem 1rem 0 0;
    }

    .h1-bg:after {
        content: "";
        background-image: url("/images/retrotitlebar/rotate.php");
        position: absolute;
        left: 22px;
        top: 0;
        width: 150px;
        height: 70px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: -1;
    }

    .h1-bg h1 {
        font-weight: bold;
        color: white;
        text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
        font-family: "Exo 2", Arial, Verdana, Sans-serif;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
        font-size: 2.5rem;
        padding: 1rem;
        text-align: right;
    }
}

@media (max-width: 767px) {
    .h1-bg {
        margin-bottom: 2em;
        text-align: center;
        position: relative;
    }

    .h1-bg h1 {
        font-weight: bold;
        font-family: "Exo 2", Arial, Verdana, Sans-serif;
        font-size: 2.5rem;
        color: white;
        text-shadow:
            0px 0px 4px black,
            0px 0px 12px rgba(0, 0, 0, 0.712);
        /*text-shadow: 1px 1px 0 #ffe67c, -1px 1px 0 #ffe67c, -1px -1px 0 #ffe67c, 1px -1px 0 #ffe67c;*/
        /*text-shadow: 2px 2px #00000062;*/

        /*text-shadow: 3px 3px 2px #000, -3px 3px 2px #000, -3px -3px 0 #000, 3px -3px 0 #000;*/
    }
}

h2 {
    font-weight: 700;
    margin-top: 0px;
    font-size: 2rem;
    font-family: "Exo 2", Arial, Verdana, Sans-serif;
    margin-bottom: 1.5rem;
}

h3 {
    margin-top: 0px;
}

.h3-bg {
    transform: skewX(135deg);
    background-color: black;
    height: 20px;
    margin-bottom: 0.5em;
}

.h3-bg h3 {
    transform: skewX(-135deg);
    position: relative;
    left: 3px;
    bottom: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    font-family: "Exo 2", Arial, Verdana, Sans-serif;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

#comicsMainPage .h3-bg {
    margin-top: 0.2em;
}

blockquote {
    border-left: 3px solid #e3cd72;
    padding: 15px;
    line-height: 1.5;
    color: #333;
    margin: 1em 0 1em 2em;
    background-color: rgba(255, 255, 255, 0.25);
}

.v-small {
    font-size: 60%;
}

.text-white {
    color: white;
}

/*--------------------------------------------------------------
Input
--------------------------------------------------------------*/

/* Fix for scroll bars */

.form-group {
    margin-left: 0;
    margin-right: 0;
}

input:not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]):not(.lbl),
select.form-control,
select.form-control option,
select {
    padding: 7px;
    background: #2f447f;
    outline: none;
    resize: none;
    border: 0;
    transition: all 0.3s;
    color: white;
}

select {
    font-size: 14px;
}

.form-width-auto {
    width: auto !important;
}

input:not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]):not(.lbl):disabled,
select:disabled {
    opacity: 0.5;
}

#musicsearch {
    border-radius: 3px;
    width: 100%;
    margin: 15px 0;
    padding: 12px;
}

.musicsearch {
    margin: auto;
    display: block;
}

input[type="text"]:focus,
input[type="password"]:focus,
select.form-control:focus {
    /*background-color: color-mix(in oklab, var(--shq_blue) 5%, black) !important;*/

    background: linear-gradient(color-mix(in oklab, var(--shq_blue) 80%, black), color-mix(in oklab, var(--shq_blue) 35%, black)) !important;
    color: white;
}

textarea {
    /*background-color:#fff3bf;*/
    background-color: #2f447f;
    border: none;
    width: 100%;
    color: white;
    font-size: 60%;
    border-radius: 3px;
}

input[readonly] {
    opacity: 0.6 !important;
}

/* Placeholder text */

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #fff !important;
    opacity: 0.7;
}
:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff !important;
    opacity: 0.7;
}
::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff !important;
    opacity: 0.7;
}
:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #fff !important;
    opacity: 0.7;
}

[type="search"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
}

.widget_search .search-submit {
    background-color: transparent;
    border: none;
}

/* Buttons */

.btn {
    font-size: 18px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.5em 1.2em;
}

.btn-sm {
    font-size: 14px;
}

.btn-main,
.btn-primary {
    background-color: #071b49;
    border: none;
    color: white !important;
    transition: all 0.5s ease;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}
.btn-main.active {
    background-color: white;
    color: black;
}

.dmbs-body .btn-main:hover,
.dmbs-body .btn-primary:hover {
    background: #fff;
    color: black !important;
    transition: all 0.5s ease;
}

.btn-main.active.focus,
.btn-main.active:focus,
.btn-main.active:hover,
.btn-main:active.focus,
.btn-main:active:focus,
.btn-main:active:hover,
.open > .dropdown-toggle.btn-main.focus,
.open > .dropdown-toggle.btn-main:focus,
.open > .dropdown-toggle.btn-main:hover,
.btn-main:focus {
    background: #fff !important;
    color: black !important;
    transition: all 0.5s ease;
}

.btn-error {
    background-color: #c11d1d;
    border: none;
    color: white;
    transition: all 0.5s ease;
}

.form-control:focus {
    border: none;
    box-shadow: none;
}

/* Fix for buttons misaligned */
.input-group-btn {
    top: -2px;
}

.input-group-append {
    margin-top: -3.5px;
}

/* FANCY CHECKBOX */

.lbl {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 44px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    left: 15px;
}
.lbl:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
    content: "";
    transition: all 0.3s ease;
}
.lbl:active:after {
    transform: scale(1.15, 0.85);
}
.cbx:checked ~ label {
    background: #697bff;
}
.cbx:checked ~ label:after {
    left: 20px;
    background: #3c53ff;
}
.cbx:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}
.cbx:disabled ~ label:after {
    background: #bcbdbc;
}
.cntr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.press {
    margin-bottom: 40px;
}
.hidden {
    display: none;
}

/*--------------------------------------------------------------
Page Specific
--------------------------------------------------------------*/

/*****

COMICS

*****/

.comic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
    gap: 10px;
}

.comic-grid .comic-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--shq_blue);
    color: #fff;
    border-radius: 4px;
    transition: all 0.25s ease-in-out;
    overflow: hidden;
    text-align: center;
    padding-bottom: 1em;
    position: relative;
    z-index: 1;
}
.comic-grid a,
.series-box a {
    color: white;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}
.comic-grid a::before,
.series-box a::before {
    content: "";
    inset: 0;
    position: absolute;
}
.comic-grid .comic-box:hover,
.series-box:hover {
    transform: scale(1.075);
}

.comic-grid h4,
.series-box h4 {
    padding: 0.5em;
    font-weight: bold;
    text-wrap: balance;
    font-size: 1.2rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.comic-grid img,
.series-box img {
    max-width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: top;
    height: auto;
}

.series-box img {
    max-width: 100% !important;
}

.series-items .series-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--shq_blue);
    color: #fff;
    border-radius: 4px;
    transition: all 0.25s ease-in-out;
    overflow: hidden;
    text-align: center;
    /*padding-bottom: 1em;*/
    position: relative;
    z-index: 1;
}

.series-desc-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.7) 100%);
    color: white;
    padding: 5px;
    box-sizing: border-box;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-items: end;
    border-radius: 4px;
    overflow: hidden;
}

.number-aside {
    position: absolute;
    bottom: 0; /* Flush with bottom edge */
    right: 0; /* Flush with right edge */

    /* Center the number inside it */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.5em;

    /* Use a high z-index to ensure it sits on top */
    z-index: 10;

    /* Size and text styles for the number */
    width: 60px; /* Adjust this to control the overall size */
    height: 60px; /* Adjust this to control the overall size */
    color: white; /* Color of the number */
    font-size: 0.8em;
    font-weight: bold;
}

.number-aside::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    z-index: -1;

    width: 0;
    height: 0;

    border-style: solid;
    /* Adjust this value (60px) to match the width/height of .number-aside for a perfect fit */
    border-width: 0 0 60px 60px;

    /* The color of the triangle itself */
    border-color: transparent transparent var(--shq_red) transparent;
    /* Top: transparent, Right: transparent, Bottom: blue (visible), Left: transparent */
}

.number-aside {
    /* Reset z-index context for the number content */
    z-index: 11;
    /* This ensures the number element is positioned above its own ::before pseudo-element */
}
.preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: loader 3s infinite alternate;
    padding: 10px;
    text-align: center;
}

.preloader.error {
    animation: loader-error 3s infinite alternate;
}

.preloader p {
    color: white;
    font-weight: bold;
    font-size: 2em;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes loader {
    from {
        background: #001a86;
    }
    to {
        background: #0431ea;
    }
}

@keyframes loader-error {
    from {
        background: #822e2e;
    }
    to {
        background: #a12424;
    }
}

.comic-edit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    transition: all 0.2s ease-in-out;
    border-radius: 50%;
}

.sidebar-term {
    display: flex;
    justify-content: space-between;
}

.sidebar-term .term-count {
    color: black;
    background-color: #fff;
    position: absolute;
    right: -5px;
    top: -8px;
    width: 50px;
    display: grid;
    place-items: center;
    height: 50px;
    padding: 1rem;
    border-radius: 50%;
}

.publisher-item {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.publisher-item img {
    width: 100%;
    height: auto;
}

.publisher-item * + * {
    margin-top: unset;
}

.publisher-item p {
    margin-bottom: 1.5rem;
}

a > .blue-box:hover {
    filter: brightness(115%);
}

a:hover {
    text-decoration: none !important;
}

.comicseries-img {
    mask-image: linear-gradient(to left, transparent 25%, black 75%);
    -webkit-mask-image: linear-gradient(to left, transparent 25%, black 75%);
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 1;
    mix-blend-mode: multiply;
    max-height: 55px;
    max-width: unset !important;
}

.outNow .badge {
    --shq-badge-accent: #146b32;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #071b49;
}

#coverBG {
    background-color: var(--shq_blue);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.article-header {
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    color: black !important;
    background-color: #eeeeee90 !important;
}

.article-header a {
    color: black !important;
}

.article-header.has-featured {
    min-height: 200px;
}

.sticky .article-header {
    background-color: var(--shq_red);
}

.article-header h2,
h2.dmbs-post-title {
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

#coverBG:before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
    transition: all 0.25s ease-in-out;
    background: linear-gradient(to bottom, transparent 5%, var(--shq_blue) 95%);
}

.article-header:before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
    transition: all 0.25s ease-in-out;
    background: linear-gradient(to bottom, transparent 5%, #eeeeee 95%);
}

.dmbs-post-title a::after {
    content: "";
    inset: 0;
    position: absolute;
}

.sticky .article-header:before {
    background: linear-gradient(to bottom, transparent 5%, var(--shq_red) 95%);
}

/* View By Series */

.dismiss {
    background-color: rgba(55, 55, 55, 0.5);
    transition: all;
    animation-name: dismissprompt;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    /*animation:all 0.3s dismissprompt ease-in-out 1;	*/
}

@keyframes dismissprompt {
    to {
        opacity: 0;
        transform: scale(0);
    }
}

.nudge-left {
    margin-left: -20px;
    position: relative;
    z-index: 50;
}

.flex-coverbuttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Fandom fix */
.boilerplate.metadata {
    display: none;
}

/* Upcoming */

.upcoming-item {
    background: radial-gradient(circle at 62% 35%, black, #333);
    overflow: hidden;
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    color: white;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
    text-decoration: none !important;
    display: block;
    transition: transform 0.25s ease-in-out;
    isolation: isolate;
    container-type: inline-size;
    padding: 0.75rem;
    animation: slidein 0.5s ease-in both;
    animation-delay: calc(sibling-index() * 0.1s);
}

@keyframes slidein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}
.upcoming-item a::after {
    content: "";
    inset: 0;
    position: absolute;
}

.upcoming-item::before {
    content: "";
    inset: 0;
    opacity: 0.3;
    background-color: black;
    position: absolute;
    z-index: 0;
    transition: all 0.25s ease-in-out;
}

@media screen and (max-width: 768px) {
    .upcoming {
        --shq_column_count: 1;
        display: grid;
        grid-template-columns: repeat(var(--shq_column_count), 1fr);
        gap: 0.25rem;
    }

    .upcoming-item {
        margin: 0;
        padding: 1em;
    }
}

.upcoming-item:hover {
    transform: scale(1.05);
    transition: transform 0.25s ease-in-out !important;
}

.upcoming-item:hover:before {
    opacity: 0.15;
    transition: all 0.25s ease-in-out;
}

.upcoming-item h4 {
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
    max-inline-size: 50ch;
    margin-bottom: 0.75rem;
}

.upcoming-item h4 a {
    color: #58cdff;
}

.upcoming-item.outnow {
    background-color: #0f0;
}

.upcoming-item.error {
    background-color: var(--shq_red);
    color: red;
}

.upcoming-item.error a {
    color: red;
}

.upcoming-item.error h4 {
    color: var(--shq_red);
}

.upcoming-item.checking {
    /* Optional: Change the cursor to indicate an active state */
    cursor: wait;
}

.upcoming-item.checking::before {
    content: ""; /* Required for pseudo-elements to render */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*
     * Make the overlay semi-transparent to dim the content.
     * We use a high z-index to ensure it sits on top of everything inside the card.
     */
    background-color: rgba(255, 255, 255, 1); /* Light overlay */
    z-index: 1000;

    /* --- Spinner Styles (Centered) --- */
    /* Create the circle for the spinner */
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3; /* Light grey base circle */
    border-top: 4px solid #3498db; /* Blue top border for the spin effect */
    border-radius: 50%; /* Make it a perfect circle */

    /* Center the spinner within the overlay */
    margin: auto;
    /* You can also use:
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    */

    /* Apply the animation */
    animation: spin 1s linear infinite;
}

/*
 * 3. Define the spinning keyframes.
 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@container (max-width: 767px) {
    .upcoming-item h4 {
        font-size: clamp(1.2rem, 0.7vw, 1vw);
    }
}

.upcoming-item.outnow h4 {
    color: lime;
}

.upcoming .card * + *,
.blue-box * + * {
    margin-top: unset;
}

.upcoming-date {
    font-size: 14px;
    margin-bottom: 0.25em;
    margin-top: 0.35em !important;
}

.upcoming-item-content {
    position: relative;
    z-index: 2;
    /*width:100%;*/
}

.small-text p {
    font-size: 0.75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.upcoming-item .well {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px;
}

@media screen and (min-width: 769px) {
    .hide-d {
        display: none !important;
    }
}

.blue-box .issue {
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    /*mix-blend-mode: multiply;*/
}
.single-comic_type .blue-box {
    z-index: 1;
    position: relative;
    /*overflow: hidden;*/
}
.single-comic_type .card-body {
    z-index: 2;
    position: relative;
}

#expand-comic {
    margin-left: auto;
}

.comic-series {
    flex-basis: 20% !important;
}

.comic-cover {
    flex-basis: 10% !important;
}

.comic-meta {
    flex-basis: 70% !important;
}

.series-items {
    justify-content: center;
    align-items: flex-start;
}

.series-items > a {
    text-align: center;
}

.series-items .blue-box {
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
}

.series-items img {
    max-width: 200px;
}

.blue-box h3 {
    color: white;
}

.mw-parser-output .reviews {
    display: none;
}

/*****
MUSIC
*****/

.grid {
    --shq_column_count: 4;
    display: grid;
    grid-template-columns: repeat(var(--shq_column_count), 1fr);
    gap: 0.5rem;
}

.auto-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

@media screen and (max-width: 768px) {
    .grid {
        --shq_column_count: 2;
        /*grid-template-columns: repeat(var(--shq_column_count), 1fr);        */
    }
}

.series-items img {
    max-width: 100px;
}

.series-items .blue-box {
    aspect-ratio: 1;
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    display: flex;
    align-items: end;
}

.series-items .blue-box:before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
    transition: all 0.25s ease-in-out;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: linear-gradient(to bottom, transparent 5%, var(--shq_blue) 95%);
}

.music-category-content {
    width: 100%;
}

.music-category-content h3 {
    font-size: 1.25rem;
    text-wrap: balance;
    text-shadow: 1px 1px 1px black;
}

.number-wrapper {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.series-listing .cat-title {
    text-shadow: 1px 1px 1px black;
}

.count-item {
    font-size: 80%;
    border-radius: 50%;
    display: inline-block;
    padding: 0px;
    text-align: center;
    width: 20px;
    height: 20px;
    padding-top: 3px;
}

/*
.tracktitle {
    font-size: 14px;
}
*/

.mp3-count {
    background-color: rgba(0, 0, 55, 0.5);
    color: cyan;
}

.midi-count {
    background-color: rgba(0, 55, 0, 0.5);
    color: #62ff7f;
}

/* --- Variants: accent only; everything else comes from .badge --- */

.badge.format-mp3 {
    --shq-badge-accent: #14509a;
}

.badge.format-mid {
    --shq-badge-accent: #146b32;
}

.badge.lightblue {
    --shq-badge-accent: var(--shq_blue);
}

.badge.white {
    /* A white accent is invisible on this skin's white cards, so this
       variant keeps a solid plate and borrows only the pill shape. */
    --shq-badge-accent: var(--shq_blue);
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
}

.badge.featured {
    --shq-badge-accent: var(--shq_red);
}

.badge.lightgreen {
    --shq-badge-accent: #146b32;
}

.badge.interview {
    --shq-badge-accent: #146b32;
}

.badge.editorial {
    --shq-badge-accent: #0d5a4c;
}

.badge.review {
    --shq-badge-accent: #0b5265;
}

.badge.comic {
    --shq-badge-accent: #8f4200;
}

.badge.qa {
    --shq-badge-accent: #7a4f00;
}

.badge.delayed {
    --shq-badge-accent: #6b5600;
}

.badge.error {
    --shq-badge-accent: #9e1a14;
}

.badge.good {
    --shq-badge-accent: #146b32;
}

.badge.error404 {
    --shq-badge-accent: #43435a;
}

.badge.gray {
    --shq-badge-accent: #43435a;
}

.badge.badge-issuenumber {
    --shq-badge-accent: var(--shq_blue);
}

thead td {
    font-weight: bold;
    font-size: 1.2em;
    border-bottom: 2px solid black;
    padding-bottom: 0.5em;
}

/* Search */

/* The only badge that sits on top of artwork rather than on a card, so it
   is the one place the translucent tint is wrong — it needs an opaque
   plate to stay readable over an arbitrary image. Shape and typography
   still come from the recipe above. */
.articles-search .badge {
    position: absolute;
    right: 10px;
    bottom: 24px;
    font-size: 24px;
    --shq-badge-accent: #ffffff;
    background-color: rgba(7, 27, 73, 0.92);
    border-color: rgba(255, 255, 255, 0.3);
}
@media only screen and (max-width: 767px) {
    #comicsMainPage .h3-bg {
        width: calc(100% - 55px);
    }
}

/* Archives */

.equal-height .box {
    min-height: 300px;
}

/* Full Width Youtube */

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin: 20px 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*
.article-body iframe [src^=https://www.youtube.com] {

}
*/

.equal-columns {
    table-layout: fixed;
}

@media screen and (max-width: 880px) {
    .hide-xs {
        display: none !important;
    }
}

/* Specfic Page Fixes */

/* Encyclopedia */
.page-id-40016 article td {
    line-height: 1.4;
    vertical-align: top;
}

.last-update {
    opacity: 0.85;
    font-size: 75%;
    display: block;
    margin-top: 5px;
    font-weight: 400;
}

.label .textwidget {
    display: none;
}

/* Fan Fair */

.fic-author {
    opacity: 0.7;
    font-weight: bold;
}

.fic-category {
    font-size: 75%;
}

ul.fanart-columns {
    column-count: 2;
    list-style: disc;
    margin: 0;
}

.card td {
    padding: 10px;
}

@media screen and (min-width: 880px) {
    ul.columns {
        column-count: 2;
        list-style: disc;
    }
}

.twenty-five {
    display: block;
    font-size: 10px;
    opacity: 0.6;
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .twenty-five {
        font-size: 12px;
        opacity: 1;
    }
}

.category-qa .alternate-article-content:before {
    content: "Staff Reply";
    position: relative;
    font-size: 24px;
    margin: 1rem 0;
    display: block;
}

.knuckles-adventure {
    background: white;
}

.knuckles-adventure table {
    width: 100%;
}

.knuckles-adventure td {
    vertical-align: top;
}

@media screen and (max-width: 880px) {
    .blue-box.negative-margin .nav-item {
        width: auto;
    }
}

ul.store.dcw li {
    background-color: var(--shq_mint);
    color: black;
}

ul.store.dcw a {
    color: black;
}

/* ==========================================================================
   Unified menu
   --------------------------------------------------------------------------
   There is now ONE <header class="main-menu"> for every viewport (see
   template-parts/nav-header.php). The old `.menu-desktop` / `.menu-mobile`
   pair — two full headers, two wp_nav_menu() calls, duplicate IDs — is gone.

   Desktop: #single-nav sits inline inside .nav-mixed, exactly as before.
   Mobile (<=768px): that same #single-nav becomes a fixed panel that starts at
   the bottom edge of the bar. assets/js/theme.js measures the bar and writes
   its height to --shq-menu-top, then adds .menu-appear to #single-nav and
   .menu-open to <body>.

   Starting the panel BELOW the bar (instead of covering the whole viewport as
   the old .menu-mobile-listitems did) means the logo, the tools, the theme
   switcher flyout and the close button never have to out-stack it.
   ========================================================================== */

@media screen and (max-width: 768px) {
    .menu {
        padding: 0.5rem 0;
    }

    /* The bar sits above page content, and pins itself while the panel is open. */
    .main-menu .menu-section {
        position: relative;
        z-index: 1000;
        width: 100%;
    }

    body.menu-open .main-menu .menu-section {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    body.menu-open {
        overflow: hidden;
    }

    /* #single-nav becomes the drop-down panel. */
    .main-menu #single-nav {
        position: fixed;
        top: var(--shq-menu-top, 64px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 0 3rem;
        background-color: rgba(0, 0, 0, 0.72);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        transform: scale(0.98);
        transition:
            opacity 150ms ease,
            transform 150ms ease,
            visibility 150ms;
    }

    .main-menu #single-nav.menu-appear {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /*
       .single-nav ul goes flex-row at >=42em (672px), which overlaps this
       breakpoint. Force the panel's list back to a stacked column.
    */
    .main-menu #single-nav ul.navigation {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        width: 100%;
        margin-left: 0;
        padding: 0 1.1rem;
        text-align: left;
    }

    .main-menu #single-nav ul.navigation li {
        flex: none;
        width: 100%;
    }

    .main-menu .single-nav ul {
        margin-left: 0;
    }

    /* Bar contents stay above the panel and stay tappable. */
    .main-menu .main-logo,
    .main-menu #social-menu-mixed,
    .main-menu .navbar-toggler {
        position: relative;
        z-index: 1001;
    }

    .main-logo {
        position: relative;
    }

    .main-logo img {
        top: 0px;
        left: 5px;
    }

    .menu li a {
        font-size: 1.5rem;
    }

    /* ---------------------------------------------------------------
       Utility icon row (help, search, cart, tools, theme palette).
       Hidden by default on mobile; only revealed once the hamburger
       has been toggled open (body.menu-open, set by theme.js), instead
       of cluttering the bar before the person has asked for the menu.

       IMPORTANT: this stays display:flex at all times and is only
       toggled with opacity/visibility. Using display:none/flex here
       removes/re-adds the row from layout, which changes the bar's
       height right as the menu opens and makes the whole header jump.
       Keeping it in flow (just invisible) keeps the bar a fixed
       height in both states. flex-wrap is forced to nowrap for the
       same reason — wrapping to a second line would also grow the
       bar's height on open.
       --------------------------------------------------------------- */
    .main-menu #social-menu-mixed {
        flex-wrap: nowrap !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 150ms ease,
            visibility 150ms;
    }

    body.menu-open .main-menu #social-menu-mixed {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #social-menu-mixed li a,
    #social-menu-mixed .theme-switch-toggle {
        padding: 0.9em 0em 0.9em 0.5em;
    }

    /* Theme switcher is in the shared bar now, so it reaches mobile too. */
    #social-menu-mixed .theme-switch-menu {
        right: 0;
        left: auto;
        z-index: 1200;
    }

    /* ---------------------------------------------------------------
       Mobile menu items — card-style rows instead of bare text, so
       each destination reads as a tappable block with its own icon,
       accent color and depth.
       --------------------------------------------------------------- */
    .main-menu #single-nav ul.navigation li {
        position: relative;
        background-color: rgba(10, 10, 20, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 5px solid var(--shq_gold);
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        background-position: 1.25rem center !important;
        background-repeat: no-repeat !important;
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            transform 0.15s ease,
            box-shadow 0.2s ease;
    }

    .main-menu #single-nav ul.navigation li:nth-child(4n + 2) {
        border-left-color: var(--shq_red);
    }

    .main-menu #single-nav ul.navigation li:nth-child(4n + 3) {
        border-left-color: var(--shq_mint);
    }

    .main-menu #single-nav ul.navigation li:nth-child(4n + 4) {
        border-left-color: #8fc9b2;
    }

    .main-menu #single-nav ul.navigation li:hover,
    .main-menu #single-nav ul.navigation li:active,
    .main-menu #single-nav ul.navigation li.current-menu-item,
    .main-menu #single-nav ul.navigation li.current-page-ancestor {
        background-color: rgba(255, 204, 0, 0.14);
        border-color: var(--shq_gold);
        transform: translateX(4px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    }

    .main-menu #single-nav ul.navigation li a {
        display: block;
        font-family: "Exo 2", Arial, Verdana, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-size: 1.3rem;
        padding: 1em 1em 1em 4rem !important;
    }

    /*
       brightness(0) invert(1) flattens the whole row to white: the icon
       (a tinted SVG from /images/menu/svg/), the label, its dark
       text-shadow — which becomes the soft white glow — and the accent
       borders. The alpha channel survives, so the translucent card
       still reads against whatever is behind the blur.
    */
    .main-menu #single-nav.menu-appear ul.navigation li {
        background-size: 34px 38px;
        filter: brightness(0) invert(1);
        animation: shq-mobile-nav-item-in 0.35s ease both;
    }

    .main-menu #single-nav.menu-appear ul.navigation li:nth-child(1) {
        animation-delay: 0.05s;
    }
    .main-menu #single-nav.menu-appear ul.navigation li:nth-child(2) {
        animation-delay: 0.1s;
    }
    .main-menu #single-nav.menu-appear ul.navigation li:nth-child(3) {
        animation-delay: 0.15s;
    }
    .main-menu #single-nav.menu-appear ul.navigation li:nth-child(n + 4) {
        animation-delay: 0.2s;
    }

    .main-menu #single-nav.menu-appear ul.navigation li.comics.current-menu-item {
        background-size: 80px 73px;
    }

    @keyframes shq-mobile-nav-item-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .main-menu #single-nav.menu-appear ul.navigation li {
            animation: none;
        }
    }

    #main-menu-admin .input-group {
        flex-wrap: nowrap;
        gap: 1rem;
    }
}

.fixed {
    position: fixed !important;
}

.search-submit {
    color: white;
}

.store-link {
    border-radius: 4px;
}

@media screen and (max-width: 480px) {
    .dmbs-post-content .alignright,
    .dmbs-post-content .alignleft {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.modula-items * + * {
    margin-top: unset;
}

.newsletter {
    margin-bottom: 1rem !important;
}

.forum-link-wrapper {
    padding: 2.5rem 0;
    text-align: center;
}

/* 9.4 STYLES! */

.soundtracks {
    width: 100%;
}

.music-series {
    --shq_column_count: 6;
}

.soundtracks h3.widgettitle {
    margin: 1.5rem 0;
    font-size: 2.5rem;
}

.music-bar {
    padding: 0.5em;
    background-color: #333;
    border-radius: 5px;
    position: sticky;
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*flex-wrap: wrap;*/
    color: white;
    z-index: 2;
    top: 0;
}

.music-bar .lbl {
    left: 5px;
}

.music-bar a {
    color: white;
}

.music-bar button {
    background: none;
}
@media screen and (min-width: 768px) {
    .music-bar > div,
    .flex-music-toggle {
        display: flex;
        justify-content: space-around;
        /*align-items: center;*/
        flex-wrap: wrap;
        gap: 1rem;
    }
    .music-mobile-menu {
        width: 100%;
    }
    .music-bar-left {
        margin-right: auto;
    }
    .music-bar-right {
        margin-left: auto;
    }
}

.flex-music-toggle .form-group {
    display: flex;
}

.music-bar .musicsearch {
    width: 300px;
}

#musicsearch {
    margin: 0;
    background-color: black;
    border-radius: 4rem;
}

.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown ul.dcw li {
    min-width: 265px;
}

.dropbtn {
    color: white;
    border: none;
    cursor: pointer;
    /*padding: 1rem 0;*/
}

.games-list .dropdown-content {
    column-count: 3;
}

.dropdown-content a {
    color: white;
    text-decoration: none;
    display: block;
}

.music-bar .form-group {
    margin: 0;
}

@media (min-width: 769px) {
    .dropdown-content {
        position: absolute;
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 2;
        pointer-events: none;
    }
    .menu-dropdown:hover .dropdown-content {
        opacity: 1;
        display: block;
        padding-top: 20px;
        pointer-events: all;
    }
}

@media (max-width: 768px) {
    #musicsearch {
        width: 100%;
    }
    .games-list .dropdown-content {
        column-count: unset;
    }
    .music-bar-left > * {
        flex-basis: 100%;
    }

    .music-series {
        --shq_column_count: 2;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Music Mobile Menu*/
    .music-mobile-menu {
        display: block;
        position: fixed; /* Keep menu fixed on screen */
        top: 0;
        left: -500px;
        z-index: 100000;
        background-color: rgba(0, 0, 0, 0.7);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        height: 100dvh; /* 100% viewport height */
        /*overflow-y: scroll;*/
        opacity: 0;
        transition: all 0.25s ease-in-out;
    }

    .music-mobile-menu.inview {
        left: 0;
        width: 80%;
        opacity: 1;
        overflow: auto;
    }
    .music-mobile-menu.inview button {
        font-size: 1.5rem;
        font-weight: bold;
        padding: 0;
    }

    .music-mobile-menu.inview button:focus {
        outline: none;
        color: var(--shq_gold);
    }

    .music-bar-left {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-left: 10px;
        margin-top: 140px;
    }
    .music-bar-right {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-left: 10px;
        margin-top: 40px;
    }

    .flex-music-toggle {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .dropbtn:after {
        font-family: "Font Awesome 6 Free";
        content: "\f078";
        position: absolute;
        right: 5px;
    }

    .dropdown-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        margin-top: 0.75rem !important;
    }

    .menu-dropdown ul.dcw li {
        margin-right: 10px;
    }

    .music-mobile-menu.inview + #music-bar-toggler .fa-bars:before {
        content: "\f00d";
    }

    body.menu-open .navbar-toggler .fa-bars:before {
        content: "\f00d";
    }

    .music-bar .musicsearch {
        width: auto;
    }
}

@media (min-width: 769px) {
    .flex-music-toggle {
        margin-right: 0.5rem;
    }
}

#music-bar-toggler {
    color: white;
    background-color: transparent;
    border: 1px solid transparent;
    font-size: 25px;
}

#music-bar-toggler:focus {
    color: var(--shq_gold);
    outline: none;
}

.appear {
    transition: all;
    animation-name: msgappear;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

@keyframes msgappear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.form-horizontal * + * {
    margin-top: 0;
}

.parsedtext:empty {
    display: none;
}

.navbar-toggler:focus {
    color: var(--shq_gold);
    outline: none;
}

.main-categories .sidebar-term {
    /*background-color: var(--shq_red);*/
    background-color: color-mix(in oklab, var(--shq_red) 80%, black);
}

.main-categories .term-count {
    color: black;
    background-color: #fff;
    position: absolute;
    right: -11px;
    width: 65px;
    display: grid;
    place-items: center;
}

@media (min-width: 768px) {
    .grid-encyclopedia {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 1.5rem;
    }

    .sticky-sidebar {
        position: sticky;
        top: 0;
        z-index: 100;
        align-self: flex-start;
    }
}

.encyclopedia-profile {
    border-radius: 1rem;
    object-fit: cover;
    object-position: top;
    aspect-ratio: 1;
    max-width: 200px;
    margin: 1.5rem auto;
    display: block;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.23),
        0 3px 12px rgba(0, 0, 0, 0.16);
}

.details-key {
    display: block;
    font-weight: bold;
    color: var(--shq_blue);
    margin-bottom: 0.25rem !important;
    margin-top: 0;
}

.details-value {
    display: block;
    margin-bottom: 0.75rem !important;
    margin-top: 0;
    font-size: 90%;
}

.placeholder {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    text-align: center;
}

.blue-box label {
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.stats {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.stats table {
    margin: 1em auto;
}

.stats td:first-child {
    color: #72d2e5;
    font-weight: 600;
    text-align: right;
    vertical-align: top;
}

.stats td:last-child {
    text-align: left;
    padding-left: 0.5em;
}

.stats a {
    color: white;
}

.stats td {
    padding: 5px;
}

.game-details.card p {
    margin-top: 1rem;
}

#gameTableBody .blue-box * + * {
    margin-top: 1rem;
}

.mania-table td {
    padding: 0.5rem;
}

.mania-table th {
    padding: 0.5rem;
    background-color: #304f93;
    color: #fff;
    font-weight: bold;
}

.mania-table {
    padding: 0;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mania-table.notfixed {
    table-layout: initial;
}

.game-row:nth-of-type(4n-1) {
    background-color: #ffdb43;
}

.game-details {
    max-height: 0; /* Start hidden with no height */
    overflow: hidden; /* Hide overflowing content */
    transition:
        max-height 0.5s ease-out,
        opacity 0.5s ease-out; /* Smooth transition */
    opacity: 0; /* Start completely transparent */

    /* Keep display: none initially so it doesn't take up space for screen readers or tab navigation
       and so JavaScript can manage it. */
    display: none;
}
.game-details.expanded {
    max-height: 500px; /* A value larger than any possible content height */
    opacity: 1; /* Fully visible */
    display: table-row; /* Show as table row for proper layout during animation */
}

.game-title {
    cursor: pointer;
    font-weight: bold;
}

#games {
    padding: 0;
}

#games .boxart {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    max-width: 32px;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow:
        0 1.5px 4px rgba(0, 0, 0, 0.24),
        0 1.5px 6px rgba(0, 0, 0, 0.12);
}

#games .game-details .boxart {
    max-width: 64px;
}

.release-games {
    font-size: 0.8rem;
    margin-left: 40px;
    display: block;
}

.gallery img {
    max-width: 100%;
    margin: 1em auto;
    display: block;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.gallery img:hover {
    transform: scale(1.05); /* Slight scale on hover */
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.9); /* Black background with opacity */

    justify-items: center;
    align-content: center;
}

/* Modal Content (image) */
.modal-img {
    margin: auto;
    display: block;
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Add Animation */
.modal-img,
.close {
    animation-name: zoom;
    animation-duration: 0.4s;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.page-id-40004 .card h2 {
    cursor: pointer;
}

.page-id-40004 h2 span {
    display: block;
    font-size: 1rem;
    width: fit-content;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Optional: Rotate the chevron icon when active */
.card h2 i.fa-chevron-right {
    transition: transform 0.2s;
}

.card h2.active i.fa-chevron-right {
    transform: rotate(90deg);
}

/* Cursor pointer so users know it's clickable */
.card h2 {
    cursor: pointer;
}

.upcoming-item-image {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0) 70%);
    /*-webkit-mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0) 60%);*/
    position: absolute;
    right: -45px;
    bottom: -82px;
    z-index: -1;
    opacity: 0.85;
}

.store-link {
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease;
}

.store-link:hover {
    transform: translateY(-5px);
}

.blue-box h3 {
    font-size: 1.75rem;
}

.blue-box .author-social-links h3 {
    margin-bottom: 2rem;
}

.blue-box .author-social-links h4 {
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 1.25rem;
}

.article-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    align-items: start;
}

.article-grid h2 {
    font-size: 1.25rem;
}

.article-grid .fb-share {
    display: none;
}

.article-grid article {
    max-height: 100%;
}

@media (min-width: 768px) {
    .home .dmbs-main {
        display: block;
    }
}

/* Stronger, more cinematic overlay on article thumbnails */
.article-header {
    position: relative;
    overflow: hidden;
    border-radius: 6px; /* slightly more rounded than the current 4px */
}

.article-header img {
    transition: transform 0.4s ease;
    display: block;
    width: 100%;
}

.article-header:hover img {
    transform: scale(1.06);
}

/* Upgrade the text overlay gradient — more depth at the bottom */
.article-header .article-header-content {
    background: linear-gradient(to top, rgba(0, 0, 30, 0.92) 0%, rgba(0, 0, 20, 0.5) 50%, transparent 100%);
    padding: 1rem 0.85rem 0.75rem;
}

.article-grid article img,
.article-header img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

/* Add a colored left accent to differentiate sidebar items */
.dcw li,
.sidebar-term,
.mybb-thread {
    border-left: 3px solid var(--shq_gold);
    padding-left: 12px; /* compensate for the border */
}

/*

li:nth-of-type(2) {
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

li:nth-of-type(3) {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}

li:nth-of-type(4) {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}

li:nth-of-type(5) {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25);
}

li:nth-of-type(6) {
  box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3);
}

*/

/* ===== SKIN OVERRIDES (load after the base above) ===== */

/* Theme variables are declared in the :root block at the top of this file. */

/* ---------------------------------------------------------------------
 * Page canvas — deep blue gradient like the original
 * ------------------------------------------------------------------- */

body.dmbs-body,
body {
    /* Classic SHQ tiled "3D SA Sonic" background on a deep-navy fill */
    background-image: url("https://sonichq.net/nostalgia/shqclassic/images/backgrounds/3dsasonicbg.gif") !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    /* Page-level (outside the white content column) text is light, the way
       the original sat the sidebars directly on the dark background. */
    color: #000;
    font-family: Arial, Helvetica, Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 18px;
}

/* The retro layout was a centered fixed-width column */
.dmbs-content-wrapper {
    background: transparent;
    margin-top: -8px !important;
}

/* The center column itself is a solid white panel; the flattened rows
   inside it stack with thin white gutters, like the classic homepage. */
.home .dmbs-main {
    background: #ffffff;
    padding: 5px;
}

/* ---------------------------------------------------------------------
 * Top site banner / nav bar — solid royal blue, gold wordmark
 * ------------------------------------------------------------------- */

/*
.main-menu .menu-section,
.menu-section {
    background-color: #000000 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-image: url("assets/img/archive/top-left.webp"), url("assets/img/archive/top-right.webp");
    background-position: left, right;
    background-repeat: no-repeat;
    padding: 1rem 0;
}
*/

.main-menu .menu-section,
.menu-section {
    background-color: #000000 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /*background-image: url("assets/img/archive/top-left.webp"), url("assets/img/archive/top-right.webp");*/
    background-position: left, right;
    background-repeat: no-repeat;
    background-size: auto 85px;
    padding: 1rem 0;
}

/* ---------------------------------------------------------------------
 * LEFT SIDEBAR — the signature categorized link panel
 *
 * Recreates the classic "Sonic HQ: [links] / News: [links] / Info: …"
 * block: a dark-blue panel, gold category labels, bright-blue links
 * separated by pale pipes.
 * ------------------------------------------------------------------- */

.dmbs-widget-left,
#dmbs-sidebar-left,
.dmbs-sidebar-left,
aside.dmbs-widget-area-left {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 10px;
    box-shadow: none;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
}

@media (min-width: 769px) {
    .dmbs-left {
        order: 2;
    }
    .dmbs-main {
        padding-left: 0;
        padding-right: 0;
    }
}
/* Body copy in the sidebar is white, like the original */
.dmbs-widget-left p,
.dmbs-sidebar-left p,
.dmbs-widget-left li,
.dmbs-sidebar-left li {
    color: #ffffff;
}

/* Category heading rows (widget titles inside the left sidebar) */
.dmbs-widget-left .widgettitle,
.dmbs-widget-left h3,
.dmbs-sidebar-left .widgettitle {
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: normal;
    margin: 0.7em 0 0.25em;
    padding-bottom: 0;
    border-bottom: none;
    text-shadow: 1px 1px 0 #000;
}

/* The classic left sidebar stacked its items line-by-line, centered. */
.dmbs-widget-left ul,
.dmbs-sidebar-left ul {
    list-style: none;
    margin: 0 0 0.8em;
    padding: 0;
    line-height: 1.5;
    text-align: center;
}

.dmbs-widget-left ul li,
.dmbs-sidebar-left ul li {
    display: block;
    border-left: none;
    padding-left: 0;
}

.dmbs-widget-left ul li:not(:last-child)::after,
.dmbs-sidebar-left ul li:not(:last-child)::after {
    content: "";
}

.dmbs-widget-left a,
.dmbs-sidebar-left a {
    color: #5a78ff;
    text-decoration: none;
    font-weight: 700;
}

.dmbs-widget-left a:hover,
.dmbs-sidebar-left a:hover {
    color: var(--shq_accent_red);
    text-decoration: underline;
}

/* Upcoming / release widgets in the sidebar: flatten the modern card
   styling back to simple bordered rows in the archive spirit. */
.upcoming,
.dmbs-widget-left .card {
    border-radius: 4px !important;
    backdrop-filter: none !important;
}

/*
.upcoming-item {
    background: linear-gradient(180deg, #0a1f8f, #001a6b) !important;
    border-bottom: 1px solid rgba(255, 204, 0, 0.4) !important;
}
*/
.upcoming-item h4 a {
    color: #fff !important;
}

.upcoming-item:hover {
    background: #16299c !important;
}

/* ---------------------------------------------------------------------
 * RIGHT SIDEBAR — also sits directly on the tiled background
 * (hit counter, banners, search box, guestbook + vote links)
 * ------------------------------------------------------------------- */

.dmbs-widget-right,
#dmbs-sidebar-right,
.dmbs-sidebar-right,
aside.dmbs-widget-area-right {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #e8ebff;
    font-size: 12px;
}

.dmbs-widget-right .widgettitle,
.dmbs-sidebar-right .widgettitle,
.dmbs-widget-right h3,
.dmbs-sidebar-right h3 {
    color: #ffffff !important;
    font-size: 0.95rem;
    font-weight: 800;
    height: auto;
    text-shadow: 1px 1px 0 #000;
    border: none;
}

/* The base widgettitle draws a skewed black shape + tall height; remove it
   inside both sidebars so headings are plain white text like the original. */
.dmbs-widget-left h3.widgettitle::after,
.dmbs-sidebar-left h3.widgettitle::after,
.dmbs-widget-right h3.widgettitle::after,
.dmbs-sidebar-right h3.widgettitle::after,
.dmbs-widget-left .widgettitle::after,
.dmbs-sidebar-left .widgettitle::after,
.dmbs-widget-right .widgettitle::after,
.dmbs-sidebar-right .widgettitle::after {
    display: none !important;
}

.dmbs-widget-left h3.widgettitle,
.dmbs-sidebar-left h3.widgettitle,
.dmbs-widget-right h3.widgettitle,
.dmbs-sidebar-right h3.widgettitle {
    height: auto;
    font-size: 0.95rem;
    text-indent: 0;
}

.dmbs-widget-right a,
.dmbs-sidebar-right a {
    color: #5a78ff;
    font-weight: 700;
    text-decoration: none;
}

.dmbs-widget-right a:hover,
.dmbs-sidebar-right a:hover {
    color: var(--shq_accent_red);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Theme switcher — palette icon pinned to the far right of the social
 * menu. Hovering (or focusing / tapping) the icon reveals the theme
 * options in a small flyout. Markup: template-parts/nav-header.php,
 * behaviour: assets/js/admin-css-toggle.js.
 * ------------------------------------------------------------------- */

.css-theme-switch {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto; /* keep it furthest to the right */
}

.theme-switch-toggle {
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 0.8em 0.75em; /* match .social-menu li a */
    cursor: pointer;
}

.theme-switch-menu {
    position: absolute;
    display: block !important;
    top: 100%;
    right: 0;
    z-index: 1200;
    min-width: 10.5rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: rgba(0, 0, 0, 0.8);
    color: var(--shq_text);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    /* The 0.3s delay is a hover-intent grace period: moving the pointer
       diagonally from the palette icon down to an option can briefly leave
       the switcher (the menu extends left of the icon), and without the
       delay the menu would start hiding before it could be reached. */
    transition:
        opacity 0.15s ease 0.3s,
        transform 0.15s ease 0.3s,
        visibility 0.15s 0.3s;
}

/* Reveal on hover, keyboard focus, or tap (JS toggles .open) */
.css-theme-switch:hover .theme-switch-menu,
.css-theme-switch:focus-within .theme-switch-menu,
.css-theme-switch.open .theme-switch-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s; /* open immediately; only closing is delayed */
}

.theme-switch-menu li {
    margin: 0;
    padding: 0;
}

.theme-switch-option {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 5px;
    padding: 0.45rem 0.75rem;
    text-align: left;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--shq_text);
    cursor: pointer;
}

.theme-switch-option:hover,
.theme-switch-option:focus-visible {
    background: var(--shq_blue);
    color: var(--shq_white);
}

/* Check mark on the active theme */
.theme-switch-option[aria-checked="true"]::after {
    content: "\2713";
    float: right;
    margin-left: 0.75rem;
}

.theme-switch-toggle:focus-visible {
    outline: 2px solid var(--shq_gold);
    outline-offset: 2px;
}

/* Archive flavor — classic squared-off panel with gold accents */
.theme-switch-toggle:hover,
.css-theme-switch.open .theme-switch-toggle,
.css-theme-switch:focus-within .theme-switch-toggle {
    color: var(--shq_accent_gold);
}

.theme-switch-menu {
    border-radius: 2px;
    border-color: var(--shq_border);
}

.theme-switch-option {
    border-radius: 2px;
    color: var(--shq_link);
}

.theme-switch-option:hover,
.theme-switch-option:focus-visible {
    background: var(--shq_header_bar);
    color: var(--shq_accent_gold);
}

.theme-switch-option[aria-checked="true"] {
    color: var(--shq_accent_gold);
    font-weight: 700;
}

.pageSubtitle.pageSubtitle--lead,
.blastApp .tagBrowser__label {
    color: black !important;
}