/* ============================================================
   DKz Theme — main.css
   Visual system derived from BlackFyre.
   Preserves the original dark/dense/gradient identity.
   Colors extracted into CSS custom properties.
   Selectors adapted to the DKz HTML structure.
   style.css holds only the WP theme header + @import.
   ============================================================ */


/* ============================================================
   1. CSS Custom Properties — BlackFyre palette
   ============================================================ */
:root {
    /* Core backgrounds — dark layered panels */
    --bf-bg-deep:       #131517;    /* deepest background, copyright bar */
    --bf-bg-base:       #1a1a1a;    /* page body background */
    --bf-bg-panel:      #212528;    /* panels, cards, content boxes */
    --bf-bg-panel-alt:  #1a1b1f;    /* panel gradient bottom stop */
    --bf-bg-dark:       #1d1d1d;    /* navbar, header, darker panels */
    --bf-bg-input:      #181b1e;    /* form inputs */
    --bf-bg-row-alt:    #1a1c20;    /* alternating list rows */

    /* Borders */
    --bf-border:        #000000;    /* primary hard border */
    --bf-border-mid:    #31363a;    /* interior divider top */
    --bf-border-light:  #323232;    /* subtle separator */

    /* Text */
    --bf-text-body:     #999999;    /* body copy */
    --bf-text-light:    #cccccc;    /* secondary text */
    --bf-text-bright:   #eeeeee;    /* near-white for labels, headings */
    --bf-text-white:    #ffffff;    /* full white */
    --bf-text-muted:    #666666;    /* de-emphasised */
    --bf-text-meta:     #777777;    /* meta / timestamps */
    --bf-text-sub:      #798690;    /* username role sub-label */

    /* Brand / accent */
    --bf-accent:        #e8512a;    /* primary interactive accent (DKz orange) */
    --bf-accent-hover:  #ff6a40;
    --bf-accent-dark:   #c0392b;

    /* Status colours */
    --bf-win:           #0ee203;
    --bf-lose:          #ff0000;
    --bf-tie:           #f49800;
    --bf-pending:       #fd4a0c;

    /* Social brand colours */
    --bf-social-facebook:   #39599f;
    --bf-social-twitter:    #45b0e3;
    --bf-social-twitch:     #6542a6;
    --bf-social-youtube:    #cc181e;
    --bf-social-rss:        #ff871c;
    --bf-social-steam:      #202020;
    --bf-social-dribbble:   #e04c86;
    --bf-social-vimeo:      #44bbff;
    --bf-social-google:     #dd4b39;

    /* Typography */
    --bf-font-body:     Roboto, 'Open Sans', Arial, sans-serif;
    --bf-font-ui:       Roboto, Arial, sans-serif;

    /* Transitions */
    --bf-transition:    all 0.35s ease-in-out;
    --bf-transition-fast: all 0.2s ease-in-out;
    --bf-transition-linear: all 0.3s linear;

    /* Shadows */
    --bf-shadow-panel:  0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.2);
    --bf-shadow-lift:   0 1px 3px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.2);
    --bf-shadow-card:   0 1px 4px #000, inset 0 1px 1px rgba(255,255,255,.2);
    --bf-shadow-inset:  inset 0 1px 1px rgba(255,255,255,.2);
    --bf-shadow-input:  0 1px rgba(255,255,255,.1), inset 0 1px 2px rgba(0,0,0,.6);

    /* Gradients — header / navbar chrome */
    --bf-gradient-chrome: linear-gradient(to top, #1a1b1f, #212528);
    --bf-gradient-chrome-inv: linear-gradient(to top, #212528, #1a1b1f);

    /* Radius */
    --bf-radius:        3px;

    /* Layout */
    --bf-container:     1200px;
    --bf-sidebar:       280px;
    --bf-gap:           8px;      /* BlackFyre uses tight gutters */

    /* Side artwork panels */
    --bf-wing-width:    160px;    /* width of each decorative side column */
    --bf-wing-bg:       #111214;  /* slightly deeper than body */

    /* Spacing scale — dense BlackFyre rhythm */
    --bf-space-xs:  4px;
    --bf-space-sm:  8px;
    --bf-space-md:  14px;
    --bf-space-lg:  20px;
    --bf-space-xl:  30px;
}


/* ============================================================
   2. Base Reset — preserved from BlackFyre density
   ============================================================ */
* {
    outline: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:      var(--bf-font-body);
    color:            var(--bf-text-body);
    background-color: var(--bf-bg-base);
    height:           100%;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    transition:      var(--bf-transition);
    cursor:          pointer;
    font-weight:     700;
    outline:         0 !important;
    color:           var(--bf-accent);
}

a:hover {
    color:           var(--bf-text-muted);
    text-decoration: none;
    transition:      var(--bf-transition);
    opacity:         1 !important;
}

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

ul, ol {
    list-style: none;
}

iframe {
    border:    0 !important;
    max-width: 100% !important;
}

blockquote {
    display:     block;
    margin:      25px 0;
    border-left: 1px solid var(--bf-border);
    color:       #aeaeae;
    padding:     10px 0 10px 25px;
    font-style:  italic;
    font-size:   20px;
    line-height: 30px;
    box-shadow:  inset 1px 0 0 0 rgba(255,255,255,.1);
}

hr {
    height:     1px;
    background: var(--bf-border);
    box-shadow: 0 1px 0 rgba(255,255,255,.1);
    border:     none;
    margin:     30px 0;
}


/* ============================================================
   3. Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    color:       var(--bf-text-white);
    font-family: var(--bf-font-ui);
    line-height: 1.2;
}

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

small {
    font-size: 0.85em;
    color:     var(--bf-text-muted);
}

strong, b {
    font-weight: 700;
    color:       var(--bf-text-bright);
}


/* ============================================================
   4. Layout — Page Structure + Side Artwork System
   ============================================================ */

/* ── Outermost page shell ──────────────────────────────────── */
#dkz-page {
    overflow:   hidden;
    background: var(--bf-bg-base);
    /* side artwork: two pseudo-columns flanking the content */
    position:   relative;
}

/*
 * Side artwork panels.
 * These are ::before (left) and ::after (right) on #dkz-page.
 * They sit behind everything via z-index: 0.
 * Width is controlled by --bf-wing-width.
 * On tablets/mobile they collapse automatically (see §30 responsive).
 */
#dkz-page::before,
#dkz-page::after {
    content:    '';
    display:    block;
    position:   absolute;
    top:        0;
    bottom:     0;
    width:      var(--bf-wing-width);
    background: var(--bf-wing-bg)
                url(../img/side_artwork.jpg) top center repeat-y;
    z-index:    0;
    pointer-events: none;
    border:     1px solid var(--bf-border);
    /* subtle inner glow to separate wing from content column */
    box-shadow: inset 0 0 40px rgba(0,0,0,.6);
}

#dkz-page::before { left:  0; border-left: 0; }
#dkz-page::after  { right: 0; border-right: 0; }

/* ── Central content column ────────────────────────────────── */
/*
 * .dkz-container constrains everything to --bf-container.
 * It sits on top of the wing pseudo-elements (z-index: 1 on children).
 * We don't need to widen the body — the wings fill naturally.
 */
.dkz-container {
    max-width: var(--bf-container);
    margin:    0 auto;
    padding:   0 20px;
    position:  relative;
    z-index:   1;          /* lifts content above wing pseudo-elements */
}

.dkz-container--wide {
    max-width: 100%;
    padding:   0 20px;
    position:  relative;
    z-index:   1;
}

/* ── Content area — dark wall texture ──────────────────────── */
#dkz-content {
    z-index:        997;
    position:       relative;
    padding-bottom: 10px;
    background:     url(../img/dark_wall.jpg) top left;
    box-shadow:     var(--bf-shadow-lift);
    border-left:    1px solid var(--bf-border);
    border-right:   1px solid var(--bf-border);
    border-bottom:  1px solid var(--bf-border);
    min-height:     500px;
}

.dkz-content {
    padding: var(--bf-space-lg) 0 var(--bf-space-xl);
}

/* ── Content + sidebar wrapper ─────────────────────────────── */
.dkz-wrapper {
    display:     flex;
    gap:         var(--bf-gap);
    align-items: flex-start;
    margin-top:  var(--bf-space-sm);
}

.dkz-main {
    flex:      1;
    min-width: 0;
}

