/* ============================================================
   STEVEKRAFT.COM
   DAD / HOT TUB
V1

   Medium-strength Kraft Racing / project-shop treatment.
   Normal + holiday themes remain unchanged.
   ============================================================ */


/* ============================================================
   SPORTS COLOR SYSTEM
   ============================================================ */

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

    --ht-yellow:#ffe000;
    --ht-yellow2:#ffc400;
    --ht-black:#020405;
    --ht-panel:#071017;
    --ht-panel2:#0a151d;
    --ht-panel3:#0d1921;
    --ht-line:rgba(255,224,0,.48);
    --ht-line-soft:rgba(255,224,0,.22);
    --ht-text:#f5f7f8;
    --ht-muted:#b0bdc7;

    color:
        var(--ht-text) !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,224,0,.045),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #040709 0%,
            #071016 35%,
            #030608 100%
        ) !important;
}


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

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

    position:relative;

    background:
        rgba(2,5,7,.97) !important;

    border-bottom:
        1px solid
        rgba(255,224,0,.52) !important;
}

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

    content:"";

    display:block;

    height:5px;

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

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

    color:#fff !important;

    font-weight:950 !important;

    letter-spacing:.02em;
}

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

    content:"2J";

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:38px;

    height:30px;

    margin-right:10px;

    padding:0 8px;

    color:#020405;

    background:
        var(--ht-yellow);

    border-radius:7px;

    font-size:14px;

    font-weight:1000;

    font-style:italic;

    vertical-align:middle;
}

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

    background:
        #030709 !important;
}

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

    color:
        #e9eef1 !important;

    font-weight:
        750;
}

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

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


/* ============================================================
   HERO
   Shared Sports CSS hides main > .hero on some pages.
   Restore it locally.
   ============================================================ */

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

    display:block !important;
}

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

    position:relative;

    overflow:hidden;

    margin-bottom:
        32px !important;

    padding:
        clamp(38px,6vw,76px)
        clamp(20px,4vw,52px) !important;

    border:
        1px solid
        rgba(255,224,0,.54) !important;

    border-radius:
        18px !important;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(255,224,0,.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0b171f 0%,
            #04090c 60%,
            #020405 100%
        ) !important;

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.26) !important;
}

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

    content:"PROJECT BUILD • SUMMER 2018";

    display:inline-block;

    margin-bottom:
        16px;

    padding:
        5px 12px;

    color:#020405;

    background:
        var(--ht-yellow);

    border-radius:
        5px;

    font-size:
        12px;

    font-weight:
        950;

    font-style:
        italic;

    letter-spacing:
        .11em;
}

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

    content:"2J  |  KRAFT PROJECTS";

    position:absolute;

    right:
        28px;

    bottom:
        18px;

    color:
        rgba(255,224,0,.30);

    font-size:
        clamp(17px,2vw,28px);

    font-weight:
        1000;

    font-style:
        italic;

    letter-spacing:
        .08em;

    pointer-events:none;
}

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

    color:#fff !important;

    font-size:
        clamp(42px,7vw,76px) !important;

    line-height:
        .95 !important;

    font-style:
        italic;

    font-weight:
        1000 !important;

    letter-spacing:
        -.045em;
}

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

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

    font-weight:
        900 !important;

    letter-spacing:
        .08em;
}

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

    color:
        #c3ced5 !important;

    max-width:
        900px;
}


/* ============================================================
   MAIN STORY SECTIONS
   ============================================================ */

body[data-website-theme="sports2j"]
main > section:not(.hero) {

    position:relative;

    margin:
        0 auto 32px !important;

    padding:
        28px clamp(18px,3vw,30px) 32px !important;

    border:
        1px solid
        rgba(255,224,0,.20);

    border-radius:
        16px;

    background:
        linear-gradient(
            180deg,
            rgba(9,19,26,.78),
            rgba(3,8,11,.72)
        );
}

body[data-website-theme="sports2j"]
main > section:not(.hero)::before {

    content:"";

    position:absolute;

    top:0;
    left:18px;
    right:18px;

    height:4px;

    border-radius:
        0 0 4px 4px;

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

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

    margin-top:
        8px !important;

    color:
        #fff !important;

    font-size:
        clamp(27px,3vw,38px) !important;

    line-height:
        1.08;

    font-weight:
        950 !important;

    font-style:
        italic;

    letter-spacing:
        -.025em;
}

body[data-website-theme="sports2j"]
section > h2::before {

    content:"//";

    display:inline-block;

    margin-right:
        11px;

    color:
        var(--ht-yellow);

    font-weight:
        1000;
}

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

    color:
        var(--ht-muted) !important;

    line-height:
        1.75 !important;
}


