/*
Theme Name: VoidCrawler - Development
Theme URI: https://darkmatter.seaverns.com/
Author: K0NxT3D
Author URI: https://darkmatter.seaverns.com/
Description: A custom DarkMatter Software WordPress theme inspired by the VoidCrawler command interface. Built from scratch for development and testing.
Version: 0.0.3
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: voidcrawler
Tags: dark, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ========================================================================
   VOIDCRAWLER WORDPRESS THEME
   Development 0.0.3
   ======================================================================== */

:root {
    color-scheme: dark;

    --vc-void: #020304;
    --vc-panel: #090b0e;
    --vc-panel-2: #050608;
    --vc-panel-3: #0d1014;

    --vc-red: #d10b18;
    --vc-red-rgb: 209, 11, 24;
    --vc-hot: #ff2638;
    --vc-hot-rgb: 255, 38, 56;
    --vc-deep: #5b0008;
    --vc-title-shadow: #510007;
    --vc-code: #ff6a77;
    --vc-button-dark: #79030c;
    --vc-button-hover-dark: #9a0712;

    --vc-steel: #c8ccd1;
    --vc-text: #e5e7ea;
    --vc-muted: #8c939b;
    --vc-line: rgba(var(--vc-red-rgb), .38);
    --vc-soft-line: rgba(255, 255, 255, .065);

    --vc-mono: "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
    --vc-sans: Arial, Helvetica, sans-serif;

    --vc-radius: 8px;
    --vc-shell: 1500px;
    --vc-sidebar: 320px;
}

/* ========================================================================
   USER COLOR THEMES
   ========================================================================

   User-selectable palettes change COLOR VARIABLES ONLY.
   They intentionally do not alter layout, spacing, typography, templates,
   widget structure, or responsive behavior.

   The selected palette is stored locally in the visitor's browser by
   assets/js/theme-switcher.js. "Void Red" remains the canonical default.
   ======================================================================== */

html[data-vc-theme="void-red"] {
    --vc-red: #d10b18;
    --vc-red-rgb: 209, 11, 24;
    --vc-hot: #ff2638;
    --vc-hot-rgb: 255, 38, 56;
    --vc-deep: #5b0008;
    --vc-title-shadow: #510007;
    --vc-code: #ff6a77;
    --vc-button-dark: #79030c;
    --vc-button-hover-dark: #9a0712;
}

html[data-vc-theme="terminal-green"] {
    --vc-red: #3ba85b;
    --vc-red-rgb: 59, 168, 91;
    --vc-hot: #73ff9a;
    --vc-hot-rgb: 115, 255, 154;
    --vc-deep: #14391f;
    --vc-title-shadow: #0c2c16;
    --vc-code: #9cffb7;
    --vc-button-dark: #205f35;
    --vc-button-hover-dark: #2f8149;
}

html[data-vc-theme="cobalt-blue"] {
    --vc-red: #3978b8;
    --vc-red-rgb: 57, 120, 184;
    --vc-hot: #67b7ff;
    --vc-hot-rgb: 103, 183, 255;
    --vc-deep: #16395d;
    --vc-title-shadow: #102d49;
    --vc-code: #91ccff;
    --vc-button-dark: #24537f;
    --vc-button-hover-dark: #326fa6;
}

html[data-vc-theme="amber"] {
    --vc-red: #c88a18;
    --vc-red-rgb: 200, 138, 24;
    --vc-hot: #ffc861;
    --vc-hot-rgb: 255, 200, 97;
    --vc-deep: #593809;
    --vc-title-shadow: #412805;
    --vc-code: #ffda93;
    --vc-button-dark: #79510d;
    --vc-button-hover-dark: #a36e12;
}

html[data-vc-theme="monochrome"] {
    --vc-red: #89929c;
    --vc-red-rgb: 137, 146, 156;
    --vc-hot: #d8dee6;
    --vc-hot-rgb: 216, 222, 230;
    --vc-deep: #3a4149;
    --vc-title-shadow: #242a30;
    --vc-code: #f0f3f6;
    --vc-button-dark: #555f69;
    --vc-button-hover-dark: #707c88;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #000;
    scrollbar-color: var(--vc-deep) #050607;
    scrollbar-width: thin;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--vc-text);
    background:
        radial-gradient(circle at 50% -15%, rgba(var(--vc-red-rgb), .15), transparent 35rem),
        linear-gradient(180deg, #020304 0%, #060709 52%, #010203 100%);
    font: 16px/1.6 var(--vc-sans);
    letter-spacing: .015em;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 48px 48px;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .11;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 3px,
        rgba(255, 255, 255, .018) 4px
    );
}

