/*
 Theme Name:   Sonic HQ — Generations
 Description:   A bold classic-era skin inspired by the Sonic "pop" art:
                electric blue, racing red, vivid yellow and black with
                star accents. Built to PRESERVE the default (Modern)
                theme's layout and component structure — it only
                recolors and adds light pop-art flourishes, so the page
                keeps working exactly as Modern does.
 Version:      11.6

 Palette:  blue #1a3cff  red #ff1420  yellow #ffe800  black #0a0a0a
*/

/* ============================================================
   SHQ THEME VARIABLES — GENERATIONS 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: #ff1420;
    --shq_blue: #1a3cff;
    --shq_gold: #ffe800;
    --shq_box: #222;
    --shq_mint: #18bce0;
    --shq_orange: #ff1420;
    --shq_green: rgba(0, 51, 0, 1);

    /* Extended palette */
    --shq_blue_deep: #0a1fcc;
    --shq_red_deep: #cc0d18;
    --shq_black: #0a0a0a;
    --shq_ink: #0a0a14;
    --shq_white: #ffffff;
    --shq_accent_gold: #ffe800;
    --shq_accent_red: #ff1420;

    /* Surfaces & text */
    --shq_bg_top: #1a3cff;
    --shq_bg_bottom: #0a1fcc;
    --shq_panel: #ffffff;
    --shq_panel_alt: #f2f4ff;
    --shq_header_bar: #1a3cff;
    --shq_header_bar_2: #0a1fcc;
    --shq_border: #0a0a0a;
    --shq_text: #0a0a14;
    --shq_sidebar_bg: #0a0a14;
    --shq_sidebar_cat: #ffe800;

    /* Links */
    --shq_link: #1a3cff;
    --shq_link_visited: #0a1fcc;
    --shq_link_hover: #ff1420;

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

    /* Zigzag divider (width of one period = the frequency knob;
       smaller = more teeth, larger = fewer) */
    --shq_zigzag_period: 55px;
    --shq_zigzag_mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'><polygon points='0,0.2 1,0.6 2,0.2 2,0.38 1,0.78 0,0.38' fill='%23000'/></svg>");

    /* Form control accents */
    accent-color: var(--shq_red);
    caret-color: var(--shq_red);

    /* Existing zigzag tokens stay as-is. If you ever want a
     dependency-free fallback, this is a pure-CSS zigzag:
     --shq_zigzag_mask:
       conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg); */

    /* Heading tokens — override these per skin, not the rules below. */
    --shq-head-ink: #fff;
    --shq-head-wake-a: rgba(255, 214, 74, 0.88); /* ring gold  */
    --shq-head-wake-b: rgba(255, 122, 24, 0.45); /* hot orange */
    --shq-head-tick: #ffd64a;
    --shq-head-rule: rgba(255, 255, 255, 0.55);
    --shq-head-tilt: -1deg; /* rises away from content */
    --shq-head-wake-width: clamp(18rem, 58%, 52rem);
}

.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 ===== */

@font-face {
    font-family: SonicGenerations;
    src: url("assets/fonts/FOT-Seurat Pro B.otf");
}

/* 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;
    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,
picture {
    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-main {
    position: relative;
    z-index: 1;
}

.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;
    opacity: 0.75;
}

/* Sonic HQ */

body,
body.dmbs-body {
    color: white;
    margin: 0 auto;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    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%;
}

@media (min-width: 1600px) {
    .container {
        max-width: 1440px !important;
    }
    .dmbs-content-wrapper .row {
        gap: 3rem;
        flex-wrap: nowrap;
    }

    .page-template-music .row,
    .music_type-template-default .row {
        gap: 1rem;
        flex-wrap: wrap;
    }
}

@media (min-width: 768px) {
    .dmbs-content-wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    .col-md-9 {
        flex: 1 1 75%;
    }

    .col-md-3 {
        flex: 1 1 25%;
    }
    /*
    .row.mainFixedArea .col-md-9 {
        flex: 0 0 75%;
    }

    .row.mainFixedArea .col-md-3 {
        flex: 0 0 25%;
    }
        */
}

.box {
    background-color: color-mix(in oklab, var(--shq_blue) 60%, black);
    color: white;
    margin-bottom: 10px;
    border-radius: 8px;
    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: color-mix(in oklab, var(--shq_blue) 60%, black);
    color: white;
    margin-bottom: 10px;
    border-radius: 8px;
    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;
}

.dmbs-main .card {
    background: linear-gradient(180deg, color-mix(in oklab, var(--shq_blue) 60%, black) 0%, color-mix(in oklab, var(--shq_blue) 50%, black) 100%);
}

.blue-box a:hover {
    color: white;
}

.dmbs-main .card.warning {
    background: 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:after {
    content: "";
    transform: skewX(135deg);
    background-color: black;
    height: 25px;
    display: block;
    position: relative;
    top: -22px;
    z-index: -1;
}

h2.widgettitle {
    font-weight: bold;
    color: white;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    font-family: "SonicGenerations", Arial, Verdana, Sans-serif;
    height: 45px;
    font-size: 1.9rem;
    text-indent: 5px;
}

h3.widgettitle {
    position: relative; /* was missing — the old ::after was */
    isolation: isolate; /* positioning against a random ancestor */
    display: block;
    margin: 2.5rem 0 1.25rem;
    padding: 0.3em 0 0.55em;
    scroll-margin-top: 5rem;

    font-family: "SonicGenerations", Arial, Verdana, sans-serif;
    font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.015em;
    text-wrap: balance;
    color: var(--shq-head-ink);

    --shq-head-wake-a: rgba(120, 210, 255, 0.8);
    --shq-head-wake-b: rgba(40, 110, 255, 0.4);
    --shq-head-tick: #6fd0ff;

    /* Hard shadow for edge definition + soft halo to lift it off busy art. */
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.55),
        0 0 3px rgba(0, 0, 0, 0.85),
        0 0 22px rgba(0, 0, 0, 0.45);
}