.dkz-sidebar {
    width:       var(--bf-sidebar);
    flex-shrink: 0;
}


/* ============================================================
   5. Generic Panel / Box — the black card look
   All content must sit inside a boxed panel.
   ============================================================ */

/*
 * Base panel mixin applied to:
 *   - .dkz-panel   (generic utility panel)
 *   - .dkz-post    (every post card in the loop)
 *   - .dkz-entry   (single post full view — also in §14)
 *   - .wcontainer / .panel / .message-box / .textwidget (legacy)
 *
 * Border-top is intentionally 0 so the stripe-pattern title bar
 * (a sibling ::before or .title-wrapper) appears to merge flush.
 */
.dkz-panel,
.dkz-post,
.wcontainer,
.panel,
.message-box,
.textwidget {
    background:  var(--bf-bg-panel);
    box-shadow:  var(--bf-shadow-panel);
    border:      1px solid var(--bf-border);
    border-top:  0;
    margin-top:  0;
    padding:     var(--bf-space-lg);
    z-index:     0;
    color:       var(--bf-text-light);
}

/* Posts in the loop are stacked with a small gap between them */
.dkz-post + .dkz-post {
    margin-top: var(--bf-space-sm);
}

/* Ensure last-of-type doesn't double-bottom-pad */
.dkz-main > .dkz-post:last-child {
    margin-bottom: 0;
}

.dkz-panel img,
.dkz-post img,
.wcontainer img {
    max-width: 100%;
    height:    auto;
}

.dkz-panel p:last-child,
.dkz-post p:last-child,
.wcontainer p:last-child {
    margin-bottom: 0;
}

/* ── Section title bar (stripe header above a panel) ──────── */
.dkz-section-title {
    margin:   var(--bf-space-sm) 0 var(--bf-space-xl);
    position: relative;
    height:   20px;
    z-index:  1;
}

.dkz-section-title h3,
.dkz-section-title h4 {
    margin:         0;
    background:     var(--bf-bg-panel);
    display:        inline-block;
    padding-right:  10px;
    font-weight:    600;
    letter-spacing: -0.05em;
}

/* ── Post header — stripe bar above each boxed post ──────── */
/*
 * Every .dkz-post gets a title-bar top edge so the panel looks
 * exactly like a BlackFyre content block (border-top: 0 on the
 * panel body, gradient bar as a separate element or ::before).
 */
.dkz-post__header {
    margin:           calc(-1 * var(--bf-space-lg))
                      calc(-1 * var(--bf-space-lg))
                      var(--bf-space-md)
                      calc(-1 * var(--bf-space-lg));
    padding:          var(--bf-space-sm) var(--bf-space-lg);
    background-color: var(--bf-bg-dark);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-inset);
    border-bottom:    1px solid var(--bf-border);
    position:         relative;
}

.dkz-post__header::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    bottom:     0;
    background: url(../img/stripe.png) top left;
    z-index:    0;
    pointer-events: none;
}

.dkz-post__title {
    font-size:      15px;
    margin:         0;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position:       relative;
    z-index:        1;
}

.dkz-post__title a {
    color:      var(--bf-text-white);
    font-weight: 800;
}

.dkz-post__title a:hover {
    color: var(--bf-accent);
}

.dkz-post__meta {
    font-size:  11px;
    color:      var(--bf-text-muted);
    margin-top: var(--bf-space-xs);
    position:   relative;
    z-index:    1;
}

.dkz-post__meta a {
    color:       var(--bf-text-muted);
    font-weight: 400;
}

.dkz-post__meta a:hover {
    color: var(--bf-accent);
}

/* ── Post thumbnail ─────────────────────────────────────────── */
.dkz-post__thumbnail {
    margin:       0 calc(-1 * var(--bf-space-lg)) var(--bf-space-md);
    overflow:     hidden;
    border-bottom: 1px solid var(--bf-border);
}

.dkz-post__thumbnail img {
    width:      100%;
    height:     auto;
    display:    block;
    transition: transform 0.4s ease;
}

.dkz-post:hover .dkz-post__thumbnail img {
    transform: scale(1.02);
}

/* ── Post excerpt / body ────────────────────────────────────── */
.dkz-post__excerpt {
    font-size:   13px;
    color:       var(--bf-text-body);
    line-height: 1.6;
    margin-bottom: var(--bf-space-sm);
}

.dkz-post__excerpt p {
    margin-bottom: var(--bf-space-sm);
}

/* ── Read-more link ─────────────────────────────────────────── */
.dkz-post__read-more {
    display:        inline-block;
    padding:        6px 14px;
    font-size:      11px;
    font-weight:    900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--bf-text-white);
    background-image: var(--bf-gradient-chrome);
    background-color: var(--bf-bg-dark);
    border:         1px solid var(--bf-border);
    border-radius:  var(--bf-radius);
    box-shadow:     var(--bf-shadow-panel);
    transition:     var(--bf-transition-fast);
    margin-top:     var(--bf-space-sm);
}

.dkz-post__read-more:hover {
    color:            var(--bf-text-white);
    background-color: var(--bf-accent);
    background-image: none;
    border-color:     var(--bf-accent);
}

/* ── Post footer (tags, etc.) ───────────────────────────────── */
.dkz-post__footer {
    margin:       var(--bf-space-md) calc(-1 * var(--bf-space-lg)) calc(-1 * var(--bf-space-lg));
    padding:      var(--bf-space-sm) var(--bf-space-lg);
    border-top:   1px solid rgba(0,0,0,.5);
    background-color: var(--bf-bg-row-alt);
    box-shadow:   var(--bf-shadow-inset);
    font-size:    11px;
    color:        var(--bf-text-muted);
}

/* ── Post content (single) ─────────────────────────────────── */
.dkz-post__content {
    font-size:   14px;
    line-height: 1.7;
    color:       var(--bf-text-light);
}

.dkz-post__content > * + * {
    margin-top: var(--bf-space-md);
}

/* Tags */
.dkz-post__tags a {
    display:        inline-block;
    padding:        3px 8px;
    margin:         2px;
    font-size:      11px;
    background:     var(--bf-bg-input);
    border:         1px solid var(--bf-border);
    color:          var(--bf-text-bright);
    font-weight:    700;
    border-radius:  var(--bf-radius);
}

.dkz-post__tags a:hover {
    color:       var(--bf-text-white);
    border-color: var(--bf-accent);
}

/* Spacing block */
.spacing {
    height:     85px;
    width:      100%;
    background: transparent;
    border:     none;
}

/* Helpers */
.centered       { text-align: center; }
.clear          { clear: both; }
.first          { clear: both; }
.hiddenoverflow { overflow: hidden; }
.hiddenoverflow img {
    min-height: 100%;
    min-width:  100%;
}


/* ============================================================
   6. Buttons
   ============================================================ */
.dkz-btn,
.button-big,
.button-medium,
.button-small,
button[type=submit],
input[type=button],
input[type=submit] {
    transition:      var(--bf-transition);
    color:           var(--bf-text-white);
    text-transform:  uppercase;
    font-weight:     900;
    display:         inline-block;
    margin-top:      5px;
    position:        relative;
    border-radius:   var(--bf-radius);
    z-index:         1;
    border:          1px solid var(--bf-border);
    overflow:        hidden;
    cursor:          pointer;
    font-family:     var(--bf-font-ui);
    letter-spacing:  0;
}

.dkz-btn:hover,
.button-big:hover,
.button-medium:hover,
.button-small:hover,
button[type=submit]:hover,
input[type=button]:hover,
input[type=submit]:hover {
    color: var(--bf-text-white);
}

.dkz-btn--primary {
    background-color: var(--bf-accent);
    border-color:     var(--bf-accent);
}

.dkz-btn--primary:hover {
    background-color: var(--bf-accent-hover);
    border-color:     var(--bf-accent-hover);
    color:            var(--bf-text-white);
}

.dkz-btn--ghost {
    background:   transparent;
    color:        var(--bf-accent);
    border-color: var(--bf-accent);
}

.dkz-btn--ghost:hover {
    background-color: var(--bf-accent);
    color:            var(--bf-text-white);
}

.button-big {
    font-size: 14px;
    padding:   20px 25px !important;
}

.button-medium,
button[type=submit] {
    font-size: 14px;
    padding:   15px 30px 16px !important;
}