/* ============================================================
   STORY CARDS
   ============================================================ */

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

    gap:
        18px !important;
}

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

    position:relative;

    overflow:hidden;

    border:
        1px solid
        rgba(255,224,0,.34) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            160deg,
            #0b171f,
            #050b0f
        ) !important;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.18) !important;
}

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

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    z-index:2;

    background:
        linear-gradient(
            90deg,
            var(--ht-yellow),
            rgba(255,224,0,.15)
        );
}

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

    display:block;

    width:100%;

    border-bottom:
        1px solid
        rgba(255,224,0,.26) !important;
}

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

    padding:
        16px 17px 18px !important;
}

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

    color:
        #fff !important;

    font-weight:
        900 !important;
}

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

    color:
        #b8c4cc !important;

    line-height:
        1.62;
}


/* ============================================================
   FEATURE CARDS
   ============================================================ */

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

    position:relative;

    overflow:hidden;

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

    border-radius:
        16px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255,224,0,.05),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #0c1820,
            #04090c
        ) !important;

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

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

    content:"KRAFT PROJECT";

    position:absolute;

    right:
        14px;

    top:
        12px;

    z-index:3;

    padding:
        4px 8px;

    color:#020405;

    background:
        var(--ht-yellow);

    border-radius:
        4px;

    font-size:
        10px;

    line-height:1;

    font-weight:
        950;

    font-style:
        italic;

    letter-spacing:
        .08em;
}

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

    border:
        1px solid
        rgba(255,224,0,.30) !important;
}

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

    color:#fff !important;

    font-weight:
        950 !important;
}

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

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


/* ============================================================
   CALLOUTS
   ============================================================ */

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

    position:relative;

    margin-top:
        20px !important;

    padding:
        18px 20px 18px 23px !important;

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

    border-left:
        5px solid
        var(--ht-yellow) !important;

    border-radius:
        10px !important;

    color:
        #d9e1e6 !important;

    background:
        rgba(255,224,0,.045) !important;
}

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

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


/* ============================================================
   VIDEOS
   ============================================================ */

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

    overflow:hidden;

    margin-top:
        20px !important;

    padding:
        10px !important;

    border:
        1px solid
        rgba(255,224,0,.40) !important;

    border-radius:
        14px !important;

    background:
        #020506 !important;

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

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

    display:block;

    width:100%;

    border-radius:
        9px;
}


/* ============================================================
   COST SECTION
   ============================================================ */

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

    gap:
        16px !important;
}

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

    position:relative;

    overflow:hidden;

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

    border-radius:
        14px !important;

    background:
        linear-gradient(
            160deg,
            #0d1921,
            #04090c
        ) !important;

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

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

    content:"";

    display:block;

    height:5px;

    background:
        var(--ht-yellow);
}

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

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

    font-size:
        clamp(25px,3vw,34px) !important;

    font-weight:
        1000 !important;
}

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

    color:
        #bdc9d1 !important;
}


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

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

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}

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

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

    font-weight:
        800;
}

body[data-website-theme="sports2j"]
.feature a,
body[data-website-theme="sports2j"]
section > p:last-child a {

    display:inline-block;

    padding:
        9px 13px;

    border:
        1px solid
        var(--ht-yellow);

    border-radius:
        8px;

    color:
        #fff !important;

    background:
        rgba(2,6,8,.76);

    text-decoration:
        none;
}

body[data-website-theme="sports2j"]
.feature a:hover,
body[data-website-theme="sports2j"]
section > p:last-child a:hover {

    color:
        #020405 !important;

    background:
        var(--ht-yellow);
}


/* ============================================================
   IMAGES
   ============================================================ */

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

    image-rendering:
        auto;

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.16);
}


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

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

    position:relative;

    margin-top:
        40px;

    padding-top:
        28px !important;

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

    color:
        #899aa6 !important;

    background:
        #020405 !important;
}

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

    content:"2J  •  KRAFT PROJECTS  •  BUILD IT. FIX IT. IMPROVE IT.";

    position:absolute;

    left:50%;

    top:
        -11px;

    transform:
        translateX(-50%);

    width:
        max-content;

    max-width:
        88%;

    padding:
        3px 15px;

    color:
        var(--ht-yellow);

    background:
        #020405;

    font-size:
        11px;

    font-weight:
        950;

    font-style:
        italic;

    letter-spacing:
        .10em;

    text-align:center;
}


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