/* ---- The wake -------------------------------------------------------
   Two masks composited: the zigzag gives the shape, the linear gradient
   erases it toward the right. Masking the fade (instead of fading the
   colour with opacity) keeps the left end fully saturated — the old
   `opacity: .25` on a white gradient was what turned it grey. */
h3.widgettitle::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.4em;
    top: 50%;
    width: var(--shq-head-wake-width);
    height: 2.4em;
    transform: translateY(-54%) rotate(var(--shq-head-tilt));
    transform-origin: 0 50%;
    pointer-events: none;

    background: linear-gradient(96deg, var(--shq-head-wake-a) 0%, var(--shq-head-wake-b) 42%, transparent 88%);

    -webkit-mask:
        var(--shq_zigzag_mask) repeat-x left center / var(--shq_zigzag_period) 100%,
        linear-gradient(to right, #000 0 34%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask:
        var(--shq_zigzag_mask) repeat-x left center / var(--shq_zigzag_period) 100%,
        linear-gradient(to right, #000 0 34%, transparent 100%);
    mask-composite: intersect;
}

/* ---- The baseline -------------------------------------------------
   A chunky tick at the text origin plus a hairline that fades out.
   Both layers live in one pseudo via per-layer background-size. */
h3.widgettitle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    pointer-events: none;

    background-image: linear-gradient(var(--shq-head-tick), var(--shq-head-tick)), linear-gradient(90deg, var(--shq-head-rule), transparent 72%);
    background-size:
        2.75rem 100%,
        100% 2px;
    background-position:
        0 100%,
        0 100%;
    background-repeat: no-repeat;
}

/* ---- Optional: one-shot gleam on scroll-in ------------------------
   Add class shq-head--live to opt a heading in. */
@media (prefers-reduced-motion: no-preference) {
    h3.widgettitle.shq-head--live::before {
        animation: shq-wake-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

@keyframes shq-wake-in {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* ---- Small screens ------------------------------------------------- */
@media (max-width: 640px) {
    h3.widgettitle {
        --shq-head-wake-width: 88%;
        --shq-head-tilt: -0.75deg;
        margin-top: 1.75rem;
    }
}

h3.widgettitle:first-child {
    margin-top: 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: color-mix(in oklab, var(--shq_red) 80%, 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;
}

/* --- Search field inside the drop-panel ------------------------------
   Was a transparent box with a 3px white underline, which on the new
   glass sheet had nothing to sit against. It is now a pill with its own
   surface, a magnifier baked into the left padding gutter (the widget's
   real submit button is hidden — the form is Enter-to-search), and a
   focus ring in the skin's gold. */

#main-menu-admin .search-field {
    width: 100%;
    max-width: 560px;
    padding: 0.72em 1.2em 0.72em 3rem;

    color: #fff;
    font-size: 1.05rem;
    line-height: 1.4;

    background-color: rgba(255, 255, 255, 0.07);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1.05rem center;
    background-size: 18px 18px;

    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

#main-menu-admin .search-field::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* .form-control:focus elsewhere in this file strips the border and
   shadow outright; these id-scoped rules outrank it. The gold ring is
   drawn with box-shadow rather than `outline` so it follows the pill's
   border-radius. */
#main-menu-admin .search-field:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe800' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");
    border-color: var(--shq_gold);
    box-shadow: 0 0 0 4px rgba(255, 232, 0, 0.18);
}

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

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

/* The widget markup is a bare <li> (see the before_widget wrapper in
   inc/sidebars.php), so it carries a marker and list padding by default. */
#main-menu-admin .widget {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Only renders if a title is ever set on the search widget; without this
   it would inherit the big blue-barred .widgettitle treatment. */
#main-menu-admin .widgettitle {
    margin: 0 0 0.6rem;
    padding: 0;
    background: none;
    color: var(--shq_gold);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

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

/* The parent theme's searchform.php wraps the field in a Bootstrap
   .input-group, but the WordPress core search widget does not. Centre at
   the form level too, so the pill lands in the middle either way. */
#main-menu-admin .search-form,
#main-menu-admin form[role="search"] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#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;
    border-radius: 4px;
    padding: 10px !important;
    transition: all 0.25s ease-in-out;
    z-index: 1;
    position: relative;
    overflow: hidden;
    line-height: 1;
}

.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;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

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: #c3cdff;
    /* 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: transparent;
    --shq-badge-fill: 20%;
    --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,
.card hr {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.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 {
    position: relative;
    display: block;
}

.main-logo img {
    height: 85px;
    width: 117px;
    position: absolute;
    transition: transform 1s ease-in-out;
    top: -24px;
}

.main-logo img:hover {
    transform: scale(1.2);
}

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

/* Menu */

/* Base styles that apply to all menus */
.menu-section {
    position: relative;
    z-index: 1;
}

/*
.main-menu {
    overflow-x: hidden;
}
    */

/* ==========================================================================
   Search drop-panel (.menu-section-admin)
   --------------------------------------------------------------------------
   Revealed when the magnifier in the tools row is hovered (or tapped
   under 880px) — assets/js/theme.js toggles `.visible` on the wrapping
   #main-menu-admin, which is the element that actually moves. The panel
   inside just paints.

   It used to be a flat red slab with a soft grey drop shadow, which read
   as a leftover Bootstrap navbar rather than part of this skin. Now it is
   a dark glass sheet — the same blur/translucency language as the mobile
   nav panel — with a gold zigzag skirt along its lower edge, reusing the
   footer's zigzag art flipped so the teeth point down into the page.
   ========================================================================== */

.menu-section-admin {
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 1;
    padding: 1rem 0 1.15rem;

    /* Translucent so the backdrop-filter below has something to do — this
       is the same glass recipe as the mobile nav panel. The blue wash is
       laid over it so the sheet picks up the skin's key colour instead of
       reading as neutral grey. */
    background-color: rgba(10, 10, 20, 0.82);
    background-image: radial-gradient(130% 190% at 50% 0%, rgba(26, 60, 255, 0.3) 0%, transparent 62%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);

    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 22px 45px -18px rgba(0, 0, 0, 0.85);
}

/* Without blur, 0.72 alpha over this skin's star-and-stripe body art is
   not readable, so go nearly opaque instead. Scoped to the no-support
   case so it does not flatten the glass everywhere else. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .menu-section-admin {
        background-color: color-mix(in oklab, var(--shq_ink) 94%, black);
    }
}

/* Gold zigzag skirt. Same artwork as .main-footer::before, flipped on Y
   so the solid edge meets the panel and the teeth point away from it. */
.menu-section-admin::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    background-image: url("assets/img/generations/zigzag-yellow.svg");
    background-repeat: repeat-x;
    background-size: 60px 18px;
    transform: scaleY(-1);
    pointer-events: none;
}

.hidden-up {
    position: relative;
    z-index: 100;
    transform: translateY(-200px);
    opacity: 0;
    /* Nothing should be clickable while the panel is parked off-screen —
       previously it stayed hit-testable and could swallow clicks aimed at
       the bar underneath. */
    pointer-events: none;
    transition:
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms ease;
}

.hidden-up.visible {
    transform: translateY(-20px);
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .hidden-up,
    .hidden-up.visible {
        transition: opacity 120ms ease;
    }
}

@media screen and (max-width: 768px) {
    .menu-section-admin {
        top: 30px;
    }
    /* Only the offset differs on phones; the reveal timing is inherited
       from the base .hidden-up rule. The `transition: all 0.5s` that used
       to sit here re-enabled easing on every property — including the
       backdrop-filter and box-shadow the panel now carries. */
    .hidden-up.visible {
        transform: translateY(-88px);
    }
}

.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;
}