.button-small,
input[type=button],
input[type=submit] {
    font-size: 12px;
    padding:   11px 20px !important;
}


/* ============================================================
   7. Forms / Inputs
   ============================================================ */
input[type=text],
input[type=password],
input[type=url],
input[type=file],
select,
textarea {
    border-radius:    var(--bf-radius);
    background-color: var(--bf-bg-input);
    box-shadow:       var(--bf-shadow-input);
    border:           1px solid rgba(0,0,0,.9);
    padding:          10px;
    margin-bottom:    10px;
    font-size:        12px;
    color:            var(--bf-text-light);
    font-family:      var(--bf-font-body);
}

input[type=text]:active,  input[type=text]:focus,  input[type=text]:hover,
input[type=password]:active, input[type=password]:focus, input[type=password]:hover,
select:active,  select:focus,  select:hover,
textarea:active, textarea:focus, textarea:hover {
    background-color: var(--bf-bg-input);
    box-shadow:       var(--bf-shadow-input);
    border:           1px solid rgba(0,0,0,.9);
}

/* Focus glow — remove browser outline, add transition */
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=url]:focus,
textarea:focus,
select:focus {
    transition: var(--bf-transition-linear);
    box-shadow: none !important;
    outline:    0;
}


/* ============================================================
   8. Site Header
   ============================================================ */
#dkz-header {
    z-index:    999;
    position:   relative;
}

/* Top bar — social icons row */
.dkz-topbar {
    z-index:          999;
    padding:          0;
    background-color: var(--bf-bg-dark);
    box-shadow:       var(--bf-shadow-inset);
    border:           1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
    border-radius:    var(--bf-radius) var(--bf-radius) 0 0;
    position:         relative;
}

.dkz-topbar::before {
    content:  '';
    background: url(../img/dots.png) top left;
    position: absolute;
    width:    100%;
    height:   100%;
    top:      0;
    left:     0;
    display:  block !important;
    z-index:  -1;
}

.dkz-topbar__inner {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             16px;
    padding:         0 20px;
}

.dkz-topbar__social {
    display:     flex;
    float:       right;
    bottom:      -1px;
    padding:     0;
    border-radius: 0;
}

.dkz-topbar__social a {
    padding:   8px 10px 5px;
    display:   block;
    font-size: 17px;
    position:  relative;
    float:     left;
    color:     var(--bf-text-body);
    transition: var(--bf-transition-fast);
}

.dkz-topbar__social a:first-child { padding-left:  15px; }
.dkz-topbar__social a:last-child  { padding-right: 15px; }

.dkz-topbar__social a:hover {
    color: var(--bf-text-white);
}

.dkz-topbar__social svg {
    fill:     currentColor;
    height:   1.4rem;
    width:    1.5rem;
    z-index:  10;
    margin:   0 auto;
    position: relative;
    right:    -3px;
}

/* Navbar row — logo + navigation */
.dkz-navbar {
    display:     flex;
    align-items: center;
    padding:     0;
    gap:         0;
    height:      61px;
    transition:  var(--bf-transition-linear);
    background-image: var(--bf-gradient-chrome);
    background-color: var(--bf-bg-dark);
    box-shadow:  var(--bf-shadow-inset);
    border:      1px solid var(--bf-border);
    border-top:  0;
    border-radius: 0;
}

/* Logo */
.dkz-logo {
    text-align: left;
    padding:    20px;
    width:      30%;
}

.dkz-logo a {
    display: block;
}

.dkz-logo img {
    max-width: 100%;
}

.dkz-logo__text {
    font-family:    var(--bf-font-ui);
    font-size:      1.4rem;
    font-weight:    800;
    color:          var(--bf-text-white);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dkz-logo__text span {
    color: var(--bf-accent);
}

/* Nav collapse toggle (mobile) */
.dkz-nav-toggle {
    display:       none;
    background:    none;
    border:        1px solid var(--bf-border-mid);
    color:         var(--bf-text-light);
    padding:       6px 12px;
    border-radius: var(--bf-radius);
    font-size:     18px;
    transition:    var(--bf-transition);
}

.dkz-nav-toggle:hover {
    border-color: var(--bf-accent);
    color:        var(--bf-accent);
}


/* ============================================================
   9. Navigation Menu
   ============================================================ */
.dkz-nav {
    float: left;
    flex:  1;
}

.dkz-nav ul {
    display:   flex;
    flex-wrap: wrap;
    gap:       0;
    margin:    0;
    padding:   0;
    list-style: none;
}

.dkz-nav ul li > a {
    display:        block;
    padding:        22px 27px;
    color:          var(--bf-text-white);
    font-family:    var(--bf-font-ui);
    font-size:      14px;
    text-transform: uppercase;
    font-weight:    800;
    margin:         0 1px 0 0;
    text-shadow:    0 1px 2px var(--bf-border);
    opacity:        0.9;
    white-space:    nowrap;
    transition:     var(--bf-transition-linear);
}

.dkz-nav ul li > a .fas,
.dkz-nav ul li > a .fab,
.dkz-nav ul li > a .far {
    margin-right: 3px;
    transition:   var(--bf-transition-linear);
}

.dkz-nav ul li > a:hover,
.dkz-nav ul li.current-menu-item  > a,
.dkz-nav ul li.current-menu-parent > a,
.dkz-nav ul li.current-menu-ancestor > a {
    color:   var(--bf-text-white);
    opacity: 1;
}

.dkz-nav ul li > a:hover .fas,
.dkz-nav ul li > a:hover .fab,
.dkz-nav ul li > a:hover .far,
.dkz-nav ul li.current-menu-item > a .fas,
.dkz-nav ul li.current-menu-item > a .fab,
.dkz-nav ul li.current-menu-item > a .far {
    color:      var(--bf-text-white);
    transition: var(--bf-transition-linear);
}

/* Dropdown */
.dkz-nav ul li {
    position: relative;
}

.dkz-nav ul li ul {
    display:          block;
    visibility:       hidden;
    opacity:          0;
    position:         absolute;
    top:              120%;
    left:             0;
    background-color: #1f2225;
    border-right:     1px solid var(--bf-border) !important;
    border-left:      1px solid var(--bf-border) !important;
    min-width:        160px;
    flex-direction:   column;
    z-index:          200;
    gap:              0;
    padding:          0;
    margin:           0;
    transition:       var(--bf-transition-fast);
}

.dkz-nav ul li:hover > ul {
    display:    block;
    top:        99%;
    visibility: visible;
    opacity:    1;
    border:     0;
    border-right: 1px solid var(--bf-border) !important;
    border-left:  1px solid var(--bf-border) !important;
    border-top:   1px solid var(--bf-border) !important;
    transition: var(--bf-transition-fast);
}

.dkz-nav ul li ul li {
    border-top:    1px solid var(--bf-border-mid);
    border-bottom: 1px solid var(--bf-border);
}

.dkz-nav ul li ul li > a {
    padding:          15px 15px 15px 20px !important;
    background-image: url(../img/arrow-menu.png);
    background-repeat: no-repeat;
    background-position: -18px 50%;
    letter-spacing:   0;
    font-family:      Arial;
    font-size:        11px;
    color:            #e3e3e3;
    background-color: #1f2225;
    font-weight:      normal;
    opacity:          1;
    text-shadow:      none;
    border:           none !important;
    line-height:      normal;
    text-align:       left;
}

.dkz-nav ul li:hover > ul li > a:hover {
    background-position: 18px 50%;
    padding-left:        35px !important;
    color:               var(--bf-text-white);
    background-color:    #1a1c1f;
}

/* Sub-menu arrow (second level) */
.dkz-nav ul li ul li ul {
    left:    100%;
    top:     -2px !important;
}


/* ============================================================
   10. Header Search
   ============================================================ */
.dkz-header-search {
    position: absolute;
    right:    0;
    top:      0;
    z-index:  999;
}

#dkz-header-search-input,
#sform input[type=search] {
    background:    url(../img/search-icon.png) 9px center no-repeat;
    background-color: var(--bf-bg-panel);
    width:         1px;
    border-radius: 0;
    transition:    var(--bf-transition-fast);
    padding:       10px 18px;
    margin:        3px;
    border:        1px solid transparent;
    color:         rgba(255,255,255,0);
    font-size:     12px;
}