::selection {
    color: #fff;
    background: var(--vc-deep);
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: var(--vc-hot);
    text-decoration-color: rgba(var(--vc-hot-rgb), .45);
    text-underline-offset: .18em;
}

a:hover,
a:focus {
    color: #fff;
    text-decoration: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--vc-hot);
    outline-offset: 2px;
}

button,
input,
select,
textarea {
    font: inherit;
}

hr {
    height: 1px;
    margin: 2rem 0;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--vc-line), transparent);
}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    z-index: 100000;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 10px 14px;
    clip: auto !important;
    color: #fff;
    background: #000;
    border: 1px solid var(--vc-hot);
}

/* ========================================================================
   APPLICATION SHELL
   ======================================================================== */

.vc-shell {
    position: relative;
    width: min(var(--vc-shell), calc(100% - 28px));
    margin: 14px auto;
    overflow: hidden;
    border: 1px solid rgba(var(--vc-hot-rgb), .48);
    border-radius: 10px;
    background: rgba(3, 4, 6, .95);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .78),
        0 0 34px rgba(var(--vc-red-rgb), .18),
        inset 0 0 0 1px rgba(255, 255, 255, .035);
}

/* ========================================================================
   HEADER
   ======================================================================== */

.vc-header {
    position: relative;
    display: flex;
    min-height: 178px;
    padding: 26px 30px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid rgba(var(--vc-red-rgb), .35);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .94), rgba(0, 0, 0, .52) 55%, rgba(0, 0, 0, .88)),
        radial-gradient(circle at 78% 35%, rgba(var(--vc-red-rgb), .18), transparent 24rem),
        #08090b;
    box-shadow: inset 0 -60px 80px rgba(0, 0, 0, .66);
}

.vc-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 18px;
}

.vc-custom-logo-link {
    flex: 0 0 auto;
}

.vc-custom-logo-link img,
.custom-logo {
    display: block;
    width: auto;
    max-width: 84px;
    max-height: 84px;
}

.vc-brand-mark {
    display: grid;
    min-width: 56px;
    height: 44px;
    padding: 0 10px;
    place-items: center;
    border: 1px solid var(--vc-hot);
    border-radius: 3px;
    color: var(--vc-hot);
    background: rgba(0, 0, 0, .76);
    font: 900 13px var(--vc-mono);
    letter-spacing: .08em;
    box-shadow:
        inset 0 0 18px rgba(var(--vc-red-rgb), .14),
        0 0 14px rgba(var(--vc-hot-rgb), .18);
}

.vc-brand-copy {
    min-width: 0;
}

.vc-brand-kicker {
    margin: 0 0 5px;
    color: var(--vc-hot);
    font: 900 10px var(--vc-mono);
    letter-spacing: .24em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(var(--vc-hot-rgb), .55);
}

