/* ============================================================
   STEVEKRAFT.COM CONFIG FAMILY
   SPORTS / 2J THEME V1

   Shared by:
   /config/
   /config/radio/
   /config/Security/
   /config/THOR/

   Scoped only to Sports / 2J.
   Normal and holiday themes remain untouched.
   ============================================================ */

body[data-website-theme="sports2j"] {

    --cfg2j-yellow:#ffe500;
    --cfg2j-yellow-soft:#d9c400;
    --cfg2j-black:#030607;
    --cfg2j-panel:#071016;
    --cfg2j-panel2:#0a151c;
    --cfg2j-line:rgba(255,229,0,.48);
    --cfg2j-muted:#aebbc5;

    color:#fff;

    background:
        radial-gradient(
            circle at 80% 8%,
            rgba(255,229,0,.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #040708 0%,
            #071016 45%,
            #030607 100%
        ) !important;
}


/* ============================================================
   RESTORE CONFIG HERO

   Shared homepage Sports CSS intentionally hides main > .hero.
   Config pages use the same structural class.
   ============================================================ */

body[data-website-theme="sports2j"]
main > .hero {

    display:block !important;
}


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

body[data-website-theme="sports2j"]
.site-header {

    border-bottom:
        1px solid
        rgba(255,229,0,.55) !important;

    background:
        linear-gradient(
            180deg,
            rgba(6,10,12,.98),
            rgba(3,7,9,.98)
        ) !important;
}

body[data-website-theme="sports2j"]
.site-header::after {

    content:"";

    display:block;

    height:4px;

    background:
        repeating-linear-gradient(
            135deg,
            var(--cfg2j-yellow) 0 18px,
            #050708 18px 36px
        );
}

body[data-website-theme="sports2j"]
.brand {

    color:#fff !important;

    font-weight:900 !important;

    letter-spacing:.035em;
}

body[data-website-theme="sports2j"]
.brand-badge {

    color:#050708 !important;

    border-color:
        var(--cfg2j-yellow) !important;

    background:
        var(--cfg2j-yellow) !important;

    font-weight:1000 !important;
}

body[data-website-theme="sports2j"]
.nav-links a {

    color:#dce5eb !important;
}

body[data-website-theme="sports2j"]
.nav-links a:hover,
body[data-website-theme="sports2j"]
.nav-links a:focus-visible {

    color:
        var(--cfg2j-yellow) !important;
}


/* ============================================================
   HERO
   ============================================================ */

body[data-website-theme="sports2j"]
.hero {

    position:relative;

    overflow:hidden;

    border-bottom:
        1px solid
        rgba(255,229,0,.32) !important;

    background:
        linear-gradient(
            115deg,
            rgba(255,229,0,.055),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #081116,
            #05090c
        ) !important;
}

body[data-website-theme="sports2j"]
.hero .container {

    position:relative;

    z-index:1;
}

body[data-website-theme="sports2j"]
.hero .container::before {

    content:"2J";

    position:absolute;

    z-index:-1;

    right:
        clamp(8px,5vw,70px);

    top:50%;

    transform:
        translateY(-50%)
        skewX(-8deg);

    color:
        rgba(255,229,0,.075);

    font-size:
        clamp(145px,22vw,320px);

    font-weight:1000;

    font-style:italic;

    line-height:.8;

    pointer-events:none;
}

body[data-website-theme="sports2j"]
.hero .container::after {

    content:"630 AUTO";

    position:absolute;

    right:
        clamp(18px,5vw,76px);

    bottom:
        clamp(14px,2vw,28px);

    padding:
        5px 10px;

    border-radius:
        4px;

    color:#050708;

    background:
        var(--cfg2j-yellow);

    font-size:
        clamp(9px,.8vw,12px);

    font-weight:1000;

    letter-spacing:.12em;

    transform:
        skewX(-7deg);
}

body[data-website-theme="sports2j"]
.eyebrow,
body[data-website-theme="sports2j"]
.kicker {

    color:
        var(--cfg2j-yellow) !important;

    font-weight:900 !important;

    letter-spacing:.14em !important;

    text-transform:uppercase;
}

body[data-website-theme="sports2j"]
.hero h1 {

    color:#fff !important;

    font-weight:1000 !important;

    font-style:italic;

    letter-spacing:-.035em;

    text-transform:uppercase;

    text-shadow:
        0 4px 0
        rgba(0,0,0,.32);
}

body[data-website-theme="sports2j"]
.hero h1::after {

    content:"KRAFT RACING";

    display:block;

    margin-top:10px;

    color:
        var(--cfg2j-yellow);

    font-size:
        clamp(13px,1.5vw,21px);

    font-style:normal;

    letter-spacing:.18em;

    line-height:1;
}

body[data-website-theme="sports2j"]
.hero p,
body[data-website-theme="sports2j"]
.description {

    color:
        var(--cfg2j-muted) !important;
}


/* ============================================================
   HERO CARDS / QUICK SPECS
   ============================================================ */

body[data-website-theme="sports2j"]
.hero-card,
body[data-website-theme="sports2j"]
.quick,
body[data-website-theme="sports2j"]
.quick-spec,
body[data-website-theme="sports2j"]
.audit {

    border:
        1px solid
        rgba(255,229,0,.42) !important;

    background:
        rgba(5,13,18,.94) !important;

    box-shadow:
        0 16px 35px
        rgba(0,0,0,.25) !important;
}


/* ============================================================
   SECTION HEADINGS
   ============================================================ */

body[data-website-theme="sports2j"]
.section {

    background:
        transparent !important;
}

body[data-website-theme="sports2j"]
.section-heading h2 {

    color:#fff !important;

    font-weight:1000 !important;

    font-style:italic;

    text-transform:uppercase;
}

body[data-website-theme="sports2j"]
.section-heading h2::after {

    content:" //";

    color:
        var(--cfg2j-yellow);
}

body[data-website-theme="sports2j"]
.section-heading p {

    color:
        var(--cfg2j-muted) !important;
}


/* ============================================================
   COMPONENT / SYSTEM / CARD FAMILY
   ============================================================ */

body[data-website-theme="sports2j"]
.component,
body[data-website-theme="sports2j"]
.system,
body[data-website-theme="sports2j"]
.card,
body[data-website-theme="sports2j"]
.storage-card,
body[data-website-theme="sports2j"]
.subcard {

    border:
        1px solid
        rgba(255,229,0,.42) !important;

    background:
        linear-gradient(
            180deg,
            rgba(8,18,24,.98),
            rgba(4,10,14,.98)
        ) !important;

    box-shadow:
        0 14px 34px
        rgba(0,0,0,.24) !important;
}

body[data-website-theme="sports2j"]
.component::before,
body[data-website-theme="sports2j"]
.system::before,
body[data-website-theme="sports2j"]
.card::before,
body[data-website-theme="sports2j"]
.storage-card::before,
body[data-website-theme="sports2j"]
.subcard::before {

    content:"";

    display:block;

    height:4px;

    background:
        repeating-linear-gradient(
            135deg,
            var(--cfg2j-yellow) 0 16px,
            #050708 16px 32px
        );
}


/* ============================================================
   CARD HEADINGS / LABELS
   ============================================================ */

body[data-website-theme="sports2j"]
.component-head,
body[data-website-theme="sports2j"]
.system-head {

    border-color:
        rgba(255,229,0,.24) !important;

    background:
        rgba(255,229,0,.035) !important;
}

body[data-website-theme="sports2j"]
.component-kicker,
body[data-website-theme="sports2j"]
.category,
body[data-website-theme="sports2j"]
.role,
body[data-website-theme="sports2j"]
.os {

    color:
        var(--cfg2j-yellow) !important;
}

body[data-website-theme="sports2j"]
.product,
body[data-website-theme="sports2j"]
.product-name,
body[data-website-theme="sports2j"]
.component h3,
body[data-website-theme="sports2j"]
.system h3,
body[data-website-theme="sports2j"]
.card h3,
body[data-website-theme="sports2j"]
.storage-card h3,
body[data-website-theme="sports2j"]
.subcard h3 {

    color:#fff !important;
}


/* ============================================================
   SPECS / DETAILS
   ============================================================ */

body[data-website-theme="sports2j"]
.spec,
body[data-website-theme="sports2j"]
.detail,
body[data-website-theme="sports2j"]
.parts {

    border-color:
        rgba(117,151,175,.30) !important;

    background:
        rgba(4,12,17,.92) !important;
}

body[data-website-theme="sports2j"]
.spec strong,
body[data-website-theme="sports2j"]
.detail strong {

    color:#fff !important;
}

body[data-website-theme="sports2j"]
.features,
body[data-website-theme="sports2j"]
.feature-list,
body[data-website-theme="sports2j"]
.note {

    color:
        var(--cfg2j-muted) !important;
}


/* ============================================================
   INVENTORY TOOLBAR
   ============================================================ */

body[data-website-theme="sports2j"]
.toolbar,
body[data-website-theme="sports2j"]
.toolbar-inner {

    border-color:
        rgba(255,229,0,.34) !important;

    background:
        rgba(4,10,14,.96) !important;
}

body[data-website-theme="sports2j"]
.search {

    border-color:
        rgba(255,229,0,.36) !important;

    background:
        #071016 !important;

    color:#fff !important;
}

body[data-website-theme="sports2j"]
.filter-btn {

    border-color:
        rgba(255,229,0,.36) !important;

    color:#fff !important;

    background:
        #081219 !important;
}

body[data-website-theme="sports2j"]
.filter-btn.active {

    color:#050708 !important;

    border-color:
        var(--cfg2j-yellow) !important;

    background:
        var(--cfg2j-yellow) !important;
}


/* ============================================================
   NETWORK DIAGRAM
   ============================================================ */

body[data-website-theme="sports2j"]
.network-diagram,
body[data-website-theme="sports2j"]
.network-backbone,
body[data-website-theme="sports2j"]
.network-node,
body[data-website-theme="sports2j"]
.network-note {

    border-color:
        rgba(255,229,0,.40) !important;

    background:
        rgba(5,13,18,.94) !important;
}

body[data-website-theme="sports2j"]
.network-arrow,
body[data-website-theme="sports2j"]
.network-down {

    color:
        var(--cfg2j-yellow) !important;
}


/* ============================================================
   BUTTONS / LINKS
   ============================================================ */

body[data-website-theme="sports2j"]
.button {

    color:#fff !important;

    border:
        1px solid
        rgba(255,229,0,.48) !important;

    background:
        #081219 !important;

    font-weight:900 !important;
}

body[data-website-theme="sports2j"]
.button.primary {

    color:#050708 !important;

    border-color:
        var(--cfg2j-yellow) !important;

    background:
        var(--cfg2j-yellow) !important;
}

body[data-website-theme="sports2j"]
.text-link,
body[data-website-theme="sports2j"]
.home-link,
body[data-website-theme="sports2j"]
.audit-links a {

    color:
        var(--cfg2j-yellow) !important;
}


/* ============================================================
   PHOTOS / VIDEO
   ============================================================ */

body[data-website-theme="sports2j"]
.photo,
body[data-website-theme="sports2j"]
.system-photo,
body[data-website-theme="sports2j"]
.room-photo,
body[data-website-theme="sports2j"]
.video-wrap {

    border-color:
        rgba(255,229,0,.42) !important;

    box-shadow:
        0 12px 26px
        rgba(0,0,0,.28);
}


/* ============================================================
   FOOTER
   ============================================================ */

body[data-website-theme="sports2j"]
footer {

    border-top:
        1px solid
        rgba(255,229,0,.44) !important;

    background:
        #030608 !important;
}

body[data-website-theme="sports2j"]
footer strong {

    color:
        var(--cfg2j-yellow) !important;
}


/* ============================================================
   MOBILE SAFETY
   ============================================================ */

@media (max-width:760px) {

    body[data-website-theme="sports2j"]
    .hero .container::before {

        right:-18px;

        font-size:
            clamp(118px,42vw,190px);
    }

    body[data-website-theme="sports2j"]
    .hero .container::after {

        right:14px;

        bottom:12px;
    }

    body[data-website-theme="sports2j"]
    .hero h1 {

        overflow-wrap:anywhere;
    }

    body[data-website-theme="sports2j"]
    .component,
    body[data-website-theme="sports2j"]
    .system,
    body[data-website-theme="sports2j"]
    .card,
    body[data-website-theme="sports2j"]
    .storage-card,
    body[data-website-theme="sports2j"]
    .subcard {

        min-width:0;
    }
}
/* ============================================================
   V2 - EQUIPMENT INVENTORY SPORTS DIVIDER

   Normal theme keeps the original FILE316.GIF unchanged.
   Sports / 2J hides that image and displays a racing stripe.
   ============================================================ */

.sports2j-divider {
    display:none;
}

body[data-website-theme="sports2j"]
.hero > img.divider {
    display:none !important;
}

body[data-website-theme="sports2j"]
.hero > .sports2j-divider {

    display:block;

    width:min(900px,90%);

    height:10px;

    margin:24px auto 0;

    opacity:1;

    border:
        1px solid
        rgba(255,229,0,.72);

    border-radius:2px;

    background:
        repeating-linear-gradient(
            135deg,
            #ffe500 0 26px,
            #050708 26px 52px
        );

    box-shadow:
        0 0 18px
        rgba(255,229,0,.12);
}