#dkz-header-search-input:focus,
#sform input[type=search]:focus {
    width:            130px;
    padding-left:     32px;
    color:            var(--bf-border);
    border:           1px solid rgba(0,0,0,1);
    cursor:           auto;
    background-color: #202126;
}

#dkz-header-search-input:hover,
#sform input[type=search]:hover {
    border:  1px solid rgba(0,0,0,1);
    cursor:  pointer;
}


/* ============================================================
   11. News Ticker — after-nav bar
   ============================================================ */
.dkz-ticker {
    background: url(../img/ticker_bg.jpg) top left #2a2929;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--bf-accent);
    padding:     0;
    position:    relative;
    min-height:  39px;
    box-shadow:  inset 0 2px 3px rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.6);
    z-index:     998;
    overflow:    hidden;
}

.dkz-ticker__inner {
    display:     flex;
    align-items: center;
    gap:         16px;
}

.dkz-ticker__label {
    position:       absolute;
    left:           -1px;
    color:          var(--bf-text-white);
    z-index:        1;
    padding:        11px 11px 10px;
    font-size:      12px;
    border-left:    1px solid var(--bf-border);
    text-shadow:    0 1px 2px rgba(0,0,0,.5);
    font-weight:    800;
    font-family:    var(--bf-font-ui);
    text-transform: uppercase;
    background-image: var(--bf-gradient-chrome);
    background-color: var(--bf-bg-dark);
    box-shadow:       var(--bf-shadow-inset);
    border-right:     1px solid var(--bf-border);
}

.dkz-ticker__list {
    margin:     0;
    padding:    0;
    list-style: none;
    height:     38px;
    overflow:   hidden;
}

.dkz-ticker__list li {
    float:        left;
    margin:       11px 0 0;
    padding-right: 15px;
    height:       30px;
    font:         700 10px Verdana;
    color:        #ddd;
    white-space:  nowrap;
}

.dkz-ticker__list a {
    white-space: nowrap;
    padding:     0;
    margin:      0;
    font-weight: 400;
    color:       var(--bf-text-light);
}


/* ============================================================
   12. Page Title Bar
   ============================================================ */
.dkz-title-bar {
    min-height:       70px;
    clear:            both;
    position:         relative;
    background-color: var(--bf-bg-dark);
    box-shadow:       inset 0 2px 3px rgba(255,255,255,.2);
    background-image: var(--bf-gradient-chrome);
    z-index:          1;
    padding:          0;
}

.dkz-title-bar::before {
    z-index:  -1;
    background: url(../img/stripe.png) top left;
    border:   1px solid var(--bf-border);
    width:    100%;
    height:   100%;
    position: absolute;
    top:      0;
    left:     0;
    display:  block !important;
    content:  '';
}

.dkz-title-bar__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    flex-wrap:       wrap;
}

.dkz-title-bar h1,
.dkz-title-bar__title {
    color:          var(--bf-text-bright);
    font-size:      16px;
    text-transform: uppercase;
    margin-top:     27px;
    margin-bottom:  20px;
    float:          left;
    font-weight:    800;
}

/* Breadcrumb */
.dkz-breadcrumb,
.dkz-title-bar__breadcrumbs {
    text-align:    right;
    color:         var(--bf-text-bright);
    margin-top:    27px;
    float:         right;
    margin-bottom: 20px;
    font-size:     12px;
}

.dkz-breadcrumb a {
    color:      var(--bf-text-light);
    font-weight: 400;
}

.dkz-breadcrumb a:hover {
    color: var(--bf-accent);
}

.dkz-breadcrumb span + span::before {
    content: ' / ';
    padding: 0 4px;
    color:   var(--bf-text-muted);
}


/* ============================================================
   13. Post / Card Styling — Blog
   ============================================================ */
.dkz-card,
.blog-post {
    position: relative;
}

/* Card thumbnail */
.dkz-card__thumbnail,
.blog-image {
    position: relative;
    overflow: hidden;
}

.dkz-card__thumbnail img,
.blog-image img {
    width:        100%;
    border-bottom: 1px solid var(--bf-border);
    transition:   transform 0.4s ease;
}

.dkz-card:hover .dkz-card__thumbnail img {
    transform: scale(1.04);
}

/* Card info bar — the dark panel that slides up on hover */
.dkz-card__body,
.blog-twrapper {
    background-color: var(--bf-bg-dark);
    border:           1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-panel);
    position:         relative;
    z-index:          10;
    transition:       transform 0.4s;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition:    -moz-transform 0.4s;
}

.sticky .blog-twrapper {
    background-image: var(--bf-gradient-chrome-inv);
}

.sticky .blog-twrapper h2 a {
    color: var(--bf-text-white);
}

.blog-post:hover .blog-twrapper {
    -webkit-transform: translateY(-70px);
    -moz-transform:    translateY(-70px);
    -ms-transform:     translateY(-70px);
    transform:         translateY(-70px);
}

.blog-post.isotope-item:hover .blog-twrapper {
    -webkit-transform: translateY(-100px);
    -moz-transform:    translateY(-100px);
    -ms-transform:     translateY(-100px);
    transform:         translateY(-100px);
}

/* Card body padding */
.dkz-card__body {
    padding: 20px 25px 15px;
    line-height: 21px;
}

.dkz-card__body h2 {
    margin-top:    0;
    margin-bottom: 10px;
    font-size:     18px;
}

/* Meta line */
.dkz-card__meta,
.post-meta {
    font-size:     11px;
    color:         var(--bf-text-meta);
    margin-bottom: 5px;
}

.dkz-card__meta i,
.post-meta i {
    font-size: 11px;
}

.dkz-card__category {
    color:       var(--bf-accent) !important;
    font-weight: 600;
}

/* Title */
.dkz-card__title {
    font-size:     1.05rem;
    margin-bottom: 8px;
    line-height:   1.3;
}

.dkz-card__title a,
.newsb-title a {
    color:      var(--bf-text-bright);
    font-weight: 700;
    font-size:  16px;
    transition: var(--bf-transition);
}

.dkz-card__title a:hover,
.newsb-title a:hover {
    color: var(--bf-accent);
}

/* Excerpt */
.dkz-card__excerpt {
    font-size:   0.9rem;
    color:       var(--bf-text-meta);
    line-height: 1.5;
    margin:      0;
}

/* Card footer */
.dkz-card__footer,
.blog-info {
    padding:          5px 10px 5px 25px;
    border-top:       1px solid rgba(0,0,0,.5);
    background-color: var(--bf-bg-dark);
    border:           1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-panel);
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    font-size:        12px;
    color:            var(--bf-text-muted);
    position:         absolute;
    bottom:           0;
    left:             0;
    width:            100%;
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden;
}

/* Blog date badge */
.blog-date {
    position:         absolute;
    top:              10px;
    left:             10px;
    background-color: var(--bf-bg-dark);
    border:           1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-panel);
}

.blog-date a,
.blog-date span {
    padding:    5px;
    display:    block;
    text-align: center;
}

.blog-date span.date {
    padding:     15px;
    color:       var(--bf-text-white);
    font-size:   16px;
    transition:  var(--bf-transition-linear);
    font-weight: 700;
}

/* Blog index listing */
.blog-ind .blog-content {
    padding-bottom: 25px;
}

.blog-content {
    padding:     20px 25px 15px;
    line-height: 21px;
}

.blog-content ul {
    margin: 20px 0;
}

/* Post rating badge */
.carousel_rating,
.blog-image .carousel_rating {
    position:   absolute;
    top:        10px;
    right:      10px;
    z-index:    2;
    font-size:  14px;
    padding:    5px 10px;
    background: rgba(35,40,45,.6);
}

.carousel_rating i,
.blog-image .carousel_rating i {
    color:     var(--bf-text-white);
    font-size: 15px;
}

.carousel_rating_number {
    color:     var(--bf-text-light);
    font-size: 15px;
}

/* Heart / like */
.heart-love {
    color: var(--bf-text-bright);
}

.heart-love-count .fas {
    margin-right: 5px;
}


/* ============================================================
   14. Single Post Entry
   ============================================================ */
.dkz-entry {
    background-color: var(--bf-bg-panel);
    border:           1px solid var(--bf-border);
    border-top:       0;
    box-shadow:       var(--bf-shadow-panel);
    color:            var(--bf-text-light);
    overflow:         hidden;
}