/* 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=100,100,100,1") 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=100,100,100,1") 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=100,100,100,1") 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=100,100,100,1") 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;
}

.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: #000;
    background-color: #ffe800;
    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: rgba(0, 0, 0, 0.3);
    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 {
        margin-top: 2em;
        margin-bottom: 2em;
        text-align: center;
        position: relative;
        z-index: 1;
        pointer-events: none;
    }
    /*
    .h1-bg:after {
        content: "";
        background-image: url("/images/retrotitlebar/rotate.php");
        position: absolute;
        right: 20px;
        top: 0;
        width: 150px;
        height: 35px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: -1;
    }*/

    .h1-bg h1 {
        --fill: #ffffff;
        --inner: #1b2f7a; /* navy */
        --outer: #ffd400; /* yellow */
        --inner-w: 0.18em;
        --outer-w: 0.34em;

        position: relative;
        display: inline-block;
        font-family: "SonicGenerations", Arial, Verdana, Sans-serif;
        font-weight: 800;
        font-size: 3rem;

        color: var(--fill);
        -webkit-text-stroke: var(--inner-w) var(--inner);
        text-stroke: var(--inner-w) var(--inner);
        paint-order: stroke fill;
        filter: drop-shadow(0 0.045em 0.02em rgba(0, 0, 0, 0.45));
    }

    .h1-bg h1::before {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        z-index: -1; /* behind the navy layer */
        color: var(--outer);
        -webkit-text-stroke: var(--outer-w) var(--outer);
        paint-order: stroke fill;
    }

    .col-md-9.dmbs-main h3.widgettitle {
        display: block !important;
        position: relative;
        z-index: 1;
    }

    .is-poststat-private .h1-bg h1::before {
        color: var(--shq_red);
        -webkit-text-stroke: var(--outer-w) var(--shq_red);
    }
}

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

    .h1-bg:before {
        content: url("/images/layout/shadow-media-bg.svg");
        position: absolute;
        left: 50px;
        width: 300px;
        top: -44px;
        z-index: -1;
    }
    .h1-bg h1 {
        font-weight: bold;
        font-family: "SonicGenerations", 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: "SonicGenerations", 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: "SonicGenerations", 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;
}

.form-group.row {
    flex-wrap: wrap;
    gap: 1rem;
}

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: #111;
    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: flex;
    justify-content: center;
    align-items: center;
}

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: #111;
    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;
}

/*
 * Button LOOK lives in section 7 ("chunky pop controls") near the end of
 * this file, base rules and variants together. What used to sit here — a
 * navy plate, a white hover, and a nine-selector :focus/:active pile —
 * was almost entirely dead, because section 7 overrides it with
 * !important. The one part that still won was
 * `.dmbs-body .btn-primary:hover { color: black !important }`, whose
 * higher specificity beat section 7's hover and left black text sitting
 * on the red hover plate.
 *
 * Nothing replaces it here on purpose: single-class variants like
 * `.btn-error` MUST come after the base `.btn` rule or the base wins the
 * later-rule tiebreak and repaints them, which is exactly the bug that
 * made every error button gold.
 */

.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: #5ee08a;
}

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

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

.article-header.has-featured {
    background-color: #385bae90;
    min-height: 225px;
}