.vc-site-title {
    margin: 0;
    color: #f2f2f2;
    font: 900 clamp(30px, 4.5vw, 58px)/.98 var(--vc-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow:
        0 3px 0 var(--vc-title-shadow),
        0 0 24px rgba(var(--vc-red-rgb), .52);
}

.vc-site-title a {
    color: inherit;
    text-decoration: none !important;
}

.vc-site-description {
    margin: 10px 0 0;
    color: #c7cbd0;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.vc-node-state {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    color: #abb1b8;
    font: 10px var(--vc-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vc-node-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vc-hot);
    box-shadow: 0 0 10px var(--vc-hot);
    animation: vcPulse 2.2s ease-in-out infinite;
}

/* ========================================================================
   MENU BAR / NAVIGATION
   ======================================================================== */

.vc-menubar {
    display: flex;
    min-height: 48px;
    padding: 7px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--vc-line);
    color: #777f88;
    background: #050608;
    font: 10px var(--vc-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.vc-terminal-label {
    flex: 0 0 auto;
    color: var(--vc-hot);
}

/* User-side color palette selector. Changes colors only; no layout theme swap. */
.vc-theme-control {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    gap: 7px;
    color: #777f88;
    font: 9px var(--vc-mono);
    letter-spacing: .12em;
    white-space: nowrap;
}

.vc-theme-control label {
    color: var(--vc-hot);
    font: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
}

.vc-theme-control select {
    width: auto;
    min-width: 132px;
    padding: 6px 28px 6px 9px;
    border: 1px solid rgba(var(--vc-hot-rgb), .28);
    border-radius: 3px;
    color: #d9dce0;
    background: #090b0e;
    font: 9px var(--vc-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.vc-theme-control select:hover,
.vc-theme-control select:focus {
    border-color: var(--vc-hot);
}

.vc-navigation {
    min-width: 0;
}

.vc-navigation ul {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    list-style: none;
}

.vc-navigation li {
    position: relative;
}

.vc-navigation a {
    display: block;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #adb3ba;
    text-decoration: none;
}

.vc-navigation a:hover,
.vc-navigation a:focus,
.vc-navigation .current-menu-item > a,
.vc-navigation .current_page_item > a {
    color: #fff;
    border-color: rgba(var(--vc-hot-rgb), .24);
    background: rgba(var(--vc-red-rgb), .10);
}

.vc-navigation .sub-menu {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    display: none;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--vc-line);
    background: #050608;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .7);
}

.vc-navigation li:hover > .sub-menu,
.vc-navigation li:focus-within > .sub-menu {
    display: block;
}

.vc-navigation .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

.vc-menu-toggle {
    display: none;
    padding: 8px 10px;
    border: 1px solid rgba(var(--vc-hot-rgb), .35);
    border-radius: 3px;
    color: var(--vc-hot);
    background: #090b0e;
    font: 700 10px var(--vc-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
}

/* ========================================================================
   MAIN LAYOUT
   ======================================================================== */

.vc-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--vc-sidebar);
    min-height: 650px;
}

.vc-main {
    min-width: 0;
    background: linear-gradient(180deg, #090b0e, #040506);
}

.vc-sidebar {
    min-width: 0;
    border-left: 1px solid var(--vc-line);
    background: linear-gradient(180deg, #0b0d10, #050608);
}

.vc-pane-title {
    display: flex;
    min-height: 46px;
    padding: 11px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--vc-soft-line);
    color: var(--vc-steel);
    background: rgba(0, 0, 0, .18);
    font: 900 11px var(--vc-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.vc-pane-title::before {
    content: "◆";
    color: var(--vc-hot);
    margin-right: 8px;
}

.vc-pane-code {
    color: var(--vc-hot);
}

.vc-content-area {
    padding: clamp(18px, 3vw, 34px);
}

.vc-content-width {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* ========================================================================
   DEVELOPMENT COMPATIBILITY: LEGACY .panel CLASS
   ========================================================================

   IMPORTANT - KEEP THIS BLOCK THROUGHOUT VOIDCRAWLER DEVELOPMENT.

   Existing WordPress page content created under MechPress uses the generic
   .panel class extensively. That legacy content must continue to render
   correctly while VoidCrawler is being developed.

   .vc-panel = canonical VoidCrawler class for ALL new content.
   .panel    = legacy MechPress compatibility alias.

   DO NOT remove .panel support during development.
   DO NOT rename existing database content merely to satisfy the theme.
   Both selectors intentionally share the exact same design below.

   Revisit this compatibility layer only after legacy WordPress content has
   been intentionally migrated to .vc-panel and verified.
   ======================================================================== */

.vc-panel,
.panel {
    position: relative;
    margin: 0 0 24px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-left: 3px solid var(--vc-red);
    border-radius: 4px;
    background: rgba(5, 6, 8, .82);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .02),
        0 12px 28px rgba(0, 0, 0, .16);
}

.vc-panel > :first-child,
.panel > :first-child {
    margin-top: 0;
}

.vc-panel > :last-child,
.panel > :last-child {
    margin-bottom: 0;
}

/* ========================================================================
   CONTENT / POSTS / PAGES
   ======================================================================== */

.vc-entry,
.vc-card {
    position: relative;
    margin: 0 0 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .07);
    border-left: 3px solid var(--vc-red);
    border-radius: 4px;
    background: rgba(5, 6, 8, .82);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.vc-entry-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background: linear-gradient(90deg, rgba(var(--vc-red-rgb), .10), transparent 70%);
}

.vc-entry-title,
.page-title,
.archive-title {
    margin: 0;
    color: #f2f3f4;
    font: 900 clamp(24px, 3vw, 38px)/1.08 var(--vc-sans);
    letter-spacing: .025em;
}

.vc-entry-title a {
    color: inherit;
    text-decoration: none;
}

.vc-entry-title a:hover {
    color: var(--vc-hot);
}

.vc-entry-meta {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: #7d858e;
    font: 10px var(--vc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vc-entry-meta strong,
.vc-entry-meta a {
    color: var(--vc-hot);
}

.vc-entry-content,
.vc-entry-summary {
    padding: 20px;
}

.vc-entry-content > :first-child,
.vc-entry-summary > :first-child {
    margin-top: 0;
}

.vc-entry-content > :last-child,
.vc-entry-summary > :last-child {
    margin-bottom: 0;
}

.vc-entry-content h1,
.vc-entry-content h2,
.vc-entry-content h3,
.vc-entry-content h4,
.vc-entry-content h5,
.vc-entry-content h6 {
    color: #f0f1f2;
    line-height: 1.2;
}

.vc-entry-content h2,
.vc-entry-content h3 {
    padding-bottom: .4em;
    border-bottom: 1px solid rgba(var(--vc-red-rgb), .22);
}

.vc-entry-content p,
.vc-entry-content li {
    color: #c8cdd2;
}

.vc-entry-content blockquote {
    margin: 1.5rem 0;
    padding: 14px 18px;
    border-left: 3px solid var(--vc-hot);
    color: #cdd1d5;
    background: rgba(var(--vc-red-rgb), .06);
}

.vc-entry-content pre,
.vc-entry-content code,
.vc-entry-content kbd,
.vc-entry-content samp {
    font-family: var(--vc-mono);
}

.vc-entry-content pre {
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(var(--vc-hot-rgb), .18);
    border-radius: 3px;
    color: #d7dbe0;
    background: #030405;
}

.vc-entry-content code {
    color: var(--vc-code);
}

.vc-entry-content table {
    width: 100%;
    border-collapse: collapse;
}

.vc-entry-content th,
.vc-entry-content td {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    text-align: left;
}

.vc-entry-content th {
    color: #fff;
    background: rgba(var(--vc-red-rgb), .12);
}

.vc-featured-image {
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(var(--vc-hot-rgb), .18);
}

.vc-featured-image img {
    display: block;
    width: 100%;
}

.vc-entry-footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, .055);
    color: #707780;
    background: #050608;
    font: 10px var(--vc-mono);
}

.vc-entry-footer a {
    color: var(--vc-hot);
}

/* WordPress alignments */
.alignleft {
    float: left;
    margin: .5rem 1.5rem 1rem 0;
}

.alignright {
    float: right;
    margin: .5rem 0 1rem 1.5rem;
}

.aligncenter {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.alignwide {
    width: min(1180px, 100%);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
}

.alignfull {
    width: 100%;
    max-width: none;
}

.wp-caption,
.gallery-caption {
    max-width: 100%;
    color: var(--vc-muted);
    font-size: 12px;
}

.sticky {
    border-left-color: var(--vc-hot);
    box-shadow: inset 4px 0 0 rgba(var(--vc-hot-rgb), .35);
}

.bypostauthor {
    outline: 1px solid rgba(var(--vc-hot-rgb), .14);
}

/* ========================================================================
   PAGINATION
   ======================================================================== */

.navigation.pagination,
.post-navigation,
.posts-navigation {
    margin: 24px 0;
    font: 11px var(--vc-mono);
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.page-numbers,
.nav-previous a,
.nav-next a {
    display: inline-block;
    padding: 8px 10px;
    border: 1px solid rgba(var(--vc-hot-rgb), .22);
    border-radius: 3px;
    color: #c3c8ce;
    background: #050608;
    text-decoration: none;
}

.page-numbers.current,
.page-numbers:hover,
.nav-previous a:hover,
.nav-next a:hover {
    color: #fff;
    border-color: var(--vc-hot);
    background: rgba(var(--vc-red-rgb), .10);
}

/* ========================================================================
   SIDEBAR / WIDGETS
   ======================================================================== */

.vc-sidebar-inner {
    padding: 14px;
}

.widget {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 4px;
    background: rgba(4, 5, 6, .72);
}

.widget-title,
.widget_block h2,
.widget_block h3 {
    margin: 0 0 12px;
    color: var(--vc-steel);
    font: 900 11px var(--vc-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.widget-title::before,
.widget_block h2::before,
.widget_block h3::before {
    content: "[NODE] ";
    color: var(--vc-hot);
}

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

.widget li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.widget li:last-child {
    border-bottom: 0;
}

.widget a {
    color: #b9bec4;
    text-decoration: none;
}

.widget a:hover {
    color: var(--vc-hot);
}

/* ========================================================================
   VOIDCRAWLER PREVIEW GENERATOR - WIDGET INTEGRATION
   ========================================================================

   DEVELOPMENT INTEGRATION - KEEP THIS BLOCK.

   The DarkMatter VoidCrawler Preview Generator plugin owns the .dm-vcp-*
   markup and its normal frontend card design. These rules apply ONLY when
   a generated preview card is placed inside a WordPress widget/sidebar.

   The plugin's standard card is intentionally wide and horizontal. The
   VoidCrawler sidebar is narrow, so widget cards are converted to a compact
   vertical node without changing Preview Generator cards used in normal
   page/post content.

   DO NOT rename the .dm-vcp-* classes. They belong to the plugin.
   DO NOT remove this integration block while the plugin is supported by the
   VoidCrawler theme.
   ======================================================================== */

.widget .dm-vcp-card {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid rgba(var(--vc-hot-rgb), .20);
    border-left: 3px solid var(--vc-red);
    border-radius: 4px;
    color: var(--vc-text);
    background: linear-gradient(180deg, #090b0e, #040506);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.widget .dm-vcp-card__media {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid rgba(var(--vc-hot-rgb), .18);
    background: #030405;
}

.widget .dm-vcp-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.widget .dm-vcp-card__body {
    display: flex;
    min-width: 0;
    padding: 14px;
    flex-direction: column;
    justify-content: flex-start;
}

.widget .dm-vcp-card__eyebrow {
    margin: 0 0 7px;
    color: var(--vc-hot);
    font: 900 9px/1.4 var(--vc-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.widget .dm-vcp-card__title {
    margin: 0 0 10px;
    color: #f2f3f4;
    font: 900 15px/1.25 var(--vc-sans);
    letter-spacing: .015em;
}

.widget .dm-vcp-card__description {
    margin: 0 0 14px;
    color: #aeb4bb;
    font-size: 12px;
    line-height: 1.55;
}

.widget .dm-vcp-card__link {
    display: inline-flex;
    width: 100%;
    margin-top: auto;
    padding: 9px 10px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid rgba(var(--vc-hot-rgb), .28);
    border-radius: 3px;
    color: #d9dce0;
    background: rgba(var(--vc-red-rgb), .08);
    font: 800 9px/1.3 var(--vc-mono);
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.widget .dm-vcp-card__link:hover,
.widget .dm-vcp-card__link:focus {
    color: #fff;
    border-color: var(--vc-hot);
    background: rgba(var(--vc-red-rgb), .16);
}

.widget .dm-vcp-card--text-only {
    grid-template-columns: 1fr;
}

/* ========================================================================
   FORMS / SEARCH
   ======================================================================== */

.search-form,
.vc-search-form {
    display: flex;
    gap: 7px;
}

.search-form label,
.vc-search-form label {
    flex: 1 1 auto;
}

.search-field,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid rgba(var(--vc-hot-rgb), .24);
    border-radius: 3px;
    color: #d9dce0;
    background: rgba(2, 3, 4, .94);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

.search-submit,
button,
input[type="submit"],
input[type="button"] {
    padding: 10px 14px;
    border: 1px solid var(--vc-red);
    border-radius: 3px;
    color: #fff;
    background: linear-gradient(180deg, var(--vc-red), var(--vc-button-dark));
    font: 800 10px var(--vc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.search-submit:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: linear-gradient(180deg, var(--vc-hot), var(--vc-button-hover-dark));
}

/* ========================================================================
   COMMENTS
   ======================================================================== */

.comments-area {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-left: 3px solid var(--vc-red);
    border-radius: 4px;
    background: rgba(5, 6, 8, .82);
}

.comments-title,
.comment-reply-title {
    color: #f2f3f4;
    font: 900 18px var(--vc-mono);
    letter-spacing: .04em;
}

.comment-list {
    padding: 0;
    list-style: none;
}

.comment-list .children {
    list-style: none;
}

.comment-body {
    margin: 0 0 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .055);
    background: #050608;
}

.comment-meta {
    color: #7d858e;
    font: 10px var(--vc-mono);
}

/* ========================================================================
   404 / EMPTY STATES
   ======================================================================== */

.vc-empty-state {
    padding: clamp(28px, 6vw, 72px) 24px;
    text-align: center;
}

.vc-empty-code {
    margin: 0;
    color: var(--vc-hot);
    font: 900 clamp(54px, 12vw, 130px)/.9 var(--vc-mono);
    text-shadow: 0 0 28px rgba(var(--vc-hot-rgb), .35);
}

.vc-empty-state p {
    color: var(--vc-muted);
}

/* ========================================================================
   FOOTER / STATUS BAR
   ======================================================================== */

.vc-footer-widgets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 14px;
    border-top: 1px solid var(--vc-line);
    background: #050608;
}

.vc-statusbar {
    display: flex;
    min-height: 44px;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--vc-line);
    color: #777f87;
    background: #030405;
    font: 9px var(--vc-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.vc-statusbar strong,
.vc-statusbar a {
    color: var(--vc-hot);
}

/* ========================================================================
   WORDPRESS BLOCKS
   ======================================================================== */

.wp-block-image,
.wp-block-gallery,
.wp-block-cover,
.wp-block-media-text {
    max-width: 100%;
}

.wp-block-image img,
.wp-block-cover img {
    max-width: 100%;
    height: auto;
}

.wp-block-button__link {
    border: 1px solid var(--vc-red);
    border-radius: 3px;
    color: #fff;
    background: linear-gradient(180deg, var(--vc-red), var(--vc-button-dark));
    font: 800 11px var(--vc-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--vc-line);
}

.wp-block-quote {
    border-color: var(--vc-hot);
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */

@keyframes vcPulse {
    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 1050px) {
    .vc-workspace {
        grid-template-columns: 1fr;
    }

    .vc-sidebar {
        border-top: 1px solid var(--vc-line);
        border-left: 0;
    }

    .vc-footer-widgets {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .vc-shell {
        width: calc(100% - 14px);
        margin: 7px auto;
        border-radius: 6px;
    }

    .vc-header {
        min-height: 140px;
        padding: 20px 18px;
        align-items: flex-start;
        flex-direction: column;
    }

    .vc-node-state {
        display: none;
    }

    .vc-menubar {
        align-items: stretch;
        flex-direction: column;
    }

    .vc-theme-control {
        margin-left: 0;
        align-self: flex-start;
    }

    .vc-menu-toggle {
        display: inline-block;
        align-self: flex-end;
    }

    .vc-navigation {
        display: none;
    }

    .vc-navigation.is-open {
        display: block;
    }

    .vc-navigation ul {
        align-items: stretch;
        flex-direction: column;
    }

    .vc-navigation .sub-menu {
        position: static;
        display: block;
        padding-left: 14px;
        border: 0;
        box-shadow: none;
    }

    .vc-content-area {
        padding: 14px;
    }

    .vc-entry-header,
    .vc-entry-content,
    .vc-entry-summary {
        padding-right: 14px;
        padding-left: 14px;
    }

    .vc-statusbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .alignleft,
    .alignright {
        float: none;
        margin: 1rem auto;
    }
}

.vc-footer-nav,
.vc-footer-nav ul {
    display: inline-flex;
    margin: 0 8px 0 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.vc-footer-nav a {
    text-decoration: none;
}