.dkz-entry__header {
    padding: 30px 30px 16px;
}

.dkz-entry__thumbnail {
    width:  100%;
    border-bottom: 1px solid var(--bf-border);
}

.dkz-entry__body {
    padding: 20px 25px;
}

.dkz-entry__body .entry-content h1,
.dkz-entry__body .entry-content h2,
.dkz-entry__body .entry-content h3,
.dkz-entry__body .entry-content h4,
.dkz-entry__body .entry-content h5,
.dkz-entry__body .entry-content h6 {
    padding-left: 0;
    color:        var(--bf-text-white);
}

.dkz-entry__body .entry-content h3 { font-size: 21px; }
.dkz-entry__body .entry-content h2 { font-size: 26px; }

.dkz-entry__body .entry-content td,
.dkz-entry__body .entry-content th {
    padding:    10px;
    border:     1px solid var(--bf-border);
    background: rgba(0,0,0,.2);
}

.dkz-entry__body .entry-content table {
    margin-bottom: 10px;
}

.dkz-entry__body .entry-content dd {
    margin: 5px 20px;
}

.dkz-entry__body .entry-content ul {
    list-style:   disc;
    padding-left: 30px;
    margin-bottom: 16px;
}

.dkz-entry__body .entry-content ol {
    list-style:   decimal;
    padding-left: 30px;
    margin-bottom: 16px;
}

.dkz-entry__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         16px;
    font-size:   13px;
    color:       var(--bf-text-muted);
    margin-bottom: 16px;
}

.dkz-entry__meta a {
    color:      var(--bf-text-muted);
    font-weight: 400;
}

.dkz-entry__meta a:hover {
    color: var(--bf-accent);
}

/* Post navigation */
.dkz-post-nav {
    display:         flex;
    justify-content: space-between;
    gap:             16px;
    margin-top:      30px;
    padding-top:     30px;
    border-top:      1px solid var(--bf-border);
}

.dkz-post-nav__link {
    flex:          1;
    padding:       16px;
    background:    var(--bf-bg-panel);
    border:        1px solid var(--bf-border);
    border-radius: var(--bf-radius);
    font-size:     13px;
    transition:    var(--bf-transition);
}

.dkz-post-nav__link:hover {
    border-color: var(--bf-accent);
}

.dkz-post-nav__link--prev { text-align: left; }
.dkz-post-nav__link--next { text-align: right; }

.dkz-post-nav__label {
    display:        block;
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--bf-text-muted);
    margin-bottom:  4px;
}

.dkz-post-nav__title {
    color:       var(--bf-text-white);
    font-family: var(--bf-font-ui);
}

/* Author block */
.author-block img {
    float:  left;
    width:  80px;
    height: 80px;
}

.author-content {
    width: 86%;
    float: right;
}

.author-content h3 {
    line-height:    22px;
    margin-bottom:  12px;
    margin-top:     0;
    text-transform: none;
}

/* Comments */
ul.comment-list {
    margin:  0;
    padding: 0;
}

ul.comment-list ul {
    margin-top:  25px;
    margin-left: 60px;
}

ul.comment-list li {
    margin:     0 0 15px;
    list-style: none;
}

.comment-body {
    float:    left;
    width:    85%;
    position: relative;
    padding-left: 15px;
}

.comment-body p {
    color:      var(--bf-text-bright);
    margin:     10px 0 0;
}

.comment-list .avatar {
    border: 1px solid var(--bf-border);
    width:  15%;
}

.comment-body .comment-reply-link {
    top:      0;
    right:    0;
    padding:  5px 10px !important;
    font-size: 10px;
    position: relative;
}

.comment-body .comment-author {
    font-weight:   700;
    margin-bottom: 5px;
}

.comment-form input[type=text],
.comment-form textarea {
    width: 100%;
}


/* ============================================================
   15. Widgets & Sidebar
   ============================================================ */
.widget {
    margin-bottom: 25px;
    color:         var(--bf-text-meta);
}

.widget ul,
.widget ul li {
    margin:  0;
    padding: 0;
}

.widget ul {
    background-color: var(--bf-bg-panel);
    box-shadow:       1px 2px 3px rgba(0,0,0,.5), inset 0 0 1px rgba(255,255,255,.2);
    border:           1px solid var(--bf-border);
}

.widget ul li {
    list-style: none;
    padding:    15px;
    transition: var(--bf-transition);
    border-top: 1px solid rgba(0,0,0,.2);
}

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

.widget ul li a {
    font-weight: 400;
    color:       var(--bf-text-light);
}

.widget ul li a:hover {
    color: var(--bf-accent);
}

/* Widget alternating rows */
.widget ul li:nth-child(even) {
    background:  var(--bf-bg-row-alt);
    border-top:  1px solid var(--bf-border);
    border-bottom: 1px solid var(--bf-border);
    box-shadow:  var(--bf-shadow-inset);
}

/* Widget title — stripe pattern heading */
.widget-title,
h3.widget-title,
.modal-header h3,
.title-wrapper h3 {
    font-size:      14px;
    text-transform: uppercase;
    padding:        13px 17px;
    z-index:        99999;
    margin:         0;
    background:     url(../img/stripe.png) top left;
    font-family:    var(--bf-font-ui);
    color:          var(--bf-text-white);
    font-weight:    800;
    letter-spacing: 0;
}

.widget-title i {
    margin-right: 3px;
}

/* Title wrapper (above content panels) */
.title-wrapper {
    z-index:        1;
    position:       relative;
    margin-top:     -1px;
    margin-bottom:  -1px;
    background-color: var(--bf-bg-dark);
    border:         1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
    box-shadow:     var(--bf-shadow-panel);
}

/* Tag cloud */
.tagcloud a {
    background:     var(--bf-bg-input);
    border:         1px solid var(--bf-border);
    color:          #eaeaea !important;
    font-style:     normal;
    font-size:      12px !important;
    font-weight:    700;
    padding:        5px 10px;
    margin-bottom:  8px;
    display:        inline-block;
    transition:     var(--bf-transition);
}

.tagcloud a:hover {
    color: var(--bf-text-white) !important;
}

/* WordPress calendar */
#wp-calendar {
    width: 100%;
}

#wp-calendar td,
#wp-calendar th {
    padding:    10px;
    border:     1px solid var(--bf-border);
    background: rgba(0,0,0,.2);
}

#wp-calendar th      { background: rgba(0,0,0,.4); }
#wp-calendar caption {
    margin-top:  10px;
    padding:     10px;
    border:      1px solid var(--bf-border);
    background:  rgba(0,0,0,.6);
}

/* Search widget */
#searchform input {
    width:            100%;
    cursor:           text !important;
    padding:          15px 15px 15px 45px;
    background-color: #1b1c20;
    background-image: url(../img/search-widget.png);
    background-position: center left;
    background-repeat: no-repeat;
    margin-bottom:    0;
}

#searchform input[type=submit] { display: none; }

/* WP image captions */
.wp-caption {
    background: #1b1c20;
    border:     1px solid var(--bf-border);
    max-width:  96%;
    padding:    5px 3px 10px;
    text-align: center;
}

.wp-caption img {
    border:    0;
    height:    auto;
    margin:    0;
    max-width: 98.5%;
    padding:   0;
    width:     auto;
}

.wp-caption p.wp-caption-text {
    font-size:   11px;
    line-height: 17px;
    margin:      0;
    padding:     10px 5px 0;
}


/* ============================================================
   16. Site Footer
   ============================================================ */
#dkz-footer {
    width:            100%;
    padding:          25px 10px !important;
    position:         relative;
    z-index:          997 !important;
    margin-top:       10px;
    background-color: var(--bf-bg-panel);
    box-shadow:       1px 2px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.2);
    border:           1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
}

/* Footer widget columns */
.dkz-footer__widgets {
    padding: 0;
}

.dkz-footer__widgets-inner {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   30px;
    padding:               25px 0;
}

/* Footer widget boxes */
.dkz-footer__widgets .widget {
    margin-bottom: 0;
}

.dkz-footer__widgets .widget ul {
    background-color: var(--bf-bg-panel);
    box-shadow:       1px 2px 3px rgba(0,0,0,.5), inset 0 0 1px rgba(255,255,255,.2);
    border:           1px solid var(--bf-border);
}