.category-qa .article-header.has-featured {
    min-height: auto;
}

.search .category-qa .article-header.has-featured {
    min-height: 225px;
}

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

.article-header h2,
h2.dmbs-post-title {
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

#coverBG:before,
.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%, var(--shq_blue) 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%, var(--shq_blue), white);*/
    overflow: hidden;
    /*background-color: var(--shq_blue);
    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);
}

.upcoming .upcoming-item.card {
    /*background-color: transparent !important;*/
    background-color: color-mix(in oklab, var(--shq_red) 80%, black);
    box-shadow: none !important;
    color: white;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.25);
}

@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.15;
    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: #fff;
}

.upcoming-item.outnow {
    background-color: var(--shq_green) !important;
}

.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 .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: 1.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;
}

.music-series {
    margin-bottom: 2rem;
}

/*
.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: #63b3ff;
}

.badge.format-mid {
    --shq-badge-accent: #5ef08a;
}

.badge.lightblue {
    --shq-badge-accent: #8aa4ff;
}

.badge.white {
    --shq-badge-accent: #ffffff;
}

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

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

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

.badge.editorial {
    --shq-badge-accent: #5ee0c0;
}

.badge.review {
    --shq-badge-accent: #5ed6f0;
}

.badge.comic {
    --shq-badge-accent: #ff9a5c;
}

.badge.qa {
    --shq-badge-accent: #ffc447;
}

.badge.delayed {
    --shq-badge-accent: #ffe066;
}

.badge.error {
    --shq-badge-accent: #f76464;
}

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

.badge.error404 {
    --shq-badge-accent: #b8bcd0;
}

.badge.gray {
    --shq-badge-accent: #b8bcd0;
}

.badge.badge-issuenumber {
    --shq-badge-accent: #8aa4ff;
}

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: -40px;
        left: -18px;
    }

    .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, 232, 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: "SonicGenerations", Arial, Verdana, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-size: 1.3rem;
        padding: 1em 1em 1em 4rem !important;
    }

    .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: #111;
}

.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%;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

@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. */

/* ---------------------------------------------------------------------
 * 1. Page background — electric blue with a subtle star-field.
 *    (The default theme leaves the body color to the skin.)
 * ------------------------------------------------------------------- */

body.dmbs-body,
body {
    background-color: var(--shq_blue) !important;
    /*background-color: var(--shq_black) !important;*/
    background-image: url("assets/img/generations/star.svg") !important;
    background-repeat: no-repeat;
    background-position: right -40px bottom -40px !important;
    background-size: min(420px, 45vw) auto !important;
    background-attachment: fixed !important;
}

/* ---------------------------------------------------------------------
 * 2. Top nav — black bar, yellow underline, red/yellow hovers.
 *    Only colors change; the default layout/spacing is untouched.
 * ------------------------------------------------------------------- */

.main-menu .menu-section,
.menu-section {
    background-color: var(--shq_blue_deep) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    position: relative;
    overflow-x: clip;
}

/* Black pinking-shear zigzag hanging below the nav bar, tilted slightly
   so it sits at an angle like the art's blue/black boundary.

   Anchored with `bottom: 0` (instead of a `top: -770%` hack) so the
   zigzag's edge always lands right at the bottom of the bar no matter
   how tall .menu-section ends up being. The old percentage-based top
   offset was tuned for one specific bar height, and broke — leaving a
   huge black gap over the page — the moment the bar's height changed
   (e.g. the icon row above being hidden until the menu opens). */
.main-menu .menu-section::after,
.menu-section::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 0;
    top: -200px;
    height: 810px;
    background-image: url("assets/img/generations/zigzag-black.svg");
    background-repeat: repeat-x;
    background-size: 117px 805px;
    background-position: left top;
    transform: rotate(-2deg);
    transform-origin: left bottom;
    pointer-events: none;
    z-index: -1;
    filter: drop-shadow(8px 0px 0px rgba(0, 0, 0, 0.5));
}

@media (max-width: 768px) {
    .main-menu .menu-section::after,
    .menu-section::after {
        content: "";
        position: absolute;
        left: -2%;
        right: -2%;
        bottom: 0;
        top: -633px;
        height: 808px;
        background-image: url("assets/img/generations/zigzag-black.svg");
        background-repeat: repeat-x;
        /* background-size: 117px 805px; */
        background-position: left top;
        transform: rotate(0deg);
        transform-origin: left bottom;
        pointer-events: none;
        z-index: -1;
        filter: drop-shadow(8px 0px 0px rgba(0, 0, 0, 0.5));
    }
}

.main-menu .navigation a,
.menu-section a {
    color: var(--shq_white) !important;
    /*text-transform: uppercase;*/
    font-weight: 800;
}

.main-menu .navigation a:hover,
.menu-section a:hover {
    color: var(--shq_gold) !important;
}

/* Theme switcher styles live at the bottom of this file
   (shared markup: palette icon + hover flyout). */

/* ---------------------------------------------------------------------
 * 4. Article headers — KEEP Modern's featured-image blend + scrim,
 *    just swap the tint colors. This is the key fix: do NOT replace
 *    the background image with a flat color.
 * ------------------------------------------------------------------- */

/* The blend tint over featured images */

/*
.article-header.has-featured {
    background-color: #1a3cffaa !important;
}
*/
/* Sticky (featured) posts read red, matching the art's red blocks */
.sticky .article-header,
.single .sticky .blue-box {
    background-color: var(--shq_red) !important;
}

/* The bottom-up gradient scrim that keeps titles legible */
#coverBG:before,
.article-header:before {
    background: linear-gradient(to bottom, transparent 5%, var(--shq_blue_deep) 95%) !important;
}
.sticky .article-header:before {
    background: linear-gradient(to bottom, transparent 5%, var(--shq_red) 95%) !important;
}