@media (max-width:760px) {

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

        padding:
            30px 18px 58px !important;

        border-radius:
            12px !important;
    }

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

        right:
            18px;

        bottom:
            15px;

        font-size:
            14px;
    }

    body[data-website-theme="sports2j"]
    main > section:not(.hero) {

        margin-bottom:
            22px !important;

        padding:
            24px 14px 26px !important;

        border-radius:
            12px;
    }

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

        font-size:
            28px !important;
    }

    body[data-website-theme="sports2j"]
    .card,
    body[data-website-theme="sports2j"]
    .feature,
    body[data-website-theme="sports2j"]
    .cost {

        border-radius:
            11px !important;
    }

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

        position:static;

        display:inline-block;

        margin:
            10px 10px 0;
    }

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

        font-size:
            9px;

        letter-spacing:
            .05em;
    }
}

/* ============================================================
   HOT TUB SPORTS2J V1 - NATURAL CARD HEIGHTS

   Some project photos are portrait while others are landscape.
   CSS Grid normally stretches every card in the row to match
   the tallest card. Keep each card at its natural content height.
   ============================================================ */

body[data-website-theme="sports2j"]
.story-grid {
    align-items:
        start !important;
}

body[data-website-theme="sports2j"]
.story-grid > .card {
    align-self:
        start !important;
}

/* ============================================================
   HOT TUB SPORTS2J V1 - INDEPENDENT STORY COLUMNS

   The original story-grid uses conventional CSS Grid.
   Portrait photos make an entire grid row as tall as the
   portrait card, leaving large blank areas under shorter cards.
uses two independent desktop columns instead:
   odd cards stack left, even cards stack right.

   No images are cropped or resized.
   Mobile returns to ordinary one-column document order.
   ============================================================ */

body[data-website-theme="sports2j"]
.story-grid {
    display:
        block !important;
}

body[data-website-theme="sports2j"]
.story-grid::after {
    content:
        "";

    display:
        block;

    clear:
        both;
}

body[data-website-theme="sports2j"]
.story-grid > .card {
    box-sizing:
        border-box;

    width:
        calc(50% - 9px) !important;

    margin:
        0 0 18px 0 !important;
}

body[data-website-theme="sports2j"]
.story-grid > .card:nth-child(odd) {
    float:
        left;

    clear:
        left;
}

body[data-website-theme="sports2j"]
.story-grid > .card:nth-child(even) {
    float:
        right;

    clear:
        right;
}


/* Mobile: restore straightforward source order. */

@media (max-width:760px) {

    body[data-website-theme="sports2j"]
    .story-grid > .card {

        float:
            none !important;

        clear:
            both !important;

        width:
            100% !important;

        margin:
            0 0 16px 0 !important;
    }

    body[data-website-theme="sports2j"]
    .story-grid > .card:last-child {

        margin-bottom:
            0 !important;
    }
}

/* ============================================================
   HOT TUB SPORTS2J V2 - TRUE STORY COLUMNS

   Desktop:
   Two actual independent columns. Portrait photos no longer
   force empty vertical space in the neighboring column.

   Mobile:
   Column wrappers disappear from layout and CSS ordering
   restores the original alternating card presentation.
   ============================================================ */

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

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap:
        18px !important;

    align-items:
        start !important;
}


/* Disable the old float clearfix. */

body[data-website-theme="sports2j"]
.story-grid::after {

    content:
        none !important;

    display:
        none !important;
}


/* Independent columns. */

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

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

    min-width:
        0;
}


/* Neutralize earlier float/card rules. */

body[data-website-theme="sports2j"]
.story-column > .card {

    float:
        none !important;

    clear:
        none !important;

    width:
        100% !important;

    margin:
        0 !important;

    align-self:
        auto !important;
}


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

@media (max-width:760px) {

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

        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            0 !important;
    }

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

        display:
            contents !important;
    }

    body[data-website-theme="sports2j"]
    .story-column > .card {

        float:
            none !important;

        clear:
            none !important;

        width:
            100% !important;

        margin:
            0 0 16px 0 !important;
    }

    body[data-website-theme="sports2j"]
    .story-column-left > .card:nth-child(1) {
        order:1;
    }

    body[data-website-theme="sports2j"]
    .story-column-right > .card:nth-child(1) {
        order:2;
    }

    body[data-website-theme="sports2j"]
    .story-column-left > .card:nth-child(2) {
        order:3;
    }

    body[data-website-theme="sports2j"]
    .story-column-right > .card:nth-child(2) {
        order:4;
    }

    body[data-website-theme="sports2j"]
    .story-column-left > .card:nth-child(3) {
        order:5;
    }

    body[data-website-theme="sports2j"]
    .story-column-right > .card:nth-child(3) {
        order:6;
    }

    body[data-website-theme="sports2j"]
    .story-column-right > .card:last-child {

        margin-bottom:
            0 !important;
    }
}