.dkz-footer__widgets .widget ul li:nth-child(even) {
    background:  var(--bf-bg-row-alt);
    border-top:  1px solid var(--bf-border);
    border-bottom: 1px solid var(--bf-border);
    box-shadow:  var(--bf-shadow-inset);
}

.dkz-footer__widgets h3 {
    font-size:   14px;
    color:       var(--bf-text-light);
    padding-left: 15px;
}

/* Copyright bar */
.dkz-copyright {
    background-color: var(--bf-bg-deep);
    box-shadow:       1px 2px 3px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.2);
    border:           1px solid var(--bf-border);
    padding:          5px 0;
    position:         relative;
    top:              -5px;
    z-index:          9999;
}

.dkz-copyright__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    flex-wrap:       wrap;
    padding:         8px 0;
}

.dkz-copyright__text,
.dkz-copyright p {
    margin:    11px 0 0 25px;
    float:     left;
    font-size: 11px;
    color:     #444;
}

.dkz-copyright__nav .dkz-footer-menu {
    display: flex;
    gap:     10px;
}

.dkz-copyright__nav .dkz-footer-menu li a {
    font-size:   11px;
    color:       #444;
    font-weight: 400;
}

.dkz-copyright__nav .dkz-footer-menu li a:hover {
    color: var(--bf-text-light);
}

.dkz-copyright__social {
    display:      flex;
    gap:          8px;
    float:        right;
    margin-right: 15px;
}

.dkz-copyright__social a {
    display:     inline-block;
    float:       none;
    margin:      10px 5px 5px 10px;
    transition:  var(--bf-transition-fast);
    text-align:  center;
    font-size:   16px;
    line-height: 1px;
    color:       var(--bf-text-body);
}

.dkz-copyright__social svg {
    fill:   currentColor;
    height: 1.4rem;
    width:  1.5rem;
}

.dkz-copyright__social a.facebook:hover { color: var(--bf-social-facebook); }
.dkz-copyright__social a.twitter:hover  { color: var(--bf-social-twitter); }
.dkz-copyright__social a.twitch:hover   { color: var(--bf-social-twitch); }
.dkz-copyright__social a.youtube:hover  { color: var(--bf-social-youtube); }
.dkz-copyright__social a.rss:hover      { color: var(--bf-social-rss); }
.dkz-copyright__social a.dribbble:hover { color: var(--bf-social-dribbble); }
.dkz-copyright__social a.vimeo:hover    { color: var(--bf-social-vimeo); }


/* ============================================================
   17. Back to Top
   ============================================================ */
.dkz-back-to-top {
    height:         46px;
    margin-bottom:  50px;
    position:       fixed;
    bottom:         30px;
    right:          30px;
    text-align:     center;
    z-index:        99999;
    width:          95px;
    background:     url(../img/back-to-top.png) top left no-repeat;
    display:        none;
    border:         none;
    transition:     var(--bf-transition-fast);
    margin-top:     -8px;
}

.dkz-back-to-top:hover {
    margin-top: -5px;
}

.dkz-back-to-top.is-visible {
    display: block;
}


/* ============================================================
   18. Pagination
   ============================================================ */
.dkz-pagination,
div.pagination {
    padding:    3px;
    margin:     3px;
    text-align: center;
    color:      #a0a0a0;
    font-size:  80%;
}

.dkz-pagination ul,
.pagination ul {
    list-style: none;
    margin:     10px 0;
    padding:    0;
}

.dkz-pagination li,
.pagination li {
    display:     inline-block;
    list-style:  none;
    margin-right: 5px;
}

div.pagination a,
div.pagination span,
.page-numbers,
.page-numbers:hover {
    padding:   8px 13px !important;
    position:  relative;
    color:     var(--bf-text-white);
    margin:    0 5px 0 0;
    display:   inline-block;
    font-size: 10px !important;
    background-color: var(--bf-bg-dark);
    background-image: var(--bf-gradient-chrome);
    box-shadow: var(--bf-shadow-panel);
    border:    1px solid var(--bf-border);
}

.pagination span.disabled {
    border: 1px solid #666;
    color:  var(--bf-text-body);
}

.navigation {
    width:      100%;
    min-height: 5px;
}

.navigation a {
    float:         left;
    padding:       10px 15px;
    line-height:   20px;
    text-decoration: none;
    font-weight:   400;
    border-left-width: 0;
    color:         var(--bf-text-white);
}


/* ============================================================
   19. Error / Alert Messages
   ============================================================ */
.error,
.error_msg,
.ermaps {
    margin:     0 0 20px;
    font-size:  12px;
    color:      #df9a9a;
    border-radius: var(--bf-radius);
    padding:    10px;
    background: rgba(205,36,36,.1);
    border:     1px solid #cb4d4d;
}

.ermaps,
.error {
    margin-left: 5px;
}


/* ============================================================
   20. Utility Classes
   ============================================================ */
.screen-reader-text {
    position: absolute;
    width:    1px;
    height:   1px;
    overflow: hidden;
    clip:     rect(1px,1px,1px,1px);
}

.dkz-text-muted   { color: var(--bf-text-muted); }
.dkz-text-primary { color: var(--bf-accent); }
.dkz-text-upper   { text-transform: uppercase; letter-spacing: 0.06em; }
.dkz-text-sm      { font-size: 0.85rem; }
.dkz-text-center  { text-align: center; }

.dkz-flex          { display: flex; align-items: center; gap: 16px; }
.dkz-flex--between { justify-content: space-between; }

/* Spacing helpers */
.dkz-mt-sm  { margin-top:    8px; }
.dkz-mt-md  { margin-top:    16px; }
.dkz-mt-lg  { margin-top:    30px; }
.dkz-mb-sm  { margin-bottom: 8px; }
.dkz-mb-md  { margin-bottom: 16px; }
.dkz-mb-lg  { margin-bottom: 30px; }

/* Grid utilities */
.dkz-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap:                   var(--bf-gap);
}

.dkz-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* BlackFyre alternating row pattern */
.bgpattern {
    background:    var(--bf-bg-row-alt);
    border-top:    1px solid var(--bf-border);
    border-bottom: 1px solid var(--bf-border);
    box-shadow:    var(--bf-shadow-inset);
    border:        1px solid var(--bf-border);
}

/* Image align helpers (WordPress) */
.alignnone             { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter        { display: block; margin: 5px auto; }
.alignright            { float: right; margin: 5px 0 10px 20px; }
.alignleft             { float: left; margin: 5px 20px 10px 0; }
a img.alignright       { float: right; margin: 5px 0 10px 20px; }
a img.alignnone        { margin: 5px 20px 10px 0; }
a img.alignleft        { float: left; margin: 5px 20px 10px 0; }
a img.aligncenter      { display: block; margin-left: auto; margin-right: auto; }

/* 404 */
.four0four {
    text-align: center;
    padding:    100px 0 80px;
}

/* Block divider */
.block-divider {
    margin:     30px 0;
    height:     1px;
    background: var(--bf-border);
    box-shadow: 0 1px 0 rgba(255,255,255,.1);
}

/* Progress bar */
body .progress {
    background-color: #19191e;
}

/* Slider home strip */
#sliderhome {
    margin-top:    0;
    margin-bottom: 0;
    transition:    var(--bf-transition-linear);
    padding:       0;
    height:        380px;
    background:    var(--bf-bg-panel);
}


/* ============================================================
   21. News Block — home grid / isotope
   ============================================================ */
.main-news-block [class*=col],
.main-news-block [class*=col] a {
    padding:  0;
    margin:   0;
    overflow: hidden;
}

.main-news-block [class*=col] h1,
.main-news-block [class*=col] h2 {
    position:    absolute;
    left:        30px;
    top:         30px;
    color:       var(--bf-text-white);
    padding:     0 30px 0 0;
    margin:      0;
    text-transform: none;
    font-weight: 600;
    text-shadow: 0 0 5px rgba(0,0,0,1);
    transition:  var(--bf-transition);
    z-index:     11;
}

.main-news-block .dkz-col-4 h2  { font-size: 28px; }
.main-news-block .dkz-col-8 h1  { line-height: 48px; font-size: 43px; }

.main-news-block [class*=col]:hover h1,
.main-news-block [class*=col]:hover h2 {
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    color:       var(--bf-accent);
    transition:  var(--bf-transition);
}