/* Non-featured blue boxes: solid blue (inherited from --shq_blue),
   but give recent-post rows that lack an image a touch more contrast. */
.article-header h2,
h2.dmbs-post-title,
.blue-box .dmbs-post-title {
    color: var(--shq_white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Yellow speed-streak accent under titles (replaces the jagged PNG,
   which points at a server-side script that may not exist) */
.blue-box.jagged:after {
    background-image: none !important;
    background: repeating-linear-gradient(90deg, var(--shq_gold) 0 22px, transparent 22px 30px) !important;
    height: 5px !important;
    top: 100% !important;
}
.sticky .blue-box.jagged:after {
    background-image: none !important;
}

/* ---------------------------------------------------------------------
 * 5. Cards — keep Modern's rounded card + shadow, add a crisp outline
 *    and a slightly punchier shadow so they read as pop "stickers".
 * ------------------------------------------------------------------- */

.dmbs-main .card,
.dmbs-post.card,
article.dmbs-post,
.box {
    /*border: 2px solid var(--shq_black) !important;
    box-shadow: 4px 4px 0 rgba(10, 10, 10, 0.85) !important;*/
    backdrop-filter: none !important;
}

.card a {
    color: lightblue;
}

/* In-content links */
.dmbs-post-content a:not(.btn),
.card-body a:not(.btn) {
    /*color: var(--shq_blue_deep);*/
    font-weight: 700;

    text-decoration: underline;
    text-decoration-color: #fff;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.dmbs-post-content a:not(.btn):hover,
.card-body a:not(.btn):hover {
    color: var(--shq_red);
    text-decoration-color: var(--shq_red);
}

.dmbs-post-meta-header2,
.dmbs-post-meta {
    color: var(--shq_gold) !important;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
 * 6. Left sidebar — entire column wrapped in a RED jagged panel.
 *    The PANEL is tilted slightly for the pop-art look, but the
 *    content (titles, dates, cards) stays upright and readable.
 * ------------------------------------------------------------------- */

.dmbs-left {
    position: relative;
    /*padding: 0px 22px 22px 14px !important;*/
    color: #fff;
    /*z-index: 1;*/
    /* NOTE: no rotate here — the column stays level so its contents do too */
}

@media (max-width: 768px) {
    .dmbs-left {
        overflow-x: clip;
    }
}

/* The red panel itself, behind the sidebar content. A solid red fill
   plus a vertical zigzag tooth strip aligned to its right edge, so the
   panel ends in pinking-shear teeth where it meets the black center.
   Only THIS layer is tilted, so the angle is purely decorative. */
.dmbs-left::before {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -4000px;
    height: calc(100% + 200px);
    right: 4px; /* was 7px — tips moved ~3px inward, shift box right to match */
    background:
        url("assets/img/generations/zigzag-red-vertical-v2.svg") right top / 32px 82px repeat-y,
        linear-gradient(to right, color-mix(in oklab, var(--shq_red) 90%, white) 80%, var(--shq_red) 98%) left top / calc(100% - 21px) 100% no-repeat;
    /*linear-gradient(135deg, var(--mania-blue, #385cae), var(--shq-blue-deep, #2f447f)) left repeat-y;*/
    transform: rotate(-1.75deg);
    transform-origin: top left;
    z-index: -1;
    /*background-image: radial-gradient(120% 160% at 0% 0%, rgba(107, 203, 176, 0.35), transparent 55%), radial-gradient(140% 180% at 100% 100%, rgba(47, 68, 127, 0.9), transparent 60%), linear-gradient(135deg, var(--mania-blue, #385cae), var(--shq-blue-deep, #2f447f));*/
    filter: drop-shadow(rgba(0, 0, 0, 0.35) 8px 6px 4px);
}

@media (max-width: 768px) {
    .dmbs-left::before {
        content: "";
        position: absolute;
        top: -461px;
        left: 85px;
        bottom: -10px;
        width: 500px;
        height: 730px;
        right: 4px;
        background:
            url("assets/img/generations/zigzag-red-vertical-v2.svg") right top / 32px 82px repeat-y,
            linear-gradient(to right, color-mix(in oklab, var(--shq_red) 90%, white) 80%, var(--shq_red) 98%) left top / calc(100% - 21px) 100% no-repeat;
        transform: rotate(90deg) translateX(-10%);
        transform-origin: -2%;
    }
}

/* Sidebar content sits above the panel and stays upright */
.dmbs-left > * {
    position: relative;
    z-index: 1;
}

/* Recolor widget titles inside the red panel: black chip on yellow */
.dmbs-left h3.widgettitle,
.dmbs-widget-left h3.widgettitle {
    color: #fff !important;
}

.dmbs-left a,
.dmbs-widget-left a {
    color: #fff;
    font-weight: 700;
    line-height: 1;
}
.dmbs-left a:hover,
.dmbs-widget-left a:hover {
    color: var(--shq_gold);
}

/* ---------------------------------------------------------------------
 * 7. Buttons / badges / pagination — chunky pop controls.
 *
 * One recipe, driven by custom properties, so a variant is a three-line
 * override instead of another !important pile-up (see the overrides up
 * in the Buttons section: .active, .btn-error):
 *
 *   --shq-btn-face / --shq-btn-face-hi   plate colour (bottom / top of
 *                                        the vertical gradient)
 *   --shq-btn-ink                        label colour
 *   --shq-btn-edge                       outline + the offset plate
 *   --shq-btn-hover-*                    the same three, on hover
 *   --shq-btn-drop                       offset-shadow distance
 *
 * The plate sits on a hard, un-blurred shadow of the outline colour, so
 * it reads as a physical chunk rather than a rectangle with a blur under
 * it. Hover moves the plate up-left by exactly the amount the shadow
 * grows, so the shadow's far corner stays pinned and only the button
 * appears to rise; :active drives it back down past its resting point.
 * ------------------------------------------------------------------- */

.btn,
.btn-primary,
.btn-main {
    --shq-btn-face: var(--shq_gold);
    --shq-btn-face-hi: #fff36b;
    --shq-btn-ink: var(--shq_ink);
    --shq-btn-edge: var(--shq_black);
    --shq-btn-hover-face: var(--shq_red);
    --shq-btn-hover-hi: #ff4a53;
    --shq-btn-hover-ink: #ffffff;
    --shq-btn-drop: 3px;

    position: relative;
    isolation: isolate;
    /* Clips the hover streak below. Offset shadows are drawn outside the
       border box and are NOT affected by overflow, so the plate keeps
       its drop. */
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    vertical-align: middle;

    padding: 0.55em 1.4em;
    border: 2px solid var(--shq-btn-edge) !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, var(--shq-btn-face-hi) 0%, var(--shq-btn-face) 58%) !important;
    color: var(--shq-btn-ink) !important;

    font-family: "SonicGenerations", Arial, Verdana, sans-serif;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    text-decoration: none !important;
    text-shadow: none;

    box-shadow:
        var(--shq-btn-drop) var(--shq-btn-drop) 0 var(--shq-btn-edge),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.14) !important;

    transition:
        transform 130ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 130ms cubic-bezier(0.22, 1, 0.36, 1),
        background 150ms ease,
        color 150ms ease;
}

/* --- Variants -------------------------------------------------------
   These MUST live after the base `.btn` rule above. `.btn-error` is a
   single class, same specificity as `.btn`, so whichever comes last
   wins — put it first and the base rule repaints it gold, which is what
   used to happen to every delete button on the site. */

/* Selected / toggled (games filters, .btn-main groups). Blue is the
   theme's third colour and is otherwise unused on buttons, so a selected
   button can't be mistaken for a default (gold) or hovered (red) one. */
.btn.active,
.btn-main.active,
.btn-primary.active,
.filter-btn.active {
    --shq-btn-face: var(--shq_blue);
    --shq-btn-face-hi: #4a68ff;
    --shq-btn-ink: #ffffff;
}

/* Destructive. */
.btn-error {
    --shq-btn-face: var(--shq_red);
    --shq-btn-face-hi: #ff5a63;
    --shq-btn-ink: #ffffff;
    --shq-btn-hover-face: var(--shq_red_deep);
    --shq-btn-hover-hi: #e01018;
    --shq-btn-hover-ink: #ffffff;
}

/* Speed streak. Sits above the plate and below the label (negative
   z-index inside the button's own stacking context, hence `isolation`),
   and only moves on hover — it is parked off the left edge otherwise.
   ::after is unavailable: it is force-hidden further down to kill the
   old cutting-edge shine. */
.btn::before,
.btn-primary::before,
.btn-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
    transform: translateX(-120%);
    /* Deliberately NOT the cubic-bezier used for the plate lift. That
       curve front-loads almost everything into the first ~20% of its
       duration, which for a travelling highlight means it crosses the
       button in about 120ms and then sits parked off the right edge for
       the rest — i.e. invisible. A symmetric curve spends the time on
       the part you can actually see. */
    transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover,
.btn-primary:hover,
.btn-main:hover,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-main:focus-visible {
    background: linear-gradient(180deg, var(--shq-btn-hover-hi) 0%, var(--shq-btn-hover-face) 58%) !important;
    color: var(--shq-btn-hover-ink) !important;
    transform: translate(calc(var(--shq-btn-drop) * -0.66), calc(var(--shq-btn-drop) * -0.66));
    box-shadow:
        calc(var(--shq-btn-drop) * 1.66) calc(var(--shq-btn-drop) * 1.66) 0 var(--shq-btn-edge),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.18) !important;
}

.btn:hover::before,
.btn-primary:hover::before,
.btn-main:hover::before {
    transform: translateX(120%);
}

.btn:active,
.btn-primary:active,
.btn-main:active {
    transform: translate(1px, 1px);
    box-shadow:
        0 0 0 var(--shq-btn-edge),
        inset 0 2px 4px rgba(0, 0, 0, 0.32) !important;
}

/* Keyboard focus needs a ring that survives on both the gold plate and
   the red hover plate, so it goes outside the border rather than on it. */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-main:focus-visible {
    outline: 3px solid var(--shq_blue);
    outline-offset: 3px;
}

.btn:disabled,
.btn.disabled,
.btn-primary:disabled,
.btn-main:disabled {
    --shq-btn-face: #b9b9c4;
    --shq-btn-face-hi: #cfcfd8;
    --shq-btn-ink: #5a5a66;
    --shq-btn-edge: #6f6f7a;
    pointer-events: none;
    opacity: 0.75;
    transform: none;
}

/* Size ramp — the base padding is em-based, so these only need to move
   the font size, but the plate depth should scale with the button. */
.btn-sm {
    --shq-btn-drop: 2px;
    padding: 0.45em 1em;
    letter-spacing: 0.03em;
}

.btn-lg {
    --shq-btn-drop: 4px;
    padding: 0.7em 1.9em;
    font-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-primary,
    .btn-main {
        transition:
            background 150ms ease,
            color 150ms ease;
    }
    .btn:hover,
    .btn-primary:hover,
    .btn-main:hover,
    .btn:active,
    .btn-primary:active,
    .btn-main:active {
        transform: none;
    }
    .btn::before,
    .btn-primary::before,
    .btn-main::before {
        display: none;
    }
}

.pagination {
    justify-content: center;
}

/*
.pagination .page-numbers,
.nav-links .page-numbers {
    background: #fff;
    color: var(--shq_ink);
    border: 2px solid var(--shq_black);
    border-radius: 3px;
    font-weight: 800;
    box-shadow: 2px 2px 0 var(--shq_black);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
    background: var(--shq_red);
    color: #fff;
}
    */

/* ---------------------------------------------------------------------
 * 8. Footer
 * ------------------------------------------------------------------- */

.main-footer {
    background: var(--shq_black);
    color: #fff;
    border-top: none;
    position: relative;
}

/* Yellow pinking-shear zigzag sitting on top of the footer */
.main-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 26px;
    background-image: url("assets/img/generations/zigzag-yellow.svg");
    background-repeat: repeat-x;
    background-size: 60px 26px;
    pointer-events: none;
    z-index: 2;
}
.main-footer a {
    color: black;
}
.main-footer a:hover {
    color: var(--shq_red);
}

/* ---------------------------------------------------------------------
 * 9. Calm the cutting-edge layer so the flat pop look stays clean.
 * ------------------------------------------------------------------- */

.article-grid .card::before,
.youtube-video-item::before {
    display: none !important;
} /* no conic ring */
.btn-primary::after {
    display: none !important;
} /* no shine sweep */

::selection {
    background: var(--shq_gold);
    color: var(--shq_ink);
}
@media (prefers-reduced-motion: reduce) {
    body {
        background-attachment: scroll !important;
    }
}

/*
*,
*::before,
*::after {
    box-sizing: border-box;
    outline: 2px solid lime;
}
*/

/* ---------------------------------------------------------------------
 * 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: inherit;
    line-height: 1;
    padding: 0.8em 0.75em; /* match .social-menu li a */
    cursor: pointer;
}

.theme-switch-menu {
    display: block !important;
    position: absolute;
    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: 2px solid var(--shq_border);
    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;
}

/* Generations flavor — bold pop-art panel (matches the old dropdown) */
.theme-switch-toggle:hover,
.css-theme-switch.open .theme-switch-toggle,
.css-theme-switch:focus-within .theme-switch-toggle {
    color: var(--shq_gold);
}

.theme-switch-menu {
    border: 2px solid var(--shq_black);
    border-radius: 4px;
    box-shadow: 3px 3px 0 var(--shq_black);
}