/* Hover overlay */
.news-dark-hover {
    background: rgba(0,0,0,.35);
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    opacity:    1;
    transition: var(--bf-transition);
    z-index:    10;
}

.main-news-block [class*=col] a:hover > .news-dark-hover,
.news-dark-hover:hover {
    opacity:    0;
    transition: var(--bf-transition);
}

/* News block items — meta icons */
.main-news-block [class*=col] h1 i,
.main-news-block [class*=col] h2 i {
    font-size:   12px;
    font-family: Arial;
    text-transform: none;
    font-style:  normal;
    text-shadow: 0 1px 2px var(--bf-border);
    color:       var(--bf-accent);
    transition:  var(--bf-transition);
    background:  rgba(0,0,0,.5);
    display:     inline-block;
    padding:     0 5px 0 0;
}

.main-news-block [class*=col]:hover h1 i,
.main-news-block [class*=col]:hover h2 i {
    color:      var(--bf-text-white);
    transition: var(--bf-transition);
}


/* ============================================================
   22. Social Block Buttons
   ============================================================ */
.socialb-wrapper li {
    list-style: none;
    display:    inline-block;
    padding:    0;
    width:      17%;
    margin:     0 1% 3% 1.2%;
    background: #1a1c20;
    border:     1px solid var(--bf-border);
    box-shadow: var(--bf-shadow-inset);
}

.socialb-wrapper li a {
    display:    block;
    padding:    15px 10px;
    text-align: center;
    font-size:  22px;
    box-shadow: none;
}

.socialb-wrapper li a:hover {
    color:      var(--bf-text-white);
    box-shadow: var(--bf-shadow-inset);
}

.socialb-wrapper li a.s-facebook:hover { background: var(--bf-social-facebook); }
.socialb-wrapper li a.s-twitter:hover  { background: var(--bf-social-twitter); }
.socialb-wrapper li a.s-twitch:hover   { background: var(--bf-social-twitch); }
.socialb-wrapper li a.s-youtube:hover  { background: var(--bf-social-youtube); }
.socialb-wrapper li a.s-steam:hover    { background: var(--bf-social-steam); }
.socialb-wrapper li a.s-rss:hover      { background: var(--bf-social-rss); }
.socialb-wrapper li a.s-dribbble:hover { background: var(--bf-social-dribbble); }
.socialb-wrapper li a.s-vimeo:hover    { background: var(--bf-social-vimeo); }
.socialb-wrapper li a.s-google:hover   { background: var(--bf-social-google); }
.socialb-wrapper li a.s-pinterest:hover { background: #cc2028; }


/* ============================================================
   23. Tabs — nav-tabs style
   ============================================================ */
.nav-tabs > li,
.block_tabs .nav-tabs > li {
    opacity:      1;
    float:        left;
    position:     relative;
    display:      block;
    margin:       0 2px;
    color:        var(--bf-text-white);
    border-radius: 4px 4px 0 0;
}

.nav-tabs > li::before,
.block_tabs .nav-tabs > li::before {
    content:      '';
    width:        100%;
    height:       100%;
    border:       1px solid var(--bf-border);
    border-radius: var(--bf-radius) var(--bf-radius) 0 0;
    position:     absolute;
    opacity:      1;
    transition:   var(--bf-transition-fast);
    background:   var(--bf-bg-panel-alt);
    box-shadow:   var(--bf-shadow-panel);
}

.nav-tabs > li:hover::before,
.nav-tabs > li:focus::before,
.nav-tabs > li.ui-tabs-active::before {
    opacity:    0;
    transition: var(--bf-transition-fast);
}

.nav-tabs > li > a,
.block_tabs .nav-tabs > li > a {
    display:        block;
    padding:        13px 15px;
    text-decoration: none;
    z-index:        1;
    position:       relative;
    color:          var(--bf-text-white);
    font-family:    var(--bf-font-ui);
    font-size:      14px;
    text-transform: uppercase;
    font-weight:    800;
    text-shadow:    0 1px 3px var(--bf-border);
}

.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
    color: var(--bf-text-white);
}


/* ============================================================
   24. Modals
   ============================================================ */
body .modal-content {
    background:   var(--bf-bg-panel);
    box-shadow:   var(--bf-shadow-panel);
    border:       1px solid var(--bf-border);
    border-top:   0;
    padding:      20px;
    color:        var(--bf-text-light);
    text-align:   left;
    position:     relative;
    border-radius: 6px;
    outline:      0;
}

.modal-header {
    background-color: var(--bf-bg-dark);
    border:           1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-panel);
}

.modal-header h3 {
    font-size:      14px;
    text-transform: uppercase;
    padding:        13px 17px;
    margin:         0;
    background:     url(../img/stripe.png) top left;
    font-family:    var(--bf-font-ui);
    color:          var(--bf-text-white);
    font-weight:    800;
}


/* ============================================================
   25. Post Review / Rating
   ============================================================ */
.post-review {
    float:   right;
    margin:  25px 25px 15px;
    width:   270px;
    background: var(--bf-bg-row-alt);
    border:  1px solid var(--bf-border);
    box-shadow: var(--bf-shadow-inset);
}

.post-review ul {
    border-top: 1px solid var(--bf-border);
    list-style: none;
    margin:     0;
    padding:    0;
}

.post-review ul li {
    padding:        15px 25px;
    font-family:    var(--bf-font-ui);
    text-transform: uppercase;
    color:          var(--bf-text-light);
    border-bottom:  1px solid var(--bf-border);
}

.post-review ul li:last-child { border-bottom: 0; }

.overall-score {
    margin-left: 35px;
    font-size:   25px;
    padding:     20px;
}

.post-review-numbers .overall-score {
    font-size:   35px;
    padding:     20px;
    text-align:  center;
    margin-left: 0;
}

div.rating {
    font-family: FontAwesome;
    position:    relative;
    display:     inline-block;
    font-size:   18px;
    text-shadow: 0 1px 2px rgba(0,0,0,.75);
}

.overall-score .rating { font-size: 26px; }

.score {
    display:       inline-block;
    position:      relative;
    text-align:    right;
    width:         49%;
    vertical-align: top;
}


/* ============================================================
   26. Profile / User Pages
   ============================================================ */
.profile > .dkz-panel,
.profile > .wcontainer {
    padding-bottom: 20px;
    background:     #242424;
    padding-left:   15px;
    padding-top:    0;
    margin-left:    0;
}

.profile-fimage {
    margin-left:  -10px;
    margin-right: -10px;
    min-height:   280px;
    position:     relative;
}

.profile-fimage img.wp-post-image {
    max-width:  100%;
    width:      100%;
    min-height: 280px;
}

/* Avatar card */
.profile-info .avatar-card {
    position:   absolute;
    top:        20px;
    left:       0;
    padding:    10px;
    width:      220px;
    font-size:  14px;
    text-align: center;
    color:      var(--bf-text-body);
    border:     1px solid var(--bf-border);
    box-shadow: var(--bf-shadow-card);
    background-color: var(--bf-bg-dark);
    background-image: var(--bf-gradient-chrome);
    z-index:    1000000;
}

.profile-info .avatar-card img {
    max-width:  100%;
    height:     auto;
    min-height: 198px;
    max-height: 200px;
    border:     1px solid var(--bf-bg-dark);
}

.profile-info .avatar-card p {
    margin-top:     15px;
    margin-bottom:  5px;
    font-size:      16px;
    font-weight:    700;
    text-transform: uppercase;
    font-family:    var(--bf-font-ui);
    color:          var(--bf-text-white);
    text-shadow:    0 2px 3px var(--bf-border);
}

.user-name {
    padding-left: 300px;
    float:        left;
}

/* About profile list */
ul.about-profile {
    padding:    0;
    margin:     0;
    word-wrap:  break-word;
    background: var(--bf-bg-panel);
    box-shadow: var(--bf-shadow-panel);
    border:     1px solid var(--bf-border);
    border-top: 0;
    padding:    20px;
    color:      var(--bf-text-light);
}

ul.about-profile li {
    margin:     0;
    width:      100%;
    padding:    15px;
    font-size:  12px;
    color:      var(--bf-text-light);
    list-style: none;
}

ul.about-profile li strong {
    font-size:  14px;
    font-weight: 700;
    color:      var(--bf-text-body);
}