.theme-switch-option {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--shq_ink);
}

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

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

.blue-box {
    background-image: radial-gradient(120% 160% at 0% 0%, rgba(107, 203, 176, 0.35), transparent 55%), radial-gradient(140% 180% at 100% 100%, rgba(47, 68, 127, 0.9), transparent 60%), linear-gradient(135deg, var(--shq_blue, #385cae), var(--shq_blue_deep, #2f447f));
}

.upcoming-date i {
    border-radius: 50%;
    background-color: var(--shq_gold);
    color: black;
    padding: 0.35rem;
    margin-right: 0.5rem;
    text-shadow: none;
    font-size: 1rem;
}

.upcoming-date i.fa-book-open {
    background-color: var(--shq_blue);
    color: white;
}

.upcoming-date i.fa-film {
    background-color: var(--shq_gold);
    color: black;
}

.featured-carousel:not(.slick-initialized) .featured-slide:not(:first-child) {
    display: none;
}
.featured-carousel .slick-slide {
    height: auto;
}
.featured-carousel .slick-track {
    display: flex;
    align-items: stretch;
}

.comic-header {
    min-height: 225px;
}

.search-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.search-field {
    caret-color: #fff;
}

.featured-carousel {
    z-index: 1;
}

@media (max-width: 768px) {
    .featured-carousel {
        overflow-x: auto;
    }
}

/* ============================================================
   SHQ GENERATIONS SKIN — MODERNIZED ARTICLE CARD
   Drop this block anywhere AFTER the existing rules in
   style_generations.css (or in a child-theme stylesheet loaded
   after it). Only the news-post card is touched.

   This skin is already dark, high-contrast, pop-art (electric
   blue / racing red / vivid yellow on near-black), with a custom
   "SonicGenerations" display font and a zigzag mask token
   (--shq_zigzag_mask) baked into :root. The Archive skin's pass
   leaned into rounded panels and gold seams; this one leans into
   what Generations already does well — hard color blocks, a
   speed-line energy, and the zigzag motif — instead of importing
   the Archive look.

   What changed & why:
   1. Card: kept flat-black surface but added a bright edge glow
      and slightly larger radius so it reads as a "screen" rather
      than a plain rectangle.
   2. Header: flat blue fill → diagonal blue→red duotone (pulled
      straight from the palette). Instead of a hard seam (or a
      zigzag edge) where it meets the featured image, that same
      duotone bleeds down over the top of the photo and fades to
      nothing, so the header dissolves into the image.
   3. Title: switched fully onto the "SonicGenerations" display
      font already loaded by the theme (previously only partly
      applied to this element), bigger and with a hard yellow
      drop shadow for that pop-art poster feel.
   4. Meta row: badges become hard-edged (not pill) chips with a
      1px black keyline, matching the poster-sticker look used by
      badges elsewhere in this skin, with clearer spacing.
   5. Featured image: subtle blue glow instead of a plain drop
      shadow, gentle hover-zoom.
   6. Body copy: sized up, spaced out, links get the thick
      white-underline-to-red-hover treatment already defined
      elsewhere in this skin, applied consistently here too.
   7. Post views + comments: post-views becomes a small yellow-on-
      black stat chip; comments get a zigzag divider instead of a
      plain rule line.
   ============================================================ */

/* ---------- 1. Card shell ---------- */
.dmbs-post.card {
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
    padding: 0;
}

.single .dmbs-post.card {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* ---------- 2. Header / "blue-box" title bar ---------- */
.dmbs-post .blue-box.jagged.negative-margin {
    background: linear-gradient(115deg, var(--shq_blue) 0%, var(--shq_blue) 45%, var(--shq_red) 100%) cover / center;
    padding: 1.35rem 1.5rem 1.35rem !important;
    margin: 0 !important;
    position: relative;
    border-radius: 0;
}

/* ---------- 3. Title ---------- */
h2.dmbs-post-title {
    font-family: "SonicGenerations", Arial, Verdana, sans-serif;
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.55),
        0 0 18px rgba(255, 232, 0, 0.35);
    margin-bottom: 0.6rem;
}

.article-grid h2.dmbs-post-title {
    font-size: 1.25rem;
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.55),
        0 0 12px rgba(255, 232, 0, 0.35);
}

/* ---------- 4. Meta row: timestamp, author, badges ---------- */
.dmbs-post-meta-header2 .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.article-timestamp {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    margin-right: auto;
}

.article-timestamp strong a {
    color: var(--shq_gold);
    font-weight: 700;
    text-decoration: none;
}

.article-timestamp strong a:hover {
    text-decoration: underline;
}

.fb-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Badges → hard-edged poster-sticker chips, not soft pills */
.dmbs-post .badge {
    display: inline-flex !important;
    align-items: center;
    padding: 0.3em 0.75em;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.dmbs-post .badge.lightblue {
    background-color: #000;
    color: #7fd4ff;
    border-color: #7fd4ff;
}

.dmbs-post .badge.white {
    background: var(--shq_gold);
    color: #0a0a14;
    border-color: #0a0a14;
}

.fb-share .fa-pencil-alt {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.fb-share .fa-pencil-alt:hover {
    color: var(--shq_gold);
    transform: scale(1.15);
}

/* ---------- 5. Featured image ---------- */
.dmbs-post .dmbs-post-featured-image {
    margin: 0 !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 28px -6px rgba(26, 60, 255, 0.55);
}

/* Bleeds the header's blue→red duotone down over the top of the
   image, fading to nothing — the header doesn't cut off, it
   dissolves into the photo instead of handing off at a hard seam. */
.dmbs-post .dmbs-post-featured-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(115deg, var(--shq_blue) 0%, var(--shq_blue) 45%, var(--shq_red) 100%);
    -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent);
    z-index: 2;
    pointer-events: none;
}

.dmbs-post .dmbs-post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease;
    object-fit: cover;
    object-position: top;
    aspect-ratio: 16/10;
}