ul.about-profile li:nth-child(even) {
    background:    var(--bf-bg-row-alt);
    border-top:    1px solid var(--bf-border);
    border-bottom: 1px solid var(--bf-border);
    box-shadow:    var(--bf-shadow-inset);
}

ul.about-profile li:last-child { border-bottom: 0; }

/* Friends wrapper */
.friendswrapper {
    z-index:  999;
    position: absolute;
    top:      0;
    right:    0;
}

.friendswrapper .friends-count {
    padding:        15px 20px;
    font-size:      16px;
    color:          var(--bf-text-white);
    text-shadow:    0 1px 3px var(--bf-border);
    font-family:    var(--bf-font-ui);
    font-weight:    800;
    text-transform: uppercase;
    z-index:        1;
    position:       relative;
    background-color: var(--bf-bg-dark);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-inset);
    border:           1px solid var(--bf-border);
}

.friendswrapper .add-friend {
    margin-right:   5px;
    border:         1px solid var(--bf-border);
    padding:        10px 13px;
    border-radius:  5px;
    color:          var(--bf-text-white);
    font-size:      12px;
    text-transform: uppercase;
    font-weight:    800;
    font-family:    var(--bf-font-ui);
    position:       absolute;
    top:            6px;
    z-index:        0;
    left:           -32px;
    transition:     var(--bf-transition-fast);
    text-shadow:    0 1px 3px rgba(0,0,0,.7);
    background-color: var(--bf-bg-dark);
    background-image: var(--bf-gradient-chrome);
}

.friendswrapper:hover .add-friend {
    left:       -94%;
    transition: var(--bf-transition-fast);
}


/* ============================================================
   27. Matches Pages
   ============================================================ */
#matches ul.cmatchesw li .member-list-wrapper,
#matches ul.cmatchesw.nochallenges li {
    background-color: var(--bf-bg-dark);
    border:           1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-panel);
    padding:          7px 10px 5px;
    position:         relative;
    top:              0;
    z-index:          2;
}

#matches ul.cmatchesw li span {
    position:      absolute;
    bottom:        -6px;
    left:          14px;
    display:       block;
    padding:       2px 8px;
    border-radius: var(--bf-radius) var(--bf-radius) 0 0;
    z-index:       99999;
    font-weight:   700;
    color:         var(--bf-text-white);
    font-size:     12px;
    min-width:     32px;
    text-align:    center;
    background-color: var(--bf-bg-dark);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-panel);
    border:           1px solid var(--bf-border);
}

/* Match status bars */
.matchstatus {
    position:   absolute;
    right:      0;
    top:        0;
    width:      5px;
    border-left: 1px solid var(--bf-border);
    height:     100%;
    background: var(--bf-lose);
}

.mwin  .matchstatus { background: var(--bf-win); }
.mlose .matchstatus { background: var(--bf-lose); }
.mtie  .matchstatus { background: var(--bf-tie); }
.notsubmitted .matchstatus { background: var(--bf-text-body); }

/* Match score colours */
#matches ul.cmatchesw li.mlose .clanb span,
#matches ul.cmatchesw li.mwin .clana span { color: var(--bf-win); }
#matches ul.cmatchesw li.mtie span        { color: var(--bf-tie); }
#matches ul.cmatchesw li.mlose .clana span,
#matches ul.cmatchesw li.mwin .clanb span { color: var(--bf-lose); }

/* VS badge */
#matches .match-fimage .mversus {
    font-size:      62px;
    padding:        0 10px 13px;
    position:       absolute;
    top:            32%;
    left:           46.4%;
    z-index:        999999;
    height:         auto;
    line-height:    59px;
    font-weight:    700;
    font-family:    var(--bf-font-ui);
    color:          var(--bf-text-white);
    text-shadow:    0 2px 3px var(--bf-border);
    background-color: var(--bf-bg-dark);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-panel);
    border:           1px solid var(--bf-border);
}


/* ============================================================
   28. Miscellaneous / Third-Party Overrides
   ============================================================ */

/* Nicescroll */
.nicescroll-rails {
    z-index: 999 !important;
}

/* WP core UI */
body .wp-core-ui .button,
body .wp-core-ui .button-secondary {
    color:      #555;
    background: #1a1a1a;
    border:     1px solid var(--bf-border);
    box-shadow: none;
}

body .wp-core-ui .button:hover,
body .wp-core-ui .button:focus {
    background:  #131313;
    border-color: var(--bf-border);
    color:       var(--bf-text-body);
}

body .quicktags-toolbar {
    border:       1px solid var(--bf-border);
    border-bottom: 0;
    background:   var(--bf-bg-input);
}

/* Media modal */
.media-modal input[type=text],
.media-modal select,
.media-modal textarea {
    background: #fff !important;
}

/* BX slider mobile fix */
.bx-wrapper img {
    min-height: 340px;
}

@media screen and (min-width:320px) and (max-width:768px) {
    .bx-wrapper img {
        min-height: 340px;
    }
    .slider-text-wrapper {
        width: 50% !important;
        left:  50% !important;
        right: auto;
    }
}

/* Thickbox overrides */
body div#TB_window {
    background-color: var(--bf-bg-dark);
    border:           1px solid var(--bf-border);
    background-image: var(--bf-gradient-chrome);
    box-shadow:       var(--bf-shadow-panel);
}

body div#TB_title {
    background:   transparent;
    padding:      7px;
    height:       auto !important;
    border-bottom: 1px solid var(--bf-border);
    margin-bottom: 10px;
}

body div#TB_ajaxContent {
    overflow: visible;
    width:    100% !important;
}

#TB_ajaxContent button {
    margin-top:     0;
    padding:        10px 30px;
    font-size:      13px;
    width:          49%;
    float:          left;
    color:          var(--bf-text-bright);
    border:         1px solid var(--bf-border);
    text-transform: uppercase;
    font-weight:    800;
    font-family:    var(--bf-font-ui);
    background:     var(--bf-bg-panel-alt);
    box-shadow:     var(--bf-shadow-panel);
}

/* Datepicker */
.ui-datepicker {
    background-color: var(--bf-bg-panel);
    border:           1px solid #66afe9;
    border-radius:    4px;
    box-shadow:       0 0 8px rgba(102,175,233,.6);
    display:          none;
    margin-top:       4px;
    padding:          10px;
    width:            240px;
    z-index:          10000 !important;
}

.ui-datepicker .ui-datepicker-current-day {
    background-color: #4289cc;
}

.ui-datepicker .ui-datepicker-current-day a {
    color: var(--bf-text-white);
}


/* ============================================================
   29. Responsive
   ============================================================ */

/* Tablet */
@media (max-width: 960px) {
    /* Side artwork wings take too much horizontal room — hide them */
    #dkz-page::before,
    #dkz-page::after {
        display: none;
    }

    .dkz-wrapper {
        flex-direction: column;
    }

    .dkz-sidebar {
        width: 100%;
    }

    .dkz-footer__widgets-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .dkz-nav-toggle {
        display: block;
    }

    .dkz-nav ul {
        display:          none;
        flex-direction:   column;
        background-color: var(--bf-bg-dark);
        border-top:       1px solid var(--bf-border);
        padding:          8px 0;
        gap:              0;
    }

    .dkz-nav ul.is-open {
        display: flex;
    }

    .dkz-nav ul li > a {
        padding:   12px 20px;
        font-size: 13px;
    }

    .dkz-nav ul li ul {
        position:     static;
        border:       none;
        border-radius: 0;
        padding-left: 30px;
        opacity:      1;
        visibility:   visible;
        display:      none;
    }

    .dkz-nav ul li:hover > ul {
        display: none;
    }

    .dkz-nav ul li.is-open > ul {
        display: flex;
    }

    .dkz-navbar {
        flex-wrap: wrap;
        height:    auto;
        padding:   8px 0;
    }

    .dkz-logo {
        width: 70%;
    }

    .dkz-footer__widgets-inner {
        grid-template-columns: 1fr;
    }

    .dkz-copyright__inner {
        flex-direction: column;
        text-align:     center;
    }

    .dkz-back-to-top {
        bottom: 16px;
        right:  16px;
    }

    .post-review {
        float:  none;
        width:  100%;
        margin: 15px 0;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .dkz-container {
        padding: 0 14px;
    }

    .dkz-post-nav {
        flex-direction: column;
    }

    .socialb-wrapper li {
        width: 30%;
    }
}