.dmbs-post .dmbs-post-featured-image:hover img {
    transform: scale(1.035);
}

/* ---------- 6. Body copy ---------- */
.dmbs-post .card-body.dmbs-post-content {
    /*padding: 1.85rem 1.75rem 1rem;
    color: #f0f1ff;
    font-size: 1.05rem;
    line-height: 1.75;*/

    padding: 0.5em;
}

.dmbs-post .card-body.dmbs-post-content p {
    margin-bottom: 1.25em;
}

.dmbs-post .card-body.dmbs-post-content p:last-of-type {
    margin-bottom: 0;
}

.dmbs-post .card-body.dmbs-post-content strong {
    color: var(--shq_gold);
}

/* Reuses the skin's existing thick-underline link treatment,
   just made consistent specifically for this card */
.dmbs-post .card-body.dmbs-post-content a:not(.btn) {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--shq_gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.dmbs-post .card-body.dmbs-post-content a:not(.btn):hover {
    color: var(--shq_red);
    text-decoration-color: var(--shq_red);
}

/* ---------- 7. Post-views stat chip ---------- */
.dmbs-post .post-views {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0.5rem 1.75rem 1.5rem;
    padding: 0.3em 0.8em;
    background: #000;
    border: 1px solid rgba(255, 232, 0, 0.3);
    border-radius: 3px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.dmbs-post .post-views .post-views-icon {
    color: var(--shq_gold);
}

.dmbs-post .post-views .post-views-count {
    font-weight: 800;
    color: var(--shq_gold);
}

/* ---------- 8. Comments footer panel ---------- */
.dmbs-post footer.comments-footer {
    margin: 0;
    padding: 0 1.75rem 1.75rem;
}

.dmbs-post .dmbs-comments {
    margin: 0 1.75rem 1.75rem;
    padding-top: 1.5rem;
    position: relative;
}

/* Zigzag divider instead of a plain rule, echoing the header edge */
.dmbs-post .dmbs-comments::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(255, 255, 255, 0.25);
    -webkit-mask: var(--shq_zigzag_mask) repeat-x left center / calc(var(--shq_zigzag_period) * 0.7) 100%;
    mask: var(--shq_zigzag_mask) repeat-x left center / calc(var(--shq_zigzag_period) * 0.7) 100%;
}

@media (max-width: 600px) {
    .dmbs-post .blue-box.jagged.negative-margin {
        padding: 1.1rem 1.1rem 1.3rem !important;
    }
    .dmbs-post .card-body.dmbs-post-content,
    .dmbs-post footer.comments-footer,
    .dmbs-post .dmbs-comments {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    .dmbs-post .post-views {
        margin-left: 1.1rem;
    }
    h2.dmbs-post-title {
        font-size: 1.5rem;
    }
}

.white-filter {
    filter: brightness(0) invert(1);
}